Palestra Gratuita - Melhores práticas para Experiência do Usuário em e-commerce - web e mobile com Amyris no Colubre 2014.

1. Amyris Fernandez, Profa. Dra
Design Thinker / Dark Matter Strategist
Experiência do Usuário
& Boas Práticas

2. Amyris Fernandez - Sócia-Diretora da Knowledge Brokers, empresa de Design Thinking, pesquisa e design digitais.
Em uma vida passada trabalhou para grandes empresas de publicidade, tecnologia e varejo tradicionais, mas se apaixonou por tecnologia e resolveu viver essa paixão!
Pós Doutora em Comunicação Social pela USP.
Doutora em Comunicação Social pela Universidade Metodista - SBC, tendo realizado parte de sua pesquisa com Bolsa Sanduíche CAPES no Centro de Pesquisas de Games no ITU, Dinamarca.
Mestre em Comércio Eletrônico pelo Rochester Institute of Technology.

3. Os meios digitais já fazem parte do dia-a-dia do consumidor

4. Como as empresas vão se relacionar com estes consumidores que mudaram seus hábitos?

5. Social Networks
Media
Mobile
Indoor Media and Out-of-Home
Games
Intranet | Extranet
Websites and Hot sites
Digital TV | IPTV
MULTIPLATAFORMA
Empresas vão viver com seus consumidores ativando
o relacionamento e estando aptas a recebê-lo através
da sua conveniência…

6. Mobilidade 24/7
On demand
Imersão
Interação
…e explorando a oportunidade para desenvolver o seu “engagement” e convidá-lo à ação.
Segmentação
Customização

7. Estratégia é o plano de como a empresa irá competir no mercado.
Começando por criar a ESTRATÉGIA

8. Escolha da arena
Quais consumidores iremos servir? Que produtos e serviços iremos oferecer?
Onde iremos operar?
Localização de uma posição defensável
Que tipo de benefícios nossos clientes procuram?
Nossa empresa possui todos os recursos, capacidades e capacitações para entregar os benefícios propostos melhor que nosso melhor competidor?
Busca de diferenciação através de atividades ou métodos
Nossa proposta de valor é diferente das dos nossos competidores?
Os clientes conseguem perceber a diferença?
Identificação e execução de trade offs
Nossa locação de recursos reflete nossa diferenciação?
Desenho de atividades interligadas
Todas as decisões estratégicas são compatíveis?
Existe criação de valor as fornecer serviços complementares?
A formulação da estratégia envolve cinco passos

9. Premissa 01: Só existe 1 pessoa

10. Premissa 02: É uma experiência de consumo
experiência
Catalizadores
Sentidos:
. Imagem
. Som
. Tato
. Gosto
Cognitivos:
. Conceitos
. Simbolos
.Cultura
Duração
. Iniciação
. Imersão
. Conclusão
. Continuação
Intensidade
. Hábitos
. Engajamento
Fôlego
. Produto
. Serviço
. Marcas (nomes)
. Canais/Ambientes (espaços)
. Promoção
. Preço que está disposto a pagar
Eu e o Outro - Significados
. O fato de conseguir/ter
. Status/Identidade
. Emoção/Estilo de vida
. Significado de pagar um certo preço
. Função
Interação
. Passiva
. Ativa
. Interativa

11. Então, como criar um bom e-commerce?

12. Copyright by Amyris Fernandez, 2008
Design
Guia de desenvolvimento de e-commerce
Negócios
Arquitetura de Informação
Conteúdo
Tecnologia

13. Qualificação do Lead
Falha no Processo
Mensagem
Público-Alvo
Navegação
ruim
Serviços
Momentos cruciais do e-commerce
Comunicação
(banner, etc)
Landing Page
Processo (AI)
Pagamento
(logística)

14. O que está errado nesta peça publicitária?

15. O que está errado
nesta página?

17. O que está errado nesta vitrine?

18. O que está errado nesta página?

23. O que está errado?

25. Análise Heurística
(estruturada com números, nada de Jakob Nielsen)

27. Tecnologia
Arquitetura de Informação
Conteúdo
Imagens
(fotos)
Texto
Som
Vídeo
Labels
Formas
Ícones
Fontes
(letras)
Navegação
(processo)
Navegação
(busca)
Cores
Diagramação
Rapidez da
Resposta
Confiabilidade
Modernidade
tecnológica
Robustez
Portabilidade
Ajudas
Negócios
Brand
Diálogo com
consumidores
Design

