O Seu Website Tem Affordances?

UX Design | 19th Agosto 2015

Pode parecer excessivamente simples, mas aqui na Hi INTERACTIVE já trabalhámos em diversos projetos para os quais o conceito de affordance foi fundamental; se questiona se a utilização e navegação do seu website é perceptível para os seus utilizadores, está, inconscientemente, à procura de affordances. Afinal, mesmo que o seu website tenha um aspeto fantástico, se não transmitir “conforto”, qual será a probabilidade de alguém passar o seu tempo a navegar nele? Continue a ler para compreender a origem do conceito de affordance e como pode utilizá-lo para atingir os seus objetivos.

O que são affordances?

Foi o psicólogo J. J. Gibson que, em 1977, mencionou pela primeira vez o termo affordance no seu artigo “The Theory of Affordances”; dois anos mais tarde, o mesmo termo seria explorado em pleno no livro “The Ecological Approach to Visual Perception”. Na época, affordance foi definida de modo muito simples como a relação entre um dado ambiente e um ator. As affordances eram já relevantes para a área do design, dado que todos vivemos rodeados de objetos, cuja utilização é mais ou menos evidente. Uma affordance não é uma característica específica de um objeto específico; é antes a possibilidade de praticar uma determinada ação através de desse objeto (por exemplo, a maçaneta de uma porta é uma affordance dessa mesma porta).
 
Originalmente, a definição de affordance como apresentada por J. J. Gibson referia-se ao conjunto de ações físicas do utilizador relativamente a determinado objecto. Esta definição inicial evoluiu ao longo do tempo, devido ao desenvolvimento tecnológico das interfaces digitais, e nos dias de hoje inclui a chamada discoverability das ações. Discoverability é outro conceito interessante, pertinente para a esfera digital, e aponta para o facto de que é através da interação com uma interface (como, por exemplo, um computador) que é possível descobrir as ações que podem ser tomadas.

Porque é que são importantes para a área digital?

A área digital tem uma peculiaridade em comparação com a dos objetos físicos: independentemente de a interface ser apresentada no ecrã de um computador, de um tablet ou de um smartphone, esta está sempre inserida num espaço bidimensional. Isto significa que não podemos obter dicas físicas sobre o objecto em si; podemos apenas receber pistas visuais ou affordances. Esta característica torna as affordances ainda mais importantes no campo digital, pois aumenta a probabilidade de os utilizadores, num momento de decisão, serem atraídos por um website ou de o rejeitarem por completo. Num aspeto mais empresarial, as affordances têm também um papel no âmbito das conversões, pelo que investir num bom design pode fazer toda a diferença.

Exemplos de affordances digitais vantajosas

Designer de UX, Paula Borowska fala, no seu excelente artigo "6 Types of Digital Affordance that Impact Your UX", sobre diversos tipos de affordances:

Affordance explícita: dicas dadas pela linguagem ou pela aparência física do objeto (exemplo: um botão vermelho que diz “carregue aqui”). Qualquer linguagem utilizada num website pode fornecer pistas valiosas sobre o que é possível fazer: pense na utilidade face ao preenchimento de um formulário online, ao saber de antemão se é suposto preencher com números, letras ou ambos.

Affordance oculta: este tipo de affordance é geralmente utilizada para tornar um design complexo mais simples. Pense, por exemplo, nos menus drop-down: estes apenas são visíveis quando, por alguma razão, precisa de os utilizar, ao invés de dispor todas as opções de navegação de uma só vez, o que poderia tornar-se confuso.

Case studies da Hi INTERACTIVE com recurso a Affordances

As affordances não são novidade no nosso trabalho e existem pelo menos dois trabalhos dignos de mencionar: Concertos para Bebés  e British Hospital. Para o primeiro destes dois projetos, criámos a galeria de imagens, cuja navegação pode ser feita horizontalmente; a pequena mão que surge no ecrã é a affordance, ou pista visual, que informa o utilizador sobre a forma mais eficaz de navegar na galeria. No segundo projeto, dividimos a barra de navegação em duas partes: pode ser utilizada a navegação superior para selecionar a categoria e a navegação lateral para selecionar a especialidade médica.
 
Não deixe de aproveitar os benefícios das affordances: fale connosco.

Voltar