10 heurísticas autorais de UX/UI e exemplos do que ou não se fazer.

Paulo Carlotto
Jul 20, 2017 · 3 min read

heurística

substantivo feminino

1.arte de inventar, de fazer descobertas; ciências que tem por objeto a descoberta dos fatos.

2. hist ramo da História voltado à pesquisa de fontes e documentos.

3. inf método de investigação baseado na aproximação progressiva de um dado problema.

Heurísticas de usabilidade consistem em boas práticas que, quando aplicadas ao design, tendem a resultar em produtos mais concisos e que oferecem melhor usabilidade e conforto visual ao usuário.

Heurísticas servem tanto para guiar o desenvolvimento do projeto quanto para avaliar as funcionalidades do produto ou serviço. O termo foi primeiramente usado por Jakob Nielsen, User Advocate (a prática de usar porta-vozes designados para facilitar a relação entre usuários e designers) e co-fundador do Nielsen Norman Group, juntamente com Don Norman.

Nielsen definiu 10 heurísticas que são usadas a rodo por designers do mundo, com objetivo de evitar erros básicos de usabilidade e agilizar o desenvolvimento do produto.

É recomendável que, além das boas práticas universais, cada equipe de design desenvolva suas próprias heurísticas, conforme a dinâmica de colaboração dos membros. Ao definir regras colaborativas, a equipe tende a desenvolver produtos que carregam a identidade e o conhecimento de cada designer, de forma que o desenvolvimento tende a ser passível de reconhecimento mais fácil de erros e a usabilidade, mais justificável.


Segue abaixo um exemplo de heurísticas autorais baseadas na análise de exemplos bons e ruins de usabilidade:

  1. Cores: priorizar preto, branco, escala de cinza e cartela de máximo 3 cores para tipografia, background, ícones e botões. As cores das imagens devem captar a atenção do usuário. O que se fazer.
  2. Skeuomorfismo morréEéu. Mantenha os efeitos visuais flat e com clareza. O que não se fazer.
  3. Evite mudanças súbitas de contraste de claridade no plano de fundo (de preto para branco, de branco para preto, por exemplo). O que não se fazer
  4. Sempre mantenha o usuário ciente de suas ações. Pode-se usar highlight em abas, animações de rolagem e/ou mouse over, etc. O que se fazer.
  5. Evite informações demais saltando na tela. O usuário está ali com um objetivo, não desvie sua atenção. O que não se fazer.
  6. Otimize espaços visuais. Se um espaço for desnecessariamente deixado em branco, o usuário terá a impressão que algo está faltando. O que não se fazer.
  7. Tópicos altos e claros. Entenda as principais necessidades do usuário no serviço prestado e as dê logo de cara. Não coloque informação demais à primeira vista, apenas o necessário para prender a atenção. Dê a opção de mais informações, caso necessário. O que se fazer.
  8. Use proporções que mostrem, por tela, mais de 1 produto ou serviço oferecido. Imagens e informações grandes demais podem tirar o senso de escolha. O que não se fazer.
  9. É importante que a experiência digital se assemelhe com a experiência oferecida como um todo pelo produto ou serviço. O que se fazer.
  10. O usuários devem ser permitidos a filtrarem o que vêem, de acordo com suas preferências. Sempre dê a opção de exibir informação. Ela pode ser baseada em preço, local, avaliações de outros usuários, distância, data e qualquer outra variável que o serviço oferece. O que se fazer.

)

Paulo Carlotto

Written by

Designer, UX enthusiastic.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade