Aula para a disciplina Engenharia de Usabilidade Pós-Graduação em Engenharia de Software Centrada em Métodos Ágeis Prof. Marcello de Campos Cardoso www.mcardoso.com.br Maio 2011

1. aula 02
Engenharia de Software Centrada em Métodos Ágeis
Usabilidade
Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com
Monday, May 9, 2011

2. Plano de curso
1ª aula Introdução a Usabilidade: conceitos, origem (DCU, IHC), aplicação (IxD),
2ª aula metas de usabilidade, princípios de design, estudo de casos, benefícios,
ciclos de vida de desenvolvimento (cascata x ágil), técnicas (overview).
3ª aula Técnica de Modelagem: Personas ágeis (workshop)
4ª aula Story Mapping (workshop)
5ª aula Perguntando a especialistas:
Análise Heurística, As 10 heurísticas de Nielsen (workshop)
6ª aula Projetando a interface:
Task Flow + Prototipação rápida (workshop)
7ª aula Testes de usabilidade (workshop - roteiro)
8ª aula Testes de usabilidade (workshop - aplicação)
Monday, May 9, 2011

3. Recapitulando...
Monday, May 9, 2011

4. Recapitulando...
1986 Design Centrado no Usuário (DCU) é uma abordagem de design
(projeto) na qual o público-alvo de um produto ou serviço
influencia as diretrizes e requisitos do sistema.
Monday, May 9, 2011

5. Recapitulando...
1986 Design Centrado no Usuário (DCU) é uma abordagem de design
(projeto) na qual o público-alvo de um produto ou serviço
influencia as diretrizes e requisitos do sistema.
1990 Design de Interação é a arte de projetar a interação entre
produtos, serviços e humanos.
Monday, May 9, 2011

6. Recapitulando...
1986 Design Centrado no Usuário (DCU) é uma abordagem de design
(projeto) na qual o público-alvo de um produto ou serviço
influencia as diretrizes e requisitos do sistema.
1988 Usabilidade é o atributo que define a facilidade de uso de algo.
1990 Design de Interação é a arte de projetar a interação entre
produtos, serviços e humanos.
Monday, May 9, 2011

7. Uma interface bem projetada deve ser guiada por
metas de usabilidade
+ do usuário
metas de experiência
Monday, May 9, 2011

8. Metas de Usabilidade
Servem para guiar o desenvolvimento de produtos fáceis de usar,
eficientes e agradáveis. São elas (Preece, Rogers, Sharp):
1.Utilidade
2.Eficácia
3.Eficiência
4.Segurança
5.Facilidade de aprendizado
6.Facilidade de lembrar como se usa
Eficácia: O quanto um produto é bom em se fazer o que se espera dele
Eficiência: Como um produto auxilia a execução de suas tarefas com o mínimo de recursos
Monday, May 9, 2011

9. Metas de Usabilidade | Utilidade
Utilidade refere-se a medida que o sistema propicia a
funcionalidade adequada para o objetivo específico do usuário.
Monday, May 9, 2011

10. Metas de Usabilidade | Utilidade
Ferramenta de nicho
Monday, May 9, 2011

11. Metas de Usabilidade | Utilidade
Ferramenta sem foco
Pra que serve?
Elevator pitch,
Twitter pitch!
Monday, May 9, 2011

12. Metas de Usabilidade | Eficácia
Eficácia se refere a quão bem uma ferramenta auxilia na realização
de uma atividade proposta, em um contexto de uso.
É uma característica analógica, em escala.
Monday, May 9, 2011

13. Metas de Usabilidade | Eficácia
Qual é mais eficaz?
Monday, May 9, 2011

14. Metas de Usabilidade | Eficácia
Depende, pra que, para quem?
Monday, May 9, 2011

15. Metas de Usabilidade | Eficiência
Eficiência é quanto uma ferramenta auxilia na economia de
recursos para a realização de uma atividade proposta, em um
contexto de uso.
Monday, May 9, 2011

