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

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.

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.

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

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

Produto

Carrinho

Lojas

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

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:

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:

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:

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:

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:

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:

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.

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. Condicionadores 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

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".

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:

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

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

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).

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.

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.

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.

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.

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".

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.

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

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).

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.

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

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.

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.

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,

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:

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

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)

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

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

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

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

9.3. Link para o wireframe dinâmico

http://flxpzg.axshare.com