UX design
Padrões de desenvolvimento de UX/UI.
Introdução
Introduzindo alguns conceitos de UX design e trazendo alguns problemas vistos atualmente no Cognera.
Guia Inicial de Desenvolvimento de Interfaces Voltadas para UX
UX design
Guia interno · Design & Produto
Guia prático de design de UX para todo o time da Evológica — princípios, heurísticas de Nielsen e uma leitura crítica das telas atuais do Cognera.
Evológica · Cognera — Plataforma de Avaliação Psicológica · Documento interno de referência
Este guia contém boas práticas de UX e não contempla um guia completo do ciclo de desenvolvimento voltado para experiência do usuário.
1. Princípios
1.1. Gravidade
A gravidade se aplica a objetos e formas, até mesmo na comunicação visual.
A gravidade não é uma força real em objetos 2D de uma interface, mas ela pode trazer percepções ao usuário. Por exemplo, a imagem abaixo pode dar a impressão de que o círculo pode cair a qualquer momento, gerando, em algum nível, uma sensação de ansiedade no usuário.
Círculo posicionado no topo — sensação de instabilidade
Agora, analise a imagem abaixo. Ela dá a impressão de ser um objeto descansando na parte inferior da tela de forma pacífica, gerando, em certo nível, uma sensação mais pacífica.
Círculo posicionado na base — sensação de repouso
Lição Seja intencional e consciente quando estiver projetando quais objetos visualmente pesados ficarão na parte superior. Eles podem parecer desconfortáveis e deixar os usuários ansiosos (a não ser, claro, que essa seja a intenção).
1.2. Direção e prioridade de leitura
Na sociedade ocidental (do contrário, inverta), lemos da esquerda para a direita, de cima para baixo. Dessa forma, é natural lermos os objetos primeiro no canto superior esquerdo e, então, nossos olhos irão naturalmente para o canto inferior direito e verão as coisas que estão ali.
Padrão de leitura: superior-esquerda → inferior-direita
Provavelmente, se você cresceu lendo livros em português, você olhou primeiro para o círculo superior esquerdo e depois para o círculo do canto inferior direito.
Lição Se você está tentando criar uma hierarquia visual (talvez você queira que seus usuários vejam o título primeiro e depois o conteúdo), o local onde você coloca os elementos, mesmo que sejam da mesma forma/cor/tamanho, faz diferença.
1.3. Notas finais
Existem muitos outros conceitos que não achei tão relevante passar aqui, mas segue o link do conteúdo caso haja curiosidade de mais aprofundamento: 6 princípios visuais para UX designers.
2. Fluxograma de ações do usuário
Geralmente existem muitos usuários em um mesmo sistema. Cada usuário tem interesse em executar algumas ações. Por exemplo, no Cognera um parceiro quer: cadastrar novo cliente, criar campanhas etc.
É importante fazermos um fluxograma de cada ação que o usuário vai tomar para atingir os objetivos que ele quer. Um bom design de UX faz com que esses fluxogramas tenham o menor tamanho possível. Segue exemplo do parceiro criando uma campanha abaixo:
Analisando esse fluxograma, pode ser que o parceiro esteja fazendo um caminho muito longo e desgastante para criar uma campanha (que é algo que ele deve fazer bastante). Pelos princípios de UX, todos os caminhos de funcionalidades do usuário devem tender ao mínimo possível.
3. Heurísticas de Nielsen
Jakob Nielsen foi um estudante de ciência da computação que formulou 10 heurísticas, ou boas práticas, para aplicarmos a um software para gerar uma boa experiência de usuário. Essas heurísticas não são determinísticas, mas sim, boas práticas para pensarmos e avaliarmos se vale ou não a pena aplicar em um software dependendo do contexto, requisitos etc.
3.1. Visibilidade de status do sistema
O design sempre deve manter os usuários informados do que está acontecendo.
Quando os usuários conhecem o estado atual do sistema, eles entendem o resultado de suas interações anteriores e determinam os próximos passos. Interações previsíveis geram confiança tanto no produto quanto na marca.
3.2. Correspondência entre o sistema e o mundo real
O design deve falar a língua dos usuários. Use palavras, frases e conceitos familiares, em vez de jargões internos. Siga as convenções do mundo real, fazendo com que as informações apareçam em ordem natural e lógica.
A forma como você deve projetar depende muito dos seus usuários específicos. Termos, conceitos, ícones e imagens que parecem perfeitamente claros para você e seus colegas podem ser desconhecidos ou confusos para seus usuários.
Quando os controles de um design seguem as convenções do mundo real e correspondem aos resultados desejados (o chamado mapeamento natural), fica mais fácil para os usuários aprenderem e lembrarem como a interface funciona. Isso ajuda a construir uma experiência que parece intuitiva.
3.3. Controle e liberdade do usuário
Os usuários frequentemente realizam ações por engano. Eles precisam de uma "saída de emergência" claramente marcada para abandonar a ação indesejada sem ter que passar por um processo longo.
Quando é fácil para as pessoas desistirem de um processo ou desfazerem uma ação, isso estimula uma sensação de liberdade e confiança. As saídas permitem que os usuários permaneçam no controle do sistema e evitem ficar presos e frustrados.
3.4. Consistência e padrões
Os usuários não devem ter que se perguntar se palavras, situações ou ações diferentes significam a mesma coisa. Siga as convenções da plataforma e da indústria.
A Lei de Jakob estabelece que as pessoas passam a maior parte do tempo usando outros produtos digitais além do seu. As experiências dos usuários com esses outros produtos moldam suas expectativas. A falta de consistência pode aumentar a carga cognitiva dos usuários, forçando-os a aprender algo novo.
3.5. Prevenção de erros
Boas mensagens de erro são importantes, mas os melhores designs evitam cuidadosamente que os problemas aconteçam em primeiro lugar. Elimine as condições propensas a erros ou identifique-as e apresente uma opção de confirmação antes que o usuário se comprometa com a ação.
Existem dois tipos de erros: deslizes e equívocos. Deslizes são erros inconscientes causados por desatenção. Equívocos são erros conscientes baseados em uma incompatibilidade entre o modelo mental do usuário e o design.
3.6. Reconhecimento em vez de memorização
Minimize a carga de memória do usuário tornando elementos, ações e opções visíveis. As informações necessárias para usar o design (como rótulos de campos ou itens de menu) devem estar visíveis ou ser facilmente recuperáveis quando necessário.
Os seres humanos possuem uma memória de curto prazo limitada. Interfaces que promovem o reconhecimento reduzem a quantidade de esforço cognitivo exigido dos usuários.
3.7. Flexibilidade e eficiência de uso
Atalhos — ocultos para usuários iniciantes — podem acelerar a interação para o usuário especialista, permitindo que o design atenda tanto a usuários inexperientes quanto aos mais experientes.
Processos flexíveis podem ser realizados de diferentes maneiras, para que as pessoas possam escolher o método que melhor funciona para elas.
3.8. Design estético e minimalista
As interfaces não devem conter informações irrelevantes ou raramente necessárias. Cada unidade extra de informação compete com as unidades relevantes e diminui sua visibilidade relativa.
Esta heurística não significa que você precise usar um flat design — trata-se de garantir que o conteúdo e o visual se mantenham focados no que é essencial, apoiando os objetivos principais do usuário.
3.9. Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros
As mensagens de erro devem ser expressas em linguagem clara (sem códigos de erro), indicar o problema com precisão e sugerir uma solução de forma construtiva.
Essas mensagens também devem ser apresentadas com tratamentos visuais que ajudem os usuários a notá-las e reconhecê-las.
3.10. Ajuda e documentação
É melhor que o sistema não precise de nenhuma explicação adicional. No entanto, pode ser necessário fornecer documentação para ajudar os usuários a entenderem como concluir suas tarefas.
O conteúdo de ajuda e documentação deve ser fácil de pesquisar e focado na tarefa do usuário. Mantenha-o conciso e liste os passos concretos que precisam ser realizados.
4. Pontos analisados: Cognera
4.1. Status de menu selecionado
Quando o usuário seleciona o menu de cliente, não existe nenhuma indicação gráfica de que ele está selecionado. Ao lado segue um exemplo de um menu clicado que indica ao usuário qual o status atual da aplicação.
| Cognera — sem indicação de seleção | Referência — item ativo destacado |
|---|---|
 |
 |
