Tutorial de interface
Uma maneira prática de aprender a criar a UI de um aplicativo
Comece com uma tarefa do usuário e transforme-a em um pequeno conjunto de telas conectadas. Este tutorial de design de aplicativos oferece uma sequência que você pode seguir no navegador, além de verificações importantes antes de compartilhar um rascunho.
pré-requisitos
Escolha um público, um dispositivo e uma tarefa específicos antes de desenhar as telas. Anote o que o usuário precisa fazer, quais informações ele precisa e como você saberá se ele conseguiu concluir a tarefa.
- design de aplicativos vs. design de UI Esclareça quais decisões dizem respeito à interface e quais pertencem à experiência mais ampla do produto.
- modelos gratuitos de design de aplicativos para dispositivos móveis Use um modelo para dispositivos móveis como referência inicial, mas verifique se o layout atende à sua tarefa.
- software de design de aplicativos Compare os recursos que vale a pena considerar ao escolher onde desenvolver seus rascunhos de tela.
etapas numeradas
Parta do comportamento para a estrutura e, depois, para os detalhes visuais. Você pode repetir essas etapas sempre que um teste revelar uma escolha confusa.
-
1
Defina a jornada principal
Escolha um objetivo, como registrar uma despesa ou encontrar um artigo salvo. Liste o ponto de partida do usuário, a ação que ele realiza e a confirmação que espera receber. Identifique as informações necessárias e deixe os recursos secundários fora da primeira jornada. Isso mantém o design de aplicativos focado: se uma tela não ajuda alguém a avançar em direção ao objetivo, talvez ela não deva fazer parte deste rascunho.
-
2
Mapeie telas e decisões
Esboce o menor conjunto de telas que cubra a jornada. Desenhe setas para indicar a navegação, incluindo um caminho de volta e uma forma de corrigir um erro. Anote os pontos de decisão, como escolher uma categoria ou aprovar uma alteração. Antes de refinar a UI, siga as setas você mesmo: alguém consegue alcançar o objetivo sem ter que adivinhar onde tocar em seguida?
-
3
Crie um layout com poucos detalhes
Posicione títulos, controles, conteúdo e navegação em blocos aproximados. Mantenha a ação principal em uma posição consistente e dê a ela um rótulo claro; agrupe campos relacionados e coloque a ajuda perto da escolha que ela explica. Crie o rascunho no tamanho do dispositivo escolhido, mas examine também as telas com muito conteúdo. No design de aplicativos, uma tela vazia e organizada é menos útil do que um layout que continua funcionando com conteúdo realista.
-
4
Aplique um sistema visual
Escolha um conjunto pequeno de tamanhos de fonte, espaçamentos e cores com funções distintas. Use o mesmo tratamento para ações e estados recorrentes, para que os usuários reconheçam os padrões entre as telas. Verifique o contraste, a legibilidade do texto, o espaçamento entre áreas de toque e se o significado continua claro sem depender apenas das cores. A consistência visual facilita a leitura rápida da UI, mas não corrige uma jornada pouco clara.
-
5
Avalie com uma tarefa
Mostre o rascunho com as telas conectadas a alguém que não conhece seu plano. Peça que a pessoa conclua a tarefa original sem orientação e observe onde ela hesita, segue o caminho errado ou não percebe uma resposta do sistema. Revise os rótulos ou o fluxo que causaram o problema e repita a tarefa. Trate cada avaliação como evidência para a próxima decisão de design de aplicativos, não como uma votação sobre cores.
erros comuns e como corrigi-los
Uma tela pode parecer pronta mesmo quando comportamentos essenciais ainda não foram definidos. Estas verificações revelam lacunas antes que você invista mais tempo no acabamento visual.
Projetar apenas o caminho ideal
Um mockup bem-acabado não mostra o que acontece quando um campo fica em branco, uma busca não retorna resultados ou uma solicitação falha. Sem esses estados, a jornada planejada pode falhar na primeira interrupção.
O que fazer em vez disso
Adicione estados vazio, de erro e de sucesso para a tarefa principal. Defina a próxima ação disponível em cada estado e trace um caminho de volta à tarefa.
Presumir que o layout funcionará em qualquer lugar
Um rascunho no navegador não permite determinar como todos os dispositivos, orientações, teclados ou tecnologias assistivas exibirão a interface e se comportarão. O texto pode quebrar de maneira diferente, e controles que parecem ter espaço suficiente podem se tornar difíceis de usar.
O que fazer em vez disso
Revise layouts estreitos e largos com textos realistas. Verifique a ordem de foco, os rótulos e a interação nas plataformas que você pretende oferecer.
Confundir um rascunho com um produto funcional
As telas comunicam o comportamento pretendido; elas não implementam armazenamento de dados, autenticação, notificações ou interações específicas de cada plataforma. O design de aplicativos, por si só, não permite confirmar se um requisito técnico é viável.
O que fazer em vez disso
Registre as suposições junto às telas afetadas e revise-as com um engenheiro antes de tratar o fluxo como um plano de implementação.
Testar preferências visuais em vez da usabilidade
Perguntar se as pessoas gostam da interface raramente revela por que elas não conseguem concluir uma tarefa. A familiaridade e a preferência por cores podem desviar a atenção de um rótulo ausente ou de uma etapa de navegação inesperada.
O que fazer em vez disso
Dê aos participantes um objetivo, observe o que fazem e registre onde surge a dúvida antes de pedir opiniões. Corrija um problema de cada vez e teste novamente.
dicas avançadas
Quando o caminho principal estiver funcionando, revise-o considerando textos mais longos, tarefas interrompidas e usuários que retornam. Verifique se a mesma ação tem o mesmo nome em todas as telas, se a pessoa pode desfazer uma escolha com consequências importantes e se a confirmação explica o que aconteceu. Mantenha um breve registro das decisões e suposições ainda não resolvidas junto ao seu trabalho de design de aplicativos. App Design leva a um fluxo de trabalho no navegador para você explorar a próxima etapa; confira as ferramentas disponíveis e as condições de acesso antes de contar com um recurso específico.
Leve seu rascunho de telas para um fluxo de trabalho no navegador
- Leve uma tarefa do usuário claramente definida para o próximo rascunho.
- Verifique os estados alternativos antes de adicionar mais telas.
- Valide o comportamento no dispositivo pretendido.
Perguntas frequentes do tutorial
Escolha um público e uma tarefa. Depois, mapeie as telas necessárias para concluí-la. Comece com esboços de layout, em vez de cores refinadas. Verifique se o caminho entre as telas faz sentido antes de aprimorar o sistema visual.
Defina o fluxo primeiro, para que cada tela tenha um motivo para existir. Um mapa simples do ponto de partida, das decisões e do resultado ajuda a identificar etapas ausentes. Depois, você pode organizar o conteúdo e os controles de cada ponto desse fluxo.
Um processo no navegador pode ajudar a planejar, criar rascunhos e revisar uma interface sem exigir, como ponto de partida, a instalação de um programa no computador. Confira no próprio site os recursos específicos de qualquer produto indicado por link. Ainda será necessário validar a interface resultante nos dispositivos e nas plataformas que você pretende oferecer suporte.
Inclua telas suficientes para mostrar a tarefa principal do início à confirmação, além de qualquer etapa essencial de decisão ou recuperação. Não existe um número universal de telas: a tarefa determina o que é necessário. Evite adicionar telas apenas para fazer o design de aplicativos parecer mais completo.
Peça a alguém que não conhece o rascunho para concluir uma tarefa específica, sem dar instruções sobre onde tocar. Observe hesitações, caminhos equivocados e feedback não percebido. Depois, corrija a causa de cada problema. Um rascunho visual eficaz deve deixar clara a próxima ação, e não apenas ter uma aparência consistente.