Affordances no Design de Interação

Post rápido sobre a importância de se preocupar com affordances no design de interação com base em dois exemplos simples.

Contextualizando

O termo affordance (criado por James J. Gibson, segundo este site aqui), é utilizado em diversas áreas do conhecimento – da psicologia ao design da interação – e suas definições sofrem, portanto, alterações. A definição que nos interessa neste post é a utilizada e popularizada pelo titio Donald Norman no impressionante Design of Everyday Things: a propriedade de um objeto, elemento ou sistema que permite que seu funcionamento ou ação seja facilmente percebida e, consequentemente, executada de maneira correta pelo usuário.

O conceito é um tanto mais complexo que isso, mas, trocando em miúdos: uma porta com maçaneta sugere que ela seja girada e/ou puxada para abrir, enquanto as barras de portas de emergência (daquelas do cinema, “anti-pânico”) gritam para serem empurradas.

O caso do Jusbrasil (ou Como a ausência de affordances pode comprometer a eficácia de uma boa ferramenta)

O portal de notícias jurídicas jusbrasil.com.br possui uma interessante ferramenta: um complemento ao dicionário de termos jurídicos que, como um aplicativo, aparece na própria página, permitindo que o usuário esclareça suas dúvidas de forma rápida e eficiente. A ferramenta claramente atende a uma necessidade dos usuários do site e foi gasto um esforço considerável em programação, design e taxonomia (a busca se utiliza de um dicionário de sinônimos bem trabalhado – o termo “telefone”, por exemplo, leva à definição de “sigilo telefônico”). É preciso, porém, destacar um pequeno, quase imperceptível problema: ninguém sabe que ela existe.

Ferramenta de pesquisa do site jusbrasil.com.br

Ferramenta de pesquisa do site jusbrasil.com.br

Para pesquisar um termo no dicionário é preciso clicar duas vezes sobre a palavra, ato que, como no caso que inspirou este post, só pode ser realizado por acidente. Não se trata de uma ação comum (o duplo clique não é, em geral, associado a essa ação), nem há qualquer indicação dessa possibilidade.

Obs: Apesar de estar um local pouco comum, é possível buscar um termo no dicionário também pela barra verde que acompanha o scroll da página (vide acima). Ou seja, a ausência de um claro indicativo do mecanismo de busca no texto não impede a busca em si, mas impede que a ferramenta seja aproveitada e utilizada corretamente.

O caso do NYT (ou Como a correta utilização de affordances pode contribuir com a experiência do usuário)

A versão on-line do jornal The New York Times possui uma funcionalidade semelhante à descrita acima, com duas grandes e fundamentais diferenças:

1. Ela explora um comportamento comum do usuário na hora de pesquisar um termo ou trecho: o de selecionar o texto para replicá-lo numa ferramenta de busca;

2. Ao selecionar a palavra ou texto em questão, um pequeno ícone clicável de interrogação aparece no topo do texto selecionado. Clicando-se no ícone, uma nova janela abre com o resultado da pesquisa.

Como bônus, é possível ainda, dentro da nova página, selecionar onde você deseja pesquisar aquele termo (no Google, no Answers.com ou ainda nos arquivos no próprio NYT)

Exemplo da ferramente de busca do New York TImes em funcionamento

Exemplo da ferramente de busca do New York TImes em funcionamento

Página de busca do New York Times, acionada pelo mecanismo do testo.

Strauss-Kahn (notório e, aparentemente, injustiçado safado), impressionado pela página de busca do NYT

O ícone não tem mais do que alguns pixels de tamanho, mas seu rótulo (um emblemático “?”) e o momento e a localização nos quais aparece fazem toda a diferença entre o sucesso desta ferramenta e o fracasso da outra (Jusbrasil) na promoção de uma melhor experiência para seus respectivos usuários.

 

 

Anúncios
Esse post foi publicado em Design de Interação, Experiência do Usuário e marcado , . Guardar link permanente.

3 respostas para Affordances no Design de Interação

  1. gutierres disse:

    fantastico Jowgão!
    esses detalhes fazem toda a diferença mesmo e muitas vezes sao esquecidos no meio do caminho! continue com esse blog, rapaz! nao vou muito atras desse tema e por eqto aprendi algumas coisinhas por aqui!bjoka negao

  2. Grande post Diogo. Favoritado o blog 😉

  3. Pingback: Affordances, os passageiros e o ponto de ônibus: uma história real | Modelo Mental

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s