Saiba qual a relação entre usabilidade na web e o design

Recentemente, publiquei esse artigo aqui no blog do Inbound para te mostrar que o bom design tem uma importância fundamental em todas as fases da jornada do consumidor no Inbound Marketing.

Também te apresentei alguns exemplos de um layout robusto nas diferentes plataformas trabalhadas durante a metodologia.

Além disso, comentei também durante o texto que a usabilidade é igualmente um fator primordial na experiência do usuário em todos os momentos, mas principalmente no website, que é a vitrine da sua agência ou empresa para o público, a porta de entrada de qualquer estratégia de marketing.

Sendo assim, esse artigo vai se aprofundar um pouco mais no tema usabilidade na web e complementar o post anterior, reforçando o quanto esse tema também é importante e deve andar junto com o bom design. Fique comigo nas próximas linhas e você vai entender:

  • O que é usabilidade
  • As interfaces e suas aplicações
  • Como e porque fazer testes de usabilidade
  • Os benefícios que as técnicas de usabilidade trazem ao ambiente digital
  • Qual é, de fato, sua importância online

Vamos nessa?

Usabilidade na web: o conceito

O conceito de usabilidade na web

 

O termo usabilidade tem uma definição bem ampla, mas, considerando o ambiente virtual (foco desse artigo), refere-se à interação do ser humano com o computador (IHC) e a ergonomia envolvida nesse contato. Dessa forma, está relacionada com a simplicidade e facilidade com que o usuário conversa com a máquina e com as tecnologias envolvidas. Por isso também pode ser extendida a aplicativos móveis, softwares e demais gadgets.

Logo, o papel do design é vital aqui, pois somente um layout amigável e limpo vai garantir que essa relação entre o homem e o computador seja a mais fluida possível. Se o design for direto e simples, ele destacará o conteúdo, facilitando o uso do site ou da interface. Portanto, se a aparência agradar ao usuário, ele com certeza voltará.

As interfaces e suas boas práticas

Assim como o webdesign, a facilidade de utilização digital também passa por diversos meios como:

  • Websites e blogs
  • Mobile
  • Landing page
  • Mídias digitais
  • E outros formatos

Para cada um desses espaços, aplicam-se regras e interações diferentes, apesar de existirem considerações gerais, e é exatamente por isso que precisamos entender na prática como os olhos humanos se relacionam em cada mídia.

Sites e Blogs

Esse é o principal objeto de estudo desse artigo, como disse na introdução, e representa a maior parte dos acessos à Internet. Segundo dados da Nielsen IBOPE e da NetView, em Janeiro desse ano, 54,1 milhões de pessoas acessaram portais durante o mês, o que corresponde a 76,2% do total de Internautas mensal.

Confira abaixo o infográfico completo:
Audiência na web

Steve Krug, em seu livro “Don’t make me think” (não me faça pensar), concluiu que em websites os usuários tendem a escanear a página em busca de informações que lhes são úteis. Eles não têm paciência e nem tempo de ler tudo da esquerda para a direita, de cima para baixo, como fazemos com um livro, por exemplo.

No meio online, as pessoas lêem de cima para baixo apenas, correndo o mouse  de forma rápida e constante, até o fim da página e voltando para o topo posteriormente. Então recomenda-se que o editor de um blog ou site coloque os itens e elementos importantes em local de destaque na página. Dessa forma, em sua varredura, a pessoa localizará mais fácil o que você quer mostrar.

Existe também duas regras simples que se aplicam bem aqui:

  1. A regra dos 3 segundos: em média, um site não deve demorar mais do que 3 segundo para carregar e abrir por completo. Caso isso aconteça com um tempo de 4 segundos, por exemplo, tem algo nele que faz com que esse tempo esteja elevado, como imagens em alta resolução, plugins muito pesados ou algum erro de programação.
  2. A regra dos 3 cliques: O usuário não deve ter que clicar mais de 3 vezes na tela para achar a informação que ele precisa. Isso se aplica muito bem a sites de e-commerce, por exemplo, que desejam vender determinados produtos.

Voltando à pesquisa de Steve Krug, ele faz a seguinte afirmação:

” (…) os usuários diante de várias opções, no lugar de analisá-las com calma e escolher a melhor, escolhem a opção que melhor se encaixe no menor tempo de análise”.

No exemplo abaixo, podemos ver o site da Apple, um exemplo de fluidez e clareza das informações, facilitando e muito a vida do usuário.

O site da Apple é exemplo de usabilidade.

Clareza e simplicidade destacam o conteúdo na homepage da Apple.

Mobile

O fluxograma mostra o escopo da usabilidade e o quanto ela se distancia ou não do UX design.

O fluxograma mostra o escopo da usabilidade e o quanto ela se distancia ou não do UX design.

Quando se fala em dispositivos móveis é natural pensar em experiência de usuário, o famosos User Experience (UX) design. Mas, a bem da verdade, são temas distintos com algum elemento em comum mas que seguem regras e princípios opostos. E justamente para deixar essas polêmicas de lado que prefiro levar essa discussão para um próximo post.

Por hora, vou focar nos principais pontos a considerar na tecnologia mobile, o que não significa ignorar completamente o UX, mas sim relacionar os dois de forma que você entenda.

Para ser responsivo, a primeira coisa que devemos observar é: não diminua  imagens a ponto de prejudicar a resolução. 

