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ágina
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.
Página |7
❶ 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.
Figura 1. O Tumblr utiliza um simples e elegante formulário de cadastro que adere às recomendações da UX Matters. 1
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 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. 2
8|Página
❷ 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.
Figura 3. Bebé olhando para conteúdo.
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/
Página |9
❸ 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) 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.
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/
P á g i n a | 11
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 7
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ 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 Figura 6. O Google mantem os links em azul porque a cor é familiar, o que facilita a identificação.
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.
P á g i n a | 13
❻ 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.
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.
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.
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. Figura 9. Note o uso de espaços brancos no The Netsetter. Isso torna o conteúdo fácil e confortável para ler.
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.
P á g i n a | 15
❽ 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: 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.
não use jargões que os visitantes possam não entender.
P á g i n a | 17
❿ 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 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.
10
das receitas contra a confiança a longo prazo.
http://www.nngroup.com/articles/banner-blindness-old-and-new-findings/
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