4.2. Direção de execução de ações do usuário
Quando um usuário cria campanhas, o botão de salvar fica no meio da tela. O fluxo de ações do usuário não segue a direção de cima para baixo corretamente.
Cadastro de campanha — botão "Salvar" fora do fluxo natural de leitura
4.3. Botões sem label
Em algumas telas o botão de "X" não possui uma label indicando a ação que ele executa. Talvez poderia ser uma seta ao invés de "X" dependendo do tipo de ação que ela está executando.
Botão de fechar/voltar sem rótulo explicativo
4.4. Recolher menu
5. Sugestões de mudança do Claude
Observação: cada mudança sugerida aqui é apenas para termos uma noção de novas disponibilidades de recursos na tela — não é um guia definitivo de como a tela deve ser.
5.1. Tela de cliente
Sugestão de mudança para a tela de Cliente: colocar o botão de novo cliente no topo direito da tela — de acordo com o Claude, isso é um padrão comum para ações primárias e resolve cerca de 80% do incômodo visual.
Botão "Novo cliente" reposicionado no topo direito
5.2. Tela de cadastro de campanha
Sugestão de mudança para a tela de cadastro de Campanha: deixar toda a tela linear de cima para baixo, seguindo o padrão ocidental de leitura.
Fluxo de cadastro reorganizado em ordem linear top-down