Esses dias li novamente um livro clássico de usabilidade e percebi o quanto ainda é atual (por isso que ainda é um clássico!). “Não me faça Pensar” de Steve Krug é um daqueles livros leves, diretos e fácil de ler, como as principais regras de usabilidades citadas no livro. Decidi então resumir, por capítulo, os principais pontos permeados com as minhas impressões.
Capítulo 1 – Seja óbvio e elimine perguntas
Um site precisa ser óbvio e fácil de forma que o usuário não precise pensar, ou seja, algo que deve ser autoexplicativo, evidente. Nesse sentido, tome cuidado com os call to actions que não são óbvios ou expressões corporativas comuns dentro da sua empresa mas que o usuário não entende.
Elimine perguntas: não gere dúvidas que possam confundir o usuário.
A página deve ser clara de forma que o usuário possa localizar o que busca sem pensar muito.
Capítulo 2 – Como as pessoas usam um site
O comportamento dos usuários e leitores é menos racional do que imaginamos quando projetamos um site. As pessoas não meditam profundamente sobre cada página. De fato, em geral as pessoas examinam as páginas em busca do que procuram de forma rápida.
Os leitores observam aquilo que está em sua mente. Tendem a focar nas palavras e expressões do seu interesse. Aqui está a importância de utilizar palavras-chave relacionadas ao tema. Essa é uma das primeiras atividades básicas de um bom check-list de SEO.
Os usuários devido a pressa e a baixo penalidade por tomar uma decisão não buscam a opção ideal. Eles escolhem a primeira opção razoável, o suficiente.
O máximo que pode acontecer é clicar no botão voltar e recomeçar a busca. Isso mostra mais uma vez como os usuários não são tão racionais.
Capítulo 3 – Iniciando a construção do site – Convenções e hierarquia visual
Em geral, usuários não tem interesse em saber como as coisas funcionam.
O importante é saber usar e obter o que procura.
Nesse sentido, se encontram algo que funciona, irão aderir. Elimine tudo aquilo que faz as pessoas perderem tempo.
Vá direto ao ponto. Lembre-se que as pessoas tem pressa!
Convenções
O uso de convenções da web facilitam a navegação e o entendimento por parte dos usuários. Isso significa que as pessoas não precisaram deduzir como funciona o seu site.
Se for inovar deve ser por 2 motivos:
- Tornar algo mais claro e autoexplicativo
- Entregar muito valor e para isso é importante medir!!!
Adicione recursos que são usáveis e tragam valor!
Hierarquia Visual
Estabeleça uma hierarquia visual a fim de organizar e priorizar o conteúdo de forma que ajude o usuário a entender instantaneamente.
Divida as páginas em áreas claramente definidas e permita que o leitor busque o que procura com facilidade.
Dicas para criar uma hierarquia visual:
- Deixe óbvio o que pode ser clicado. Por exemplo, use a mesma cor para todos os links de texto.
- Elimine tudo que não faz da parte da solução do problema para evitar confusão ou fuga do usuário.
- Com relação ao texto do seu site, formate para facilitar ao leitor. Por exemplo, use vários cabeçalhos para separar o texto e criar seções.
- Dê pesos diferentes a cabeçalhos. Assim o leitor pode decidir o que ler e examinar.
- Priorize parágrafos curtos.
- Use listas como marcadores.
- Dê destaques as palavras-chave.
Capítulo 4 – Ajude o usuário a fazer escolhas
Os usuários frequentemente devem fazer escolhas. Nestes casos dê orientações para o usuário de forma breve, oportuna e inevitável.
O lema é tornar esse processo de decisão o mais irracional possível sempre a favor da usabilidade.
Veja que no exemplo abaixo do site da empresas de gás LP, Supergasbras, no menu exposto do header temos 2 opções muito parecidas que pode confundir o usuário: Para Casa e Para Condomínio. Afinal, o usuário pode morar num condomínio de casas, certo? Em resumo, torne as escolhas fáceis e óbvias.
| Breve | Oportuna | Inevitável |
| Menor quantidade possível de informação | Para que a encontre no momento certo | Formatada de uma forma que será notada |
Capítulo 5 – Revise e elimine o conteúdo desnecessário
Elimine o conteúdo desnecessário. Não faço rodeios. Além da pressa do usuário, um texto longo e sem propósito pode gerar ruído e levar ao abandono da página.
Componente de busca
A busca é fundamental para um site. Existem usuários que ao entrar num site já procuram de imediato as ferramentas de buscas. São pessoas que não querem perder tempo e confiam no retorno do resultado da busca do site. Se um usuário não localizar o que procura, ficará frustrado e provavelmente abandonará o site.
É interessante como alguns sites aplicam na buscas as especificações da forma como o usuário pode realizar o processo de buscar o item. Veja abaixo o exemplo do site da Centauro, loja de materiais esportivos.
Capítulo 6 – Componentes que ajudam o usuário na navegação
A navegação de um site tem como principais funções identificar onde o usuário está e ajudá-lo na busca do que procura. Além disso, a navegação auxilia o usuário a utilizar o site e explica o que existe naquele site. Portanto, é a navegação bem planejada que gera uma boa impressão do site.
A navegação não é apenas uma característica do site. Ela é o site, da mesma forma que o prédio, as prateleiras e as caixas registradoras são a loja. Sem ela, não existe lá. – Steve Krug, 2014
Krug destaca quatro elementos principais de navegação:
- ID do site: é a identificação do site. A marca, logotipo ou nome do site que irá auxiliar o usuário a se localizar. É uma confirmação instantânea de onde o usuário está. Muitos usuários esperam que ao clicar no ID do site, sejam direcionado para a home. Ter um botão ou link que leve sempre para home é primordial.
- Seções: São links para as categorias principais do site, ou seja, para as páginas internas do site.
- Serviços: São links para outras páginas importantes que auxiliam a utilizar o site. Por exemplo, página de cadastro, mapa do site, ajuda, página sobre o site, etc.
- Busca: já citado anteriormente a busca é muito importante para auxiliar o usuário na navegação e ir direto no que procura.
Não ignore as páginas internas do site. Elas são tão importantes quanto as demais. É fundamental ter páginas de exemplos e wireframes de todos os potenciais níveis do site antes de avaliar e definir o estilo de cores e tipografia da home, por exemplo. Portanto, você deve dá atenção para todos os níveis do site.
O nome da página é um elemento para orientar o usuário. Portanto, todas as páginas precisam de um nome e eles devem estar no lugar certo, isto é, vinculado ao conteúdo específico dessa seção.
Como óbvio precisa ser dito, ao clicar num nome de uma página, o usuário deve ser levado de fato para a página desse conteúdo.
Um ponto interessante é deixar claro para o usuário onde ele está, por exemplo destacando no menu a seção onde o usuário se encontra. Pode ser com negrito, uma cor diferente, alterando a cor do botão, entre outros. Veja o exemplo abaixo do site Fast Company.
Outro elemento importante que auxilia o usuário na navegação são as “migalhas de pão” que mostram o caminho desde a primeira página e facilita o usuário a voltar para níveis mais altos da hierarquia do site. Para sites com muitos níveis de hierarquia esse é um elemento que funciona bem.
Vale mencionar que as boas práticas colocam as “migalhas” no topo da página e usa o caractere maior que (>) para separar itens, conforme exemplo abaixo do site do Booking.
Um outro indicador de localização é o uso de abas que segundo o autor é um artifício autoevidente e fácil de ser visto.
A maioria dos usuários chega no seu site em uma página interna, ou seja, não passam primeiramente pela home. Usamos motores de buscas ou somos impactados em redes sociais. A partir destes canais chegamos nos sites e na maioria das vezes vamos direto para uma página interna. Por isso é fundamental destacar os elementos de localização e identificação do site para ajudar o usuário na navegação.
Veja no exemplo abaixo. Procurei no Google por hotéis em Petrópolis, Rio de Janeiro. Um dos resultados foi essa página do site da agência de viagem HURB. Revendo o check list:
- ID do site: sim, a direita.
- Nome da página: Sim, Hotéis em Petrópolis.
- Seção: sim, hotéis está destacado em verde e ainda sublinhado.
- Indicadores de localização: sim, destaque da seção.
- Pesquisa: sim, a busca fica bem em destaque próximo ao header da página. Ocupa espaço de ponto a ponta e cor contrastante.
Capítulo 7 – Home: esclarecendo o propósito do site
A homepage é a pagina que todos querem um pedaço. Por isso é importante ter em mente que o papel da home é responder a cinco perguntas principais:
O que é isto?
O que posso fazer aqui ?
O que eles tem aqui?
Por que devo estar aqui e não em algum outro site?
Por onde devo começar?
Mesmo que a maior parte da origem do seu tráfego entre pelas páginas internas, muitos usuários visitam a home para obter mais dados do site e até encontrar outras orientações. Neste sentido, a home deve englobar alguns componentes conforme lista abaixo:
- Identidade e a missão do site
- Busca
- Hierarquia do site
- Promover o conteúdo do site
- Conteúdo atualizado
- Publicidade
- Promover recursos para experimentar outras seções ou funcionalidades do site (recirculação)
- Teases: atrair o usuário com dicas do site.
- Atalhos
- Captação de cadastros
Existem componentes que podem ajudar a estabelecer uma comunicação mais clara com o usuário sobre a missão do site:
- Slogan
- Resumo de boas-vindas
- Inclua um “Saiba Mais” para o leitor que quer se aprofundar no tema.
- Teste, teste, teste!! Mostre a home para pessoas de fora da organização e veja se elas captaram o propósito do site.
Vale mencionar o cuidado que devemos ter para não sobrecarregar a home. Utilize recursos como revezamento de espaço e até promova outras página populares como alternativas.
Capítulo 8: o mito do usuário médio
Ao pensar numa página web ou num aplicativo tendemos a pensar que os usuários pensam como a gente.
A grande verdade é que os usuários são únicos.
Quanto mais você observa e analisa as ações dos usuários, mais percebe suas reações e motivações. O caminho de definição de escolhas de experiência e navegação sempre devem passar por testes.
Testar, testar, testar!
Os testes evitam aquelas discussões desnecessárias que só desgastam o time.
Capítulo 9: Testes de usabilidade
Testes de usabilidade são diferentes de discussões de grupo (Grupo Focal)
Um grupo focal te ajuda no início do projeto, na etapa de planejamento. Sua função é ajudar a descrever as personas e a testar se a sua ideia vai efetivamente ajudar as pessoas resolveram um problema.
Testes de usabilidade ocorrem durante o processo de criação do site ou aplicativo. Tem como escopo observar as pessoas utilizando o produto a fim de detectar pontos que confundem ou frustram o usuário.
Importante: não é necessário consertar todos os problemas e nem ter uma solução perfeita e definitiva. Mudanças em parte já podem ajudar a reduzir o ruído causado pelo problema.
Este é um tópico tão importante que já dediquei um post exclusivo para os testes de usabilidade e metodologia proposta por Steve Krug. Veja aqui.
Entenda como adaptei os testes de usabilidade numa sprint. Leia aqui.
Capítulo 10: Móbile First
O autor destaca a metodologia Móbile First na qual se desenvolve primeiro a versão móbile do site e depois se cria a versão desktop adicionando novos recursos. Contudo, esse processo pode excluir componentes do móbile de forma equivocada.
Temos que levar em consideração que as pessoas utilizam o celular em várias situações como no sofá de casa e não apenas no trânsito. Neste sentido, o autor argumenta que temos que ter cuidado ao excluir funcionalidades do móbile.
Recursos utilizados com mais frequência devem estar mais explícitos, à mão do usuário.
Os demais recursos podem estar a alguns toques de distância. Consequentemente, no móbile as pessoas darão mais toques.
Sem problemas. O resultado é um site com mais profundidade.
O importante é priorizar a disposição dos recursos e não impactar negativamente na usabilidade.
Steve Krug destaca 3 características para aplicativos móbile:
| Características para aplicativo Móbile: | Conceito: |
| Agradabilidade | Agradável, cativante, impressionante. Design centrado no usuário. |
| Aprendabilidade | Fácil de aprender e usar. Pode incluir instruções com dicas fundamentais de uso. Ex: Onboarding de aplicativos |
| Inesquecibilidade | Aprender rápido e não esquecer como realizar as principais tarefas. É um fator decisivo para o uso regular do aplicativo. |
Capítulo 11: a reserva de boa vontade dos usuários
Todo usuário quando entra num site ou em um aplicativo tem um limite de boa vontade para entender o site e localizar aquilo procura. A reserva de boa vontade é situacional e pode ser reabastecida desde que você mostre que desenvolve orientado para os interesses dos usuários.
Esconder informações de contas, enganar, solicitar informações pessoais desnecessárias são fatores que podem diminuir a boa vontade do usuário. Em tempos de LGPD (Lei Geral de Proteção de Dados) isso nem deveria acontecer.
Torne visível aquilo que as pessoas mais buscam no seu site. Deixe claro as respostas às perguntas dos usuários, por exemplo com uma FAQ atualizada constantemente.
Ajude as pessoas a economizarem tempo no processo. Mostre empenho e quanto está focado nos interesses do usuário.
Seja útil!!! Essas são formas de aumentar a boa vontade dos usuários.
Capítulo 12: Acessibilidade
Para o autor acessibilidade para sites passa por um processo de inclusão. O principal e real motivo é melhorar a vida das pessoas e dá oportunidades. “É o certo a se fazer”.
Para começar, sugere a leitura e a aplicação das principais diretrizes de acessibilidade para conteúdo da web disponível, em português, neste site.
Para o autor consertar os problemas de acessibilidade que confundem qualquer usuário já é um bom começo. Para isso é necessário manter a constância nos testes.
A melhor forma de aprender a tornar algo mais usável é observar as pessoas tentando usá-lo.
Steve KRUG, 2014
Ao analisar e listar os principais fatores de acessibilidade comece pelo mais simples. Por exemplo:
- Adicione texto alternativos para cada imagem.
- Torne todo o conteúdo acessível pelo teclado.
- Use a estrutura de títulos: H1, H2, H3 para organizar a hierarquia lógica do site.
- Crie contraste entre o texto e o plano de fundo.
O autor propõe ainda a leitura de outros artigos e livros:
- “Guideles for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers” disponível aqui.
- Artigos disponíveis no site Webaim.org, Web Accessibility in mind. Clique aqui para acessá-los.
- Livro: “Web Acessibility: Web Standards and Regulatory Compliance”, de Jim Thatcher. Disponível na Amazon. Veja aqui.
Capítulo 13: Recomendações
Boa parte dos profissionais dos time de produto, no Brasil, encontram resistências para implementar uma rotina de testes com usuários. O tema da usabilidade e design centrada no usuário ainda são tratados com certa superficialidade por algumas empresas.
Steve Krug dá algumas dicas fundamentais para ajudar os times de produtos a envolver as outras áreas da empresa:
- Destaque o retorno do investimento (ROI).
- Fale na língua deles, ou seja, utilize os jargões conhecidos dentro da empresa. Entenda quais os problemas corporativos e descreva os esforços para solucionar de uma forma que eles entendam.
- Leve os gestores para observar um teste de usabilidade.
- Demonstre empatia com as lideranças. Coloque-se verdadeiramente no lugar deles. Já fiz esse exercício algumas vezes e pude observar que a pressão por resultado de acionistas e a falta de conhecimento técnico podem obscurecer uma tomada de decisão. Portanto, os ajude a entender o valor de UX usando algo que os motive e que atenda os principais problemas enfrentados por eles.
- Teste! Comece um teste informal de maneira simples. Encontre voluntários sem custo.
- Tenha humildade! Compartilhe o que sabe. Você não é o dono da verdade. Seu papel não é dizer como as coisas devem ser feitas.
Usabilidade tem relação com prestar melhores serviços através da entrega de produtos focados em resolver problemas para os usuários. Para te mostrar como é possível realizar testes de usabilidade sem sofisticação compartilho a minha experiência de como incluí na rotina de uma sprint de 5 dias essa prática. Veja aqui.
- O que é essa tal North Star?
- Gestão de produto: leituras obrigatórias para iniciantes
- Duração média de sessão e o tempo médio na página: entenda o uso dessas métricas
- Como construir dashboard CrUX e acompanhar as métricas de experiência de usuário
- CLS (Cumulative Layout Shift): avaliação da estabilidade visual
Gestão de produto & Performance 