A definição de Affordances foi originalmente proposta pelo psicólogo James Gibson em 1977 para denotar a qualidade de um objeto que permite ao indivíduo identificar suas funcionalidades através de seus atributos (forma, tamanho, peso, etc…) de forma intuitiva, sem explicação.
Por exemplo, quando olhamos para uma maçaneta de um carro, sabemos a sua principal funcionalidade sem nem “pensar”, não importando qual o modelo do carro ou se estamos vendo àquele tipo de maçaneta pela primeira vez.
Affordances em interfaces digitais
Não demorou muito para o termo ser utilizado nas disciplinas de IHC (Interação Humano-Computador) e Design de Interação. Em interfaces digitais, quando desenhamos os elementos de uma aplicação, muitas vezes adicionamos sombra, relevo e outros efeitos visuais, geralmente se baseando nos objetos que são utilizados no mundo real. Para entendermos um pouco mais, vamos abordar 4 tipos de affordances que são aplicados em interfaces digitais e o impacto que elas podem causar na usabilidade de uma aplicação.
Curso UX/UI - Introdução
Conhecer o curso1. Affordance explícito
É quando tornamos um elemento óbvio e claro das suas funcionalidades, indicando exatamente o que precisa ser feito.
Geralmente utilizado quando ainda não há um padrão definido de como podemos interagir com esse elemento.
2. Affordance padrão
São baseadas nas experiências anteriores e que são conhecidas para maioria dos usuários. Um clássico exemplo é o link sublinhado com a cor azul.
Padrões são úteis, pois somos capazes de reduzir a carga cognitiva dos usuários quando interagem com um determinado elemento.
Curso Acessibilidade - Introdução
Conhecer o curso3. Affordance escondida
Neste tipo, o affordance não está disponível ou claro até que uma ação seja realizada pelo usuário. Por exemplo, um menu dropdown, onde você precisa passar o mouse ou clicar no menu para ver os itens de da lista.
Frequentemente utilizado para diminuir a complexidade visual de um design, exibindo apenas as informações relevantes em um determinado contexto.
4. Affordance metafórica
Utilizamos objetos do mundo real como metáforas em interfaces digitais. Ícones e símbolos são grandes exemplos: carrinho de compra, envelope, telefone, vídeo, câmera, impressora, etc…
Elas podem ajudar a comunicar ideias abstratas sem muitas instruções. Ao utilizá-las, certifique se a sua audiência irá entendê-la.
Concluindo
Entender o conceito de affordances é um dos primeiros passos para desenhar interfaces intuitivas. No seu próximo projeto, após conhecer a sua audiência e entender suas limitações, tente combinar os quatro tipos de affordances descritos acima para criar uma boa experiência do seu produto/serviço aos seus usuários.
Referências
Affordances - Interaction Design Foundation
O Design do Dia a Dia - Donald A. Norman