16. Metas de Usabilidade | Eficiência
Eficiência
=
economia de recursos
Monday, May 9, 2011

17. Metas de Usabilidade | Eficiência
recursos podem ser medidos em tempo, cliques...
se traduzem em trabalho/custo
Monday, May 9, 2011

18. Metas de Usabilidade | Eficiência
O dilema do AJAX.
Monday, May 9, 2011

19. Metas de Usabilidade | Eficácia x Eficiência
eficácia - fazer melhor
eficiência - produtividade
Monday, May 9, 2011

20. Metas de Usabilidade | Segurança
Segurança se refere a prevenção e recuperação de erros.
Deve ser perceptível, transparente.
Monday, May 9, 2011

21. Metas de Usabilidade | Segurança
Física
Monday, May 9, 2011

22. Metas de Usabilidade | Segurança
Interface
Monday, May 9, 2011

23. Metas de Usabilidade | Segurança
Prevenção de erros
Monday, May 9, 2011

24. Metas de Usabilidade | Segurança
Prevenção de erros, transparente.
Monday, May 9, 2011

25. Metas de Usabilidade | Segurança
Segurança percebida
Monday, May 9, 2011

26. Metas de Usabilidade | Facilidade de aprendizado
Clareza na interface, compreensão das funcionalidades
metáforas e modelos mentais
Monday, May 9, 2011

27. Metas de Usabilidade | Facilidade de lembrar como se usa
Interface profissional, especialista
Interface profissional, especialista
Monday, May 9, 2011

28. Exercício
TO DO DONE
ace quanto a:
Avaliar um produto/interf
ade
e Usabilid
Metas d
cia
1. Eficá ência
2. Efici ança
r
3. Segudade izado
4. Utili idade de aprend r como
a
5. Facil idade de lembr
6. Facil
se usa
Monday, May 9, 2011

29. Princípios de Design
O que são os princípios de design?
“...são derivados de uma mistura de conhecimento baseado em
teoria, experiência e senso comum [...] conjunto de items que
devem ser assegurados” (PREECE, 2005)
Monday, May 9, 2011

30. Princípios de Design
Quais são os princípios que norteiam o design de interação?
1. Visibilidade
2. Feedback
3. Restrições
4. Mapeamento
5. Consistência
6. Affordance
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

31. Princípios de Design
Visibilidade
“...O sistema deve fornecer indicações do estado do sistema,
que sejam prontamente perceptíveis e interpretáveis e
correspondam às intenções e às expectativas.” (NORMAN,
2006)
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

32. Princípios de Design
Visibilidade
Quanto mais visíveis forem as funções, mais os usuários
saberão como proceder.
Monday, May 9, 2011

33. Princípios de Design
Visibilidade
Quanto mais visíveis forem as funções, mais os usuários
saberão como proceder.
Monday, May 9, 2011

34. Princípios de Design
Feedback
“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)
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

35. Princípios de Design
Feedback
Fornecer ao usuário
informações sobre a ação
realizada
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

36. Princípios de Design
Feedback pode ser
Visual
Tátil
Verbal
Auditivo
Combinado
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

37. Princípios de Design
Restrições
“... refere-se às formas de delimitar o tipo de interação que pode
ocorrer [...] para impedir o usuário de selecionar a opção
incorreta e reduzir as chances de erro...” (PREECE, 2005)
(PREECE) Desgin de Interação Cap. 1 - pag 42 a 53
(NORMAN) Design do dia-a-dia Cap.7 - pag 221 a 255
Monday, May 9, 2011

38. Princípios de Design
Restrições lógicas
Exploram o bom senso das pessoas a respeito de como o
mundo funciona.
Monday, May 9, 2011

39. Princípios de Design
Restrições físicas
Se referem à maneira como os objetos restringem
mecanicamente.
Monday, May 9, 2011

40. Princípios de Design
Restrições culturais
Convenções aprendidas – universais ou específicas de culturas
diferentes.
Monday, May 9, 2011

