Hoje o mercado de apps movimenta por ano US$ 29,5 bilhões, e não para de crescer, confirmam especialistas do ramo. Os apps podem ser de diversos tipos, desde os que auxiliam nas tarefas diárias ou simplesmente são para diversão. A Microsoft possui a Windows Store, a loja de aplicativos para Windows 8.1/8 e a Windows Phone Store para Windows Phone apps, onde várias empresas e desenvolvedores independentes podem criar e submeter suas aplicações que podem ser baixadas por pessoas de vários lugares do mundo, avaliadas e até virarem super hits famosos entre as apps.

Pensando nisso, a Microsoft possui muito material para ajudar empresas e desenvolvedores independentes a criarem suas próprias apps. Assim, começamos uma série de artigos que irão te ajudar a criar seus aplicativos. Veja a lista completa de artigos na Microsoft TechNet Wiki na seção de Windows Runtime Apps na parte de desenvolvimento. Vamos lá?

Nascimento da ideia

A primeira coisa que você precisa para criar sua app é da ideia. Você não consegue criar código para fazer algo se você não sabe o que quer fazer. Para ter ideias você precisa exercitar a sua criatividade e estar antenado nas coisas ao seu redor. Primeiro comece
se mantendo conectado, antenado, acompanhando as novidades…

As dicas para esses passos é ler bastante, desde livros técnicos aos não técnicos, além de revistas e jornais. Também vá em eventos de tecnologia, de inovação e de startups, que além de te ajudar a conhecer coisas novas, te fará aprender muito e conhecer pessoas novas. Conversar com muitas pessoas é bom para fomentar suas ideias.

Depois de ter uma boa bagagem de ideias, descubra as necessidades que quer resolver. Existem muitos aplicativos que auxiliam a resolver problemas do dia a dia – de aplicativos para serem usados em escritórios, a aplicativos para organizar listas de compras. Talvez você não queira seguir esse ramo e queira fazer um aplicativo de humor ou um jogo, para isso você precisa de ainda mais criatividade.

Depois de ter ideias, anote e coloque as ideias sobre uma lupa: valide as ideias. Verifique se o conceito do aplicativo se mantei fiel às suas premissas, mostre as ideias para amigos e peça sugestões, verifique se já não existe apps que atendam a esse mercado e se a ideia não pode ser facilmente reproduzida (o que aumenta a sua gama de concorrentes). Vá assim lapidando a sua ideia…

Após essa fase inicial, chega a hora de desenhar o primeiro protótipo da app.

Desenhe e defina o seu app

Agora que você possuí a ideia é hora de começar a planejar ela, você precisa definir o que ela vai fazer e como. Coloque no papel a sua ideia, descreva ela.

Nesse passo de definição tente responder ao máximo de perguntas possíveis sobre sua app. A Microsoft disponibilizou um template de perguntas para serem respondidas, que são:

Creative Brief  – A ideia sobre a app.

Our Audience – O público alvo do app, quem vai usar a app

Our Product – O que a app faz

Our Objective – objetivo descrito para ilustrar ou inspirar sobre o objetivo da app

Our Proposition – Qual o beneficio, o valor entregue do produto/app

Proof of our Proposition – Como será apoiado, qual o design e engenharia da app

Tone – Qual o sentimento passado pela app

Style – estilo da app, o que será visto na app

Para ajudar a responder essas questões você precisa pensar no contexto da sua aplicação, isso vai te ajudar a definir melhor o que você planeja. Para definir o que a app vai fazer comece pensando na função centrar da sua app, com isso vai conseguir planejar
melhor o propósito da sua app.

Para ajudar a definir a função principal da app liste funções que a app vai fazer, imagine o que um usuário irá fazer, por exemplo “enviar um cartão virtual” ou “fazer fotos panorâmicas”, entre outras tarefas. Pegue essa lista e organize em ordem de importância, assim vai conseguir definir a função mais importantes e aquelas que talvez você vai querer adicionar só numa segunda versão da app.

Para ajudar a descrever sua app pegue inspiração olhando outras apps parecidas com a sua ideia na Store. Lendo sobre as outras apps você também pode ver o que já existe (e talvez não queira mais fazer) ou ter ideias de coisas que poderiam ser melhores do
que as que já existem.

