Pós-Graduação em Ergodesign de Interfaces - PUC/RJProfessores: Luiz Agner e Cínthia RuizDisciplina: Arquitetura de InformaçãoOutubro/2015

Alunos: Eveline, Gabriel, Nina e Veronica

OBJETIVOS

➔ Reestruturar a arquitetura de informação do site, levando em consideração:

➔ a taxonomia de navegação global das categorias principais, a fim de torná-la mais consistente e lógica para o usuário.

➔ a disposição dos elementos da interface, redesenhando algumas telas e suas interações.

Baseando-se no conceito de produtos divertidos, o trabalho atual propõe a reestruturação e redesign da arquitetura de informação na loja virtual Imaginarium, através das metodologias de card sorting e benchmarking.

TEMA

Site atual: http://loja.imaginarium.com.br/

Perfil Demográfico:

➔ Todos os gêneros;

➔ Jovens e adultos;

➔ Classes A, B e C.

PÚBLICO-ALVO

Perfil Psicográfico:

➔ Pessoas com acesso à internet;

➔ Pessoas com conhecimento médio ou avançado de internet;

➔ Pessoas que se sentem confortáveis em comprar pela web;

➔ Pessoas antenadas e que buscam novidades;

➔ Pessoas que procuram presentear a si mesmo ou o outro

com emoção e originalidade.

Ramo de atuação: Lojas (físicas e virtuais) de presentes criativos e itens para decoração.

Tempo no mercado: Atua ao todo há 24 anos no mercado de presentes criativos. E desde 2005,

10 anos, com a loja virtual.

Serviços / Produtos oferecidos: Presentes criativos e irreverentes, de itens de uso pessoal a

objetos para decoração e eletrônicos.

Concorrentes diretos: Uatt, Wish House, Penselar Fun, Loo Day, Hmmm, Trekos e Cacarekos.

Vantagens sobre os concorrentes: É a marca mais conhecida e uma das mais bem-sucedidas

do país no ramo de fun design.

Desvantagens sobre os concorrentes: Possui a média de preço mais alta comparando-se aos

concorrentes.

BRIEFING - SOBRE A EMPRESA

Principais problemas no site atual: arquitetura de informação confusa,

principalmente a taxonomia

Proposta: nova arquitetura de informação do site

Público alvo: homens e mulheres, jovens e adultos, das classes A, B e C

Regiões geográficas a serem cobertas: todo o território nacional

Imagem a ser transmitida: moderno, descolado, divertido

Quantas e quais páginas internas: 5 telas: home, categoria, busca,

produto e carrinho

Referências (concorrentes, similares, etc): Uatt, Wish House, Penselar

Fun, Loo Day, Hmmm, Trekos e Cacarekos.

BRIEFING - SOBRE O PROJETO

site atual

Site atual:

http://loja.imaginarium.com.br/

header + menu expandido

vitrine + navegação de contexto

rodapé

categorias/busca

produto

carrinho de compras

principais problemas encontrados

➔ Arquitetura de informação confusa;

➔ Taxonomia inconsistente e ambígua;

➔ Poucos filtros nas páginas de categorias, dificultando a busca por produtos

➔ Interfaces com excesso de elementos, podendo confundir e até mesmo desviar a atenção do usuário.

BENCHMARKING

➔ Análise de estruturas de organização e apresentação de websites de lojas de comércio eletrônico que possuem venda de produtos para presentes, móveis, decoração, vestuário a acessórios;

➔ Análise de elementos de página como header e footer, menus, filtros, disposição das vitrines, além de páginas de categorias, páginas de produtos e páginas de carrinho;

➔ Destaque de pontos positivos e/ou negativos observados;

objetivos do benchmarking

➔ Oppa http://www.oppa.com.br/

➔ Enjoei http://www.enjoei.com.br/

➔ Think Geek http://www.thinkgeek.com/

➔ Furbish Studio http://furbishstudio.com/

➔ Urban Outfitters http://www.urbanoutfitters.com/

sites analisados

Header “clean”.

Informações objetivas e úteis.

Menu principal (navegação global) com poucas categorias principais.

Menu dropdown apresenta as subcategorias em ordem alfabética por tipo de produto.

header + menu expandido

Exemplo de apresentação de categorias de menu no formato mais visual, tipo de banner estático. No caso do redesign, a ideia seria destacar campanhas da Imaginarium através desse tipo de elemento, na página inicial.

destaque para categorias/campanhas

Footer clean. Melhor organizado e mais intuitivo.

footer clean

Página de categoria com destaque visual “apresentando” o tipo de item.

página de categoria

Página de subcategoria apresenta hierarquia dos níveis de navegação.

Filtros de atributos também são apresentados de forma clara e objetiva.

página de categoria - filtros

Exemplo de página de produto mais “clean”, disposição dos elementos mais organizados.

Imagens em e informações objetivas. Descrição e informações técnicas de forma direta e clara.

