Guia Rápido de Usabilidade – Vol. 1/ 3

10 Descobertas de

Usabilidade

Organizado por

Wérmeson da S. Lopes

Sumário

Apresentação ....................................................................................................................... 5

10 Descobertas de Usabilidade ........................................................................................... 6

❶ Rótulos são melhores sobre os campos ......................................................................... 7

❷ Usuários focam em faces ................................................................................................ 8

❸ Qualidade no design é indicador de credibilidade ......................................................... 9

❹ A maioria dos usuários não rola a página ..................................................................... 10

❺ Azul é a cor certa para links ......................................................................................... 12

❻ O tamanho ideal do campo de busca é 27 caracteres ................................................. 13

❼ Espaços em branco melhoram a compreensão ........................................................... 14

❽ Testes de usuários efetivos não têm de ser extensos .................................................. 15

❾ Páginas de informações de produtos ajudam você a se destacar ................................ 16

❿ A maioria dos usuários está preparada para os anúncios ............................................. 17

Referências ......................................................................................................................... 18

Apresentação

Você com certeza já ouviu ou leu sobre usabilidade em algum lugar. Trata-se de um

conjunto de diretrizes que auxiliam no desenvolvimento de várias aplicações e websites.

Se você está procurando um guia rápido para embarcar ou mesmo revisar sobre

usabilidade na web, então com certeza esta obra foi feita para você.

Dividida em três fascículos, estes guias mostrarão dicas e diretrizes muito importantes

para que sua aplicação web possa oferecer uma melhor experiência para seus visitantes.

Neste primeiro contato iremos abordar uma tradução do artigo 10 Useful Usability

Findings and Guidelines, que nada mais são que 10 descobertas que vão turbinar a

usabilidade em seus websites.

Vamos nessa?

6 | P á g i n a

10 Descobertas de Usabilidade

Todo mundo concorda que usabilidade é um aspecto importante do Web design. Se você

está trabalhando em um website, loja online, ou mesmo em um aplicativo Web e você

quer que suas páginas sejam fáceis e até divertidas, então usabilidade é a palavra chave.

Muitas pesquisas vêm sendo feitas e suas descobertas são imensamente valiosas ajudando

muito a melhorar nosso trabalho. Logo, aqui estão 10 diretrizes e descobertas de

usabilidade bastante úteis que podem ajudar você a melhorar a experiência do seu

visitante.

| 7 P á g i n a

❶ Rótulos são melhores sobre os campos

Um estudo da UX Matters1 descobriu que a posição ideal para se colocar os rótulos2 no

formulário é justamente acima dos campos. Em muitos formulários os rótulos são

colocados à esquerda dos campos criando um layout de duas colunas; por mais que isso

pareça bom, esse não é o layout mais fácil para se usar.

O porquê disso? Porque geralmente os formulários são orientados verticalmente e os

usuários o preenchem de cima pra baixo. Os usuários leem um formulário de uma forma

contínua, e seguindo do rótulo para o campo é mais fácil do que encontrar o campo à

direita do rótulo.

Posicionar rótulos na esquerda também causa outro problema: você os alinha para a

direita ou para a esquerda? O alinhamento à esquerda torna seu formulário escaneável3,

mas separa os rótulos dos campos, dificultando a visão de qual rótulo pertence a qual

campo. Já o alinhamento à direita faz o inverso: faz parecer bonito, mas um formulário

menos escaneável.

Rótulos sobre campos funcionam melhor na

maioria das circunstâncias. O estudo

também acha que os rótulos não devem

estar em negrito, embora esta não seja uma

recomendação definitiva.

1 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 2 Entenda rótulo como o elemento <label> do HTML. 3 Quando dizemos que algo é escaneável, dizemos que este algo é fácil de ler rapidamente com apenas uma olhadela.

Figura 1. O Tumblr utiliza um simples e elegante formulário de cadastro que adere às recomendações da UX Matters.

8 | P á g i n a

❷ Usuários focam em faces

Nós institivamente e imediatamente notamos outras pessoas quando elas surgem em

