Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Canto da sereia
guiando o usuário com pistas visuais
Marcelo Henrique
@bissuh
Manaus - Amazonas
Co-fundador Ingresse
Plataforma de eventos
Conversão - activation
Momento em que o usuário faz uso do seu produto ou serviço
Conceito I
Efetividade - effectiveness
Métrica de usabilidade que ajuda no entedimento da conversão
Conceito II
5
Primeiro Modelo
Calculadora de preços
Objetivo
con!gurar o pedido exato
que queriam e encomendar.
Primeiro Modelo
Calculadora de preços
Heatmap Matrix Page v1 [ANTES]
Primeiro Modelo
Calculadora de preços
Heatmap Matrix Page v1 [ANTES]
Cliques perdidos
Segundo Modelo
Calculadora de preços
Modelo passo-a-passo
Heatmap Matrix Page v2 [ANTES]
Segundo Modelo
Calculadora de preços
Modelo passo-a-passo
Heatmap Matrix Page v2 [ANTES]
Símbolos de
interrogação
Terceiro Modelo
Calculadora de preços
Modelo radio-buttons
Terceiro Modelo
Calculadora de preços
Modelo radio-buttons
Heatmap Matrix Page v1 [DEPOIS]
Quarto Modelo
Calculadora de preços
Modelo radio-buttons
passo-a-passo
Matrix Page v2 [DEPOIS]
Heatmap Matrix Page v2 [DEPOIS]
Quarto Modelo
Calculadora de preços
Modelo radio-buttons
passo-a-passo
- Sauro et al, 2005
Para aumentar a significância de dados de
usabilidade é preciso simplificar as
métricas de usabilidade
-...
FACEBOOK A/B TESTS
FACEBOOK A/B TESTS
FACEBOOK A/B TESTS
FACEBOOK A/B TESTS
FACEBOOK A/B TESTS
FACEBOOK A/B TESTS
PREVER A INFLUÊNCIA DO
VISUAL NO USUÁRIO
E se fosse possível
DIMINUIR TAXA DE ERROS NA
ELABORAÇÃO DE INTERFACES
E mais, com isso
Parece que dá
E se eu disser que...
Teoria das cores
Hora de brincar de “quem é o pokémon?”
92.6%
A!rmam que o visual é o
primeiro fator de in"uência
fonte: Loyalty Square
26%
é a porcentagem a mais de
reconhecimen...
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
Que site é esse?
fonte: https://medium.com/design-ux/77eb4f9a439d
fonte: http://www.fastcompany.com/3009317/why-is-facebook-blue-the-science-behind-colors-in-marketing
Ingresse
FEV ~ MAR
com o site e seus usuários reais
remotamente
Coleta realizada no período de
Manaus
São Paulo
são as duas cidades...
FEV ~ MARcom os usuários do site
Pesquisa realizada no período de
Manaus
é a cidade com maior predominância
nas pesquisas
...
66,84 %
Disseram considerar o pôster do
evento, ou a marca do organizador
como item relevante para julgar um
evento como b...
Concentração no objetivo
Elemento de seleção para
selecionar
Palavra de ação para o que deseja
fazer
Comportamentos
interessantes
Cliques no ícone de mapa
Cliques no ícone de descrição do
evento
A/B Teste
Compra com 1 clique
Taxa de aceitação antes
20/semana
Taxa de aceitação depois
20/semana
Antes
Depois
Somente as...
Arquitetura comportamental
Construção de interfaces que levam em consideração o impacto que os
componentes de interface te...
fb.com/bissuh
@bissuh
Para continuar a conversa...
henriquediz.com.br
Canto da Sereia - Guiando o usuário com pistas visuais
Upcoming SlideShare
Loading in …5
×

Canto da Sereia - Guiando o usuário com pistas visuais

Minha apresentação realizada no Front in Rio 2013.

A internet tem ganhado muito espaço como um dos principais meios de comunicação, e suas aplicações, são cada vez mais decisivas na hora de se posicionar estrategicamente nos negócios. Nesta apresentação vou falar sobre como o visual interfere no comportamento do usuário, na hora em que ele navega na sua aplicação, e como podemos usar isso a nosso favor, para guiá-lo a realizar o conjunto de ações que desejamos.

