O documento apresenta uma aula sobre Interação Homem-Máquina (IHM). Apresenta os estilos interativos como linguagem natural, linguagens de comando, menus, WIMP, preenchimento de formulário e manipulação direta. Também discute aspectos afetivos, usabilidade, princípios para design de web, acessibilidade e as heurísticas de Nielsen. O objetivo é demonstrar teorias sobre interfaces interativas.

1. IHM
UFRPE / SERPRO

2. Olá!
Nós somos:
Camile, Kenedy e Philippe
Estudantes do Curso de Ciência da Computação
da Universidade Federal Rural de Pernambuco
2

3. AGENDA
Encontro 1
INTERFACES INTERATIVAS
Estilos Interativos
Aspectos Afetivos
Usabilidade
Encontro 2
HEURÍSTICAS
Principios Básicos para Web
Acessibilidade
Heurísticas de Nielsen
Objetivo do Curso
O que é IHM?
3

4. Demonstrar a teoria e ideias
referente aos temas de interfaces,
usabilidade e as heurísticas de
Nielsen, desenvolvendo assim
opções para a escolha de temas
mais específicos para modificação
de layouts e novas ideias de
desenvolvimento de interfaces
para aplicações web.
OBJETIVO DO CURSO
4

5. IHM

6. O que é IHM?
Significa “Interação Homem-Máquina”
ou “Interface Homem-Máquina”
É um equipamento com algum tipo de
visor ou tela que serve para facilitar a
comunicação entre as pessoas e as
máquinas.
6
E Interface?
Fonte: http://www.ajautomacao.com/o-que-e-ihm/

7. 7Fonte: http://www.motorsmania.com.br/imagem/index/16280876/G/lancer08.jpg

8. Processo Sistemático
HUMANO MÁQUINAIHM
8

9. Interface Apple Watch / Smartphone
9

10. Interface Web/Desktop
10

11. Interface Web/Desktop
11

12. INTERFACES
INTERATIVAS

13. 1. ESTILOS INTERATIVOS
13

14. Estilos Interativos
Todas as formas como os usuários se
comunicam ou interagem com sistemas
computacionais.
14

15. Tipos de Estilos Interativos
★ Linguagem Natural
★ Linguagens de Comando
★ Menus
★ WIMP
★ Preenchimento de Formulário
★ Manipulação Direta
15

16. Linguagem Natural
★ Texto
★ Voz
16

17. Linguagem Natural
17

18. Linguagem Natural
NATURAL
“Gostaria de saber quando
foi efetuada a minha
última compra neste ano.”
FORMAL (.SQL)
SELECT MAX
(PURSACHE_DATE) FROM
PURCHASES WHERE
CUSTOMER_ID=10001
AND PURCHASE_DATE >
TO_DATE(‘21/01/2018’,
‘DD/MM/YYYY’)
18

19. Linguagens de Comando
19

20. Linguagens de Comando
20

21. Organização
★ Comandos Simples
★ + Parâmetros
★ + Opções
Estrutura
★ Ordenação dos parâmetros
★ Símbolos vs Palavras-Chave
Linguagens de Comando
21

22. VANTAGENS
★ Flexível
★ Atrativa para usuários especialistas
★ Oferece suporte à criação de “scripts”
e macros definidos pelo usuário
★ É satisfatório para interação com
computadores em rede mesmo em
baixa velocidade
Linguagens de Comando
22

23. DESVANTAGENS
★ Difícil aprendizagem dos comandos
★ Taxas de erro muito altas
★ Difícil fornecer mensagens de erro e
assistência
★ Não atrativa para usuários que não
são especialistas
Linguagens de Comando
23

24. Menus
24

25. Menus
25

26. Menus
★ Grupos de itens logicamente semelhantes
★ Grupos cobrem todas as possibilidades
★ Sobreposições Inexistentes
★ Itens Ordenados
26

27. MENUS
Vantagens
★ Encurta treinamento
★ Reduz necessidade de
memorização
★ Reduz necessidade de
digitação
★ Estrutura a atividade
de tomada de decisão
★ Suporta tratamento de
erro facilmente
Desvantagens
★ Excesso de menus
torna-se cansativo
★ Uso por pessoas
experientes fica lento
★ Requer muito espaço
na tela
★ Requer rapidez de
exibição
27

28. Que tal um intervalo?
Em 15 minutos retornaremos para a
continuidade do curso.
Espero que esteja gostando!!!
28

29. WIMP
29

30. WIMP
★ Windows, Icons, Menus e Pointers.
★ Display do computador como representação
visual de uma mesa onde documentos e
pastas são organizados.
★ Principal vantagem? Organização!
30

31. Preenchimento de Formulário
31

32. Preenchimento de Formulário
★ Lembram formulários em papel, contendo
campos que o usuário deve preencher.
★ Formulários são de operação e aprendizado
bastante simples.
★ Projetado para que usuários lidem com grande
volume de informações de entrada.
32

