Usabilidade Na Web – 11 Dicas Para Deixar Seu Site Incrível

Atualmente o termo usabilidade na web vem sendo cada vez mais divulgado.

Ter um site fácil de navegar é algo muito importante e que gera várias vantagens:

  1. Maior satisfação do público
  2. Capacidade de atingir mais pessoas
  3. Maior tempo de permanência em seu site

Essas são apenas algumas das vantagens.

Por isso, continue lendo esse artigo para aprender como melhorar a usabilidade de seu site e conseguir mais clientes.

O que é usabilidade na web?

O termo usabilidade na web é utilizado para descrever a facilidade em que um usuário consegue realizar determinada tarefa ou encontrar algo em um website. Quanto mais simples e eficiente o processo, melhor a usabilidade.

Esse conceito foi criado para tornar a internet algo universal.

Ou seja, mesmo se essa pessoa for portadora de alguma necessidade especial ou esteja sem o mouse para navegar, ela deve conseguir acessar o seu site.

Curiosidade: Caso você não queira aprender sobre o assunto, também pode contratar profissionais que trabalham com isso.

Utilize as dicas abaixo para melhorar a usabilidade de seu site.

1º Link Para Página Inicial No Logotipo

Link-para-página-inicial

A maioria das páginas de seu site devem ter um link para a página inicial.

As únicas exceções são as páginas de captura e páginas de venda.

Algumas dicas:

  1. Atualmente os usuários estão acostumados que ao clicarem no logo do site eles voltem para a página inicial, então o seu site não pode ser diferente neste requisito.
  2. Para facilitar ainda mais, também pode colocar um link para página inicial em seu menu principal.

Dessa maneira você vai ajudar os usuários que não sabem que a logo manda para a home de seu site.

Veja o exemplo aqui do trafegoblog.

link-para-home-2
Link no menu principal
link-para-home
Link na logo

Para verificar esse erro, faça o seguinte:

  • Clique na sua logo
  • Caso você seja direcionado para a página inicial está tudo certo, mas caso não aconteça nada coloque o link agora.

Ao arrumar este erro você provavelmente verá uma pequena diminuição na taxa de rejeição do seu site e um aumento no tempo de permanência do usuário.

2º Página 404 Personalizada

Erro-404-Página-não-encontrada

A maioria dos sites wordpress não cometem mais esse erro de usabilidade.

Mas caso o seu site cometa, você pode estar perdendo posições no Google por isso, pois é um fator de ranqueamento.

Caso a pagina de erro 404 do seu site não esteja personalizada você pode perder clientes e isso vai mostrar que o seu site não é profissional.

Para verificar esse possível erro, digite depois da url de seu site algo aleatório, como:

  • www.seusite.com/lajdhakjsd

Se aparecer uma página como essa, você deve arrumar imediatamente.

Pagina-404-não-personalizada
Página 404 não personalizada.

Caso você não seja programador, você pode fazer isso:

  • Peça para um programador fazer isso para você.
  • Troque de template (caso você use o wordpress)

A página 404 é uma página de erro que aparece quando a URL digitada pelo usuário não existe em seu site.

Aqui no blog, esse erro não está presente.

Página-de-erro-404

Existem algumas regras de usabilidade que podem te ajudar a criar uma página de erro 404 com uma qualidade muito maior.

  1. Colocar um campo de busca visível para o usuário.
  2. Ter uma mensagem mostrando que a página não foi encontrada e deixar opções para ir a outros lugares de seu site.
  3. Colocar o logo de seu site para que o usuário possa voltar para a página inicial de seu site.
  4. Tente deixá-la o mais parecido possível com as demais páginas do site.

Está sem ideias? Veja este artigo com 45 páginas de erro 404 incríveis.

3º Tratar o Usuário Como Uma Pesssoa Impaciente

Usuário-furioso

Isso vai te ajudar de várias maneiras:

  1. Vai simplificar ao máximo o caminho que o seu usuário deve percorrer para fazer algo.
  2. Vai criar textos mais bem formatados, como ensinado no artigo como escrever uma artigo para blog.
  3. Vai aumentar suas conversões, pois quanto menos cliques o usuário fizer para chegar ao seu objetivo maior a chance dele comprar algo seu.