Outro ponto considerável é fornecer links clicáveis e não muito pequenos a fim de facilitar a visualização. Há de se apresentar uma hierarquia clara, escaneável e com um toque elegante, como você pode ver na versão desktop e mobile da homepage da Amazon.

A usabilidade na web tem que passar por uma hierarquia clara e objetiva.

E, assim como no caso dos sites e blogs, usuários mobile tendem a ler de cima para baixo, portanto é fundamental valorizar um template com coluna única ao invés de dupla, otimizando a varredura. Além disso, nesse formato você tem o controle total sobre o que a página está informando e concentra o leitor ali, não correndo o risco de ele dispersar com outras colunas.

Analise como isso funciona na real nessa versão mobile do site da Mashable:

A praticidade do usuário na experiência mobile.

Contudo, diferentemente do que ocorre com desktops, nos dispositivos móveis o público não escanea randomicamente, portanto o conteúdo tem que ser mais direto ao ponto, conciso, e de preferência abandonar qualquer publicidade, o que só aumentaria o tamanho da tela e comprometeria as imagens.

 

E por último, mas não menos importante, está a cor dos templates escolhidos. Elas devem ter um bom balanço com o tema selecionado para o site, mantendo a consistência. Aqui também há preocupações com o espaço dos botões de call-to-action, por exemplo, deixando um espaço em volta para, de certa forma, aproveitar qualquer variação no tamanho do mesmo, dependendo do browser utilizado.

Landing Pages

A maioria das regras mencionadas para os dispositivos acima também se aplica às landing pages. Contudo, existem aspectos bem peculiares que gostaria de deixar claro aqui em complemento ao que já falei no post anterior sobre o layout delas.

É importante omitir as navegações do topo e lateriais de sua página de captura a fim de evitar distrações e incômodo visual causado ao visitante que for preencher seus dados.

Uma outra dica seria deixar o formulário de preenchimento o menor e o mais objetivo possível, pois, além de não poluir o visual, vai deixar seu conteúdo mais atrativo e evitar que a pessoa abandone a página antes de preencher alguma coisa. Quanto menos tempo e menos informações forem fornecidas, melhor, pois normalmente tendemos a proteger nossos dados pessoais.

E para finalizar, mas não menos necessário, mantenha apenas um botão de chamada para ação. Vários botões com propósitos diferentes distraem o visitante e o afugentam do principal: preencher os dados pedidos.

Veja um exemplo abaixo de uma squeeze page completamente confusa, pois você não sabe para onde olhar de tanta informação presente nela.

Uma landing page confusa compromete a funcionalidade de tudo.

Testes de usabilidade: como, onde e por quê fazer?

Um exemplo de mapa de calor usado em testes de laboratório.

Um exemplo de mapa de calor usado em testes de laboratório.

Como qualquer outra estratégia digital, é preciso testar a facilidade com que o usuário interage com um site. Especialistas recomendam que essa análise seja feita no início de qualquer processo de desenvolvimento de sites para que qualquer problema possa ser solucionado antes do mesmo ir ao ar.

Leia um resumo dos principais testes:

  • Testes de laboratório: Reúne pessoas em uma espécie de laboratório, monitoradas por um especialista, para avaliar por onde seus olhos passam na tela com a ajuda de mapas de calor e outras ferramentas.
  • Hallway Testing: como o nome em Inglês sugere, são testes feitos com qualquer um que esteja passando no corredor a fim de verificar a experiência daquele indivíduo com o site em desenvolvimento.
  • Avaliação Heurística: é feita com um público alvo semelhante ao portal. Nele são feitos exames individuais através de sítios eletrônicos especializados como esse. O objetivo é ver como as pessoas interagem com um website ou aplicativo online, identificando possíveis erros e formas de melhoria.
  • Testes informais: é uma opção barata, por vezes gratuita, realizado no ambiente comum ao usuário. Pode-se até reunir um pequeno grupo de cidadãos e então mesurar os resultados das análises em conjunto.

Não se trata de um ser melhor ou pior do que o outro, tudo depende do orçamento disponível para isso e da disponibilidade das pessoas para realizarem esse trabalho. É como concluiu Steve Krug em seu estudo:

Testar, independente dos recursos envolvidos, é muito melhor do que nenhum teste.

Resumindo

Seja qual for o seu nicho de mercado, acredito que ficou claro para você o quanto a usabilidade na web atrelada a um bom layout fazem a diferença na experiência do usuário. E analisando, portanto, os principais elementos da estratégia Inbound, vimos que cada detalhe é importante para atrair o seu visitante para o seu negócio.

Dessa forma, fica evidente o importante papel da persona dentro de toda uma estratégia inbound, pois até mesmo em um formulário de captura confuso, um site que demora a carregar ou mal diagramado e uma falta de adaptabilidade ao mobile podem comprometer e muito o conteúdo que você transmite.

De nada adianta ter bons produtos, serviços e um conteúdo fabuloso se todas os seus pontos de contato com o visitante não são pensados em seus mínimos detalhes.

Então, para melhor compreensão das regras e dicas aqui contidas, recomendamos fortemente que você pratique tudo o que foi dito e volte para nos contar os resultados e, se no meio do caminho houver dúvidas, não hesite em nos procurar e veremos o que fazer por você.

Gostou do post? Compartilhe com seus amigos e curta nossas redes sociais para ficar por dentro dos nossos próximos conteúdos.