Análise heurística por Nielsen: um guia educativo.
O objetivo deste guia é fornecer um conteúdo educativo sobre Análise Heurística de Nielsen*. Esse material pode ser utilizado como suporte na aplicação dessa ferramenta no cotidiano do profissional de Design de Produto.
Esse guia é estruturado da seguinte forma:
‣ O que é?
‣ Quando usar?
‣ As 10 heurísticas
‣ Como estruturar uma análise?
‣ Dicas Extras
‣ Links úteis
*Esse material foi desenvolvido com base no conteúdo disponibilizado pela NNGroup.
— — — — — — — — — — — — — — —
O que é?
A análise heurística é um método prático de avaliação de produtos digitais com base em critérios pré-estabelecidos. Seu objetivo é garantir um nível mínimo de qualidade em sites, aplicativos e outros sistemas digitais.
Essa análise leva em consideração o conhecimento e a experiência em UX para determinar o que está funcionando e o que não está em um sistema, com base nas heurísticas utilizadas.
A importância da análise heurística reside na sua praticidade de aplicação, pois não requer grandes preparações, dependendo exclusivamente do profissional de UX para ser realizada. Além disso, ela fornece dados qualitativos, enriquecendo a compreensão sobre o produto avaliado.
— — — — — — — — — — — — — — —
Quando usar?
Não há regras fixas para a aplicação de análise heurística ou sobre a forma de aproveitar os insights que ela proporciona. O objetivo é utilizar da melhor maneira possível um método embasado cientificamente e acessível.
Dito isso, existem situações em que a análise heurística pode oferecer um suporte significativo e ajudar a alcançar resultados positivos:
- Em fases de evolução, em que o objetivo é melhorar a experiência de uso do produto em análise;
- Durante o benchmarking, quando as heurísticas podem ser utilizadas como base para analisar concorrentes diretos e indiretos em relação ao projeto em questão;
- Durante o processo de criação, ao aplicar os conceitos das heurísticas, o conhecimento adquirido pode auxiliar na criação de uma nova interface, fornecendo direcionamentos e dicas para aprimorar a execução.
— — — — — — — — — — — — — — —
As 10 Heurísticas
◆ 01 - Visibilidade do estado do sistema — feedback
O design deve garantir que as pessoas usuárias sejam constantemente informadas sobre o que está ocorrendo, fornecendo um feedback adequado dentro de um tempo razoável.
Dicas:
A. É importante transmitir de maneira clara qual é o estado do sistema — nenhuma ação com consequências deve ser executada sem fornecer informações prévias.
B. Por isso, forneça feedback de forma rápida e preferencialmente imediata.
C. Utilize micro interações para estabelecer uma comunicação clara e contínua.
Exemplo:
O YouTube é um ótimo exemplo de fornecimento simultâneo de vários tipos de feedback, indicando à pessoa usuária onde ela está (1), seu histórico de visualização (2) e os próximos vídeos sugeridos (3). Todas as ações que podem ser realizadas ou que já foram realizadas estão claramente visíveis na tela.
◆ 02 - Mapeamento entre o sistema e o mundo real — modelos mentais
O design deve se comunicar na linguagem das pessoas usuárias, utilizando palavras, frases e conceitos que sejam familiares a elas, em vez de utilizar jargões internos. É importante seguir as convenções do mundo real, apresentando as informações em uma ordem natural e lógica.
Dicas:
A. Assegure a compreensão do significado sem que haja necessidade de a pessoa usuária buscar a definição de uma palavra, ícone ou imagem.
B. Evite presumir que sua compreensão de palavras ou conceitos seja idêntica a do público.
C. A pesquisa com pessoas usuárias revelará a terminologia que lhes é familiar, assim como os modelos mentais que possuem acerca de conceitos importantes.
Exemplo
Quando abordamos símbolos carregados de significado, um bom exemplo é o menu do Microsoft Word. Nesse menu, encontramos diversos símbolos e palavras que fazem parte da rotina da pessoa usuária , o que amplia a eficiência da compreensão. Por exemplo, tesoura para cortar e microfone para ditar.
◆ 03 - Liberdade e controle à pessoa usuária
As pessoas usuárias ocasionalmente cometem erros ao realizar ações. Elas precisam de uma opção de “saída de emergência” para cancelar a ação indesejada, sem ter que passar por um processo prolongado.
Dicas:
A. Disponibilize funcionalidades para Desfazer e Refazer.
B. Apresente de forma nítida uma opção para encerrar a interação atual, como um botão de Cancelar.
C. Garanta que a saída esteja claramente indicada e seja facilmente encontrada.
Exemplo:
Se concedemos à pessoa usuária a possibilidade de excluir uma informação, pode ser vantajoso também oferecer a opção de recuperar a informação perdida. Por exemplo, ao deletar um e-mail, ele não é imediatamente removido; em vez disso, é movido para a pasta “Lixo”, onde pode ser recuperado caso tenha ocorrido um equívoco.
◆ 04 - Consistência e padrões
O ideia é que pessoas usuárias não tenham dúvidas sobre palavras, situações ou ações da experiência digita que estamos criando. Por isso, é importante seguir as convenções da plataforma e da área da indústria à qual ela pertence e assim manter a consistência para que consigam, de modo intuitivo, identificar os padrões.
Dicas:
A. Aprimore a facilidade de aprendizado ao manter ambos os tipos de consistência: interna e externa.
B. Consistência interna: Mantenha a consistência dentro de um único produto ou de uma família de produtos, levando em conta elementos como o design system (visual e componentes), tom e voz (conteúdo), bem como a estrutura geral (arquitetura).
C. Consistência externa: Siga convenções estabelecidas pela indústria.
Exemplo:
Podemos observar um caso de consistência interna em diversas plataformas de redes sociais. No X (Twitter), por exemplo, todos os botões compartilham características semelhantes, como cor e formato. Já um exemplo de consistência externa pode ser identificado nos ícones presentes na barra lateral, tais como uma casa para a página inicial, um envelope para mensagens, uma bandeira para favoritos, uma figura para o perfil e três pontos para acessar mais informações.
◆ 05 - Prevenção de erros
Mensagens de erro eficientes são fundamentais, no entanto, os melhores projetos se concentram em evitar cuidadosamente a ocorrência de problemas desde o início. Elimine condições que possam levar a erros ou implemente verificações que forneçam às pessoas usuárias aos usuários opções para se recuperarem desses erros.
Dicas:
A. Dê prioridade aos seus esforços: Comece prevenindo os erros de alto custo e, em seguida, aborde as pequenas frustrações.
B. Evite deslizes ao fornecer restrições úteis e padrões bem definidos.
C. Previna erros ao reduzir as cargas de memória, oferecer suporte para desfazer ações e alertar seus usuários.
Exemplo:
Um ilustrativo caso de prevenção de erros pode ser observado no Spotify. Ao tentar adicionar uma música a uma playlist na qual ela já consta, o aplicativo exibe uma mensagem de confirmação. Essa abordagem evita a inclusão inadvertida de uma música duplicada. Além de fornecer um alerta, o sistema também oferece meios para que o usuário resolva essa situação, notando especialmente o destaque do botão “Não adicionar”. Isso ressalta que o sistema considera essa ação como a principal para a pessoa usuária tomar.
◆ 06 - Reconhecer ao invés de lembrar
Reduza a carga de memória tornando elementos, ações e opções visíveis. A pessoa usuária não deve precisar lembrar de informações de uma parte da interface para outra. As informações essenciais para usar o design, como rótulos de campo ou itens de menu, devem estar visíveis ou prontamente disponíveis quando necessário.
Dicas:
A. Possibilite que pessoas usuárias identifiquem informações na interface, ao invés de forçá-las a lembrar (“recordar”) tais informações.
B. Ofereça ajuda contextualmente, ao invés de fornecer um tutorial longo para memorizar.
C. Diminua a quantidade de informações que precisam ser lembradas.
Exemplo:
Um bom exemplo de recordação em vez de memorização é a utilização de tags adicionadas a ícones em um menu. Não é uma exigência que as pessoas saibam ou sempre lembrem o significado de cada ícone. Incorporar o significado por meio de uma etiqueta ao passar o mouse sobre o ícone se torna uma abordagem eficaz para manter um menu minimalista, ao mesmo tempo em que respeita essa heurística.
◆ 07 - Flexibilidade e eficiência de uso
Atalhos, embora ocultos para pessoas usuárias iniciantes, podem acelerar a interação de quem já está em uma posição de mais experiência, permitindo que o design atenda tanto a pessoas usuárias experientes quanto inexperientes. Além disso, é importante permitir a personalização de ações frequentes.
Dicas:
A. Disponibilize opções para otimizar ações, tais como atalhos de teclado e gestos de toque.
B. Ofereça personalização ao adaptar conteúdos e funcionalidades de acordo com as preferências de cada pessoa usuária, com níveis diferenciados, de iniciantes a experientes.
C. Possibilite a personalização completa, permitindo a realização de escolhas sobre o funcionamento desejado do produto.
Exemplo:
Uma maneira de incorporar flexibilidade à utilização de um sistema é por meio dos atalhos de teclado. No Figma, por exemplo, é possível optar entre utilizar os menus localizados na parte superior e lateral para acessar as ferramentas, ou aproveitar teclas específicas para agilizar o processo. Como exemplo, para criar uma forma circular, você pode tanto seguir pelo menu quanto pressionar a tecla O.
◆ 08 - Design estético e minimalista
As interfaces devem evitar a inclusão de informações irrelevantes ou raramente necessárias. Cada elemento adicional em uma interface concorre com as informações relevantes e diminui sua visibilidade relativa.
Dicas:
A. Mantenha o conteúdo e o design visual da interface centrados no essencial.
B. Não permita que elementos desnecessários distraiam as pessoas usuárias das informações de que realmente precisam.
C. Dê prioridade ao conteúdo e às funcionalidades que apoiam os objetivos principais.
Exemplo:
O Google sempre foi uma referência quando se trata de Design. Ao observarmos essa heurística, podemos tomar o exemplo do Google Calendar. Ao pensar que um dos principais objetivos é exibir na tela somente as informações essenciais para uso, o Google Calendar se destaca como um excelente modelo. Ele é um sistema complexo que apresenta informações de forma clara e possui uma curva de aprendizado reduzida, graças às escolhas de design implementadas.
◆ 09 - Suporte para a pessoa usuária reconhecer, diagnosticar e recuperar de erros
As mensagens de erro devem ser formuladas em linguagem simples, sem o uso de códigos de erro, para que possam indicar com precisão o problema encontrado e oferecer sugestões construtivas para uma solução.
Dicas:
A. Utilize elementos visuais tradicionais de mensagens de erro, como texto em negrito e vermelho.
B. Informe o que deu errado utilizando uma linguagem acessível que o maior número de pessoas possa entender — evite jargões técnicos.
C. Ofereça uma solução, como um atalho que possa resolver o erro imediatamente.
Exemplo:
A página de erro 404 é uma excelente maneira de ilustrar um erro muito comum e como as marcas trazem o conteúdo para a pessoa usuária, fornecem orientações e, ao mesmo tempo, tornam a experiência menos negativa.
◆ 10 - Ajuda e documentação
É ideal que o sistema seja autoexplicativo, não necessitando de informações adicionais. No entanto, em certos casos, pode ser necessário fornecer documentação para auxiliar a pessoa usuária compreender como realizar suas tarefas.
Dicas:
A. Garanta que a documentação de ajuda seja de fácil busca.
B. Sempre que possível, apresente a documentação no contexto exato em que a pessoa usuária necessita.
C. Liste passos concretos a serem realizados.
Exemplo:
Quando lidamos com sistemas altamente complexos ou multifuncionais, a documentação e o suporte podem se tornar essenciais. Um produto que frequentemente requer esses recursos são os softwares, como exemplificado abaixo na seção de Ajuda do Photoshop.
— — — — — — — — — — — — — — —
Como estruturar uma análise?
Tenha um objetivo de pesquisa claro
Definir um objetivo é fundamental ao iniciar uma pesquisa, pois ele atua como direcionador. Esse objetivo não apenas fornece um propósito claro para a investigação, mas também ajuda a delimitar o escopo, estabelecer prioridades e direcionar os esforços de coleta e análise de dados. Além disso, ao ter um objetivo bem definido, os dados são analisados de forma mais eficaz, garantindo que as descobertas estejam alinhadas com a finalidade da pesquisa, tornando todo o processo mais eficiente e significativo. Você pode ter um objetivo geral, ou um objetivo por fases de análise, por exemplo:
Defina um plano de análise
A análise heurística pode ser aplicada a uma jornada específica ou direcionada para o produto como um todo. Neste último cenário, é interessante estabelecer um plano de análise para apoiar o processo de pesquisa de maneira eficaz. Para otimizar esse processo, é fundamental definir uma sequência de análise, com o propósito de realizar entregas por etapas. Isso permite que sejam finalizadas pequenas doses de valor ao longo do tempo, evitando a extensão excessiva da entrega final. Essa abordagem progressiva não apenas facilita a identificação de problemas e melhorias, mas também garante que as ações corretivas possam ser implementadas de maneira oportuna, beneficiando tanto a equipe de desenvolvimento quanto as pessoas usuárias finais.
Um exemplo de plano de análise de um produto digital:
Defina uma Escala do nível de problema
Ao realizar uma análise heurística, é fundamental estabelecer uma escala de classificação para os problemas identificados. Essa escala desempenha um papel essencial na priorização das ações futuras. Ao categorizar os problemas em diferentes níveis de gravidade ou importância, a equipe de design pode focar seus esforços nas áreas que exigem atenção imediata, abordando questões críticas antes de lidar com aquelas de menor impacto. Isso garante uma abordagem mais eficaz para a melhoria do projeto, otimizando o processo de análise heurística e contribuindo para a qualidade do produto final.
Um exemplo de classificação:
— — — — — — — — — — — — — — —
Dicas Extras:
1. Centralize a análise em um documento ou software específico com o objetivo de obter uma visão abrangente e simplificar o processo. Recomenda-se a utilização de ferramentas como FigJam, Miro, ou outras similares, que permitam a documentação da análise realizada e até mesmo viabilizem a colaboração na análise.
2. Procure soluções para cada problema identificado, independentemente do nível de complexidade. Utilize ferramentas como benchmarking, pesquisa, testes e pesquisa documental, ou qualquer outra que possa contribuir para a identificação de soluções. Certifique-se de documentar todas as soluções encontradas.
3. Dê atenção especial ao conteúdo apresentado (o texto do site), pois ele desempenha um papel fundamental na interface. Considere o conteúdo como um elemento essencial durante o processo de análise.
— — — — — — — — — — — — — — —
Links úteis
Para mais informações você pode acessar o link oficial do Nielsen Norman Group, nele você encontrará o assunto aprofundado, artigos relacionados e exemplos:
https://www.nngroup.com/articles/ten-usability-heuristics
Se preferir um conteúdo mais dinâmico, o próprio N N Group disponibiliza vídeos explicando cada uma das heurísticas, segue o link da playlist do tema:
https://youtube.com/playlist?list=PLJOFJ3Ok_idtb2YeifXlG1-TYoMBLoG6I
