A
IHM
Interface Humano-Máquina
Prof. Dra. Sílvia Dotta
Aula 5. IHC – Affordance e Usabilidade

Affordance
• Refere-se ao atributo de um objeto que permite às pessoas
aferir como utilizá-lo.
• O conceito foi criado por J. Gibson em sua teoria sobre a
percepção humana
• Norman (1988) definiu o termo como “dar uma pista” e
introduziu o termo para falar sobre o design de objetos de
uso diário.
• Uma pista imediatamente reconhecida pelo usuário é um
conhecimento em “terceiridade”, ou seja, trata-se de uma
pista que já faz parte do repertório do usuário.

Affordance em sistemas computacionais
Para interfaces do chamado mundo real, as affordances
são bem fáceis de averiguar, mas quando consideramos
interfaces virtuais, com toda a sua complexidade, a
dificuldade de refletir os tais atributos que caracterizam
affordances é óbvia.
Tradução de affordance: Propiciação vem do verbo
Propiciar, (Subentenda-se “Tornar Propicio”) que
significa pelo dicionário, tornar favorável, proporcionar -
(Carlos Faraco)

Affordances: todas as possibilidades de ação
(acesso) latente no ambiente
• Objetos físicos possuem affordances
• Uma pedra pode ser movida, rolada, chutada, atirada, usada para
nos sentarmos...
• Não todas as pedras, apenas aquelas no tamanho certo para
mover, rolar, chutar, atirar, sentar sobre.
• O conjunto de possíveis ações [relativas ao sujeito] é
chamado de affordance do objeto
4
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Affordance não é uma propriedade do objeto
• É uma relação estabelecida entre o objeto e o
organismo que age sobre o objeto.
• Norman estendeu o termo à aplicação em design
Propiciação Real: é a propiciação tátil, não virtual, motora, física,
sensorial.
Propiciação Percebida: visual, sujeita a um background ou
repertório cultural específico, pessoal, particular.
• Affordances “percebidas” contam ao usuário que
ações devem ser realizadas sobre um objeto e como
realizá-las (até certo ponto)
• São o que determina a usabilidade do objeto 5
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Affordance em Design
6
Barbosa
www.baddesigns.com e Silva
2010

Affordance em Design
7
Barbosa
www.baddesigns.com e Silva
2010

8
Barbosa
www.baddesigns.com e Silva
2010

9
Barbosa
cecilia@ic.unicamp.br – II Workshop de www.baddesigns.com e Silva
2010
Engenharia de Software UNESP Bauru

Torneiras com sensor eletrônico de movimento
10

Design Universal
11
Barbosa
e Silva
2010

Affordance
Affordance é o conforto cognitivo e emocional previsto
em projetos ainda conceituais:
A affordance entrega atributos que foram aprendidos
por nós através da experiência de interação com os
objetos.
Quanto mais affordable tornamos uma interface ao
criá-la, menor será a curva de aprendizado e a
sobrecarga de memória sobre o usuário.

Clicabilidade
Do conceito de affordance surgiu o conceito de
clicabilidade
É um tipo de propiciação em interfaces gráficas. Ou seja,
o quanto um objeto pode ser compreendido como
“clicável”? O quão óbvio parece ser que ao clicá-lo você
passará a uma próxima etapa de navegação e/ou
operação.
É um conceito fundamental para D.I. pois a clicabilidade
está profundamente ligada ao hipertexto. O usuário não
deve enfrentar curvas de aprendizado, por menores que
sejam, para entender onde estão os hiperlinks.

Clicabilidade
Botões conceituais: qual dessas formas se
assemelha a um botão?

Clicabilidade
Botões conceituais: qual dessas formas é mais
affordable em termos de sinalizar ao usuário as
funções e utilidades de um botão?

Clicabilidade
Botões conceituais: onde está a affordance?

Clicabilidade
Os botões (modelos) conceituais sugerem e nos
induzem a ações tais como:
Parar.
Tocar.
Assistir a um filme.
Acessar um arquivo de som.
Atualizar (refresh)
Voltar…

