AV1 DESENVOLVIMENTO FRONT-END II

Prévia do material em texto

2
UNIVERSIDADE VEIGA DE ALMEIDA
SUPERIOR DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
MICHEL GAMBA DE SOUZA
DESENVOLVIMENTO FRONTEND II
RIO DE JANEIRO
2025
INTRODUÇÃO
Desenvolvida em 1990 por Jakob Nielsen, cientista da computação, as 10 heurísticas são princípios de avalição da usabilidade de interfaces, podem ser aplicadas em qualquer momento do produto, mas são mais utilizadas em duas fases, durante o desenvolvimento, na qual a avaliação pode ser aplicada de base para criação de um layout funcional, e após a execução de uma nova funcionalidade, em que elas são usadas por especialistas em usabilidade que testam o produto e identificam problemas na interface.
AS 10 HEURÍSTICAS DE NIELSEN
1. Visibilidade do status do sistema
O sistema deve manter o usuário constantemente informado sobre o que está acontecendo, oferecendo feedbacks imediatos dentro de um tempo razoável. Essas informações orientam o usuário quanto às ações em andamento e ao estado atual da interface que está utilizando.
Heurística 1: Visibilidade do status do sistema (Exemplo: Playlist no YouTube)
Ao assistir a uma playlist no YouTube, o usuário é informado em tempo real sobre tudo que ocorre na tela: a barra de progresso indica quanto do vídeo já foi carregado, qual parte está sendo exibida e sua duração total. Além disso, à direita, é possível visualizar qual vídeo está sendo reproduzido, quais já foram assistidos e quais serão os próximos.
2. Correspondência entre o sistema e o mundo real
O sistema deve se comunicar utilizando a mesma linguagem que o usuário usa no cotidiano, empregando palavras, frases, imagens e conceitos familiares. É importante também utilizar ícones que representem ações de forma intuitiva, criando uma correspondência direta com o mundo real.
Heurística 2: Correspondência entre o sistema e o mundo real (Exemplo: Caixa de entrada do Gmai)
No Gmail, o ícone de uma lixeira simboliza a ação de excluir, enquanto o de lupa representa a função de busca. Esses ícones remetem a objetos e ações do mundo real, facilitando o entendimento do usuário.
3. Controle e liberdade para o usuário
É fundamental que o sistema permita que o usuário realize ações livremente. No entanto, em casos de engano, deve existir uma “saída de emergência” de fácil acesso, que possibilite desfazer a ação ou retornar à etapa anterior.
Heurística 3: Controle e liberdade para o usuário (Exemplo: Opção “Desfazer” do Gmail)
O Gmail oferece a opção “desfazer” após excluir um e-mail. Isso permite que o usuário reverta a ação caso tenha cometido um erro, garantindo-lhe maior controle e segurança na navegação.
4. Consistência e padronização
O sistema deve manter consistência visual e funcional, evitando que o usuário se confunda quanto ao significado de palavras, ações ou ícones. Uma interface coerente facilita o reconhecimento de padrões e melhora a experiência do usuário.
Heurística 4: Consistência e padronização (Exemplo: Menus dos programas Microsoft)
Os softwares da Microsoft seguem padrões consistentes: os menus estão sempre localizados na parte superior, e ícones que executam as mesmas funções são repetidos em todas as interfaces. Elementos como tipografia, tamanho e cor também são padronizados, reforçando a familiaridade do usuário.
5. Prevenção de erros
O sistema deve ser projetado para evitar erros, eliminando condições que possam induzir o usuário a enganos. Isso pode incluir alertas, confirmações de ação ou salvamento automático de informações.
Heurística 5: Prevenção de erros (Exemplo: Caixa de confirmação e rascunho no Outlook)
O Outlook exibe uma caixa de confirmação quando o usuário tenta fechar um e-mail não enviado. Além disso, o conteúdo é salvo automaticamente como rascunho, prevenindo a perda de informações e permitindo retomá-las depois.
6. Reconhecimento em vez de recordação
O sistema deve reduzir a necessidade de o usuário memorizar informações. Ações, opções e elementos importantes devem estar visíveis, permitindo o reconhecimento e facilitando o uso intuitivo.
Heurística 6: Reconhecimento em vez de recordação (Exemplo: Página de produto em site de e-commerce)
Em sites de e-commerce é comum seguir um padrão: barra de busca no topo, carrinho no canto superior direito, imagem do produto à esquerda e descrição à direita. Essa padronização facilita o reconhecimento e torna a navegação mais eficiente.
7. Eficiência e flexibilidade de uso
A interface deve atender tanto usuários iniciantes quanto experientes. Enquanto os novatos precisam de instruções mais detalhadas, os usuários avançados devem contar com atalhos e opções que acelerem suas ações.
Heurística 7: Eficiência e flexibilidade de uso (Exemplo: Atalhos de teclado do Windows)
Os atalhos de teclado no Windows aumentam a eficiência, reduzindo o número de cliques e o tempo necessário para executar tarefas, permitindo que o usuário realize ações de forma mais ágil.
8. Estética e design minimalista
Um design excessivamente carregado pode confundir o usuário e dificultar a tomada de decisões. Assim, a interface deve ser limpa, objetiva e priorizar as informações mais importantes, deixando conteúdos secundários em segundo plano.
Heurística 8: Estética e design minimalista (Exemplo: Site da Apple)
O site da Apple é um exemplo de design minimalista: apresenta o nome do produto, uma breve descrição e uma imagem de destaque em um layout organizado.
9. Ajuda os usuários a reconhecer, diagnosticar e recuperar erros
Quando ocorrer um erro, o sistema deve informar claramente o que aconteceu e como corrigir a situação. As mensagens devem ser diretas, em linguagem simples e próximas ao local onde o erro ocorreu.
Heurística 9: Reconhecer, diagnosticar e recuperar erros (Exemplo: Formulário do Outlook)
No formulário de criação de conta do Outlook, mensagens de erro indicam campos incorretos e explicam como corrigi-los, garantindo que o usuário compreenda o problema e saiba como resolvê-lo.
10. Ajuda e documentação
Mesmo que pouco utilizadas, áreas de ajuda e documentação são essenciais, principalmente em sistemas complexos. Elas devem estar disponíveis para que o usuário possa resolver dúvidas ou problemas de forma autônoma.
Heurística 10: Ajuda e documentação (Exemplo: FAQ do site Carrefour)
O site do Carrefour disponibiliza uma seção de FAQ com as dúvidas mais frequentes e suas soluções. Isso permite que o usuário encontre respostas rapidamente, sem precisar de suporte direto.
REFERÊNCIAS
Ensinamentos de Jakob Nielsen sobre interação do usuário com interfaces. MEDIUM - UX Collective BR, 2021. Disponível em: https://brasil.uxdesign.cc/ensinamentos-de-jacob-nielsen-sobre-intera%C3%A7%C3%A3o-do-usu%C3%A1rio-com-interfaces-f510ac9b2a73. Acesso em: 13 novembro de 2025.
10 Heurísticas de Usabilidade para User Interface. ALURA. Disponível em: https://www.alura.com.br/artigos/10-heuristicas-usabilidade-para-user-interface?srsltid=AfmBOopjITO3yS2WN3PzlOTk0lmLYBJqYdWSjc61yXSdks_Oa4z12CyB. Acesso em: 13 novembro de 2025.
Materiais disponíveis no plano de aula da disciplina.