usabilidade (ux): o usuário sabe navegar no seu site?

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


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


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)


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


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"


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


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”?


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


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


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


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?


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


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.


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.


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!


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!


Ferramentas – Mapa de Cliques

www.labsmedia.com/clickheat


Ferramentas – Movimento do Mouse e Rolagem de Tela

www.clicktale.com


Ferramentas – Dobra de Página

browsersize.googlelabs.com


Ferramentas – Teste A/B36% a mais de compartilhamento

34% de aumento nas vendas de serviços após adição de testemunhos de clientes


Ferramentas – Teste A/B

O nº de vendas em checkout de página única superou em 21% o checkout em vários páginas.



Aumento de 60% nas inscrições após remover o formulário de inscrição!



30% a mais de inscrições após trocar vídeo por imagens deslizantes


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


Ferramentas – VelocidadeAvalie a velocidade de seu site

PageSpeed + YSlowwww.gtmetrix.com

Diminua tamanho de imagens comYahoo! Smush.it - www.smushit.com


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!


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

[email protected]

br.linkedin.com/in/nataschash

slideshare.net/nshgeek

usabilidade (ux): o usuário sabe navegar no seu site?

Technology