Arquitetura da InformaçãoPUC Rio - CCEErgodesign de Interfaces: Usabilidade e Arquitetura da Informação

Arquitetura da InformaçãoProfs. Cínthia Ruiz e Luiz Agner

Danilo Blum, Erica Zambrano e Letice Botelho

Briefing

A SpicyLoja 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 alvoPessoas 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.

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

1. Conjunto de panelas2. Panelas avulsas3. Caçarolas4. Frigideiras5. Woks6. Panelas de fondue7. Conjunto de facas8. Bloco de facas9. Facas avulsas10. Raladores11. Moedores para sal e

pimenta12. Espátulas13. Utensílios variados14. Escorredores de louça15. Escorredores de alimentos16. Gadgets17. Formas18. Travessas para forno19. Bowls e saladeiras20. Potes21. Fornos22. Grills

Levantamento do conteúdo

23. Sanduicheiras e panini24. Liquidificadores25. Batedeiras26. Torradeiras27. Espremedores de

cítricos28. Processadores29. Mixers30. Máquinas de café31. Adegas32. Pipoqueiras33. Cooktops34. Dominós35. Coifas36. Fornos de embutir37. Forno de microondas38. Refrigeradores39. Fogões40. Lava-louças41. Aparelhos de jantar42. Pratos rasos43. Sousplats44. Ramekins

45. Petisqueiras46. Talheres de mesa47. Talheres de serviço48. Conjuntos de copos49. Copos avulsos50. Taças de vidro51. Taças de cristal52. Jarras e garrafas53. Infantil54. Saca-rolhas55. Taças de policarbonato56. Decanters57. Acessórios para vinho58. Coolers para vinho59. Acessórios para bar60. Baldes de gelo61. Garrafas térmicas62. Xícaras63. Canecas64. Cafeteiras e chaleiras65. Acessórios para café e chá66. Moedores para café

67. Churrasqueiras a carvão68. Churrasqueiras a gás69. Acessórios para churrasco70. Melamina71. Coolers para churrasco72. Bolsas para alimentos73. Lixeiras74. Fruteiras75. Porta-guardanapos76. Galheteiros77. Bandejas78. Jogos americanos79. Aquecedores80. Ar condicionado81. Climatizadores82. Utensílios para área de

serviço83. Tábuas de passar84. Varais85. Cestos86. Sacos para lixo87. Carrinhos para compras88. 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 Adegainicialmente separados, porém mesclados por falta de produtos em "Bar".

➔ Churrasco x churrasqueirasalguns participantes separaram, mas optou-se por juntar no final para evitar categorias muito vazias

➔ Eletrodomésticos x Forno e Fogãoforam encontradas as duas nomenclaturas, mas optou-se por Eletrodomésticos para incluir também Refrigeradores e Lava-louças.

➔ Panelas x Panelas e travessasexistê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

➔ Área de serviço

➔ 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á

➔ Bar e adega

➔ Área de serviço

➔ Mesa e Cozinha

◆ Potes e recipientes

◆ Panelas

◆ Infantil

◆ Recipientes para bebidas

◆ Pratos

◆ Talheres

◆ Utensílios de copa e cozinha

A partir da técnica de card sorting, conseguimos estabelecer o agrupamento e categorização abaixo:

Agrupamento para navegação

ELETRO

ELETROPORTÁTEIS

ELETRODOMÉ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 churrascoAcessó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 policarbonat

o

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

Portaguardanapos

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 Cozinhaunião aproximada de duas categorias, porém mantendo um nivelamento hierárquico mais coerente dos sub-itens

Wireframes e descrição funcional

Home

Home1 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

Home3 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 - menuMenu - 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 11Primeiro 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

Home13

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

HomeCadastro - 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

Home15

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