Affordances

 Você já deve ter tido a experiência de tentar puxar uma porta, mas na verdade o que você precisava fazer era empurrá-la, para abrir. No mundo real, os objetos comunicam para nós como podemos  e devemos interagir com eles. Por exemplo, pelo seus tamanhos e formas, as maçanetas nos convidam a segurá-las e girá-las. A alça da caneca nos diz para curvar nossos dedos em torno dela para segurá-la. A tesoura nos convida a colocar nossos dedos através dos círculos em suas extremidades e fazer o movimento de abri-los e fechá-los. Na verdade, estes objetos não dão pistas, dicas que como manipulá-los. Estas pistas ou dicas são chamadas de affordances (não achei nenhuma palavra em português que tivesse sentido, por isso vou chamar de affordances mesmo).

James Gibson desenvolveu a ideia de affordances em 1979. Ele descreveu affordances como possibilidades de ações em uma determinada situação. Em 1988, Don Norman retrabalhou o conceito, desenvolvendo a ideia de affordances percebidas: se você quer que uma pessoa exerça uma ação sobre um objeto, você deve ter certeza que ela possa facilmente perceber, imaginar e interpretar o que o objeto é e o que ela pode ou deveria fazer com ele.

Quando você tenta realizar uma tarefa, tal como abrir uma porta ou fazer um pedido de um livro em um website, você automaticamente, olha ao seu redor para achar objetos e ferramentas para ajudá-lo. Se você é um web designer e vai projetar um site de venda de livros, você deve se certificar que os objetos e ferramentas deste contexto sejam fáceis de serem vistas e achadas, ou seja, você precisa  fornecer claras affordances para os usuários.

A imagem da maçaneta, abaixo, pela sua forma, nos convida a segurá-la e puxá-la para baixo. Se ela realmente funcionar desta maneira, podemos dizer que ela foi bem projetada e que ela possui uma “affordance percebida” clara.

Já nesta outra imagem, o design da maçaneta nos convida a segurá-la e puxá-la, mas o aviso PUSH (empurrar) indica que a porta não funciona desta maneira. Este seria um exemplo de affordance falho.

Você já se perguntou o que leva uma pessoa a querer clicar em um botão da web? Pistas, como as sombras de um botão, podem dizer que ele tem volume e pode ser empurrado, como se fosse um botão em um dispositivo real. As formas e as sombras da imagem do controle remoto nos convidam a pressionar o botão para ativá-lo.

Podemos simular estas sombras no computador, Na imagem abaixo, sombras de diferentes cores ao redor das margens do botão, passam a impressão que ele está para baixo (pressionado).

Ms se virarmos a figura, as sombras vão indicar que ele está pronto para ser pressionado.

Estas pistas visual são sutis, mas importantes. Muitos botões da web usam estas pistas visuais, como o botão abaixo, que também utiliza o sombreamento para ficar parecido com um botão do mundo real.

Mas ultimamente os web sites estão perdendo estas pistas. Abaixo um exemplo de botão que é apenas um texto em um retângulo colorido.

A grande maioria das pessoas sabe que uma frase na web, azul e sublinhada, significa um hiperlink, ou seja se você clicar ali você será redirecionado para outra página. Isto é um affordance. Mas ultimamente , os hiperlinks estão se tornando mais sútis, mostrando que são “clicáveis”, apenas quando passamos o cursor sobre eles. Isto mostra que novos affordances estão sendo desenvolvidos.

Dicas:

• Leve em conta os affordances, quando estiver desenvolvendo trabalhos de design. Ao dar pistas sobre o que as pessoas devem fazer com determinados objetos, você estará facilitando a ação do usuário.
• Evite fornecer affordances incorretos.

Fonte: Weinschenk, Susan. 100 Things Every Designer needs to Know About People. California: New Riders, 2011.