Depois imagine onde sua app vai ser usada, se for por atletas pode ser na academia, ou talvez seja usada normalmente no carro, como no caso de navegadores. Assim também vai ajudar a definir o estilo, por exemplo, apps usadas no carro precisam ser simples, sem distrações e com botões grandes para facilitar a utilização. Esse é um padrão geral nas apps da Windows Store, é aconselhável que você siga esses princípios.

Defina seu protótipo

Depois de responder essas questões, é hora de planejar a estrutura da sua app. Para isso você vai desenhar os caminhos que o usuário vai seguir para chegar a cada parte dela. Para  definir essa estrutura, você precisa de conceitos de Arquitetura da Informação, para saber o conteúdo que estará em cada passo e ter integridade entre os passos e a estrutura de informação da sua app.

Por exemplo, definir o que estará na primeira tela, os dados que serão mostrados e no caso de botões para mostrar mais dados, o que terá na nova tela que vai surgir ao apertar o botão, e por aí vai… Uma boa Arquitetura da Informação não só facilita o desenho dos cenários da aplicação como também ajuda a ter uma visão das telas chave da sua app. Você pode encontrar um modelo de Arquitetura da Informação que mostra a estrutura das telas de uma app de exemplo feito pela Microsoft, acesse aqui.

Depois de desenhar a Arquitetura de Informação, é  hora de definir a interação da sua app.

Nessa etapa você deve fazer esboços das telas e definir o fluxo das interações, por exemplo: ao apertar determinado botão de uma tela, o usuário é levado para outra tela, e assim definir quais informações estará nela.

Segundo a documentação de processo para a criação da app na MSDN é dito que as técnicas mais comuns nessa fase são:

• Outline the flow: definir o que vem primeiro e o que vem em seguida;
• Storyboard the flow: como os usuários vão se mover atraves da interfase de usuário no fluxo completo da app;
• Prototype: experimentar o fluxo da app com um protótipo rápido.

Para fazer o storyboard, a Microsoft tem um artigo sobre como usar o Power Point, veja nesse link. Observe também o padrão para navegação dos Windows Store apps. Depois é hora de descrever o que os usuários podem fazer, e a partir dessas ações descrever as reações do app. A Microsoft disponibiliza um modelo para fazer o rascunho da sua app que você pode encontrar neste link.

O próximo passo é definir o visual da sua app, para isso veja o artigo Definindo o Visual da Sua App aqui na Tech Wiki. Depois de definido o visual e o fluxo da sua app, é hora de prototipar. Essa é a hora de desenvolver sua app a partir dos rascunhos e fazê-la numa versão que pode ser  testada. Prototipar é ótimo para simular o processo de funcionamento da sua app e simular a versão final. Enquanto prototipar áreas do seu aplicativo ,mantenha um tempo para definir melhor as ideias e melhorá-las.

Prototipar vai economizar tempo e frustação, cuide dessa etapa com carinho e faça o seu melhor pela app. Comece definindo quais ações da sua app serão inclusas no protótipo – para isso volte à sua lista de funções da app criada mais cedo e pegue quais das principais ações vão ser prototipadas. Em seguida, faça diagramas para modelar essas ações e depois construa o protótipo.

Agora é hora de definir os app contracts. As apps usam contracts e extensions para declarar o suporte da app para outras apps. Podem ser chamadas a APIs para comunicar com outros participantes do fluxo do aplicativo. Veja a seguir o que é cada um dos itens:

• Contracts – contratos: Um contrato é como um termo entre outras apps. Define os requisitos entre elas e que irão participar juntas. Por exemplo, a definição de informações entre apps. O aplicativo que vai compartilhar informações precisa suportar o contrato para poder passar informações e a app que recebe deve suportar o contrato para receber as informações de forma correta.
• Extensions – extensões: Uma extensão é como um termo entre a app e o sistema operacional, no caso sendo chamado as APIs do sistema operacional. Para declarar esse termo é usado o pacote de manifesto da app. Assim no manifesto já estão declarado quais APIs serão chamadas.

Depois de definir quais contratos e extensões sua app vai utilizar, é hora de definir as configurações de hardware para rodar sua app. Lembre-se que sua app pode rodar em máquinas desktops, em notebooks, tablets e smartphones. Você precisa pensar na sua app para esses diferentes dispositivos.