Sempre imagine que ele está com pouco tempo em seu site.

Por isso, não quer ficar “batendo cabeça” para aprender as coisas.

Tente deixar tudo de uma maneira mais simplificada, retirando ao máximo as opções inúteis.

Facilitar ao máximo as ações em seu site .

Esse é uma dos objetivos quando se busca melhorar a usabilidade.

Para verificar se o seu site contém esse erro, verifique se para executar ações simples é necessário fazer muitas coisas.

Veja os exemplos do que deveria ser usado para determinadas ações:

  1. Comentar (nome, email, comentário e talvez o site)
  2. Cadastrar email para receber notícias (email, nome)
  3. Trocar senha (senha atual, nova senha, confirmar nova senha)

Além de aumentar a usabilidade, facilitar essas ações também vai aumentar as conversões de seu site.

Por exemplo, em uma campanha de e-mail marketing, você vai capturar mais e-mails.

4º Layout Limpo

Usabilidade-para-web

O Google anunciou que popups atrapalham o SEO, por isso, evite utilizar popups. especialmente em celulares

Um site com layout limpo é aquele que:

  1. Não é exagerado tanto em seus anúncios quanto em seus ícones.
  2. Possui poucos ícones ou widgets

Veja se o seu site possui uma quantidade de banners de anúncios muito alta.

Isso pode variar um pouco.

  • Se o seu site tem 3 anúncios na página inicial e tem um tamanho que nem precisa descer a tela para chegar a seu final, esses anúncios estão em excesso.
  • Mas caso ele tenha esses mesmos 3 anúncios e tenha um tamanho que é necessário descer um pouco ou muito a tela para chegar a seu final, os anúncios não estão em excesso.

Também verifique se o seu site tem um bom espaçamento entre cada item.

Caso seja tudo muito colado, melhore a usabilidade aumentando o espaçamento entre os itens.

Mas não são só os anúncios que atrapalham um site.

Widgets e gadgets inúteis também são uma “pedra no sapato’.

Como os seguintes:

  1. Mostrar à hora
  2. Mostrar de que lugar alguém está acessando o seu site
  3. Clima

Isso vai deixar o seu site mais feio além de aumentar o tempo de carregamento da sua página e consequentemente a taxa de rejeição.

Tire os anúncios em excesso de seu site e elimine de vez todos os widgets/gadgets inúteis.

Artigos recomendados:

5º Arquitetura da Informação

Arquitetura-da-informação

Tudo em seu site deve ter um padrão.

As partes mais importantes devem ser encontradas mais facilmente pelas pessoas.

Não tente inventar colocando links de títulos com uma cor e links de artigos com outra, ou pior, deixá-los da mesma cor que o texto.

O link deve se destacar das demais palavras, de preferência com uma cor diferente e um sublinhado ao passar o mouse.

Lembre-se que:

  1. Todos os links que você coloca devem mandar para algum lugar e não para uma página que não existe.
  2. Plugins como o broken link checker para o wordpress são ótimos para resolver este erro

Outro ponto que deve ser levado em consideração é a utilização de negrito ou o itálico em exagero.

  1. O negrito deve ser usado apenas para destacar as partes mais importantes do texto, fazendo o leitor prestar mais atenção naquela parte.
  2. O itálico deve ser usado para nomes científicos ou palavras estrangeiras.

Se você colocar o texto todo em negrito ou em itálico não vai destacar nada.

E por último, organize os seus artigos com títulos e subtítulos.

Sendo que eles também devem seguir uma hierarquia, do h1 ao h6.

6º Interagir Com o Usuário

Interação-com-o-usuário

O seu site deve mostrar ao usuário o que ele pode e não pode fazer.

Sempre que ele realizar alguma ação em algum objeto interativo como um botão deve-se ter alguma mudança.

Especialmente quando se passa o mouse em cima ou quando se clica em algo.

Alguns erros comuns de usabilidade web relacionados a interação:

  1. Não retornar informações se algo foi realizado com sucesso (enviar e-mail, cadastro, compra)
  2. Link não têm nenhuma mudança ao passar o mouse em cima.
  3. O site não retorna nenhuma mensagem quando se ocorre algum erro.

Se o seu site é um blog apenas com postagens, sem funcionalidades adicionais se preocupe apenas com o básico.

