Todos concordam que a usabilidade é um aspecto importante do Web design. Se você está trabalhando em um site do tipo portfólio, loja online ou aplicativo Web, tornando suas páginas de fácil e agradável navegação para seus visitantes a usabilidade é fundamental. Muitos estudos têm sido feitos ao longo dos anos sobre vários aspectos de Web e design de interface, e os resultados são valiosos para nos ajudar a melhorar o nosso trabalho. Aqui estão 10 dicas úteis de usabilidade que podem ajudar a melhorar a experiência do usuário em seu site.
1. A Melhor Forma de Trabalhar com Labels é Acima do Campo
Um estudo realizado pela UX Matters considerou que a posição ideal para laebls em formulários está acima dos campos. Em muitas formas, os labels são colocados à esquerda dos campos, a criação de um layout de duas colunas, apesar de parecer bom, não é o layout mais fácil de usar. Por que isso? Como os formulários são geralmente orientados verticalmente, os usuários preenchem o formulário de cima para baixo. E seguindo o label campo abaixo é mais fácil do que encontrar o campo à direita.
Tumblr possui um simples e elegante-se formulário que segue a recomendação UX Matter.
Label com posicionamento a esquerda também representa outro problema: você alinha à esquerda ou a direita os seus labels? alinhamento esquerdo faz com que o formulário seja lido mas desconecta os labels dos campos, o que torna difícil ver qual label se aplica a qual campo. Alinhando-se a direita inverte: Contribui para uma boa aparência, mas de forma menos legível. Labels acima dos campos funcionam melhor na maioria das circunstâncias. O estudo também descobriu que os labels não devem ser ousados, embora essa recomendação não é conclusiva.
2. Usuários Focam em Rostos
Pessoas instintivamente identificam outras pessoas imediatamente. Em páginas da Web, tendemos a focalizar os rostos das pessoas e nos olhos, o que dá uma boa técnica de marketing para atrair a atenção. Mas a nossa atração para os rostos das pessoas e dos olhos é apenas o começo; desejamos olhar realmente no sentido em que a pessoa da imagem está olhando.
Eye-tracking: mapa de calor de um bebê olhando diretamente para nós, a partir do estudo UsableWorld.
E agora o bebê está olhando para o conteúdo. Observe o aumento de pessoas olhando para o título e texto.
Aqui está o estudo eye-tracking que demonstra isso. Estamos instintivamente atraídos para rostos, mas se esse cara está procurando algum lugar diferente de nós, vamos também olhar nessa direção. Tire proveito desse fenômeno, chamando a atenção dos usuários para as partes mais importantes da sua página ou anúncio.
3. Qualidade do Design é um Indicador de Credibilidade
Vários estudos têm sido realizados para descobrir exatamente o que influencia a percepção das pessoas sobre a credibilidade de um site:
Não sabemos se a aplicação do Fever app é boa, mas a interface do usuário elegante do site traz uma grande primeira impressão.
Um dado interessante desses estudos é que os usuários realmente julgam um livro pela capa… ou melhor, um site pelo seu design. Elementos tais como layout, a coerência, a tipografia, a cor e o estilo de todos afetam a maneira como os usuários percebem o seu site e que tipo de imagem terão de seu projeto. Seu site não deve apenas passar uma boa imagem, mas também o caminho certo para o seu público.
4. A Maioria dos Usuários Não Usam Rolagem
Um estudo de Jakob Nielsen sobre o quanto os usuários usam rolagem (priorizando a Usabilidade Web) revelou que apenas 23% dos visitantes usam a rolagem em sua primeira visita a um site. Isto significa que 77% dos visitantes não irá rolar, eles vão apenas visualizar o conteúdo acima da dobra (ou seja, a área da página que está visível na tela sem rolagem para baixo). Além do mais, o percentual de usuários que rolam a página diminui com visitas subsequentes, com apenas 16% em sua segunda visita. Esses dados enfatizam o quão importante é colocar o seu conteúdo-chave em uma posição de destaque, especialmente na página principal.
Isso não significa que você deve entupir tudo na área superior da página, basta que você faça o melhor uso desse espaço. Entupir com conteúdo fará apenas o conteúdo inacessível, quando o usuário vê muita informação, não sabe por onde começar a procurar.
Basecamp faz bom uso do espaço. Acima da dobra (768 pixels de altura), ele mostra uma tela grande, proposição de valor, chamada à ação, lista de clientes, vídeos e lista curta de imagens.
Isso é muito importante para a página inicial, onde a maioria dos visitantes irá chegar. Portanto, forneça os elementos essenciais lá:
- Nome do Site;
- Valor Proposto pelo Site (isto é, como os usuários se beneficiam ao usá-lo);
- Navegação para as principais seções do site que são relevantes para o usuário.
No entanto, os hábitos dos usuários mudaram significativamente desde então. Estudos recentes comprovam que os usuários são muito confortáveis com a rolagem e em algumas situações estão dispostos a rolar para o final da página. Muitos usuários estão mais confortáveis com a rolagem do que com uma paginação, e para muitos usuários a informação mais importante da página não é necessariamente colocado “acima da dobra” (que é por causa da variedade de resoluções de exibição disponíveis um termo bastante ultrapassada, obsoleta ). Por isso, é uma boa idéia dividir o layout em seções para facilitar a digitalização, separando-os com um monte de espaço em branco.
Para mais informações, por favor dê uma olhada nos artigos Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – sURL), Blasting the Myth of the Fold (Boxes and Arrows). (obrigado, Fred Leuck).
5. Azul é a Melhor Cor Para Links
Embora dar ao seu projeto um layout único, quando se trata de usabilidade, fazer o que todo mundo está fazendo é o melhor. Siga as convenções, porque quando as pessoas visitam um novo site, o primeiro lugar que vão olhar é para as coisas que estão nos lugares onde eles encontram na maioria dos outros sites, eles usarão de sua experiência para dar sentido a este novo conteúdo. Isso é conhecido como padrões de uso. As pessoas esperam que certas coisas sejam o mesmo, como as cores dos links, a localização do logotipo do site, o comportamento de navegação com guias e assim por diante.
O Google mantém todos os links em seus sites azul por uma razão: a cor é familiar para muitos usuários, o que torna mais fácil de localizar.
Que cor deve ter os seus links? A primeira consideração é o contraste: links têm que ser escuro (ou claro) o suficiente para contrastar com a cor de fundo. Em segundo lugar, eles devem se destacar da cor do resto do texto, por isso, não usem links preto com texto em preto. E, finalmente, a pesquisa mostra (Van Schaik e Ling) que, se a usabilidade é a sua prioridade, usando o azul para os links é melhor. A cor padrão do navegador para link é azul, então as pessoas esperam isso. Escolher uma cor diferente de modo algum é um problema, mas pode afetar a rapidez com que os usuários achem.
6. O Ideal Para Caixa de Pesquisa são 27 Caracteres de Largura
Qual é a largura ideal de uma caixa de pesquisa? Existe uma coisa dessas? Jakob Nielsen realizou um estudo de usabilidade no comprimento de caixas de pesquisa do site (priorizando Usabilidade Web). Acontece que a maioria das caixas de pesquisa de hoje são demasiadamente curtas. O problema com caixas curtas é que mesmo que você possa digitar uma consulta longa, apenas uma parte do texto vai ser visível em uma hora, o que torna difícil para rever ou editar o que você digitou.
O estudo constatou que a caixa de pesquisa média é de 18 caracteres de largura. Os dados mostraram que 27% das consultas eram demasiadamente longas para caber dentro dele. Estendendo a caixa para 27 caracteres se atende 90% das consultas. Lembre-se, você pode definir larguras usando ems, não apenas pixels e points. Um “em” é a largura e altura de um caractér “m” (usando qualquer tamanho da fonte o site também usará). Então, use essa medida para dimensionar a largura do campo de entrada de texto até 27 caracteres de largura.
A caixa de pesquisa da Apple é um pouco curta demais, cortando a consulta, "Microsoft Office 2008."
Em geral, as caixas de pesquisa são melhores compridas do que curtas, de modo que os usuários podem rapidamente analisar, verificar e submeter à consulta. Esta orientação é muito simples, mas, infelizmente, muitas vezes rejeitada ou ignorada. Alguns preenchimentos no campo de entrada também pode melhorar o design e experiência do usuário.
7. Espaço em Branco Melhora a Compreensão
A maioria dos designers sabem o valor do espaço em branco, que é o espaço vazio entre os parágrafos, imagens, botões e outros itens na página. O espaço em branco ordena uma página dando espaço para os itens respirarem. Nós também podemos agrupar itens, diminuindo o espaço entre eles e aumentando o espaço entre eles e outros itens na página. Isso é importante para mostrar as relações entre os itens (por exemplo, mostrando que este botão aplica-se a este conjunto de itens) e a construção de uma hierarquia de elementos na página.
Observe a grande margem de conteúdo, preenchimento e espaçamento sobre o Netsetter. Todo o espaço que torna o conteúdo fácil e confortável para ler.
O espaço em branco também torna o conteúdo mais legível. Um estudo (Lin, 2004) descobriu que o bom uso do espaço em branco entre parágrafos e nas margens esquerda e direita aumenta a compreensão em quase 20%. Os leitores acham mais fácil se concentrar no processo e conteúdo generosamente espaçadas.
De fato, de acordo com Chaperro, Shaikh e Baker, o layout de uma página Web (incluindo espaços em branco, cabeçalhos, recuo e números) não podem influenciar o desempenho mensurável, mas não influenciam a satisfação do usuário e experiência.
8. Um Teste De Usuário Eficaz Não Tem Que Ser Extenso
Um estudo de Jakob Nielsen sobre o número ideal de cobaias de testes de usabilidade mostra que os testes com apenas cinco usuários revelaria cerca de 85% de todos os problemas com o seu site, enquanto que 15 usuários se encontraria praticamente todos os problemas.
Fonte: Jakob Nielsen’s AlertBox
Os maiores problemas normalmente são descobertos pelo primeiro ou segundo usuário, e os testadores seguintes confirmam estas questões e descobrem as restantes de menor importância. Apenas dois usuários de teste, provavelmente encontraria a metade dos problemas em seu site. Isto significa que o teste não tem de ser extensivo ou caro para produzir bons resultados. Os maiores ganhos são obtidos quando se passa de zero usuários de teste para um, por isso não tenha medo de fazer muito pouco: qualquer teste é melhor do que nada.
9. Páginas Informativas Ajudam a Destacar seu Produto
Se seu site tem páginas de produto, as pessoas que compram on-line definitivamente querem vê-los. Mas as páginas de muitos produtos não dispõem de informações suficientes, mesmo para os visitantes fazerem uma verificação rápida. Este é um problema grave, porque a informação de produto ajudam as pessoas a tomarem a decisão de compra. A pesquisa mostra que produtos com informação pobres são 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) (Priorizando Usabilidade Web).
A Apple fornece separado páginas de "Especificações técnicas" para seus produtos, e mantém os detalhes complicados longe das páginas mais simples de marketing, mas proporciona acesso fácil quando eles são necessárias.
Forneça informações detalhadas sobre seus produtos, mas não caia na armadilha de bombardear usuários com muito texto. Torne a informação mais fácil de digerir. Torne a página agradável e divida o texto em segmentos pequenos e com abundância de sub-títulos. Adicionar abundância de imagens para o seu produto, e usar a linguagem certa: não usar jargão que os visitantes podem não entender.
10. A Maioria Dos Usuários Estão Cegos Para Publicidade
Jakob Nielsen relata em sua pesquisa Alertbox que a maioria dos usuários são essencialmente cegos para banners. Se eles estão procurando um trecho de informação em uma página ou são absorvidos pelo conteúdo, eles não vão se distrair com os anúncios na lateral.
A implicação disso é que os usuários não apenas irão evitar os anúncios, mas que eles vão evitar qualquer coisa que se pareça com um anúncio, mesmo se não seja um anúncio. Alguns itens de navegação muito estilosos pode ser parecidos com banners, deve-se ter cuidado com esses elementos.
Os banners quadrado na lateral esquerda do FlashDen não são realmente anúncios: eles são links de conteúdo. Eles se parecem muito próximas à banners e isso pode ser ignorado por alguns usuários.
Dito isto, os anúncios que se parecem com conteúdo irão levar as pessoas a clica-los. Isso pode gerar mais receita publicitária, mas existe o custo de perda de confiança dos seus usuários, ao clicar em coisas que achavam ser conteúdo genuíno. Antes de enveredar por esse caminho, considerar o fator: receitas de curto prazo versus confiança a longo prazo.
Bônus: Resultados de Nosso Estudo de Caso
Nos últimos anos, a equipe editorial do Smashing Magazine realizou uma série de estudos de caso em uma tentativa de identificar soluções de design e práticas comuns. Até agora, nós analisamos os formulários da Web, blogs, tipografia e carteiras, e mais estudos de caso serão publicados no próximo mês. Nós encontramos alguns padrões interessantes que poderiam servir como diretrizes para o seu próximo projeto.
Aqui, vamos rever algumas das práticas e padrões de projeto que descobrimos em nossos estudos de caso nesta visão geral breve e compacta, para sua conveniência.
Segundo nosso estudo de tipografia:
- Altura da Linha (em pixels) ÷ tamanho da fonte (em pixels) = 1,48
1,5 geralmente é recomendada em livros clássicos tipográfico, e o nosso estudo confirma essa regra. Muito poucos sites usam nada menos do que isso. E o número de sites que passar por cima de 1,48 diminui à medida que você começa mais a partir deste valor.
- Comprimento de linha (pixels) ÷ altura da linha (pixels) = 27,8
O comprimento da linha média é de 538,64 pixels (excluindo margens e enchimento), que é bastante grande, considerando que muitos sites ainda tem de 12 a 13 pixels em tamanho de fonte.
- Espaço entre parágrafos (pixels) ÷ altura da linha (pixels) = 0,754
Acontece que o espaçamento entre parágrafos (ou seja, o espaço entre a última linha de um parágrafo e a primeira linha da próxima) raramente é igual ao principal (o que seria a principal característica do ritmo vertical perfeito). Mais frequentemente, espaçamento entre parágrafos é apenas 75% do ponto principal. A razão pode ser que o líder geralmente inclui o espaço ocupado por descendentes, e porque a maioria dos personagens não tem descendentes, espaço em branco adicional é criado sob a linha.
- O número ideal de caracteres por linha é de 55 a 75
Segundo o clássico livro tipográfico, o número ideal de caracteres por linha é entre 55 e 75, mas entre 75 e 85 caracteres por linha é mais popular na prática.
De acordo com nosso estudo de design de blogs:
- Layouts geralmente têm uma largura fixa (pixel-based) (92%) e são geralmente centrada (94%). A largura de layouts fixos varia entre 951 e 1000 pixels (56%)
- A página principal mostra trechos de 10 a 20 posts (62%).
- 58% do total de layout de um site é usado para exibir o conteúdo principal.
Segundo nosso estudo de design de formulário Web:
- O link de cadastro intitula-se “inscrever” (40%) e é colocado no canto superior direito.
- Formulários de Inscrição têm layouts simples, para evitar confundir os usuários (61%).
- Títulos de campos de entrada estão em negrito (62%), e os campos são dispostas verticalmente mais do que eles estão dispostos horizontalmente (86%).
- Designers tendem a incluir alguns campos obrigatórios e alguns campos opcionais.
- Confirmação de e-mail não é exibida (82%), mas a confirmação de senha é (72%).
- O botão “Enviar” ou é alinhado à esquerda (56%) ou centralizado (26%).
De acordo com nosso estudo de sites de portfólio:
- 89% dos layouts são centrados horizontalmente, e a maioria deles tem um grande menu de navegação horizontal.
- 47,2% dos portfólios tem a página do cliente, e 67,2% têm algum tipo de página de serviços autônomos.
- 63,6% têm uma página detalhada para cada projeto, incluindo estudos de caso, depoimentos, apresentações de slides com imagens, rascunhos e esboços.
- Páginas de Contato contêm instruções de número de telefone, endereço de e-mail, endereço postal, vCard e formulário on-line.
Este Post é uma tradução do original: 10 Useful Usability Findings and Guidelines
Sempre existiu diversas formas de saber a localização física do usuário através de sites que prestavam este serviço e claro, os mais eficientes eram pagos e a integração (ao menos dos que testei) eram horríveis.
