1 sem 2016 - CEULJI ULBRA - Curso de Sistemas de Informação Prof. Maigon Pontuschka

1. Interface
Homem-Computador
Aula 03 – Design de experiência e análise
heurística
PROF. MAIGON NACIB PONTUSCHKA
maigonp@gmail.com
1° Semestre 2016
Parcialmente adaptado de material do
Prof. Carlos Rosemberg – Universidade Federal do Ceará

2. O design de experiência
procura entender como os elementos de uma
interface agem ou podem agir durante a experiência.
Depois, tenta controlá-los ou influenciá-los
através da manipulação de seus atributos.

3. Artefatos e interações
são os elementos mais prováveis
de se controlar, pois tratam-se
das coisas que nós
desenvolvemos.

4. Interações
Como o usuário interage com os artefatos em sua volta?
Quais estímulos ocorrem? Que sentidos são envolvidos?

5. Trabalhando com os 5 sentidos
Entenda quais e como os sentidos do
indivíduo são afetados
visão, audição, olfato, paladar e tato
Entenda como os artefatos interagem entre
si, inclusive quando afetam a performance
do seu produto.
Sujeira, barulho, distrações, etc

6. Quais os objetos que compõem a experiência?
Quais suas as características?
Artefatos

7. Produtos
Softwares, roupas, equipamentos eletrônicos, etc
Conceitos e idéias
Marcas (Nokia, Apple, Fiat, etc), ideologias, etc
Demais objetos presentes na experiência
Não são o principal artefato, mas interferem no que está
acontecendo. Ex: teclado de um computador com teclas
defeituosas durante a redação de uma monografia.
Artefatos são...

8. 1
Funcionalidades
2
Estética
3
Usabilidade
4
Significado
As 4 dimensões de um artefato
Status social,
valor sentimental,
metáforas, etc
Utilidade
Apelo aos
sentidos
Facilidade de uso

9. 1
Funcionalidades
2
Estética
3
Usabilidade
4
Significado
Status social,
valor sentimental,
metáforas, etc
Utilidade
Apelo aos
sentidos
Facilidade de uso
As 4 dimensões de um artefato

10. 1
Funcionalidades
2
Estética
3
Usabilidade
4
Significado
Status social,
valor sentimental,
metáforas, etc
Utilidade
Apelo aos
sentidos
Facilidade de uso
Posicione
seu
produto
aqui!
As 4 dimensões de um artefato

11. 1: Funcionalidades
As 4 dimensões de um artefato
1
Funcionalidades

12. Ofereça o que o
usuário realmente
precisa ou deseja.
Nada mais, nada menos.

13. 2:Estética
As 4 dimensões de um artefato
2
Estética

14. Um passeio pelos
Princípios básicos do design
Contraste
Repetição
Alinhamento
Proximidade

15. Contraste

16. Repetição

17. Alinhamento

18. Proximidade

19. 3:Usabilidade
As 4 dimensões de um artefato
3
Usabilidade

20. Usabilidade
“A facilidade com que as pessoas
podem empregar uma ferramenta ou
objeto a fim de realizar uma tarefa”
Wikipedia

21. Metas da Experiência do Usuário
X
Metas da Usabilidade
Experiência do usuário
Satisfatório
Agradável
Divertido
Interessante
Útil
Motivador
Esteticamente apreciável
Incentivador de criatividade
Compensador
Emocionalmente adequado
Usabilidade
Eficaz
Eficiente
Seguro
Útil
Fácil de aprender
Fácil de se lembrar como se usa

22. Heurísticas de usabilidade (Nielsen)
Os príncípios do design, quando usados na prática,
normalmente são chamados de heurística.
São princípios semelhantes aos princípios do design, mas
são mais prescritivos.
São a estrutura para a avaliação heurística quando usados
como parte de uma avaliação de um artefato ou interface.

23. Heurísticas de usabilidade (Nielsen)
1. Visibilidade do status do sistema
2. Metáforas com o mundo real
3. Controle do usuário e liberdade
4. Consistência e padrões
5. Prevenção de erros
6. Reconhecer ao invés de lembrar
7. Flexibilidade e eficiência de uso
8. Design e estética minimalista
9. Ajudar aos usuários a reconhecer, diagnosticar e sair de erros
10.Ajuda e documentação

24. Heurísticas de Usabilidade (Nielsen)
1. Visibilidade do status do sistema
• O sistema precisa manter os usuários informados sobre o que
está acontecendo, fornecendo um feedback adequado dentro
de um tempo razoável
2. Compatibilidade do sistema com o mundo real
• O sistema fala a linguagem do usuário com palavras, frases e
conceitos familiares ao usuário, ao invés de termos orientados
ao sistema. Seguir convenções do mundo real, fazendo com
que a informação apareça numa ordem natural e lógica