Clicabilidade
A Clicabilidade nos mostra como a usabilidade
evolui pela experiência do usuário:
Algo que não fazia sentido passa a ser natural
para os usuários.
Algo que era desconfortável e estranho passa
a fazer sentido.

Usabilidade x Utilidade
A Usabilidade refere-se aos objetivos dentro de
contextos e cenários que projetamos.
A Utilidade é uma propriedade das interfaces que vai
além dos objetivos, contextos e cenários propostos.
A utilidade está intimamente relacionada aos atributos
que determinam a affordance de uma interface.
A capacidade de determinar affordances está
profundamente ligada à capacidade de inovar.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade
•é um atributo de qualquer sistema interativo: softwares médicos, construção
de aeronaves, equipamentos eletrônicos (celulares, dvdplayeres etc.), guia de
usuários, helps de sistemas etc.
Muitos fatores compõem a usabilidade de um produto: a arquitetura de
informação, o design, a tecnologia usada… usabilidade exige uma visão
ampla do projeto.
•Teste de usabilidade não é “teste de sistema”!
O foco deve ser a satisfação do usuário
Definição ISO 9241, parte 11:
"capacidade de um produto ser usado por usuários específicos para atingir
objetivos específicos com eficácia, eficiência e satisfação em um contexto
específico de uso (ISO, 1998). Alguns autores preferem adotar a expressão
'qualidade de uso' “
22

Estudiosos
Jacob Nielsen – Defensor dos usuários, especializado em usabilidade para
web. Com currículo extenso em grandes empresas focando na melhoria
da usabilidade.
Donald Norman – Sócio de Jakob Nielsen e autor de vários livros sobre
usabilidade. Seu foco era voltado totalmente ao usuário, pensando na
execução do projeto como estética + função.
Bruce Tognazzini – consultor de usabilidade, trabalhou em empresas
como Dell e Sun, sócio de Nielsen e Jacob
Alan Cooper – Criador do Visual Basic e autor de "About Face: The
Essential of User Interface Design". Trabalha desenvolvendo métodos
mais práticos para identificar e descrever usuários e seus objetivos.
Jared Spool – Possui mais de 15 anos de experiência, conduzindo estudo,
testes e palestrando sobre a aplicação de usabilidade em diversas áreas.

Estudiosos
Jared Spool
http://www.uie.com
Bruce Tognazzini, Donald Norman, J. Nielsen
Alan Cooper
http://www.cooper.com
Autor de “About Faces”
24

Usabilidade
Usabilidade é o 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.
Na Interação Humano-computador e na Ciência da Computação,
usabilidade normalmente se refere à simplicidade e facilidade com que
uma interface, um programa de computador ou um website pode ser
utilizado.
O Termo também é utilizado em contexto de produtos como aparelhos
eletrônicos, em áreas da comunicação e produtos de transferência de
conhecimento, como manuais, documentos e ajudas on-line. Também
pode se referir a eficiência do design de objetos como uma maçaneta ou
um martelo.

Problemas de usabilidade?
- A interface de um sistema estabelece um diálogo entre o programa e o
ser humano.
- Quando fatores humanos são considerados, este diálogo acontece em
harmonia. Assim, a interface é considerada a “embalagem do software
de computador”, portanto, se ela for fácil de aprender, simples de usar,
direta e amigável, o usuário estará inclinado a fazer bom uso da mesma .
Se essas características forem negligenciadas, problemas de usabilidade
possivelmente irão ocorrer.
- Problemas de usabilidade ocorrem quando um usuário ou um grupo de
usuários encontra dificuldades para realizar uma tarefa com uma
interface. Tais dificuldades podem ter origens variadas e ocasionar perda
de dados, diminuição da produtividade, podendo chegar à rejeição total
do software por parte dos usuários. (aborrecendo, traumatizando ou
mesmo constrangendo)
26