nossa vista. Nas páginas web nós também temos essa mesma tendência, focando nos

olhos e faces de pessoas, o que nos dá uma ótima técnica para atrair atenção. Mas essa

atração é apenas o começo; ela acaba nos dando uma olhadela na direção da

personalidade da imagem, nos dando uma visão de “com quem parece” (alguém próximo

ou algum famoso) ou “com o que parece” (algum sentimento que nos é transmitido).

Segundo um estudo com eye-tracking4 nós sempre estamos observando as faces, tanto é

que quando alguma face está olhando para algum lugar diferente de nós, acabamos

olhando para aquela direção institivamente. Obtenha vantagem com esse fenômeno

guiando a atenção de seus visitantes para as áreas mais importante de sua página ou de

sua propaganda.

Figura 2. Bebé olhando para o visitante.

O primeiro mapa de calor é de um bebé olhando para o visitante. Na outra imagem ele

está olhando para o conteúdo. Perceba o incremento de visualizações no título e corpo de

texto.

4 Estudo de eye-tracking é um estudo que analisa para onde nossa visão foca mais. Fonte: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

Figura 3. Bebé olhando para conteúdo.

| 9 P á g i n a

❸ Qualidade no design é indicador de

credibilidade

Vários estudos têm sido conduzidos para encontrar o que influencia nas pessoas a

percepção de credibilidade dos websites. Um ponto interessante destes estudos é que

realmente os visitantes julgam um livro pela capa... ou neste caso, um website pelo seu

design.

Elementos de layout, consistência, tipografia, cor e estilo afetam a maneira como os

visitantes percebem seu website e que tipo de imagem seu projeto transmite.

Lembrando que seu website não deve projetar apenas uma boa imagem, mas também

possuir consistência e conteúdo para sua audiência.

Outros fatore que influenciam na

credibilidade são:

Qualidade do conteúdo

Média de erros

Taxa de atualizações

Facilidade de uso

Figura 4. Não sabemos se o aplicativo Fever é bom, mas a interface e o website bem feitos causam boa impressão.

10 | P á g i n a

❹ A maioria dos usuários não rola a página

Um estudo feito por Jakob Nielsen 5(em) sobre o quanto os visitantes rolam em websites

revelou que apenas 23% rolam na sua primeira visita em um site. Isso significa que 77%

dos visitantes não querem rolar; eles apenas veem o conteúdo sobre a dobra (que é a

área da página que é visível na tela sem rolar para baixo). Tem mais, a percentagem de

usuários que rola em suas visitas subsequentes diminui, sendo apenas 16% em sua

segunda visita. Esses dados destacam o quão importante é pôr seu conteúdo chave em

uma posição evidente, especialmente em páginas que mereçam mais destaque.

Isto não significa que você deveria abarrotar tudo na área superior de sua página, e sim

que você deveria fazer melhor uso desta área. Preenchê-la com muito conteúdo fará

com que ela fique inacessível. Quando os visitantes veem muita informação, eles não

sabem por onde começam a ler.

Isto se torna mais importante na página

inicial, onde a maioria de novos

usuários chegam. Então ofereça o

principal:

Nome do site

O valor que seu site tem (o

benefício que os usuários terão nele)

Barra de navegação para as

principais seções do website

Contudo, os hábitos de usuários têm mudado significativamente. Estudos recentes

comprovam que os usuários estão um pouco mais confortáveis com a rolagem de página

e em algumas situações eles até rolam a página para baixo. Muitos deles estão mais

confortáveis desde que haja uma paginação, e para muitos deles a maioria das

5 Prioritizing Web Usability: http://www.nngroup.com/books/prioritizing-web-usability/

Figura 5. O Basecamp mostra imagem do sistema, título, oferta, cientes, vídeo, e até uma lista de características do sistema. Um bom exemplo.

| 11 P á g i n a

informações importantes não estão necessariamente “sobre a dobra” (devido à variedade

de resoluções de telas disponíveis), fazendo deste tópico algo um pouco ultrapassado. É

uma boa ideia dividir seu layout em seções para fácil escaneamento, separando-as com

