Affordance é um termo originalmente cunhado por um psicólogo, JJ Gibson, na década de 1970. Ele definiu como a relação entre um ambiente e um ator. Hoje, a affordance se estende além da psicologia comportamental ou cognitiva e no design de interfaces digitais. Entendimento affordance lhe permitirá entender melhor o design de produtos e interfaces, por sua vez, tornando-o um designer muito melhor.
Uma situação em que as características sensoriais de um objeto implicam intuitivamente sua funcionalidade e uso. - Crowdcube
A definição do termo do leigo de Crowdcube é pontual. Todos os objetos ao nosso redor têm affordances, alguns mais óbvios que outros. Affordance é a possibilidade de uma ação com um objeto; não é uma propriedade do objeto em si. Em outras palavras, um botão pode ser pressionado; a possibilidade de apertar um botão é sua capacidade.
A definição original criada por JJ Gibson descreveu todas as possíveis ações físicas que você poderia realizar com um objeto. Com o tempo, a definição mudou. Agora, a definição é mais ampla e inclui a descoberta de ações. Essa mudança foi trazida sobre a evolução tecnológica das interfaces digitais. Descoberta é um conceito interessante no mundo digital, como quando você está usando um computador, você consegue descobrir ações através das dicas dadas dentro das próprias interfaces.
Dê um passo atrás para o mundo físico, onde você verá que os objetos têm propriedades físicas como tamanho, forma ou peso que fornecem dicas sobre o que você poderia fazer com eles. Aqui estão alguns exemplos clássicos. Vamos começar com uma xícara de chá; é pequeno e tem uma alça que permite segurar. Sua forma de tigela mergulhada, indicando que ela pode conter algo também. Quando ele está segurando chá, a vantagem é que você pode segurar a xícara de chá e beber fora dela. Outro exemplo é uma escova de dentes: ela tem uma alça longa, mas fina, que permite segurar e assim por diante.
Os objetos físicos podem ser classificados em três tipos de affordance:
Acessibilidade perceptível é a definição básica de affordance, onde as características de um objeto implicam uma ação.
O affordance oculto é quando um objeto tem affordances que não são tão óbvios; por exemplo, simplesmente olhando para uma garrafa de cerveja você não seria capaz de lhe dizer que pode usá-la para abrir outra garrafa de cerveja.
Falso affordance é quando há uma percepção de affordance; mas nenhum resultado acontece da possível ação. Por exemplo, pressionar um botão que não faz nada, como usar o controle remoto da TV para ligar a TV, mas não funciona por algum motivo. O affordance ainda está lá - você está livre para pressionar esse botão tanto quanto você quiser - mas nada acontece, não há função.
Interfaces digitais são especiais. Eles nos permitem fazer coisas que são limitadas a um mundo bidimensional que é uma tela de computador. Há tantas coisas que poderíamos fazer em qualquer aplicativo, site ou programa; mas todos eles têm uma limitação grande e incapacitante: eles não podem fornecer pistas físicas sobre o que você pode fazer. Em vez disso, todos eles dependem de pistas visuais ou affordances. Isso pode ser muito complicado se você não entender o importante papel que a affordance desempenha na criação de interfaces de sucesso.
Se você entender como as affordances funcionam, você poderá usá-las a seu favor. Quando você puder fazer uma ferramenta, você será capaz de criar projetos intuitivos e fáceis de usar. Os designs intuitivos têm esse apelo para eles - provavelmente porque achamos muitos sites ou aplicativos entediantes e irritantes - por isso é muito interessante usá-los. Além disso, o affordance efetua conversões, que são muito importantes para criar um design bem-sucedido.
Se você quiser entender completamente como as affordances funcionam no design da interface, precisamos ser específicos. Vamos fazer isso agora cobrindo seis tipos de affordances diferentes vistos nas interfaces digitais, incluindo: affordance explícito, padrão, oculto, falso, metafórico e negativo.
Semelhante à affordance perceptível, affordance explícito é as dicas dadas pela linguagem ou aparência física do objeto. Um botão em relevo que diz "Clique em mim" é um ótimo exemplo de linguagem e dicas físicas. A aparência elevada do botão indica a possibilidade de clicar e o mesmo acontece com o texto "Clique-me". É obvio.
A linguagem desempenha uma parte tão importante de orientar os usuários por meio de interfaces digitais. Um campo de entrada que lhe pede o seu 'Nome completo' permite inserir o seu nome nele. A linguagem fornece orientações claras não apenas sobre o que você deve fazer, mas também sobre o que você pode estar fazendo. Inserir letras, como seu nome, é diferente de digitar números, como seu número de telefone, e você pode dizer qual deles é capaz de fazer pelo contexto do texto. No entanto, também é importante considerar o quanto a interface é óbvia para usar sem instruções explícitas e explicitadas. Seu design precisa ser utilizável e intuitivo sem segurar a mão do usuário em todas as etapas.
Uma affordance de padrão é a affordance definida por convenções. Um ótimo exemplo seria um logotipo que está no canto superior esquerdo de uma página da Web sendo clicável. É um padrão que vemos em toda parte; então esperamos em todos os lugares. O texto com cor diferente, às vezes sublinhado ou itálico, entre o texto do corpo inalterado como um parágrafo, é considerado um link. E-mail é frequentemente representado com um envelope, enquanto as configurações são representadas com uma engrenagem.
Nesses exemplos, o e-mail não exige um envelope real - nunca foi - e nem as configurações exigem o uso de marchas. É um padrão metafórico a que estamos expostos há muito, muito tempo; então se tornou uma convenção.
Os padrões são ótimos para a comunicação de atalhos mentais, mas somente se os usuários estiverem cientes desses padrões. Existem novos padrões introduzidos o tempo todo, por exemplo, o menu de hambúrguer é um conceito relativamente novo para menus e navegação. Ao projetar com novos padrões em mente, você precisa garantir que seus usuários estejam familiarizados com eles. Mas, quando você sabe que seu público foi exposto anteriormente a esses padrões, você tem a capacidade de criar alguns designs incríveis sem ser explícito.
O affordance oculto nos designs digitais é semelhante ao dos objetos físicos. No mundo digital, no entanto, a disponibilidade real não está disponível até que uma ação tenha sido tomada para revelá-la. Por exemplo, passar o mouse sobre um botão para ver se ele não está ativo e, portanto, clicável. Os menus suspensos são outro exemplo, em que você não vê o menu, a menos que você passe o mouse ou clique no item da lista principal.
Hordas ocultas são muitas vezes usadas para simplificar a complexidade visual de um projeto. No exemplo do menu suspenso, usamos a lista suspensa para ocultar todas as opções de navegação, pois há muitas para mostrar todas de uma vez. Se um usuário quiser navegar em algum lugar, ele precisará encontrá-lo no menu suspenso. Agora, uma grande desvantagem para affordances ocultos é que eles exigem que o usuário encontre a affordance, enquanto às vezes não lhes dá nenhuma sugestão de sua existência. Você não sabe o que esperar. É um jogo de adivinhação, por assim dizer, baseado em encontrar essas possibilidades à medida que você avança.
False affordance no espaço digital oferece algo mais que é inesperado - como acender suas luzes em vez da TV com o controle remoto da TV - ou nenhuma ação. Este tipo de affordance está em toda a Web, principalmente por acidente, como um botão que parece ativo, mas não faz nada, um logotipo que não está vinculado a nada, as palavras "clique aqui" no texto que não são de todo um link , ou um botão vermelho que faz algo bom com um botão verde que faz algo ruim.
Falso affordance é mais abundante em projetos onde os detalhes foram perdidos, como uma situação de link quebrado. As cores têm associações específicas com elas. No mundo ocidental, o verde é bom, enquanto o vermelho é ruim. Quando você alternar os dois, você certamente confundirá alguns de seus usuários, especialmente quando os botões estiverem lado a lado. Isso não significa que você não possa fazer isso; mas você deve ser cauteloso ao fazer isso. Você não quer nenhuma falsidade em seu design se puder ajudá-lo. Você não deve surpreender seus usuários assim.
O skeuomorphism dependia fortemente de affordances metafóricos, como imitações de objetos reais, para se comunicar. Os ícones são exemplos maravilhosos disso: mapa, carrinho de compras ou cesta, casa, impressora, vídeo, microfone, telefone, etc. Tome o conceito de e-mail, por exemplo. Suas raízes estão na metáfora de uma carta física; seu ícone é geralmente um envelope. É um ótimo exemplo de affordance metafórico ao redor. Se você está projetando algo e não tem certeza de como transmiti-lo, é sempre bom voltar para o mundo físico, pelo menos para inspiração e um ponto de partida.
Agora, você não precisa ir além dos antigos designs da Apple, onde para o aplicativo de jogos eles transformaram o fundo em uma toalha de mesa verde. Mas, compare isso ao ícone atual do aplicativo Games, que é apenas algumas bolhas. O que eles têm a ver com jogos? Eu não sei, a metáfora não está mais lá. Se isso é bom ou não cabe a você decidir. Se a metáfora precisa estar presente em seu projeto, ou não, é com você.
O affordance negativo pode ser considerado como indicando especificamente que não há affordance; é quando você tem um botão inativo ou um botão que parece inativo. A instância mais comum disso é quando um botão ou um link está em cinza. Agora, aqui está a parte complicada: não é que você esteja especificamente tentando dizer a um usuário que você não pode usar este botão - embora possa ser - mas que o botão parece que você não pode usá-lo, mesmo que na verdade você possa.
Existem certos casos em que você gostaria de indicar claramente que não poderia fazer algo. Por exemplo, se um usuário preencher um formulário e ele ainda não tiver preenchido tudo, o estado do botão poderá parecer inativo porque você não deseja que ele continue. Mas, se o botão parecer inativo, mas estiver ativo, é simplesmente um design ruim. Tenha cuidado com este.