• Fernando Giannini

Os 10 princípios gerais do design de interação

Atualizado: Mai 6

25 anos atrás, Jakob Nielsen descreveu os 10 princípios gerais do design de interação. Esses princípios foram desenvolvidos com base em anos de experiência no campo da engenharia de usabilidade e se tornaram regras básicas para a interação humano-computador.


Hoje, eles são tão relevantes quanto eram naquela época. Eles podem ajudar a economizar tempo considerável das equipes de desenvolvimento durante os primeiros testes de usabilidade, para que possam direcionar sua atenção para desafios de design mais complexos. Além disso, também vale a pena usá-los como uma lista de verificação ao projetar um novo produto ou recurso.


1. Visibilidade do status do sistema


As pessoas adoram manter as coisas sob controle e só então podem se sentir seguras. Do ponto de vista evolutivo, a necessidade de segurança e de necessidades fisiológicas (como comida, sono e sexo) nos ajudaram a sobreviver. A sensação de controle pode ser evocada fornecendo informações sobre o status do sistema e feedback após cada interação.

Dê uma olhada no seu smartphone. Logo depois que a tela acende, ele informa sobre bateria, conexão wi-fi, mensagens recebidas, chamadas perdidas e muito mais. Imagine como você se sentiria inseguro se essas informações estivessem ausentes. Ao utilizar sinais, ícones e indicadores, o sistema comunica seu status e ajuda o usuário a tomar decisões melhores e mais informadas.

Quando as pessoas interagem com qualquer sistema, ele sempre deve fornecer feedback imediato sobre a interação. Cada um de nós foi exposto por uma experiência ruim no passado, o que nos deixou céticos e desconfiados a priori. Apenas um sinal visual como a mudança da cor do botão, um botão giratório de carregamento ou uma animação de um ícone pode ajudar o usuário a entender o que está acontecendo e evitá-lo de outras interações desnecessárias.


2. A correspondência entre o sistema e o mundo real


As pessoas estão abordando cada novo sistema com um modelo mental em mente. Em outras palavras, as pessoas presumem como o sistema poderia funcionar com base em sua experiência com outros sistemas semelhantes. Usando uma linguagem com a qual eles estão familiarizados, você pode ajudar os usuários a superar a estranheza inicial.

Um exemplo extremo é um projeto de skeuomorfismo, que transfere todos os detalhes de objetos do mundo real para o software. No início da adoção do smartphone, ajudou as pessoas a aprender como usar seus novos companheiros por meio da estética e dos processos com os quais estavam familiarizados antes.

Ótimos exemplos de ícones de correspondência do mundo real

Mesmo no mundo minimalista de hoje, dezenas de pistas de design persistiram daquela época: aplicativos como a bússola, a calculadora, ou componentes de design como pastas, botões de alternância ou ícones de cadeado. Além disso, a linguagem e os conceitos do mundo real ajudam os usuários a compreender facilmente o sistema. É por isso que o aplicativo para armazenamento de cartões é chamado de "Carteira", estamos usando "Favoritos" para salvar nossos sites favoritos, usamos a "Lixeira" para remover arquivos antigos ou o "Carrinho de compras" ao fazer compras online.


3. Controle e liberdade do usuário

As pessoas costumam interagir com o sistema com pressa e, muitas vezes, nem mesmo estão totalmente concentradas. Isso resulta em coisas como cliques errados ou outros acidentes que podem ser frustrantes. Imagine uma situação que envolva algo como a exclusão acidental de um arquivo importante ou a publicação de um erro gramatical nas redes sociais de sua empresa; todo sistema deve ter um mecanismo de “saída de emergência” claramente marcado, que forneça aos usuários um caminho fácil de volta depois de se encontrarem em um estado indesejado.

“Cada sistema deve ter uma saída de emergência desobstruída.”

Uma saída de emergência apropriada pode ser algo tão simples como uma seta para trás (por exemplo, em um navegador), uma lixeira, que nos protege contra exclusão acidental, ou o botão "desfazer", que permite ao usuário reverter a última ação. Todos esses exemplos demonstram sistemas que não decepcionam os usuários quando cometem um erro e, em vez disso, permitem que o usuário corrija


