Webinar Usabilidade no E-commerce

Julho 2012 Horácio Soares

Fonte: http://commons.wikimedia.org/wiki/File:26220022.jpg

Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

O que os
clientes/usuários
buscam em um
e-commerce?

e o que as empresas
esperam?

aumentar a
satisfação dos clientes
e obter mais lucro...

Todos querem o melhor osso…

Mulher com notebook em sinal de ok
Cachorrinho caregando um enorme osso.

com uma
experiência de
qualidade...

Acertando
o tiro certo
no alvo certo

“uma conspiração
para o sucesso”

Mas falta de estratégia e
planejamento resulta em…

Afinal, o que é eXperiência
do Usuário (UX) ?

“
eXperiência do
Usuário (UX) é a
qualidade da
experiência que uma
pessoa tem ao
interagir com algo

”
projetado.
uxnet.org

exemplos de
experiências ruins…

•  uma experiência de
paciência, muita paciência…

•  Ambos exemplos
apresentam problemas que
seriam evitados com
planejamento e testes de
usabilidade...

Como projetar
para a eXperiência
do Usuário?

http://semanticstudios.com/publications/semantics/000029.php

http://semanticstudios.com/publications/semantics/000029.php

http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg

Entretanto, a experiência
pertence as pessoas.

O designer/desenvolvedor
não projeta a experiência…
Projeta para a
experiência do usuário.

Objetivos Reais
e metas necessidades
do projeto dos usuários

Marte Vênus
Objetivos e metas da empresa Necessidades dos usuários

empresa
Objetivos
e metas do
projeto Necessidades
dos
usuários
usuários

Um caminho: modelagem participativa

Um outro caminho
vem da busca pelas melhores
IDADES

Conformidade com
o decreto de lei
Decreto nº 5.296
(dez/04) e com a
convenção da ONU
que ganhou força de
lei Decreto nº 6.949
(ago/09).

}
Acessibil
Usabil

IDADE

Pessoas com
pouca
experiência e
medo do
computador

Comercial
Mercado Livre
“Eu compro o
que quiser, 2011
senão quiser,
não compro”
Comercial do Mercado
Livre 2011

}
Acessibil
Usabil
Simplic

IDADE

10 princípios de UX do Google

Princípio 3. O simples é poderoso.

Em uma interface perfeita,
as pessoas nunca deveriam
errar, principalmente ao
fazer uma compra…

}
Acessibil
Usabil
Simplic
Interativ
IDADE

}
Acessibil
Usabil
Simplic
Interativ
Veloc IDADE

Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/


Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

}
Acessibil
Usabil
Simplic
Interativ
Veloc
IDADE
Encontrabil

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ


Princípio 8 – agrade aos olhos sem
distrair a mente

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util


Princípio 1 – foque nas pessoas: suas
vidas, trabalho, sonhos.

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Observação e identificação
de um problema...

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util
Facil

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util
Facil
Portabil
…

A melhor idade vem da:

}
Investigação
Observação
Colaboração
Análise
Avaliação
Validação

Sitemap - fluxo

Antes de prototipar, crie coletivamente

(designers, arquitetos de informação,
desenvolvedores front/back, analista de
negócios, gerentes, etc.)

fluxos com os principais passos dos
clientes em seu site/sistema.

Um Vocabulário Visual para AI e Design de Interação
http://iainstitute.org/pt/translations/000332.html

http://migre.me/wI0X

Um Vocabulário Visual para AI e Design de
Interação
http://iainstitute.org/pt/translations/000332.html - http://migre.me/wI0X
O vocabulário é baseado em um modelo
conceitual simples que engloba
arquitetura de informação e design de
interação:

•  O sistema mostra caminhos ao usuário.
•  O usuário move-se ao longo destes
caminhos por meio de ações.
•  Estas ações fazem, então, com que o
sistema gere resultados.

horizontal gluedot
is attached to the end of this arrow

vertical gluedot
is attached to the end of this arrow

http://www.jjg.net/ia/visvocab/garrett_ia_ppt.zip

Protótipos

Depois, crie
“coletivamente" protótipos
em papel, em computador...

Prototipação
A prototipagem é uma cultura de projeto:
•  Ferramenta de colaboração
•  Ajuda a controlar o risco
•  Propicia descobertas felizes (sorte!)
•  Modo rápido e barato de resolver
problemas

Faber Ludens – Érico Fileno

“Erre logo para ser bem
sucedido mais cedo.” IDEO


•  O único jeito de você descobrir
se aquela idéia funciona ou não
é com um protótipo!


Wireframe
Wireframe não especifica
design gráfico.
Sua função é apresentar os
elementos que vão compor a
página.

http://migre.me/wICa

http://www.flickr.com/photos/callendercreates/3055332137/sizes/o/in/set-72157611343470237/

Usabilidade
Usabilidade é definida como a
capacidade que um sistema
interativo oferece a seu
usuário, em um determinado
contexto de operação, para a
realização de tarefas, de
maneira eficaz, eficiente e
agradável (ISO 9241).

Desenhar sistemas com
usabilidade significa
proporcionar ao usuário:

