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…
X
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://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
http://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
X
http://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
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 }
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).
Acessibil
Usabil
IDADE }
X
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 }
X
X
X X
Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
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 }
X
X
Acessibil Usabil
Simplic Interativ
Veloc Encontrabil
Atrativ
IDADE }
X
10 princípios de UX do Google
Princípio 8 – agrade aos olhos sem distrair a mente
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.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
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
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
Faber Ludens – Érico Fileno
• O único jeito de você descobrir se aquela idéia funciona ou não
é com um protótipo!
Faber Ludens – Érico Fileno
Prototipação em papel
Prototipagem em Papel
" Paper Prototyping
" 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
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
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
3 - satisfação
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.”
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
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.
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
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).
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
Teste dos 5 segundos
- 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...
Teste dos 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?
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
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
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
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
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
capacidades/vantagens do mobile
GPS
Acelerômetro
Giroscópio
Bluetooth
Áudio, vídeo e imagem
NFC
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