SlideShare une entreprise Scribd logo
1  sur  67
Télécharger pour lire hors ligne
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
Briefing
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.
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
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
➔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
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.
Arquitetura de Informação - Spicy
Arquitetura de Informação - Spicy
Arquitetura de Informação - Spicy
Arquitetura de Informação - Spicy
Arquitetura de Informação - Spicy
Benchmark
Um dos principais e-commerces do Brasil, porém com
características mais varejistas e aceitação mais popular
do que a Spicy.
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"
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.
navegação
global
coerente:
toda por
áreas da
casa (exceto
acessórios)
breadcrumbs
e navegação
local bem
demarcados
bom uso de
foto para
ambientar a
categoria
possibilidade
de realizar
ações com
múltiplos
itens de uma
vez
filtro de
preço
bastante
claro
grid clean e
minimalista,
preço não
ser destaque
parece ser
mais
apropriado
para o tipo
de loja
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.
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.
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
informações
principais do
produto
informações mais
detalhadas do
produto divididas
em abas como
sobre o produto,
informações
técnicas, o que
vem na caixa etc.
informações e
ações referentes a
compra do produto
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.
navegação
global com menu
com poucas
categorias
área de drop
down com maior
destaque a
ofertas da
categoria do que
as subcategorias
call-to-action em
destaque
controle de
quantidade de
unidades do
produto a serem
comprados.
Possuem a
mesma cor do
call-to-action
opção de
entrega
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.
Navegação
global com
menu
dropdown
dividido em
categorias e
subcategorias
com carrossel
lateral
randômico
que exibe
diversos
produtos
relacionados a
categoria
selecionada.
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)
Exibição clara
da imagem do
produto e
informações
necessárias
para finalizar a
compra.
Card Sorting
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
Arquitetura de Informação - Spicy
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
1 grupo + 15 participantes
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
Organizações diferentes
➔Copos
➔Pratos
➔Limpeza
➔Café
➔Utensílios variados
➔Churrasco
➔Vinho
➔Climatizadores quente e frio
➔Panelas
➔Fornos e fogões
➔Talheres
➔Elétricos
participante 8
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
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"
Interpretação dos resultados
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.
14 grupos finais
➔Eletrodomésticos
➔Eletroportáteis
➔Climatização
➔Churrasco
➔Café e chá
➔Bar e adega
➔ Potes e recipientes
➔ Panelas
➔ Infantil
➔ Recipientes para bebidas
➔ Pratos
➔ Talheres
➔ Utensílios de copa e cozinha
Agrupamento para navegação
➔Eletro
◆ Eletrodomésticos
◆ Eletroportáteis
◆ Climatização
➔Churrasco
➔Café e chá
➔ Mesa e Cozinha
◆ Potes e recipientes
◆ Panelas
◆ Infantil
◆ Recipientes para bebidas
◆ Pratos
A partir da técnica de card sorting, conseguimos estabelecer o agrupamento e
categorização abaixo:
Agrupamento para navegação
ELETRO
ELETROPORTÁTEISELETRODOMÉSTICOS CLIMATIZAÇÃO
Processadores
Mixers
Liquidificadores
Espremedores
de cítricos
Batedeiras
Torradeiras
Sanduicheiras e
Panini
Grills
Pipoqueiras
Fornos
Fogões
Fornos de
embutir
Fornos de
microondas
Coifas
Dominós
Cooktops
Refrigeradores
Lava-louças
Climatizadores
Ar condicionado
Aquecedores
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á
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
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
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
Wireframes e
descrição funcional
Home
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
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
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.
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
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
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
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
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
Categorias
Produto
Carrinho
Lojas
Conclusão
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.
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.
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.
Obrigado!
http://www.spicy.com.br
http://flxpzg.axshare.com

Contenu connexe

En vedette

итоги работы за 2015 год
итоги работы за 2015 годитоги работы за 2015 год
итоги работы за 2015 годokbtver
 
OneDrive for Business: Much More Than a File Share
OneDrive for Business: Much More Than a File ShareOneDrive for Business: Much More Than a File Share
OneDrive for Business: Much More Than a File ShareErica Toelle
 
