artigo - Entendendo affordance na

prática.
by Cristiano Gonçalves | Training Center | Medium

Entendendo affordance na prática

Se você, assim como eu, trabalha ou já trabalhou com desenvolvimento de interfaces,

mas não tem conhecimentos sobre UX, provavelmente você já aplicou affordance em
seus projetos de forma inconsciente.

Um bom entendimento sobre affordance é muito importante para progredir nos demais
conceitos relacionados a UX, porém, antes de entendermos o seu significado
precisamos deixar bem claro as diferenças entre UX e IHC, já que o affordance se faz
presente nas duas disciplinas.

Diferença entre UX e IHC

De forma bem resumida, a UX ( User Experience ) se trata da experiência do usuário em
qualquer cenário, não tratando apenas da interação com um serviço/produto, mas sim
com todo o relacionamento. Enquanto a IHC é algo menos abrangente, tratando-se
apenas da interação computacional, seja por meio de um sistema ou até mesmo com o
uso de algum periférico. Vale lembrar que UX sempre vai estar presente no IHC, já o
contrário só acontece em casos onde temos um celular ou computador envolvido.

Um exemplo onde temos apenas UX seria um bom atendimento em uma loja de sapatos
e por fim a satisfação com a beleza e o conforto do mesmo. Uma experiência que
começou antes mesmo do contato com o produto.

Um exemplo onde temos IHC seria a interação de um jogador com o kinect. Nesse caso
a experiência do usuário está diretamente ligada a interação com uma máquina.
Mas o que é Affordance?
O termo affordance foi criado pelo psicólogo James Gibson e, inicialmente, foi pensado

apenas para o mundo real, mas depois o conceito foi incorporado ao mundo digital no

livro “O Design do Dia-a-Dia”, do Donald Norman. A palavra affordance é um termo

inglês que não tem uma tradução concreta para o português, mas pode ser traduzido

como “reconhecimento” ou “oportunidade”. De forma prática, Affordance é a

capacidade que um objeto ( ou parte de uma interface ) ser reconhecido e utilizado

exatamente da maneira que foi projetado, mas sem a necessidade de uma explicação

prévia. Um dos exemplos mais clássicos é o da maçaneta de uma porta, pois não

precisamos de uma explicação para saber que ao girá-la podemos abrir a porta. Outro

exemplo bem comum no nosso dia-a-dia é a tampa de uma garrafa, onde giramos

intuitivamente a tampa para abrir a garrafa.

Um affordance também pode se baseado em experiências anteriores, como é o caso do
ícone de disquete para salvar documentos, ou o texto azul e sublinhado indicando um
link.

Maçaneta de uma porta.

Botões de subir e descer de um elevador.

Temos affordances em diversos lugares do nosso cotidiano, então vou deixar mais
alguns exemplos que podem ajudar no entendimento.

Maçaneta da porta do carro.

A tampa de um creme para cabelo também é um affordance.

Como categorizar?
O uso de affordance nas interfaces é de extrema importância, pois as pessoas se
sentem mais confortáveis ao encontrar padrões que elas conhecem. Existem diversos
tipos de affordances, alguns deles são:

Explícito
Convencional/Padrão
Oculto/Escondido
Metafórico

Affordance Explicito
Esse é um dos mais fáceis de reconhecer, pois ele geralmente é acompanhado de um
texto indicando exatamente o que o usuário deve fazer. Alguns exemplos seriam um
botão de “Comprar com 1 clique” ou “Scroll down”.
Botão de comprar com 1 clique da Amazon.

O “Scrool down” também é um affordance.

Affordance Convencional/Padrão
Esse é um affordance comum, ele é baseado em experiências anteriores dos usuários.
Como é o caso desse link, que reconhecemos pelo sublinhado.

Affordance Oculto
Esse é um affordance que pode ser muito perigoso de se usar, pois o mesmo só aparece
por completo quando existe algum evento que o ative, como a interação do usuário.
Geralmente ele é utilizado para diminuir a complexidade de uma interface, porém pode
tornar a interface difícil de usar se o público não está acostumado com aquele
affordance. Um exemplo é o menu dropdown, que só mostra seu conteúdo quando
passamos o mouse por cima de um itens do menu. As notificações do facebook ou
youtube, que só são reveladas quando clicamos no ícone referente às notificações,
também são exemplos de affordance oculto.