muitos espaços brancos.

Para ficar por dentro das tendências de rolamento, cheque os artigos Unfolding the fold6

e Blasting the Myth of the Fold7.

6 http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ 7 http://boxesandarrows.com/blasting-the-myth-of-the-fold/

12 | P á g i n a

❺ Azul é a cor certa para links

Você pode criar um design único para seu website, contanto que ele atenda aos padrões

de usabilidade, fazendo o que todos os outros também fazem. Siga convenções, porque

quando as pessoas visitam um website novo, elas primeiramente procuram por coisas

que estão em locais que elas já estão acostumadas a procurar em outros websites; elas se

baseiam em suas experiências para trazer sentido à um novo design. As pessoas sabem

como identificar padrões. Elas certamente supõem que as coisas são sempre as mesmas,

assim como as cores de links, a localização de uma logo, o comportamento de uma barra

de navegação, e assim por diante.

De que cor seus links podem ser? A

primeira consideração é o contraste:

links têm de ser escuros (ou claros)

suficientemente para contrastar com

a cor de fundo. A segunda é que as

cores deveriam se destacar em meio

ao texto; então, nada de links pretos

com texto preto. E finalmente, os

links de resultados de pesquisas, caso

a usabilidade seja uma prioridade,

deveriam optar pela cor azul. A cor padrão de qualquer link nos navegadores é azul,

sendo assim as pessoas normalmente esperam isso. Escolher uma cor diferente não é um

problema, mas pode afetar a velocidade de compreensão dos visitantes para identificar os

links.

Figura 6. O Google mantem os links em azul porque a cor é familiar, o que facilita a identificação.

| 13 P á g i n a

❻ O tamanho ideal do campo de busca é 27

caracteres

Qual o tamanho ideal para o campo de busca8? Há algum? Jakob Nielsen fez um estudo

que aborda o tamanho das pesquisas feitas nos campos de busca. Ele mostra que a

maioria dos atuais campos de busca são muito curtos. O problema com campos assim é

que você pode digitar uma pesquisa com muitos caracteres e apenas uma parte do texto

ficará visível no momento, dificultando a revisão ou edição do que foi digitado.

Foi encontrada uma média de tamanho de 18 caracteres nos campos de pesquisa. Os

dados mostraram que 27% das consultas são muito extensas para caberem ali dentro.

Estendendo esse tamanho para 27 caracteres podemos acomodar 90% das consultas.

Lembrando que você pode fazer a largura desses campos usando a unidade de medida

em, e não apenas pixels e pontos. Um em é a largura e altura de um caractere “m”

(usando o tamanho de fonte do elemento pai). Então, use esta unidade para escalar a

largura dos campos de entrada de texto para 27 caracteres de extensão.

Em geral, caixas de pesquisa são melhores muito largas do que muito curtas, assim

visitantes podem rapidamente revisar, verificar e enviar a consulta. Esta diretriz é muito

simples, mas infelizmente pouco disseminada ou ignorada. Algum espaço interno nos

campos de entrada pode também melhorar o design e a experiência do usuário.

8 Entenda campo de busca como o elemento <input type=”search”> do HTML, ou seja, é a caixa de texto para se fazer pesquisas em sites.

Figura 7. A caixa de busca do Google é longa o suficiente para acomodar extensas sentenças.

Figura 8. A caixa de busca da Apple é um pouco curta e cobre parte da consulta com a palavra Microsoft Office 2008.

14 | P á g i n a

❼ Espaços em branco melhoram a compreensão

A maioria dos designers sabe o valor do espaço branco, que é o espaço vazio entre

parágrafos, imagens, botões e outros itens de página. Podemos agrupar itens diminuindo

ou aumentando o espaço entre eles ou outros itens na página. Isto é importante para

mostrar as relações entre os itens (ex. mostrando que um botão atende a um dado grupo

de itens) e construir a hierarquia entre os elementos na página.

Espaço branco também torna o

conteúdo mais legível. Um estudo

(Lin, 2014) descobriu que o bom uso

