O usuário sabe navegar no seu site?
UX
UX O usuário sabe navegar no seu site?
Natascha Sava Hun Tecnóloga em Processamento de Dados Engenheira da Computação
PHP | SEO | eCommerce | Linux | NFe
Desenvolvedora www.leitorxml.com.br
UX O usuário sabe navegar no seu site?
A mídia rica aprimora a experiência de usuário
em alguns casos.Mas, no geral,
a mídia pobre que tornará você rico.
Não me faça
pensar!!!
Ph.D em IHC (Interface Homem-Computador)Contratado pela Sun em 1994 para tornar maisfáceis as interfaces de softwares corporativos, onde acabou se envolvendo em Usabilidade na WebMais de 200 publicações: patentes, artigos,tutoriais, livros, etc13 Livros sobre Usabilidade
Eyetracking Web Usability Prioritizing Web Usability E-Commerce User Experience ...
Jakob Nielsen
“The king of usability“
Internet Magazine
“The guru of Web page usability“
The New York Times
“Eminent Web usability guru“
CNN
UX O usuário sabe navegar no seu site?
Estudo – Livro “Usabilidade na Web”Usuários dos Estados Unidos e Reino Unido46% Homens e 54% MulheresIdade entre 20 e 60 anosMínimo de 01 ano de experiência no uso da webNenhum profissional de TI, Marketing, Web Design ou de UsabilidadeRemuneração US$100 pela participação no estudo
Observadores próximos ou em outra sala separada por um espelhoRealização de 3 ou 4 tarefas (possíveis) no site em teste66% de sucesso – 1/3 de falhaEm 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 áudio
Grandes EmpresasNestléHonda MotorBurger KingPixar Animation Studios
Sites TestadosComércio EletrônicoBath & Body WorksMovies.comKitchen etc.Atlantis, Paradise Island
Governo e Empresas sem Fins LucrativosAmerican Heart AssociationCity of San DiegoUnited States Social Security Administration (SSA)
UX O usuário sabe navegar no seu site?
Desabilitar o botão voltarAbrir uma nova aba/janelaJanelas pop-up
Conteúdo densoBarra de rolagem
Vídeos longos
Página órfã
Busca que não funciona
Lentidão
URL complexa
Páginas Splash
Solicitação prematura de dados / RegistroJargões / Termos próprios ou desconhecidos
Conteúdo que parece anúncio / banner
UX O usuário sabe navegar no seu site?
Logotipo no canto superior esquerdoEm 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çõesConteú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 = credibilidadeEliminar conteúdo que possa ser confundido com bannerPrêmios sobre a empresa somente se recentesSeguir o convencional elimina repetições e instruçõesFormulários/cadastros somente se realmente necessário
Geral
?????????????
?????????????
Acima da dobra:O que a empresa faz?!
Produtos apresentadosabaixo da dobra
e ao final da tela.
77% dos usuários nãoverão os produtos na Home.
Página de Produtos:
“Tarja” cinza larga não permitevisualizar link para verdetalhes dos produto
(títulos e fotos não são links)
Ao rolar a barra...
Link ‘Modelos’ na mesma cor do texto!
Elimine conteúdo que possa ser confundido com banner!UX O usuário sabe navegar no seu site?
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"
UX O usuário sabe navegar no seu site?
Verdana, Arial: a partir 10ptFundo claro e texto escuro - Teste em escala de cinzaPalavras simples e com poucas sílabasPalavras-chave em destaqueParágrafos curtosUma ideia por parágrafoIniciar pela conclusãoTópicos quando possível, ao invés de texto densoEspaço em branco = RespiroTítulos alinhados à esquerda em minúsculocom iniciais em maiúsculo
Redação e Tipografia
Há nesta página:
03 telefones07 e-mails02 Endereços
Centralizado
Artigo de um site de TI:
Texto denso5 Rolagens de telaParágrafos longos
UX O usuário sabe navegar no seu site?
Migalhas de pãoCor diferente do textoNunca usar azul em texto que não é linkAbrir na mesma janela (salvo arquivos externos)Descrição curta e objetivaMelhor mais cliques óbvios do que poucos cliques não intuitivosLinks importantes à esquerdaLinks no conteúdoBotões com ordem de prioridade alinhados verticalmenteMenus de navegação com no máximo 2 níveisLei de Fits: o tempo que se leva para clicar em um alvo é inversamente proporcional ao seu tamanho
Link
Alguém consegue ler?
Ufa!Vai dar trabalho ver todos os produtos...
Links na cor do texto e semalteração do ponteiro do mouse!
Como se acessa opção abaixo de “Rádio”?
UX O usuário sabe navegar no seu site?
Canto superior direitoSuporte a 30 caracteresBotão intuitivo: Buscar | PesquisarEvitar busca avançadaSuporte a uso de aspas duplasConsiderar erros de digitação Analisar logs de pesquisaExibir resultados, redirecionar diretamente somente sebusca de item conhecido
Busca
UX O usuário sabe navegar no seu site?
88% das entradas em um site ocorrem por uma ferramenta de busca93% dos usuários visitaram somente 1º página do resultado da busca53% 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%
Sites de Busca
UX O usuário sabe navegar no seu site?
Independente de plugins ou instalaçõesMáximo 01 minuto de duraçãoAtenção ao vídeo é desviada após 24 segundosSe preciso aguardar carregamento, exibir progressoEvitar 3D – melhor fotos em ângulos importantesConteúdo interativo somente se for intuitivo, sem explicações
Multimídia
UX O usuário sabe navegar no seu site?
Responder pergunta básicas: Quanto custa? Como funciona? Possui quais recursos?
Nunca esconder o preçoPreço na página da categoria, não somente na página individualCustos e taxas disponíveis antes do registroDivulgar opiniões dos clientesZoom em fotosBotão checkout embaixo da tabela e alinhado à direita
Se usuário não acha o produto, considera que você não o vendeUm site tem 12% de probabilidade de ser revisitado
e-Commerce
Balde será que faz parte da linha Boulevard, Casa Branca, DiaDia, Oba, Slim, Flor, Gole Gut.... ?
“Quero” camiseta no “foguete de compras”?
Camiseta bonita hein....
Cadê as 100pç adicionadas?
Qual tamanho da bolsa?
UX O usuário sabe navegar no seu site?
Eye TrackingLeitura em ‘F’Usuário lê cabeçalho (headline) antes das imagensLê somente as primeiras palavrasLê parágrafos curtosNavega melhor em menus horizontais no topo
styleguide.yahoo.com/writing/write-web
UX O usuário sabe navegar no seu site?
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ão Manter 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.
UX O usuário sabe navegar no seu site?
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.
UX O usuário sabe navegar no seu site?
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 pontoUsar descrições óbviasEx.: “comprar” é mais óbvio do que “quero”.
Link para retornar à página inicial em todas as páginasCaixa de busca em todas as páginasNome (Título) da página ao alto antes do conteúdoDestacar no menu o link da localização atualNão importa o nº de cliques para encontrar o destino,mas que sejam óbvios, sem “esforços”
Não me faça pensar!
UX O usuário sabe navegar no seu site?
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 ... Acessibilidade
Usabilidade ... Navegabilidade!
UX O usuário sabe navegar no seu site?
Ferramentas – Mapa de Cliques
www.labsmedia.com/clickheat
UX O usuário sabe navegar no seu site?
Ferramentas – Movimento do Mouse e Rolagem de Tela
www.clicktale.com
UX O usuário sabe navegar no seu site?
Ferramentas – Dobra de Página
browsersize.googlelabs.com
UX O usuário sabe navegar no seu site?
Ferramentas – Teste A/B36% a mais de compartilhamento
34% de aumento nas vendas de serviços após adição de testemunhos de clientes
UX O usuário sabe navegar no seu site?
Ferramentas – Teste A/B
O nº de vendas em checkout de página única superou em 21% o checkout em vários páginas.
UX O usuário sabe navegar no seu site?
Ferramentas – Teste A/B
Aumento de 60% nas inscrições após remover o formulário de inscrição!
UX O usuário sabe navegar no seu site?
Ferramentas – Teste A/B
30% a mais de inscrições após trocar vídeo por imagens deslizantes
UX O usuário sabe navegar no seu site?
Ferramentas – Teste de Usabilidade
Observadores atrás do usuárioObservadores atrás de um espelhoGravação da tela - Camtasia
Gravação da expressão do usuário
UX O usuário sabe navegar no seu site?
Ferramentas – VelocidadeAvalie a velocidade de seu site
PageSpeed + YSlowwww.gtmetrix.com
Diminua tamanho de imagens comYahoo! Smush.it - www.smushit.com
UX O usuário sabe navegar no seu site?
Serviços
Site Fácil Avalia 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 tornar o canal eletrônico mais efetivo e agradável ao público.
www.ibope.com.br
Obrigada!
UX O usuário sabe navegar no seu site?
Leitura e Linkswww.useit.com
www. usability.gov
www. nngroup.com
www.usereffect.com
www.chocoladesign.com
www.semanticstudios.com
uxdesign.smashingmagazine.com
nshgeek
@nshgeek
br.linkedin.com/in/nataschash
slideshare.net/nshgeek