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