usabilidade e o e-commerce

7/17/12

1

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

Julho 2012 Horácio Soares

[email protected] [email protected] facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares

Horácio Soares

7/17/12

2

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

felicidade

7/17/12

3

felicidade

X felicidade

7/17/12

4

felicidade

X

experiência perfeita

7/17/12

5

felicidade

e o que as empresas esperam?

7/17/12

6

aumentar a satisfação dos clientes

e obter mais lucro...

Mulher com notebook em sinal de ok

Todos querem o melhor osso…

Cachorrinho caregando um enorme osso.

7/17/12

7

mas como?

com qualidade...

7/17/12

8

com uma experiência de

qualidade...

Acertando o tiro certo no alvo certo

7/17/12

9

com estratégia

“uma conspiração para o sucesso”

7/17/12

10

Mas falta de estratégia e planejamento resulta em…

7/17/12

11

X

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

7/17/12

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…

7/17/12

13

7/17/12

14

7/17/12

15

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

7/17/12

16

•  mais do que isso...

7/17/12

17

7/17/12

18

•  outro exemplo...

•  CASA CRUZ

7/17/12

19

7/17/12

20

7/17/12

21

7/17/12

22

•  Ambos exemplos apresentam problemas que

seriam evitados com planejamento e testes de

usabilidade...

7/17/12

23

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

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

7/17/12

24


7/17/12

25


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

7/17/12

26


7/17/12

27


7/17/12

28

X


7/17/12

29


7/17/12

30


7/17/12

31

Entretanto, a experiência pertence as pessoas.

O designer/desenvolvedor

não projeta a experiência… Projeta para a

experiência do usuário.

7/17/12

32

Um problema...

Objetivos e metas do projeto

Reais necessidades

dos usuários

7/17/12

33

Falta de equilíbrio

7/17/12

34

Marte Objetivos e metas da empresa

Vênus Necessidades dos usuários

Equilíbrio?

7/17/12

35

a busca do equilíbrio

empresa

usuários

Objetivos e metas do

projeto Necessidades dos

usuários

7/17/12

36

Um caminho: modelagem participativa

7/17/12

37

Um outro caminho vem da busca pelas melhores

IDADES

IDADES?

7/17/12

38

Acessibil

IDADE }

7/17/12

39

7/17/12

40

7/17/12

41

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

7/17/12

42

Acessibil

Usabil

IDADE }

7/17/12

43

X

Pessoas com pouca

experiência e medo do

computador

7/17/12

44

Comercial Mercado Livre

2011

“Eu compro o

que quiser, senão quiser, não compro”

Comercial do Mercado

Livre 2011

7/17/12

45

7/17/12

46

Acessibil Usabil

Simplic

IDADE }Paradoxo da escolha

7/17/12

47

ESPN Brasil– abril 2010

ESPN Brasil– abril 2010

X

7/17/12

48

10 princípios de UX do Google

Princípio 3. O simples é poderoso.

7/17/12

49

Em uma interface perfeita,

as pessoas nunca deveriam errar, principalmente ao

fazer uma compra…

7/17/12

50

Acessibil Usabil

Simplic

Interativ IDADE }

7/17/12

51

7/17/12

52

Acessibil Usabil

Simplic Interativ

Veloc IDADE }

7/17/12

53

7/17/12

54

X

X

7/17/12

55

X X

7/17/12

56

7/17/12

57

7/17/12

58

7/17/12

59

7/17/12

60

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

7/17/12

61



7/17/12

62



7/17/12

63

7/17/12

64

10 princípios de UX do Google

Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

Acessibil Usabil

Simplic Interativ

Veloc

Encontrabil IDADE }

7/17/12

65

X

7/17/12

66

X

7/17/12

67

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ

IDADE }

7/17/12

68

X 10 princípios de UX do Google

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

7/17/12

69

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ

Util

IDADE }10 princípios de UX do Google

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

7/17/12

70

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


7/17/12

71


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

7/17/12

72



7/17/12

73

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ Util

Facil

IDADE }

7/17/12

74

Acessibil Usabil

Simplic

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ Util

Facil

Portabil …

IDADE }

7/17/12

75

Investigação Observação Colaboração

Análise Avaliação Validação

A melhor idade vem da: }

7/17/12

76

Construindo um e-commerce

7/17/12

77

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.

7/17/12

78

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.

7/17/12

79

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

7/17/12

80

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

7/17/12

81

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


7/17/12

82

Prototipação em papel

Prototipagem em Papel

7/17/12

83

"  Paper Prototyping

"  Paper Prototyping

7/17/12

84

Wireframe

Wireframe

