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