SlideShare a Scribd company logo
1 of 37
Download to read offline
WEBDESIGN
- UNIDADE II -
ESTRUTURAÇÃO PARA A CRIAÇÃO DE
SITE
Arquitetura da Informação (AI)
Conceito - Arquitetura da informação
2


       “A ciência e a arte de organizar e rotular websites,
        intranets, comunidades online e software para dar
        suporte à usabilidade e facilitar a busca das
        informações.”
        (Information Architecture Institute)
Exemplo - Arquitetura da informação
3
Exemplo - Arquitetura da informação
4
Por que usar?
5


       Uma má arquitetura da informação pode trazer
        grandes prejuízos para as empresas.
       27% das causas de insucesso das vendas em um
        site de comércio eletrônico são porque o usuário
        não encontrou as informações.
6




    Exemplos de MAU USO da
    Arquitetura da Informação (AI)
Exemplos de MAU USO da AI
7

    www.universodobebe.com.br
Exemplos de MAU USO da AI
8

    www. mcdonalds.com.br
Exemplos de MAU USO da AI
9

    www.bobs.com.br
10




     Exemplos de USO CORRETO da
     Arquitetura da Informação (AI)
Exemplos de USO CORRETO de AI
11

     www. habibs.com.br
Exemplos de USO CORRETO de AI
12

     www.voegol.com.br
Exemplos de USO CORRETO de AI
13


     www.submarino.com.br
Ciclo de vida para estruturação de site
14




                ARQUITETURA
      COLETA                  DESIGN DO SITE   DESENVOLVI-
                     DA
     DE DADOS                                    MENTO
                INFORMAÇÃO
Papel do Arquiteto da Informação
15


        Facilitar o acesso à
         informação
        Evidenciar as informações
         mais importantes
        Retirar informações
         desnecessárias
        Equilibrar as características e
         necessidades dos usuários,
         contexto e conteúdo.
www
16




     Obrigatoriamente
           TODO SITE
          deve ser feito
     a sua Arquitetura da Informação
Tripé da Arquitetura da Informação
17




                     CONTEXTO




              CONTEÚDO          USUÁRIOS
Tripé da Arquitetura da Informação
18




                        CONTEXTO




           Objetivos da organização, políticas,
            cultura, tecnologia e recursos humanos
Tripé da Arquitetura da Informação
19




                        CONTEÚDO




           Documentos, formatos/tipos, objetos,
            estrutura existente
Tripé da Arquitetura da Informação
20




                        USUÁRIOS




           Audiência, tarefas, necessidades,
            comportamento de busca de
            informação, experiência, vocabulário
Componentes da
21
     Arquitetura da Informação
        Sistemas de organização
        Sistemas de rotulagem
        Sistemas de navegação
        Sistemas de busca
Sistemas de Organização
22


        Exatas             Ambíguas

         - Alfabética        - Tópico
         - Cronológica       - Tarefa
         - Geográfica        - Audiência
                             - Metáfora
                             - Híbrida
Sistemas de Organização
23
Sistemas de Organização
24
Sistemas de Rotulagem
25


        São os nomes das diferentes categorias do site
        Aparece no sistema de navegação
        É um dos mais importantes aspectos e um dos
         mais difíceis de ser realizado
        Necessita-se refletir sobre o conteúdo para
         redigir na linguagem do usuário
        Pode ser em forma textual ou como imagem
         (ícone representativo)
Sistemas de Rotulagem
26
Sistemas de Rotulagem
27
Sistemas de Navegação
28


     Trata-se de especificar os modelos de navegação
     que serão vistos pelo usuário de forma que possam
     se mover pelo espaço informacional e hipertextual.
Sistemas de Navegação
29


     O sistema de navegação se apresenta em dois
     níveis de localização ou possui duas funções
     básicas para o usuário (Reis, 2007; Nielsen, 2000):
      1) indicar sua localização: mostra a posição do

        usuário em relação ao website como um todo e
        identifica em que website o usuário está; e
      2) mostrar o caminho correto para seguir e

        chegar ao seu destino: posiciona o usuário em
        relação à estrutura interna do website.
Sistemas de Navegação
30


     Tipos de Sistemas de Navegação
      Global

      Local

      Contextual

      Auxiliar
Sistemas de Navegação
31
Sistemas de Navegação
32

                             NAVEGAÇÃO LOCAL
Sistemas de Navegação   NAVEGAÇÃO
                             CONTEXTUAL
33
Sistemas de Navegação   NAVEGAÇÃO
                             AUXILIAR