Menu com dropdown é um affordace oculto.

Affordance Metafórico
Esse affordance usa de objetos do mundo real como metafóras para auxiliar no
entendimento da interface. A muito tempo atrás o design skeumófico usava muito
desse artifício. Hoje em dia esse tipo de design não é tão usual, porém o uso da
affordance com metáforas continua a todo vapor.
Icones do IOS com affordance metafóricas.

Aplicando affordance em projetos

existentes
Sempre construí minhas aplicações achando que estava fazendo tudo certinho. Mas só
precisei estudar um pouco de affordance pra começar a achar vários defeitos que
parecem simples, que acabaram passando despercebido e prejudicando a experiência
do usuário.

Agora que sei que fiz muita coisa errada até aqui, separei 3 projetos meus para ir
fazendo mudanças de usabilidade durante os meus estudos sobre UX. Nessa caminhada
eu estou sendo mentorado pela Livia Gabos(encontrei ela no mentoria do training
center :D), a qual me incentivou a compartilhar esse processo escrevendo artigos como
esse.

Se você já quer ver o resultado final, é só dar uma conferida nesse repositório. Nele que
vou colocar todas as mudanças de usabilidade encontradas em cada etapa dos estudos.

Projeto 1

Aplicação antes do inicio dos estudos de UX

Esse é o gif do primeiro projeto que resolvi mudar, o vue-cart. A princípio parece não
ter nada errado, porém vou listar alguns problemas pra deixar as coisas mais claras.

Os cards não possuem nenhuma indicação visual de que estão “selecionados”

Os cards e as imagens não são clicáveis, forçando o usuário a clicar no nome do
produto para ver a página do mesmo.
O botão “Add to cart” não tem nenhuma indicação visual de que está com o foco.
Os links do menu não tem nenhuma indicação visual de que estão com foco.
Não conseguiu perceber apenas com o gif? Então faz o teste ao vivo clicando aqui(esse
link foi um affordance explícito).
O gif abaixo mostra o resultado depois da correção dos problemas que listei
anteriormente. Você pode conferir as mudanças online no meu repositório.

Aplicação depois dos estudos e do uso do Affordance

Os problemas não pararam por ai… Os gifs abaixo são da página de checkout, consegue
visualizar as falhas de usabilidade?
Página de checkout — Antes e depois da revisão do affordance.

Nessa página de checkout eu tinha basicamente quatro grandes problemas:

Os produtos da lista não eram clicáveis, isso impedia que o usuário desse uma
conferida nos detalhes do produto antes de finalizar a compra.
Não existia nenhum botão para que o usuário continuasse fazendo a compra, pra
isso ele precisava se deslocar até o menu.
O botão para exclusão de um produto da lista estava bem apagado e podia ser
complicado para que alguns usuários o achassem. Ele também passava a
impressão de que estava desabilitado.
Não existia um botão para o usuário finalizar a compra.

Conclusão
Vimos que affordance é a capacidade de algo ou alguma coisa ser interpretada
corretamente, sem a necessidade de nenhum tipo de explicação de como ela funciona.
Também vimos que o mundo real é repleto de affordances, assim como nas interfaces
do mundo digital. Além disso, aprendemos que existem diversos tipos de affordances e
vimos alguns exemplos práticos que reforçam a importância do seu uso para uma
melhor experiência do usuário.

Antes de finalizar esse artigo quero deixar bem claro que os projetos que estou
trabalhando ainda possuem inúmeros problemas de usabilidade. Porém, o foco até
agora foi corrigir os problemas com affordance, assunto que acabei de concluir os
estudos junto com minha mentora Livia.
Referências
Blog Homem Maquina: O que é Affordance e como projetar pensando nisso
Blog: Ux Design: Sobre Affordances
Wikipédia: Affordance
Brasil Ux Design: Ainda faz sentido usar o disquete como ícone de “salvar”?
Blog Treina Web: Affordances: Desenhando interfaces intuitivas