Concepção de uma Windows Runtime Apps

Concepção de uma Windows Runtime Apps

Hoje o mercado de apps movimenta por ano US$ 29,5 bilhões, e não para de crescer, confirmam especialistas do ramo. Os app podem ser de diversos tipos que auxiliam nas tarefas diárias ou simplismente 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 com esse começamos uma série de artigos que irão te ajudar a criar suas apps. 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ê 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 a livros não técnicos, ler revistas e jornais. Também vá em eventos de tecnologia, eventos de inovação e eventos de startups, que além de te ajudar a conhecer coisas novas você pode aprender muito e conhecer pessoas novas, e 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 as suas premissas, mostre as ideias a amigos que podem dar sugestões, verifique se já não existe apps que atendam a esse mercado, verifique se a ideia não pode ser facilmente reproduzida (o que aumenta a sua gama de concorrentes), e 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 da sua app. 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 da sua app, os dados que serão mostrados, 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 da sua app é 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 o que será nessa tela seguinte.

Segundo a documentação de processo para a criação da app na MSDN é dito que as tecnicas 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, o que será feito pelo 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. Prototipar é a hora de desenvolver sua app a partir dos rascunhos e faze-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 da sua app mantenha um tempo para definir melhor as ideias e melhorar elas.

Prototipar vai economizar tempo e frustação, cuide dessa etapa com carinho e faça o seu melhor pela app.

Para prototipar comece definindo quais ações da sua app serão inclusas no prototipo, para isso volte a sua lista de funções da app criada mais cedo nesse artigo e pegue quais das principais ações vão ser prototipadas. Em seguida faça diagramas para modelar essas ações, em seguida é hora de construir o protótipo.

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

  • Contracts – contratos: Um contrato é como um termo entre outras apps. Define os requisitos entre as apps e que irão participar juntas. Por exemplo a definição de informações entre apps. A app 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 cahamado 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.
Para ler mais sobre contratos e extensões leia o artigo aqui na Tech Wiki.

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 que sua app pode rodar em máquinas desktops, em notebooks, tablets e smartphones. Voce 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 da sua app, pensar se ela precisa controlar a movimentação e como ela vai reagir a isso.



Pense em fazer sua app fluida 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 sua app fluida e flexivel 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 é obvio 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 (eo 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 controla 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 andar com o seu projeto fale com os usuários o mais cedo possivel 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

Classificar por: Data da Publicação | Mais Recente | Mais Úteis
Comentários
  • Parabéns pelo artigo, muitos ainda acham que a ideia de criar uma aplicação e coloca-la em um papel é coisa do passado e fazer de cabeça é o certo, mais muitas vezes no meio do projeto acabam esquecendo a sua finalidade e sua idéia original, show Priscila Mayumi Sato

  • Parabéns pelo artigo Priscila, muito bem elaborado!

  • Muito bom Priscila! Parabéns :)

  • Parabéns! Seu artigo foi selecionado pela Equipe de "Artigos em Destaque" TechNet Wiki como um dos melhores do mês de Dezembro/2014.  

    Veja em: blogs.technet.com/.../community-win-artigos-em-destaque-de-dezembro-2014.aspx

  • Parabéns, Priscila!

    Excelente!

Página 1 de 1 (5 itens)