34
Sistemas de Busca
35


        Interface de Busca
        Áreas de Busca
        Linguagem de Busca
        Resultado
REFERÊNCIAS
36




        BIBLIOTECA VIRTUAL
         http://www.guilhermo.com/ai_biblioteca/assunto.asp?assunto=1
OBRIGADO!
37


        PROF. SERGIO XAVIER

         E-mail:
         sergiosx@gmail.com

         Blog:
         www.profsergioxavier.wordpress.com

More Related Content

What's hot

What's hot (12)

Aula04 midia digital
Aula04 midia digitalAula04 midia digital
Aula04 midia digital
 
Aula07 midia digital
Aula07 midia digitalAula07 midia digital
Aula07 midia digital
 
Aula03 midia digital
Aula03 midia digitalAula03 midia digital
Aula03 midia digital
 
Alberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do TrabalhoAlberto e Rui - Apresentação do Trabalho
Alberto e Rui - Apresentação do Trabalho
 
Web 2 0 Nas Organizacoes
Web 2 0 Nas OrganizacoesWeb 2 0 Nas Organizacoes
Web 2 0 Nas Organizacoes
 
Projeto para WEB
Projeto para WEBProjeto para WEB
Projeto para WEB
 
Páginas digitais
Páginas digitaisPáginas digitais
Páginas digitais
 
Thiago ribeiro arquitetura_informacao_usabilidade
Thiago ribeiro arquitetura_informacao_usabilidadeThiago ribeiro arquitetura_informacao_usabilidade
Thiago ribeiro arquitetura_informacao_usabilidade
 
Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)
 
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
 
Apresentacao tese de doutorado - Prof. Gustavo Daudt Fischer - dezembro de 2008
Apresentacao tese de doutorado - Prof. Gustavo Daudt Fischer - dezembro de 2008Apresentacao tese de doutorado - Prof. Gustavo Daudt Fischer - dezembro de 2008
Apresentacao tese de doutorado - Prof. Gustavo Daudt Fischer - dezembro de 2008
 
CampusMap
CampusMapCampusMap
CampusMap
 

Viewers also liked (12)

Aula10 editoracao eletronica
Aula10 editoracao eletronicaAula10 editoracao eletronica
Aula10 editoracao eletronica
 
Manual de Identidade Visual - Agência Unique
Manual de Identidade Visual - Agência UniqueManual de Identidade Visual - Agência Unique
Manual de Identidade Visual - Agência Unique
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
Aula04 prod grafica
 
Aula01 prod grafica
Aula01 prod graficaAula01 prod grafica
Aula01 prod grafica
 
Manual de identidade visual choco one utilizado como trabalho de faculdade
Manual de identidade visual choco one utilizado como trabalho de faculdadeManual de identidade visual choco one utilizado como trabalho de faculdade
Manual de identidade visual choco one utilizado como trabalho de faculdade
 
PRODUÇÃO GRÁFICA - AULA 14 - Acompanhamento e Orçamento
PRODUÇÃO GRÁFICA - AULA 14 - Acompanhamento e OrçamentoPRODUÇÃO GRÁFICA - AULA 14 - Acompanhamento e Orçamento
PRODUÇÃO GRÁFICA - AULA 14 - Acompanhamento e Orçamento
 
Aula03 prod grafica
Aula03 prod graficaAula03 prod grafica
Aula03 prod grafica
 
Aula05 prod grafica
Aula05 prod graficaAula05 prod grafica
Aula05 prod grafica
 
Aula13 editoracao eletronica
Aula13 editoracao eletronicaAula13 editoracao eletronica
Aula13 editoracao eletronica
 
Manual de identidade visual Atelier Comunicação
Manual de identidade visual Atelier ComunicaçãoManual de identidade visual Atelier Comunicação
Manual de identidade visual Atelier Comunicação
 
Aula01 editoracao eletronica
Aula01 editoracao eletronicaAula01 editoracao eletronica
Aula01 editoracao eletronica
 
Coruja Design - Manual de Identidade Visual
Coruja Design - Manual de Identidade VisualCoruja Design - Manual de Identidade Visual
Coruja Design - Manual de Identidade Visual
 

Similar to Aula05 webdesign

Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Rafael Marinho
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacaoeramos7senac
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Luiz Agner
 
Arquitetura da Informação e Usabilidade
Arquitetura da Informação e UsabilidadeArquitetura da Informação e Usabilidade
Arquitetura da Informação e Usabilidadesaspi2
 
Arquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFAL
Arquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFALArquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFAL
Arquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFALRonaldo Araújo
 
A herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX WriterA herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX WriterMergo
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de InformaçãoRafael Marinho
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacaocarlosremontti
 
Arquitetura Da Informação
Arquitetura Da InformaçãoArquitetura Da Informação
Arquitetura Da InformaçãoLorena Vieira
 
Arquitetura da Informação de Websites de Bibliotecas Universitárias
Arquitetura da Informação de Websites de Bibliotecas UniversitáriasArquitetura da Informação de Websites de Bibliotecas Universitárias
Arquitetura da Informação de Websites de Bibliotecas UniversitáriasZayr Silva
 
Arquitetura Da Informao Mkt
Arquitetura Da Informao MktArquitetura Da Informao Mkt
Arquitetura Da Informao MktLorena Vieira
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacaoduradez
 
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 Objetivosaiadufmg
 
Apresentação - Arquitetura de Informação
Apresentação - Arquitetura de InformaçãoApresentação - Arquitetura de Informação
Apresentação - Arquitetura de InformaçãoLuiz Agner
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãoDavi Denardi
 
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çãopospipoca
 
O arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecarioO arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecarioRick Santos
 
Arquitetura da Informação em Projetos Web
Arquitetura da Informação em Projetos WebArquitetura da Informação em Projetos Web
Arquitetura da Informação em Projetos WebOtaviano Silvério
 

Similar to Aula05 webdesign (20)

Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
 
Apresentacao arquitetura
Apresentacao arquiteturaApresentacao arquitetura
Apresentacao arquitetura
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
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 de websites: o caso do Sistema de Bibliotecas da UFAL
Arquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFALArquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFAL
Arquitetura da Informação de websites: o caso do Sistema de Bibliotecas da UFAL
 
A herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX WriterA herança da arquitetura da informação para a UX Writer
A herança da arquitetura da informação para a UX Writer
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacao
 
Arquitetura Da Informação
Arquitetura Da InformaçãoArquitetura Da Informação
Arquitetura Da Informação
 
Arquitetura da Informação de Websites de Bibliotecas Universitárias
Arquitetura da Informação de Websites de Bibliotecas UniversitáriasArquitetura da Informação de Websites de Bibliotecas Universitárias
Arquitetura da Informação de Websites de Bibliotecas Universitárias
 
Arquitetura Da Informao Mkt
Arquitetura Da Informao MktArquitetura Da Informao Mkt
Arquitetura Da Informao Mkt
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
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
 
Apresentação - Arquitetura de Informação
Apresentação - Arquitetura de InformaçãoApresentação - Arquitetura de Informação
Apresentação - Arquitetura de Informação
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
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
 
O arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecarioO arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecario
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
Arquitetura da Informação em Projetos Web
Arquitetura da Informação em Projetos WebArquitetura da Informação em Projetos Web
Arquitetura da Informação em Projetos Web
 

More from IBMR Laureate International Universities (13)

Palestra como_criar_uma_logo_no_illustrator
 Palestra como_criar_uma_logo_no_illustrator Palestra como_criar_uma_logo_no_illustrator
Palestra como_criar_uma_logo_no_illustrator
 
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasA visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
 
Aula03 editoracao eletronica
Aula03 editoracao eletronicaAula03 editoracao eletronica
Aula03 editoracao eletronica
 
Aula02 editoracao eletronica
Aula02 editoracao eletronicaAula02 editoracao eletronica
Aula02 editoracao eletronica
 
Aula08
Aula08Aula08
Aula08
 
Aula02 prod grafica
Aula02 prod graficaAula02 prod grafica
Aula02 prod grafica
 
Aula07
Aula07Aula07
Aula07
 
Aula06
Aula06Aula06
Aula06
 
Aula04
Aula04Aula04
Aula04
 
Aula05
Aula05Aula05
Aula05
 
Aula03 webdesign
Aula03 webdesignAula03 webdesign
Aula03 webdesign
 
Aula02 webdesign
Aula02 webdesignAula02 webdesign
Aula02 webdesign
 
Aula01 webdesign
Aula01 webdesignAula01 webdesign
Aula01 webdesign
 