Usabilidade e Experiência do Usuário
Problemas de usabilidade
“Qualquer coisa que interfira com a habilidade do usuário em
completar suas tarefas de forma efetiva e eficiente.” (Karat, 1992)
“Um aspecto do sistema sobre o usuário que torna o sistema
desagradável, ineficiente ou impossível de permitir a realização dos
objetivos em uma situação típica de uso.” (Lavery et al, 1997)
Descrição de um problema de usabilidade:
- Contexto
- Efeito sobre o usuário
- Efeito sobre a tarefa
-Re-design possível
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Alta usabilidade
Usabilidade diz respeito à experiência do usuário e não à experiência de
quem desenvolve ou de quem solicita o desenvolvimento.
Produtos têm alta usabilidade quando o usuário:
- Consegue cumprir seus objetivos de uso com eficiência (baixa ocorrência
de erros, facilidade, agilidade)
- Sente-se satisfeito após a experiência de uso
- Sente-se estimulado a usar o produto novamente
- Tem cada vez mais facilidade e agilidade para cumprir seus objetivos de
uso (curva de aprendizagem)
- O usuário precisa achar fácil para se tornar confiante.
Experiência do usuário:
Prazer de usar + eficiência
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade na Web
Propósitos de Sistemas Web
• Informativo
• Prestar informações
• Funcional
• Oferecer serviços
• Entretenimento Informativo Funcional
• Divertir pessoas
• Alguns sites têm múltiplos
propósitos
Entretenimento
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 29

Exemplos
Portais Biblioteca Digital
Jornais e Banco
Revistas
Comércio
Manuais on- Informativo Funcional
line
Rádios
Entretenimento Vídeo sob
Museus
demanda
Livros
Música
Parques
Temáticos
Barbosa
e Silva
2010

Escopo de Websites
• Quanto à ligação em rede
• Internet
• Intranet
• Extranet
• Quanto à audiência
• Coorporativo - Público restrito e acesso controlado.
• Público seletivo (por assunto)
• Aberto ao público geral
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 31

Problemas comuns
• Websites maldefinidos e malprojetados
• Necessidade de atualização constante das informações:
eternamente “em construção”
• Evolução extremamente rápida da tecnologia
• Planejamento errado e “estouro” dos prazos e custos
• Equipes mal-organizadas e sem a competência adequada
• Falta de documentação e dificuldades de implementação e
manutenção
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 32

Problemas Comuns
• O sistemas têm a informação ou o serviço que eu preciso?
• Onde posso encontrar?
• Como posso solicitar esse serviço? Quais informações devo
fornecer?
• Qual o resultado? Era o que eu queria?
• Para que serve esse elemento?
• O que significa essa figura?
• Para onde leva esse link?
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 33

Problemas Comuns
• Desempenho
• Tempo – demora...
• Portabilidade
• Browser...
• Funcionamento
• Sistema processa errado...
• Usabilidade
• “Eu não sei como...”
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 34

Propostas para Sistemas Web
• Abordagem de “Design Gráfico”
• Aborda apenas aspectos estéticos: imagens, tipografia,
diagramação e cores
• Abordagem da “Usabilidade na Web”
• Define critérios de usabilidade, princípios e diretrizes para o
design e métricas para a avaliação
• Abordagem da “Arquitetura da Informação”
• Centrada na organização, navegação, rotulação e busca do
conteúdo da informação
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 35

O que se espera de Sistemas Web
• Funcional • Fácil de usar
• Eficiente • Legível
• Robusto e confiável • Atrativo
• Bem documentado • Organizado
36
• Manutenível • Correto
• Testável • Atualizado
• Portável • Adequado aos usuários
• Reutilizável • Adequado à tecnologia
• Interoperável • Adequado ao propósito

Princípios de Usabilidade na Web
• Os atributos para Usabilidade geral (Nielsen) também se
aplicam na Web:
• Learnability
• Eficiência
• Memorability
• Não conter Erros
• Satisfação Subjetiva
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 37