Para adaptar sua app, você pode pensar em mudar o método de input de dados, mudar a orientação da tela ou ligar e desligar itens, pensar se ela precisa controlar a movimentação e como ela vai reagir a isso.

 

Pense em fazer sua app fluída e que suporte a mudança da visualização. No caso de tablets e smartphones, o usuário pode estar usando a tela como paisagem ou como retrato. Lembre que muitos usuários costumam usar smarthphones com a tela em modo retrato, porém muitos devices aceitam a rotação para modo paisagem e sua app pode se adaptar na tela. Para se adaptar, otimize o layout para modo retrato primeiro, possibilitando que as informações sejam vistas em modo vertical.

Pense também em fazer uma app flexível, com seu conteúdo capaz de mudar de tamanho dentro da tela. Além dos itens de input, lembre-se das imagens que precisam mudar de tamanho também. Windows Runtime apps podem automaticamente escalar para diferentes dispositivos.

Antes do processo automático de escala, os itens podem ficar pequenos demais para serem tocados ou o texto pequeno demais para ler. Quando isso ocorre, o Windows automaticamente escala os itens da tela. Mesmo assim, procure desenhar sua app seguindo padrões citados anteriormente como botões grandes.

Agora você vai desenhar sua app usando o Blender ou o Visual Studio para definir as telas segundo o seu rascunho nos passos anteriores. Aproveite para desenhar a tela de loading/splash que é a tela que será mostrada enquanto a app carrega, a primeira tela mostrada. Também desenhe os controles que serão usados na app como botões.

Faça um Master Map em que você vai mostrar o fluxo entre as telas que você desenhou ligando ações entre elas.

Teste de usabilidade

Depois de desenhar as telas da sua app, é hora de análisar se seu dispositivo e sistema operacional podem testar a sua app. Para isso você precisa perguntar algumas questões para si mesmo na hora de seguir com seu protótipo:

• Será que é óbvio como seu projeto de app emprega hardware do dispositivo?
• As tarefas do seu app são simples de serem executadas?
•  Será que o seu aplicativo apresenta exagerada quantidade de informação ou funcionalidade? Talvez muito pouca informação?
•  Será que o seu aplicativo permite ao usuário realizar tarefas ou operações úteis?
•  Você está vindo de outra plataforma móvel? Usuários do Windows Phone vai esperar algo mais limpo, telas mais claras, grande tipografia, eo uso de contraste e cor.
•  Você está usando ambos os eixos de rolagem (os eixos X e Y) e orientação (retrato e paisagem)? Dependendo da finalidade do seu aplicativo, os usuários podem esperar ambas.
•  As pontas dos dedos podem operar facilmente os controles? Há um texto legível?
•  Será que o seu UI responde ao toque?
•  Você já respondeu pelo uso do botão Voltar do hardware?
•  Você usa o conteúdo da Web incorporado (o controle WebView) com moderação?
•  Será que o seu aplicativo deixa desaparecer a barra de status, controles e Bar App quando na reprodução de conteúdo em tela cheia?
•  Você usa Pivot e Hub de forma eficaz e corretamente?

Após essa etapa você pode consultar usuários e mostrar o protótipo para um pequeno grupo de pessoas a começar por um grupo confiável dentro dos futuros usuários da app.

Conforme o seu projeto ande, fale com os usuários o mais cedo possível, a fim de receber feedbacks e rever as prioridades da app de acordo com os products owners da app.

Passada essa fase, crie o mockup final. Determine o que o protótipo ainda precisa e em seguida faça o mockup final da sua app incluindo mais detalhes entre os visuais elementos, elementos funcionais, controles e demais elementos.

Referências

• Slides: “De 0 a estar Online” por Priscila Sato
• Artigo “Vision and Process” do centro de desenvolvimento Windows
• Artigo “App conceptualization” do centro de desenvolvimento Windows
• Artigo “Design the best app you can” do centro de desenvolvimento Windows
• Artigo “App contracts and extensions” do centro de desenvolvimento Windows
• Artigo “Responsive design and form factors” do centro de desenvolvimento Windows
• Artigo “Guidelines for scaling to pixel density” do centro de desenvolvimento Windows