25. Heurísticas de Usabilidade (Nielsen)
3. Controle do usuário e liberdade
• Fornecer maneiras de permitir que os usuários saiam dos
lugares inesperados em que se encontram, utilizando “saídas
de emergência” claramente identificadas. Prover funções
undo e redo
4. Consistência e padrões
• Evita fazer com que os usuários tenham que pensar se
palavras, situações ou ações diferentes significam a mesma
coisa. Seguir convenções de plataforma computacional

26. Heurísticas de Usabilidade (Nielsen)
5. Ajudar os usuários a reconhecer, diagnosticar e
recurperar-se de erros
• Utiliza linguagem simples para descrever a natureza do
problema e sugere uma maneira de resolvê-lo
6. Prevenção de erros
• Onde possível, impede a ocorrência de erros

27. Heurísticas de Usabilidade (Nielsen)
7. Reconhecimento ao invés de memorização
• tornar objetos, ações e opções visíveis. O usuário não deve ter que
lembrar informação de uma para outra parte do diálogo.
Instruções para uso do sistema devem estar visíveis e facilmente
recuperáveis quando necessário
8. Flexibilidade e eficiência de uso
• usuários novatos se tornam peritos com o uso. Prover
aceleradores de forma a aumentar a velocidade da interação.
Permitir a usuários experientes "cortar caminho" em ações
freqüentes

28. Heurísticas de Usabilidade (Nielsen)
9. Estética e design minimalista
• diálogos não devem conter informação irrelevante ou raramente
necessária. Qualquer unidade de informação extra no diálogo irá
competir com unidades relevantes de informação e diminuir sua
visibilidade relativa
10.Ajuda e documentação
• embora seja melhor um sistema que possa ser usado sem
documentação, é necessário prover ajuda e documentação. Essas
informações devem ser fáceis de encontrar, e a ajuda deve ser feita
mediante uma série de passos concretos que podem ser facilmente
seguidos.

29. 4:Significado
As 4 dimensões de um artefato
4
Significado

31. Inspeção de
Usabilidade
AVALIAÇÃO HEURÍSTICA

32. A esta altura, já temos o mínimo de informação
sobre a experiênca do usuário para começar a
meter a mão na massa.

33. Como conduzir
• Parte do processo de design interativo
• Pequeno conjunto de avaliadores (3 a 5) examinando a
interface e analisando o atendimento as heurísticas de
usabilidade
Por que estudar IHC ? Heloísa Vieira da Rocha - IHC'2002

34. Heurísticas de usabilidade (Nielsen)
1. Visibilidade do status do sistema
2. Metáforas com o mundo real
3. Controle do usuário e liberdade
4. Consistência e padrões
5. Prevenção de erros
6. Reconhecer ao invés de lembrar
7. Flexibilidade e eficiência de uso
8. Design e estética minimalista
9. Ajudar aos usuários a reconhecer, diagnosticar e sair de erros
10.Ajuda e documentação

35. Como conduzir
• Usar um observador
• Duração de uma sessão de avaliação - ~2horas
• Durante a sessão de avaliação o avaliador percorre a
interface diversas vezes inspecionando as diferentes
componentes do diálogo e comparando-as com a
lista de princípios de usabilidade
• o avaliador decide como conduzir a avaliação
• percorrer a interface pelo menos duas vezes

36. Resultado da Avaliação
 Lista de problemas de usabilidade da interface com
referência aos princípios de usabilidade que foram
violados
 Avaliação heurística não objetiva prover meios de corrigir
os problemas em um redesign e não levanta os aspectos
positivos do design
 debriefing session
 Custo-benefício: custo de $10.500 -- benefício de $500.000

37. Graus de Severidade
• Combinação de 3 fatores
• Frequência
• Comum ou raro ?
• Impacto
• Fácil ou difícil para o usuário superá-lo ?
• Persistência
• Problema de uma única vez que o usuário pode superar desde que
saiba que ele existe ou os usuários serão repetidamente incomodados
por ele ?
• Impacto de mercado

38. Graus de Severidade
1. Eu não concordo que isso é um problema de usabilidade
2. É um problema cosmético somente
• Precisa ser corrigido somente se sobrar algum tempo no projeto
3. Problema de usabilidade menor
• Corrigí-lo deve ter prioridade baixa
4. Problema de usabilidade grave
• Importante corrigí-lo, deve ser dada alta prioridade
5. Catástrofe de usabilidade
• A sua correção é imperativa antes do produto ser liberado

