O que é Affordance em UI Design?

O termo “affordance” é aquele que você ouvirá com frequência no mundo do design de UI e UX. Ele também aparece regularmente em tutoriais no Tuts+, então este artigo servirá como uma definição apenas para esclarecer qualquer dúvida.

O que é Affordance?

Às vezes há um pouco de confusão em torno de affordance, então vamos ver três importantes termos relacionados:

1. Acessibilidade

Definidas originalmente por James J. Gibson na década de 1970, as possibilidades são as ações possíveis entre um objeto e um indivíduo. Uma maçaneta é um dos exemplos de uso clássico; permite um movimento de torção. Seja ou não o indivíduo reconhece a possibilidade dessa ação é irrelevante – a affordance ainda está presente.

2. Acessibilidade percebida

O termo, como costumamos usar hoje em dia, foi popularizado por Donald Norman em seu livro The Design of Everyday Things (originalmente publicado em “The Psychology of Everyday Things”) e conflita um pouco com o de Gibson. Norman pegou a ideia conceitual de affordance e acrescentou a ela “interpretação humana”, dando-nos o que ele chama de “ffordance percebida”.

Voltando à nossa maçaneta, é um objeto cuja forma comunica como o usuário deve se envolver com ele. Se projetado de forma eficaz, o usuário saberá instintivamente se deve empurrar, puxar, torcer e assim por diante.

Norman gosta da ideia de que a affordance deve ser uma combinação de ações que são na verdade possíveis e aqueles que são simplesmente percebido como sendo possível.

A capacidade percebida é particularmente relevante no design de interface, que veremos em breve.

3. Significantes

Os significantes desempenham um papel na definição de Norman. De várias maneiras, as características de um objeto sugerem ao indivíduo quais ações são possíveis. Os significantes são as “partes perceptíveis de uma affordance”. Novamente usando o exemplo da maçaneta da porta, sua redondeza significa que ela permite torção.

Design de interação

Como web designers, moldamos a maneira como as interfaces aparecem e se comportam, influenciando a maneira como os usuários interagem com elas, geralmente por meio de elementos comuns da interface do usuário, como botões, controles de entrada, componentes de navegação e assim por diante.

Usamos detalhes visuais como significantes que ajudam os usuários perceber como eles devem interagir com esses elementos da interface do usuário.

Toda aquela coisa “plana”

O que os monitores de computador exibem é plano; uma coleção de pixels, nada mais. Mas, sugerindo profundidade e dimensão graficamente, podemos trazer recursos percebidos para ajudar os usuários. Veja os botões, por exemplo. Qual destes você percebe como “permitindo” uma ação urgente de forma mais eficaz?

Este é talvez o maior argumento contra o movimento de design plano; remoção de detalhes em um esforço para ser mínimo pode às vezes dificultar as possibilidades percebidas. Por exemplo, você já encontrou um formulário como este?

Ao ser supermínimo, todas as diferenças entre o botão enviar e as entradas foram removidas. Significantes (como sombras internas nas entradas e cantos arredondados no botão) teriam ajudado a comunicar visualmente que as entradas são contêineres e o botão é para “pressionar”.

“Um bom designer garante que as ações apropriadas sejam perceptíveis e as inadequadas invisíveis.” -Donald Norman

Tenha em mente

• Nem todos os usuários são iguais! Affordances podem não ser percebidas e interpretadas da mesma forma por todos.
• Rótulos e instruções são úteis no design da interface, mas apoiá-los com outras dicas visuais.
• No que diz respeito às interfaces gráficas, estamos nos referindo a “acessibilidade percebida”; eles não têm propriedades físicas reais, ao contrário do design do produto.
• O design “plano” pode comunicar recursos de forma tão eficaz quanto o skeuomorfismo – apenas certifique-se de que as ações sejam perceptíveis ao projetar.

Leitura adicional de design de interface do usuário