O que é Affordance e como projetar pensando nisso

O exemplo mais clássico de Affordance é uma porta com maçaneta. Quando olhamos para essa porta, a única interação que parece possível é a de mexer na maçaneta. Essa pode não ser a única ação possível, mas é sua Affordance mais forte.

Affordance é o potencial de um objeto de ser usado como foi projetado para ser usado.

 

O termo Affordance foi cunhado pelo psicólogo James J. Gibson e depois introduzido nas disciplinas de interação homem-máquina pelo livro O Design do Dia-a-Dia, do Donald Norman (esse livro é uma das jóias da nossa biblioteca aqui na Homem Máquina).

Affordance no design de interfaces

Quem projeta interfaces trabalha diretamente com as Affordances, até mesmo se não souber do que se trata. Diferente de objetos físicos, que têm Affordances baseadas no seu tamanho, formato e peso, as interfaces na web e mobile tem que ganhar suas Affordances pelas suas representações gráficas e metáforas.

Para muitos designers isso se torna instintivo e baseado em sua heurística – padrões de interfaces que eles vêem e analisam todos os dias. O importante é parar pra pensar: quais são as qualidades que fazem um objeto convidar o usuário ao clique, scroll ou qualquer outra ação?

Trabalhar as Affordances da sua interface pode impactar muito as taxas de conversão, taxas de registro e ações que mais importam no seu site ou app. Vamos ver um exemplo. O número de ações diferentes que um usuário pode fazer na página inicial do Tumblr.

Parece ser uma tela muito simples, mas existem onze ações possíveis na página inicial do Tumblr.

  1. Input de email
  2. Input de senha
  3. Input de nome de usuário
  4. Clique no botão “criar conta”
  5. Clique no botão “entrar”, para usuário existentes
  6. Clique no link “Termos de Serviço”
  7. Clique no link “Privacidade”
  8. Clique no link “Publicado por Usuário”
  9. Clique na imagem de avatar do Usuário
  10. Clique na caixa de busca do Tumblr
  11. Apertar “Enter” para procurar pelo que você escreveu na caixa de busca

As Affordances de uma interface têm uma importância diferente e por isso precisam ser visualmente diferentes entre si. No caso da página inicial do Tumblr, o mais importante foi botar em primeiro plano o fluxo de ações para o cadastro. Isso induz o usuário a pensar que o formulário é a principal razão desta página existir e que ele deve preenchê-lo para prosseguir.

Tipos de Affordance

Explícita

É sinalizada por algum tipo de linguagem verbal. Textos como “clique aqui” explicitam e traduzem a Affordance da ação de clique. São explícitas porque todo usuário, sem qualquer experiência em interfaces, pode adivinhar como interagir com o objeto. Para essa Affordance ser descoberta o requisito básico é ter usuários que saibam clicar.

Convencional

É o tipo mais comum de Affordance nas interfaces. Nós sabemos, por exemplo, que as palavras sublinhadas e em azul num texto são links clicáveis. Sabemos que o logo no topo de uma página pode ser clicado e nos leva à página inicial do site.

O requisito básico para usar essa Affordance é ter um público já acostumado a esses padrões nas interfaces. Se for projetar para idosos ou crianças, talvez seja melhor usar outros padrões de design.

Oculta

Uma Affordance oculta fica aparente só quando uma certa condição é completada. Por exemplo: palavras que viram links clicáveis só quando se passa o cursor sobre elas.

Outro exemplo perfeito são os cards do Pinterest, com cinco Affordances reveladas quando passamos o cursor por cima. (1) Clique no botão Salvar, (2) clique no botão “Compartilhar”, (3) clique no botão “Like“, (4) clique para dar zoom e (5) clique no botão “Mais”.

affordance-pinterest

O benefício da Affordance oculta é deixar a interface mais limpa ao não mostrar tantas interações em uma só página. O risco é que um usuário pode não saber como revelá-la e pode se tornar um obstáculo.

Metafórica

Um ícone de envelope convida o usuário a mandar um email, um ícone de casa, a ir para a página inicial, um de corrente, convida à criação de links e por aí vai. Algumas vezes o jeito mais fácil de comunicar a Affordance é usar um objeto do mundo real como metáfora.

 

Quando a maioria dos smartphones passou a usar o recurso touchscreen, foi necessário criar um ícone para usar o principal recurso do telefone: fazer ligações. Nesse caso, é usado o ícone de um telefone real como metáfora, que passa a informação de uma forma mais intuitiva.

Interação não-permitida

Algumas vezes é necessário desabilitar certas funcionalidades e mostrá-las como indisponíveis. Pra isso usamos o recurso visual de acinzentar o elemento desabilitado.

Nesse exemplo, o campo para o input da senha está cinza porque momentaneamente não aceita cliques ou inputs. Para habilitar essa interação, o usuário precisa clicar no botão “change” primeiro.

Conclusão

Viu? Você já trabalha com Affordances mesmo se não usa essa palavra no seu vocabulário.

Ao entender e usar as Affordances a gente consegue ajudar as pessoas a entenderem nossa interface mais rápido e motivá-las a completar ações. Basta hierarquizar as possibilidades e usar a interação certa.

 

Fechar ×
Precisa de ajuda com seu site, sistema ou aplicativo?
Nós ajudamos negócios de todos os tamanhos com design, tecnologia e estratégia digital
Conheça melhor a Homem Máquina