Unidade 2 Usabilidade e Interação Humano Computador (IHC)

Prévia do material em texto

ENGENHARIA DE USABILIDADE E INTERFACES
Unidade II – Usabilidade e Interação Humano-Computador (IHC)
Engenharia de Usabilidade e Interfaces
Conteúdo Programático
•
•
•
•
Identificar os paradigmas de IHC;
Conhecer o conceito de usabilidade;
Reconhecer um problema de usabilidade;
Examinar diferentes tipos de interfaces.
Unidade II – Usabilidade e Interação Humano-Computador (IHC)
Engenharia de Usabilidade e Interfaces
Introdução
Engenharia de Usabilidade e Interfaces
Paradigma 1: LINHAS DE COMANDO
• O usuário digita um comando por vez seguindo uma
sintaxe específica.
• O sistema executa o comando e exibe o resultado do
processamento, quando houver.
• O antigo sistema operacional MS-DOS utilizava este
estilo de interação.
Prompt de comando do MS Windows
Engenharia de Usabilidade e Interfaces
Paradigma 1: LINHAS DE COMANDO
Engenharia de Usabilidade e Interfaces
Paradigma 2: PERGUNTAS E RESPOSTAS
• O sistema faz perguntas ao usuário que, por sua vez,
responde fornecendo os dados solicitados.
• Quando o sistema dispuser de todos os dados dos
quais precisa, realiza o processamento dos mesmos e
exibe os resultados.
Site Akinator
Engenharia de Usabilidade e Interfaces
Paradigma 2: PERGUNTAS E RESPOSTAS
Engenharia de Usabilidade e Interfaces
Paradigma 3: MENUS
• As possíveis ações a serem executadas pelo usuário
estão listadas na tela, ou organizadas em menus
hierárquicos, e é possível selecionar uma delas.
• Amaioria das aplicações Windows organiza suas opções
em menus hierárquicos.
Windows Explorer do MS Windows
Navegador Firefox
Engenharia de Usabilidade e Interfaces
Paradigma 3: MENUS
Engenharia de Usabilidade e Interfaces
Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS
• O usuário digita os dados em campos específicos,
como se estivesse preenchendo um formulário
impresso em papel.
•Muitas aplicações de escritório e de bancos de dados
utilizam esse estilo de interação.
Site Submarino, Declaração de IR
Engenharia de Usabilidade e Interfaces
Paradigma 4: PREENCHIMENTO DE FORMULÁRIOS
Engenharia de Usabilidade e Interfaces
Paradigma 5: TECLAS DE FUNÇÃO
•A interação se dá através de um conjunto de teclas
especiais ou de combinação de teclas para diferentes
operações.
•As teclas de atalho, que dão acesso mais rápido às
opções de menus, são um exemplo desse estilo de
interação.
Navegador Firefox
Engenharia de Usabilidade e Interfaces
Paradigma 5: TECLAS DE FUNÇÃO
Engenharia de Usabilidade e Interfaces
Paradigma 6: MANIPULAÇÃO DIRETA
• Os objetos utilizados na criação da interface são
graficamente representados na tela e o usuário pode
manipulá-los diretamente quando aponta, clica,
arrasta, digita etc.
• Grande parte das interfaces gráficas baseia-se neste
estilo de interação.
Galeria de temas do Gmail, Galeria de animações do PowerPoint
Engenharia de Usabilidade e Interfaces
Paradigma 6: MANIPULAÇÃO DIRETA
Fonte da imagem: http://btechzone.com/wp-content/uploads/2010/10/
frustrated.jpg
Engenharia de Usabilidade e Interfaces
Sobre os Paradigmas de Interação
Independente do paradigma
de interação adotado,
EVITE PROBLEMAS DE
INTERAÇÃO!
Fonte da imagem: http://www.ukwebsites.net/usability.asp
Engenharia de Usabilidade e Interfaces
O que é USABILIDADE?
•Atributo de qualidade dos sistemas
•A intenção é avaliar a de facilidade de uso na
interação com as interfaces
• O termo “usabilidade” também pode fazer
referência a métodos para melhoria da
facilidade de interação durante o processo de
projeto das interfaces.
Engenharia de Usabilidade e Interfaces
Aspectos principais da usabilidade
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Facilidade de uso: Na primeira vez em que têm contato com a
interface, é fácil para os usuários realizar tarefas básicas?
É fácil desenhar um círculo no Paint?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Facilidade de uso: Na primeira vez em que têm contato com a
interface, é fácil para os usuários realizar tarefas básicas?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Eficiência: Uma vez que aprendam a interface, os usuários
conseguem executar suas tarefas com rapidez?
É possível fazer um uso mais eficiente do MSWord?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Eficiência: Uma vez que aprendam a interface, os usuários
conseguem executar suas tarefas com rapidez?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Facilidade de memorização: Quando voltam a utilizar a interface
depois de um longo período de afastamento, os usuários conseguem
retomar o uso com facilidade e rapidez?
É fácil relacionar os ícones das barras de ferramentas
às tarefas que desempenham?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Facilidade de memorização: Quando voltam a utilizar a interface
depois de um longo período de afastamento, os usuários conseguem
retomar o uso com facilidade e rapidez?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Taxa de erros: Quantos erros os usuários cometem durante o uso da
interface? Esses erros são graves? A recuperação desses erros é fácil?
É possível digitar letras no CEP?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Taxa de erros: Quantos erros os usuários cometem durante o uso da
interface? Esses erros são graves? A recuperação desses erros é fácil?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Satisfação: É agradável interagir com a interface?
É cansativo navegar no Facebook por muito tempo?
Engenharia de Usabilidade e Interfaces
Aspectos Principais da Usabilidade
• Satisfação: É agradável interagir com a interface?
No que diz respeito ao grau de severidade dos problemas de usabilidade,
podemos dizer que as barreiras são mais graves do que os obstáculos. Esses,
por sua vez, são mais graves do que os ruídos.
BARREIRAS
OBSTÁCULOS
RUÍDOS
Engenharia de Usabilidade e Interfaces
Problemas de Usabilidade
• Configuram-se em dificuldades vivenciadas pelos usuários durante o
uso de uma aplicação computadorizada.
• São classificados em três tipos: Barreiras, Obstáculos e Ruídos.
Onde está a opção
para ativar o
bloqueador de pop-
ups no Google
Chrome?
Engenharia de Usabilidade e Interfaces
Barreiras
• Barreiras são problemas com os quais o usuário se depara com
frequência e que não consegue superar sem a ajuda, impedindo que os
usuários executem suas tarefas.
A opção para inserir uma nota de rodapé não está na
aba “Inserir”... Onde ela estará?
Engenharia de Usabilidade e Interfaces
Obstáculos
• Obstáculos são problemas com os quais os usuários se deparam e
que, depois de algumas tentativas, conseguem ultrapassar sem a
necessidade de ajuda de terceiros.
Problema de espaçamento entre palavras na
mensagem do Word... Que feio!
Engenharia de Usabilidade e Interfaces
Ruídos
• Ruídos são problemas mais brandos e que não chegam a configurar
uma barreira ou um obstáculo.
Engenharia de Usabilidade e Interfaces
“Um problema de usabilidade é observado em determinadas
circunstâncias quando uma característica do sistema interativo
ocasiona perda de tempo, compromete a qualidade da tarefa ou
mesmo inviabiliza sua realização. Como consequência, ele
estará aborrecendo, constrangendo ou até traumatizando a
pessoa que utiliza o sistema interativo.”
(CYBIS et. al. Ergonomia e usabilidade: conhecimentos,métodos e aplicações. Novatec Editora, 2010)
Fonte da imagem: http://www.ukwebsites.net/usability.asp
Engenharia de Usabilidade e Interfaces
Explorando o tema
Ergonomia e Usabilidade:
conhecimentos, métodos e aplicações.
Autores: Walter Cybis, Adriana Holtz
Betiol e Richard Faust
Novatec Editora, 2010
Engenharia de Usabilidade e Interfaces
IHC: Multidisciplinar
Engenharia de Usabilidade e Interfaces
• É um dos aspectos a ser observado
durante a avaliação da usabilidade
das interfaces.
• Dentro desse aspecto, é importante
preocupar-se com a quantidade de
erros cometida pelos usuários
durante o uso da interface, a
gravidade desses erros e sua
recuperabilidade.
• Por que é tão importante estar
atento a essas características
durante o projeto de interfaces e ao
longo da implementação da
aplicação?
Taxa de Erros
Engenharia de Usabilidade e Interfaces
Evolução das Interfaces Homem-Computador
• Walker
• Walker (1990) redefine a geração dos computadores sob o
ponto de vista de como os usuários interagem com ele
(afirmando ser este ponto de vista muito mais importante do
que o de como eles foram construídos), em 5 gerações:
Engenharia de Usabilidade e Interfaces
Primeira Geração
• Painéis com plugues, botões, mostradores e
funcionamento dedicado
• Surgiu em 1945, com a criação do ENIAC
• Composta pelos sistemas de tabulação e pelo ENIAC,
desenvolvidos para resolver problemas específicos, por
especialistas com conhecimento preciso e detalhado da operação
do hardware.
• O usuário tinha uma relação um a um com o computador, na sala
do computador, operando-o através de chaves e botões.
Engenharia de Usabilidade e Interfaces
Primeira Geração
• Painéis com plugues, botões, mostradores e
funcionamento dedicado
• Pelo fato do usuário ser o operador da máquina e controlá-la com
pouca ou nenhuma abstração, não havia qualquer mediação entre
o computador e seu usuário especialista.
• Nos anos 50, o modelo do usuário de um computador era o de um
usuário individual, com o tempo totalmente dedicado para a
máquina.
Engenharia de Usabilidade e Interfaces
Primeira Geração
• Painéis com plugues, botões, mostradores e
funcionamento dedicado
•
•
A segunda geração introduziu muitos níveis importantes de mediação e
abstrações entre o usuário e o hardware do computador.
Provavelmente, a mudança mais importante foi a autonomia de tempo
oferecida, pelo processamento em lotes, para o usuário que, até então,
ficava o tempo todo em que durava o processamento de um programa,
dedicado a operação do computador.
Engenharia de Usabilidade e Interfaces
Segunda Geração
• Lotes de cartões de dados perfurados e entrada de
dados remota ("RJE")
• Década de 50
•
•
As linguagens de controle de serviços ("Job Control Languages - JCL"),
controlavam as atividades dos computadores sem a necessária
intervenção do usuário.
Os lotes de cartões, as listagens de impressoras, os balcões de
atendimento e os JCL formaram o ponto central da imagem do usuário
dos sistemas de segunda geração.
Engenharia de Usabilidade e Interfaces
Segunda Geração
• Lotes de cartões de dados perfurados e entrada de
dados remota ("RJE")
Engenharia de Usabilidade e Interfaces
Segunda Geração
• Lotes de cartões de dados perfurados e entrada de
dados remota ("RJE")
•
•
•
•
Década de 60
Os sistemas operacionais passaram, a proporcionar a execução concorrente de
múltiplos serviços, originando o conceito de compartilhamento do computador com
uma grande comunidade de usuários, de maneira interativa.
Os conceitos de produtividade de máquina (que ocasionaram a execução
concorrente de programas), deram origem ao conceito de produtividade do usuário,
através de uma maior interação conversacional do usuário com o computador,
levando ao desenvolvimento dos sistemas de tempo compartilhado dos anos
sessenta.
O uso de sistemas em tempo compartilhado proporcionou, aos usuários de sistemas
em lotes, os mesmos serviços oferecidos anteriormente, porém acrescidos da
facilidade da execução dos trabalhos de modo interativo, permitindo a monitoração
de seus progressos de forma "on-line".
Engenharia de Usabilidade e Interfaces
Terceira Geração
• Tempo compartilhado via teletipo - Teletype Timesharing
•
•
•
O dispositivo interativo (um terminal de impressão lento ou um teletipo
com tela emASCII), permitia o desenvolvimento de Computação
Conversacional.
O usuário digitava uma linha de entrada para o computador, que
imediatamente a processava e respondia com outra linha.
No modo de interação conversacional, o usuário conversava com o
computador da mesma forma que com outra pessoa, através de uma
ligação teletipo a teletipo.
Engenharia de Usabilidade e Interfaces
Terceira Geração
• Tempo compartilhado via teletipo - Teletype Timesharing
Engenharia de Usabilidade e Interfaces
Terceira Geração
• Tempo compartilhado via teletipo - Teletype Timesharing
Engenharia de Usabilidade e Interfaces
• O desenvolvimento de terminais alfanuméricos rápidos e
sofisticados permitiu que se pudesse apresentar, para o usuário,
uma grande quantidade de informações de maneira quase que
instantânea, possibilitando o desenvolvimento dos menus de
escolhas, pelos quais os usuários podiam selecionar o item
desejado, simplesmente pressionando uma ou duas teclas.
• Estes tipos de menus rapidamente se tornaram padrões para os
sistemas de aplicações desenvolvidos para serem operados por
pessoas não especializadas em computação.
Quarta Geração
• Sistemas de Menus
• Década de 70
Engenharia de Usabilidade e Interfaces
Quarta Geração
• Sistemas de Menus
Mainframe
“Terminal Burro"
Engenharia de Usabilidade e Interfaces
Quarta Geração
• Sistemas de Menus
Engenharia de Usabilidade e Interfaces
Quinta Geração
• Controles gráficos e janelas
• Surgiu no Centro de Pesquisa de Palo Alto da Xerox
• Alan Kay e outros pesquisadores do perceberam que o
desenvolvimento dos circuitos integrados monolíticos (que
diminuíram o custo da memória do computador), dos processadores
rápidos e baratos, das redes de dados e das técnicas de
programação orientadas a objetos, poderiam permitir o
desenvolvimento de uma forma, totalmente nova, de interação entre
os usuários e os computadores, através de telas com gráficos
bidimensionais, que permitiram a aplicação de muitas metáforas
que com as tecnologias anteriores podiam ser apenas vagamente
aproximadas da realidade.
Engenharia de Usabilidade e Interfaces
Quinta Geração
• Controles gráficos e janelas
• A tela do computador pode ser transformada em uma
mesa de trabalho completa, com folhas de papel que
podiam ser folheadas, contendo vários acessórios e
recursos.
• A disponibilidade de um dispositivo apontador, como o
"mouse", permitiu a seleção de objetos na tela, sem a
necessidade da digitação de nomes ou da opção através
dos menus, como nos sistemas anteriores.
Engenharia de Usabilidade e Interfaces
Quinta Geração
• Controles gráficos e janelas
Unidade II – Usabilidade e Interação Humano-Computador (IHC)
Engenharia de Usabilidade e Interfaces
Quinta Geração
• Controles gráficos e janelas
Engenharia de Usabilidade e Interfaces
Evolução das Interfaces Homem-Computador
• Roger S. Pressman
• Pressman (1995) classifica a evolução das interações entre
o ser humano e o computador em apenas quatro gerações:
• A comunicação é puramente textual e é feita via comandos
e respostas às perguntas geradas pelo sistema.
Engenharia de Usabilidade e Interfaces
Primeira Geração
• Comandos e interfaces de perguntas - QueryInterfaces
Engenharia de Usabilidade e Interfaces
Primeira Geração
• Comandos e interfaces de perguntas - Query Interfaces
Engenharia de Usabilidade e Interfaces
Segunda Geração
• Menu simples
• Uma lista de opções é apresentada ao usuário e a decisão
apropriada é selecionada via algum código digitado.
Engenharia de Usabilidade e Interfaces
Segunda Geração
• Menu simples
Engenharia de Usabilidade e Interfaces
Terceira Geração
• Orientada a janela, interfaces de apontar e apanhar
• Estas interfaces são algumas vezes referenciadas como
interfaces "WIMP" ("windows, icons, menus, and pointing
devices").
• Trazem o conceito de mesa de trabalho ("desktop").
Engenharia de Usabilidade e Interfaces
Terceira Geração
• Orientada a janela, interfaces de apontar e apanhar
Engenharia de Usabilidade e Interfaces
Quarta Geração
• Hypertexto e Multitarefa
• Esta geração (que para ele é a corrente), soma, aos
atributos das interfaces de terceira geração, as técnicas de
hipertextos e multitarefas.
• A quarta geração das interfaces está disponível na maioria
das estações de trabalho e dos computadores pessoais
atuais.
Engenharia de Usabilidade e Interfaces
Quarta Geração
• Hypertexto e Multitarefa
•
•
•
•
CUI
GUI
PUI
VRUI
Engenharia de Usabilidade e Interfaces
Tipos de Interface Humano Computador
Engenharia de Usabilidade e Interfaces
CUI
• Character-based User Interface
• Também conhecido como CLI (Command Line Interface)
• São as interfaces fundamentadas em textos e caracteres
alfanuméricos, fazendo uso da metáfora de umamáquina
de escrever ou de um teletipo.
• Fazem parte das primeiras gerações de interface homem
computador.
Engenharia de Usabilidade e Interfaces
CUI
Engenharia de Usabilidade e Interfaces
GUI
• Graphical User Interface
• São as interfaces fundamentadas em gráficos e
desenhos, fazendo uso de metáforas de mesas de
trabalho, documentos, botões, janelas, etc..
• Fazem parte da quinta geração apresentada por
Walker ou da terceira apresentada por Pressman.
Engenharia de Usabilidade e Interfaces
GUI
Engenharia de Usabilidade e Interfaces
PUI
• Pen-based User Interface
• São as interfaces compostas de um monitor de vídeo em
formato de uma planilha ou bloco de anotações que
recebe dados através de uma espécie de caneta
eletrônica.
• Tais interfaces fazem uso da metáfora de se escrever ou
desenhar em um papel de maneira manuscrita.
Engenharia de Usabilidade e Interfaces
PUI
Engenharia de Usabilidade e Interfaces
• Virtual Reality-based User Interface
• O objetivo dessa tecnologia é recriar ao máximo a sensação
de realidade para um indivíduo, levando-o a adotar essa
interação como uma de suas realidades temporais
• São as interfaces fundamentadas no paradigma da realidade
virtual e utilizadas com muito menor frequência que as
anteriores por limitação de custos e tecnologia.
• Porém, algumas opções já estão disponíveis no mercado, com
o objetivo de popularizar a tecnologia e, em seguida, barateá-
la.
VRUI
Engenharia de Usabilidade e Interfaces
VRUI
Engenharia de Usabilidade e Interfaces
• Não torne a tela muito brilhante ou escura
- Use as cores brilhantes em áreas pequenas e cores
suaves em áreas maiores
• Não aposte na boa habilidade visual de todos os
usuários
- Um número muito grande de pessoas têm algum tipo de
disfunção visual;
- Isto faz com que algumas pessoas não consigam
distinguir perfeitamente algumas cores e confundir outras;
- Não só o daltonismo mas também a distorção de
algumas lentes provoca estes efeitos
Uso de Cores no Design de Telas - Regras
Engenharia de Usabilidade e Interfaces
Uso de Cores no Design de Telas - Regras
• Se possível tornar as cores personalizáveis
- No HTML, podemos definir a cor de fundo e a
cor de links já visitados ao gosto do usuário.
• Não use muitas cores extravagantes
- Limite-se a 16 a 20 cores, que são as cores
básicas do ambiente Windows e que aparecem
bem em quase todos os monitores
Engenharia de Usabilidade e Interfaces
• Simplicidade
• Use poucas cores (2 a 7); é mais fácil de dominar e mais simples de
distinguir em dispositivos de menor qualidade ou preto-e-branco
• Cores contrastantes como ferramenta de medida
• Se as cores serão usadas para indicar continuidade, como a
passagem de tempo enquanto se espera que uma tarefa termine,
então não use um espectro de cores (do violeta ao vermelho).
• Não associar muitas cores para serem lembradas
• As cores podem possuir um significado, além daqueles mais
populares (vermelho para Pare e Verde para Seguir).
• Como exemplo: Cinza para Home-Page, Branco para Texto, Verde
para Apresentações (PowerPoint) e Amarelo para Planilhas
Uso de Cores no Design de Telas - Regras para o Projeto
Engenharia de Usabilidade e Interfaces
• Lembre que cores mal utilizadas é pior do que não usar cores
• Associações comuns:
• Vermelho: pare, perigo, fogo, quente
•Amarelo: cuidado, atenção, aviso
• Verde: siga, OK
•Azul: frio, água
• Diferenças culturais na associação de cores
•Alguns países têm cores associadas à alguns objetos e fatos:
• No Japão marginais usam chapéu azul
• No Egito o amarelo é a cor da alegria e prosperidade
•As caixas de correio são vermelhas na Inglaterra, azuis nos Estados
Unidos, amarelas na Grécia e verdes ou amarelas no Brasil
Uso de Cores no Design de Telas - Regras para o Projeto
Engenharia de Usabilidade e Interfaces
Uso de Cores no Design de Telas - Regras para o Projeto
• Cores Opostas:
• Se vermelho é Pare: oposto é verde
• Se vermelho é calor, quente: oposto é azul
• Sensação das cores:
• A sensação é o efeito psico-fisiológico sentido pelo ser humano
• Cada cor tem uma sensação associada, e portanto o uso inadequado
de uma cor pode prejudicar a comunicação visual numa tela
• A sensação também pode variar em função do contraste, isto é, a cor
de um texto ou objeto pode ter sensação diferente conforme a cor do
fundo da tela
• Algumas cores podem ser usadas apenas em alertas ou pequenos
espaços; é o caso do vermelho, do preto e do roxo/violeta
Engenharia de Usabilidade e Interfaces
• Cores quentes e frias
• Cores quentes ou luminosas: amarelo, laranja, vermelho e violeta
• Cores frias ou sombrias: azul, turquesa, verde-mar e verde-alface
• Harmonia das cores:
• Harmonia das cores opostas ou de contraste: o maior contraste
se obtém justapondo cores complementares; a maior superfície é
colorida com uma cor quente e a menor com sua cor complementar
fria
• Harmonia das cores análogas ou vizinhas: é o emprego de uma
cor e uma ou duas vizinhas; por exemplo: laranja e seus vizinhos,
vermelho e amarelo; a cor mais clara usada na superfície maior
• Harmonia monocromática ou de cor dominante: é o uso de uma
única cor, aplicada pura e em vários tons, claros e escuros
Uso de Cores no Design de Telas - Regras para o Projeto
Engenharia de Usabilidade e Interfaces
Uso de Cores no Design de Telas - Regras para o Projeto
• Cores de primeiro e segundo plano
• Usar sempre pares complementares
• Usar cores contrastantes
• Cores e tamanho
• Cores são difíceis de distinguir em pequenas áreas
• Cores brilhantes parecem maiores
• Cores escuras sobre fundo claro oferecem maior legibilidade