41. Princípios de Design
Mapeamento
“... refere-se a relação entre controles e seus efeitos no artefato”
(PREECE, 2005)
Monday, May 9, 2011

42. Princípios de Design
Mapeamento
“... refere-se a relação entre controles e
seus efeitos no artefato”
(PREECE, 2005)
Monday, May 9, 2011

43. Princípios de Design
Mapeamento
“... refere-se a relação entre controles e seus efeitos no artefato”
(PREECE, 2005)
Monday, May 9, 2011

44. Princípios de Design
Mapeamento
“... refere-se a relação entre controles e seus efeitos no artefato”
(PREECE, 2005)
Monday, May 9, 2011

45. Princípios de Design
Consistência
“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)
Monday, May 9, 2011

46. Princípios de Design
Consistência
No mesmo dispositivo
Monday, May 9, 2011

47. Princípios de Design
Consistência
Entre dispositivos diferentes
Monday, May 9, 2011

48. Princípios de Design
Affordance
“É um atributo do objeto que permite ao usuário saber como
utilizá-lo”
(PREECE, 2005)
“É uma ‘dica’ de como devemos interagir com o objeto.”
(Karine e Leandro, 2010)
Monday, May 9, 2011

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

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

51. Princípios de Design
Aparência
Monday, May 9, 2011

52. Princípios de Design
Aparência
Monday, May 9, 2011

53. Princípios de Design
Aparência
Monday, May 9, 2011

54. Princípios de Design
Aparência
Monday, May 9, 2011

55. Leis do Design de Interação
Lei de Fitts
O tempo gasto para se mover de um ponto inicial para outro é
proporcional ao tamanho do alvo e sua distância.
Significa que...
Elementos de uma interface devem possuir um tamanho adequado a
sua importância.
Elementos relacionados devem se posicionar em um contexto de uso
coerente.
Paul Fitts, psicólogo - 1954
Monday, May 9, 2011

56. Leis do Design de Interação
Lei de Hicks
O tempo gasto para se mover de um ponto inicial para outro é
proporcional ao tamanho do alvo e sua distância.
Significa que...
Usuários encontram a informação separando-as em blocos e eliminando
a metade a cada etapa do processo.
Desconsiderando outras decisões de design, seria mais simples
encontrar um atalho em um grupo de 10 do que em dois de 5.
Devemos ser criteriosos na categorização de conteúdos.
Monday, May 9, 2011

57. Leis do Design de Interação
Lei de Miller
A memória de curta duração humana registra 7 informações em média,
variando em torno de 2 para cima ou para baixo.
Significa que...
Não é uma regra rígida, mas uma orientação. Interfaces devem ser
projetadas no intuito de minimizar a sobrecarga cognitiva.
Por exemplo, não devemos criar interações que forcem usuários a
memorizar elementos estranhos em telas diferentes.
George Miller, psicólogo - 1956
Monday, May 9, 2011

58. Agile User Centered Design - Agile UCD
Semelhanças
São abordagens iterativas,
focadas na qualidade,
horizontais (bottom-up)
e colaborativas.
Sistematizam uma série de diretrizes/métodos/práticas pouco
burocráticas, com foco em resultados qualitativos.
Monday, May 9, 2011

59. Leis do Design de Interação
Lei de Moore
O tempo gasto por usuários para tomarem decisões é proporcional ao
número de opções.
Significa que...
Devemos nos adequar a mudança de paradigmas tecnológicos. Novos
dispositivos, novas formas de interagir, novas possibilidades!
Gordon Moore, co-fundador da Intel - 1965
Monday, May 9, 2011

60. Agile User Centered Design - Agile UCD
Limitações do Agile
Dificulta a visão do todo, é incremental.
Limita o desenvolvimento de estórias complexas, que envolvem user
experience e estratégia do produto.
Monday, May 9, 2011

61. Agile User Centered Design - Agile UCD
Limitações do Design Centrado no Usuário
Falta de foco, pouco compromisso com prazos.
Visão romântica do produto.
Monday, May 9, 2011

