A Usabilidade está completamente ligada à utilidade e ao propósito de cada elemento ou objetos que criamos. Na verdade a própria palavra já nos traz logo em mente o método como algo é usado, e nos remete diretamente à facilidade deste uso.
Há poucos dias, andava eu pesquisando sobre o assunto e vi este vídeo de Donald Norman: Obs: O vídeo tem legendas 🙂
[youtube https://www.youtube.com/watch?v=NK1Zb_5VxuM]
Posso dizer que não me seria necessário acrescentar mais nada neste momento, pois, assistindo ao vídeo, o leitor já está totalmente inteirado do que estou querendo mostrar, mas para não ficar vago o texto, vamos há alguns conceitos.
Affordances
O conceito de affordance(s) é:
Affordance é a qualidade de um objeto, ou de um ambiente, que permite que o indivíduo realize uma ação.
Já foi falado um pouco sobre isso neste post do Raphael Fabeni.
Em suma, podemos dizer que Affordance, é uma propriedade, ou uma característica de um determinado objeto ou elemento, que permita com que seu usuário possa realizar uma ação.
Tomemos como exemplo o vídeo acima.
Nele, Donald Norman nos mostra como ele pode utilizar um objeto de vários formas diferente, como, por exemplo o livro.
Você pode utilizar o livro para ler, ou simplesmente, cobrir-se da chuva com ele. Você pode também arrancar uma página dele e usar para escrever algo. (O livro é seu, utilize-o como quiser!)
Da mesma forma, em nossos sistemas, devemos tomar em consideração, que um elemento pode proporcionar diversas possibilidades de ações para o usuário, ou também pode ter apenas uma ação.
Indo um pouco além
Com os conceitos de affordances em mãos, vamos ao nosso real objetivo: Usabilidade.
É interessando pensarmos que, o usuário, mesmo não sendo tão experiente, sabe que um botão é para ser clicado e realizar determinada ação. Seja ela enviar um formulário, ou completar um cadastro em um site.
Então devemos em nosso Design, pensar de maneira que, um botão se pareça com um botão, e que as partes que são clicáveis em nosso sistema ou site, se diferencie da demais, como no exemplo à seguir:
Note que, no site do Wikipedia, todos os links estão em Azul, então é simples para o usuário perceber que em qualquer elemento azul no meio do texto em que ele clicar, será submetido à uma outra página falando algo sobre aquele assunto.
Em contrapartida, no site publico.pt temos vários links, porém estes não são tão perceptíveis. Eles estão: No título da notícia, no nome do autor e em vários outros elementos.
Chamamos o primeiro conceito de Affordance percebida, onde temos um elemento que você logo percebe sua utilidade e sabe que poderá realizar determinada ação. E o segundo de Affordance escondida, onde podemos realizar determinada ação, mas não percebemos logo de cara.
A melhor prática, é que você tenha quase sempre, Affordances Percebidas, para que o usuário identifique imediatamente a real utilidade para aquele elemento. Como é o caso do bootstrap, onde um botão realmente parece um botão, e logo da vontade clicar nele.
O usuário nem sempre usará da forma que esperamos
Como Donald Norman diz no vídeo, um mesmo objeto ou elemento pode ter Affordances que o Designer nunca imaginou.
Muitas vezes, desenvolvemos um elemento, ou até mesmo um sistema completo, com um propósito definido em nossa mente, ou pelo cliente que nos pediu esse determinado fim para o projeto. Porém, o usuário utiliza o sistema de formas que nunca imaginamos.
Como é o caso citado no post do Manoel Netto. Onde ele fala sobre o DropBox.
A real utilidade do DropBox é fornecer um espaço onde você fará backups de seus arquivos em nuvem para ter a segurança de que, se você perder este arquivo localmente, basta acessar sua conta no DropBox e baixar novamente o arquivo.
Simples e objetivo, mas o usuário às vezes nos surpreende.
Como o Manoel Netto explica, muitos usuários utilizam o DropBox como uma ferramenta para hospedar imagens e gerar links para utilizá-las em sites e sistemas. Ou até mesmo para hospedar um site!
São Affordances que a equipe por trás do DropBox talvez nunca tenha pensado, e que, pode abrir um novo horizonte de mercado à ser atacado, como por exemplo, uma ferramente voltada totalmente para hospedagem de imagens e sites!
Conclusão
Creio que não tenho mais nada à falar sobre o assunto, visto que a este ponto o leitor já deve ter entendido bem o que eu queria mostrar.
Pense nesta questão das Affordances, e passe a aplicar este conceito em seus elementos, para que estes, possam atrair à atenção do usuário para si.
E para finalizar, um slide falando um pouco mais sobre o tema:
Slide Affordances