28. • Só pergunte uma vez por uma determinada informação;
• Use o endereço de envio como endereço de cobrança por default;
• Indique sempre e antes de começar o processo de preenchimento quais são os campos obrigatórios;
• Mostre exemplos de como preencher os campos;
• Valide os campos conforme são preenchidos;
• Use o CEP para pré-popular os campos endereço e cidade;
Regras: AI / Tecnologia
ENTRADA DE DADOS

29. • Os labels devem estar visíveis o tempo todo;
• Mostre a mudança de localização dentro de um processo através de dicas visuais (cores, números, formas);
• Processos devem ser clicáveis e navegáveis;
• Títulos (e outras funções hierárquicas não clicáveis) devem indicar o tempo todo que não são clicáveis;
• Imagens devem ser clicáveis;
• Pense em termos de acessibilidade e suas ferramentas e, por isso, coloque descreva cada imagem em alt tag;
Regras: AI / Tecnologia
NAVEGAÇÃO

30. • Os campos devem estar alinhados um embaixo do outro, respeitando a ordem de leitura do usuário;
• Deixe um campo para nome (chamar de “Nome”) e outro para sobrenome (Chamar de “Último Sobrenome”);
• Se o pagamento for via cartão de crédito, apresentar os campos na ordem do cartão;
• Evite o uso de Drop Down Menus, pois eles diminuem a velocidade de preenchimento;
• Desabilite a função “colar” para o campo de validação de email;
• Nunca peça como obrigatório: RG, telefone fixo, nome do pai ou da mãe;
Regras: AI / Tecnologia
ENTRADA DE DADOS

31. • O processo de check out deve ser linear;
• Destaque (mostre claramente) descontos e valores adicionais;
• Mostre o valor final o mais cedo possível no processo;
• Evite simuladores dissociados do carrinho (se simular, o valor deve ser mostrado no carrinho);
• Permita comparação de atributos de produtos;
Regras: AI / Tecnologia
FLUXO

32. • Descreva os nomes dos links;
• Seja conciso nas descrições;
• Evite jargões técnicos;
• Nome de “endereço de envio” deve ser opcional;
• Erros devem conter mensagens simples, claras e conter instruções para resolver o problema;
• Permita acesso a explicações (sem sair da página), para regras particulares do seu negócio;
• Texto de finalização deve ser simples, claro e conter instruções que diminuam receio de qualquer natureza;
Regras:
CONTEÚDO

33. • Crie estruturas claras e de fácil identificação;
• Todo conteúdo deve ser apresentado de forma hierarquizada;
• Use diferentes tamanhos de fontes para indicar hierarquia;
• Permita o controle de tamanho de fontes/visualização;
• Durante o pagamento coloque o mínino possível de novos elementos, para evitar distrações;
Regras:
DESIGN

34. • Registro no site deve ser opcional, sempre que o modelo de negócio permitir;
• Peça informações de registro somente quando o usuário estiver motivado;
• Não dê demasiada importância ao cupom;
• Cross-selling deve existir, mas deve ser apresentado com cuidado para não atrapalhar a venda;
Regras:
NEGÓCIOS

35. Análise de Relatórios de Servidor

36. Teste de Usabilidade (usamos Morae)

42. Arquitetura de Informação que pensa em arquitetura de Sistemas e regras de negócios
CAMADAS
NÍVEIS
Lógica do
Negócio
Dados
Pagamento User/Admin Conteúdo
Módulos
{
{
apresentação
servidor web

43. E PARA MOBILE??

44. Melhores Práticas
•Pense na necessidade, no desejo a ser satisfeito pelo aplicativo ou site;
•Considere o local ou locais onde o usuário vai realizar a tarefa;
•Pense no tipo de terminal que ele vai usar (mas pense em termos de marketing, OK?);
•Pense como esse aplicativo / site vai ser tão legal que nem vai precisar de propaganda...

45. •Simples
•Modular
•Login na hora certa
•Conteúdo Relevante

46. Best Practices
•Cenários de uso - aparelho, local, motivo
•Select versus type
•Consistência & menus
•Feedback deve ser visual e sonoro
•Uso de ícones e audicons
•Controle – cancelar e parar
•Uso de metáforas
•Gráficos clicáveis devem parecer clicáveis

48. E cada profissional verá o problema de um jeito diferente e vai brigar pra ter razão

51. Amyris Fernandez
Profa. Dra.
amyris@gmail.com celular: +55 11 98122.1723 skype/facebook: Amyris Fernandez twitter: amyrisf