Analise heurística - Ricardo Electro

Iris Jacomino São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro

Ricardo Eletro Análise e insights

O que será apresentado hoje Quem sou eu J Análise heurís:ca e Benchmark •  o que é e como foi realizada •  Resultados •  Insights de outros sites Evolução •  Apresentação de protóMpo •  Proposta para monitoramento (KPIs)

Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro

Análise Heurís:ca


Análise heurís:ca O que é Avaliação elaborada a parMr de critérios e qualidade pré estabelecidos. Como foi realizada •  Escolha de um possível concorrente (Fast Shop) •  IdenMficação de categorias essenciais para boa experiência de compra •  Comparação entre os dois sites


Análise heurís:ca, categorias

•  Homepage (12 critérios) Vitrine da loja, “primeiro contato do cliente o site da empresa” •  Design (9 critérios) Indiretamente transmite valores como profissionalismo e segurança •  Checkout (19 critérios) Fluxo essencial para todo site que vende produtos online

“The checkout process should be the most user-‐tested and reliable sec6on of the site.

When users enter the checkout process, they are looking to complete the purchase. Once

users have selected the products they want to purchase, nothing

should stand in the way.” NN GROUP, E-‐commerce

Reports, 2011


Análise heurís:ca, pontuação Problema grave Todo problema que pode interferir na realização da ação principal Problema leve Todo problema que, indiretamente, pode interferir no desempenho da ação desejada Regular Item presente que pode ser melhorado para a realização da ação principal Bem resolvido Iden6ficação de uma funcionalidade que suporta e encoraja a ação desejada Excelente Iden6ficação de uma funcionalidade que pode ser benchmark

1

2

3

4

5


A análise


Resultados gerais Apesar da grande diferença se encontrar no quesito design… Checkout em ambos os sites é mediano, comprometendo a experiência do usuário devido a questões técnicas; A homepage possui pouca diferença… Trabalhando a questão de prioridade de informações, o site Ricardo Eletro pode se igualar ao concorrente.


0,00

1,00

2,00

3,00

4,00

5,00 Homepage

Design Checkout

Ricardo Eletro

Fast Shop

Homepage




Gaze plot: Teste realizado com a ferramenta Feng GUI, a qual simula a visão humana durante os primeiros 5 segundos de exposição ao site e prevê como a tela será escaneada pelo usuário.


Melhor aproveitamento do espaço nobre •  Menu com as categorias abertas

compete com a promoção;

•  Nenhuma informação sobre o menor preço do brasil (quanto é?);

•  Pouco destaque para os produtos oferecidos.

•  Campo de busca praMcamente invisível


Walmart


•  Preço visível •  Categorias mais importantes em primeiro lugar •  Destaque aos produtos •  Campo de busca visível •  Página com ação visível

Walmart


Amazon


•  Categorias mais importantes em primeiro lugar •  Ofertas e produtos trazem produtos baseados no meu histórico de compraJ •  Campo de busca visível

Amazon


Ricardo Eletro

Fast Shop


Opacity map report: Teste realizado com a ferramenta Feng GUI, simula a visão humana durante os primeiros 5 segundos de exposição ao site e e evidencia quais informações são atraentes e percebidas pelos usuáruis e quais não são, respec6vamente áreas visîveis x áreas não visíveis.


Melhor aproveitamento do espaço nobre •  Menu com as categorias abertas

roubam atenção dos produtos

•  A quanMdade de informações rouba valor agregado dos produtos.

•  QuanMdade de informações torna diicil a tarefa de encontrar e comparar preços.

Layout





Valorização dos produtos As informações em excesso roubam o valor agregado do produto. Obje:vo da página claro O layout deve priorizar a ação principal da página: comprar produto.




Densidade informacional apropriada O site não possui espaços em branco na maior parte das páginas. Todos os respiros são ocupados por propagandas que não auxiliam a decisão de compra.

Aproveitamento das cores As cores contrastantes podem ser uMlizaras para invocar ações importantes: comprar, adicionar ao carrinho, comparar produtos, etc.


Checkout




Itens adicionais Quando compro produtos que tem garanMa, uma página extra é adicionada ao fluxo. “Páginas adicionais reduzem a conversão.”


Referência para apresentar a garanMa: •  Formato permite comparação e escolha •  Dentro de um lightbox

Walmart



Transições Transição entre as telas é excessivamente lenta: •  Na escolha do produto •  No preenchimento do

formulário de idenMficação •  Na escolha da forma de

entrega



Uso inteligente do carrinho •  Site não favorece comparação

de produtos no carrinho. “Usuários usam o carrinho para comparar produtos diferentes e também para revisar a compra: quan6dade, cores, etc.”


Passo a passo O Checkout apresenta muitos passos para a conclusão da compra.


•  O Walmart simplifica o processo e apresenta apenas os passos essenciais.

Walmart


Compre também Coluna “compre também” empurra o botão principal (fechar compra) para a segunda dobra da página.


•  Sugestão de diagramação para os acessórios recomendados ao produto

Bose



Cadastro obrigatório Para comprar no site é obrigatório o cadastro. Isso pode interromper o fluxo de compra. “”


•  O site não interrompe o fluxo com cadastro obrigatório. Como o usuário precisa digitar as informações essenciais durante a compra, primeiro efetua-‐se a transação, depois, o site oferece o cadastro com os dados já preenchidos.

