Como encontrar inspiração para UI móvel e transformá-la em um briefing de design
Um processo prático para reunir referências de UI móvel, estudar sequências completas de telas e transformar observações visuais em um briefing de design original e testável.
Uma pasta cheia de telas de aplicativos atraentes é fácil de coletar e difícil de usar. Sem uma pergunta para orientar a pesquisa, as referências visuais podem levar um design à imitação, deixando a tarefa real do usuário sem solução.
Use capturas de tela como prompts para investigação. Um fluxo de trabalho útil começa com uma tarefa, compara fluxos completos, registra as decisões por trás dos recursos visuais e transforma essas observações em um resumo que você pode prototipar e avaliar.
Principais conclusões
- Defina a incerteza do usuário, da tarefa e do projeto antes de coletar referências.
- Estude sequências de tela e estados de interação, não tratamentos visuais isolados.
- Anote princípios transferíveis, depois tome decisões originais para o seu produto e valide-as com as pessoas.
- Verifique a acessibilidade e o ajuste da plataforma enquanto o briefing ainda é flexível.
1. Comece com uma questão de design
Antes de navegar, escreva uma frase sobre a pessoa e o momento para o qual você está projetando. Por exemplo: “Um cozinheiro doméstico iniciante precisa escolher uma receita para a noite da semana e saber o que fazer a seguir.” Em seguida, cite a incerteza: a parte difícil é examinar as escolhas, confiar em uma recomendação ou iniciar uma receita de várias etapas?
Essa pergunta fornece os limites da pesquisa. Decida qual plataforma, área de produto e tarefa são importantes. Se você estiver explorando uma experiência de primeiro uso, procure exemplos de onboarding; se o problema for a seleção do plano, observe as telas de paywall; para entrada de dados, compare padrões de formulário. ScreenKits permite navegar em telas reais de aplicativos por categoria. Salve aplicativos úteis como favoritos do navegador para poder retornar às telas deles durante a síntese.
- Quem é a pessoa pretendida e o que ela está tentando realizar?
- Qual escolha de design é incerta: hierarquia, sequência, navegação, conteúdo ou feedback?
- Quais restrições são importantes, como plataforma, acessibilidade, tamanho do dispositivo ou regras de negócios?
2. Colete um conjunto de referências pequeno e proposital
Reúna alguns exemplos que abordem a mesma tarefa ou uma tarefa intimamente relacionada. Inclua mais de uma abordagem: um caminho direto, um caminho guiado, talvez uma versão que lide com um erro ou um estado vazio. Para cada candidato, salve o aplicativo e anote a tela ou momento que deseja revisitar. Um conjunto compacto torna a comparação mais fácil do que um quadro de inspiração não filtrado.
Observe as categorias quando o problema subjacente for compartilhado. Um aplicativo de agendamento e um aplicativo de supermercado podem precisar ajudar alguém a escolher uma data e confirmar uma alteração. A conexão útil é a estrutura de decisão, não o tema superficial. Evite tratar um público ou setor semelhante como prova de que sua interface resolve seu problema específico.
- Escolha referências por um motivo que você possa declarar, como “mostra como uma opção selecionada altera o resumo”.
- Inclua soluções diferentes para que o primeiro exemplo sofisticado não se torne a resposta padrão.
- Use os favoritos do navegador para manter os aplicativos selecionados disponíveis para comparação enquanto você escreve o briefing.
3. Leia o fluxo, não apenas a captura de tela
Uma tela isolada mostra organização, cor, texto e controles em um momento. Não revela o que levou até lá, o que acontece após um toque ou se uma tarefa foi bem-sucedida. Percorra cada tela relevante em ordem. Observe o ponto de entrada, decisão, ação, feedback e próximo estado. Inclua alternativas como erros de validação, dispensas e retorno para editar uma escolha quando esses estados afetarem a tarefa.
Separe a observação da interpretação. “A ação primária permanece próxima ao fundo em três etapas” é uma observação; “isto deve ser mais fácil de usar” é uma afirmação que você não estabeleceu. Uma captura de tela pode inspirar uma hipótese, mas não é uma prova de usabilidade. NN/g descreve a prototipagem e o teste de usuário como formas de identificar possíveis problemas de usabilidade e aprender como as pessoas interagem com uma interface proposta.
| Registro | Exemplo de um fluxo de seleção de receitas |
|---|---|
| Objetivo do usuário | Escolha uma receita de jantar que combine com o horário desta noite. |
| Padrão observado | Os filtros de tempo e dieta aparecem antes da lista de receitas. |
| Princípio possível | Coloque restrições de alto impacto antes de navegar pelos resultados. |
| Pergunta aberta | As pessoas sabem quais filtros são opcionais? |
| Decisão do produto | Mostre dois filtros essenciais, com mais opções disponíveis sob demanda. |
4. Traduza as observações em um briefing original
A síntese é onde as referências se tornam úteis. Utilize um princípio que pode viajar, como “tornar visível a consequência de uma seleção antes da confirmação”. Em seguida, decida como esse princípio deve funcionar em seu produto, com base em sua tarefa, conteúdo e restrições. Não copie uma ilustração de marca, um texto exato ou um layout diferenciado apenas porque aparece em um exemplo atraente.
Para o exemplo da receita, o conjunto de referência pode sugerir o tempo de retorno antecipado e a visualização do que um filtro selecionado altera. O briefing original pode especificar um caminho curto para o planejamento do jantar, uma restrição de tempo visível, estados de filtro claros e uma etapa de revisão antes de salvar. Essas decisões respondem ao objetivo do produto; eles não recriam a tela de outro aplicativo.
- Público e contexto: quem precisa disso e onde ou quando irá usá-lo?
- Objetivo e sucesso do usuário: o que ele deve ser capaz de concluir ou compreender?
- Fluxo: quais são as principais etapas, decisões e estados alternativos importantes?
- Princípios de design: o que a interface deve deixar claro ou fácil?
- Restrições e questões em aberto: o que deve ser verdade e o que precisa de investigação?
- Plano de avaliação: que tarefa você dará a alguém usando o protótipo e o que observará?
5. Prototipar, verificar a acessibilidade e refinar
Transforme o briefing em um wireflow bruto antes de aprimorar o estilo visual. Crie um protótipo da decisão principal e seu feedback e, em seguida, peça a alguém representante do público-alvo para concluir uma tarefa realista. Fique atento a hesitações, escolhas inesperadas e erros. Revise o fluxo e repita; As orientações de pesquisa do NN/g tratam o design iterativo e a avaliação de protótipos como parte da aprendizagem, em vez de assumir que um primeiro rascunho está resolvido.
Execute uma revisão de acessibilidade junto com esse trabalho. As Diretrizes de Interface Humana da Apple enfatizam interações perceptíveis e adaptáveis e consideração para diferentes métodos de entrada. Verifique o redimensionamento do texto, o contraste, o tamanho e o espaçamento dos controles, a clareza dos rótulos e se o significado depende apenas da cor. Verifique também se o fluxo se adapta a textos mais longos e pode ser compreendido com tecnologias assistivas. As orientações de acessibilidade do Material Design são uma referência útil quando seu produto segue as convenções do Android.
- Apresente uma tarefa, não um tour pela interface, e observe se as pessoas podem prosseguir.
- Teste uma versão inicial com poucos detalhes enquanto as alterações estruturais ainda são fáceis.
- Revise as orientações da plataforma relevantes para o dispositivo e sistema de design que você oferece suporte.
- Retorne às referências apenas para investigar uma questão; não deixe que a semelhança visual sirva de evidência.
Lista de verificação das referências ao briefing
Antes de entregar o briefing, certifique-se de que ele descreva uma decisão de produto, em vez de um moodboard. Alguém que não coletou as referências deverá ser capaz de compreender a tarefa pretendida, o fluxo proposto, as escolhas ainda não resolvidas e como a equipe planeja saber se o design funciona.
- O usuário e a tarefa originais são explícitos.
- Cada referência tem uma nota explicando qual questão ou padrão ela ajuda a explorar.
- As observações são separadas de suposições e afirmações de usabilidade.
- O resumo descreve um fluxo original e uma justificativa específica do produto.
- Acessibilidade, comportamento da plataforma e estados alternativos importantes estão incluídos.
- Uma tarefa de protótipo e um plano de revisão baseado em observação são definidos.