4. Consistência e padrões


Você já notou que a funcionalidade de copiar e colar funciona exatamente da mesma forma, não importa qual aplicativo você está usando? E quanto ao fato de que você pode acessar sua tela inicial simplesmente deslizando para cima a partir da borda inferior? Esses são apenas dois padrões de usabilidade que a Apple usa para tornar seu sistema consistente e previsível para os usuários. Um sistema compreensível nunca deve confundir os usuários usando palavras, imagens ou ações diferentes para os mesmos conceitos.

“Não se esqueça de que as pessoas passam 90% do tempo interagindo com outros aplicativos.”

Um bom ponto de partida para um sistema de design consistente de seu aplicativo móvel são as Diretrizes de interface humana da Apple e as Diretrizes de design de materiais do Google. Eles apresentam uma base sólida que descreve componentes de design importantes com muitos exemplos. Ao projetar seu novo aplicativo, nunca se esqueça de que as pessoas passam 90% do seu tempo interagindo com outros aplicativos, portanto, o uso de práticas recomendadas e padrões comuns acabará resultando em uma experiência geral muito melhor. A consistência é um dos maiores contribuintes para a usabilidade.


5. Prevenção de erros

Com base no livro de Don Norman, The Design of Everyday Things, existem dois tipos de erros criados pela interação com uma interface de usuário: deslizes e erros.

Os deslizes acontecem quando o usuário tende a realizar uma ação, mas devido à baixa atenção, realiza outra (por exemplo, ao realizar uma tarefa conhecida). A estratégia para evitar que os usuários sofram um deslize é minimizar a chance de sua ocorrência, orientando-os apenas pelas áreas seguras. Use restrições que não permitem que um usuário defina um valor errado (por exemplo, quando você espera um número, não permita escrever as letras), sugira as opções mais comuns para tornar a escolha fácil para os usuários (por exemplo, durante a pesquisa), ou use caixas de diálogos de confirmação antes de ações destrutivas.

Prevenção de deslizamento inteligente no aplicativo da web do gmail. Infelizmente, o aplicativo móvel não possui esse recurso.

Os erros geralmente são causados ​​pelo modelo mental incorreto de um usuário de como o sistema funciona. Nesse caso, o usuário entende mal a comunicação e conscientemente executa uma ação que leva a um resultado diferente do pretendido. Esses tipos de erros nem sempre são fáceis de corrigir e devem ser revelados durante a fase de teste do usuário. Use uma comunicação clara e um sistema de design consistente para evitar erros.

6. Reconhecimento em vez de lembrar

Existem dois tipos de recuperação de memória: reconhecimento e recuperação [5]. O reconhecimento acontece quando você reconhece facilmente uma pessoa ou um objeto com o qual está familiarizado. É uma forma muito superficial de recuperação da memória e não requer nenhum trabalho. A recordação acontece quando você precisa encontrar informações raramente utilizadas em sua memória (nomes, anos, detalhes, etc.). Para relembrar informações, as pessoas precisam ativar mais blocos de memória. Portanto, o processo de recall é uma recuperação mais profunda e requer mais trabalho. (É por isso que as perguntas de múltipla escolha nos testes são muito mais fáceis de responder do que as perguntas de resposta aberta.)


Uma boa interface de usuário não exige que o usuário se lembre com frequência. Em vez disso, oferece todas as opções e informações necessárias para fazer uma escolha. É muito mais fácil escanear rapidamente os ícones ou um menu de texto e selecionar um recurso cobiçado do que tentar recuperá-lo de sua memória e, em seguida, escrevê-lo em alguma interface de texto semelhante a um terminal. Dê aos usuários dicas para lembrar informações e forneça um ícone ao lado do nome do recurso ou use uma cor específica para funções relacionadas. Uma arquitetura de informação bem projetada também ajuda na busca por informações.

Os usuários que não estão familiarizados com a sintaxe dos comandos do terminal não podem realizar uma operação tão fácil quanto abrir ou excluir o arquivo.


7. Flexibilidade e eficiência de uso

Cada usuário é único; cada um tem suas próprias necessidades e habilidades diferentes. Da mesma forma, cada tarefa é única e requer controladores diferentes.

