Usabilidade e o e-commerce

7/17/12

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

1

7/17/12

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

felicidade

2

7/17/12

felicidade

X
felicidade

3

7/17/12

felicidade

X

experiência perfeita

4

7/17/12

felicidade

e o que as empresas
esperam?

5

7/17/12

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.

6

7/17/12

mas como?

com qualidade...

7

7/17/12

com uma
experiência de
qualidade...

Acertando
o tiro certo
no alvo certo

8

7/17/12

com estratégia

“uma conspiração
para o sucesso”

9

7/17/12

Mas falta de estratégia e
planejamento resulta em…

10

7/17/12

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

11

7/17/12

“
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…

12

7/17/12

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

15

7/17/12

•  mais do que isso...

16

7/17/12

•  outro exemplo...

•  CASA CRUZ

18

7/17/12

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

22

7/17/12

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

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

23

7/17/12


24

7/17/12


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

25

7/17/12


26

7/17/12


27

7/17/12

X


28

7/17/12


29

7/17/12


30

7/17/12

Entretanto, a experiência
pertence as pessoas.

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

31

7/17/12

Um problema...

Objetivos Reais
e metas necessidades
do projeto dos usuários

32

7/17/12

Falta de equilíbrio

33

7/17/12

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

Equilíbrio?

34

7/17/12

a busca
do equilíbrio

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

35

7/17/12

Um caminho: modelagem participativa

36

7/17/12

Um outro caminho
vem da busca pelas melhores
IDADES

IDADES?

37

7/17/12

}
Acessibil

IDADE

38

7/17/12

X
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).

41

7/17/12

}
Acessibil
Usabil

IDADE

42

7/17/12

X
Pessoas com
pouca
experiência e
medo do
computador

43

7/17/12

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

44

7/17/12

}
Acessibil
Usabil
Simplic

IDADE

Paradoxo da escolha

46

7/17/12

ESPN Brasil– abril 2010

X
ESPN Brasil– abril 2010

47

7/17/12

10 princípios de UX do Google

Princípio 3. O simples é poderoso.

48

7/17/12

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

49

7/17/12

}
Acessibil
Usabil
Simplic
Interativ
IDADE

50

7/17/12

}
Acessibil
Usabil
Simplic
Interativ
Veloc IDADE

52

7/17/12

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

60

7/17/12



61

7/17/12



62

7/17/12


Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

}
Acessibil
Usabil
Simplic
Interativ
Veloc
IDADE
Encontrabil

64

7/17/12

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ

67

7/17/12

X

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

68

7/17/12

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util


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

69

7/17/12

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


70

7/17/12


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

71

7/17/12



72

7/17/12

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util
Facil

73

7/17/12

Acessibil
Usabil
Simplic

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

74

7/17/12

A melhor idade vem da:
}
Investigação
Observação
Colaboração
Análise
Avaliação
Validação

75

7/17/12

Construindo um e-commerce

76

7/17/12

modelagem participativa

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.

77

7/17/12

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.

78

7/17/12

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...

79

7/17/12

Prototipação

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

80

7/17/12

“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!


81

7/17/12

Prototipação em papel

Prototipagem em Papel

82

7/17/12

"  Paper Prototyping

"  Paper Prototyping

83

7/17/12

Wireframe

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

84

7/17/12

http://migre.me/wICa

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

85

7/17/12

Usabilidade

86

7/17/12

Usabilidade

Afinal o que é usabilidade?

87

7/17/12

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

88

7/17/12

1 - efetividade

89

7/17/12

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

90

7/17/12

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

91

7/17/12

3 - satisfação

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.

92

7/17/12

“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):

93

7/17/12

Produto: banana

●  Facilidade de aprendizagem:

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

94

7/17/12

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/

95

7/17/12

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.

96

7/17/12

Quer uma boa
interface?
Teste…

Avaliação
de Usabilidade

97

7/17/12

Principais Métodos
- Entrevistas e questionários


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

98

7/17/12

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

By Erico Fileno

99

7/17/12

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

100

7/17/12

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.

105

7/17/12

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

106

7/17/12

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).


107

7/17/12


- 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 senário: você procura
informações sobre planos de hospedagem de
sites. Entre no site X, olhe tudo durante 5
segundos e escreve em um papel tudo o que
viu e percebeu. Agora marque com um X o
conteúdo 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...

108

7/17/12

Teste dos 5 segundos – primeiro site

Escreva tudo o que viu e percebeu.

Agora marque com um X o

109

7/17/12

Teste dos 5 segundos – segundo site

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

Você terá apenas 5 segundos...

110

7/17/12


Escreva tudo o que viu e percebeu.

Agora marque com um X o

First clic test.

111

7/17/12

First clic test.

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

É técnica muito boa e rápida para testar se os
seus links estão funcionando.

Chama o usuário e cria alguns senários para
testar a homepage, como, por exemplo, onde
você clicaria para mudar sua senha. E observe o
usuário.

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

112

7/17/12

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

Correios– outubro 2011

117

7/17/12

No site do Portal Brasil,
procure por Seguro
Desemprego.

Brasil.gov.br– outubro 2011

118

7/17/12

- Avaliação Heurística

- 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

119

7/17/12

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

120

7/17/12

- Eye Tracking

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

121

7/17/12

- Card Sorting

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).

122

7/17/12

Teste A/B

Teste A/B

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

125

7/17/12

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]

126

7/17/12

Usabilidade x Web Analytics

(profissionais de braços dados)

127

7/17/12

Projetando formulário que
funcionam.

128

7/17/12

Práticas para diminuir o
abandono do carrinho
de comprar

134

7/17/12

Abandono de carrinho de compras: 55 – 72%

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

Por que os clientes
abandonam o Checkout?


135

7/17/12


•  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

136

7/17/12

•  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

137

7/17/12

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

138

7/17/12

Não está pronto para comprar?

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

139

7/17/12

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

urgência

140

7/17/12

Não quer se registrar para comprar?

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

141

7/17/12

Uusá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.

142

7/17/12

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

143

7/17/12

capacidades/
vantagens
do mobile

144

7/17/12

GPS

Acelerômetro

145

7/17/12

Giroscópio

Bluetooth

146

7/17/12

Áudio, vídeo e imagem

NFC

147

7/17/12

Sensores multitoque

Em qualquer hora e local.

148

7/17/12

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

Boa compatibilidade entre
navegadores Mobile e HTML5

149

7/17/12

Atualizações frequentes...

150

7/17/12

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...

151

7/17/12

@lukew

152

7/17/12

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

desktop

@lukew

153

7/17/12

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

caneca de café mesa

@lukew

154

7/17/12

mobile

@lukew

155

7/17/12

tela pequena

bateria

rede inconsistente

dedo gordo

sensores

@lukew

156

7/17/12

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”

157

7/17/12

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

perda de 80% do espaço

158

7/17/12

@lukew

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

@lukew

159

7/17/12

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

160

7/17/12

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

@lukew

@lukew

161

7/17/12

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

@lukew

Less is more...

162

7/17/12

@lukew

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

163

7/17/12

Desktop first!

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

Mobile First
Luke Wroblewski

164

7/17/12

Mobile First!

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

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

165

7/17/12

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

166

Usabilidade e o e-commerce

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Usabilidade e o e-commerce