18 Problemas de Usabilidade Que Deixam Seus Leitores Furiosos


Existe algo mais frustrante na internet do que problemas de usabilidade em um site?

Você clica em um link esperando ser direcionado para um site e:

  • Ele demora mais de 30 segundos para abrir‚Ķ
  • O fundo do site √© vermelho e a cor da fonte √© azul, tamanho 8‚Ķ
  • N√£o existe nenhum sinal de navega√ß√£o no site‚Ķ
  • N√£o √© poss√≠vel entrar em contato com o dono do site‚Ķ
  • Ele utiliza a mesma cor do texto para os links‚Ķ

Esses s√£o apenas alguns problemas de usabilidade na web.

Mais comum do que você imagina, a navegabilidade e usabilidade de muitos sites possuem sérios problemas.

Nesse artigo, o meu objetivo é mostrar os 18 problemas mais comuns de usabilidade que deixam os leitores furiosos.

Assim como mostra o artigo do Viver de Blog sobre o fator #1 que pode destruir a credibilidade do seu site, a usabilidade do seu site é extremamente importante para sua credibilidade e para a experiência do usuário.

Um leitor satisfeito é muito mais valioso do que três leitores infelizes.

Continue lendo esse artigo para saber mais sobre:

  • O conceito de usabilidade
  • Requisitos de usabilidade
  • Acessibilidade na web
  • Como melhorar a usabilidade de seu site
  • Exemplos de usabilidade na web

CONCEITO E REQUISITOS DE USABILIDADE

Segundo o Wikipedia, Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante.

Portanto, usabilidade na web significa a facilidade com que os usu√°rios conseguem chegar ao seu objetivo ao entrar em um site.

Esse objetivo varia de pessoa para pessoa e, dentre v√°rios, pode ser:

  • Entrar em contato
  • Encontrar o artigo que estava procurando
  • Cadastrar seu email para receber mais informa√ß√Ķes do site
  • Comentar em um artigo
  • Compartilhar o artigo nas redes sociais

Uma boa usabilidade costuma andar de m√£os dadas com um bom design.

Nas próprias palavras de um dos maiores gênios:

Design is not just what it looks like and feels like. Design is how it works. ~ Steve Jobs

Logo, um bom design vai muito além de traços bonitos. Design também está relacionado a como as coisas funcionam.

Existem algumas ‚Äúleis universais‚ÄĚ sobre o que √© uma boa usabilidade em um site.

Para facilitar o trabalho em sua página, coletei os 18 problemas mais comuns em usabilidade e como você pode solucioná-los.

Os 18 problemas est√£o divididos em 4 partes:

  1. Acessibilidade na Web
  2. Identidade
  3. Navegabilidade
  4. Conte√ļdo

Espero que seu site passe nesse ‚Äúteste‚ÄĚ. Caso contr√°rio, aproveite as dicas para melhorar a usabilidade de seu site.

PARTE #1: ACESSIBILIDADE NA WEB

acessibilidade

Tudo começa com acessibilidade. Se seu site não for acessível, tudo estará perdido.

Imagine a frustração de visitar um site e receber logo de cara uma mensagem de erro ou o site estar fora do ar.

Dificilmente esse leitor voltará para sua página e você pode ter perdido muito mais do que um leitor, mas um futuro fiel cliente.

Problema #1. Seu site é lento!

O principal problema de acessibilidade de um site é ele não estar acessível. Faz sentido? :)

Porém, mesmo estando acessível, ele precisa ser muito rápido. Afinal, os usuários na internet estão cada vez menos pacientes.

No artigo sobre princípios de design, vimos que você tem apenas 8 segundos para conquistar o seu leitor. Faça isso ou você perderá muitas visitas.

Nesse artigo trago n√ļmeros ainda mais alarmantes:

  • 40% dos usu√°rios abandonam um website se ele n√£o carregar em menos de 3 segundos.
  • Um segundo a mais para carregar um site pode resultar em um queda de 16% na satisfa√ß√£o do usu√°rio.
  • A cada um segundo para carregar, um site pode perder 7% em convers√Ķes.