Canto da Sereia - Guiando o usuário com pistas visuais

  1. 1. Canto da sereia guiando o usuário com pistas visuais
  2. 2. Marcelo Henrique @bissuh Manaus - Amazonas Co-fundador Ingresse Plataforma de eventos
  3. 3. Conversão - activation Momento em que o usuário faz uso do seu produto ou serviço Conceito I
  4. 4. Efetividade - effectiveness Métrica de usabilidade que ajuda no entedimento da conversão Conceito II
  5. 5. 5
  6. 6. Primeiro Modelo Calculadora de preços Objetivo con!gurar o pedido exato que queriam e encomendar.
  7. 7. Primeiro Modelo Calculadora de preços Heatmap Matrix Page v1 [ANTES]
  8. 8. Primeiro Modelo Calculadora de preços Heatmap Matrix Page v1 [ANTES] Cliques perdidos
  9. 9. Segundo Modelo Calculadora de preços Modelo passo-a-passo Heatmap Matrix Page v2 [ANTES]
  10. 10. Segundo Modelo Calculadora de preços Modelo passo-a-passo Heatmap Matrix Page v2 [ANTES] Símbolos de interrogação
  11. 11. Terceiro Modelo Calculadora de preços Modelo radio-buttons
  12. 12. Terceiro Modelo Calculadora de preços Modelo radio-buttons Heatmap Matrix Page v1 [DEPOIS]
  13. 13. Quarto Modelo Calculadora de preços Modelo radio-buttons passo-a-passo Matrix Page v2 [DEPOIS]
  14. 14. Heatmap Matrix Page v2 [DEPOIS] Quarto Modelo Calculadora de preços Modelo radio-buttons passo-a-passo
  15. 15. - Sauro et al, 2005 Para aumentar a significância de dados de usabilidade é preciso simplificar as métricas de usabilidade - Callahan, 2000 As pessoas primeiro interagem com a interface. Só em seguida lêem instruções
  16. 16. FACEBOOK A/B TESTS
  17. 17. FACEBOOK A/B TESTS
  18. 18. FACEBOOK A/B TESTS
  19. 19. FACEBOOK A/B TESTS
  20. 20. FACEBOOK A/B TESTS
  21. 21. FACEBOOK A/B TESTS
  22. 22. PREVER A INFLUÊNCIA DO VISUAL NO USUÁRIO E se fosse possível
  23. 23. DIMINUIR TAXA DE ERROS NA ELABORAÇÃO DE INTERFACES E mais, com isso
  24. 24. Parece que dá E se eu disser que...
  25. 25. Teoria das cores Hora de brincar de “quem é o pokémon?”
  26. 26. 92.6% A!rmam que o visual é o primeiro fator de in"uência fonte: Loyalty Square 26% é a porcentagem a mais de reconhecimento de propagandas coloridas fonte: Hermie, P. Stop/watch: everything on the impact of advertisements in magazines. Medialogue; 2005 92.6% A!rmam que o visual é o primeiro fator de in"uência fonte: Loyalty Square 26% é a porcentagem a mais de reconhecimento de propagandas coloridas fonte: Hermie, P. Stop/watch: everything on the impact of advertisements in magazines. Medialogue; 2005
  27. 27. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  28. 28. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  29. 29. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  30. 30. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  31. 31. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  32. 32. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  33. 33. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  34. 34. Que site é esse? fonte: https://medium.com/design-ux/77eb4f9a439d
  35. 35. fonte: http://www.fastcompany.com/3009317/why-is-facebook-blue-the-science-behind-colors-in-marketing
  36. 36. Ingresse
  37. 37. FEV ~ MAR com o site e seus usuários reais remotamente Coleta realizada no período de Manaus São Paulo são as duas cidades com maior quantidade de pessoas KISS Metrics Crazy Egg Foram as duas ferramentas utilizadas para coleta de dados remotamente
  38. 38. FEV ~ MARcom os usuários do site Pesquisa realizada no período de Manaus é a cidade com maior predominância nas pesquisas pessoas responderam a pesquisa180
  39. 39. 66,84 % Disseram considerar o pôster do evento, ou a marca do organizador como item relevante para julgar um evento como bom Co-founding factor marca reconhecida pode ser entendida tanto como logotipo ou renome
  40. 40. Concentração no objetivo Elemento de seleção para selecionar Palavra de ação para o que deseja fazer
  41. 41. Comportamentos interessantes Cliques no ícone de mapa Cliques no ícone de descrição do evento
  42. 42. A/B Teste Compra com 1 clique Taxa de aceitação antes 20/semana Taxa de aceitação depois 20/semana Antes Depois Somente as mudanças visuais não foram suficientes para aumentar conversão neste caso.
  43. 43. Arquitetura comportamental Construção de interfaces que levam em consideração o impacto que os componentes de interface tem no comportamento do usuário Conceito III
  44. 44. fb.com/bissuh @bissuh Para continuar a conversa... henriquediz.com.br

×