Apenas no final da página temos recomendações de produtos sugeridos e/ou recomendados.

produto

Informações básicas para ação de compra.

Box com total de compras efetuadas ao lado da lista de itens selecionados. Isso facilita a visualização como um todo da página.

Apresenta sugestões e/ou recomendaçãoes de outros produtos apenas no final da página.

carrinho

Tipo: Card sorting aberto

Objetivo: Investigar os modelos mentais dos usuários em relação ao agrupamento e classificação dos produtos.

Processo:➔ Após selecionadas amostras variadas de produtos existentes no site atual, os

rótulos foram anotados em cartões coloridos.

➔ A técnica foi aplicada em um grupo de 3 pessoas e individualmente com 16 participantes, onde todos receberam os cartões embaralhados, sem nenhum agrupamento pré-estabelecido;

➔ Foi solicitado que reunissem os produtos em grupos, nomeando-os e anotando em cartões coloridos;

➔ Foi pedido que todos os produtos fossem categorizados.

METODOLOGIA

Ao final, foram feitas ainda as seguintes perguntas:➔ Qual critério de organização você(s) escolheu(ram)?➔ Qual categoria foi mais fácil de estabelecer? Por quê?➔ Qual foi a mais difícil? Por quê?

Para fins de registro, o card sorting aplicado em grupo foi filmado, e alguns card sorting individuais tiveram os debriefings gravados em áudio, para posterior análise e registro dos dados.

DEBRIEFING

INVENTÁRIO

Foi escolhido o menu principal, já que poucas categorias apresentavam subcategorias.

Foram selecionados os itens mais representativos de cada categoria para a amostra.

1- abridor de latas

2- tulipa de chopp

3- bolsa a tiracolo

4- fone de ouvido

5- pulseira

6- almofada de pescoço

7- abridor de garrafas

8- estojo escolar

9- almofada decorativa

10- vela decorativa

11- avental de cozinha

12- sombra

13- câmera fotográfica

14- brilho labial

15- álbum de fotografia

16- porta anel

17- pantufa

18- porta pijamas

AMOSTRA

19- caneta esferográfica

20- camiseta

21- hidratante para as mãos

22- caixa porta maquiagem

23- coqueleteira

24- garrafa

25- fronha de travesseiro

26- caneca

27- moringa

28- despertador

29- porta bijouteria

30- caixa porta-remédios

31- ímã de geladeira

32- mini geladeira

33- castiçal (suporte para velas)

34- porta retrato

35- bandeja para notebook

36- copo térmico

37- almofada massageadora

38- kit completo de maquiagem

39- colar

40- bandeja

41- cofre

42- mochila

43- luminária

44- cartão comemorativo

45- vitrola

46- brinco

47- amplificador de som

48- calendário de computador

49- sabonete líquido

CARD SORTING EM GRUPO

RESULTADOS• O grupo começou a dividir os cartões de acordo com a função principal dos produtos (objetos para decoração, utensílios para cozinha, roupa, etc.);

• Não se sentiram confortáveis em agrupar a maioria dos itens pela diferença nos tipos de produtos. Exemplo, avental de cozinha é um item de vestuário mas que se usa na cozinha, optando no final pela categoria vestuário.

• Sentiram-se mais confortáveis em agrupar os itens da categoria decoração.

• Na imagem ao lado o grupo ordenou dentro de cada categoria os itens partindo dos mais fáceis de categorizar para os mais difíceis (de cima para baixo).

•No fim revelaram-se satisfeitos com o resultado, atribuindo nota 7.5 ao resultado final.

Categorias Criadas:Saúde, Material Escolar, Cama, Tecnologia, Decoração, Cozinha, Vestuário e Beleza.

RESULTADOS

16 9 7

Participante: Mulher (62 anos)Categorias Criadas: Bijouterias e acessórios, Eletrônicos, Material escolar, Beleza, Artigos para cozinha, Artigos para decoração, Diversos.

Participante: Homem (30 anos)Categorias Criadas: Bebidas, Decoração, Quarto, Cozinha, Escolar, Maquiagem, Feminino, Tecnologia.

Participante: Mulher (21 anos)Categorias Criadas: Fofurinhas, Guarda-objetos, Mesa de jantar, Cozinha, Zona da dúvida, Fotografia, Sonoro, Seção feminina, Acessórios.

CARD SORTINGS INDIVIDUAIS

DEBRIEFING

Participante: Mulher (28 anos)Não sentiu dificuldades em agrupar. Achou lógicas as categorias.Categoria mais difícil: Tecnologia.Categorias mais fáceis: Bolsas e Cozinha.

Participante: Homem (27 anos)Não se sentiu segura em agrupar as categorias. Achou a tarefa difícil.Categorias mais difíceis: Diversos e Eletrônicos.Categorias mais fáceis: Cozinha e Beleza.

