A lista de verificação de design de UX

Durante o processo de design, algumas falhas em seu produto passarão despercebidas. Essas pequenas (ou às vezes grandes) coisas podem prejudicar muito a experiência que o usuário tem ao usar seu software. Reunimos uma lista de pontos para você verificar antes que o design seja assinado.

Observe que nem todos esses pontos se aplicam a todos os produtos, mas geralmente são os mais relevantes.

Design de interação

01 – Ações repetitivas ou atividades frequentes parecem sem esforço

Por que é importante: Ações repetitivas para a mesma saída (por exemplo, preencher formulários diferentes com as mesmas informações) é uma tarefa árdua que não ajuda o usuário a atingir seus objetivos mais rápido ou melhor. É provável que o usuário também tente encontrar uma maneira de contornar isso: por exemplo, procurando concorrentes que possam ajudá-lo a fazer isso mais rápido/melhor.

Como testar: Você deve começar analisando todos os fluxos do seu produto e observando o comportamento do usuário. Você quer ter certeza de que, se houver ações repetitivas, há uma maneira de facilitá-las: uma opção para usar as informações inseridas anteriormente.

02 – Os usuários podem se recuperar facilmente de erros

Por que é importante: muitas vezes, os usuários realizam ações não intencionais ou ações que não levaram aos resultados desejados – e permitir que eles voltem e tentem novamente significa que eles não ficarão frustrados e se recuperarão facilmente e continuarão seguindo o fluxo.

Como testar: Primeiro, certifique-se de que seu sistema de navegação permite voltar e que as ações podem ser desfeitas. Então, ao realizar testes de usabilidade, crie cenários em que o usuário provavelmente executará a ação errada e verifique se ele pode se recuperar facilmente.

03 – Os usuários recebem suporte adequado de acordo com seu nível de especialização

Por que é importante: é importante garantir que os usuários iniciantes em seu produto tenham uma experiência de aprendizado tranquila. No entanto, uma vez que eles já estejam familiarizados com o produto, isso deve dar lugar a ferramentas que os ajudem a se mover mais rapidamente pelos fluxos. Ambos os cenários melhoram a usabilidade e a retenção. Por exemplo, atalhos para usuários experientes, dicas de ferramentas para usuários iniciantes, etc.

Como testar: Primeiro, verifique se você tem ferramentas para ambos os públicos. Em seguida, realize testes de usabilidade com usuários iniciantes e experientes para verificar se essas ferramentas estão sendo usadas corretamente.

04 – Acessar a ajuda não impede o progresso do usuário

Por que é importante: os usuários pedem ajuda sempre que ficam presos em uma determinada parte do seu produto. É importante que a ajuda – online ou offline – seja adicional e permita que o usuário retome o trabalho de onde parou.

Como testá-lo: crie cenários de teste em que os usuários peçam ajuda e vejam se seus fluxos de trabalho e progresso são interrompidos.

Design visual

05 – Não mais que três cores primárias

Por que é importante: Esta não é uma regra fixa – e às vezes, para casos específicos, mais de três cores primárias podem ser usadas. No entanto, lembre-se de que combinar três cores já é difícil, portanto, na maioria dos casos, deve-se evitar mais do que isso.

Como testar: Certifique-se de que a paleta de cores que você usou ao projetar o produto não tenha mais de três cores primárias.

06 – A cor sozinha não é usada para transmitir hierarquia, conteúdo ou funcionalidade

Por que é importante: Ter um produto acessível não é uma vantagem – é uma obrigação. Pessoas com deficiência visual, como daltonismo, dependem exclusivamente da cor para transmitir hierarquia, conteúdo ou funcionalidade. Isso significa que eles não poderão usar seu produto e serão um grupo demográfico excluído.

Como testá-lo: colorfilter.wickline.org permitirá que você coloque um filtro de cores no topo de sua página e teste-o para diferentes tipos de daltonismo. Você também pode capturar a tela do seu produto e convertê-lo em escala de cinza em um editor de imagens e ver se consegue distinguir as cores facilmente.

07 – A hierarquia visual direciona o usuário para a ação necessária

Por que é importante: Os usuários confiam na hierarquia e nas pistas do produto para saber o que fazer e para onde ir – é essencial entender isso e orientá-los adequadamente usando essa hierarquia.

Como testar: entenda como os fluxos dentro do seu produto funcionam e se suas principais ações estão sendo incentivadas pela hierarquia visual.

