Essa Tal Experiência do Usuário                                 Amyris Fernandez                  Profa. Dra UX Buscapé Co...
Os meios digitais já fazem parte do dia-a-dia do consumidor
Como as empresas vão se relacionar comestes consumidores que mudaram seus hábitos?
Empresas vão viver com seus consumidores ativando o relacionamento e estando aptas a recebê-lo através                da s...
…e explorando a oportunidade para desenvolver   o seu “engagement” e convidá-lo à ação.                   Segmentação   On...
Começando por criar a ESTRATÉGIAEstratégia é o plano de como a empresa irá competir no mercado.
A formulação da estratégia envolve cinco passos                                 Quais consumidores iremos servir?      Esc...
Premissa 01: Só existe 1 pessoa
Premissa 02: É uma experiência de consumo                                    Duração  Catalizadores                       ...
Então, como criarum bom e-commerce?
Guia de desenvolvimento de e-commerce          Design          Conteúdo                               Arquitetura     Tecn...
Momentos cruciais do e-commerce Comunicação             Landing                          Pagamento                        ...
O que está errado nesta peça publicitária?
O que está errado  nesta página?
O que está errado nesta vitrine?
O que está errado nesta página?
O que está errado?
Análise Heurística(estruturada com números, nada de Jakob Nielsen)
Arquitetura               Conteúdo                                                                     de Informação   Víd...
Regras: AI / Tecnologia                   ENTRADA DE DADOS• Só pergunte uma vez por uma determinada informação;• Use o end...
Regras: AI / Tecnologia                        NAVEGAÇÃO• Os labels devem estar visíveis o tempo todo;• Mostre a mudança d...
Regras: AI / Tecnologia                     ENTRADA DE DADOS• Os campos devem estar alinhados um embaixo do outro, respeit...
Regras: AI / Tecnologia                            FLUXO• O processo de check out deve ser linear;• Destaque (mostre clara...
Regras:                            CONTEÚDO• Descreva os nomes dos links;• Seja conciso nas descrições;• Evite jargões téc...
Regras:                                DESIGN• Crie estruturas claras e de fácil identificação;• Todo conteúdo deve ser ap...
Regras:                           NEGÓCIOS• Registro no site deve ser opcional, sempre que o modelo de negóciopermitir;• P...
Análise de Relatórios de Servidor
Teste de Usabilidade (usamos Morae)
CAMADAS                         NÍVEIS apresentação                   servidor web                    Pagamento   User/Adm...
E cada profissional verá o problema de um jeito       diferente e vai brigar pra ter razão
Amyris Fernandez       Profa. Dra UX Buscapé Companyamyris.fernadez@buscapecompany.com                 celular: 11 8122.17...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyri...
Próximos SlideShares
Carregando em…5
×

Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyris Fernandez

1.188 visualizações

Publicada em

Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão

Amyris Fernandez, Design Thinking / UX Leader da Buscapé Company e Presidente da Interaction Design Association (SP)

Apresentação feita durante o Congresso E-Commerce Brasil Search & Vendas 2013. Mais informações, acesso: http://www.ecommercebrasil.com.br/eventos/congresso-e-commerce-brasil-de-search-vendas-2013/

Publicada em: Educação
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.188
No SlideShare
0
A partir de incorporações
0
Número de incorporações
34
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • As marcas estão inseridas no dia-dia do consumidor, ele procura por elas e se relaciona com elas
  • Entrada de Dados [12 Regras] 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; 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;
  • Entrada de Dados [12 Regras] 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; 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;
  • Entrada de Dados [12 Regras] 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; 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;
  • Entrada de Dados [12 Regras] 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; 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;
  • Arquitetura da informação para a navegação perfeita no e-commerce – Posicionamento, estilos e aumento de conversão - Amyris Fernandez

    1. 1. Essa Tal Experiência do Usuário Amyris Fernandez Profa. Dra UX Buscapé Company
    2. 2. Os meios digitais já fazem parte do dia-a-dia do consumidor
    3. 3. Como as empresas vão se relacionar comestes consumidores que mudaram seus hábitos?
    4. 4. Empresas vão viver com seus consumidores ativando o relacionamento e estando aptas a recebê-lo através da sua conveniência… Media Digital TV | IPTV Mobile MULTIPLATAFORMA Social NetworksIntranet | Extranet Indoor Media and Out-of-Home Websites and Hot sites Games
    5. 5. …e explorando a oportunidade para desenvolver o seu “engagement” e convidá-lo à ação. Segmentação On demand Imersão Mobilidade 24/7 Customização Interação
    6. 6. Começando por criar a ESTRATÉGIAEstratégia é o plano de como a empresa irá competir no mercado.
    7. 7. A formulação da estratégia envolve cinco passos Quais consumidores iremos servir? Escolha da arena Que produtos e serviços iremos oferecer? Onde iremos operar? Que tipo de benefícios nossos clientes procuram? Localização de uma posição Nossa empresa possui todos os recursos, capacidades defensável e capacitações para entregar os benefícios propostos melhor que nosso melhor competidor? Nossa proposta de valor é diferente das dos nossosBusca de diferenciação através de atividades ou métodos competidores? Os clientes conseguem perceber a diferença? Identificação e execução Nossa locação de recursos reflete nossa de trade offs diferenciação? Todas as decisões estratégicas são compatíveis? Desenho de atividades interligadas Existe criação de valor as fornecer serviços complementares?
    8. 8. Premissa 01: Só existe 1 pessoa
    9. 9. Premissa 02: É uma experiência de consumo Duração Catalizadores . Iniciação Sentidos: . Imersão . Imagem . Conclusão . Som . Continuação . Tato Intensidade . Gosto . Hábitos . Engajamento Cognitivos: . Conceitos . Simbolos .Cultura experiência Fôlego . Produto . Serviço . Marcas (nomes) Eu e o Outro - Significados . Canais/AmbientesInteração . O fato de conseguir/ter (espaços). Passiva . Status/Identidade . Promoção. Ativa . Emoção/Estilo de vida . Preço que está. Interativa . Significado de pagar um disposto a pagar certo preço . Função
    10. 10. Então, como criarum bom e-commerce?
    11. 11. Guia de desenvolvimento de e-commerce Design Conteúdo Arquitetura Tecnologia de Informação Negócios Copyright by Amyris Fernandez, 2008
    12. 12. Momentos cruciais do e-commerce Comunicação Landing Pagamento Processo (AI) (banner, etc) Page (logística) Mensagem Qualificação do Lead Navegação ServiçosPúblico-Alvo Falha no Processo ruim
    13. 13. O que está errado nesta peça publicitária?
    14. 14. O que está errado nesta página?
    15. 15. O que está errado nesta vitrine?
    16. 16. O que está errado nesta página?
    17. 17. O que está errado?
    18. 18. Análise Heurística(estruturada com números, nada de Jakob Nielsen)
    19. 19. Arquitetura Conteúdo de Informação Vídeo Navegação Labels Texto Negócios (busca)Imagens (fotos) Navegação Ajudas (processo) Som Brand Diálogo com consumidores Design Tecnologia Formas Fontes Portabilidade (letras) Robustez Modernidade Diagramação tecnológica Cores Confiabilidade Ícones Rapidez da Resposta
    20. 20. Regras: AI / Tecnologia ENTRADA DE DADOS• 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 preenchimentoquais 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;
    21. 21. Regras: AI / Tecnologia NAVEGAÇÃO• Os labels devem estar visíveis o tempo todo;• Mostre a mudança de localização dentro de um processo através dedicas 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 otempo 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;
    22. 22. Regras: AI / Tecnologia ENTRADA DE DADOS• Os campos devem estar alinhados um embaixo do outro, respeitandoa ordem de leitura do usuário;• Deixe um campo para nome (chamar de “Nome”) e outro parasobrenome (Chamar de “Último Sobrenome”);• Se o pagamento for via cartão de crédito, apresentar os campos naordem do cartão;• Evite o uso de Drop Down Menus, pois eles diminuem a velocidade depreenchimento;• 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 damãe;
    23. 23. Regras: AI / Tecnologia FLUXO• 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 sermostrado no carrinho);• Permita comparação de atributos de produtos;
    24. 24. Regras: CONTEÚDO• 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çõespara resolver o problema;• Permita acesso a explicações (sem sair da página), para regrasparticulares do seu negócio;• Texto de finalização deve ser simples, claro e conter instruções quediminuam receio de qualquer natureza;
    25. 25. Regras: DESIGN• 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;
    26. 26. Regras: NEGÓCIOS• Registro no site deve ser opcional, sempre que o modelo de negóciopermitir;• Peça informações de registro somente quando o usuário estivermotivado;• Não dê demasiada importância ao cupom;• Cross-selling deve existir, mas deve ser apresentado com cuidadopara não atrapalhar a venda;
    27. 27. Análise de Relatórios de Servidor
    28. 28. Teste de Usabilidade (usamos Morae)
    29. 29. CAMADAS NÍVEIS apresentação servidor web Pagamento User/Admin Conteúdo Lógica do Negócio { Módulo s Dados {Arquitetura de informação que pensa em arquitetura de sistemas e regras de negócios
    30. 30. E cada profissional verá o problema de um jeito diferente e vai brigar pra ter razão
    31. 31. Amyris Fernandez Profa. Dra UX Buscapé Companyamyris.fernadez@buscapecompany.com celular: 11 8122.1723 skype/facebook: Amyris Fernandez twitter: amyrisf

    ×