Participante: Mulher (62 anos)Não se sentiu segura em agrupar as categorias. Achou a tarefa difícil.Categoria mais difíceis: Diversos e Eletrônicos.Categorias mais fáceis: Cozinha e Beleza.

Nos debriefings foi possível observar que boa parte achou a tarefa difícil, principalmente pela variedade de itens aleatórios, apesar de terem ficados satisfeitos com o resultado final.

Praticamente todos os card sortings apresentaram a categoria “cozinha”, sendo a mais fácil de organizar.

Os itens mais difíceis foram moringa, porta-pijama e caixa porta-remédios

ANÁLISE DOS DADOS

ABA CATS RAW

ANÁLISE DOS DADOS ABA SUMMARY

ANÁLISE DOS DADOS

ABA CORRELATION

TAXONOMIA

LANÇAMENTOSDICAS DE

PRESENTESCASA E

DECORAÇÃO PESSOAL ELETRÔNICOS BOLSAS MOCHILAS PROMOÇÕES

CASA E DECORAÇÃO

ÁUDIO E ELETRÔNICOSBELEZA

MODA E ACESSÓRIOS

PAPELARIA E ESCRITÓRIO

TAXONOMIA ANTIGA

TAXONOMIA ADOTADA

WIREFRAMES

SKETCHES

Após a análise dos dados e desenvolvimento da taxonomia, o processo envolveu a elaboração de sketches, a fim de unir o estudo do bechmarking às novas propostas de arquitetura e funcionalidades. Posteriormente, estes foram traduzidos em wireframes.

WIREFRAMES

Home (página inicial)

WIREFRAMES

Página da Categoria

WIREFRAMES

Página do Produto

Dropdown de busca e página de resultados

WIREFRAMES

WIREFRAMES

Página de carrinho

DESCRIÇÃO FUNCIONAL

1. Login: Login de cadastro e identificação de usuário. Quando logado, apresenta uma mensagem de saudação.

2. Busca: Ferramenta de busca do site, os resultados aparecem em um página específica.

3. Sacola: Aqui o usuário consegue visualizar a quantidade de produtos comprados depois de logado. A sacola fica feliz. Não logado a sacola aparece zerada e “triste”.

4. Menu: Menu com 5 botões que representam as categorias principais de produtos. Ao clicar em uma delas o usuário é levado para uma página da categoria.

DESCRIÇÃO FUNCIONAL

5. Destaque “slide show”: Área para destaque de produtos novos e /ou campanhas da marca. Aqui por default será exibido 1 slide a cada 4 segundos, automaticamente, sendo um total de 4 slides. O usuário tem opção de escolher setando para direita ou esquerda. A partir do momento que o usuário clica em uma das setas ele passa a ter controle dos destaques.

6. Vitrines de categorias: Para cada seção de vitrine, serão exibidos 4 produtos para exibição. Área destinada para o marketing e comercial da marca. Nessa área, o usuário ao clicar no produto escolhido será redirecionado para a página do produto.

7. Área “rodapé”: mapa do site, links para redes sociais, área para cadastro na lista de emails, formas de pagamento, selos de confiança/ segurança, e endereço.

DESCRIÇÃO FUNCIONAL

CONCLUSÃO

CONCLUSÃO

➔ Com o inventário e análise de parte do conteúdo do site identificou-se a grande variedade de

produtos vendidos.

➔ O briefing nos ajudou a conhecer melhor a proposta da loja, a fim de que pudessemos realizar o

benchmarking e descobrir como concorrentes e similares solucionaram os problemas encontrados.

➔ O Card Sorting nos ajudou a amenizar a questão da taxonomia de menu adotada. Percebemos a

variabilidade do modelo mental dos usuários voluntários, na organização e classificação de uma

amostragem dos produtos vendidos no site;

➔ Já com o brainstorm surgiram os primeiros esboços da nova estrutura do site (sketches). e com os

wireframes (além da descrição funcional) essa estrutura já pôde ser melhor visualizada e testada.

➔ Assim idealizamos o que seria um site melhor organizado, com uma taxonomia mais “leve” e objetiva

para o usuário.

LIÇÕES APRENDIDAS

➔ Foram notadas algumas dificuldades dos usuários durante o card sorting,

devido ao número pequeno de itens e de sua grande variabilidade;

➔ Uma amostragem maior poderia ter amenizado a confusão e a

dificuldade no momento de rotular as categorias;

➔ Muitos não se sentiram confortáveis em deixar um cartão apenas em

uma categoria, mesmo sendo dito que não haveria problema;

➔ A falta de imagens no card sorting também causou uma confusão como,

por exemplo, a moringa e calendário de computador.

DESDOBRAMENTOS

➔ Um possível desdobramento seria a realização de um novo card

sorting considerando mais itens no inventário de conteúdo,

ampliando assim a reestruturação da taxonomia como um todo e

não apenas da navegação global das categorias.

➔ Outra possibilidade levantada seria a realização de um teste de

usabilidade com a nova proposta da arquitetura de informação.

Obrigado ;)