10 linhas orientadoras para UI Design

Em 1990 Jakob Nielsen e Rolf Molich definiram 10 heurísticas de usabilidade para o design de interação. Chamam-se heurísticas no sentido de serem regras gerais e não directrizes específicas. Estas regras devem potencialmente ser identificadas em todas as situações em que exista uma interação do utilizador com um objecto ou plataforma. Neste artigo vamos explorar como se encontram nos websites e como melhoram a interação.

Pedro Completo
Mar 14 2023 • 5 min leitura
10 linhas orientadoras para UI Design
  1. Visibilidade do status do sistema
    O design deve sempre manter os utilizadores informados sobre o que está a acontecer, por meio de feedback apropriado num período de tempo razoável. Num website temos por exemplo a seleção de menu ou a tracker para que o utilizador possa sempre saber em que página se encontra e o que pode fazer a seguir.
  2. Correspondência entre o sistema e o mundo real
    O design deve falar a mesma linguagem dos utilizadores. Use palavras, frases e conceitos familiares ao utilizador. Siga as convenções do mundo real, fazendo com que as informações apareçam numa ordem natural e lógica. É importante definir a persona com que estamos a comunicar para poder criar um design focado no utilizador e na sua experiência.
  3. Liberdade e controlo do utilizador
    Os utilizadores geralmente executam ações por engano. Eles precisam de uma "saída de emergência" claramente marcada para deixar a ação indesejada sem ter que passar por um processo prolongado. Um exemplo claro nos websites é a existência de botões de navegação que permitam ao utilizador voltar à página anterior.
  4. Consistência e padrões
    Os utilizadores não se devem perguntar se diferentes palavras, situações ou ações significam a mesma coisa. Siga as convenções para facilitar a vida do utilizador. Todos sabemos por exemplo que a lupa é utilizada como função de pesquisa e costuma estar geralmente colocada no topo dos websites tornando a navegação mais rápida e intuitiva. 
  5. Prevenção do erro
    Boas mensagens de erro são importantes, mas os melhores projetos evitam cuidadosamente a ocorrência de problemas. Elimine as condições propensas a erros ou verifique-as e apresente aos utilizadores uma opção de confirmação antes que eles se comprometam com a ação. No preenchimento de formulários quando existe algum erro é sempre desejável que o erro seja identificado de forma clara dando a possibilidade do utilizador o corrigir em vez de ter de preencher novamente o formulário e esperar pelo melhor.
  6. Reconhecimento em vez de recordação
    Minimize a carga de memória do utilizador tornando elementos, ações e opções visíveis. O utilizador não deve ter que se lembrar de informações de uma parte da interface para outra. As informações necessárias para usar o design (por exemplo, rótulos de campo ou itens de menu) devem estar visíveis ou facilmente recuperáveis quando necessário. Se os botões de CTA forem sempre iguais ao longo do site será mais fácil ao utilizador reconhece-los e identificar que vão despontar uma acção. 
  7. Flexibilidade e eficiência de utilização
    Atalhos — ocultos para utilizadores principiantes — podem acelerar a interação do usuário experiente para que o design possa atender tanto a utilizadores experientes quanto inexperientes. Permita que os usuários personalizem ações frequentes. Numa galeria geralmente existem sempre elementos de navegação, seja por setas ou bullets, mas os utilizadores mais experientes sabem que podem também usar as setas do teclado para navegar mais facilmente entre slides.
  8. Estética e design minimalista
    As interfaces não devem conter informações irrelevantes ou raramente necessárias. Cada unidade extra de informação numa interface compete com as unidades relevantes de informação e diminui sua visibilidade relativa. Se todos os elementos de uma página tiverem o mesmo destaque será mais difícil guiar o utilizador para o objectivo principal. É importante manter uma grelha simples e intuitiva mantendo sempre mais visível a informação relevante.
  9. Ajude os utilizadores a reconhecer, diagnosticar e recuperar de erros
    As mensagens de erro devem ser expressas em linguagem simples (sem códigos de erro), indicar com precisão o problema e sugerir uma solução de forma construtiva. Ao utilizar mensagens de erro de forma tradicional, com blocos a vermelho e utilizando uma linguagem simples facilitamos a vida do utilizador. Por vezes pode até fazer sentido facilitar com atalhos que ajudem a resolver o problema. 
  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 utilizadores a entender como concluir suas tarefas. Apesar de desenharmos os websites de forma intuitiva para o utilizador, nunca é demais ajudar potenciais clientes a encontrar o que procuram sem os obrigar a navegar pelo site. Os chatbots ou ferramentas de comunicação instantânea podem hoje ser adicionados aos websites de forma a que os potenciais clientes possam rápida e facilmente ver as suas perguntas respondidas sem que tenham de explorar o website mais a fundo.

Seguindo estas linhas condutoras conseguimos uma base para um bom UI design. Este dez princípios, comprovados ao longo de décadas, ajudam-nos a melhorar a experiência do utilizador em todos os aspetos. Apesar de não serem leis devem sempre ser tidas em conta no inicio de qualquer projecto, e apesar de muitas delas parecerem “invisíveis” ao primeiro olhar são benéficas e aumentam a eficiência na conversão dos objetivos.

Atenção, o seu browser está desactualizado.
Para ter uma boa experiência de navegação recomendamos que utilize uma versão actualizada do Chrome, Firefox, Safari, Opera ou Internet Explorer.