Pensar em telas pequenas
As melhores ideias de design de aplicativos móveis começam com uma pessoa tentando realizar uma tarefa em uma situação específica. Escolha um momento — consultar o horário de um trem, registrar uma refeição ou compartilhar um recibo — e então crie o caminho mais curto e claro para concluir a tarefa.
Um conceito útil deixa claros a tarefa principal, seu contexto e seus limites. Esses limites impedem que uma tela atraente seja confundida com uma experiência móvel funcional.
Um conceito de tela não mostra se as pessoas entendem um gesto, percebem um erro ou conseguem se recuperar após uma ação malsucedida.
O que fazer em vez disso
Descreva a tarefa como uma sequência curta e pergunte a alguém que não conhece o conceito em que tocaria em seguida.
O design visual de aplicativos não gera um software instalado para Android ou iOS, permissões do dispositivo nem notificações funcionais.
O que fazer em vez disso
Documente o comportamento pretendido separadamente e analise os requisitos da plataforma antes do desenvolvimento.
Nomes de exemplo perfeitos e rótulos curtos podem esconder layouts apertados, estados vazios e informações excepcionalmente longas.
O que fazer em vez disso
Teste textos realistas, dados ausentes e uma mensagem de erro antes de definir o layout.
Parta de uma situação específica para chegar a um pequeno conjunto de telas. Dê a cada etapa um motivo para existir antes de adicionar acabamento.
Descreva a pessoa usuária, seu objetivo e onde ela está. Quem consulta uma rota atrasada durante o deslocamento precisa de uma tela inicial diferente da de alguém planejando uma viagem em casa.
Liste a primeira tela, a decisão que ela ajuda a tomar e a tela de resultado. Deixe as configurações opcionais e as informações secundárias fora desse caminho.
Verifique o alcance com uma mão, a legibilidade do texto, as conexões lentas e o que acontece quando não há resultados. Revise o fluxo antes de refinar as cores ou as ilustrações.
Se o seu conceito precisa de um ponto de partida mais amplo, de um layout reutilizável ou de verificações específicas para a plataforma, siga o caminho que corresponde à próxima decisão.
Compare um primeiro esboço atraente com um conceito pronto para uma avaliação prática. Cada linha apresenta algo observável para verificar.
| Primeiro esboço | Conceito pronto para avaliação | |
|---|---|---|
| Ação principal | Disputa a atenção com vários botões de igual destaque. | Há uma próxima ação clara para o objetivo imediato do usuário. |
| Navegação | Todos os recursos aparecem na primeira tela. | A tarefa principal permanece visível; os caminhos secundários têm rótulos previsíveis. |
| Texto | Rótulos provisórios curtos fazem parecer que tudo cabe na tela. | Nomes, valores e instruções realistas continuam legíveis. |
| Feedback | Apenas a tela de sucesso ideal é exibida. | Os estados de carregamento, vazio, erro e sucesso explicam o que aconteceu. |
| Toque | Os controles parecem precisos no tamanho usado para apresentação. | Os controles importantes são fáceis de tocar em um celular. |
| Contexto | Pressupõe atenção total e uma conexão confiável. | O fluxo resiste a interrupções e deixa claros os dados incertos. |
Estes exemplos mostram onde um conceito promissor para dispositivos móveis costuma precisar de uma segunda revisão. Siga o caminho indicado no link quando esse tipo de retrabalho se tornar seu foco principal.
Uma tela de transporte público mostra um mapa de rotas elegante, mas o horário da próxima partida fica escondido abaixo dele.
Coloque o horário de partida, a situação do serviço e a próxima ação útil acima do mapa. Mantenha o mapa disponível para orientação, em vez de torná-lo a primeira tarefa.
Uma lista de compras compartilhada parece organizada até que várias pessoas adicionem nomes longos de itens e observações.
Teste linhas cheias, itens concluídos e edições conflitantes. Mantenha a adição e a marcação de itens como concluídos mais fáceis do que o gerenciamento de categorias.
Um conceito de credenciamento para eventos pressupõe que todos os participantes tenham um sinal forte e consigam ler um formulário denso ao ar livre.
Faça com que a situação do participante seja compreensível à primeira vista e planeje o que a interface deve informar quando não for possível atualizar as informações.
Um conceito de portfólio dá destaque às animações, enquanto os visitantes querem principalmente encontrar um projeto e entrar em contato.
Priorize a navegação pelos projetos e um caminho claro para entrar em contato. Deixe que a expressão visual apoie o conteúdo, em vez de retardar o acesso a ele.
Escolha uma situação dos exemplos ou descreva a sua em uma frase. App Design pode indicar um caminho inicial pelo navegador; confira as ferramentas e os termos disponíveis no destino antes de presumir que ele oferece um recurso ou resultado específico.
Comece por uma situação recorrente, não por um estilo visual: quem precisa fazer o quê e sob quais restrições? Esboce a primeira ação e o resultado útil antes de escolher cores ou reunir referências.
O celular costuma ser usado em sessões curtas e sujeitas a interrupções, com pouco espaço para opções concorrentes. Um conceito para dispositivos móveis deve facilitar a identificação da tarefa imediata e verificar se controles, textos e mensagens de retorno funcionam no tamanho da tela de um celular.
Inclua telas suficientes para mostrar o início, uma decisão importante e o resultado. Adicione um estado vazio ou de erro se ele mudar o que a pessoa precisa fazer; um conjunto grande de telas é menos útil do que um caminho coerente.
Ele pode revelar rótulos pouco claros, telas sobrecarregadas e etapas ausentes, mas não pode comprovar a usabilidade nem implementar funcionalidades nativas. Teste a tarefa com pessoas e analise os requisitos técnicos e da plataforma antes de considerar o conceito um aplicativo pronto.