Veja mais n√ļmeros como esses¬†nesse infogr√°fico sobre como o tempo de carregamento afeta o seu site.

Além disso, o tempo de carregamento de um site também conta para SEO, afetando seu ranking no Google.

Como resolver esse problema?

Embora esse assunto demande mais detalhes e possa resultar em um artigo próprio, que futuramente será abordado  aqui no Viver de Blog, vou dar 2 dicas essenciais para você melhorar o tempo de carregamento do seu site.

Dica #1: Monitore a velocidade do seu site através do site Pingdoom.

Fa√ßa um teste e veja em quanto tempo sua p√°gina carrega. Identifique qual tipo de conte√ļdo demora mais para carregar. Veja um exemplo do Viver de Blog, que abriu em 1,8 segundos:

pingdoom

Normalmente, imagens de grande tamanho s√£o os principais vil√Ķes que afetam o carregamento do seu site.

Se a sua intenção é mostrar uma imagem de 100 x 100 pixels não coloque uma de 1.000 x 1.000 pixels e deixe o WordPress redimensionar para você.

O tamanho da imagem continuará sendo  de 1.000 x 1.000 pixels, embora o site mostre a de 100 x 100 pixels.

Portanto, lembre-se sempre de redimensionar a sua imagem antes de fazer o upload para seu site.

Dica #2: Contrate um servidor confi√°vel (e r√°pido)

mediatemple

Essa √© uma grande d√ļvida de qualquer pessoa que possui um website. Qual empresa escolher para o hosting do meu site?

Aqui no Brasil, vejo muitos decidindo pelo Uol Host ou Local Web e posso dizer que esses serviços são muito ruins quando comparados a empresas de estrangeiras de qualidade.

Não é raro encontrar gente reclamando no Twitter ou em fóruns sobre a má qualidade dessas companhias nacionais.

Se você cuida do seu site como se fosse seu empreendimento e dedica-se bastante para melhorá-lo, um bom servidor é mais do que necessário para ajudar você a melhorar o tempo de carregamento do site e até mesmo a obter melhora no seu ranking do Google.

Você pode conhecer melhor o serviço que eles oferecem aqui (link afiliado com 20% de desconto exclusivo para leitores do Viver de Blog).

Problema #2. Pouco contraste entre o fundo do site e o texto

Como Steve Jobs disse: ‚ÄúDesign vai al√©m de como as coisas parecem.‚ÄĚ

Portanto, de nada vale investir em um design que seja ‚Äúbonito‚ÄĚ se voc√™ dificultar a experi√™ncia do usu√°rio.

Um exemplo disso é o fundo cinza com texto também em cinza.

Pode até parecer bonito, mas o importante é o leitor conseguir ler seus textos, correto?

Como resolver esse problema?

Nada como √† moda antiga. Utilize um fundo branco com uma fonte preta. Ou varia√ß√Ķes muito pr√≥ximas dela.

Problema #3. O tamanho da fonte é muito pequeno, dificultando a leitura

Outro grande problema de acessibilidade e usabilidade é o tamanho pequeno da fonte em diversos sites.

Antigamente, o usual era utilizar a fonte Arial tamanho 12. Por√©m, essa combina√ß√£o √© pequena para os padr√Ķes atuais.

Os monitores ganharam mais pixels, se alargaram e manter uma fonte de tamanho 12 é ruim para a leitura de artigos.

Mais e mais usuários estão lendo textos em aparelhos móveis (smartphones, tablets), necessitando de fontes maiores para facilitar a leitura.

Como resolver esse problema?

Calcule a largura da √°rea destinada ao conte√ļdo da sua p√°gina. A maioria tem 600 pixels de largura.

Depois, visite esse site e coloque o tamanho da largura ¬†em ‚Äúcontent width‚ÄĚ e clique no bot√£o. Ele dar√° a voc√™ exatamente o tamanho de fonte √≥timo para seu caso.

