Um Simples Checkup Pode Salvar a Sua Loja Virtual

Talk apresentada para lojistas da plataforma Fastcommerce onde, além de dicas de usabilidade, também realizei a análise de 8 lojas virtuais e sugeri correções

Transcript

1. Um simples checkup pode salvar sua loja virtual
2. @vhmendrone
3. 10 Dicas
4. 10 Lojas
5. 1. Seu cliente é mais importante do que você
6. Não importa o quanto você gosta daquele banner rotativo feito com tanto capricho
7. 2. Textos longos são ignorados pela maioria dos usuários
8. Não temos tempo para conversa fiada
9. 3. Você não é o seu usuário e não pode pensar como ele
10. “Você não vê os problemas de usabilidade em seu produto porque você os criou.”
11. 4. Sites e aplicativos devem ser autoexplicativos
12. Seu cliente não deve precisar de mais do que 5 segundos para entender o seu negócio
13. 5. Pessoas criam hábitos
14. Assim que encontramos algo que funciona - não importa o quão mal - deixamos de procurar outras soluções
15. 6. Acessibilidade não é caridade! http://deividmarques.github.io/palestra-webbr2015/#/
16. “Projetando para alguém com uma deficiência permanente, alguém com uma deficiência situacional também pode se beneficiar”
17. 7. Nós criamos mapas mentais
18. Deixe clara a hierarquia de suas páginas e o caminho de volta para a página inicial
19. 8. Assista alguém navegando em sua loja
20. - Peça ao usuário que diga tudo o que passar pela cabeça dele - Deixe claro que qualquer erro que ele cometer é culpa do site e não dele - Deixe claro também que não importa o que ele diga sobre o site, você não se sentirá ofendido - Durante a navegação você não pode dar nenhuma dica - Anote tudo o que ele fizer e disser sobre o site - Se possível capture toda a navegação
21. Você provavelmente descobrirá algumas coisas
22. O que seu negócio oferece não está tão claro quanto parece
23. Navegar em sua loja pode ser um processo complicado
24. Você não enxergava o quanto estava errado
25. 9. Fale a língua do seu cliente
26. “Categorias” faz mais sentido do que “Categorama”, ainda que o segundo faça todo o sentido na linguagem do seu negócio
27. 10. Use as cores ao seu favor
28. A principal atração de sua loja virtual são seus produtos e não as cores do seu design
29. Vamos as lojas...
30. Estilous - Urban Style
31. Home Problema: Botão comprar surge ao passar o mouse Porque é um problema: Seu usuário sabe a diferença entre ver mais detalhes e adicionar o produto ao carrinho Sugestão: Remova o botão comprar ou substitua-o por um botão “Detalhes”
32. Detalhes Problema: Não existe uma informação clara de que devo selecionar a cor, tamanho e a quantidade Sugestão: Indicar com passos qual a sequencia a ser seguida Problema: O link "Clique aqui para mais detalhes" me levou erroneamente a crer que eu veria mais informações sobre as cores e tamanhos disponíveis. Sugestão: Mover o link para que fique entre a descrição curta e o preço. Problema: Clicar no link para detalhes me deixou frustrado porque encontrei, basicamente, uma descrição sobre a marca. Sugestão: Evite frustrar seu usuário dando a ele menos do que ele espera Problema: O texto para cálculo de frete diz mais do que precisa e gera confusão. Sugestão: Alterar o texto somente para "Calcular valor do frete" Problema: Não é possível selecionar cor e tamanho utilizando o teclado. É impossível para um usuário com leitor de tela realizar uma compra. Sugestão: Realizar alterações no código para que loja seja navegável via teclado
33. Detalhes Problema: Frases “Comprar mais produtos” e “Fechar pedido” podem gerar confusão Sugestão: Substituir por “Continuar comprando” e “Concluir Compra”
34. Carrinho Problema: Opção de embalagem tem baixa visibilidade Porque é um problema: As pessoas tendem a ler o mínimo possível pois apenas encontrar o caminho para o próximo passo Sugestão: Aumentar o destaque do texto
35. Teru - Artigos Para Corrida
36. Home Problema: Não existe nenhum texto indicando o que devo digitar na busca Sugestão: Inserir texto indicativo - Ex. “Digite o que procura” Problema: Uso de texto em gif animado rotativo. Porque é um problema: A escolha do gif em detrimento de texto puro gera mais uma requisição ao servidor desnecessariamente, além disso uma das frases pode gerar confusão: “Entrega imediata”, mas quando consultei o frete o prazo foi de 5 dias. Não faça o seu cliente pensar. Sugestão: Invista em uma comunicação visual mais assertiva e menos confusa
37. Home Problema: Não existe um botão de envio. Não podemos supor que o usuário vai entender que deve pressionar o “Enter” em seu teclado Sugestão: Inclusão do botão “Cadastrar” ou “Enviar” Problema: Os links não indicam visualmente quando já foram visitados ou quando estão ativos Sugestão: Utilizar CSS para definir cores diferentes para os estados : active e :visited para os links
38. Detalhes Problema: O Breadcrumb não é chamativo o suficiente Sugestão: Movê-lo mais para a esquerda e aumentar ligeiramente o tamanho da fonte Problema: Cross Selling vazio. Porque é um problema: Cria a sensação de estar uma loja com prateleiras vazias Sugestão: Todos os produtos devem ter um bom número de opções cadastradas
39. Problema: O texto de consulta de frete é longo e reduntante Sugestão: Alterar o texto para apenas “Consultar valor do frete” Problema: Uma das opções de frete foi exibida sem valor Sugestão: Checar se existe um erro no código ou remover a opção sem valor para não gerar informação inútil Sugestão bônus: Se seus produtos utilizam somente tamanho, altere o texto do botão para “Selecione o tamanho” Detalhes
40. NewMed - Breathing Health
41. Home Problema: Menus Iguais na esquerda e no topo Sugestão: Manter apenas um dos menus Problema: Abas não mostram quando estão ativas Sugestão: A navegação em abas só é útil se mostrar ao usuário qual está ativa Problema: Menus do tipo "passe o mouse" não funcionam em dispositivos touchscreen Sugestão: Implementação de script para detectar se dispositivo é touch e alterar o comportamento para exibir o menu com clique/toque Problema: Listas extensas de links sem separadores são confusas e cansativas Sugestão: Alterar o design do menu, incluindo separadores e reduzir o número de links Problema: Links do menu não indicam visualmente em qual deles cliquei Sugestão: Links clicados devem comunicar visualmente a página em que estou e também as que já visitei
42. Home Problema: Link “Institucional” leva a página com nome “Empresa” Sugestão: Alterar o texto do link para “A Empresa” Problema: Links não mostram visualmente se foram clicados ou se estão ativos Sugestão: Links clicados devem comunicar visualmente a página em que estou e também as que já visitei Problema: Ambos os links estão quebrados e apontam para uma página de erro. Ao clicar neles mais de uma vez o rodapé da loja quebra Sugestão: Inserir link correto
43. Detalhes Problema: As formas de parcelamento e desconto ficam escondidas em uma aba Sugestão: Mostrar opções de parcelamento e desconto abaixo do preço do produto Problema: O resultado da consulta ao frete aparece em duas linhas Sugestão: Manter o texto em apenas uma linha Problema (Grave): Lista de subprodutos aparece na parte inferior da página, após o bloco com as abas. Só notei que existia após passar pela página por diversas vezes. Porque é um problema: Não se deve supor que o usuário vai fazer a rolagem da página, além disso posicionar os produtos dessa forma faz parecer que são produtos diferentes. Sugestão: Alterar o design da página, movendo os subprodutos para ao lado da imagem do produto pai
44. Listagem Problema: “Destaque” está desalinhado e parece um botão, porém não é clicável Sugestão: Alterar o design do ‘botão’ de destaque Problema: Não existem informações sobre parcelamento ou desconto e o preço é pouco chamativo Sugestão: Incluir número de parcelas e desconto (se existir) e alterar design do preço
45. Sport Bike
46. Home Problema: O menu é extenso, exigindo rolagem para quem está em uma tela com pouca altura Sugestão: Dividir os links em duas ou 3 colunas Problema: Os links não tem aparencia de links, a fonte é pequena e dificil de ser clicada em um dispositivo touch Sugestão: Tornar os links maiores e mais chamativos Obs: Fiquei em dúvida se o link da categoria pai era clicável ou não
47. Custom Problema: Ao clicar em “Acompanhar Pedido” sou levado para a página do carrinho (AddProduto.asp) e não para página de pedidos (Track.asp) Sugestão: Corrigir o link Problema: Ao clicar em “Chat On-line” é aberto o chat simples da plataforma e não o Zopim. O ideal é que a comunicação via chat ocorra por um só metodo para evitar confusão Sugestão: Mantenha apenas o atendimento via Zopim e remova o segundo link
48. Detalhes Problemas: Não existe nenhum indicativo de que devo selecionar as opções para prosseguir. Só descubro caso eu erre e clique antes de selecionar. Sugestão: Inserir passos indicando que cor e tamanho devem ser selecionados Obs: O botão “Consulte-nos” é exibido para produtos sem estoque, seria melhor informar que o produto encontra-se esgotado. Problema: Em alguns produtos o parcelamento fica em branco Sugestão: Se o produto não tem opções de parcelamento a aba deve ser removida
49. Problema: A caixa de cálculo de frete se desloca para a esquerda quando o produto tem uma variedade maior de opções Sugestões: Corrigir o espaçamento para que o elemento não seja empurrado Detalhes
50. Raviana Bolsas
51. Home Problema: Busca avançada e filtro de preço parecem uma coisa só Sugestão: Itens devem ser inseridos em locais diferentes e filtro de preços deve ter legenda própria Problema: Links não indicam quando foram clicados ou quando estão ativos Sugestão: Links clicados devem comunicar visualmente a página em que estou e também as que já visitei Problema: Texto para newsletter não é explicativo. Que informações receberei? Sugestão: Alterar o texto indicando o que será enviado (Ex.: Cadastre-se para participar de promoções exclusivas) Obs: Cade o rodapé??
52. Detalhes Problema: O seletor de cor não chama a atenção e induz ao erro e a mensagem de erro não indica o local em que a cor deve ser selecionada Sugestão: Alterar o design do seletor e indicar que ele deve ser selecionado Problema: Link para indicar produto não chama atenção Sugestão: Tornar o link mais chamativo ou removê-lo
53. Detalhes Problema: Cross Selling vazio Sugestão: Todos os produtos devem ter um bom número de opções cadastradas Problema: O plugin de comentários do Facebook está com o selo “Compartilhe” Sugestão: Mover o bloco de comentários do Facebook para o selo “Comente” Problema: Aba de dicas está vazia Sugestão: Se o produto não tem nenhuma dica a aba deve ser desabilitada
54. Carrinho Problema: Barra esquerda ocupa espaço e tira atenção Sugestão: Remover a barra esquerda nas páginas de carrinho e de finalização Problema: O texto “Clique aqui para ver mais produtos de nossas categorias e continuar comprando” é longo, pouco visível e provavelmente amplamente ignorado Sugestão: Substituí-lo por um botão “Continuar comprando”
55. Carrinho Problema: Checkout passo a passo Sugestão: Ative o Xtreme Checkout
56. Thiella Schneider - Acessórios
57. Home Problema: Links no menu não indicam quando estão ativos ou se já foram visitados Sugestão: Sempre de feedback visual as ações do seu usuário Problema: O link “Quem Somos” aponta para a página “A Empresa” Sugestão: Alterar texto do link para “A Empresa”
58. Detalhes Problema: Separador dos BreadCrumbs não criam a sensação de ter seguido um caminho Sugestão: Substituir o pipe por sinal de maior ( | por > ) Problema: Cross Selling vazio cria a sensação de prateleiras vazias Sugestão: Sempre cadastre um bom número de produtos no cross selling
59. Detalhes Sugestão: Existem scripts que podem evitar que seja necessário abrir uma nova página para visualizar a imagem ampliada
60. CâmeraViva - Segurança Eletrônica
61. Home Problema: Link de login está colado ao campo de busca Sugestão: Aumentar a distancia entre ambos (Não mais do que 10px) Problema: No menu o item “Devoluções e Reembolso” está sem ícone. Sugestão: Remova o ícone dos demais itens ou adicione um ícone para essa opção Problema: Banners criam espaço desnecessário no topo e não combinam com o resto do design Sugestão: Remover os banners
62. Home Problema: Os banners estão distorcidos (esticados) e passam em alta velocidade Sugestão: É melhor um banner de alta qualidade do que 5 com baixa qualidade Sugestão 2 (Vale para todas as lojas): Não usem banners rotativos (http://arquiteturadeinformacao.com/design-de-interacao/e-se-o-carrossel-fosse- usado-nas-lojas-fisicas/)
63. Detalhes Problema: A imagem do produto está pequena Sugestão: A imagem de detalhe deve ter no mínimo o dobro do tamanho da imagem principal Problema: Tabelas de parcelamento e informação de pagamento em baixo da foto não condizem com o estilo visual adotado na loja Sugestão: Remova ou refaça o design da tabela alterando também sua posição
64. Categorias Problema: Blocos de categorias estão sem imagens de produtos Porque é um problema: Cria a sensação de espaço vazio Sugestão: Inserir imagens de categorias
65. Mistura Chic
66. Home Problema: Campo de busca pequeno e sem nenhum tipo de legenda interna ou botão Sugestão: Inserir texto “Buscar” e também incluir botão além do ícone de lupa Problema geral: É preciso repensar a paleta de cores da marca Sugestão: Um bom designer pode refazer o logo e estabelecer uma paleta de cores para a marca Problema: Não existe um caminho claro de volta para a home Sugestão: Por sua posição o logo não deixa claro que eu possa clicar nele para voltar a home. Insira um ícone ou link “Home” ou “Pagina Inicial” no topo
67. Home Problema: O ícone “<” no menu não cria a sensação de prosseguir a navegação Sugestão: Inverta sua posição para “>” Problema: As imagens de produtos, em alguns casos, ficam distorcidas (esticadas) Sugestão: Crie um padrão para suas imagens e utilize fotos de alta qualidade
68. Detalhes Problema: Botão “Comprar” vermelho Sugestão: A cor vermelha deve ser evitada em botões de compra (salvo casos em que faz parte da identidade visual da marca) Problema: A descrição do produto está imcompleta Sugestão: A descrição deve ser um texto trabalhado com cuidado e atenção e jamais deve parecer imcompleta Problema: Produtos da seção “Veja Também” só exibem imagem, sem preço ou nome Sugestão: Inclua preço e nome dos produtos
69. Outras Problema: O texto da página “Sobre nós” é demasiadamente simples Sugestão: Se o usuário clica nesse link é porque tem interesse em saber mais sobre sua empresa. Crie um texto curto porém que demonstre a atenção com sua marca/empresa Problema: A página de ajuda não ajuda em nada Sugestão: A página de ajuda deve tirar dúvidas sobre o funcionamento da loja: Como comprar, como pagar, como falar com vocês, quais as formas de entrega, qual a política de privacidade, etc.
70. Nem todos os problemas foram listados nessa avaliação
71. Todas as lojas testadas seriam reprovadas em testes de acessibilidade
72. 24% da população tem algum tipo de deficiência
73. Quantas vendas você já perdeu esse ano por não investir em acessibilidade?
74. Pense nisso.
75. Obrigado! vitor@fastcommerce.com.br @vhmendrone