Aula05 webdesign

  • 1. WEBDESIGN - UNIDADE II - ESTRUTURAÇÃO PARA A CRIAÇÃO DE SITE Arquitetura da Informação (AI)
  • 2. Conceito - Arquitetura da informação 2  “A ciência e a arte de organizar e rotular websites, intranets, comunidades online e software para dar suporte à usabilidade e facilitar a busca das informações.” (Information Architecture Institute)
  • 3. Exemplo - Arquitetura da informação 3
  • 4. Exemplo - Arquitetura da informação 4
  • 5. Por que usar? 5  Uma má arquitetura da informação pode trazer grandes prejuízos para as empresas.  27% das causas de insucesso das vendas em um site de comércio eletrônico são porque o usuário não encontrou as informações.
  • 6. 6 Exemplos de MAU USO da Arquitetura da Informação (AI)
  • 7. Exemplos de MAU USO da AI 7 www.universodobebe.com.br
  • 8. Exemplos de MAU USO da AI 8 www. mcdonalds.com.br
  • 9. Exemplos de MAU USO da AI 9 www.bobs.com.br
  • 10. 10 Exemplos de USO CORRETO da Arquitetura da Informação (AI)
  • 11. Exemplos de USO CORRETO de AI 11 www. habibs.com.br
  • 12. Exemplos de USO CORRETO de AI 12 www.voegol.com.br
  • 13. Exemplos de USO CORRETO de AI 13 www.submarino.com.br
  • 14. Ciclo de vida para estruturação de site 14 ARQUITETURA COLETA DESIGN DO SITE DESENVOLVI- DA DE DADOS MENTO INFORMAÇÃO
  • 15. Papel do Arquiteto da Informação 15  Facilitar o acesso à informação  Evidenciar as informações mais importantes  Retirar informações desnecessárias  Equilibrar as características e necessidades dos usuários, contexto e conteúdo.
  • 16. www 16 Obrigatoriamente TODO SITE deve ser feito a sua Arquitetura da Informação
  • 17. Tripé da Arquitetura da Informação 17 CONTEXTO CONTEÚDO USUÁRIOS
  • 18. Tripé da Arquitetura da Informação 18 CONTEXTO  Objetivos da organização, políticas, cultura, tecnologia e recursos humanos
  • 19. Tripé da Arquitetura da Informação 19 CONTEÚDO  Documentos, formatos/tipos, objetos, estrutura existente
  • 20. Tripé da Arquitetura da Informação 20 USUÁRIOS  Audiência, tarefas, necessidades, comportamento de busca de informação, experiência, vocabulário
  • 21. Componentes da 21 Arquitetura da Informação  Sistemas de organização  Sistemas de rotulagem  Sistemas de navegação  Sistemas de busca
  • 22. Sistemas de Organização 22  Exatas  Ambíguas - Alfabética - Tópico - Cronológica - Tarefa - Geográfica - Audiência - Metáfora - Híbrida
  • 25. Sistemas de Rotulagem 25  São os nomes das diferentes categorias do site  Aparece no sistema de navegação  É um dos mais importantes aspectos e um dos mais difíceis de ser realizado  Necessita-se refletir sobre o conteúdo para redigir na linguagem do usuário  Pode ser em forma textual ou como imagem (ícone representativo)
  • 28. Sistemas de Navegação 28 Trata-se de especificar os modelos de navegação que serão vistos pelo usuário de forma que possam se mover pelo espaço informacional e hipertextual.
  • 29. Sistemas de Navegação 29 O sistema de navegação se apresenta em dois níveis de localização ou possui duas funções básicas para o usuário (Reis, 2007; Nielsen, 2000):  1) indicar sua localização: mostra a posição do usuário em relação ao website como um todo e identifica em que website o usuário está; e  2) mostrar o caminho correto para seguir e chegar ao seu destino: posiciona o usuário em relação à estrutura interna do website.
  • 30. Sistemas de Navegação 30 Tipos de Sistemas de Navegação  Global  Local  Contextual  Auxiliar
  • 32. Sistemas de Navegação 32 NAVEGAÇÃO LOCAL
  • 33. Sistemas de Navegação NAVEGAÇÃO CONTEXTUAL 33
  • 34. Sistemas de Navegação NAVEGAÇÃO AUXILIAR 34
  • 35. Sistemas de Busca 35  Interface de Busca  Áreas de Busca  Linguagem de Busca  Resultado
  • 36. REFERÊNCIAS 36  BIBLIOTECA VIRTUAL http://www.guilhermo.com/ai_biblioteca/assunto.asp?assunto=1
  • 37. OBRIGADO! 37  PROF. SERGIO XAVIER E-mail: sergiosx@gmail.com Blog: www.profsergioxavier.wordpress.com