Arquitetura de Informação - Spicy

335 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
335
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
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.     PUC­Rio ­ CCE  Pós­graduação em Ergodesign de Interfaces: Usabilidade e  Arquitetura da Informação  Disciplina: ​Arquitetura da Informação  Professores:​ Cínthia Ruiz e Luiz Agner  Alunos: ​Danilo Blum, Erica Zambrano e Letice Botelho                Arquitetura da Informação do website ​www.spicy.com.br       
  2. 2.   Sumário Executivo  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).   A análise teve como objetivo principal representar o conteúdo integral do site, e sugerir  profundas mudanças não só na esfera da estrutura de páginas, através de wireframes,  como também uma grande mudança na taxonomia, visando facilitar a interação do usuário  com os produtos comercializados na loja virtual.  O primeiro passo para a tarefa de reestrururação consistiu em uma análise do cenário atual  do site (estruturação das páginas) conforme o prisma da arquitetura da informação e das  teorias do design de interação.  Paralelamente, realizamos um estudo de Benchmarking com alguns sites concorrentes  (produtos similares), e com sites com boa estruturação e navagação de e­commerce, com o  propósito de identificar os modelos que estão sendo mais usados e observar as novas  tendências que as grandes lojas estão adotando.  O passo seguinte adotado foi a realização de Card Sorting (aberto), nas modalidades  Grupo​ e ​Individual​, a fim de observar o comportamento e o raciocínio de cada um dos  indivíduos. A técnica possibilitou compreender o modelo mental que cada um dos usuários  utilizou para categorizar o conteúdo apresentado.  Os resultados coletados foram inseridos na planilha de Donna Spencer e analisados  juntamente com as observações feita pelo grupo durante a realização dos Card Sortings.  Esse processo gerou input para a elaboração da nova taxonomia do site.  Para demonstrar a arquitetura proposta, desenvolvemos 5 telas de wireframes navegáveis  (Home, Categorias, Produtos, Sacola, Lojas). A proposta consiste principalmente, em uma  navegação mais intuitíva para os usuários.       
  3. 3. 1. INTRODUÇÃO  1.1. Tema e objetivos  Tema  E­commerce voltado para casa e cozinha, com produtos sofisticados, direcionado para  classes mais altas.  Objetivo geral  Este estudo tem como principal objetivo 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 usuários selecionados.   Objetivos específicos  ● 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 card sortings realizados  com os usuários.  Objetivos operacionais  ● Adquirir conhecimento de como conduzir um card sorting e a trabalhar com a  planilha de análise criada por Donna Spencer;  ● Entender como o benchmarking pode contribuir para o processo de design;  ● Observar a agilidade e eficácia dos wireframes para comunicação e documentação  de idéias no que tange a estruturação de uma página. 
  4. 4. 1.2. Contextualização  A Spicy é uma loja focada em utensílios para cozinha, produtos de mesa e decoração e  acessórios para bar e vinho, com produtos exclusivos comercializados no Brasil e design  sofisticados que visam facilitar o dia a dia dos seus consumidores.  O carro chefe da loja são as linhas voltadas para alta gastronomia, que proporcionam uma  experiência diferenciada para os amantes de forno e fogão gourmet.  Outro segmento muito importante da loja são as linhas de bar e vinho, para que os seus  consumidores possam receber amigos e parentes com todo o conforto e requinte que uma  confraternização merece.  1.3. Público alvo  Mulheres e homens adultos de classe média e classe média alta, no território nacional, que  possuem interesse por gastronomia, bar, vinho e design de objetos de casa/cozinha  sofisticados e exclusivos, com idades aproximadas entre 18 a 65 anos.  1.4. Por que a Spicy?  Escolhemos a Spicy por se tratar de um e­commerce de médio porte com questões  interessantes a serem investigadas em relação à navegação e estruturação das páginas:  ● Taxonomia confusa, com mistura de níveis hierárquicos diferentes em seções  semelhantes, rótulos idênticos levando a categorias diferentes, repetição  desnecessária de rótulos e itens que não parecem pertencer aos grupos corretos.  ● Home com nenhuma presença de produtos, exceto nos banners de destaque;  ● Página de categorias confusa, com itens semelhantes tratados visualmente de  maneiras diferentes, que podem ser confudidos com um banner;  ● Página de produto pouco trabalhada, com descrição pouco estruturada, com linhas  de texto muito longas e cansativas;  ● Sacola de compras pouco estruturada e isolada do restante do site, informações  sobre o valor do frete, muito escondida na sacola (só conseguimos calcular o frete  depois de passar pela etapa de preenchimento de dados pessoais).  ● A má construção da página de Lojas faz com que a API do Google Maps crie um  ambiente confuso, do qual o usuário muitas vezes não consegue sair de “dentro” do  mapa na página de Lojas, gerando uma confusão dos comandos de scroll da página 
  5. 5. e de zoom do mapa. Isso ocorre, por que o scroll responde a elementos diferentes,  dependendo de onde o mouse está posicionado, as vezes a página como um todo  ou a um elemento, como por exemplo o mapa.  Home    Categorias 
  6. 6.   Produto    Carrinho 
  7. 7.   Lojas       
  8. 8. 2. BENCHMARKING  Para o processo de benchmarking, foi realizada uma busca de sites concorrentes de  produtos para casa, cozinha, bar e vinho que comercializam produtos gourmet e design  arrojados e exclusivos. Também buscamos inspirações em sites de utensílios de cozinha  mais simples, e em grandes e­commerces, onde observamos exclusivamente a navegação  e a organização de categorias. Neste processo, observamos:  • Formatação de conteúdo (menus, submenus, categorias)  • Apresentação de conteúdo explicativo dos produtos  • Conceito ou conteúdo diferenciado/arrojado    Lojas objetos de estudos do Benchmarking                     
  9. 9. 2.1 E­commerce selecionados para o estudo  2.1.1 Americanas.com  Descrição: ​Um dos principais e­commerces do Brasil, porém com características mais  varejistas e aceitação mais popular do que a Spicy.  Link:​ www.americanas.com  Caso de observação e estudo:      
  10. 10.        
  11. 11.    
  12. 12.          
  13. 13. 2.1.2 Tok & Stok  Descrição: ​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. É interessante notar, por exemplo, que  diferente da Americanas, que tem preços competitivos, a Tok&Stok não enfatiza  visualmente os preços de seus produtos, pois para ela este não é um fator que estimula a  compra (muito pelo contrário).  Link: ​www.tokstok.com.br  Caso de observação e estudo:      
  14. 14.      
  15. 15. 2.1.3 B&H Foto & Eletronics  Descrição: ​Loja especializada em materiais para fotografia, video entre outros aparelhos  eletrônicos com uma proposta de busca diferente de outras lojas virtuais.  Link:​ www.bhphotovideo.com/  Caso de observação e estudo:  
  16. 16. 2.1.4 Que cozinha  Descrição:​ 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.   Link:​ www.quecozinha.com.br/  Caso de observação e estudo:    
  17. 17.              
  18. 18. 2.1.5 Etna  Descrição: ​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.  Link: ​www.etna.com.br  Caso de observação e estudo:  
  19. 19.      
  20. 20. 2..1.6 Camicado  Descrição:​ 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)  Link:​ www.camicado.com.br  Caso de observação e estudo:     
  21. 21.  
  22. 22. 3. CARD SORTING  3.1. Levantamento do conteúdo e preparação dos cards  O primeiro passo para a realização da dinâmica do card sorting foi o levantamento do  conteúdo do site da Spicy. Para isso, o grupo navegou em todas as categorias de primeiro e  segundo nível (no menu de navegação global) e também de terceiro nível (navegação local  em páginas de produtos) – vide ​imagem 3.1.A​.    Imagem 3.1.A: diferentes níveis de categoria inventariados.  Foi construída então uma lista com todos os itens encontrados e a partir dela a seleção dos  itens que efetivamente se transformariam em cards. O critério utilizado foi utilizar sempre as  categorias no nível mais profundo possível, ou seja, foram excluídas categorias  agrupadoras (ex.: eletrodomésticos, talheres).   Além disso, foram excluídas subcategorias que se repetiam. Por fim, alguns nomes foram  ligeiramente alterados para sua compreensão isoladamente, fora do contexto das árvores  de navegação (ex.: "de embutir" foi alterado para "forno de embutir", "coolers" foi alterado  para "coolers para churrasco" e "coolers para vinho", visto que o termo se repetia nas duas  respectivas categorias­mãe (Churrasco e Vinho), mas os produtos apresentados em cada  uma eram diferentes. A lista completa encontra­se no ​Anexo 9.1: inventário completo. 
  23. 23. Para alguns cards, providenciamos ainda uma descrição do que se encontrava em cada  subcategoria, ou uma explicação do que era o produto, caso fosse menos conhecido pelo  público em geral.   No total, a soma foi de 88 cards para a realização da dinâmica (ver ​Anexo 9.2: Lista de  cards​).  3.2. Aplicação da metodologia de Card Sorting  Com a participação de um grupo de 4 pessoas e mais 15 participantes individuais, foi  aplicada a metodologia do Card Sorting aberto, que consiste em:  1) orientar os participantes a agruparem os cartões da forma que melhor entenderem;  2) solicitar aos participantes que nomeiem os grupos formados.  Por causa da flexibilidade de organização que o método permite, foram elaboradas  taxonomias das mais simples às mais complexas: alguns participantes agruparam todo o  conteúdo em apenas 6 categorias; outros em mais de 10. Outros, ainda, utilizaram  subgrupos para melhor dividir o conteúdo.  Seguem alguns exemplos de organizações de grupos radicalmente diferentes:  Participante 2  Participante 3  Participante 8  1. Forno, fogão e  churrasco  2. Café e lanches  3. Copa e cozinha  4. Bar  5. Refrigeração e  climatização  6. Área de serviço e  limpeza  1. Especiais  a. Vinho  b. Café  c. Churrasco  2. Utilidades para casa  a. Utilidades  para cozinha  b. Utilidades  para área de  serviço  c. Gadgets  d. Utensílios  variados  3. Eletro  a. Fornos e  fogões  b. Condicionad ores de ar  c. Lava­louças  d. Tostadores  e. Misturadores  f. Refrigerador es  4. Mesa e Cozinha  a. Pratos  1. Copos  2. Pratos  3. Limpeza  4. Café  5. Utensílios variados  6. Churrasco  7. Vinho  8. Climatizadores  quente e frio  9. Panelas  10. Fornos e fogões  11. Talheres  12. Elétricos 
  24. 24. b. Recipientes  para servir e  para guardar  c. Recipientes  para cozinhar  d. Acessórios  para cozinhar  e. Talheres  f. Acessórios  para pôr  ordem na  mesa  g. Recipientes  para bebidas    Foi constatado, tanto a partir da observação dos participantes quanto de seus próprios  comentários, que dentre as categorias mais fáceis de organizar foram, para a maioria:  climatização e área de serviço. A maior dificuldade, no entanto, foi observada nos utensílios  variados de cozinha e alguns itens dúbios, como Carrinhos para Compras e Bolsas para  Alimentos. O item Infantil também se mostrou confuso e foi posicionado de formas bastante  diferente pelos participantes, embora a maioria o tenha separado em uma categoria à parte.  No geral, o raciocínio predominante foi o de organizar geograficamente por ambientes da  casa ("cozinha", "área de serviço") e por ocasiões e eventos temáticos ("churrasco",  "vinho").  Alguns dos participantes terminaram a tarefa ainda insatisfeitos com seus esquemas de  organização. Uma delas chegou a comentar: "Agora que eu acabei de fechar e nomear a  organização, já estou vendo outras formas que poderia ter feito".  
  25. 25.     3.3. Interpretação dos resultados e estruturação de uma nova taxonomia  Para a interpretação dos resultados, foi utilizada a planilha de Card Sorting criada por  Donna Spencer. Nela, registram­se os cards utilizados e os resultados da associação que  cada participante fez dos produtos e respectivas categorias. Para esta planilha, foram  utilizados apenas os dados dos card sortings individuais. Porém, ao final de todo o  processo, foi interessante observar que o resultado do card sorting realizado com um grupo  de 4 pessoas foi o que mais se aproximou da taxonomia final.  Após esta etapa de registro, normatiza­se nomes semelhantes utilizados pelos participantes  (ex.: "Área de serviço" x "Utilidades para área de serviço). Por fim, a tabela oferece uma  visão estatística da posição dos itens em cada grupo: 
  26. 26.   A partir desta tabela, foi possível construir os grupos finais para estruturação do conteúdo. A  estratégia utilizada foi primeiramente trabalhar os grupos mais óbvios, como Climatização  ou Área de Serviço, e posteriormente trabalhar casos mais complicados ou categorias mais  dúbias.  Alguns casos de decisão mais complexos foram:  1. Bar e Adega  A princípio, parecia mais coerente manter uma categoria exclusiva para vinho, que  chamamos de Adega, pois foi como a maior parte dos participantes classificou.  Porém, ao final, sobravam dois produtos (Baldes para Gelo e Acessórios para Bar),  que não se encaixavam tão bem em outras categorias. Ao mesmo tempo, criar uma  categoria "Bar" somente para eles parecia desnecessário. Por isso, foi tomada a  decisão de reunir Bar e Adega.    2. Churrasco x churrasqueiras  Alguns participantes juntaram todos os produtos de churrasco em uma  únicacategoria, outros diferenciaram Churrasqueiras em um grupo à parte. Porém,  como no caso anterior, achamos que não valia a pena manter o grupos  Churrasqueiras com tão poucos itens.    3. Eletrodomésticos x Forno & e Fogão  Alguns participantes uniram os Eletrodomésticos numa categoria com este nome,  porém outros chamaram de Forno e Fogão. No final, optou­se por utilizar  Eletrodomésticos, para poder incluir também refrigeradores e lava­louças, que do 
  27. 27. contrário ficariam de fora.    4. Panelas x panelas e travessas  Foi bastante dividida a posição de travessas e formas para assar entre os  participantes. Alguns colocaram junto com Panelas, outros com Utensílios. Por fim,  decidiu­se por deixar uma categoria exclusiva para panelas, sem estes itens, pois  houve concordância de diversos participantes inclusive no nome simples da  categoria (Panelas).  No final, chegou­se a 14 grupos:  1. Eletrodomésticos  2. Eletroportáteis  3. Climatização  4. Recipientes para bebidas  5. Pratos  6. Talheres  7. Utensílios de copa e cozinha  8. Potes e recipientes  9. Panelas  10. Infantil  11. Churrasco  12. Café e chá  13. Bar e adega  14. Área de serviço  No entanto, pensando numa estrutura de navegação de site, 14 categorias seria muito para  o menu principal. Por isso, unimos as categorias em grupos maiores observando as  organizações que alguns participantes fizeram (como relatado, alguns fizeram grupos e  subgrupos). Assim, chegamos taxonomia final:    Visão geral   
  28. 28.        
  29. 29.        
  30. 30. 3.4. Principais diferenças entre a taxonomia atual e a proposta  A taxonomia proposta possui diversas diferenças em relação à que se encontra no site  atualmente. As que mais chamam a atenção são:  1. Categoria "Decoração"  No site da Spicy, há uma categoria de primeiro nível, ou seja, no menu de  navegação global, chamada Decoração. Ela inclui produtos como lixeiras,  aquecedores e aparelhos de ar­condicionado. Nenhum dos participantes do Card  Sorting utilizou o termo "Decoração" para se referir a estes termos.    2. Categoria "Churrasco"  Melamina, Copos e Jarras e Bolsas para alimentos antes faziam parte da categoria  de churrasco, porém na nova taxonomia proposta estes itens se distribuem em  outros grupos.    3. Categoria "Café"  No site atual, existe uma categoria chamada Café. Porém, com a nova taxonomia,  seu nome muda para Café e Chá, visto que possui produtos que atendem também  ao universo de chá e por isso precisa de um nome mais explícito.    4. Mesclagem de "Cozinha e Forno" e "Jantar"  Na taxonomia proposta, a categoria Mesa e Cozinha é praticamente uma mistura de  outras duas categorias atuais do site: Cozinha e Forno, e Jantar. Porém, a  subcategorização dentro deste grupo maior é bem diferente e mais objetiva,  agrupando todas as Panelas, todos os Talheres, todos os Recipientes para Bebidas  etc em grupos próprios. Hoje, no site da Spicy, o que ocorre é uma mistura de  diversos níveis de detalhamento, como "Panela", que agrupa diversos tipos de  panelas, no mesmo nível que "Formas", uma subcategoria simples, sem outras  ramificações ou divisões.  Na página a seguir, comparações das duas taxonomias (antes e depois).         
  31. 31.       
  32. 32. 4. WIREFRAME  4.1. Sketches  Para elaborar melhor o pensamento e criar consenso em  como deveriam ser as estruturas de página,  primeiramente foram feitos sketches em papel.  Este se mostrou um processo bem ágil para a geração  de idéias, visto que é simples para fazer, avaliar,  descartar e recomeçar, já que não depende de softwares  específicos e o nível de detalhe ainda é baixo. Trata­se  realmente de uma primeira aproximação a novas idéias,  feita de maneira bem crua e bruta.  As telas escolhidas para redesign foram: Home,  Categorias, Produto, Sacola e Lojas.        4.2. Wireframes  Posteriormente, o grupo desenhou as telas no software Axure, que se mostrou ser uma  ferramenta prática e bem estruturada, apesar de um estranhamento inicial e da curva de  aprendizado.       
  33. 33. 4.2.1. Home  Alterações realizadas:  ● Utilização da taxonomia construída a partir do  card sorting;  ● Criação de um menu de navegação global  com dropdown, que suportasse todos os  níveis de subcategorização e trouxesse  imagens dos produtos já nesta navegação;  ● Redução do banner de destaque para deixar  mais claro que há conteúdo abaixo dele  (diferente da situação atual);  ● Criação de uma seção voltada para produtos  em destaque pela curadoria do site, e também  os mais rankeados;  ● Criação de uma área com os produtos mais  rankeados pelos clientes  ● Criação de uma área com dicas e receitas  voltada aos eventos apresentados na  taxonomia sugerida pelos usuários.   ● Criação de uma área com incentivo ao  acompanhamento da marca Spicy nas redes  sociais;  ● Reestruturação da estrutura de previews de  posts do blog, trazendo inclusive as tags dos  posts para maior clareza do que se refere o  conteúdo.       
  34. 34. 4.2.2. Categorias  Alterações realizadas:  ● Padronização visual dos elementos de mesmo nível hierárquico, diferente do que  ocorre hoje com categorias à direita da página, que parecem banners;  ● Utilização da foto de ambientação de categoria no topo da página, por trás das  navegações principais, com o intuito de ocupar menos espaço vertical na página e  ao mesmo tempo marcar uma presença ainda maior.         
  35. 35. 4.2.3. Produto  Alterações realizadas:  ● Utilização de um card flutuante no  momento do scroll, para facilitar o clique no  botão de compra e uma visualização rápida  das informações mais relevantes do  produto, já que nesta posição da página  ("abaixo da dobra") o usuário teria  perdido­as de vista;  ● Redução da largura das colunas de texto,  hoje gerando linhas muito longas e  cansativas. Recomenda­se que no layout  sejam utilizadas tipografias maiores para  facilitar a legibilidade.  ● Criação da área de comentários sobre o  produto com a quantidade de estrelas  dadas pelos usuários.  ● Retirada do calculo do frete, destinando­o  para a pagina da sacola.           
  36. 36. 4.2.4. Sacola  Alterações realizadas:  ● Utilização da navegação global do site e todo o header para facilitar a navegação  livre. Hoje, a sacola é totalmente isolado do resto do site;  ● Inclusão do cálculo de frete neste momento da interação, para o usuário saber qual  é o verdadeiro valor total de sua compra;  ● Criação de uma área destinada ao somatório detalhado de todos os produtos mais o  frete calculado, gerando uma soma total clara e acompanhada do botão de "finalizar  compra".   
  37. 37. 4.2.5. Lojas  Alterações realizadas:  ● Diminuição da área do mapa para evitar o problema de scroll anteriormente relatado;  ● Lista de lojas ao lado do mapa.       
  38. 38. 4.3. Descrição funcional  Home    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.  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.  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 
  39. 39. 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.      Menu drop down    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). 
  40. 40. Primeiro subnível hierárquico ­ mouse over a cor muda mostrando os itens pertencentes de cada  um.  Segundo subnível hierárquico ­ fundo na cor do mouse over do item 10.  Produto ­ link (imagem e texto) direcionando para a página do produto.    Home ­ continuação    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.    Produtos mais rankeados ­ mostrados em ordem de cima para baixo dos 5 produtos mais bem  rankeados do site pelos usuários. Caso tenham produtos com a mesma quantidade de estrelas  preenchidas, o critério de desempate é em quantidade de usuários que avaliaram o produto. Caso  estejam empatados em numero de usuários que avaliaram, o critério será em ordem alfabética. Cada  área retangular com as informações dos produtos funciona com link para a página dos mesmos. 
  41. 41.   Dicas e receitas ­ área com dicas e receitas envolvendo os temas dos eventos da taxonomia  sugeridas pelos usuários. Abaixo do título da área estão 3 botões com os nomes dos eventos. Cada um  possui 3 estágios, normal sem cor de fundo, mouse over com o fundo de outra cor e ao clicar e  selecionado com o fundo de outra cor diferente do mouse over.  Dentro do quadro há espaço destinado a uma foto, título e texto em duas colunas. Dependendo da  quantidade de texto a altura do quadro de fundo pode variar mantendo a altura da foto fixa. Caso o  texto seja menor qua a altura da foto, o quadro de fundo se mantem com a mesma altura da foto.  O administrador define apenas uma dica ou receita para cada tema. Estas são alteradas com fade in e  out conforme os botões são acionados. Ao carregar a página Home o botão a esquerda comeá  selecionado e por consequencia sua respectiva dica ou receita também.  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..   
  42. 42.   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.    Feed de notícias do Twitter ­ o usuário pode escrever um tweet para a conta da spicy e visualizar o  que os usuários tem postado na conta da empresa.  Feed do Facebook ­ o usuário pode ver quem e quantos amigos curtiram a página da Spicy no  Facebook. Ao clicar abre em outra aba do navegador a página da Spicy do Facebook.  Feed do Instagram ­ fotos dos usuários do Instagram que colocarem as hashtags (#) definidas pelo  administrador aparecerão no feed. Elas são atualizadas cada vez que carrega a página Home. 
  43. 43.   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.  Footer ­ links para áreas institucionais da loja, redes sociais e informações sobre responsabilidades  e direitos da loja e da empresa.       
  44. 44. 5. CONCLUSÃO  A partir da análise dos dados coletados, concluímos 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 mais adequado para o espaço do site, melhorando  assim a taxonomia do site da Spicy.  O benchmark foi útil pois nos possibilitou observar outras plataformas disponíveis no  mercado que não são concorrentes diretos do mesmo segmento da Spicy e trouxeram  insumos muito interessantes, que foram aproveitados nos wireframes propostos.  Os wireframes são uma ótima ferramenta para estudar de forma mais ágil a estruturação de  um site, visto que são menos complexos do que a criação de layouts detalhados, e nos  permitem focar realmente nas questões estruturais e de navegação que interessam no  momento, sem distrações de cor e textos que seriam mais suscetíveis à opinião estética  pessoal.  6. LIÇÕES APRENDIDAS  Usuários distintos carregam experiências semelhantes, e podemos verificar isso nas  categorizações muitas vezes parecidas. É importante observar os padrões mais óbvios e  agrupá­los, mas também ser criterioso quando as opiniões conflitantes emergem.  Ter realizado o card sorting com muito foco no preenchimento da planilha de Donna  Spencer nos fez excluir, a princípio, a idéia de repetir cards em diferentes categorias, tanto  durante a realização dos card sortings com os participantes, quanto na elaboração de uma  taxonomia final a partir da análise dos dados coletados.  Nenhum dos participantes optou por repetir itens no card sorting (e, de qualquer forma, se o  fizessem, somente uma das opções seria passada para a planilha). No entanto, o grupo  observou que ao final do processamento dos dados, poderia ter sido interessante pensar  em uma abordagem também com repetição – principalmente nos casos dos produtos mais  dúbios.  Por fim, 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,  principalmente nas categorias temáticas relacionadas a eventos. Já existiam muitas  categorias voltadas para Churrasco, Bar e Vinho, e isso ficou evidente para os participantes, 
  45. 45. embora não necessariamente os produtos inseridos nessas categorias sejam  estatisticamente representativos no acervo de produtos da Spicy.  7. DESDOBRAMENTOS FUTUROS  Uma possibilidade de desdobramento para este trabalho seria de, definidas agora as novas  categorias, aplicar o card sorting fechado para confirmação da taxonomia. E nesta nova  averiguação, permitir que o cartão possa estar em mais de uma categoria. Além disso,  também na análise dos dados da planilha, poderia ser adotada uma abordagem inclusiva  ("e") para os itens polêmicos, e não exclusiva ("ou"). Ou seja, no caso dos produtos que  ficaram visivelmente divididos entre duas ou mais categorias de forma equilibrada, poderiam  ter sido repetidos nas mesmas na taxonomia final, ao invés da opção por apenas uma ou  outra.  E então, para comprovar qual modo de organização seria mais eficiente, realizar um teste  de usabilidade (presencial ou remoto), solicitando aos usuários que encontrassem  determinadas subcategorias, repetidas ou únicas.  Outro desdobramento futuro é pensar numa nova estrutura para o menu de navegação  global, que seja mais escalável, caso o número de subcategorias crescesse muito no futuro  da loja.  8. REFERÊNCIAS BIBLIOGRÁFICAS  Loja Spicy. Disponível em: ​http://www.spicy.com.br​. Acessado em outubro e novembro de  2015.  Spicy inaugura mais quatro lojas até o final do ano. Disponível em:  http://www.adsbrasil.com.br/noticia/04112014Spicy_novaslojas​. Acessado em novembro de  2015.  9. ANEXOS  9.1. Inventário completo  Legenda: 
  46. 46. termos em cinza​: não transformados em cards  termos em azul​: transformados em cards  (​termos sublinhados entre parênteses​)​: termos corrigidos para melhor compreensão fora de  contexto  (termos em vermelho entre parênteses)​: outros comentários  ● Cozinha e Forno  ● Panela  ○ Conjunto de panelas  ○ Panelas avulsas  ○ Caçarolas  ○ Frigideiras  ○ Woks ​(explicar)  ○ Fondues ​(Panelas de Fondue)  ● Facas  ○ Conjunto de facas  ○ Bloco de facas ​(explicar)  ○ Facas avulsas  ● Utensílios  ○ Raladores  ○ Moedores  ○ Escorredores  ○ Espátulas  ○ Talheres ​(excluir pois já existe como agregador, agrupando "talheres  de mesa" e "talheres de serviço, mais abaixo)  ○ Utensílios (​Utensílios variados​) ​(renomeado por causa dos produtos  que contém, card vem acompanhado de descrição)  ○ Gadgets  ● Formas  ● Travessas para forno  ● Bowls e Saladeiras ​(explicar)  ● Potes  ● Eletroportáteis  ○ Fornos  ○ Grills  ○ Sanduicheiras e panini  ○ Liquidificadores  ○ Batedeiras  ○ Torradeiras  ○ Processadores  ○ Mixers  ○ Espremedores de cítricos 
  47. 47. ○ Máquinas de café  ○ Adegas  ○ Pipoqueiras    ● Eletrodomésticos  ● Cooktops  ○ Cooktops  ○ Dominós ​(explicar)  ● Coifas  ● Fornos  ○ De embutir ​(Fornos de embutir)  ○ Fornos​ ​(já incluído)  ○ Micro­ondas ​(Forno de micro­ondas)  ● Refrigeradores  ● Fogões  ● Lava Louças  ● Eletroportáteis    ● Jantar  ○ Aparelhos de jantar  ○ Porcelanas avulsas  ■ Pratos rasos  ■ Sousplats ​(explicar)  ■ Bowls e saladeiras ​(já incluído)  ■ Ramekins ​(explicar)  ■ Petisqueiras  ○ Talheres  ■ Talheres de mesa  ■ Talheres de serviço  ○ Copos  ■ Conjuntos de copos  ■ Copos avulsos  ○ Taças  ■ Vidro (​Taças de vidro​)  ■ Cristal (​Taças de cristal​)  ○ Jarras e garrafas  ○ Fondues​ ​(já incluído)  ○ Infantil ​(explicar)    ● Acessórios para vinho  ○ Saca rolhas  ○ Taças  ■ Policarbonato (​Taças de policarbonato​)  ■ Vidro ​(explicar)  ■ Cristal ​(explicar) 
  48. 48. ○ Decanters ​(explicar)  ○ Acessórios (​Acessórios para vinho​) ​(explicar)  ○ Adegas ​(explicar)  ○ Coolers (​Coolers para vinho​)    ● Bar  ○ Acessórios para bar ​(explicar)  ○ Baldes de gelo  ○ Adegas ​(explicar)  ○ Copos  ■ Conjuntos de copos ​(explicar)  ■ Copos avulsos ​(explicar)    ● Café  ○ Garrafas térmicas  ■ 650 ml ​(volume da garrafa = nível de detalhe incoerente com os  demais produtos)  ■ 1 litro  ■ 1,5 litros  ■ 350 ml  ■ 1,9 litros  ○ Máquinas para café ​(já incluído)  ○ Xícaras  ○ Canecas  ○ Cafeteiras e chaleiras  ○ Acessórios para café e chá  ○ Moedores para café    ● Churrasqueiras  ○ Churrasqueiras a carvão  ○ Churrasqueiras a gás  ○ Acessórios para churrasco  ○ Copos e jarras​ (já incluídos "Conjunto de Copos", "Copos Avulsos" e "Jarras  e Garrafas")  ○ Melamina ​(explicar)  ○ Coolers (​Coolers para churrasco​)  ○ Bolsas    ● Decoração  ○ Lixeiras  ○ Mesas  ■ Guardanapos (​Porta­guardanapos​)  ■ Fruteiras  ■ Galheteiros 
  49. 49. ■ Bandejas  ■ Jogos americanos  ■ Diversos​ (muito vago)  ○ Aquecedores  ○ Ar condicionado  ○ Climatizadores    ● Área de serviço  ● Utensílios para área de serviço ​(explicar)  ● Tábuas de passar  ● Varais  ● Diversos  ○ Cestos  ○ Sacos para lixo  ○ Carrinhos para compras  ● Baldes    9.2. Lista de cards  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 
  50. 50. 16. Gadgets  17. Formas  18. Travessas para forno  19. Bowls e saladeiras  20. Potes  21. Fornos  22. Grills  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 
  51. 51. 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 
  52. 52. 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    9.3. Link para o wireframe dinâmico    http://flxpzg.axshare.com 

×