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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
A análise
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
0,00
1,00
2,00
3,00
4,00
5,00 Homepage
Design Checkout
Ricardo Eletro
Fast Shop
Homepage
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Walmart
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
• 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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Amazon
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
• Categorias mais importantes em primeiro lugar • Ofertas e produtos trazem produtos baseados no meu histórico de compraJ • Campo de busca visível
Amazon
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Ricardo Eletro
Fast Shop
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Checkout
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Itens adicionais Quando compro produtos que tem garanMa, uma página extra é adicionada ao fluxo. “Páginas adicionais reduzem a conversão.”
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Referência para apresentar a garanMa: • Formato permite comparação e escolha • Dentro de um lightbox
Walmart
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.”
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Passo a passo O Checkout apresenta muitos passos para a conclusão da compra.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
• O Walmart simplifica o processo e apresenta apenas os passos essenciais.
Walmart
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Compre também Coluna “compre também” empurra o botão principal (fechar compra) para a segunda dobra da página.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
• Sugestão de diagramação para os acessórios recomendados ao produto
Bose
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Cadastro obrigatório Para comprar no site é obrigatório o cadastro. Isso pode interromper o fluxo de compra. “”
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
• 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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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..
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Pontos de fuga O Checkout os sites possui pontos de fuga, ou seja, informações irrelevantes como o header e o footer.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
Evolução
Iris Jacomino -‐ São Paulo, 9/11/2013 AD DIALETO | Análise do site Ricardo Electro
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.
AD DIALETO | Análise do site Ricardo Electro Iris Jacomino São Paulo, 9/11/2013
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.
AD DIALETO | Análise do site Ricardo Electro Iris Jacomino São Paulo, 9/11/2013
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
AD DIALETO | Análise do site Ricardo Electro Iris Jacomino São Paulo, 9/11/2013
Obrigada J Contato: [email protected]
Tel.: 9 7084 9586
AD DIALETO | Análise do site Ricardo Electro Iris Jacomino São Paulo, 9/11/2013
Recommended
