Usabilidade (UX): O usuário sabe navegar no seu site?

1.260 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.260
No SlideShare
0
A partir de incorporações
0
Número de incorporações
23
Ações
Compartilhamentos
0
Downloads
27
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usabilidade (UX): O usuário sabe navegar no seu site?

  1. 1. O usuário sabe navegar no seu site?
  2. 2. Natascha Sava Hun Tecnóloga em Processamento de Dados Engenheira da Computação PHP | SEO | eCommerce | Linux | NFe Desenvolvedora www.leitorxml.com.br
  3. 3. Não me A mídia rica aprimora a experiência de usuário em alguns casos. faça Mas, no geral, a mídia pobre quepensar!!! tornará você rico.
  4. 4. Jakob NielsenPh.D em IHC (Interface Homem-Computador)Contratado pela Sun em 1994 para tornar maisfáceis as interfaces de softwarescorporativos, onde acabou se envolvendo emUsabilidade na WebMais de 200 publicações: patentes, artigos,tutoriais, livros, etc13 Livros sobre Usabilidade Eyetracking Web Usability Prioritizing Web Usability  E-Commerce User Experience ... “The king of usability“ Internet Magazine “Eminent Web usability guru“ CNN “The guru of Web page usability“ The New York Times
  5. 5. Estudo – Livro “Usabilidade na Web” Usuários dos Estados Unidos e Reino Unido 46% Homens e 54% Mulheres Idade entre 20 e 60 anos Mínimo de 01 ano de experiência no uso da web Nenhum profissional de TI, Marketing, Web Design ou de Usabilidade Remuneração US$100 pela participação no estudo Observadores próximos ou em outra sala separada por um espelho Realização de 3 ou 4 tarefas (possíveis) no site em teste 66% de sucesso – 1/3 de falha Em média, 1 min e 49 seg no site antes de abandoná-lo “Pensamento em voz alta” Gravação em vídeo do monitor e do usuário – com áudioSites TestadosGrandes Empresas Comércio Eletrônico Governo e Empresas sem Fins LucrativosNestlé Bath & Body Works American Heart AssociationHonda Motor Movies.com City of San DiegoBurger King Kitchen etc. United States Social SecurityPixar Animation Studios Atlantis, Paradise Island Administration (SSA)
  6. 6. Desabilitar o botão voltarAbrir uma nova aba/janelaJanelas pop-upPáginas SplashConteúdo densoBarra de rolagemBusca que não funcionaVídeos longosLentidãoPágina órfãURL complexaConteúdo que parece anúncio / bannerSolicitação prematura de dados / RegistroJargões / Termos próprios ou desconhecidos
  7. 7. GeralLogotipo no canto superior esquerdoEm 30 segundos: a empresa, benefícios oferecidos e navegaçãoEm média, 27 segundos por página!Oferecer análises, ideias, sugestões além de informaçõesConteúdo acima da dobra23% dos usuários rolam a barra de rolagem na Home | 42% olham a 2ª tela e em torno de 1,3 telas (máximo 2,3 telas)Quem Somos com contato+localização = credibilidadeEliminar conteúdo que possa ser confundido com bannerPrêmios sobre a empresa somente se recentesSeguir o convencional elimina repetições e instruçõesFormulários/cadastros somente se realmente necessário
  8. 8. ??????????????????????????
  9. 9. Acima da dobra: O que a empresa faz?! Produtos apresentados abaixo da dobra e ao final da tela. 77% dos usuários nãoverão os produtos na Home.
  10. 10. Página de Produtos: “Tarja” cinza larga não permite visualizar link para ver detalhes dos produto (títulos e fotos não são links) Ao rolar a barra... Link ‘Modelos’na mesma cor do texto!
  11. 11. Elimine conteúdo que possa ser confundido com banner! Qual a população dos Estados Unidos? Eye Tracking demonstra que usuários olharam para a resposta à pergunta.... ...mas a cegueira a textos/imagens grandes e coloridos fez com que não percebessem!Um usuário disse: "Eu sei onde eu provavelmente pode encontrá-lo mais rápido: o Google"
  12. 12. Redação e TipografiaVerdana, Arial: a partir 10ptFundo claro e texto escuro - Teste em escala de cinzaPalavras simples e com poucas sílabasPalavras-chave em destaqueParágrafos curtosUma ideia por parágrafoIniciar pela conclusãoTópicos quando possível, ao invés de texto densoEspaço em branco = RespiroTítulos alinhados à esquerda em minúsculocom iniciais em maiúsculo
  13. 13. Há nesta página: 03 telefones 07 e-mails 02 Endereços CentralizadoArtigo de um site de TI:Texto denso5 Rolagens de telaParágrafos longos
  14. 14. LinkMigalhas de pãoCor diferente do textoNunca usar azul em texto que não é linkAbrir na mesma janela (salvo arquivos externos)Descrição curta e objetivaMelhor mais cliques óbvios do que poucos cliques não intuitivosLinks importantes à esquerdaLinks no conteúdoBotões com ordem de prioridade alinhados verticalmenteMenus de navegação com no máximo 2 níveisLei de Fits: o tempo que se leva para clicar em um alvoé inversamente proporcional ao seu tamanho
  15. 15. Ufa! Vai dar trabalho ver todos os produtos... Alguém consegue ler?Links na cor do texto e semalteração do ponteiro do mouse!
  16. 16. Como se acessa opção abaixo de “Rádio”?
  17. 17. BuscaCanto superior direitoSuporte a 30 caracteresBotão intuitivo: Buscar | PesquisarEvitar busca avançadaSuporte a uso de aspas duplasConsiderar erros de digitaçãoAnalisar logs de pesquisaExibir resultados, redirecionar diretamente somente sebusca de item conhecido
  18. 18. Sites de Busca88% das entradas em um site ocorrem por uma ferramenta de busca93% dos usuários visitaram somente 1º página do resultado da busca53% dos usuários viram somente resultados “acima da dobra”Posição orgânica na SERP e cliques recebidos:1ª: 51% 6ª: 04%2ª: 16% 7ª: 02%3ª: 06% 8ª: 01%4ª: 06% 9ª: 01%5ª: 05% 10ª: 02%
  19. 19. MultimídiaIndependente de plugins ou instalaçõesMáximo 01 minuto de duraçãoAtenção ao vídeo é desviada após 24 segundosSe preciso aguardar carregamento, exibir progressoEvitar 3D – melhor fotos em ângulos importantesConteúdo interativo somente se for intuitivo, sem explicações
  20. 20. e-CommerceResponder pergunta básicas: Quanto custa? Como funciona? Possui quais recursos?Nunca esconder o preçoPreço na página da categoria, não somente na página individualCustos e taxas disponíveis antes do registroDivulgar opiniões dos clientesZoom em fotosBotão checkout embaixo da tabela e alinhado à direitaSe usuário não acha o produto, considera que você não o vendeUm site tem 12% de probabilidade de ser revisitado
  21. 21. Balde será que faz parte da linha Boulevard, Casa Branca, DiaDia, Oba, Sli m, Flor, Gole Gut.... ?Camiseta bonita hein.... “Quero” camiseta no “foguete de compras”?
  22. 22. Qual tamanho da bolsa?Cadê as 100pç adicionadas?
  23. 23. Eye TrackingLeitura em ‘F’Usuário lê cabeçalho (headline) antes das imagensLê somente as primeiras palavrasLê parágrafos curtosNavega melhor em menus horizontais no topostyleguide.yahoo.com/writing/write-web
  24. 24. 10 Heurísticas de Usabilidade1 – FeedbackUsuário precisa saber o que está acontecendo.Ex.: barra de progresso durante um carregamento.2 – Língua do UsuárioLinguagem simples, fácil e conhecida – sem termos difíceis ou palavras próprias.Ex.: produtos classificados por nomes da Sanremo; “foguete de compras”, siglas próprias.3 –Liberdade de AçãoUsuário precisa saber fácil e rapidamente o que fazer se tiver realizado uma ação errada.Ex.: botão Voltar habilitado, links “migalhas de pão”.4 – PadrãoManter o mesmo padrão e linguagem em todo o site, interface coerente.Mesmo layout em todas as páginas.5 – Prevenção ao ErroEvite que o usuário cometa erros – evitará perda de tempo e ações indesejadas.Adotar o convencional.
  25. 25. 6 – ReconhecimentoEvite que usuário tenha que pensar como proceder ou lembre-se o que fez anteriormente.Navegação previsível, intuitiva; instruções visíveis e fáceis.7 – FlexibilidadeOfereça facilidades a usuários experientes.Ex.: teclas de atalho.8 – SimplicidadeElementos ou mensagens desnecessárias devem ser eliminadas.Conteúdo desnecessário desvia a atenção do usuário ou induz a erro.9 – Mensagem de Erro ClaraSe usuário errar, é preciso informar claramente onde foi o erro e instruções de como proceder.Ex.: destacar campos de formulário com erros e como deverá ser preenchido.10 – AjudaIdeal que não se precise de ajuda, mas pode ser preciso – e de fácil acesso.Ex.: FAQ, busca, tooltips, chat online.
  26. 26. Não me faça pensar!Evitar situações de raciocínio para tomar uma açãoA página deve ser auto-explicativa, usuário sempre tem pressa.Eliminar palavras desnecessárias, ir direto ao pontoUsar descrições óbviasEx.: “comprar” é mais óbvio do que “quero”.Link para retornar à página inicial em todas as páginasCaixa de busca em todas as páginasNome (Título) da página ao alto antes do conteúdoDestacar no menu o link da localização atualNão importa o nº de cliques para encontrar o destino,mas que sejam óbvios, sem “esforços”
  27. 27. Usabilidade ... Acessibilidade alt em imagens label e title em formulários Links que descrevam o destino Texto legível sem cores Sequência lógica na tabulação ISO 9241 Usabilidade ... Navegabilidade!
  28. 28. Ferramentas – Mapa de Cliqueswww.labsmedia.com/clickheat
  29. 29. Ferramentas – Movimento do Mouse e Rolagem de Telawww.clicktale.com
  30. 30. Ferramentas – Dobra de Páginabrowsersize.googlelabs.com
  31. 31. Ferramentas – Teste A/B 36% a mais de compartilhamento 34% de aumento nas vendas de serviços após adição de testemunhos de clientes
  32. 32. Ferramentas – Teste A/B O nº de vendas em checkout de página única superou em 21% o checkout em vários páginas.
  33. 33. Ferramentas – Teste A/B Aumento de 60% nas inscrições após remover o formulário de inscrição!
  34. 34. Ferramentas – Teste A/B 30% a mais de inscrições após trocar vídeo por imagens deslizantes
  35. 35. Ferramentas – Teste de Usabilidade Observadores atrás do usuário Observadores atrás de um espelho Gravação da tela - Camtasia Gravação da expressão do usuário
  36. 36. Ferramentas – Velocidade Avalie a velocidade de seu site PageSpeed + YSlow www.gtmetrix.comDiminua tamanho de imagens comYahoo! Smush.it - www.smushit.com
  37. 37. ServiçosSite FácilAvalia a usabilidade de sites ou de qualquer outra interface, como intranets, hotsites,cursos online e softwares.Por meio de análises técnicas e de testes com usuários, são propostas soluções para tornaro canal eletrônico mais efetivo e agradável ao público.www.ibope.com.br
  38. 38. Obrigada! Leitura e Links nshgeek www.useit.com @nshgeek www. usability.gov nshgeek@gmail.com www. nngroup.com www.usereffect.com br.linkedin.com/in/nataschash www.chocoladesign.com slideshare.net/nshgeek www.semanticstudios.com uxdesign.smashingmagazine.com

×