Amyris Colubre
-
Upload
amyris-fernandez -
Category
Education
-
view
243 -
download
0
description
Transcript of Amyris Colubre
![Page 1: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/1.jpg)
Amyris Fernandez, Profa. Dra
Design Thinker / Dark Matter Strategist
Experiência do Usuário
& Boas Práticas
![Page 2: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/2.jpg)
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.
![Page 3: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/3.jpg)
Os meios digitais já fazem parte do dia-a-dia do consumidor
![Page 4: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/4.jpg)
Como as empresas vão se relacionar com estes consumidores que mudaram seus hábitos?
![Page 5: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/5.jpg)
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…
![Page 6: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/6.jpg)
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
![Page 7: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/7.jpg)
Estratégia é o plano de como a empresa irá competir no mercado.
Começando por criar a ESTRATÉGIA
![Page 8: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/8.jpg)
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
![Page 9: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/9.jpg)
Premissa 01: Só existe 1 pessoa
![Page 10: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/10.jpg)
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
![Page 11: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/11.jpg)
Então, como criar
um bom e-commerce?
![Page 12: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/12.jpg)
Copyright by Amyris Fernandez, 2008
Design
Guia de desenvolvimento de e-commerce
Negócios
Arquitetura
de Informação
Conteúdo
Tecnologia
![Page 13: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/13.jpg)
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)
![Page 14: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/14.jpg)
O que está errado nesta peça publicitária?
![Page 15: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/15.jpg)
O que está errado
nesta página?
![Page 16: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/16.jpg)
![Page 17: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/17.jpg)
O que está errado nesta vitrine?
![Page 18: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/18.jpg)
O que está errado nesta página?
![Page 19: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/19.jpg)
![Page 20: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/20.jpg)
![Page 21: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/21.jpg)
![Page 22: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/22.jpg)
![Page 23: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/23.jpg)
O que está errado?
![Page 24: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/24.jpg)
![Page 25: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/25.jpg)
Análise Heurística
(estruturada com números, nada de Jakob Nielsen)
![Page 26: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/26.jpg)
![Page 27: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/27.jpg)
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
![Page 28: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/28.jpg)
• 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
![Page 29: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/29.jpg)
• 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
![Page 30: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/30.jpg)
• 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
![Page 31: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/31.jpg)
• 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
![Page 32: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/32.jpg)
• 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
![Page 33: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/33.jpg)
• 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
![Page 34: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/34.jpg)
• 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
![Page 35: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/35.jpg)
Análise de Relatórios de Servidor
![Page 36: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/36.jpg)
Teste de Usabilidade (usamos Morae)
![Page 37: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/37.jpg)
![Page 38: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/38.jpg)
![Page 39: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/39.jpg)
![Page 40: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/40.jpg)
![Page 41: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/41.jpg)
![Page 42: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/42.jpg)
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
![Page 43: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/43.jpg)
E PARA MOBILE??
![Page 44: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/44.jpg)
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...
![Page 45: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/45.jpg)
•Simples
•Modular
•Login na hora certa
•Conteúdo Relevante
![Page 46: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/46.jpg)
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
![Page 47: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/47.jpg)
![Page 48: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/48.jpg)
E cada profissional verá o problema de um jeito
diferente e vai brigar pra ter razão
![Page 49: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/49.jpg)
![Page 50: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/50.jpg)
![Page 51: Amyris Colubre](https://reader033.fdocument.pub/reader033/viewer/2022051609/54787aceb4af9f7b108b4cf5/html5/thumbnails/51.jpg)
Amyris Fernandez
Profa. Dra.
celular: +55 11 98122.1723
skype/facebook: Amyris Fernandez
twitter: amyrisf