33. Preenchimento de Formulário
VANTAGENS
★ Simplifica a entrada de dados
★ Encurta o aprendizado
○ Campos são predefinidos e precisam apenas
ser “reconhecidos”
★ Guia o usuário para regras predefinidas.
33

34. Manipulação Direta
34

35. Manipulação Direta
★ Mapeamento de conceitos (concretos
ou abstratos) do mundo real para
elementos gráficos concretos.
★ Mapeamento de operações do mundo
real para movimentos e operações do
mouse.
35

36. Manipulação Direta
VANTAGENS
★ Apresenta visualmente o conceito de tarefa
★ Fácil aprendizado
★ Erros podem ser evitados mais facilmente
★ Encoraja a exploração
★ Satisfação subjetiva alta
★ Memória de reconhecimento
36

37. Manipulação Direta
DESVANTAGENS
★ Pode ser mais difícil de programar
★ Incompatível com dispositivos gráficos
pequenos
★ Representação visual e espacial nem
sempre é a preferível
★ Notações compactas podem se enquadrar
melhor a usuários especialistas
37

38. Componentes de Interação
★ Para uma interação eficaz e bem sucedida é
necessário escolher bem os componentes
que irão ser utilizados.
★ Tipos de Componentes
○ Label, Edit, Button, Checkbox, ListBox,
ComboBox, RadioButton, TreeView, Menu,
Alert, Graphics, etc.
38

39. 2. ASPECTOS AFETIVOS
39

40. 40
Aspectos afetivos influenciam a decisão?

41. Aspectos Afetivos
★ As pessoas vão gostar?
★ Você acha bonito, agradável?
★ Usar a tecnologia trará status ou inibirá o
usuário?
41

42. Aspectos Afetivos
★ Ícones e outros elementos gráficos são
usados para transmitir estados emocionais
★ Ícones dinâmicos - Ex.: lixeira
★ Animações – Ex.: ampulhetas
42

43. Aspectos Afetivos
43

44. 44
Quais aspectos afetivos relacionado a este site?

45. 3. USABILIDADE
45

46. 46
Usabilidade
É um termo usado para definir a
facilidade com que as pessoas
podem empregar uma ferramenta
ou objeto a fim de realizar uma
tarefa específica e importante.

47. 47
Usabilidade - Outras Definições
É a capacidade em termos funcionais humanos
de um sistema ser usado facilmente com
eficiência pelo usuário (Shackel - 1992)
Usabilidade está diretamente ligada ao diálogo
na interface. É a capacidade do software em
permitir que o usuário alcance suas metas de
interação com o sistema (Scapin - 1993)

48. Usabilidade - Princípios
★ Conhecer usuário
★ Analisar e definir metas
★ Design paralelo e participativo
★ Heurística
★ Prototipação
★ Coleta de feedback
48

49. Metas de Usabilidade
★ O usuário tem que conseguir usar
★ O usuário tem que querer voltar a usar
49

50. Que tal um joguinho?
Peguem seus smartphones!!!
Vamos brincar um pouco.
Kahoot!
50

51. POR HOJE É SÓ!
Até o próximo encontro!
Que iremos falar de...
51

52. - Principios Básicos para Web
- Acessibilidade
- Heurísticas de Nielsen

53. Alguma Dúvida?
OBRIGADO!
CAMILE
KENEDY
PHILLIPE

54. IHM
UFRPE / SERPRO

55. Na aula passada
Falamos sobre...
55

56. - Estilos Interativos
- Aspectos Afetivos
- Usabilidade

57. E hoje...
57

58. - Principios Básicos para Web
- Acessibilidade
- Heurísticas de Nielsen

59. 4. Princípios Básicos para
Design Efetivo na Web
59

60. 60
Não faça o usuário pensar

61. 61
Não abuse da paciência de usuário

62. 62
Mantenha o foco e atenção do usuário

63. 63
Destaque recursos e benefícios

64. 64
Faça uso de texto objetivo

65. 65
Valorize e priorize a simplicidade

66. 66
Não tenha medo de espaços brancos

67. 67
Comunique-se com “linguagem visual”

68. 68
Convenções são nossas amigas

69. 69
Teste antes, teste depois, teste sempre

70. 5. ACESSIBILIDADE
70

71. Acessibilidade
Mito 1: acessibilidade web é só para
deficientes visuais
Mito 2: na prática, o número de usuários
beneficiados com a acessibilidade é
relativamente muito pequeno
Mito 3: fazer um site acessível demora e custa
caro
71

72. Acessibilidade
Mito 4: é melhor fazer uma página especial para
deficientes visuais
Mito 5: um site acessível a deficientes visuais
não é bonito
Mito 6: primeiro faz o site e depois a
acessibilidade
Mito 7: a gente sabe o que é bom para o usuário.
72

73. Que tal um intervalo?
Em 15 minutos retornaremos para a
continuidade do curso.
Espero que esteja gostando!!!
73