Wireframe não especifica design gráfico.

Sua função é apresentar os elementos que vão compor a

página.

7/17/12

85

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

http://migre.me/wICa

7/17/12

86

Usabilidade

7/17/12

87

Usabilidade

Afinal o que é usabilidade?

7/17/12

88

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

7/17/12

89

1 - efetividade

7/17/12

90

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

7/17/12

91

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

7/17/12

92

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. Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/

7/17/12

93

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

7/17/12

94

Produto: banana

●  Facilidade de aprendizagem:

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

7/17/12

95

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/

7/17/12

96

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/

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

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

7/17/12

97

Quer uma boa interface?

Teste…

Avaliação de Usabilidade

7/17/12

98

Principais Métodos

- Entrevistas e questionários

http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share

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

7/17/12

99

Tão ou mais importante que as

entrevistas é a observação...

By Erico Fileno

7/17/12

100

Como o cliente explicou o que queria

O que o cliente realmente precisava

7/17/12

101

7/17/12

102

7/17/12

103

7/17/12

104

7/17/12

105

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.


7/17/12

106

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

7/17/12

107

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


7/17/12

108


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

7/17/12

109

Teste dos 5 segundos – primeiro site

Escreva tudo o que viu e percebeu.

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

7/17/12

110

Teste dos 5 segundos – segundo site

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

Você terá apenas 5 segundos...

7/17/12

111


Escreva tudo o que viu e percebeu.

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

First clic test.

7/17/12

112

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.

7/17/12

113

7/17/12

114

7/17/12

115

7/17/12

116

7/17/12

117

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

SS987654321BR

Correios– outubro 2011

7/17/12

118

No site do Portal Brasil, procure por Seguro

Desemprego.

Brasil.gov.br– outubro 2011

7/17/12

119

- 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

7/17/12

120

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

7/17/12

121

- Eye Tracking

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

7/17/12

122

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

7/17/12

123

7/17/12

124

7/17/12

125

Teste A/B

Teste A/B

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

7/17/12

126

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.

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]

The red button outperformed the green button by 21%

7/17/12

127

Usabilidade x Web Analytics

(profissionais de braços dados)

7/17/12

128

Projetando formulário que funcionam.

7/17/12

129

7/17/12

130

7/17/12

131

7/17/12

132

7/17/12

133

7/17/12

134

Práticas para diminuir o abandono do carrinho

de comprar

7/17/12

135

Abandono de carrinho de compras: 55 – 72%

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

Por que os clientes abandonam o Checkout?


7/17/12

136



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

•  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

7/17/12

137


Próximas 5 razões por 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

"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

7/17/12

138

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

7/17/12

139

Não está pronto para comprar?

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

7/17/12

140

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

urgência

7/17/12

141

Não quer se registrar para comprar?

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

Forrester Research

7/17/12

142

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.

7/17/12

143

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


7/17/12

144

capacidades/vantagens do mobile

7/17/12

145

GPS

Acelerômetro

7/17/12

146

Giroscópio

Bluetooth

7/17/12

147

Áudio, vídeo e imagem

NFC

7/17/12

148

Sensores multitoque

Em qualquer hora e local.

7/17/12

149

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

Boa compatibilidade entre

navegadores Mobile e HTML5

7/17/12

150

Atualizações frequentes...

7/17/12

151

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

7/17/12

152

@lukew

7/17/12

153

‘Desktop is like “diving”

while mobile is

“snorkling.”’

by Rachel Hinman

at Nokia

@lukew

desktop

7/17/12

154

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa caneca de café

@lukew

7/17/12

155

@lukew

mobile

7/17/12

156

tela pequena

bateria

rede inconsistente

dedo gordo

sensores

@lukew

7/17/12

157

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”

7/17/12

158

Por isso, em projetos mobile, precisamos estratégia,

IDADE(n)(e design de verdade

perda de 80% do espaço

7/17/12

159

@lukew

Pode parecer uma tragédia, mas isso pode

ser ótimo para o negócio...

@lukew

7/17/12

160

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

7/17/12

161

Flickr desktop

60 opções de menu...

@lukew

@lukew

7/17/12

162

Flickr mobile

7 opções de menu...

@lukew

Less is more...

7/17/12

163

@lukew

restrições são boas para o

design, pois te forçam a

priorizar, a manter o foco

7/17/12

164

Desktop first!

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

Mobile First Luke Wroblewski

7/17/12

165

Mobile First!

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

Elimine da interface itens que não

sejam extremamente

necessários...

7/17/12

166

[email protected] facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares

Horácio Soares

usabilidade e o e-commerce

Documents