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

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)

•  IdenMﬁcaçã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

proﬁssionalismo
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

Iden6ﬁcação
de
uma
funcionalidade
que
suporta
e
encoraja
a
ação

desejada

Excelente

Iden6ﬁcaçã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

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

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

Itens
adicionais

Quando
compro
produtos
que

tem
garanMa,
uma
página
extra

é
adicionada
ao
ﬂuxo.

“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

Transições

Transição
entre
as
telas
é

excessivamente
lenta:

•  Na
escolha
do
produto

•  No
preenchimento
do

formulário
de
idenMﬁcação

•  Na
escolha
da
forma
de

entrega

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
simpliﬁca
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

Cadastro
obrigatório

Para
comprar
no
site
é
obrigatório

o
cadastro.
Isso
pode
interromper

o
ﬂuxo
de
compra.

“”

Iris
Jacomino

-‐

São
Paulo,

9/11/2013

AD
DIALETO
|
Análise
do
site
Ricardo
Electro

•  O
site
não
interrompe
o
ﬂuxo
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

Estrutura
e
hierarquia
em
formulários

A
página
de
idenMﬁcação
não
possui

diagramação
de
acordo
com
a
leitura,
ou

seja,
o
preenchimento
das
informações
é

diﬁcultado..

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
ﬂuxo
de
compra,
apenas
as
informações
essenciais
permanecem
na
interface,

entre
elas:

•  Telefone
para
atendimento

•  PolíMca
de
privacidade

•  CerMiﬁcado
de
segurança

Walmart

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.

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
ﬂuxo
de
compra
no
c.

alterado
x
c.
anterior

quinzenal

Micro:

ID
Tempo
total
gasto
na
página
"idenMﬁcaçã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:
irisjacomino@gmail.com

Tel.:
9
7084
9586

AD
DIALETO
|
Análise
do
site
Ricardo
Electro

Iris
Jacomino

São
Paulo,
9/11/2013

Analise heurística - Ricardo Electro

Mais conteúdo relacionado

Destaque

Semelhante a Analise heurística - Ricardo Electro

Analise heurística - Ricardo Electro