(ISO 9241-11 / International Standards Organization)
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share

1 - Efetividade
Um site com boa efetividade permite
que o usuário alcance os objetivos
iniciais de interação.

Exemplos:
- Percentual de usuários que completam a
tarefa com sucesso.
- Número de erros do usuário.
- Taxa de interações com sucesso/erros.

Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/

2 - Eficiência
É a quantidade de esforço necessário
para se chegar a um determinado
objetivo. Quanto menos esforço o
usuário tiver, melhor.
Exemplos:
- Tempo para completar uma tarefa.
- Tempo gasto usando a ajuda ou
documentação.
- Tempo de aprendizagem


3 - Satisfação
Talvez seja a mais difícil de medir e
quantificar, pois pode estar relacionada a
fatores altamente subjetivos. Geralmente
a satisfação se refere ao nível de conforto
ao utilizar a interface.
Exemplos:
- Nota da satisfação do usuário.
- Proporção de afirmações durante o teste que são
positivas / negativas.
- Proporção de usuários que dizem que eles preferem
usar o sistema do que o de algum concorrente.
- Freqüência das reclamações.

“Efetividade, eficiência e
satisfação são as medidas de
usabilidade mais
freqüentemente consideradas
em relação a websites. Apesar
de algo subjetivas, servem de
parâmetro para alcançar
melhorias.”

Atributos da Usabilidade
Cinco atributos
da usabilidade
(NIELSEN, 1993):

●  Facilidade de aprendizagem:

http://www.flickr.com/photos/bocavermelha

Eficiência
de uso
Grau de
produtividade
atingido pelo
usuário depois
que aprendeu
a utilizar o
sistema.

http://www.flickr.com/photos/arkworld/472578586/

Facilidade de
memorização
Retenção,
capacidade do
usuário de voltar a
utilizar o sistema
após certo tempo
sem precisar
aprendê-lo
novamente.

http://www.flickr.com/photos/sashala/316866777/

Baixa taxa de erros
●  Medida do quanto o usuário
pode ser induzido ao erro
pelo sistema e o quanto pode
se recuperar do mesmo.

http://www.flickr.com/photos/kalimistuk/2226314453/

http://www.flickr.com/photos/phitar/2110659824/

Satisfação subjetiva - Medida do quanto o
usuário se sente feliz de estar utilizando o sistema.

Quer uma boa
interface?
Teste…

Principais Métodos
- Entrevistas e questionários


http://www.slideshare.net/pveugen/guerilla-usability

Tão ou mais
importante que as
entrevistas é a
observação...

Como o cliente explicou O que o cliente
o que queria realmente precisava

Principais Métodos

- Teste de usabilidade
tradicional: solicita aos
usuários que realizem
determinadas tarefas no site
em análise, pensando em
voz alta, enquanto são
observados.

Testes de Usabilidade (camtasia)

Vídeo: Teste de Usabilidade
site Olhar Digital

http://www.youtube.com/watch?
v=9LAApah_UrQ

Vídeo do Steve Krug realizando um teste de usabilidade
(seu objetivo com o vídeo foi mostrar como o teste de usabilidade pode
ser uma tarefa simples e que pode ser realizada por qualquer um).
http://www.youtube.com/watch?v=QckIzHC99Xc

Livro do Steve Krug:
Simplificando coisas que parecem complicadas

http://www.altabooks.com.br/simplificando-coisas-que-parecem-
complicadas.html

Documentos em português para preparação e realização
de testes de usabilidade
http://www.altabooks.com.br/index.php?
dispatch=attachments.getfile&attachment_id=41

Outros testes mais rápidos...

Teste de usabilidade -outras
técnicas:
Teste dos 5 segundos

Utilizado para avaliar o conteúdo
das principais páginas de seu site
(com exceção da homepage e
outras páginas com muitas
prioridades).



- Mostrar ao usuário a página de conteúdo
durante 5 segundos. A sua tarefa será prestar
atenção a tudo que for visto na página.

- Cria-se um cenário: você procura
informações sobre planos de hospedagem de
sites. Entre no site X e observe a página
durante 5 segundos. Agora escreve em um
papel tudo o que viu e percebeu. Marque com
um X o que chamou mais sua atenção ou achou
mais importante.

Técnica interessante para comparar duas
soluções para o design de conteúdo.

Teste dos 5 segundos – primeiro site

Preste atenção a tudo que for visto
na página.

Você terá apenas 5 segundos...

Teste dos 5 segundos – primeiro site

Escreva tudo o que viu e percebeu.

Agora marque com um X o
conteúdo mais importante.

Teste dos 5 segundos – segundo site

Preste atenção a tudo que for visto
na página.

Você terá apenas 5 segundos...


Escreva tudo o que viu e percebeu.

Agora marque com um X o
conteúdo mais importante.

First clic test.

Se o usuário não clicar certo a primeira vez, a
chance de clicar certo depois será muito baixa.

A técnica muito boa e rápida para testar se os
seus links/botões/arquitetura estão funcionando.

Chame o usuário e crie alguns cenários para
testar a homepage, como, por exemplo:
“Sua senha foi clonada e você precisa mudá-la
com urgência... Onde você clicaria para mudar a
senha?”
E observe o usuário.

