O relatório que vamos apresentar a seguir buscou detalhar uma metodologia de desenvolvimento e pesquisa para apresentar uma nova proposta para a arquitetura da informação do ecommerce da loja Spicy (www.spicy.com.br).
1. Arquitetura
da Informação
PUC Rio - CCE
Ergodesign de Interfaces:
Usabilidade e Arquitetura da Informação
Arquitetura da Informação
Profs. Cínthia Ruiz e Luiz Agner
Danilo Blum, Erica Zambrano e Letice Botelho
3. A Spicy
Loja especializada em itens para
cozinha de "alta qualidade e
design exclusivo", associada a
altos padrões de vida.
Mais de 30 lojas no país, presente nas principais capitais,
fundada em 1996.
4. Público alvo
Pessoas de classe média alta e classe alta
que possuem interesse por gastronomia, bar,
vinho e design de objetos de casa/cozinha
sofisticados e exclusivos.
Indivíduos com idades entre 18 e 65 anos de
ambos os sexos e que more em território
nacional (Brasil).
http://www.adsbrasil.com.br/noticia/04112014Spicy_novaslojas
5. Oferecer uma proposta de reformulação do site da loja
Spicy, tomando como base os fundamentos da
Arquitetura da Informação e resultados da técnica de
Card Sorting aplicada com um grupo de participantes
selecionados.
Objetivo geral
6. ➔Reorganizar o conteúdo da loja virtual (mudanças na taxonomia),
visando melhorar a navegabilidade do site, através de pesquisa feita
com card sorting;
➔Estudar os concorrentes de produtos similares para compreender a
melhor forma de apresentar um conteúdo simples e direto;
➔Estudar também sites de comercio eletrônico para entender as
melhores práticas que devemos aplicar;
➔Definição de um novo wireframe com base nos estudos e entrevistas
realizadas com os usuários.
Objetivos específicos
7. Por que a Spicy?
E-commerce de médio porte com questões interessantes
a serem investigadas em relação à navegação e
estruturação das páginas.
14. Um dos principais e-commerces do Brasil, porém com
características mais varejistas e aceitação mais popular
do que a Spicy.
15. ao rolar a página de produto, surge esse card para facilitar a ação de compra em
qualquer momento de leitura da página, sem precisar scrollar de volta para a
primeira "dobra"
16. Rede de decoração e mobiliário, com público um
pouco mais aproximado da Spicy, o que se reflete nas
decisões de design.
19. B&H Foto & Eletronics
Loja especializada em materiais para fotografia, video
entre outros aparelhos eletrônicos com uma proposta
de busca diferente de outras loja virtuais.
20. navegação global
com menu principal
horizontal separando
os produtos por
áreas de atuação
links com a mesma
divisão do menu
principal no lugar de
banners e outras
informações
normalmente
utilizadas nesta área.
Imagens ajudam a
chamar a atenção ao
tipo de produto o
usuário procura.
21. categorias do menu
principal
drop down com
subcategorias do
menu principal
divididas em dois
campos, imagem
para as mais
relevantes.
Links levam
para a página
da categoria
com as
subcategorias
23. Loja especializada em produtos para cozinha desde
criativos e inovadores a funcionais e divertidos.
Diferente da Spicy, a loja não vende produtos
complexos como eletrodomésticos.
24. navegação
global com menu
com poucas
categorias
área de drop
down com maior
destaque a
ofertas da
categoria do que
as subcategorias
26. Assim como a TokStok, a Etna é uma rede de
decoração e mobiliário, com público um pouco mais
aproximado da Spicy, o que se reflete nas decisões de
design.
28. Loja virtual com características muito semelhantes a
Spicy, especializada em itens domésticos:
cozinha, cama, mesa e banho.
Uma grande vantagem é que o cliente pode realizar compras virtuais com cartão de uma
grande loja de departamento (Renner)
31. Levantamento do conteúdo
➔Levantamento do conteúdo do site
➔Análise de 3 níveis de itens (exclusão dos itens agrupadores)
➔Eliminação de duplicados
➔Correção de nomes para uso fora de contexto e criação de descrições
➔Compilação em 88 cards
32.
33. 1. Conjunto de panelas
2. Panelas avulsas
3. Caçarolas
4. Frigideiras
5. Woks
6. Panelas de fondue
7. Conjunto de facas
8. Bloco de facas
9. Facas avulsas
10. Raladores
11. Moedores para sal e pimenta
12. Espátulas
13. Utensílios variados
14. Escorredores de louça
15. Escorredores de alimentos
16. Gadgets
17. Formas
18. Travessas para forno
19. Bowls e saladeiras
20. Potes
21. Fornos
22. Grills
Levantamento do conteúdo
23. Sanduicheiras e panini
24. Liquidificadores
25. Batedeiras
26. Torradeiras
27. Espremedores de cítricos
28. Processadores
29. Mixers
30. Máquinas de café
31. Adegas
32. Pipoqueiras
33. Cooktops
34. Dominós
35. Coifas
36. Fornos de embutir
37. Forno de microondas
38. Refrigeradores
39. Fogões
40. Lava-louças
41. Aparelhos de jantar
42. Pratos rasos
43. Sousplats
44. Ramekins
45. Petisqueiras
46. Talheres de mesa
47. Talheres de serviço
48. Conjuntos de copos
49. Copos avulsos
50. Taças de vidro
51. Taças de cristal
52. Jarras e garrafas
53. Infantil
54. Saca-rolhas
55. Taças de policarbonato
56. Decanters
57. Acessórios para vinho
58. Coolers para vinho
59. Acessórios para bar
60. Baldes de gelo
61. Garrafas térmicas
62. Xícaras
63. Canecas
64. Cafeteiras e chaleiras
65. Acessórios para café e chá
66. Moedores para café
67. Churrasqueiras a carvão
68. Churrasqueiras a gás
69. Acessórios para churrasco
70. Melamina
71. Coolers para churrasco
72. Bolsas para alimentos
73. Lixeiras
74. Fruteiras
75. Porta-guardanapos
76. Galheteiros
77. Bandejas
78. Jogos americanos
79. Aquecedores
80. Ar condicionado
81. Climatizadores
82. Utensílios para área de serviço
83. Tábuas de passar
84. Varais
85. Cestos
86. Sacos para lixo
87. Carrinhos para compras
88. Baldes
35. Organizações diferentes
➔Forno, fogão e churrasco
➔Café e lanches
➔Copa e cozinha
➔Bar
➔Refrigeração e climatização
➔Área de serviço e limpeza
participante 2
37. Organizações diferentes
➔ Utilidades para casa
◆ Utilidades para cozinha
◆ Utilidades para área de serviço
◆ Gadgets
◆ Utensílios variados
➔ Eletro
◆ Fornos e fogões
◆ Condicionadores de ar
◆ Lava-louças
◆ Tostadores
◆ Misturadores
◆ Refrigeradores
participante 3
➔ Mesa e Cozinha
◆ Pratos
◆ Recipientes para servir e para guardar
◆ Recipientes para cozinhar
◆ Acessórios para cozinhar
◆ Talheres
◆ Acessórios para pôr ordem na mesa
◆ Recipientes para bebidas
➔ Especiais
◆ Vinho
◆ Café
◆ Churrasco
38. Comentários dos participantes
➔Categorias mais fáceis
◆ Área de serviço
◆ Climatização
➔Categorias mais difíceis
◆ Utensílios variados
➔ Produtos mais polêmicos
◆ Carrinho de compras
◆ Bolsas para alimentos
◆ Infantil
➔ Satisfação dos participantes
◆ Média (alguns baixa)
"Agora que eu acabei de fechar e nomear a
organização, já estou vendo outras formas que
poderia ter feito"
40. Casos complexos
➔Bar e Adega
inicialmente separados, porém mesclados por falta de produtos em "Bar".
➔Churrasco x churrasqueiras
alguns participantes separaram, mas optou-se por juntar no final para evitar categorias muito vazias
➔Eletrodomésticos x Forno e Fogão
foram encontradas as duas nomenclaturas, mas optou-se por Eletrodomésticos para incluir também
Refrigeradores e Lava-louças.
➔Panelas x Panelas e travessas
existência dos dois modelos de organização. Opção por apenas "Panelas" por ter sido um grupo bem
consistente para quase metade dos participantes.
45. BAR E ADEGA CHURRASCO CAFÉ E CHÁ
Adegas
Coolers para
Vinho
Decanters
Saca-rolhas
Acessórios para
vinho
Acessórios para
bar
Baldes de gelo
Churrasqueiras
à carvão
Churrasqueiras
à gás
Coolers para
churrasco
Acessórios para
churrasco
Máquinas de
Café
Moedor para
Café
Cafeteiras e
chaleiras
Garrafas
térmicas
Acessórios para
café e chá
46. MESA E COZINHA
PRATOS
Aparelhos de
Jantar
PRATOS
Pratos rasos
Sousplats
Melamina
Talheres de
mesa
Talheres de
serviço
Conjunto de
facas
Facas avulsas
Bloco de facas
Conjunto de
panelas
Panelas avulsas
Caçarolas
Frigideiras
Woks
Panelas de
fondue
Canecas
Jarras e garrafas
RECIPIENTES PARA
BEBIDAS
Conjunto de
copos
Copos avulsos
Taças de cristal
Taças de vidro
Taças de
policarbonato
Xícaras
PANELAS
47. Lixeiras
Sacos para lixo
Baldes
Cestos
Varais
Tábuas de
passar
Potes
Bowls e
saladeiras
POTES E
RECIPIENTES
Petisqueira
Carrinhos para
compras
Utensílios para
áreas de serviço
Travessas p[ara
fornos
Formas
Ramekins
Raladores
Espátulas
Jogos
americanos
Bandejas
Galheteiros
UTENSÍLIOS DE
COPA E COZINHA
Porta
guardanapos
Moedores de sal
e pimenta
Escorredores de
alimentos
Escorredores de
louça
Bolsas para
alimentos
Fruteiras
Gadgets
Utensílios
variados
INFANTIL
ÁREA DE SERVIÇO
48. Principais diferenças
➔Categoria "Decoração"
total inexistência dessa nomenclatura em todos os card sortings realizados.
➔Categoria "Churrasco"
Melamina, Copos e Jarras e Bolsas para alimentos agora encontram-se em outras categorias
➔Categoria "Café"
transformou-se em "Café e Chá" devido a produtos específicos
➔"Cozinha e forno" + "Jantar" = Mesa e Cozinha
união aproximada de duas categorias, porém mantendo um nivelamento hierárquico mais coerente
dos sub-itens
51. Home
1 2
Logo - link para home.
Busca - ferramenta de busca dos produtos, o
resultado aparece em outra página. A ação
de busca é feita apertando a tecla “enter” ou
clicando no icone ao lado da caixa de texto.
Função auto complete: ao digitar, sugere
palavras em uma lista que desce do campo
de input e permite que os visitantes
encontrem e selecionem rapidamente um
determinado valor, agilizando a busca e
funcionando como um filtro de conteúdo.
Pesquisa do tipo “OU”, que inclui todos os
termos buscados e apresenta os resutados
por relevância: primeiros resultados que
incluem todos os termos digitados, depois
resultados que incluem um dos termos
digitados.
1
2
52. Home
3 4 5
5
Lista de casamento - link (texto e imagem)
para a página da “lista de casamento”.
Meus pedidos - link (texto e imagem)
Ao clicar no link pela primeira vez abrirá um
popup com opções de login, caso já tenha
feito ele é direcionado a página de “meus
pedidos”.
Sacola - link (texto e imagem) para a página
do carrinho. Na imagem deve haver uma
indicação da quantidade de itens colocados
no carinho, atualizada em tempo real.
3
4
53. Home
6
6 Até 5 banners com imagens passando da
direita para esquerda em loop a cada 5
segundos. Ao clicar nas setas, o usuário
navega para o próximo banner (seta da
direita) ou o anterior (seta da esquerda). Os
bullets na parte inferior indicam quantos
banners existem e qual está ativo. Ao clicar
em um deles, navega-se para o respectivo
banner. Interagindo pelas setas ou bullets, a
passagem automática de banners “congela”
por 30 segundos, até ser retomada. Ao
chegar no banner final, retorna-se ao
primeiro.
Quando há apenas um banner ativo, não são
exibidas as setas de controle nem os bullets
indicadores.
A ordem dos banners é escolhida pelo
administrador do site, criando uma fila de
publicação que ele pode reordenar, das
quais aparecem sempre os 5 primeiros
resultados.
54. Home - menu
Menu - link para a página da respectiva categoria clicada
e ao executar o mouse over a área de ação muda de cor
e mostra sobre o banner o drop down com subníveis de
categoria.
Drop down - fundo com a mesma cor do mouse over da
categoria, quando possuir apenas um subnível
hierárquico.
Drop down - fundo com a mesma cor do mouse over da
categoria, quando a categoria possuir mais de um nível
hierárquico (no máximo 2 subníveis).
Segundo subnível hierárquico - fundo na cor do mouse
over do item 10.
7
8
9
11
7
8
9
12
12
10 11
Primeiro subnível hierárquico - mouse over a cor muda
mostrando os itens pertencentes de cada um.
10
Produto - link (imagem e texto) direcionando para a
página do produto.
12
55. Home
13 Produtos em destaque - mostrados em duplas os
produtos escolhidos pela loja para estarem em
destaque. Clicando nas setas (direita e esquerda) o
mostrador navega pelas duplas de produtos em loop.
Link em todo o card (imagem, texto e fundo).
Necessário ter sempre um número par de cards, com
no máximo 10.
Os títulos de produto devem ter no máximo 70
caracteres. A descrição do produto deve trazer no
máximo 200 caracteres e truncar o texto com ellipsis.
A ordem dos produtos é escolhida pelo
administrador do site, criando uma fila de publicação
que ele pode reordenar, das quais aparecem sempre
os 10 primeiros resultados.
Se existir apenas 1 produto cadastrado, o
administrador deve receber uma mensagem de
alerta, e este bloco de conteúdo não é exibido na
Home. Se existirem apenas 2, as setas não são
exibidas.
13
56. Home
Cadastro - fundo com alguma cor e com o
comprimento total da tela, em destaque.
Caixa de texto para inserir o email e botão
para confirmar o cadastro adicionando o
email no banco de dados do site. Este
campo deve verificar se foi inserido um e-
mail válido (com @ e extensão de domínio).
Ao cadastrar com sucesso, deve aparecer
uma mensagem de feedback positiva num
modal. Se o usuário já for cadastrado,
informá-lo com uma mensagem de que ele
já faz parte da Newsletter e sugerindo que
ele cheque a caixa de spam caso não esteja
recebendo os e-mails..
14
14
57. Home
15
Blog - cards com imagem, título, texto e tags.
Conteúdo puxado do blog da Spicy. Links
nas imagens, títulos e textos para a página
da postagem. Links das tags carrega na
página do blog todas as postagens que
receberam a tag clicada.
O título do post deve vir sempre completo
de acordo com o blog. Já o texto exibe os
primeiros 270 caracteres e trunca com
ellipsis.
O texto das tags deve vir sempre completo
e podem aparecer até 8 tags.
15
58. Home
17
Footer - Visualmente separado do resto da
página e comprimento ocupando toda a
largura da página.
Footer - áreas de interesse ao consumidor
em destaque com ícone e texto. Link em
“Clique e Fale Conosco” abre um popup
com formulário para envio de mensagem.
16
17
16
18
Footer - links para áreas institucionais da
loja, redes sociais e informações sobre
responsabilidades e direitos da loja e da
empresa.
18
64. Conclusão
Concluímos pela análise dos dados coletados que a metodologia de card sorting é
muito interessante e reveladora sobre o modo de pensar de potenciais usuários.
No decorrer do processo permitimos que os participantes agrupassem os itens em
dois níveis e isso trouxe insumos bastante valiosos e nos ajudou muito na tomada
de decisão para montar o menu de navegação, melhorando assim a taxonomia
atual do site da Spicy.
O benchmark foi útil pois nos possibilitou observar os produtos disponíveis no
mercado que não são concorrentes diretos do mesmo segmento da Spicy.
65. Lições aprendidas
➔Poderia ter sido uma abordagem interessante repetir itens em diferentes
categorias na taxonomia (limitação da metodologia de card sorting da forma
que foi aplicada)
➔Usuários distintos, carregam experiencias semelhantes, podemos verificar isso
nas categorizações muitas vezes parecidas
➔Utilizar as categorias do site da Spicy da forma que são (ao invés de usar
diretamente os produtos) pode ter enviesado um pouco os resultados do card
sorting.
66. Desdobramentos futuros
➔Definida as categorias, aplicar o card sorting fechado para confirmação da
taxonomia
➔Na aplicação desse card sorting fechado, permitir que o cartão possa estar em
mais de uma categoria.
➔Reavaliação da solução de layout do drop down do menu.