Palestra - Card Sorting (atualizada)
Palestra - Card Sorting (atualizada)Palestra - Card Sorting (atualizada)
Palestra - Card Sorting (atualizada)Luiz Agner
 
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadas
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadasActividad para Educación Primaria sobre migración y refugio: Cuentos sin hadas
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadasUNICEF Educación
 
Activated sludge process
Activated sludge processActivated sludge process
Activated sludge processYasir Hashmi
 

En vedette (11)

Hidrosfera
HidrosferaHidrosfera
Hidrosfera
 
Freepracticetest
FreepracticetestFreepracticetest
Freepracticetest
 
Foresight first (2016)
Foresight first (2016)Foresight first (2016)
Foresight first (2016)
 
итоги работы за 2015 год
итоги работы за 2015 годитоги работы за 2015 год
итоги работы за 2015 год
 
OneDrive for Business: Much More Than a File Share
OneDrive for Business: Much More Than a File ShareOneDrive for Business: Much More Than a File Share
OneDrive for Business: Much More Than a File Share
 
Palestra - Card Sorting (atualizada)
Palestra - Card Sorting (atualizada)Palestra - Card Sorting (atualizada)
Palestra - Card Sorting (atualizada)
 
Trachoma
TrachomaTrachoma
Trachoma
 
Trachoma
TrachomaTrachoma
Trachoma
 
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadas
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadasActividad para Educación Primaria sobre migración y refugio: Cuentos sin hadas
Actividad para Educación Primaria sobre migración y refugio: Cuentos sin hadas
 
Activated sludge process
Activated sludge processActivated sludge process
Activated sludge process
 
Journaling To Deal With Anxiety
Journaling To Deal With AnxietyJournaling To Deal With Anxiety
Journaling To Deal With Anxiety
 

Similaire à Arquitetura de Informação - Spicy

Planejamento Spicy & Weber
Planejamento Spicy & WeberPlanejamento Spicy & Weber
Planejamento Spicy & WeberGabriel Boru
 
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdf
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdftrabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdf
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdfRenataNieto4
 
Edição prêmio hotelaria profissional 19.11
Edição prêmio hotelaria profissional 19.11Edição prêmio hotelaria profissional 19.11
Edição prêmio hotelaria profissional 19.11Meio & Mensagem
 
Bartender Store
Bartender Store Bartender Store
Bartender Store Kamila Maia
 
Apresentação Berta Cozinhas Industriais
Apresentação Berta Cozinhas IndustriaisApresentação Berta Cozinhas Industriais
Apresentação Berta Cozinhas Industriaisbertacozinhas
 
Ideia de Negócio- Padaria - Restaurante-esboço.pptx
Ideia de Negócio- Padaria - Restaurante-esboço.pptxIdeia de Negócio- Padaria - Restaurante-esboço.pptx
Ideia de Negócio- Padaria - Restaurante-esboço.pptxGuilhermeHorta11
 
Queijos Nacionais - Proposta de Negócio
Queijos Nacionais - Proposta de NegócioQueijos Nacionais - Proposta de Negócio
Queijos Nacionais - Proposta de NegócioDeroci Nonato Júnior
 
Finalista Demo Day Startup Farm SP - 2a edição
Finalista Demo Day Startup Farm SP - 2a ediçãoFinalista Demo Day Startup Farm SP - 2a edição
Finalista Demo Day Startup Farm SP - 2a ediçãoStartup Farm
 
Página de Produto - Guia SEO para E-commerce
Página de Produto - Guia SEO para E-commercePágina de Produto - Guia SEO para E-commerce
Página de Produto - Guia SEO para E-commerceSEO Master
 
Proposta comercial
Proposta comercialProposta comercial
Proposta comercialDenis Katko
 
Briefing comercial2
Briefing comercial2Briefing comercial2
Briefing comercial2Denis Katko
 
TCC Pós em Mkt Digital - Case Andy's
TCC Pós em Mkt Digital - Case Andy'sTCC Pós em Mkt Digital - Case Andy's
TCC Pós em Mkt Digital - Case Andy'sBianca Furtado
 