08 – Itens no topo da hierarquia visual são os mais importantes

Por que é importante: a hierarquia visual permite que os usuários digitalizem rapidamente as informações, priorizando o conteúdo com base em suas necessidades imediatas. Os itens próximos ao topo da hierarquia visual devem ser os mais importantes para os negócios e mais relevantes para os usuários.

Como testá-lo: Faça a captura de tela do seu produto digital e, em seguida, desfoque Gaussian essa captura de tela em um raio de cerca de 5px. Ao observar o resultado, você visualizará instantaneamente a hierarquia e perceberá quais elementos se destacam. Esses são os mais importantes para o negócio e para o usuário?

09 – A ação primária é visualmente distinta das ações secundárias

Por que é importante: ter ações primárias e secundárias distintas significa que o usuário não ficará confuso ao interagir com seu produto e estará menos propenso a cometer erros. Por exemplo, "Enviar" e "Cancelar" devem ser claramente distintos.

Como testar: Ao realizar testes de usabilidade, observe os erros comuns que resultam não da intenção do usuário, mas de ações primárias e secundárias mal distintas. Além disso, ao revisar o design, certifique-se de que cor, tamanho, posicionamento e outros elementos diferenciem as ações.

10 – Elementos interativos não são abstraídos

Por que é importante: ao usar um novo produto, os usuários vêm com um conjunto de expectativas construídas a partir de experiências anteriores com outros produtos digitais – por exemplo, como os botões devem ser e como devem funcionar. Atender a essas expectativas significa que você não está criando atritos desnecessários.

Como testar: Primeiro, revise seu produto procurando áreas onde padrões comuns não são usados. Por exemplo, links que não se parecem com links.

11 – O envio do formulário é confirmado de forma visualmente distinta

Por que é importante: É essencial dar ao usuário a confirmação se uma ação foi realizada com sucesso ou não. Por exemplo, após enviar um formulário, uma mensagem de confirmação clara na forma de um banner colorido significa que o usuário pode passar para a próxima tarefa.

Como testar: Verifique todas as áreas do seu produto onde o usuário insere informações. Depois que a entrada do usuário for concluída, acione uma confirmação sobre se essa ação foi bem-sucedida ou não. Certifique-se de que o feedback seja claro em relação ao status final.

12 – As mensagens de alerta são consistentes

O que é: As mensagens de alerta têm o mesmo estilo visual e aparecem no mesmo local da mesma maneira.

Por que é importante: ter mensagens de alerta consistentes significa que o usuário sempre entenderá o que imediatamente merece atenção. Não ser consistente com os alertas significaria uma carga mental extra toda vez que um novo alerta aparecesse.

Como testar: Certifique-se de que as mensagens de alerta tenham o mesmo estilo visual e seu posicionamento seja semelhante ou idêntico.

13 – As mensagens de alerta são visualmente distintas

Por que é importante: Ao garantir que as mensagens de alerta sejam claramente diferenciadas de outros elementos da tela, o usuário pode realmente notá-las e/ou agir sobre elas.

Como testar: Depois de verificar a diferenciação visual por conta própria, veja como os usuários reagem às mensagens de alerta no teste de usabilidade.

Arquitetura de informação

14 – A navegação é consistente

Por que é importante: a maneira como os usuários orientam e navegam pelo seu produto influencia diretamente se eles podem concluir suas metas, independentemente da página atual.

Como testá-lo: Verifique a documentação da sua arquitetura de informações e certifique-se de que a navegação esteja acessível em todas as páginas e que não mude ou desapareça. Antes de mergulhar no design visual, experimente a classificação de cartões ou o teste de árvore para garantir que os caminhos da arquitetura de informações sejam o mais intuitivos possível.

15 – Espaço para crescimento

Por que é importante: você não pode reprojetar a navegação e o sistema de informações de um produto toda vez que surgem novos recursos ou conteúdo. Os menus de navegação e o layout geral precisam oferecer suporte a mais categorias/tópicos sem interrupções. Projetar com espaço para crescimento significa que os principais esforços de design e desenvolvimento são dimensionados facilmente pela interface.

Como testá-lo: pergunte a todas as partes interessadas sobre como o conteúdo pode crescer ao longo do tempo no produto. Você suportará mais conteúdo estático? A arquitetura precisará suportar vídeos?

Tipografia

16 – Não são utilizadas mais de duas famílias de tipos distintos