do espaço entre parágrafos e nas

margens esquerda e direita

incrementa a compreensão numa

média de 20%. Os leitores acharam

mais fácil focar e processar o

conteúdo espaçado.

De fato, segundo Chaperro, Shaikh e

Baker, o layout numa página web

(incluindo espaço branco, cabeçalhos, indentação e imagens) pode não influenciar na

performance, mas influencia na satisfação e experiência do usuário.

Figura 9. Note o uso de espaços brancos no The Netsetter. Isso torna o conteúdo fácil e confortável para ler.

| 15 P á g i n a

❽ Testes de usuários efetivos não têm de ser

extensos

O estudo de Jakob Nielsen9 sobre o número ideal de testadores em testes de usabilidade

encontrou que testes com apenas cinco usuários já revelam 85% de todos os problemas

com seu website, tanto quanto 15 usuários também encontravam.

Os grandes problemas são normalmente encontrados por um ou dois usuários, os

seguintes testadores confirmam esses problemas e descobrem os menos remanescentes.

Apenas dois testadores encontrariam metade dos problemas em seu website. Isto

significa que os testes não precisam ser extensos ou caríssimos para obter bons

resultados. A maior vantagem é quando são utilizados de 0 a 1 testador, então não tenha

medo de fazer algo “pequeno”: algum teste é melhor que nenhum.

9 http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

16 | P á g i n a

❾ Páginas de informações de produtos ajudam

você a se destacar

Se seu website possui páginas de produtos, muitas pessoas que compram online com

certeza irão procurar por elas. Mas muitas páginas de produtos carecem de informação

suficiente, até mesmo para os visitantes fazerem uma rápida verificação do produto ou

serviço. Este é um problema sério, pois as informações do produto ajudam as pessoas a

tomarem decisões na hora da compra. A pesquisa mostra que a escassez de informações

do produto é responsável por cerca de 8% dos problemas de usabilidade e até 10% de

falha do usuário (ou seja, o usuário desiste e deixa o site).

Forneça informações detalhadas

sobre seus produtos, mas não caia

na armadilha de bombardear seus

visitantes com muito texto. Torne a

informação fácil de digerir. Faça a

página ser escaneável. Adicione

imagens abundantemente de seu

produto, e use a linguagem certa:

não use jargões que os visitantes

possam não entender.

Figura 10. A Apple oferece as páginas de especificações separadas por produtos, o que mantém os detalhes complicados mais afastados e o design mais limpo, sendo que ela também oferece acesso fácil à estas informações caso o visitante solicite.

| 17 P á g i n a

❿ A maioria dos usuários está preparada para os

anúncios

Jakob Nielsen relata em seu estudo AlertBox10 que a maioria dos usuários são cegos aos

banners. Se eles estão à procura de uma informação ou estão concentrados em algum

conteúdo, eles não vão se distrair com os anúncios na lateral ou em qualquer lugar que

estejam.

A implicação disso é que não só os usuários vão evitar anúncios, mas que eles também

vão evitar qualquer coisa que se parece com um, mesmo que não seja um anúncio.

Alguns itens de navegação estilos demais podem ser parecidos com banners, por isso

tome cuidado com esses elementos.

Sendo assim, os anúncios que se

parecem com o conteúdo tem mais

facilidade de serem vistos e clicados.

Isto pode gerar mais receita

publicitária, mas está no custo de

confiança dos seus usuários, uma

vez que clicam em coisas que se

parecem com conteúdo genuíno.

Antes de seguir esse caminho,

considere o trade-off: a curto prazo

das receitas contra a confiança a

longo prazo.

10 http://www.nngroup.com/articles/banner-blindness-old-and-new-findings/

Figura 11. Os banners quadrados na barra lateral do FlashDen não são anúncios: são links de conteúdo. Mas por serem parecidos com anúncios acabam sendo ignorados pelos visitantes.

18 | P á g i n a

Referências

FADEYEV, Dmitry.10 Useful Usability Findings and Guidelines. Freiburg: Smashing

Magazine, 2009.

20 | P á g i n a