Similaire à Arquitetura de Informação - Spicy (13)

Planejamento Spicy & Weber
Planejamento Spicy & WeberPlanejamento Spicy & Weber
Planejamento Spicy & Weber
 
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdf
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdftrabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdf
trabalhousabilidadetheone-100512221442-phpapp01-100519141714-phpapp02.pdf
 
Edição prêmio hotelaria profissional 19.11
Edição prêmio hotelaria profissional 19.11Edição prêmio hotelaria profissional 19.11
Edição prêmio hotelaria profissional 19.11
 
Bartender Store
Bartender Store Bartender Store
Bartender Store
 
Apresentação Berta Cozinhas Industriais
Apresentação Berta Cozinhas IndustriaisApresentação Berta Cozinhas Industriais
Apresentação Berta Cozinhas Industriais
 
Ideia de Negócio- Padaria - Restaurante-esboço.pptx
Ideia de Negócio- Padaria - Restaurante-esboço.pptxIdeia de Negócio- Padaria - Restaurante-esboço.pptx
Ideia de Negócio- Padaria - Restaurante-esboço.pptx
 
Queijos Nacionais - Proposta de Negócio
Queijos Nacionais - Proposta de NegócioQueijos Nacionais - Proposta de Negócio
Queijos Nacionais - Proposta de Negócio
 
Finalista Demo Day Startup Farm SP - 2a edição
Finalista Demo Day Startup Farm SP - 2a ediçãoFinalista Demo Day Startup Farm SP - 2a edição
Finalista Demo Day Startup Farm SP - 2a edição
 
Página de Produto - Guia SEO para E-commerce
Página de Produto - Guia SEO para E-commercePágina de Produto - Guia SEO para E-commerce
Página de Produto - Guia SEO para E-commerce
 
Proposta comercial
Proposta comercialProposta comercial
Proposta comercial
 
Briefing comercial2
Briefing comercial2Briefing comercial2
Briefing comercial2
 
Emporio da Cerveja
Emporio da CervejaEmporio da Cerveja
Emporio da Cerveja
 
TCC Pós em Mkt Digital - Case Andy's
TCC Pós em Mkt Digital - Case Andy'sTCC Pós em Mkt Digital - Case Andy's
TCC Pós em Mkt Digital - Case Andy's
 

Plus de Luiz Agner

Recommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceRecommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceLuiz Agner
 
Pós Branded Content (1c)
Pós Branded Content (1c)Pós Branded Content (1c)
Pós Branded Content (1c)Luiz Agner
 
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioWIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioLuiz Agner
 
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGWIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGLuiz Agner
 
Marketing digital como instrumento de controle
Marketing digital como instrumento de controleMarketing digital como instrumento de controle
Marketing digital como instrumento de controleLuiz Agner
 
Arquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasArquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasLuiz Agner
 
Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Luiz Agner
 
Marco Civil da Internet no Brasil
Marco Civil da Internet no BrasilMarco Civil da Internet no Brasil
Marco Civil da Internet no BrasilLuiz Agner
 
Vigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalVigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalLuiz Agner
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettLuiz Agner
 
Bridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeBridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeLuiz Agner
 
Marketing - Revisão de Conceitos
Marketing - Revisão de ConceitosMarketing - Revisão de Conceitos
Marketing - Revisão de ConceitosLuiz Agner
 
Cultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsCultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsLuiz Agner
 
Bridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoBridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoLuiz Agner
 
Avaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionAvaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionLuiz Agner
 
Arquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMArquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMLuiz Agner
 
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva  - Semana Acadêmica FACHAArquitetura da Informação Pervasiva  - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHALuiz Agner
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJLuiz Agner
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJLuiz Agner
 
Arquitetura de Informação - Spicy
Arquitetura de Informação - SpicyArquitetura de Informação - Spicy
Arquitetura de Informação - SpicyLuiz Agner
 

Plus de Luiz Agner (20)

Recommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceRecommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User Experience
 
Pós Branded Content (1c)
Pós Branded Content (1c)Pós Branded Content (1c)
Pós Branded Content (1c)
 
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioWIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
 
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGWIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
 
Marketing digital como instrumento de controle
Marketing digital como instrumento de controleMarketing digital como instrumento de controle
Marketing digital como instrumento de controle
 
Arquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasArquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemas
 
Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)
 
Marco Civil da Internet no Brasil
Marco Civil da Internet no BrasilMarco Civil da Internet no Brasil
Marco Civil da Internet no Brasil
 
Vigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalVigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura Digital
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
 
Bridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeBridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipe
 
Marketing - Revisão de Conceitos
Marketing - Revisão de ConceitosMarketing - Revisão de Conceitos
Marketing - Revisão de Conceitos
 
Cultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsCultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. Castells
 
Bridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoBridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de Informação
 
Avaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionAvaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi Selection
 
Arquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMArquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIM
 
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva  - Semana Acadêmica FACHAArquitetura da Informação Pervasiva  - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJ
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJ
 
Arquitetura de Informação - Spicy
Arquitetura de Informação - SpicyArquitetura de Informação - Spicy
Arquitetura de Informação - Spicy
 

Arquitetura de Informação - Spicy

  • 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.
  • 17. navegação global coerente: toda por áreas da casa (exceto acessórios) breadcrumbs e navegação local bem demarcados bom uso de foto para ambientar a categoria
  • 18. possibilidade de realizar ações com múltiplos itens de uma vez filtro de preço bastante claro grid clean e minimalista, preço não ser destaque parece ser mais apropriado para o tipo de loja
  • 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
  • 22. informações principais do produto informações mais detalhadas do produto divididas em abas como sobre o produto, informações técnicas, o que vem na caixa etc. informações e ações referentes a compra do produto
  • 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
  • 25. call-to-action em destaque controle de quantidade de unidades do produto a serem comprados. Possuem a mesma cor do call-to-action opção de entrega
  • 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.
  • 27. Navegação global com menu dropdown dividido em categorias e subcategorias com carrossel lateral randômico que exibe diversos produtos relacionados a categoria selecionada.
  • 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)
  • 29. Exibição clara da imagem do produto e informações necessárias para finalizar a compra.
  • 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
  • 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
  • 34. 1 grupo + 15 participantes
  • 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
  • 36. Organizações diferentes ➔Copos ➔Pratos ➔Limpeza ➔Café ➔Utensílios variados ➔Churrasco ➔Vinho ➔Climatizadores quente e frio ➔Panelas ➔Fornos e fogões ➔Talheres ➔Elétricos participante 8
  • 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.
  • 41. 14 grupos finais ➔Eletrodomésticos ➔Eletroportáteis ➔Climatização ➔Churrasco ➔Café e chá ➔Bar e adega ➔ Potes e recipientes ➔ Panelas ➔ Infantil ➔ Recipientes para bebidas ➔ Pratos ➔ Talheres ➔ Utensílios de copa e cozinha
  • 42. Agrupamento para navegação ➔Eletro ◆ Eletrodomésticos ◆ Eletroportáteis ◆ Climatização ➔Churrasco ➔Café e chá ➔ Mesa e Cozinha ◆ Potes e recipientes ◆ Panelas ◆ Infantil ◆ Recipientes para bebidas ◆ Pratos
  • 43. A partir da técnica de card sorting, conseguimos estabelecer o agrupamento e categorização abaixo: Agrupamento para navegação
  • 44. ELETRO ELETROPORTÁTEISELETRODOMÉSTICOS CLIMATIZAÇÃO Processadores Mixers Liquidificadores Espremedores de cítricos Batedeiras Torradeiras Sanduicheiras e Panini Grills Pipoqueiras Fornos Fogões Fornos de embutir Fornos de microondas Coifas Dominós Cooktops Refrigeradores Lava-louças Climatizadores Ar condicionado Aquecedores
  • 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
  • 50. Home
  • 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
  • 62. Lojas
  • 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.