Por exemplo: Se os comentários necessitam de aprovações verifique se aparece uma mensagem mostrando que o comentário foi para a aprovação.

7º Cores Do Site – Usabilidade na Web

Cores-do-site

Essa parte é uma das mais importantes da usabilidade na web.

E eu não estou brincando, apesar das cores parecerem algo simples, você pode acabar com o seu site se não escolher as corretas.

Por isso, preste muito atenção nessas dicas.

Cor de fundo

A cor de fundo deve ter um tom mais claro.

Não precisa necessariamente ser branca, mas tente colocar cores parecidas com ela.

Não use um fundo preto com fonte branca, pois pesquisas mostram que o usuário não consegue lembrar do que leu quando as cores são essas.

Mas o fundo branco e fonte preta é uma ótima opção.

Aqui no trafegoblog nós utilizamos o fundo branco e a fonte na cor #444444.

E além disso, não use cores de fundo fortes como:

  1. Amarelo
  2. Vermelho
  3. Laranja
  4. Verde

Elas atrapalham muito a visualização do site, o que torna a leitura muito cansativa.

Cor das fontes

A cor escolhida para sua fonte não deve ser a mesma que a cor de fundo e não pode ter uma tonalidade parecida.

Como as letras ficarão invisíveis, a leitura vai se tornar quase impossível.

Para se escolher a cor de suas fontes, o mais comum é o uso de fontes pretas ou cinza escuro.

E novamente evite cores muito chamativas como as citadas no item anterior.

Para verificar se a cor escolhida para o seu site ficou boa basta checar o contraste.

8º Tamanho da fonte

Fonte

Para ter uma boa usabilidade na web, a tipografia é muito importante.

O tamanho de sua fonte não deve ser muito pequeno nem muito grande, a fonte deve ter um tamanho que ajude na leitura.

Muitos sites dizem que a fonte deve ficar entre 10 e 14 pontos ou entre 15px e 18px.

Além disso, a sua fonte deve ser legível.

Não adiante ter uma fonte com o tamanho ideal se os seus caracteres não são de fácil entendimento.

Existem muitos sites com diversas fontes gratuitas, mas eu recomendo que você coloque alguma das seguintes fontes em seu site:

  • Arial
  • Helvetica
  • Roboto
  • Calibri
  • Georgia

Aqui no site utilizamos a Zilla Slab

Caracteres por linha

Essa parte é muito importante para facilitar a leitura.

Basicamente o correto é:

  1. 50 a 65 caracteres por linha
  2. 10 a 15 palavras por linha.

Se você não corrigir isso, a leitura de seus textos ficará muito cansativa e consequentemente você vai diminuir o tempo de permanência do usuário em seu site.

Não se esqueça o conteúdo é o rei.

Não adianta você fazer a formatação de seu texto se você não escreve um conteúdo de qualidade.

9º Velocidade Do Site

A velocidade é um dos fatores mais importantes.

Com uma boa velocidade você terá mais:

  1. Vendas
  2. Usuários
  3. Cliques em anúncios

Caso você não acredite no que estou dizendo veja o que algumas pesquisas dizem sobre a importância da velocidade para um site:

  • 40% das pessoas abandonam o site se o seu tempo de carregamento for maior do que 3 segundos.
  • A taxa de rejeição do site pode dobrar caso o seu tempo de carregamento passe de 4 segundos e aumentar cerca de 150% caso dure mais de 8 segundos.

E veja um dos princípios UX do Google.

Cada milissegundo importa. Somos tão preocupados com o tempo de nossos usuários, que cada busca feita no Google apresenta o tempo que o sistema levou para retornar o resultado.

Para que você melhore o tempo de carregamento de seu site existem muitas coisas que devem ser levadas em consideração.

Abaixo vou abordar apenas o erro mais comum e te mostrar como melhorar.

Imagens

As imagens são umas das principais responsáveis por diminuírem a velocidade dos sites.

Por isso, evite esses dois erros:

  1. Deixar a imagem maior do que deve ser.
  2. Não comprimir o tamanho da imagem, sem perder a qualidade. Utilize o compress image para fazer isso.

Testar velocidade

Velocidade

Agora vamos testar qual a velocidade de seu site e ver o que podemos melhorar.

