- Conheça as práticas de interface de usuário padrão
- Crie um protótipo em papel do seu aplicativo
- Obtenha feedback do usuário usando seu protótipo
Estas são as atividades para esta lição:
PROTOTIPAGEM
Agora que você tem uma ideia para o seu mínimo produto viável, é hora de pensar em como será o seu projeto e esboçar algumas ideias.
Umprotótipo é um modelo inicial de algo.
Os desenvolvedores de aplicativos geralmente fazem um protótipo em papel de seu aplicativo antes de começar a programação.
Um protótipo de papel é uma representação desenhada à mão de como será a interface do usuário do seu aplicativo. Normalmente, ele inclui desenhos de cada tela do aplicativo, representando diferentes estados.
POR QUE PROTOTIPAR?
- Você pode comunicar suas ideias visualmente com rapidez.
- É colaborativo!
- Quando você trabalha no papel, é mais casual e as conversas surgem da experimentação.
- É barato!
- Você não precisa gastar muito tempo e dinheiro
- Você não precisa ter acesso a um computador ou à Internet.
- Você não precisa ser uma especialista técnica para essa parte do processo.
- Você pode ver como os usuários reagem ao seu protótipo para saber rapidamente o que pode ou não funcionar no seu projeto.
- As decisões de design podem ser confirmadas antes que você gaste tempo desenvolvendo e programação o app .
Saiba como outras equipes do Technovation Girls criaram protótipos digitais e de papel neste vídeo!
Dica de mentores(as)
Melhores práticas: Ao apresentar o site estudantes aos protótipos de papel e papelão, enfatize a importância de começar com modelos simples e de baixo custo para testar ideias. Por exemplo, "Os protótipos de papel e papelão são como rascunhos de seu projeto. Eles ajudam você a ver como sua ideia se parece e funciona antes de fazer uma versão final. Esses modelos simples permitem que você faça alterações rapidamente e descubra o que funciona melhor."
O protótipo em papel pode ser usado para obter feedback de possíveis usuários (ou seja, membros da família, outros mentores(as), amigos, membros da comunidade etc.). Esse feedback pode fazer parte do feedback incluído nos materiais finais do submissão .
Os vídeos a seguir mostrarão um exemplo de projeto de prototipagem com o hardware que o acompanha (à esquerda) e o processo de teste com um protótipo de papel (à direita).
Perguntas orientadoras para fazer estudantes:
Por que é útil criar um protótipo simples com papel ou papelão antes de fazer um produto final?
Como a criação de um modelo de papel ou papelão pode ajudá-lo a aprimorar seu projeto?
Quais são algumas coisas que você pode aprender ao testar um protótipo de papel que não saberia de outra forma?
As dicas são fornecidas com o apoio do AmeriCorps.
ELEMENTOS DO PROTÓTIPO
Mantenha esses aspectos em mente ao iniciar seu protótipo em papel. Passe o mouse sobre cada cartão para saber mais.
Usuários
Usuários
Tipos de dispositivos
Tipos de dispositivos
Telefone ou tablet?
Acessibilidade
Acessibilidade
Consistência
Consistência
INTERFACE DO USUÁRIO
A criação do protótipo tem tudo a ver com a forma como o usuário interage com o aplicativo. O termo para isso é a Interface do usuário ou UI. Ela inclui todos os elementos, como botões, caixas de texto e controles deslizantes, que permitem que o usuário use seu aplicativo.
Outro termo para o design de produtos digitais é Experiência do usuárioe ou UX. Cada um deles é explicado a seguir.
Interface do usuário
Como os usuários interagem com o seu aplicativo. Ele inclui todos os elementos, como botões, caixas de texto e controles deslizantes, que permitem que o usuário use o aplicativo.
O design da IU se concentra em tornar seu aplicativo visualmente atraente, intuitivo e fácil de usar.
Experiência do usuário
Como os usuários experimentam seu aplicativo. Inclui a interface do usuário, mas tem mais a ver com as emoções, as atitudes e o comportamento dos usuários.
O design de UX tem tudo a ver com as necessidades e as metas do usuário e com o aprimoramento de sua experiência geral.
RECURSOS DA INTERFACE DO USUÁRIO
Abaixo estão algumas das partes principais de uma interface de usuário para um aplicativo
NAVEGAÇÃO
A navegação é como os usuários encontram o que estão procurando em um aplicativo. Aqui estão alguns exemplos de opções de navegação.
CONTAINER
Esses componentes permitem que você agrupe o conteúdo. Isso ajuda na disposição de partes da tela e na ocultação e exibição de partes.
ENTRADA
Os componentes de entrada permitem que o usuário insira informações no aplicativo. Veja a seguir alguns exemplos.
INFORMAÇÕES
Esses componentes permitem que o aplicativo compartilhe informações com os usuários.
USAR ELEMENTOS PADRÃO
Talvez você queira que seu aplicativo tenha uma aparência diferente para se destacar dos concorrentes. No entanto, usar os elementos padrão pode, na verdade, ajudar os usuários a entender como usar o aplicativo mais rapidamente.
Por exemplo, a maioria dos usuários está familiarizada com um menu suspenso. Você poderia criar um novo tipo de menu, mas ele pode ser confuso para os usuários. Mantenha os componentes conhecidos para facilitar a vida dos usuários.
PARE E TENTE
- Baixe um novo aplicativo da loja de aplicativos agora mesmo.
- Se você precisar de inspiração, experimente o AllTrails (iOS ou Android) ou Blinkist (iOS ou Android)
- Quais componentes mencionados acima ele usa?
- Tente usar o aplicativo por cerca de 5 minutos.
- Quanto tempo você levou para descobrir como usá-lo?
Confira este breve vídeo com Melissa Powel e Mariam Shaikh, do Google, sobre esboço e prototipagem em papel
ATIVIDADE 1: PROTÓTIPO DE PAPEL
Esboce as telas do seu aplicativo
- Como os usuários navegarão de uma tela para outra?
- Como eles inserirão as informações necessárias para o aplicativo?
- Como as informações serão exibidas?
- Como ele será disposto de forma esteticamente agradável?
- Pense no esquema de cores, na fonte e no logotipo
OBTENHA FEEDBACK
Agora que você tem algo físico para representar sua solução, é hora de obter feedback do usuário!
Os usuários em potencial precisam experimentá-lo e lhe dar alguns feedbacks honestos.
O que você quer aprender com os testes com os usuários?
Um método:
- Dê aos usuários um conjunto de tarefas a serem realizadas com o aplicativo e veja se eles conseguem fazer isso sem a sua intervenção.
- Um membro da equipe pode atuar como o "computador"
- altera telas ou partes de telas com base nas interações do usuário
- Outro membro da equipe é o tomador de notas
- anota o que o usuário faz e seus comentários e reações.
- Com permissão, você também pode gravar a sessão de teste.
Lembre-se de que seus testadores estão lá para ajudá-la! Não julgue nem intervenha em suas interações (a não ser que o "computador" responda/atualize o protótipo com base nas ações).
Apenas receba o feedback deles com apreço.
Aqui está um ótimo exemplo de teste de usuário para um aplicativo de oficina de bicicletas.
ATIVIDADE 2: OBTENHA FEEDBACK
Teste seu protótipo em papel com 2 a 3 usuários
- Mostre o protótipo aos usuários.
- Peça aos usuários que executem uma tarefa com o protótipo.
- Deixe que eles tentem realizar a tarefa sem ajuda.
- Um membro da equipe pode atuar como o "computador" e reagir às suas ações.
- Outro membro da equipe (ou dois) faz anotações sobre o que os usuários fazem, seus comentários e reações.
REFLEXÃO
Recomendamos que o time guarde seu protótipo em papel. Será preciso consultá-lo à medida que for construindo o projeto. O time também deve tirar fotos de seu protótipo.
REVISÃO DOS PRINCIPAIS TERMOS
- Protótipo - um modelo inicial de um produto
- Protótipo em papel - uma representação desenhada à mão da aparência de seu aplicativo
- Interface do usuário (UI) - como o usuário interage fisicamente com um aplicativo
- Experiência do usuário (UX) - como o usuário se sente em relação a um aplicativo, antes, durante e depois de usá-lo
RECURSOS ADICIONAIS
Embora o papel seja o método preferido para a criação de protótipos, especialmente como primeira etapa, você também pode usar ferramentas digitais para criar protótipos do seu aplicativo.
Muitas ferramentas existem a um preço, mas geralmente há uma versão gratuita que você pode usar com recursos ou projetos limitados. Aqui estão algumas possibilidades.
- Slides do Google (fácil e gratuito!)
- InvisionApp
- Figma
- POP da Marvel
