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.