Para fazer isso você tem várias opções:

  1. Page speed do google.
  2. GT metrix
  3. Pingdom

Apenas a acesse, digite a url de seu site e depois verifique os erros de seu site e se quiser os corrija.

Uma informação útil:

Caso você utilize o google analytics, saiba que será inútil conseguir 100/100 no page speed.

O script do google analytics vai te atrapalhar um pouco, mas a equipe do Google já falou que isso não tem importância.

Outras otimizações que você pode fazer são:

  • Comprimir o código css e javascript
  • Colocar cache em seu site
  • Lazy load

Em breve nós lançaremos um artigo falando sobre velocidade aqui no site.

10º Formulários

Formulários

Se você se encaixa em algum dos casos abaixo:

  • Tem uma loja virtual com várias visitas e está tendo poucas conversões.
  • Seu site não tem muitos comentários

Provavelmente é por causa de seus formulários, pois, é nesta parte que muitas pessoas desistem de realizar suas ações.

Agora faça esse checklist em seus formulários.

Tamanho

Formulários que pedem muitas informações para o usuário, dificilmente serão preenchidos completamente.

  1. Verifique se aquela informação que você está pedindo a seu usuário é realmente necessária.
  2. Caso realmente seja necessário tente validar os campos em tempo real. Ou seja, quando o usuário digitar o site já mostra se o texto digitado está correto naquele campo.
  3. Se não estiver correto verifique se aparece alguma mensagem explicando como o campo deve ser preenchido.

Informações – Usabilidade Web

Existem 2 informações que você deve fornecer para seus usuários em formulários:

  1. Quais campos são obrigatórios: para isso normalmente se utiliza um asterisco (*) após o a descrição do que deve ser o campo.
  2. O que deve ser preenchido: coloque uma palavra antes para definir o que deve ser preenchido, e também coloque um texto dentro do formulário.

Verifique se ao clicar na palavra descrevendo o campo, automaticamente o foco vai para o formulário.

Captchas

Sem duvida o uso de captchas no seu formulário pode incomodar muito.

Mas infelizmente é necessário para garantir que quem está preenchendo aquele formulário é um humano.

Se você não colocar, alguém pode muito bem programar um aplicativo para ficar preenchendo ele e te enviando várias vezes. 

E isso realmente acontece.

Por exemplo, muitas pessoas criam bots para postar comentários automáticos em milhares de sites por dia.

Um Captcha pode te ajudar a evitar isso.

Mas caso você utilize o wordpress, pode utilizar o akismet.

Existem diversos tipos de captchas que você pode colocar em seu site, mas você deve se preocupar com 2 coisas antes de escolhê-lo:

  1. Ele é seguro?
  2. É fácil para as pessoas?

Se você não sabe qual usar eu te recomendo este aqui.

11º Adobe Flash Player

Flash-Player

Se você não se lembra, há muito tempo o flash era usado para fazer sites.

Parecia ser tudo muito bom, pois com ele era possível colocar animações no site além de facilitar a criação.

Isso na época era uma inovação.

Mas com o tempo ele foi ficando ultrapassado e hoje já foi substituído pelo HTML5 e pelo CSS3.

Animações que antes demoravam horas para se fazer com o flash, hoje podemos fazer em minutos com o CSS.

Veja mais alguns motivos que explicam por que você não deve usá-lo em seus sites:

Indexação

Atualmente é muito difícil se encontrar sites feitos em flash.

Mas como algo que já foi um sucesso na internet desapareceu em poucos anos?

Simples, a indexação é muito mais difícil do que os sites normais, pois o Google apenas indexa uma página do site.

Se você fizer o seu site em flash e publicar 1000 artigos provavelmente apenas a sua página inicial será indexada.

Dispositivos móveis

Responsividade

Alguns anos atrás a adobe lançou o aplicativo flash player para os principais sistemas operacionais de celulares.

No início foi um sucesso, mas em pouco tempo foram aparecendo muitos erros no aplicativo e ele foi descontinuado.

Como o aplicativo foi descontinuado consequentemente a visualização de tudo feito em flash nos celulares não aparece mais.

Ou seja, se você fizer um site em flash pode se esquecer de seu público pelo celular.

Velocidade

Você já sabe que a velocidade é um fator extremamente importante para qualquer website.

