SlideShare uma empresa Scribd logo
Melqui Jr. - Setembro de 2007 Arquitetura de Informação do planejamento à publicação dos websites
Brevíssimo histórico da Arquitetura de Informação
Brevíssimo histórico da Arquitetura de Informação (AI) 1976 - Criou o termo Arquitetura da Informação Saul Wurman 1993 - Aplicaram essa arquitetura em sistemas Peter Morville Lou Rosenfeld
Brevíssimo histórico da Arquitetura de Informação (AI) Wurman Morville Rosenfeld A conceituação da arquitetura de informação de Wurman era mais focada na mídia impressa, principalmente na produção de guias, mapas e Atlas. Com o tempo foi aplicada nos mais variados campos, de radiografia a layout de museus. Pioneiros mais reconhecidos na aplicação da AI voltada para web. Morville e Rosenfeld fundaram a empresa Argus Associates e lançaram em 1998 o livro considerado a Bíblia dos Arquitetos de Informação.
Envolvimento da Arquitetura de Informação em projetos de websites
Envolvimento da AI em projetos de websites O fluxo a seguir apenas marca pontualmente as fases de um projeto. A maior parte dessas fases acontecem simultaneamente.
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na prospecção: Análise heurística (Heurísticas de Nielsen) Pesquisa o cliente
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no briefing: Estressa o briefing  Pesquisa o público alvo além do briefing
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no planejamento: Pesquisa o mercado de atuação (concorrência) Macroplanejamento do projeto Fluxograma do site
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto Fase de AI: Teste de usabilidade Macroarquitetura Microarquitetura
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no conteúdo: Redação de arquitetura Estrutura da informação SEO (Search Engine Optimization)
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na criação (layout): Valida hierarquia informativa Possibilita visão total do projeto Permite ao designer foco total no trabalho
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na produção: Possibilita o adiantamento da produção Auxilia o processo de montagem
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na tecnologia: Valida em usabilidade os sistemas Auxilia o processo de programação
Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na publicação: Valida pré-publicação (homologação)  Monitora pós-publicação
Macro e microarquitetura
Macro e microarquitetura Macroarquitetura Etapa da AI na qual se definem as principais telas e fluxos de navegação do site. Principais telas São as telas que servem de modelo para demonstrar a solução de arquitetura de informação utilizada. Microarquitetura Etapa da AI na qual se definem  todas  as telas e fluxos de navegação do site. Imagem do livro Fractal Creations, The Waite Group, Inc
Exemplo de macroarquitetura
Exemplo de Macroarquitetura Agência:  Mídia Digital Cliente:  Tecnisa Necessidade:  ajustes na página de produto Solução:  reformulação total da página Após o estudo do caso a solução foi simples. Sempre com  foco no usuário final  os  conteúdos  foram  reagrupados e reorganizados  na intenção de se  explorar ao máximo  todos os recursos na  apresentação do produto . Uma vez que este cliente possuía  imagens de alto padrão  aproveitamos a oportunidade para utilizar o conceito de  tangibilidade do virtual . Desta forma os  recursos visuais  como fotos e ilustrações foram  explorados ao máximo  ganhando  maior peso na hierarquia  do conteúdo. Para que isso ocorresse com sucesso também foi importante  reestruturar  outros elementos que compunham a página de produto como  menus, formulários, promoções e canais de contato .
Exemplo de Macroarquitetura
Exemplo de Macroarquitetura
Exemplo de Macroarquitetura
Exemplo de Macroarquitetura Grande área para imagens
Exemplo de Macroarquitetura Reestruturação do menu
Exemplo de Macroarquitetura Maior destaque para acesso aos formulários de interesse.
Exemplo de Macroarquitetura Reorganização dos canais de atendimentos
Exemplo de Macroarquitetura
Exemplo de microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Exemplo de Microarquitetura
Resultados do redesenho
Resultados do redesenho Aumento de  96%  da visitação no site em 2007. Aumento de  81%   em vendas. Aumento em  29%   da taxa de conversão visita/chat.  Aumento em  50%   da taxa conversão visita/cadastro.
Wireframe e layout
Wireframe e layout
Critérios indispensáveis para projetos na web
Critérios indispensáveis para projetos na web Heurísticas de Nielsen Diálogos simples e naturais  Falar a linguagem do usuário  Minimizar a sobrecarga de memória do usuário  Consistência  Feedback  Saídas claramente marcadas  Atalhos  Boas mensagens de erro Prevenir erros Ajuda e documentação Jacob Nielsen
Agência:  Mídia Digital Cliente:  Estadão Necessidade:  elevar índice de vendas pelo formulário on-line Solução:  rearquitetura e novo layout Analisando as métricas do formulário on-line de assinatura verificamos um  alto índice de desistência no preenchimento  do mesmo conseqüentemente uma  baixa conversão em vendas . Com base em  análises heurísticas  e de  boas práticas de usabilidade  percebeu-se que com um formulário mais atrativo poderíamos aumentar a conversão de assinaturas. Critérios indispensáveis para projetos de websites
Critérios indispensáveis para projetos na web Tela de acesso ao formulário
Critérios indispensáveis para projetos na web Através do CEP inserido é possível fornecer ao usuário alguns campos preenchidos.
Critérios indispensáveis para projetos na web O que o usuário faz caso queira uma das outras opções de assinatura?
Critérios indispensáveis para projetos na web Algumas informações podem aparecer apenas na tela de confirmação do pedido.
Critérios indispensáveis para projetos na web Na primeira tela o usuário já optou por um tipo de pagamento. Herdar a informação é importante.
Critérios indispensáveis para projetos na web
Critérios indispensáveis para projetos na web
Critérios indispensáveis para projetos na web Onde está a opção para que o usuário mude o tipo de assinatura?
Rearquitetura e novo layout
Rearquitetura e novo layout
Rearquitetura e novo layout
Rearquitetura e novo layout
Resultado do redesenho
Resultado do redesenho No mês de julho foram publicadas as duas versões de formulário. Ambas foram exibidas da mesma forma - 50% de acesso para cada uma. Ao final do mês, tivemos o seguinte resultado: O novo formulário vendeu  137%  a mais do que o antigo.
Obrigado! [email_address]

Mais conteúdo relacionado

Mais procurados

Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacao
carlosremontti
 
Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05
vincevader
 
Arquitetura de Informacao: Conceitos Básicos
Arquitetura de Informacao: Conceitos BásicosArquitetura de Informacao: Conceitos Básicos
Arquitetura de Informacao: Conceitos Básicos
Mateada
 
Explicando arquitetura de informação...
Explicando arquitetura de informação...Explicando arquitetura de informação...
Explicando arquitetura de informação...
Elisa Volpato
 
Arquitetura da Informação e Usabilidade
Arquitetura da Informação e UsabilidadeArquitetura da Informação e Usabilidade
Arquitetura da Informação e Usabilidade
saspi2
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
Karine Drumond
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
Princi Agência Web
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
Marconi Pacheco
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
Ana Luisa Vieira
 
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
Laura Inafuko
 
Arquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de InformaçãoArquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de Informação
posgraduacaorj
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
Danilo Rosisca Pereira
 
Aula sobre Arquitetura de Informação
Aula sobre Arquitetura de InformaçãoAula sobre Arquitetura de Informação
Aula sobre Arquitetura de Informação
Dhiego Bicudo
 
Navegação
NavegaçãoNavegação
Navegação
Robson Santos
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
eramos7senac
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagem
Robson Santos
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
pospipoca
 
Arquitetura Da Informação
Arquitetura Da InformaçãoArquitetura Da Informação
Arquitetura Da Informação
Lorena Vieira
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
Instituto Faber-Ludens
 

Mais procurados (20)

Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacao
 
Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05
 
Arquitetura de Informacao: Conceitos Básicos
Arquitetura de Informacao: Conceitos BásicosArquitetura de Informacao: Conceitos Básicos
Arquitetura de Informacao: Conceitos Básicos
 
Explicando arquitetura de informação...
Explicando arquitetura de informação...Explicando arquitetura de informação...
Explicando arquitetura de informação...
 
Arquitetura da Informação e Usabilidade
Arquitetura da Informação e UsabilidadeArquitetura da Informação e Usabilidade
Arquitetura da Informação e Usabilidade
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
Arquitetura da informação de web sites: elementos e usabilidade em blogs cons...
 
Arquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de InformaçãoArquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de Informação
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
Aula sobre Arquitetura de Informação
Aula sobre Arquitetura de InformaçãoAula sobre Arquitetura de Informação
Aula sobre Arquitetura de Informação
 
Navegação
NavegaçãoNavegação
Navegação
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagem
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Arquitetura Da Informação
Arquitetura Da InformaçãoArquitetura Da Informação
Arquitetura Da Informação
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
 

Destaque

A prática de arquitetura de informação de websites no Brasil
A prática de arquitetura de informação de websites no BrasilA prática de arquitetura de informação de websites no Brasil
A prática de arquitetura de informação de websites no Brasil
UTFPR
 
Arquitetura da Informação: Conceitos e Objetivos
Arquitetura da Informação: Conceitos e ObjetivosArquitetura da Informação: Conceitos e Objetivos
Arquitetura da Informação: Conceitos e Objetivos
aiadufmg
 
التقرير السنوي للوكالة الحضرية للصويرة 2013
التقرير السنوي للوكالة الحضرية للصويرة 2013التقرير السنوي للوكالة الحضرية للصويرة 2013
التقرير السنوي للوكالة الحضرية للصويرة 2013
Younes Asri
 
Briefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestreBriefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestre
Paulo Vinicius
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
David Arty
 
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
Paulo Leitao
 
Museus e Internet - Algumas reflexões
Museus e Internet - Algumas reflexõesMuseus e Internet - Algumas reflexões
Museus e Internet - Algumas reflexões
Marcio Okabe
 
Briefing desenvolvimento de Site
Briefing desenvolvimento de SiteBriefing desenvolvimento de Site
Briefing desenvolvimento de Site
David Arty
 
Criação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENACCriação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENAC
David Arty
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
Kleber Jacinto
 
Comportamentos Mobile e ações em Bibliotecas e Centros de Informação
Comportamentos Mobile e ações em Bibliotecas e Centros de InformaçãoComportamentos Mobile e ações em Bibliotecas e Centros de Informação
Comportamentos Mobile e ações em Bibliotecas e Centros de Informação
Regina Fazioli
 
Briefing para desenvolvimento de web sites
Briefing para desenvolvimento de web sitesBriefing para desenvolvimento de web sites
Briefing para desenvolvimento de web sites
Francielly Christine
 
Briefing Exemplo Janaira França
Briefing Exemplo Janaira FrançaBriefing Exemplo Janaira França
Briefing Exemplo Janaira França
Profa. Janaíra França
 
Trabalho cálculo numérico
Trabalho cálculo numéricoTrabalho cálculo numérico
Trabalho cálculo numérico
andreasjack
 
Representação da informação
Representação da informaçãoRepresentação da informação
Representação da informação
Igor Falce
 
Isc aula 5 - estrutura e organização da informação
Isc   aula 5 - estrutura e organização da informaçãoIsc   aula 5 - estrutura e organização da informação
Isc aula 5 - estrutura e organização da informação
Fábio Andrade
 
Briefing Coca-cola Verde
Briefing Coca-cola VerdeBriefing Coca-cola Verde
Briefing Coca-cola Verde
Diego Moreau
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
Renato Bongiorno Bonfanti
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
Rafael Marques
 

Destaque (19)

A prática de arquitetura de informação de websites no Brasil
A prática de arquitetura de informação de websites no BrasilA prática de arquitetura de informação de websites no Brasil
A prática de arquitetura de informação de websites no Brasil
 
Arquitetura da Informação: Conceitos e Objetivos
Arquitetura da Informação: Conceitos e ObjetivosArquitetura da Informação: Conceitos e Objetivos
Arquitetura da Informação: Conceitos e Objetivos
 
التقرير السنوي للوكالة الحضرية للصويرة 2013
التقرير السنوي للوكالة الحضرية للصويرة 2013التقرير السنوي للوكالة الحضرية للصويرة 2013
التقرير السنوي للوكالة الحضرية للصويرة 2013
 
Briefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestreBriefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestre
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
 
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
Práticas, Comportamentos e Motivações dos Utilizadores na Web 2.0
 
Museus e Internet - Algumas reflexões
Museus e Internet - Algumas reflexõesMuseus e Internet - Algumas reflexões
Museus e Internet - Algumas reflexões
 
Briefing desenvolvimento de Site
Briefing desenvolvimento de SiteBriefing desenvolvimento de Site
Briefing desenvolvimento de Site
 
Criação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENACCriação de Sites - David Arty - SENAC
Criação de Sites - David Arty - SENAC
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Comportamentos Mobile e ações em Bibliotecas e Centros de Informação
Comportamentos Mobile e ações em Bibliotecas e Centros de InformaçãoComportamentos Mobile e ações em Bibliotecas e Centros de Informação
Comportamentos Mobile e ações em Bibliotecas e Centros de Informação
 
Briefing para desenvolvimento de web sites
Briefing para desenvolvimento de web sitesBriefing para desenvolvimento de web sites
Briefing para desenvolvimento de web sites
 
Briefing Exemplo Janaira França
Briefing Exemplo Janaira FrançaBriefing Exemplo Janaira França
Briefing Exemplo Janaira França
 
Trabalho cálculo numérico
Trabalho cálculo numéricoTrabalho cálculo numérico
Trabalho cálculo numérico
 
Representação da informação
Representação da informaçãoRepresentação da informação
Representação da informação
 
Isc aula 5 - estrutura e organização da informação
Isc   aula 5 - estrutura e organização da informaçãoIsc   aula 5 - estrutura e organização da informação
Isc aula 5 - estrutura e organização da informação
 
Briefing Coca-cola Verde
Briefing Coca-cola VerdeBriefing Coca-cola Verde
Briefing Coca-cola Verde
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
 

Semelhante a Arquitetura de Informação

Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
Patricia Mallmann
 
Desenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add TechnologiesDesenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add Technologies
.add
 
Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
.add
 
Intensivo de UX para Agências e Startups
Intensivo de UX para Agências e Startups Intensivo de UX para Agências e Startups
Intensivo de UX para Agências e Startups
Tuia
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
Instituto Faber-Ludens
 
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCariocaPortais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
WebCarioca
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
Fabricio Teixeira
 
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
Uni Buscapé Company
 
Marinas digitais presentation
Marinas digitais presentationMarinas digitais presentation
Marinas digitais presentation
Anderson Fagundes
 
Marinas Digitais presentation
Marinas Digitais presentationMarinas Digitais presentation
Marinas Digitais presentation
Marinas Brasileiras
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Skalena - Overview de Soluções
Skalena - Overview de Soluções Skalena - Overview de Soluções
Skalena - Overview de Soluções
Edgar Silva
 
Estratégias de marketing digital na era da busca
Estratégias de marketing digital na era da buscaEstratégias de marketing digital na era da busca
Estratégias de marketing digital na era da busca
Albert José
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
Ana Migowski
 
SaaS - Software como Serviço
SaaS - Software como ServiçoSaaS - Software como Serviço
SaaS - Software como Serviço
Ricardo Saldanha
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Mbox Gerenciador de Impressos e Tablóides
Mbox Gerenciador de Impressos e TablóidesMbox Gerenciador de Impressos e Tablóides
Mbox Gerenciador de Impressos e Tablóides
W21Mercurion
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Projeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaProjeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção Gráfica
Gabriel Grumiche Silva
 

Semelhante a Arquitetura de Informação (20)

Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Desenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add TechnologiesDesenvolvimento de Sites e Mobile Sites - Add Technologies
Desenvolvimento de Sites e Mobile Sites - Add Technologies
 
Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
 
Intensivo de UX para Agências e Startups
Intensivo de UX para Agências e Startups Intensivo de UX para Agências e Startups
Intensivo de UX para Agências e Startups
 
Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013Curso Arquitetura de Informação @ iMasters Jan 2013
Curso Arquitetura de Informação @ iMasters Jan 2013
 
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCariocaPortais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
Apresentação do Curso Aumento da Conversão - Profite e Universidade Buscapé C...
 
Marinas digitais presentation
Marinas digitais presentationMarinas digitais presentation
Marinas digitais presentation
 
Marinas Digitais presentation
Marinas Digitais presentationMarinas Digitais presentation
Marinas Digitais presentation
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Skalena - Overview de Soluções
Skalena - Overview de Soluções Skalena - Overview de Soluções
Skalena - Overview de Soluções
 
Estratégias de marketing digital na era da busca
Estratégias de marketing digital na era da buscaEstratégias de marketing digital na era da busca
Estratégias de marketing digital na era da busca
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
SaaS - Software como Serviço
SaaS - Software como ServiçoSaaS - Software como Serviço
SaaS - Software como Serviço
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Mbox Gerenciador de Impressos e Tablóides
Mbox Gerenciador de Impressos e TablóidesMbox Gerenciador de Impressos e Tablóides
Mbox Gerenciador de Impressos e Tablóides
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Projeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaProjeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção Gráfica
 

Último

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 

Último (6)

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 

Arquitetura de Informação

  • 1. Melqui Jr. - Setembro de 2007 Arquitetura de Informação do planejamento à publicação dos websites
  • 2. Brevíssimo histórico da Arquitetura de Informação
  • 3. Brevíssimo histórico da Arquitetura de Informação (AI) 1976 - Criou o termo Arquitetura da Informação Saul Wurman 1993 - Aplicaram essa arquitetura em sistemas Peter Morville Lou Rosenfeld
  • 4. Brevíssimo histórico da Arquitetura de Informação (AI) Wurman Morville Rosenfeld A conceituação da arquitetura de informação de Wurman era mais focada na mídia impressa, principalmente na produção de guias, mapas e Atlas. Com o tempo foi aplicada nos mais variados campos, de radiografia a layout de museus. Pioneiros mais reconhecidos na aplicação da AI voltada para web. Morville e Rosenfeld fundaram a empresa Argus Associates e lançaram em 1998 o livro considerado a Bíblia dos Arquitetos de Informação.
  • 5. Envolvimento da Arquitetura de Informação em projetos de websites
  • 6. Envolvimento da AI em projetos de websites O fluxo a seguir apenas marca pontualmente as fases de um projeto. A maior parte dessas fases acontecem simultaneamente.
  • 7. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto
  • 8. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na prospecção: Análise heurística (Heurísticas de Nielsen) Pesquisa o cliente
  • 9. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no briefing: Estressa o briefing Pesquisa o público alvo além do briefing
  • 10. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no planejamento: Pesquisa o mercado de atuação (concorrência) Macroplanejamento do projeto Fluxograma do site
  • 11. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto Fase de AI: Teste de usabilidade Macroarquitetura Microarquitetura
  • 12. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI no conteúdo: Redação de arquitetura Estrutura da informação SEO (Search Engine Optimization)
  • 13. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na criação (layout): Valida hierarquia informativa Possibilita visão total do projeto Permite ao designer foco total no trabalho
  • 14. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na produção: Possibilita o adiantamento da produção Auxilia o processo de montagem
  • 15. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na tecnologia: Valida em usabilidade os sistemas Auxilia o processo de programação
  • 16. Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto AI na publicação: Valida pré-publicação (homologação) Monitora pós-publicação
  • 18. Macro e microarquitetura Macroarquitetura Etapa da AI na qual se definem as principais telas e fluxos de navegação do site. Principais telas São as telas que servem de modelo para demonstrar a solução de arquitetura de informação utilizada. Microarquitetura Etapa da AI na qual se definem todas as telas e fluxos de navegação do site. Imagem do livro Fractal Creations, The Waite Group, Inc
  • 20. Exemplo de Macroarquitetura Agência: Mídia Digital Cliente: Tecnisa Necessidade: ajustes na página de produto Solução: reformulação total da página Após o estudo do caso a solução foi simples. Sempre com foco no usuário final os conteúdos foram reagrupados e reorganizados na intenção de se explorar ao máximo todos os recursos na apresentação do produto . Uma vez que este cliente possuía imagens de alto padrão aproveitamos a oportunidade para utilizar o conceito de tangibilidade do virtual . Desta forma os recursos visuais como fotos e ilustrações foram explorados ao máximo ganhando maior peso na hierarquia do conteúdo. Para que isso ocorresse com sucesso também foi importante reestruturar outros elementos que compunham a página de produto como menus, formulários, promoções e canais de contato .
  • 24. Exemplo de Macroarquitetura Grande área para imagens
  • 25. Exemplo de Macroarquitetura Reestruturação do menu
  • 26. Exemplo de Macroarquitetura Maior destaque para acesso aos formulários de interesse.
  • 27. Exemplo de Macroarquitetura Reorganização dos canais de atendimentos
  • 42. Resultados do redesenho Aumento de 96% da visitação no site em 2007. Aumento de 81% em vendas. Aumento em 29% da taxa de conversão visita/chat. Aumento em 50% da taxa conversão visita/cadastro.
  • 46. Critérios indispensáveis para projetos na web Heurísticas de Nielsen Diálogos simples e naturais Falar a linguagem do usuário Minimizar a sobrecarga de memória do usuário Consistência Feedback Saídas claramente marcadas Atalhos Boas mensagens de erro Prevenir erros Ajuda e documentação Jacob Nielsen
  • 47. Agência: Mídia Digital Cliente: Estadão Necessidade: elevar índice de vendas pelo formulário on-line Solução: rearquitetura e novo layout Analisando as métricas do formulário on-line de assinatura verificamos um alto índice de desistência no preenchimento do mesmo conseqüentemente uma baixa conversão em vendas . Com base em análises heurísticas e de boas práticas de usabilidade percebeu-se que com um formulário mais atrativo poderíamos aumentar a conversão de assinaturas. Critérios indispensáveis para projetos de websites
  • 48. Critérios indispensáveis para projetos na web Tela de acesso ao formulário
  • 49. Critérios indispensáveis para projetos na web Através do CEP inserido é possível fornecer ao usuário alguns campos preenchidos.
  • 50. Critérios indispensáveis para projetos na web O que o usuário faz caso queira uma das outras opções de assinatura?
  • 51. Critérios indispensáveis para projetos na web Algumas informações podem aparecer apenas na tela de confirmação do pedido.
  • 52. Critérios indispensáveis para projetos na web Na primeira tela o usuário já optou por um tipo de pagamento. Herdar a informação é importante.
  • 55. Critérios indispensáveis para projetos na web Onde está a opção para que o usuário mude o tipo de assinatura?
  • 61. Resultado do redesenho No mês de julho foram publicadas as duas versões de formulário. Ambas foram exibidas da mesma forma - 50% de acesso para cada uma. Ao final do mês, tivemos o seguinte resultado: O novo formulário vendeu 137% a mais do que o antigo.