Procure o local onde poderá
se cadastrar para receber
ofertas.

No site dos Correios, faça
uma rastreamento por:
SS987654321BR

No site do Portal Brasil,
procure por Seguro
Desemprego.

- As 10 heurísticas de Nielsen

1) feedback
2) falar a linguagem do usuário
3) saídas claramente demarcadas
4) consistência
5) prevenir erros
http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html

- As 10 heurísticas de Nielsen

6) minimizar a sobrecarga de
memória do usuário
7) atalhos
8) diálogos simples e naturais
9) boas mensagens de erro
10) ajuda e documentação
http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html

- 1 heurística importante para
e-commerce “Call to Action”

Card Sorting
É uma técnica para
obter dados sobre o
modelo mental dos
usuários no que diz
respeito ao espaço
de informação
(Nielsen, 2004).

Teste A/B

http://webop.com.br/blog/wp-content/uploads/2012/06/endo-ab-test.jpeg

Teste A/B é o nome que se dá a
estratégia de colocar duas ou mais
experiências no ar, ao mesmo tempo,
para que, com base nos resultados,
se descubra qual das opções foi a
melhor aceita pelas pessoas.

The red button outperformed the green button by 21%

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx?source=Blog_Email_
[The+Button+Color+A%2fB]

Usabilidade x Web Analytics

(profissionais de braços dados)

Projetando formulários que
funcionam.

Práticas para diminuir o
abandono do carrinho
de comprar

Abandono de carrinho de compras: 55 – 72%

http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization

Por que os clientes
abandonam o Checkout?


•  44% custo de
delivery caro.
•  41% não estava
pronto para comprar
•  27% quer comparar
preços
•  25% os preços estão
acima do desejado
•  24% querem salvar a
compra para depois

5 principais razões não são problemas de design / usabilidade

•  14% não queria se
registrar
•  12% Achou que o
site pedia
informações demais
•  11% Checkout
confuso e longo
demais
•  11% Website muito
lento
•  10% Falta de
informações

Próximas 5 razões por problemas de design / usabilidade

"Por alguma razão, uma oferta de frete grátis
que faz o cliente economizar R$ 6,99 é mais
atraente para muitos do que um desconto que
reduz o preço de compra em R$ 10,00
David Bell, WhartonSchool Business

59% dos compradores esperam o custo total
antes de fecharem a compra - OneOpenWeb

Não está pronto para comprar?

Salvar o conteúdo do
carrinho de compras
pode salvar a compra

“Call to Action” reforça a
urgência da compra

Não quer se registrar para comprar?

23% dos compradores abandonam o
Checkout se forem obrigados a se registrar.
Forrester Research

Usuários não leem instruções e provavelmente
vão começar a digitar no primeiro campo de
formulário...

O jeito Amazon...

Um formulário
para todos os
clientes –
captura o
endereço de e-
mail no primeiro
passo do cliente.

Referências/links:

- E-book free do Google Varejo
http://googlevarejo.blogspot.com.br/

- E-Commerce Checkout Usability
http://baymard.com/checkout-usability?gclid=CIGL7fmAmLECFQWxnQodWHh93Q

- Creating the best E-commerce UX
http://www.slideshare.net/somethingdigitl/creating-the-best-ecommerce-user-
experience-ux-something-digital

- Maximizing conversion with Checkout optimization
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-
optimization

capacidades/
vantagens
do mobile

Novas maneiras de interação e apresentação

Boa compatibilidade entre
navegadores Mobile e HTML5

limitações/restrições
do mobile

Muitas vezes, ao interagir com
mobile, as pessoas estão em
modo: “fritando o peixe e
olhando o gato” e com
apenas um dos dedos...

‘Desktop is like “diving”
while mobile is
“snorkling.”’
by Rachel Hinman
at Nokia

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

caneca de café mesa

@lukew

tela pequena

bateria

rede inconsistente

dedo gordo

sensores

@lukew

Outras limitações:
●  Capacidade de processamento reduzida.

●  Uma aplicação em HTML5 para mobile
pode ser até 100 vezes mais lenta que em
desktop.
http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”

Por isso, em projetos mobile,
precisamos estratégia,
IDADE (n)(e design de verdade

Pode parecer uma tragédia, mas isso pode
ser ótimo para o negócio...

@lukew

te força a priorizar...

te força a manter o foco…

@lukew

Alguém conhece algum site
que gostaria que 80% do seu
conteúdo/itens/elementos
fosse retirado da interface?

@lukew

Flickr desktop
60 opções de menu...

@lukew

Flickr mobile
7 opções de menu...

@lukew

restrições são boas para o
design, pois te forçam a
priorizar, a manter o foco

Desktop first!

http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

Mobile First!

http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

Elimine da interface itens que não
sejam extremamente
necessários...

Horácio Soares
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

Webinar Usabilidade no E-commerce

Mais conteúdo relacionado

Destaque

Semelhante a Webinar Usabilidade no E-commerce

Mais de Horácio Soares

Webinar Usabilidade no E-commerce