Por que é importante: Esta não é uma regra fixa: às vezes é possível fazer mais de dois. Mas de um modo geral, combinar mais de dois não é uma tarefa fácil. Para fins de usabilidade e visual, ficar com dois simplifica sua hierarquia tipográfica, o que melhora a compreensão.

Como testar: Certifique-se de que seu design não esteja misturando mais de duas famílias de tipos. Ajudaria se você também se certificasse de que as famílias que você escolheu são adequadas (saiba mais aqui).

17 – As fontes usadas para conteúdo de texto têm pelo menos 12px de tamanho

Por que é importante: Novamente, não é uma regra fixa – você poderia, em teoria, usar tamanhos menores para propósitos específicos – mas, em geral, a legibilidade é severamente reduzida para tamanhos abaixo de 12 pixels.

Como testar: Verifique todo o seu conteúdo e certifique-se de que as fontes usadas para eles tenham pelo menos 12 pixels.

18 – Reserve palavras maiúsculas para rótulos, cabeçalhos ou siglas

Por que é importante: limitar o uso de palavras maiúsculas é conhecido por facilitar a compreensão – é menos pesado visualmente e mais fácil para o usuário digerir. Deve ser usado especificamente para ênfase ou casos muito restritos – siglas, por exemplo.

Como testá-lo: execute uma verificação de conteúdo completa e certifique-se de que as palavras em maiúsculas sejam limitadas apenas a cabeçalhos, rótulos ou acrônimos.

19 – Diferentes estilos de fonte ou famílias são usados ​​para separar o conteúdo dos controles

Por que é importante: É preciso haver indicadores claros sobre o que é conteúdo e o que são controles – ou seja, com o que o usuário pode interagir. Esses indicadores podem ser tamanho, cor, posicionamento, fonte, etc. A fonte é importante: usar estilos ou famílias diferentes significa que o usuário não ficará confuso e identificará facilmente com o que pode interagir.

Como testar: Identifique todos os controles em seu produto e verifique se eles estão se destacando do conteúdo. Ao executar testes de usabilidade, preste atenção se os usuários estão tendo dificuldades para interagir com os controles.

20 – O tamanho/peso da fonte diferencia os tipos de conteúdo

Por que é importante: afeta fortemente a legibilidade e a compreensão. Fazer uma distinção clara entre títulos, subtítulos e parágrafos reduz a sobrecarga mental na digestão desse conteúdo. Ele também tem benefícios visuais – parece e se sente melhor.

Como testar: ao revisar o conteúdo do seu produto, certifique-se de que os títulos, subtítulos e parágrafos estejam usando tamanhos e pesos de fonte diferentes.

Interface de usuário

21 – Proximidade e alinhamento

Por que é importante: O usuário tende a agrupar – funcionalmente ou contextualmente – itens próximos uns dos outros. Uma barra de navegação é um bom exemplo disso. Seguir esse padrão e agrupar itens que estão conectados significa que o usuário entende instantaneamente sua interface.

Como testar: Procure itens com funcionalidade semelhante e verifique se (quando possível) eles estão agrupados.

22 – Indicador de progresso para fluxos de trabalho de várias etapas

Por que é importante: especialmente para fluxos de trabalho de várias etapas, o usuário pode facilmente se sentir sobrecarregado ou se perguntar quanto tempo até que finalmente seja concluído. Um indicador de progresso os ajuda a se localizar, mas, mais importante, cria uma sensação de realização e reduz as taxas de queda.

Como testar: Verifique todos os fluxos dentro do seu produto onde existem diferentes etapas para realizar algo, depois certifique-se de que o progresso está sendo indicado por meio de um indicador.

23 – Elementos de primeiro plano (como conteúdo e controles) são facilmente distinguidos do plano de fundo

Por que é importante: Importante para pessoas com deficiência visual. Também melhora a curva de aprendizado e a compreensão do usuário. A distinção clara facilita a navegação, traz mais atenção aos botões e aumenta a usabilidade em geral.

Como testá-lo: Faça a captura de tela do seu produto e desfoque Gaussian essa captura de tela para um raio de cerca de 3px a 5px. Ao olhar para o resultado, você consegue dizer facilmente o que está em primeiro plano e o que está em segundo plano?

Parabéns por passar pela lista! No entanto, este não é o fim.

Seu produto agora está mais sólido e você pode ter melhorado em várias áreas – talvez esteja mais acessível agora, por exemplo – mas lembre-se sempre de continuar testando, coletando feedback do usuário e continue iterando.