Na maioria das vezes, a recomenda√ß√£o ser√° de uma fonte de tamanho 15 para um conte√ļdo de 600 pixels.

Tudo baseado em estudos matemáticos que você pode ler aqui e aqui.

Problema #4. PopUps s√£o usados em exagero

Uma das principais causas de um usuário deixar o seu site logo na primeira visita é o uso de pop-ups.

Assim como em um primeiro encontro, voc√™ n√£o pode pedir a pessoa em namoro.¬†√Č preciso ganhar sua confian√ßa e conhec√™-la melhor.

como-criar-um-blog-memoravel-viver-de-blog

Por esse motivo, pop-ups devem ser utilizados com moderação e, de preferência, nunca para uma primeira visita.

Como resolver esse problema?

Se utilizar pop-ups, lembre-se de procurar um software que permita uma boa segmentação, ou seja, para quem exatamente o pop-up será mostrado.

Boas práticas recomendam você mostrar o pop-up apenas para novos visitantes e que tenham ao menos visitado mais de uma página.

Problema #5. As imagens não têm ALT tags apropriadas

Poucos sabem o que é uma ALT tag. Ela nada mais é do que um texto que diz do que se trata uma imagem.

Importante n√£o apenas por quest√Ķes de usabilidade, a ALT tag tamb√©m ajuda no SEO do seu site.

Como resolver esse problema?

Lembre-se de colocar ALT tag em suas imagens. Uma solução simples e eficaz para você não perder tempo toda vez que fizer o upload de uma imagem é utilizar o plugin SEO Friendly Images (grátis).

Problema #6. Seu site n√£o possui uma p√°gina 404 (n√£o encontrada) personalizada

Experimente colocar ‚Äúasdf‚ÄĚ no t√©rmino da URL do seu site.

Exemplo: webdionathan.wordpress.com/asdf

Você será redirecionado para uma página 404 (não encontrada).

Oops! That page can’t be found.

Porém, a maioria dos sites param por aí e não mostram ao leitor possibilidades para ele voltar para a homepage  ou para a área de artigos.

Como resolver esse problema?

Sempre oriente seus leitores para uma p√°gina com conte√ļdo.

Aqui no webdionathan eu mantive o menu de navegação, o rodapé e um link (botão de topo) para voltar a homepage do site.

PARTE #2: IDENTIDADE

identidade

A identidade de um site deve ser clara e responder perguntas do tipo ‚Äúquem √© voc√™?‚Äú, ‚Äúo que voc√™ faz‚ÄĚ e ‚Äúpor que eu deveria confiar em voc√™?‚ÄĚ

Na maioria das vezes, a p√°gina ‚Äúsobre‚ÄĚ pode responder todas essas perguntas, mas para garantir uma boa usabilidade do site, voc√™ precisa ir al√©m desse simples passo.

Problema #7. √Č dif√≠cil encontrar o logo da empresa

Não precisa ser necessariamente o logo da empresa, mas o nome do site deve ser visível e fácil de achar.

Muitos clicam nele para voltar a homepage.

Pelo padrão, ele deve estar posicionado no canto superior à esquerda do site (e deve ser clicável).

Como resolver esse problema?

Coloque uma imagem ou texto que represente o seu site no canto superior à esquerda e faça com que ele seja clicável, redirecionando para a homepage.

Problema #8. A homepage não deixa claro sobre o que o site é em poucos segundos

Você possui em torno de 8 segundos antes que um visitante deixe seu site.

Portanto, se ele n√£o descobrir rapidamente do que se trata sua p√°gina, ir√° deix√°-la.

Como resolver esse problema?

O seu logo/nome do site deve transmitir rapidamente os valores do site.

Além disso, utilize uma tagline para ajudar a expressar esses valores.

No webdionathan: Empreendedor Digital

Problema #9. A p√°gina ‚Äúsobre‚ÄĚ n√£o √© f√°cil de ser encontrada

Hoje em dia, os leitores fazem quest√£o de saber quem est√° por tr√°s do site.

O anonimato na web está com os dias contados e você precisa deixar claro quem produz o site e como ele pode ajudar o leitor.

Como resolver esse problema?

Coloque um link para a p√°gina ‚Äúsobre‚ÄĚ no seu menu de navega√ß√£o.

Se transparência é um dos valores mais importantes para o seu site, como é aqui no webdionathan, coloque também uma foto sua com um pequeno texto na sidebar ou no rodapé para os leitores saberem melhor sobre sua história, metas e objetivos.

Problema #10. N√£o existe uma √°rea para contato no site

A internet nos permite entrar em contato com pessoas do mundo inteiro, interessadas no que temos para compartilhar.

Entretanto, se você não colocar uma área de contato no seu site, ninguém conseguirá se comunicar com você e muitas oportunidades de negócios, parcerias, ideias serão perdidas.

Como resolver esse problema?

O plugin Contact Form 7 (grátis) é muito popular e extremamente fácil de configurar.

Se você ainda não possui uma área de contato para o seu site, a hora é agora.

Est√° gostando desse artigo?

Inscreva-se no campo abaixo para receber um ebook 100% gratuito e ser o primeiro a receber novas atualiza√ß√Ķes do blog.

FIQUE ATUALIZADO!

PARTE #3: NAVEGABILIDADE

navegabilidade

Uma vez que as pessoas geralmente sabem quem voc√™ √© e o que voc√™ faz, elas precisam de caminhos claros para o conte√ļdo que lhes interessa.

Nesse momento, a arquitetura de informa√ß√Ķes √© quem ir√° mostrar ao visitante como ele deve navegar em seu site.

Problema #11. Menu de navegação é confuso

O menu de navega√ß√£o est√° presente em sites h√° um loooongo tempo. √Č um padr√£o de usabilidade antigo e est√° presente at√© hoje porque funciona.

O problema nesse item pode ocorrer de duas formas:

  1. O site não possui um menu de navegação (veja o exemplo nesse artigo do Viver de Blog)
  2. O site possui vários menus de navegação (confundindo leitores)

Como resolver esse problema?

Um bom menu de navegação precisa ser simples e direto.

Se você coloca suas 15 categorias do blog no menu de navegação, você está fazendo isso de modo errado.

Lembre-se de que mais escolhas podem resultar em menos convers√Ķes (cliques, no caso).

Portanto, limite o uso do seu menu de navegação para itens importantes como:

  • Pesquisa
  • Arquivo
  • Sobre
  • Contato
  • P√°ginas mais importantes (com modera√ß√£o)

Problema #12. Links n√£o s√£o consistentes e f√°ceis de identificar

No ramo de internet marketing é comum ver sites usando vermelho para o cabeçalho e vermelho para links.

Ao colocar os dois itens com a mesma cor, o leitor fica confuso, n√£o sabendo exatamente onde ele pode e n√£o pode clicar.

como-criar-um-blog-memoravel-viver-de-blog

Além disso, outro erro comum é colocar links com cores diferentes. Se um link é azul e outrolink é verde você também está criando confusão para o leitor.

Como resolver esse problema?

Todos os links do site, assim como bot√Ķes de a√ß√£o, devem ser de uma √ļnica cor.

Por padrão, usuários estão acostumados com a cor azul para links, mas você pode variá-la com moderação.

Entretanto, nunca coloque um link da mesma cor do conte√ļdo. Alguns sites cismam em usar uma fonte de cor preta e tamb√©m links na cor preta, p√©ssimo para a usabilidade do site.

Problema #13. O campo de pesquisa no site é difícil de encontrar

Novamente, por padrão, o campo de pesquisa costuma ficar no topo de um site, no menu de navegação principal.

Entretanto, outros bons lugares para se ter um s√£o:

  • Sidebar
  • Rodap√© (footer)

Porém, alguns sites não possuem campo de pesquisa ou os colocam em um lugar de difícil acesso.

Como resolver esse problema?

Disponibilize uma área exclusiva para o campo de pesquisa no menu de navegação do seu site.

Integrando as buscas com seu Google Analytics, você ainda poderá ver os termos mais pesquisados dentro do seu blog, o que pode dar várias dicas para novos artigos.

PARTE #4: CONTE√öDO

conteudo

Ap√≥s garantir a acessibilidade de seu site, refor√ßar sua identidade e mostrar como funciona a navegabilidade, voc√™ precisa de uma boa usabilidade em seus artigos (conte√ļdo).

Problema #14. Os elementos do resumo dos artigos na homepage n√£o s√£o clic√°veis

A maioria dos blogs hoje disponibiliza um resumo dos artigos mais recentes em sua homepage.

Esses resumos consistem em 3 principais elementos:

  • T√≠tulo do Artigo
  • Imagem
  • Link para continuar lendo o artigo

O problema de muitos sites: nem sempre esses 3 itens s√£o clic√°veis.

O erro mais comum √© o pr√≥prio t√≠tulo do artigo n√£o ser clic√°vel. Ao impedir o leitor de clicar no t√≠tulo do artigo, esperando que ele clicar√° no ‚Äúcontinue lendo‚ÄĚ, voc√™ pode perder importantes visitas para seu artigo.

Lembre-se também: Erros ortográficos na homepage também tendem a afastar rapidamente seus leitores.

Como resolver esse problema?

Faça com que todos esses 3 elementos do resumo dos artigos na página principal sejam clicáveis.

Pode parecer um passo pequeno, mas é fácil e irá aumentar a satisfação do leitor usar seu site.

Problema #15. Seu site usa uma ‚Äúsalada mista‚ÄĚ de cores

N√£o apenas links, como mencionei anteriormente, mas todas as cores do seu site precisam ser pensadas como um todo e n√£o em particular.

Criar uma ‚Äúsalada mista‚ÄĚ de cores √© ter a certeza de confundir seus leitores.

Isso ocorre porque, tornando todas as cores do seu site predominantes, você está fazendo com que nenhuma delas se destaque.

Como resolver esse problema?

Utilize cores mais fortes apenas onde você quer chamar mais atenção.

Um bom exemplo é na captura de emails e nas páginas que você deseja que sejam mais visitadas.

Problema #16. Seu texto abusa de ênfases em negrito, itálico e caixa alta

Um exemplo muito parecido com o problema anterior: A cognição humana tenta chamar a atenção para tudo e acaba, por consequência, não chamando atenção para nada.

Perceba nesta frase como ao tentar CHAMAR ATENÇÃO para tudo eu não consegui chamar atenção para NADA.

Como resolver esse problema?

Simples. Utilize apenas um estilo para enfatizar um determinado ponto na frase.

Boas práticas indicam que você deve utilizar o itálico em palavras estrangeiras.

Colocar o texto em negrito é uma ótimo forma de destacar um ponto, mas precisa ser usado raramente.

Textos em CAIXA ALTA podem indicar que voc√™ est√° ‚Äúgritando‚ÄĚ na internet. Portanto, s√≥ utilize em casos muito raros para dar √™nfase m√°xima a um ponto.

Problema #17. An√ļncios presentes por toda parte

A maioria dos sites necessita de an√ļncios para pagar suas contas ou para rentabilizar o tempo que o editor leva para entregar um conte√ļdo de gra√ßa.

Entretanto, assim como cores e √™nfases no texto, os an√ļncios tamb√©m devem ser utilizados com cautela, j√° que o excesso dos mesmos poder√° fazer seu leitor sair correndo para outro site.

Como resolver esse problema?

N√£o h√° problema algum em utilizar an√ļncios em um site.

Por√©m, voc√™ precisa definir um limite para n√£o quebrar a fina linha entre conte√ļdo e anunciantes e tamb√©m deve deixar claro que se trata de um an√ļncio.

como-criar-um-blog-memoravel-viver-de-blog

Voc√™ pode chamar essas √°reas de an√ļncios de ‚Äúpublicidade‚ÄĚ, ‚Äúparcerias‚ÄĚ ou outro termo adequado, desde que deixe claro para o leitor que se trata de propaganda.

Problema #18. URLs s√£o mal estruturadas

Por padr√£o, o WordPress coloca as URLs de um site como:

http://www.site/?p=631

O que a parte ?p=631 me diz sobre essa p√°gina? Nada!

Alguns leitores mais acostumados com a internet olham a URL de um link antes de clic√°-lo.

Não adotando boas práticas, você pode perder novos visitantes, assim como deixar de ganhar rankings no Google pela má estrutura de URLs.

Como resolver esse problema?

configuração-links-permanentes-wordpress

No painel do seu WordPress, siga o caminho: Configura√ß√Ķes -> Links Permanentes.

Agora, marque a configura√ß√£o ‚Äúnome do post‚ÄĚ.

Desse modo, ao invés de aparecer http://www.site/?p=631 seu artigo irá aparecer como http://www.site/nome-do-artigo.

Supondo que a URL seja ‚Äúmais-trafego‚ÄĚ, ela ir√° aparecer como¬†http://www.site/mais-trafego.

Observe como é a URL dessa página sobre mais tráfego.

Importante: Se você já possui outra configuração de link permanente, talvez seja melhor repensar antes de adotar esse modelo.

Digo isso porque voc√™ provavelmente ir√° perder os n√ļmeros sociais de sua p√°gina e talvez seus rankings no Google.

Porém, se você está começando um blog do zero ou o tem há pouco tempo, a mudança irá melhorar a acessibilidade e usabilidade do seu site.

CONCLUS√ÉO ‚Äď RECAPITULANDO

ganhar dinheiro com blog webdionathan leitores furiosos

O seu objetivo como propriet√°rio de um site √© disponibilizar informa√ß√£o de qualidade para seus leitores e fazer com que essas informa√ß√Ķes sejam de f√°cil acesso.

Garantir uma boa usabilidade é essencial para fazer com que novos visitantes se tornem visitantes repentinos.

Abaixo, relembro os 18 problemas de usabilidade, separados pelas 4 categorias:

Acessibilidade

1. Seu site é lento!

2. Pouco contraste entre o fundo e o texto

3. O tamanho da fonte é muito pequeno, dificultando a leitura

4. PopUps s√£o usados em exagero

5. As imagens não têm ALT tags apropriadas

6. Seu site n√£o possui uma p√°gina 404 (n√£o encontrada) personalizada

Identidade

7. √Č dif√≠cil encontrar o logo da empresa

8. A homepage não deixa claro sobre o que o site é em poucos segundos

9. A p√°gina ‚Äúsobre‚Ä̬†n√£o¬†√© f√°cil de ser encontrada

10. N√£o existe uma √°rea para contato no site

Navegabilidade

11. Menu de navegação é confuso

12. Links n√£o s√£o consistentes e f√°ceis de identificar

13. O campo de pesquisa no site é difícil de encontrar

Conte√ļdo

14. Os elementos do resumo dos artigos na homepage n√£o s√£o clic√°veis

15. Seu site usa uma ‚Äúsalada mista‚ÄĚ de cores

16. Seu texto abusa de ênfases em negrito, itálico e caixa alta

17. An√ļncios presentes por toda parte

18. URLs s√£o mal estruturadas

E voc√™? Tem alguma dica sobre usabilidade para compartilhar com a gente? Deixe seu coment√°rio abaixo! ūüėČ

Um grande abraço,

Dionathan Machado

Gostou? Compartilhe!

Ps: partes desse artigo foram publicados e compartilhados em parceria com o site: viverdeblog.com
An√ļncios

Deixe um coment√°rio

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Voc√™ est√° comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Voc√™ est√° comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Voc√™ est√° comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Voc√™ est√° comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.