Académique Documents
Professionnel Documents
Culture Documents
Entrou em um site e simplesmente não conseguiu ficar nem 3 segundos dentro dele?
Ou pior...
Gastou seu precioso tempo dentro dele para chegar a frustração por não entender como
ele funciona?
Não é sua função apontar o que eles precisam mudar, mas é sua função receber um
visitante no seu blog/site da melhor maneira possível, assim como recebemos pessoas
queridas em nossa casa.
E é bem provável que você não está seguindo os 23 conceitos de usabilidade que
iremos abordar nessa aula.
Portanto, preste bastante atenção em todos os itens para você garantir a melhor
experiência possível para seu usuário.
E com isso diminuir sua taxa de rejeição, aumentar o tempo de permanência do leitor no
seu blog, aumentar o número de leitores recorrentes e todos demais benefícios
relacionados.
Portanto, usabilidade significa a facilidade com que seus visitantes conseguem chegar
ao seu objetivo ao entrar em um site.
Esse objetivo varia de pessoa para pessoa e, dentre vários, pode ser:
Uma boa usabilidade costuma andar de mãos dadas com um bom design.
Nas próprias palavras de Steve Jobs, um dos maiores gênios em termos de design e
usabilidade:
Design não é apenas o que parece e o que se sente. Design é como funciona.
Logo, um bom design vai muito além de traços bonitos. Design também está
relacionado a como as coisas funcionam.
Para facilitar seu trabalho para otimizar seu blog/site, não apenas mostrarei os 23
problemas de usabilidade como também irei apontar as soluções para você resolvê-los.
Vamos juntos?
É uma realidade. E os sistemas de buscas estão cada vez mais ligados nisso.
Na aula 1.5 recomendamos alguns grátis e alguns pagos para você escolher.
Como vimos na aula passada, você tem apenas 8 segundos para conquistar o seu leitor.
Além disso, o tempo de carregamento de um site também conta para SEO, afetando seu
ranking no google.
Aqui vão duas dicas essenciais para você melhorar o tempo de carregamento do seu site.
Dica #1: Monitore a velocidade do seu site através desta ferramenta no site Pingdoom.
Faça um teste e veja em quanto tempo seu site carrega. Identifique qual tipo de
conteúdo demora mais para carregar.
Se a sua intenção é mostrar uma imagem de 100 x 100 pixels, não coloque uma imagem
de 1000 x 1000 pixels e deixe o WordPress redimensionar para você.
O tamanho da imagem continuara sendo a de 1.000 x 1.000 pixels, embora o site mostre
como 100 x 100 pixels.
Portanto, lembre-se sempre de redimensionar a sua imagem antes de fazer o upload para
seu site.
Essa é uma grande dúvida de qualquer pessoa que possui um blog: “Qual empresa
escolher para a hospedagem do meu blog?”
Aqui no Brasil vejo muitos decidindo pelo UolHost ou Locaweb e posso dizer que esses
serviços são muito ruins quando comparados com empresas de nome estrangeiras.
Não é raro encontrar gente reclamando em fóruns sobre a má qualidade dessas empresas
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 melhorar seu ranking no google.
Eles são ruins porque geram uma frustração para o usuário, quando ele percebe que
clicou em um link que não existe mais.
Se ele for um link interno, basta você trocá-lo para o link correto.
Se for externo, avalie se é possível mudar o link para o lugar correto ou se você
precisará excluir esse link.
Use um plugin como o Broken Link Checker para verificar automaticamente os links
quebrados dentro do seu site/blog.
Ele permite você trocar o link dentro do próprio plugin ao invés de caçar o link nos
artigos.
Além disso, se você usar esse mesmo link várias vezes dentro de seu site, ele troca o
link em todos os lugares.
Assim como em um primeiro encontro, você não pode pedir a pessoa em casamento. É
preciso ganhar sua confiança e conhecê-la melhor.
Por esse motivo, pop-ups devem ser utilizados com moderação e, de preferência, nunca
para uma primeira visita.
Portanto, de nada vale investir em um design que seja “bonito” se você dificultar a
experiência do usuário.
Pode até parecer bonito, mas o importante é o leitor conseguir ler seus textos, correto?
Nada como à moda antiga. Utilize um fundo branco com uma fonte preta. Ou variações
muito próximas dela.
Mais e mais usuários estão lendo artigos em dispositivos móveis (smartphones, tablets),
necessitando de fontes maiores para facilitar a leitura.
Calcule a largura da área destinada ao conteúdo do seu site. A maioria tem, pelo menos,
600 pixels de largura.
Ele dará a você exatamente o tamanho de fonte ótimo para seu site.
Exemplo: seublog.com/asdf
Porém, a maioria dos blogs param por aí e não mostram ao leitor possibilidades para ele
voltar para a homepage do site ou para a área de artigos.
No Quero Ficar Rico, os mesmos passos acima foram seguidos e ainda há uma lista dos
artigos mais recentes para oferecer uma alternativa ao visitante.
Pelo padrão, ele deve estar posicionado no canto superior à esquerda do site (e deve ser
clicável).
Coloque uma imagem ou texto que represente o seu blog no canto superior à esquerda e
faça com que ele seja clicável, redirecionando para a página inicial.
Portanto, se ele não descobrir rapidamente do que se trata seu blog, ele irá deixá-lo.
Quanto mais confuso ele estiver na página inicial, maior é a chance dele nunca mais
voltar no seu site/blog.
Logo, tagline, menu de navegação, página sobre são uma ótima maneira para começar.
Uma imagem de rápida associação com seu site também é essencial nessa parte.
A ideia por trás do conceito é criar uma frase marcante que será uma referência para a
marca ou produto, ou ainda que reforçará a memória do público-alvo.
Além disso, utilize uma chamada para ajudar a expressar esses valores.
O anonimato na internet está com os dias contados e você precisa deixar claro quem
produz o blog e como ele pode ajudar o leitor.
Se transparência é um dos valores mais importantes para o seu blog, como é no Quero
Ficar Rico e no Viver de Blog, coloque também uma foto sua com um pequeno texto na
barra lateral para os leitores saberem melhor sobre sua história.
Entretanto, se você não colocar uma área de contato no seu blog, ninguém entrará em
contato com você e muitas oportunidades de negócios, parcerias, ideias serão perdidas.
Se você ainda não possui uma área de contato para o seu site, a hora é agora.
Se você coloca suas 15 categorias do blog no menu de navegação, você está fazendo
isso de modo errado.
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)
Por ser um elemento visual importante do seu site/blog, muitas pessoas clicam nele.
Porém, se ele não for clicável, seu visitante não terá uma boa experiência.
Bem simples. Basta colocar um link na imagem do logo apontando para a página inicial.
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.
Além disso, outro erro comum é colocar links com cores diferentes. Se um link é azul e
outro link é verde você também está criando confusão para o leitor.
Todos os links do blog, 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.
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.
Título do Artigo;
Imagem;
Link para continuar a leitura do artigo.
Ao impedir o leitor de clicar no título do artigo, esperando que ele clicará no “continue
lendo” (o qualquer que seja sua chamada para ação), você pode perder importantes
visitas para seu artigo.
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 vai aumentar a satisfação do leitor ao
navegar pelo seu blog.
Criar uma “salada mista” de cores é ter a certeza de confundir seus leitores.
Isso ocorre porque, ao tornar todas as cores do seu site predominantes, você está
fazendo com que nenhuma delas se destaque.
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.
Ela nada mais é do que uma descrição 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 blog.
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).
Perceba nesta frase como ao tentar CHAMAR ATENÇÃO para tudo eu não consegui
chamar atenção para NADA.
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.
A estrutura rígida deles faz com que os parágrafos sejam enormes e não haja separação
suficiente entre o texto para uma boa e agradável leitura.
Considere frases curtas para que o leitor continue lendo seu texto.
Divida seu conteúdo em vários subtítulos, como fizemos aqui nessa aula com os 23
problemas de usabilidade.
Separe seu texto com imagens também. Elas ajudam na quebra de um tópico e na
conexão do próximo.
Entretanto, assim como cores e ênfases no texto, os anúncios também devem ser
utilizados com cautela, já que o excesso de anúncios poderá fazer seu leitor sair
correndo para outro 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.
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 um anúncio.
Tem mais: se você seguir nossa estratégia de gerar renda através de vendas invisíveis
(módulo 7), é provável que você nem precise colocar banners em seu blog.
http://www.site/?p=631
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.
Supondo que a URL seja “mais-trafego”, ela irá aparecer como http://www.site/mais-
trafego.
Digo isso porque você provavelmente irá perder os números sociais de sua página e
até seu ranqueamento 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…
O seu objetivo como blogueiro é disponibilizar informação de qualidade para seus
leitores e fazer com que essas informações sejam de fácil acesso.
Garantir uma boa usabilidade do site é essencial para fazer com que novos visitantes se
tornem visitantes repentinos.
1. Site não-responsivo
2. Site extremamente lento para carregar
3. Links quebrados
4. PopUps exagerados
5. Pouco contraste entre o fundo do site e o texto
6. Tamanho da fonte minúsculo
7. Página 404 (não encontrada) não personalizada
8. Logo do site escondido ou inexistente
9. Falta de clareza na página inicial
10. Falta de uma tagline que defina algum valor do site/blog
11. A página “sobre” não existe ou está escondida
12. Não existe uma área para contato no blog
13. Menu de navegação confuso
14. Logo não redireciona a pessoa para o início do site
15. Links não parecem links (ou são difíceis de identificar)
16. Campo de busca inexistente ou difícil de encontrar
17. Resumo dos artigos na página inicial não clicáveis
18. A "salada mista” de cores
19. Imagens sem descrições apropriadas
20. Uso excessivo de negrito, itálico e caixa alta
21. Falta de uma separação clara do seu texto
22. Anúncios por toda parte
23. URLs inimigas (nada amigáveis)
Analise cada um desses itens e faça as alterações necessárias para tornar seu blog cada
É possível que através de apenas algumas simples mudanças você conseguirá números
bem melhores para a retenção do leitor no seu blog/site.