74. Recursos para desenvolvimento da interface
são as 8 Regras de Ouro de Ben Shneiderman
[link] e as 10 Heurísticas de Nielsen,
normalmente usadas como referência em
técnicas de avaliação.
guia de boas práticas
74

75. 6. HEURÍSTICAS DE NIELSEN
75

76. Nielsen?
Jakob Nielsen
★ Ph.D. em IHM pela
Universidade Técnica da
Dinamarca, em
Copenhague
★ Consultor em Usabilidade
76

77. Heurísticas de Nielsen
Os princípios fundamentais de usabilidade
ou heurísticas foram desenvolvidos por
Nielsen (1994) e seus colegas e são
utilizados sobretudo como base para a
avaliação de protótipos e projetos
existentes.
77

78. O que são Heurísticas?
Processos cognitivos empregados em
decisões não racionais, sendo definidas
como estratégias que ignoram parte da
informação com o objetivo de tornar a
escolha mais fácil e rápida.
78Fonte: https://pt.wikipedia.org/wiki/Heur%C3%ADstica

79. Visibilidade e Status do Sistema
O sistema mantém os usuários sempre informados sobre
o que está acontecendo, fornecendo um feedback
adequado, dentro de um tempo razoável. 79

80. Visibilidade e Status do Sistema
80

81. COMPATIBILIDADE DO SISTEMA COM O MUNDO REAL
O sistema fala a linguagem do usuário utilizando
palavras, frases e conceitos familiares a ele, em vez de
termos orientados do sistema. 81

82. CONTROLE DO USUÁRIO E LIBERDADE
O sistema fornece maneiras de permitir que os
usuários saiam facilmente dos lugares inesperados em
que se encontram, utilizando "saídas de emergência"
claramente identificadas.
82

83. CONTROLE DO USUÁRIO E LIBERDADE
83

84. 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.
84

85. AJUDA OS USUÁRIOS A RECONHECER, DIAGNOSTICAR
E RECUPERAR-SE DE ERROS
O sistema utiliza
linguagem simples
para descrever a
natureza do
problema e sugere
uma maneira de
resolvê-lo.
85

86. PREVENÇÃO DE ERROS
O sistema onde possível, impede a ocorrência de
erros.
86

87. RECONHECIMENTO EM VEZ DE MEMORIZAÇÃO
O sistema torna objetos, ações e opções visíveis.
87

88. FLEXIBILIDADE E EFICIÊNCIA DE USO
O sistema fornece aceleradores invisíveis aos usuários
inexperientes, os quais, no entanto, permitem aos
mais experientes realizar tarefas com mais rapidez.
88

89. ESTÉTICA E DESIGN MINIMALISTA
O sistema evita o uso de
informações irrelevantes
ou raramente necessárias.
8

90. ESTÉTICA E DESIGN MINIMALISTA
Muitas opções de escolha, o usuário nem precisa
disso tudo :)
9

91. AJUDA E DOCUMENTAÇÃO
91

92. AJUDA E DOCUMENTAÇÃO
92
O sistema fornece informações que podem ser
facilmente encontradas e ajuda mediante uma série de
passos concretos que podem ser facilmente seguidos .

93. Que tal um joguinho?
Peguem seus smartphones!!!
Vamos brincar um pouco.
Kahoot!
93

94. Alguma Dúvida?
OBRIGADO!
CAMILE
KENEDY
PHILLIPE

95. [1]Estilos de Interação
http://www.inf.puc-rio.br/~inf1403/docs/alberto2012-1/14_estilosdei
nteracao_ciclosdevida.pdf
[2] Padrões e Princípios para desenvolvimento de interfaces
http://blog.locaweb.com.br/geral/padroes-e-principios-para-desenv
olvimento-de-interfaces/
[3] Padrões e Princípios do Design de Interação
https://www.caelum.com.br/apostila-ux-usabilidade-mobile-web/pr
incipios/
[4] Usabilidade: 10 regras para você desenvolver interfaces agradáveis
aos usuários
http://thiagonasc.com/usabilidade/usabilidade-10-regras-desenvolv
er-interfaces-agradaveis
95
Referências

96. [5] Usabilidade
https://pt.slideshare.net/masvianna/design-e-usabilidade-na-web?q
id=e4837f17-4cc7-48b8-b551-3b416cadeaa1&v=&b=&from_search=2
[6] Heurísticas
https://pt.slideshare.net/Galabo/interao-humanocomputador-131074
08?qid=fc34b283-ba35-4466-9662-ea28305aa44d&v=&b=&from_se
arch=2
[7] Acessibilidade
https://pt.slideshare.net/usabilidoido/acessibilidade-web-sete-mitos
-e-um-equvoco?qid=141446aa-aed3-4aee-8ccd-cb01d9da2321&v=&
b=&from_search=4
[8]Acessibilidade web: 7 mitos e um equívoco
https://imasters.com.br/artigo/12359/acessibilidade/acessibilidade-w
eb-7-mitos-e-um-equivoco/
96
Referências