Requisitos de Usabilidade
• Facilidade de aprendizado: o sistema é fácil de aprender de
forma que o usuário consiga explorá-lo e rapidamente realiza
suas tarefas com ele.
• Eficiência: o sistema permite ao usuário, depois que este
aprendeu a interagir, atingir níveis altos de produtividade na
realização de suas tarefas.
• Memorização/reconhecimento: uma vez que o usuário volta
a utilizar um sistema, este lhe é familiar ao ponto de poder
realizar suas tarefas sem ter que reaprender a interagir com
ele.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Requisitos de Usabilidade
• Suporte a erros – ou baixa taxa de erros. Um usuário é capaz
de se recuperar de erros (feitos por ele ou pelo sistema), caso
eles ocorram, sem maiores transtornos...
• Satisfação subjetiva: o usuário considera agradável a
interação e se sente subjetivamente satisfeito.
-
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Aceitabilidade de Um Sistema
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Princípios de Usabilidade na Web
• Clareza na Arquitetura da Informação
• Usuário consegue discernir o que é prioritário e o que é
secundário no site.
• Informação deve estar estruturada e bem localizada.
• Um mapa do site pode ser muito útil.
• Facilidade de Navegação
• Usuário deve chegar até a informação desejada em até três
cliques.
• Informações bem distribuídas.
• Links representativos.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 41

Princípios de Usabilidade na Web
• Simplicidade
• Quanto mais rápido consegue-se chegar até a informação
desejada, melhor é.
• Evitar adornos desnecessários, sem prejudicar o enfoque da
aplicação.
• Relevância do conteúdo
• Conteúdo relevante e apropriado para a web.
• Textos concisos e com credibilidade.
• Informações relevantes devem ser apresentadas nas páginas
principais.
• Informações secundárias devem ser disponibilizadas em páginas
de suporte e conectadas através de links.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 42

Princípios de Usabilidade na Web
• Manter a consistência
• Padrão deve ser sempre adotado.
• Mesmo que o conteúdo mude com freqüência, característica
relevante em aplicações hipermídia, o usuário terá facilidade em
lidar com a aplicação, pois já irá conhecer os procedimentos padrões.
• Foco no usuário
• Princípio que reúne todos os demais.
• Foco deve estar nas atividades dos usuários.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 43

Princípios de Usabilidade na Web
• Ao se falar de usabilidade na web, não se pode deixar de levar
em consideração que se trata de uma rede mundial, portanto
deve-se ter uma preocupação com o processo de
internacionalização.
• Deve-se ter em mente, que somente o uso de interfaces
gráficas ou uso de elementos gráficos ao invés de palavras não
resolve grande parte dos problemas, já que alguns símbolos
podem ter interpretações distintas.
• Recomenda-se o uso de símbolos internacionais.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 44

Usabilidade e Experiência do Usuário
Acessibilidade
Acesso à internet para todos, independentemente de sua deficiência!
- 10% da população mundial tem algum tipo de deficiência (visual, auditiva,
física, cognitiva ou neurológica).
- A internet oferece a possibilidade de inclusão social
- Acessibilidade é exigida por lei em alguns países
Soluções:
• Visual
- Descrição de vídeos ou desenhos
- Tabelas e frames construídos adequadamente
- Compatibilidade com leitor de tela
• Audição
- Legenda para áudio
• Cognitiva, neurológica
- Navegação consistente
- Nível apropriado de linguagem
- Desenhos sem flicker ou strobing
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Exemplos
É muito difícil encontrar sites que são totalmente ruins ou
totalmente bons em usabilidade. Geralmente os sites
apresentam um pouco dos dois.
Quanto maior o site mais probabilidade existe em ter
problemas de usabilidade.
O que é ruim em um site não quer dizer que seja ruim em
outro. Tudo depende do contexto!!!
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Exemplos Ruins
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade e Experiência do Usuário
Exemplos Ruins
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade e Experiência do Usuário
Exemplos Ruins
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade e Experiência do Usuário
Exemplos Bons
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

Usabilidade e Experiência do Usuário
Exemplos Bons
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

ATIVIDADE PRÁTICA 1
Faça uma avaliação de um site de sua escolha,
Descreva os pontos positivos e negativos do
site,
Basear-se nas regras de usabilidade de Nielsen
Capturar as telas e fazer os comentários logo
abaixo,
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta 53

Quantos produtos interativos existem em nossa
vida cotidiana?
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta