O documento apresenta conceitos e técnicas de usabilidade, incluindo: (1) Metas da usabilidade como utilidade, eficácia e eficiência; (2) Princípios de design como visibilidade, feedback e consistência; (3) Heurísticas de Nielsen como prevenção de erros, reconhecimento em vez de memorização e suporte ao usuário.

1. Apresentação sobre
USABILIDADE – Metas da
Usabilidade, Princípios de
Design e Heurísticas de Nielsen

2. OBJETIVO
Compartilhar alguns conceitos e recomendar algumas técnicas de
Usabilidade consideradas úteis para aumentar a qualidade de seus produtos.

3. AGENDA
Benefícios das Boas Práticas de Usabilidade
Conceito de “Usabilidade”
Objetivos/Metas da Usabilidade
Princípios de Design
Heurísticas de Nielsen
Checklist para Testar a Usabilidade

4. Benefícios das Boas Práticas de Usabilidade
Menor custo de manutenção...
Maior eficiência (mais tarefas em menos tempo)
Menor custo em treinamentos
Satisfação do usuário
Segurança para explorar a aplicação
Confiança na utilização

5. Conceito de “Usabilidade”
É a medida pela qual um produto pode ser usado por usuários específicos para
alcançar objetivos específicos com eficácia, eficiência e satisfação em um
contexto de uso específico.
Norma ISO 9241-11
O que é Usabilidade?

6. Conceito de “Usabilidade”
“Pensar em usabilidade é pensar em produtos fáceis de usar”
Jesse James Garrett (The Elements of UserExperience)
Cafeteira de Carelman para masoquistas

7. Conceito de “Usabilidade”
1991
ISO 9126
Características da Qualidade
- Usabilidade
ISO 9241 - 11
1998
Requisitos Ergonômicos –
Orientações sobre Usabilidade
✓ Inteligibilidade
✓Apreensibilidade
✓Operacionalidade
✓Proteção frente a erros de
usuários
✓Estética/Atratividade
✓Acessibilidade
✓Contexto de Uso
✓Eficácia
✓Eficiência
✓Satisfação
Jakob Nielsen
IHC* e Ergonomia
“Pai” da Usabilidade
1993
✓ PhD *Interface Humano
Computador
✓Condições adequadas de
uso
✓ Avaliação Heurística
Linha do tempo...

8. Conceito de “Usabilidade”
Objetivo e Metas da
Usabilidade
✓Entender a
necessidade do usuário
✓Buscar clareza e
objetivo principal
✓Atributos para
assegurar a qualidade
de uso
Princípios de Design
✓Conhecimento teórico
✓Experiência
✓Senso comum
Heurísticas de Nielsen
✓Método de inspeção
de uma Interface
✓Conjunto de regras
que estabelecem
padrões
✓Garantir Interfaces
mais fáceis de usar
PROJETO CONSTRUÇÃO AVALIAÇÃO/TESTES
ETAPAS DO CICLO DE DESENVOLVIMENTO DE UM PRODUTO

9. Conceito de “Usabilidade”
1. Visibilidade do status do sistema
2. Correlação entre o sistema e o mundo real
3. Controle e liberdade do usuário
4. Consistência e padrões
5. Prevenção de erros
6. Reconhecimento em vez de memorização
7. Flexibilidade e eficiência de uso
8. Projeto estético e minimalista
9. Suporte aos usuários no reconhecimento,
diagnóstico e recuperação de erros
10. Informações de ajuda e documentação
Heurísticas de NielsenPrincípios de Design
1. Visibilidade
2. Feedback
3. Restrições
4. Mapeamento
5. Consistência
6. Affordance
1. Utilidade
2. Eficácia
3. Eficiência
4. Segurança
5. Aprendizado
6. Memorização
Metas da Usabilidade
TÉCNICAS A SEREM USADAS NO CICLO DE DESENVOLVIMENTO DE UM PRODUTO

10. Objetivos/Metas da Usabilidade
O usuário tem que conseguir usar
O usuário tem que querer voltar a usar

11. Objetivos/Metas da Usabilidade
Propicia a funcionalidade adequada para o objetivo específico do usuário.
1. Utilidade

12. Objetivos/Metas da Usabilidade
Guias
Acesso Rápido à opções
Seções
Botão MS Word
Nem sempre o que tem mais opções é o mais útil.
100x mais
opções de
edição
1. Utilidade

13. Objetivos/Metas da Usabilidade
Se refere a quão bem uma ferramenta auxilia na realização de uma atividade
proposta, em um contexto de uso.
Depende, pra quem e pra quê?
2. Eficácia

14. Objetivos/Metas da Usabilidade
2. Eficácia
9 / ( 5 * 4 / (5 + 5 ) ) =
TAREFA: Calcular a equação cujo resultado é igual 2. Considerando que o usuário sabe utilizar os 2
tipos de calculadoras
5 + 5 = MS 5 * 4 / MR = MS 9 / MR
Qual das duas foi mais eficaz?
2. Eficácia
As duas são eficazes pois deram o resultado correto.

15. Objetivos/Metas da Usabilidade
O quanto uma ferramenta auxilia na economia de recursos para a realização de uma
atividade proposta, em um contexto de uso.
3. Eficiência
3. Eficiência

16. Objetivos/Metas da Usabilidade
9 / ( 5 * 4 / (5 + 5 ) ) =
TAREFA: Calcular a equação cujo resultado é igual 2
5 + 5 = MS 5 * 4 / MR = MS 9 / MR
Qual das duas foi mais eficiente?
16 Passos
14 Passos
3. Eficiência
A HP foi mais eficiente , foram gastos menos passos para se alcançar o
resultado

17. Objetivos/Metas da Usabilidade
Interface
Se refere a prevenção e recuperação de erros. Deve ser perceptível, transparente.
4. Segurança
Mascaramento de campos
Indicação de obrigatoriedade

18. Objetivos/Metas da Usabilidade
Prevenção de Erros
4. Segurança
4. Segurança
 Pedir confirmação em ações
destrutivas

19. Objetivos/Metas da Usabilidade
Clareza na interface, compreensão das funcionalidades
As funções fundamentais do sistema devem ser de fácil assimilação.
5. Aprendizado

20. Objetivos/Metas da Usabilidade
Preciso ler o manual toda vez que vou utilizar o sistema?
Depois do treinamento, preciso anotar num papelzinho os comandos mais comuns do sistema?
5. Aprendizado

21. Objetivos/Metas da Usabilidade
Facilidade de lembrar como utilizar um recurso do sistema, depois de já se ter
aprendido a fazê-lo
6. Memorização6.Memorização

22. Objetivos/Metas da Usabilidade
6. Memorização
Memória Visual : É a comunicação responsável por cerca de 75% do que
se grava na memória
6.Memorização

23. Princípios de Design
“...são derivados de uma mistura de conhecimento baseado em teoria, experiência
e senso comum [...]”
(PREECE, 2005)
Projetar dispositivos e interfaces usáveis
teoria
experiência
senso comum
Psicologia
das ações

24. Princípios de Design
“...O sistema deve fornecer indicações do estado do sistema, que sejam prontamente perceptíveis
e interpretáveis e que correspondam às intenções e às expectativas.”
(NORMAN, 2006)
1. Visibilidade
Às vezes, não sabemos onde estão os elementos de interação
1.Visibilidade

25. Princípios de Design
1. Visibilidade
É responsabilidade do sistema informar o que
está acontecendo em real time pro usuário.
Quanto mais soubermos
sobre as possibilidades de
interação, melhor.
1.Visibilidade
Player mostra o vídeo que está em execução e o próximo da fila

26. Princípios de Design
“O feedback se refere ao retorno de informações a respeito da ação que foi feita e do
que foi realizado, permitindo a pessoa continuar a atividade.”
(PREECE, 2005)
Auditivo
Tátil
Verbal
Visual
2. Feedback
2. Feedback

27. Princípios de Design
“... refere-se as formas de delimitar o tipo de interação que pode ocorrer [...] para
impedir o usuário de executar operações incorretas...”
(PREECE, 2005)
Lógicas
Físicas
Culturais
2. Feedback
3. Restrições
3. Restrições

28. Princípios de Design
“Refere-se a projetar interfaces de modo que tenham operações semelhantes e que
utilizem elementos semelhantes para a realização de tarefas similares”
(PREECE, 2005)
MS Word
MS Excel
MS Power Point
4. Consistências
Aplicações diferentes do mesmo fabricante
Aplicações diferentes e fabricantes diferentes
4. Consistência
Microsoft Apple

29. Princípios de Design
“É um atributo do objeto que permite ao usuário saber como utilizá-lo”
(PREECE, 2005)
5. Affordance

30. Princípios de Design
“... refere-se a relação entre controles e seus efeitos no artefato”
(PREECE, 2005)
5. Mapeamento
Deve haver coerência entre os controles e suas funções
6. Mapeamento

31. Heurísticas de Nielsen
A palavra heurística vem da palavra grega Heuriskein, que significa descobrir (e que deu origem também
ao termo Eureca).
(NIELSEN, 1993)
“As heurísticas são um conjunto de regras
e métodos que levam à descoberta e à
resolução de problemas “

32. Heurísticas de Nielsen
Avaliação Heurística
É um método informal de inspeção de
interfaces. É uma maneira fácil, rápida e
barata de análise e diagnóstico de problemas
em interfaces.
Foram baseadas em 294 tipos de erros de usabilidade que o Nielsen comumente encontrava em
suas análises – e que podem prejudicar e muito a experiência do usuário em seu site.

33. Heurísticas de Nielsen
A interface deve sempre informar ao usuário o que está acontecendo, ou seja, todas
as ações precisam de feedback instantâneo para orientá-lo.
Vou almoçar...
1. Visibilidade do status do sistema

34. Heurísticas de Nielsen
1. Visibilidade do status do sistema

35. Heurísticas de Nielsen
1. Visibilidade do status do sistema

36. Heurísticas de Nielsen
Sistema deve falar a linguagem do usuário, com palavras, frases e conceitos que lhe
são familiares.
BarradeFerramentasPhotoshop
2. Correlação entre o sistema e o mundo real

37. Heurísticas de Nielsen
Escolher as melhores palavras e imagens para
levar o usuário ao caminho certo
Evitar de termos técnicos
2. Correlação entre o sistema e o mundo real

38. Heurísticas de Nielsen
Facilitar as “saídas de emergência” para o usuário, permitindo abortar uma tarefa,
desfazer uma operação e retornar ao estado anterior.
3. Controle e liberdade do usuário

39. Heurísticas de Nielsen
Manter o padrão de cores, fontes, posicionamento de objetos em toda a aplicação.
Registro realizado com sucesso x
4. Consistências e padrões

40. Heurísticas de Nielsen
Prevenir ocorrências de erro. Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não ocorram.
5. Prevenção de erros

41. Heurísticas de Nielsen
5. Prevenção de erros

42. Heurísticas de Nielsen
Tornar objetos, ações e opções visíveis e coerentes. Permitir que a interface ofereça
ajuda contextual, e informações capazes de orientar as ações do usuário
6. Reconhecimento em vez de memorização

43. Heurísticas de Nielsen
Breadcrumb (“Migalhas de Pão”)
6. Reconhecimento em vez de memorização

44. Heurísticas de Nielsen
O sistema precisa ser fácil para usuários leigos, mas flexível o bastante para se
tornar ágil à usuários avançados.
7. Flexibilidade e eficiência de uso

45. Heurísticas de Nielsen
7. Flexibilidade e eficiência de uso

46. Heurísticas de Nielsen
Os “diálogos” do sistema precisam ser simples, diretos e naturais, presentes nos
momentos em que são necessários.
✓ Visual limpo
✓ Navegação intuitiva
✓ Liberdade do usuário
8. Projeto e estética minimalista

47. Heurísticas de Nielsen
Evite que os textos e o design fale mais do que o usuário necessita saber.
9. Projeto e estética minimalista

48. Heurísticas de Nielsen
As mensagens de erro do sistema devem possuir uma redação simples e clara que
em vez de intimidar o usuário com o erro, indique uma saída construtiva ou possível
solução.
9. Suporte ao usuário no reconhecimento, diagnóstico e recuperação de erros

49. Heurísticas de Nielsen
Redação simples e direta
Sugeriu 2 soluções
9. Suporte ao usuário no reconhecimento, diagnóstico e recuperação de erros

50. Heurísticas de Nielsen
Desejável que tenha ajuda, neste caso a ajuda e documentação deve ser visível,
facilmente acessada, e com uma ferramenta de busca na ajuda.
10. Informação de ajuda e documentação

51. Heurísticas de Nielsen
Tool Tips
10. Informação de ajuda e documentação

52. Mapa Mental das Técnicas de Usabilidade

53. CheckList para Testar a Usabilidade
Princípios de Design + Heurísticas = Testando a Usabilidade
Feedback das ações dos usuários
Layout
Consistências e Padrões
Controle e Liberdade do Usuário
Prevenção de Erros
Restrições
Suporte ao Usuário

54. CheckList para Testar a Usabilidade
Feedback das ações dos usuários
Verificar a situação do sistema para toda ação do usuário
✓ Realce dos Objetos e Itens Selecionáveis
✓ Estados de Processamentos
✓ Estados de Impressão
✓ Sistema Indisponível

55. CheckList para Testar a Usabilidade
Layout
Verificar se a legibilidade do sistema está fácil e agradável para o usuário, tais
como tamanho do texto, espaçamento entre linhas, contraste de cores,
distribuição do conteúdo, etc.
✓ Alinhamento dos Objetos e Exibição de Dados
✓ Bordas dos Painéis
✓ Agrupamento de Dados Similares
✓ Alinhamento Dados de Listas

56. CheckList para Testar a Usabilidade
Consistências e Padrões
Verificar se o sistema mantém uma consistência visual ao longo de todas as páginas:
✓ Cores Padrões
✓ Títulos de Telas, Menus e Campos
✓ Rótulos
✓ Distinção de Ícones
✓ Localização dos Dados
✓ Formato de Exibição dos Dados
✓ Cabeçalhos de Colunas de Dados
✓ Organização das Listas de Seleção
✓ Abreviaturas

57. CheckList para Testar a Usabilidade
Controle e Liberdade do Usuário
Verificar se para toda ação de erro/engano o usuário possui uma forma de
corrigir/voltar
✓ Navegação e Paginação
✓ Desfazer e Refazer
✓ Correção Parte Dados
✓ Abortar Processamentos

58. CheckList para Testar a Usabilidade
Prevenção de Erros
Verificar se o sistema auxilia o usuário ao máximo para que ele não cometa erros.
✓ Identificação de Campos Obrigatórios
✓ Separação Entre Áreas Selecionáveis
✓ Posicionamento de Botões com Funções "Perigosas"
✓ Mascara para Campos Numéricos Longos
✓ Botão Padrão de Comando
✓ Botões de Seleção de Ação Destrutiva
✓ Dupla Confirmação de Ação

59. CheckList para Testar a Usabilidade
Verificar se o sistema reduz as chances de o usuário cometer erros operação
✓ Delimitação de Ações do Usuário
Restrições

60. CheckList para Testar a Usabilidade
Suporte ao Usuário
Verificar que o sistema é objetivo em suas mensagens de erro, não informar apenas um
código, deve ajudar o usuário a sair de situações problemáticas. Fornecer manual de
operação e ajuda.
✓Se existem Mensagens de Erro e Alertas
✓Conteúdo da Mensagem de Erro

61. Mais informações sobre o assunto...
• Curso de Verão na IME-USP “Engenharia de Usabilidade para sistemas web”
https://www.ime.usp.br/verao/
• Livros:
• “Engenharia de Software - Uma Abordagem Profissional” - Roger S. Pressman
• “O design do dia-a-dia” – Donald A. Normam
• Cartilha de Usabilidade - Projeto Padrões Brasil e-Gov
https://www.governoeletronico.gov.br/eixos-de-atuacao/governo/epwg-padroes-web-em-governo-eletronico/cartilha-de-usabilidade
• Sites/Blogs:
http://ux.sapo.pt/
http://arquiteturadeinformacao.com/
https://www.nngroup.com/articles/
https://tadificil.com.br/
• Autores:
• Jacob Nielsen
• Donald A. Norman
• Larry Constantine

62. Mais informações sobre o assunto...
“Engenharia de Software - Uma Abordagem Profissional” - Roger S. Pressman
Capitulo 11 pg 345 - Projetos de Interfaces do Usuário

63. Mais informações sobre o assunto...
“Engenharia de Software - Uma Abordagem Profissional” - Roger S. Pressman
Capitulo 12 pg 335 - Projetos de Interfaces do Usuário

64. Lidiane Carvalho, CBTS
Obrigada!
www.linkedin.com/in/lidianesantos
https://www.facebook.com/lidiane.dossantoscarvalho
@lidianesantos
http://pt.slideshare.net/lidianesantos