Organize a tela e torne o aplicativo mais fácil de navegar. O aplicativo deve sempre exibir apenas elementos e comandos de IU relevantes. Veja aplicativos como Apple Pages ou G-Drive; quando você está escrevendo um documento, você vê apenas alguns controladores relacionados à edição de texto. Mas quando você decide adicionar um gráfico extra, aparece uma nova paleta de recursos especificamente selecionada para ajudá-lo a completar esta tarefa.

Atalhos avançados do Photoshop

Não se esqueça dos profissionais e usuários avançados em geral! Um novo usuário que está entrando em uma curva de aprendizado sempre terá necessidades diferentes do profissional que está usando algumas horas todos os dias. Usuários avançados podem apreciar opções avançadas, atalhos ou até mesmo capacidade de extensão e personalização da interface do aplicativo. Os usuários avançados precisam economizar seu tempo e executar tarefas com rapidez, mas também com precisão e confiabilidade. Uma boa interface de usuário deve oferecer funcionalidade apropriada para usuários inexperientes e experientes.


8. Design Estético e Minimalista


O minimalismo não é apenas uma moda dos últimos anos, mas certamente é uma tendência duradoura com o objetivo de reduzir a descrição de um assunto apenas aos seus elementos necessários. Ele tem muitas aplicações em arte, música e literatura. O minimalismo ajuda os usuários a acessar rapidamente informações importantes e chegar ao resultado rapidamente.

"A perfeição é alcançada, não quando não há mais nada a acrescentar, mas quando não há mais nada a tirar." - Antoine de Saint-Exupéry

Para deixar o conteúdo restante se destacar, você não pode usar nada além de espaços em branco. Ajuda a aumentar a legibilidade do conteúdo, destaca chamadas para ações e cria um visual equilibrado e agradável [8]. Um design mínimo usa apenas as cores necessárias para apoiar a hierarquia visual. Pense no propósito e significado de cada cor. Use-o de forma consistente.


9. Ajude os usuários a reconhecer, diagnosticar e recuperar de erros

Erros e problemas de qualquer tipo podem ser frustrantes para o usuário. Especialmente quando são mal projetados e comunicados. Quer queiramos ou não, os usuários sempre tendem a se colocar em situações das quais precisam encontrar uma saída. Para minimizar a frustração, devemos nos esforçar tanto para projetar a experiência de erro quanto para o resto do sistema.

Mau exemplo de mensagem de erro que não é clara nem útil para o usuário.

Cada mensagem de erro deve ser o mais explícita e precisa possível. Ninguém quer ler mensagens vagas como “algo deu errado”. Declare o que aconteceu em uma linguagem humana legível. Mensagens como “Erro de classe 372” são igualmente absurdas. Dê ao usuário alguns conselhos construtivos sobre o que fazer a seguir. Proponha a solução ou encaminhe o usuário a um funcionário do suporte ao cliente que possa cuidar da situação. A última regra das boas mensagens de erro é a educação. Nunca culpe o usuário ou insinue que ele é estúpido.


10. Ajuda e documentação

Cada aplicativo deve se esforçar para ser perfeitamente utilizável sem qualquer documentação, mas como mencionamos antes, cada usuário tem diferentes habilidades e diferentes níveis de conhecimento, e o que é fácil para 90% dos usuários pode ser difícil para os 10% restantes. Documentação, perguntas frequentes e tutoriais bem escritos podem ser cruciais para manter o usuário atordoado.

A documentação deve ser bem estruturada, escrita em linguagem humana e minimalista. Às vezes, os usuários não precisam de muita documentação; uma simples coachmark mostrando como o novo recurso funciona ou um breve guia de integração que explica o básico é o suficiente. Aplicativos como Trello, Slack e Duolingo estão fazendo um ótimo trabalho na integração de seus usuários.


Autor: Michal Langmajer

Fontes: https://www.nngroup.com/articles/ten-usability-heuristics/

https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation

http://www.gdrc.org/decision/info-decision.html https://homepages.cwi.nl/~steven/sigchi/bulletin/1997.4/karn.html

52 visualizações0 comentário