E, por isso, esse é outro motivo para você não usar o flash.

Ele atrapalha muito o carregamento de seu site.

E caso a pessoa não possua o adobe flash player instalado no computador, ela não vai conseguir visualizar o seu conteúdo.

Por isso, se você quer ter uma boa usabilidade em seu site ou seu blog, não utilize o adobe flash player.

Mais Dicas De Usabilidade Na Web

Abaixo estão mais algumas dicas que você pode aplicar em seu site.

Essas são dicas um pouco mais avançadas ou dicas que poucas pessoas vão aproveitar, pois, apontam erros pouco comuns.

Navegação sem o mouse

O seu site deve ser navegável mesmo se não for possível o uso do mouse.

Para verificar isso basta tentar navegar em seu site utilizando as teclas Shift e Shift + Tab.

Se você não conseguir visualizar o conteúdo completo, faça isso:

  1. Peça para o seu programador ou para o desenvolvedor do seu tema para arrumar isso.
  2. Troque de tema (wordpress)
  3. Estude sobre o tabindex

Isso não é algo que vai afetar muito o seu site, mas pode ser interessante adicionar essa opção para seus leitores.

Músicas de fundo

Música-de-fundo

Músicas de fundo atrapalham muito a experiência em um site.

As pessoas não possuem gostos musicais iguais e, por isso, colocar uma música pode muito bem deixar seu usuário irritado.

Esse erro não é mais comum entre os sites, pois todo mundo já sabe que isso incomoda muito.

Mas se por algum motivo seja necessário colocar uma música de fundo, deixe uma opção de pará-la.

Ter as páginas sobre e contato

Hoje em dia muitas pessoas que usam a internet desejam saber quem é a pessoa que está por trás daquele site.

Por isso a pagina sobre é muito importante para o seu site.

Além disso, ela vai ajudar a criar um vinculo maior com o seu público.

Se você não tiver uma página de contato em seu site, você pode estar perdendo muitas chances de negócios.

Mas não é só isso, talvez o seu usuário queira te recomendar alguma melhoria do site ou até mesmo comprar algo.

URL de qualidade

URL

Existem algumas dicas muito simples que vão te ajudar a criar boas urls.

  1. Verifique se a URL de seu post não é difícil de lembrar.
  2. A palavra chave do post deve estar na URL.
  3. Não use underlines (_), para o Google underlines não separam as palavras os separadores que devem ser usados é o sinal de menos(-).

Ter um site responsivo

Esse provavelmente é o fator mais importante de usabilidade web atualmente.

Mas como a grande maioria dos sites já se adaptaram a isso, eu não vou me aprofundar muito.

O site responsivo é aquele que se adapta para dispositivos móveis.

Se o seu layout não é responsivo o seu site não vai se posicionar bem nas pesquisas do Google, além de perder parte de seu público.

Testando a Usabilidade de Seu Site

Testar-usabilidade

Agora que você já colocou todas essas técnicas em seu site, está na hora de testá-lo.

Nesse momento você vai simular várias deficiências, assim você poderá perceber quais dificuldades essas pessoas podem ter com seu site.

Deficiência auditiva: Primeiramente acesse o seu site com a caixa de som desligada, isso vai simular uma pessoa surda.

Caso você consiga navegar normalmente e entender todos os conteúdos de seu site está tudo bem.

Isso mostra a importância de colocar textos em páginas com vídeos.

Agora acesse esses sites e comece a testar.

Se fosse para escolher uma frase para resumir este artigo seria o primeiro principio UX do Google

Preocupe-se com o usuário e tudo mais virá.

Essa sem dúvida é a regra de ouro para fazer sucesso na internet.

Se você oferece:

  1. Conteúdo de qualidade
  2. Site bem feito
  3. Boa divulgação

Pode ter certeza que seu site vai crescer muito em pouco tempo.

Espero que agora você consiga entender o quanto é importante ter um site acessível para todas as pessoas.

Caso você tenha alguma duvida, dica, acha que faltou algo neste post ou tem alguma crítica ou elogio deixe seu comentário logo abaixo.

E nos ajude a chegar a mais pessoas.

Compartilhe esse artigo em suas redes sociais clicando nos ícones abaixo.

Artigos Relacionados:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *