Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arquitetura de Informação: Projeto Imaginarium

486 views

Published on

Pós-Graduação em Ergodesign de Interfaces e Arquitetura de Informação - PUC-Rio
Professores: Luiz Agner e Cínthia Ruiz
Disciplina: Arquitetura de Informação
Alunos: Eveline, Gabriel, Nina e Veronica

Published in: Design
  • Be the first to comment

Arquitetura de Informação: Projeto Imaginarium

  1. 1. Pós-Graduação em Ergodesign de Interfaces - PUC/RJ Professores: Luiz Agner e Cínthia Ruiz Disciplina: Arquitetura de Informação Outubro/2015 Alunos: Eveline, Gabriel, Nina e Veronica
  2. 2. 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.
  3. 3. 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/
  4. 4. 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.
  5. 5. 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
  6. 6. 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
  7. 7. site atual Site atual: http://loja.imaginarium.com.br/
  8. 8. header + menu expandido
  9. 9. vitrine + navegação de contexto
  10. 10. rodapé
  11. 11. categorias/busca
  12. 12. produto
  13. 13. carrinho de compras
  14. 14. 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.
  15. 15. BENCHMARKING
  16. 16. ➔ 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
  17. 17. ➔ 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
  18. 18. 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
  19. 19. 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
  20. 20. Footer clean. Melhor organizado e mais intuitivo. footer clean
  21. 21. Página de categoria com destaque visual “apresentando” o tipo de item. página de categoria
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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.
  28. 28. 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
  29. 29. 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.
  30. 30. 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
  31. 31. 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
  32. 32. ANÁLISE DOS DADOS ABA CATS RAW
  33. 33. ANÁLISE DOS DADOS ABA SUMMARY
  34. 34. ANÁLISE DOS DADOS ABA CORRELATION
  35. 35. TAXONOMIA LANÇAMENTOS DICAS DE PRESENTES CASA 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
  36. 36. WIREFRAMES
  37. 37. 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.
  38. 38. WIREFRAMES Home (página inicial)
  39. 39. WIREFRAMES Página da Categoria
  40. 40. WIREFRAMES Página do Produto
  41. 41. Dropdown de busca e página de resultados WIREFRAMES
  42. 42. WIREFRAMES Página de carrinho
  43. 43. 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.
  44. 44. 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.
  45. 45. 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
  46. 46. CONCLUSÃO
  47. 47. 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.
  48. 48. 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.
  49. 49. 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.
  50. 50. Obrigado ;)

×