Arquitetura de Informação - Spicy

446 visualizações

Publicada em

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 e­commerce da loja Spicy (www.spicy.com.br).

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
446
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Arquitetura de Informação - Spicy

  1. 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
  2. 2. Briefing
  3. 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. 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. 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. 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. 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.
  8. 8. Benchmark
  9. 9. Um dos principais e-commerces do Brasil, porém com características mais varejistas e aceitação mais popular do que a Spicy.
  10. 10. 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"
  11. 11. 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.
  12. 12. 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
  13. 13. 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
  14. 14. 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.
  15. 15. 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.
  16. 16. 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
  17. 17. 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
  18. 18. 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.
  19. 19. navegação global com menu com poucas categorias área de drop down com maior destaque a ofertas da categoria do que as subcategorias
  20. 20. 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
  21. 21. 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.
  22. 22. Navegação global com menu dropdown dividido em categorias e subcategorias com carrossel lateral randômico que exibe diversos produtos relacionados a categoria selecionada.
  23. 23. 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)
  24. 24. Exibição clara da imagem do produto e informações necessárias para finalizar a compra.
  25. 25. Card Sorting
  26. 26. 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
  27. 27. 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
  28. 28. 1 grupo + 15 participantes
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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"
  33. 33. Interpretação dos resultados
  34. 34. 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.
  35. 35. 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
  36. 36. 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
  37. 37. A partir da técnica de card sorting, conseguimos estabelecer o agrupamento e categorização abaixo: Agrupamento para navegação
  38. 38. 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
  39. 39. 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á
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Wireframes e descrição funcional
  44. 44. Home
  45. 45. 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
  46. 46. 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
  47. 47. 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.
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Categorias
  54. 54. Produto
  55. 55. Carrinho
  56. 56. Lojas
  57. 57. Conclusão
  58. 58. 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.
  59. 59. 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.
  60. 60. 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.
  61. 61. Obrigado! http://www.spicy.com.br http://flxpzg.axshare.com

×