62. Agile User Centered Design - Agile UCD
Agile vs. DCU
Monday, May 9, 2011

63. Agile User Centered Design - Agile UCD
Incrementar...
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

64. Agile User Centered Design - Agile UCD
Incrementar...
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

65. Agile User Centered Design - Agile UCD
1
Incrementar...
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

66. Agile User Centered Design - Agile UCD
1 2
Incrementar...
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

67. Agile User Centered Design - Agile UCD
1 2 3
Incrementar...
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

68. Agile User Centered Design - Agile UCD
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

69. Agile User Centered Design - Agile UCD
1
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

70. Agile User Centered Design - Agile UCD
1 2
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

71. Agile User Centered Design - Agile UCD
1 2 3
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

72. Agile User Centered Design - Agile UCD
1 2 3
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

73. Agile User Centered Design - Agile UCD
1 2 3
é diferente de Iterar.
http://agileproductdesign.com/blog/dont_know_what_i_want.html
Monday, May 9, 2011

74. Agile User Centered Design - Agile UCD
DCU complementa o Agile
Segundo Colfelt (2010):
“O negócio não sabe o que quer.”
Marketing é uma ferramenta de pesquisa essencial, mas seu foco nnao é no
desenvolvimento, e sim comunicação. A perspectiva do designer embasado em
DCU é a da qualidade e foco do produto.
http://www.boxesandarrows.com/view/bringing-user Leitura altamente recomendada!
Monday, May 9, 2011

75. Agile User Centered Design - Agile UCD
DCU complementa o Agile
Segundo Colfelt (2010):
“Desenvolvedores e homens de negócio devem trabalhar juntos.
Onde entra o designer?.”
“Nos melhores cenários, temos algum desenvolvedor com noções de
design. Mas é incomum. Entre os próprios designers, não é fácil
encontrar profissionais qualificados.”
http://www.boxesandarrows.com/view/bringing-user
Monday, May 9, 2011

76. Agile User Centered Design - Agile UCD
DCU complementa o Agile
Segundo Colfelt (2010):
“Da perspectiva do desenvolvedor,
requerimentos caem do céu, dos
homens do negócio.”
http://www.boxesandarrows.com/view/bringing-user
Monday, May 9, 2011

77. Agile User Centered Design - Agile UCD
“Agile is good for refining,
not defining.”
http://www.boxesandarrows.com/view/bringing-user
Monday, May 9, 2011

78. Agile User Centered Design - Agile UCD
Típico processo DCU
http://www.boxesandarrows.com/view/bringing-user
Monday, May 9, 2011

79. Agile User Centered Design - Agile UCD
O melhor de dois mundos
http://www.boxesandarrows.com/view/bringing-user
Monday, May 9, 2011

80. Agile User Centered Design - Agile UCD
o
cia l acontece n
jamento ini
ZERO
plane
S print
Monday, May 9, 2011

81. Framework de Sprint Zero
...
Planejamento
Ideação
Benchmarking Prototipação Design Visual
Demanda
Brainstorming Wireframe layout
Viabilidade técnica
Briefing
{ Ferramentas de pesquisa, levantamento de Requisitos
}
Monday, May 9, 2011

82. Ferramentas de pesquisa, levantamento de Requisitos
Envolve usuários Envolve especialistas
Entrevistas Percurso Cognitivo
Questionários Análise Heurística
Focus Group Unfocus Group
Estudo etnográfico Expert Review
Card Sorting Story Mapping
Teste com usuários Modelagem de personas
5 segundos Task flow
5 por ques Prototipação rápida
Monday, May 9, 2011

83. ga do !
o b ri
Este arquivo contém a apresentação realizada por Marcello de Campos
Cardoso, em maio de 2011, para a disciplina Engenharia de Usabilidade
ministrada no curso de especialização Engenharia de Software Centrada em
Métodos Ágeis, no Centro Universitário UNA.
Monday, May 9, 2011