Crate&Barrel



Estrutura e hierarquia em formulários A página de idenMficação não possui diagramação de acordo com a leitura, ou seja, o preenchimento das informações é dificultado..


Pontos de fuga O Checkout os sites possui pontos de fuga, ou seja, informações irrelevantes como o header e o footer.


Durante o fluxo de compra, apenas as informações essenciais permanecem na interface, entre elas: •  Telefone para atendimento •  PolíMca de privacidade •  CerMificado de segurança

Walmart



Ação principal Botão “uMlizar este endereço” tem pouco destaque em relação ao “cadastrar outro endereço”, ou seja, para prosseguir com a compra, o usuário precisa encontrar o botão.


Evolução


AD DIALETO | Análise do site Ricardo Electro Iris Jacomino São Paulo, 9/11/2013

Heurís:cas Nota dev Nota heuris:ca Comentários

Na página do carrinho, o botão "ir para o checkout" está visível no topo e final da página?

1 1

Em algumas compras, uma coluna de compre também aparece na tela do carrinho, afastando o botão fechar compra para o final da página.

Os itens podem ser comparados facilmente no carrinho?

1 1

Não. A diagramação não favorece esta comparação.

As questões de formulários estão agrupados de maneira lógica e estruturada?

1 1

As informações não estão estruturadas em bloco e, por esse moMvo, algumas páginas aparentam estar com problemas de formatação, ex. IdenMficaçao. A ordem poderia ser mais lógica: no passo "escolha do endereço de entrega" poderíamos oferecer as opções de frete, desse modo, o usuário poderá escolher a maneira mais adequada para o endereço escolhido.

Os itens podem ser editados no carrinho (quan:dade, cor, modelo do produto)?

2 1

Apenas a quanMdade pode ser editada.

Cross seling é efe:vo?

1 1

O crosseling empurra botão "fechar compra" para a segunda dobra da página. O usuário precisa "procurar" pelo botão mais importante da tela.

O checkout é livre de informações desnecessárias, irrelevantes e distra:vas?

1 1

Não em todas as páginas. A idenMfcação ainda apresenta o menu principal de categorias abertos, o que pode distrair o usuário. As páginas também deixam o footer inteiro habilitado, juntamente com o campo de busca, o que pode reMrar o usuário do fluxo.


Heurís:cas KPI Comentários Na página do carrinho, o botão "ir para o checkout" está visível no topo e final da página?

Análise da página: % de saídas (diminuiu?), tempo gasto (se diminuiu)?

Em algumas compras, uma coluna de compre também aparece na tela do carrinho, afastando o botão fechar compra para o final da página.

Os itens podem ser comparados facilmente no carrinho? QuanMdade de alterações do produto realizadas no carrinho.

Não. A diagramação não favorece esta comparação.

As questões de formulários estão agrupados de maneira lógica e estruturada?

Tempo total gasto na página "idenMficação". Tempo total gasto na página forma de entrega. Número de usuários que sairem na página forma de entrega.

As informações não estão estruturadas em bloco e, por esse moMvo, algumas páginas aparentam estar com problemas de formatação, ex. IdenMficaçao. A ordem poderia ser mais lógica: no passo "escolha do endereço de entrega" poderíamos oferecer as opções de frete, desse modo, o usuário poderá escolher a maneira mais adequada para o endereço escolhido.

Os itens podem ser editados no carrinho (quan:dade, cor, modelo do produto)?

Quant. De cliques nos botões "aterar" carrinho.

Apenas a quanMdade pode ser editada.

Cross seling é efe:vo? Quant. de pedidos realizados com crosseling.

O crosseling empurra botão "fechar compra" para a segunda dobra da página. O usuário precisa "procurar" pelo botão mais importante da tela.

O checkout é livre de informações desnecessárias, irrelevantes e distra:vas?

Análise-‐funil do checkout: usuários estão clicando menos nos links distraMvos?

Não em todas as páginas. A idenMfcação ainda apresenta o menu principal de categorias abertos, o que pode distrair o usuário. As páginas também deixam o footer inteiro habilitado, juntamente com o campo de busca, o que pode reMrar o usuário do fluxo.


KPIS: Obje:vo: melhorar a conversão do checkout Tipo Página Métricas Periodicidade

Macro:

-‐ Total de compras realizadas no c. alterado x c. anterior

quinzenal -‐ Total de desistências (bouce-‐rate), n. de

saídas no c. atual x c. anterior quinzenal

-‐ Total de compras realizadas que possuem produtos recomendados no c. alterado x c. anterior quinzenal

-‐ Tempo gasto durante fluxo de compra no c. alterado x c. anterior

quinzenal

Micro:

ID Tempo total gasto na página "idenMficação". semanal Página carrinho % de saídas c. alterado x c. anterior semanal Página carrinho Tempo gasto atual x c. anterior semanal

Página carrinho

N. de cliques recebido por bt "fechar compra" c. alterado x c. anterior semanal

Página carrinho N. de cliques no bt "alterar dados" c. alterado semanal

Página "forma de entrega"

Tempo gasto atual no c. atual x c. anterior N. de usuários que sairam na página forma de entrega. semanal

Ou seja, hora do protó:po J


Obrigada J Contato: [email protected]

Tel.: 9 7084 9586


Analise heurística - Ricardo Electro

Internet