39. Problemas de Usabilidade
Visibilidade e
status do sistema
ajudar os usuários a
reconhecer,
diagnosticar e corrigir erros

40. Problemas de Usabilidade
Compatibilidade do sistema com o mundo real

41. Consistência e padrão; prevenção de erros

42. Problemas de Usabilidade
Ajudar os usuários a reconhecer, diagnosticar e corrigir erros

43. Problemas de Usabilidade
Estética e design minimalista

44. Problemas de Usabilidade
Flexibilidade e
eficiência de uso

45. Problemas de Usabilidade
Ajuda e documentação
Consistência e padrão;
prevenção de erros
Estética e design
minimalista

46. Problemas de usabilidade
Visibilidade e status do sistema
Compatibilidade com o mundo real

47. Problemas de Usabilidade

48. Saídas claramente marcadas

49. Avaliação Heurística

50. Avaliação Heurística
1. O nome do sistema está muito proeminente.Tornando-o menor, poderia
ser aproveitado o espaço para outros componentes alternativos do
diálogo, ou a tela poderia ficar menos carregada (Estética e design
minimalista)
2. O mapa poderia apresentar os nomes de pelo menos algumas cidades
grandes ou outras informações que pudessem auxiliar o usuário a se
localizar.Cuidado deve ser tomado para não sobrecarregar demais o
mapa. (compatibilidade do sistema com o mundo real, visibilidade do
status do sistema)
3. Mesmo que tempo não respeite limites políticos, é muito difícil ler um
mapa que não apresenta limites de estados ou países. (compatibilidade
do sistema com o mundo real, visibilidade do status do sistema)

51. Avaliação Heurística
4. O formato da data ( dia/mês/ano) pode ser mal interpretado por
usuários estrangeiros. Um meio de evitar isso é representar o mês por
seu nome ao invés de seu número. ( prevenção de erros)
5. Os zeros na data estão cortados, o que é um modo computacional de
escrever zeros. Usar um tipo regular de zeros. (compatibilidade do
sistema com o mundo real)

52. Avaliação Heurística
6. O termo “Precipitação” pode ser de difícil entendimento para usuários
estrangeiros (que são usuários alvo do sistema). Poderia ser
considerada a possibilidade de usar palavras simples como
Chuva/Neve. Usabilidade internacional poderia ser aumentada
adicionando ícones como um termômetro para temperatura e gotas de
chuva para precipitações. ( compatibilidade do sistema com o mundo real)

53. Avaliação Heurística
7. O display das temperaturas em Farenheit e Celsius são mutuamente
exclusivos, com um dos dois ativos em um dado momento. Portanto, a
escolha da escala da temperatura deveria ser feita via radio buttons e não
com check boxes (que geralmente são utilizados para opções não
mutuamente exclusivas) (Consistência e padrões)
8. A seleção da escala da temperatura não é uma informação adicional do
mesmo tipo que Temperature/Precipitation/Visibility/Wind. A escolha da
escala da temperatura deveria ser agrupada com a seleção da temperatura
e deveria ser desativada (gray out) quando temperatura não é escolhida.
(estética e design minimalista; compatibilidade do sistema com o mundo
real)

54. Avaliação Heurística
9. Não está aparente na tela o modo de sair do sistema.Adicionar
uma caixa close ou um botão quit. (controle do usuário e
liberdade)
10. O sistema não tem nenhuma característica de ajuda. Espera-
se que a interface seja redesenhada e que os usuários não
necessitem de ajuda, mas o sistema certamente continuará
complexo o suficiente para prover uma tela de help. Por
exemplo, a tela de help poderia explicar como o dado de
visibilidade deve ser interpretado. (Ajuda e documentação)

55. Conclusões
• Avaliadores devem percorrer a interface pelo menos duas vezes
• Na primeira focalizar no fluxo e na segunda nas componentes
individuais do diálogo
• Inspecionar a interface com base na lista de princípios de
usabilidade - justificar e detalhar ao máximo todos os problemas
detectados
• Combinar os problemas encontrados por 3 a 5 avaliadores e fazer
com que trabalhem individualmente ( sem que um influencie o
outro)
• debriefing session
• coletar graus de severidade

56. Bibliografia da aula
• PREECE, J.; ROGERS,Y.; SHARP, H. Design de Interação: além da
interação homem-computador, PortoAlegre: Bookman, 2005.
• NIELSEN, J.Ten usability Heuristics. 2001
www.useit.com/papers/heuristic
• NIELSEN, J. ProjetandoWeb Sites. Rio de Janeiro: Campus, 2000.
• NIELSEN, J.;TAHIR, M. Homepage usabilidade: 50 websites
desconstruídos. Rio de Janeiro: Campus, 2002.