webinar usabilidade no e-commerce

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

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

felicidade

felicidade

X

felicidade

felicidade

X

experiência perfeita

felicidade

e o que as empresas esperam?

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.

mas como?

com qualidade...

com uma experiência de

qualidade...

Acertando o tiro certo no alvo certo

com estratégia

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

•  mais do que isso...

•  outro exemplo...

•  CASA CRUZ

•  Ambos exemplos apresentam problemas que

seriam evitados com planejamento e testes de

usabilidade...

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

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

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.

Um problema...

Objetivos e metas do projeto

Reais necessidades

dos usuários

Falta de equilíbrio

Marte Objetivos e metas da empresa

Vênus Necessidades dos usuários

Equilíbrio?

a busca do equilíbrio

empresa

usuários

Objetivos e metas do

projeto Necessidades dos

usuários

Um caminho: modelagem participativa

Um outro caminho vem da busca pelas melhores

IDADES

IDADES?

Acessibil

IDADE }

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

2011

“Eu compro o

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

Comercial do Mercado

Livre 2011

Acessibil Usabil

Simplic

IDADE }

Paradoxo da escolha

ESPN Brasil– abril 2010

ESPN Brasil– abril 2010

X

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

Encontrabil IDADE }

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ

IDADE }


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

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ

Util

IDADE }


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

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

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ Util

Facil

IDADE }

Acessibil Usabil

Simplic

Acessibil Usabil

Simplic Interativ

Veloc Encontrabil

Atrativ Util

Facil

Portabil …

IDADE }

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

Análise Avaliação Validação

A melhor idade vem da: }

Construindo um e-commerce

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.

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

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!


Prototipação em papel

Prototipagem em Papel

"  Paper Prototyping

Wireframe

Wireframe

Wireframe não especifica design gráfico.

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

página.

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

http://migre.me/wICa

Usabilidade

Afinal o que é usabilidade?

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

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

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

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/

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

Produto: banana

●  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/

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

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

Quer uma boa interface?

Teste…

Avaliação de Usabilidade

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

Tão ou mais importante que as

entrevistas é a observação...

By Erico Fileno

Como o cliente explicou o que queria

O que o cliente 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.

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

Correios– outubro 2011

No site do Portal Brasil, procure por Seguro

Desemprego.

Brasil.gov.br– outubro 2011

- 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

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

- Eye Tracking

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

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

Teste A/B

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.

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%

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?



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


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

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

urgência

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


capacidades/vantagens do mobile

Acelerômetro

Giroscópio

Bluetooth

Áudio, vídeo e imagem

Sensores multitoque

Em qualquer hora e local.

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

Boa compatibilidade entre

navegadores Mobile e HTML5

Atualizações frequentes...

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

@lukew

‘Desktop is like “diving”

while mobile is

“snorkling.”’

by Rachel Hinman

at Nokia

@lukew

desktop

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa caneca de café

@lukew

@lukew

mobile

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

perda de 80% do espaço

@lukew

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

@lukew

Flickr mobile

7 opções de menu...

@lukew

Less is more...

@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 Luke Wroblewski

Mobile First!

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

Elimine da interface itens que não

sejam extremamente

necessários...

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

Horácio Soares

webinar usabilidade no e-commerce

Technology