Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRI...
Etapas na Produção: Planeamento, Concepção e
Implementação.
!
Fase 2 - Arquitectura de Informação:

• Inventário de conteú...
Depois:
!
✓ Brief

✓ Análise

✓ Pesquisa

✓ Criação Objectivos e Necessidades
ARQUITECTURA DE INFORMAÇÃO
Criar uma linguag...
Arquitectura de Informação
• O resultado da pesquisa, análise, edição e organização de
todos os dados recolhidos até agora...
Arquitectura de Informação: Componentes
Organização:

Determina o agrupamento e as categorias do conteúdo.

!
Navegação:

...
Também conhecida como
análise de conteúdo ou
auditoria de conteúdo.
Arquitectura de Informação: Inventário de Conteúdos
Um...
ID NOME DA PÁGINA TIPO DE PÁGINA LOCALIZAÇÃO RESPONSÁVEL
1 Cursos Destaques /cursos Rui S.
1,1 PM Planos de Estudo /cursos...
Arquitectura de Informação: Inventário de Conteúdos
• Nome do conteúdo: deve ser auto evidente e explicativo.

!
• Localiz...
Arquitectura de Informação: Inventário de Conteúdos
Campos necessários para criar um bom inventário de
conteúdos:
• Fonte:...
Arquitectura de Informação: Estrutura de Informação
A estrutura depende fundamentalmente do tipo de
informação que será di...
HOME CURSOS INVESTIGAÇÃO EXPERIMENTAR PARCEIROS ALUNOS DOCENTESESCOLA
ASSOCIAÇÃO. ANTIGOS ALUNOS
SECRETARIA
GABINETE DE CO...
ASSOCIAÇÃO. ANTIGOS ALUNOS
MEDIA KIT
APRESENTAÇÃO
ÁREAS TECNOLÓGICAS
VISITA VIRTUAL
SECÇÕES
SERVIÇOS
INFORMAÇÃO ACADÉMICA
...
Exemplo de uma Estrutura Base:
PÁGINA PRINCIPAL E MENU
PÁGINAS SECUNDÁRIAS
(SUB-MENU)
PÁGINAS DE CONTEÚDO
Arquitectura de ...
• Agrupar e hierarquizar a informação de acordo com a sua
importância;
!
• Ligações que são estabelecidas entre os diverso...
O caminho que o utilizador percorre para alcançar a informação pretendida nunca deve ser
nem muito superficial, nem muito p...
Pressuposto 1:

O utilizador nunca deve ter que fazer mais de três escolhas
até alcançar o que pretende.
Pressuposto 2:

A...
ETAPAS NA PRODUÇÃO
Arquitectura de Informação: Estrutura de Informação
Páginas Principais

• As mais importantes;

!
• Atr...
ETAPAS NA PRODUÇÃO
Arquitectura de Informação: Estrutura de Informação
Páginas Principais
BOAS PRÁTICAS
✓ A página princip...
ETAPAS NA PRODUÇÃO
Arquitectura de Informação: Estrutura de Informação
Páginas Secundárias

• Mantêm o menu principal visí...
ETAPAS NA PRODUÇÃO
Arquitectura de Informação: Estrutura de Informação
Páginas de Conteúdo

• Páginas sem uma estrutura de...
Arquitectura de Informação: Wireframes
• O nome deste documento está relacionado com o facto de
serem desenhos com linhas ...
• São o rascunho/esboços de um ecrã específico, onde todos
os elementos da navegação e informações são
posicionadas;

!
• O...
Arquitectura de Informação: Wireframes
Produção

• Podem ser feitos em papel, html, num programa de
apresentações (Keynote...
Desenhos de Eva-Lotta Lamm
Arquitectura de Informação: Modelos e
Especificações Funcionais (SPECS)
• Documento onde são descritos todas as funcionalid...
Arquitectura de Informação: Storyboards
Esboços gráficos associados a cada ecrã e que descrevem,
com detalhe, o conjunto de...
Desenhos de Eva-Lotta Lamm
Arquitectura de Informação: Mapa de Fluxos de
Navegação (User Flows)
• Pode ser um esquema ou usar a sequência de wirefram...
CARRINHO DE
COMPRAS
INFORMAÇÃO DA
COMPRA
FACTURAÇÃO
OPÇÕES OFERTAS
CONFIRMAÇÃO
CRIAÇÃO NOVA
CONTA
• Brown, D. (2007) Communicating Design. Developing Web Site Documentation For
Design and Planning, New Riders.

• Friedle...
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Próximos SlideShares
Carregando em…5
×

Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação

919 visualizações

Publicada em

Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
919
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
55
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação

  1. 1. Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT ETAPAS NA PRODUÇÃO: ARQUITECTURA INFORMAÇÃO
  2. 2. Etapas na Produção: Planeamento, Concepção e Implementação. ! Fase 2 - Arquitectura de Informação: • Inventário de conteúdo; • Estrutura de Informação; • Wireframes; • Modelos e Especificações Funcionais (SPECS); • Storyboard; • Mapa de Fluxos de Navegação (User Flows). AGENDA
  3. 3. Depois: ! ✓ Brief ✓ Análise ✓ Pesquisa ✓ Criação Objectivos e Necessidades ARQUITECTURA DE INFORMAÇÃO Criar uma linguagem comum para todos os que vão trabalhar no projecto. ETAPAS NA PRODUÇÃO
  4. 4. Arquitectura de Informação • O resultado da pesquisa, análise, edição e organização de todos os dados recolhidos até agora. ! • Combinação de esquemas de organização e de navegação dentro de um sistema multimédia. ! • Resulta da relação entre utilizadores, conteúdos e contexto. ETAPAS NA PRODUÇÃO
  5. 5. Arquitectura de Informação: Componentes Organização: Determina o agrupamento e as categorias do conteúdo. ! Navegação: Especifica a forma de navegar na interface. ! Sistema de nomenclaturas: Estabelece as formas de representação e apresentação da informação. ! Sistema de pesquisa: Determina as perguntas que o utilizador pode efectuar e as respostas que poderá obter. ETAPAS NA PRODUÇÃO
  6. 6. Também conhecida como análise de conteúdo ou auditoria de conteúdo. Arquitectura de Informação: Inventário de Conteúdos Uma lista de toda a informação contida no projecto juntamente com os dados que descrevem a informação nos diversos pontos de vista (Exemplo: audiência, localização na página, criação, etc.). ! ! Objectivo: Capturar e descrever cada peça de conteúdo do projecto. ETAPAS NA PRODUÇÃO
  7. 7. ID NOME DA PÁGINA TIPO DE PÁGINA LOCALIZAÇÃO RESPONSÁVEL 1 Cursos Destaques /cursos Rui S. 1,1 PM Planos de Estudo /cursos/PM Rui S. 1.1.1 Web Design Abstract Cadeira /cursos/PM/wd Catarina M. 1.1.2 Marketing Digital Abstract Cadeira /cursos/PM/md Catarina M. 1,2 Investigação Conteúdo Geral /investigacao Ricardo R. 1.2.1 Observatório da Publicidade Descrição Detalhada /investigacao/ob Ricardo R. Exemplo de um inventário de conteúdo simples.
  8. 8. Arquitectura de Informação: Inventário de Conteúdos • Nome do conteúdo: deve ser auto evidente e explicativo. ! • Localização do conteúdo: URL, a localização na hierarquia criada no servidor, etc. ! • Template: ajuda a definir como é que o sistema vai apresentar o conteúdo. Muito útil para projectos baseados em CMS (Content Management System). ! • Finalidade: descrever a finalidade de cada peça de conteúdo, a forma como o conteúdo encontra os objectivos definidos para o projecto. Campos necessários para criar um bom inventário de conteúdos: ETAPAS NA PRODUÇÃO
  9. 9. Arquitectura de Informação: Inventário de Conteúdos Campos necessários para criar um bom inventário de conteúdos: • Fonte: a origem de cada peça de conteúdo. Exemplo: É original? Ou já existe noutro suporte e apenas precisa de ser editado? ! • Calendarização / Milestones (por definição, estão associados a marcos importantes, na timeline de projecto): por vezes é necessário especificar os diferentes estágios/ momentos do ciclo de vida de um conteúdo. Exemplo: autor/criação, edição, expiração. ! • Formato: html, bases de dados, imagens, conteúdo Flash, vídeos, pdf, doc, outros tipos de ficheiros ou apresentação. ETAPAS NA PRODUÇÃO
  10. 10. Arquitectura de Informação: Estrutura de Informação A estrutura depende fundamentalmente do tipo de informação que será disponibilizada nas páginas do website. ! A estrutura apresenta a informação ao longo do tempo (estrutura de navegação). INFORMAÇÃO ESTRUTURA SUBCATEGORIASCATEGORIAS ETAPAS NA PRODUÇÃO
  11. 11. HOME CURSOS INVESTIGAÇÃO EXPERIMENTAR PARCEIROS ALUNOS DOCENTESESCOLA ASSOCIAÇÃO. ANTIGOS ALUNOS SECRETARIA GABINETE DE COMUNICAÇÃO GABINETE DE ESTÁGIOS RELAÇÕES INTERNACIONAIS RECURSOS HUMANOS SERVIÇOS DE GESTÃO MULTIMÉDIA SERVIÇOS DE GESTÃO DE QUALIDADE NESTA SECÇÃO: VISITA VIRTUAL APRESENTAÇÃO ÁREAS TECNOLÓGICAS MEDIA KIT INFORMAÇÃO ACADÉMICA ÓRGÃOS DE GESTÃO BIBLIOTECA SECÇÕES SERVIÇOS Exemplo real de uma estrutura de um website (www.escs.ipl.pt). categorias subcategorias
  12. 12. ASSOCIAÇÃO. ANTIGOS ALUNOS MEDIA KIT APRESENTAÇÃO ÁREAS TECNOLÓGICAS VISITA VIRTUAL SECÇÕES SERVIÇOS INFORMAÇÃO ACADÉMICA ÓRGÃOS DE GESTÃO OUTRAS OFERTAS LICENCIATURAS MESTRADOS OBSERVATÓRIO A PUBLICIDADE GABINETE APOIO INVESTIGAÇÃO CIMDE REVISTA COMUNICAÇÃO PÚBLICA CPIESCS ESTÁGIOS INTERCÂMBIOS PROGRAMA DE TV E2 EXTRA-CURRICULARES ÁREAS TECNOLÓGICAS PROTOCOLOS VISITA VIRTUAL PRESTAÇÃO DE SERVIÇOS PORTFOLIO INFORMAÇÃO ACADÉMICA ASSOCIAÇÃO DE ESTUDANTES APERPEC POLIEMPREENDE PRÉMIOS E BOLSAS MANUAL DO ALUNO SECÇÕES INFORMAÇÃO ACADÉMICA PROGRAMAS DE MOBILIDADE REQUISIÇÕES RECURSOS HUMANOS HOME ESCOLA CURSOS INVESTIGAÇÃO EXPERIMENTAR ALUNOSPARCEIROS DOCENTES Exemplo real de uma estrutura de um website (www.escs.ipl.pt).
  13. 13. Exemplo de uma Estrutura Base: PÁGINA PRINCIPAL E MENU PÁGINAS SECUNDÁRIAS (SUB-MENU) PÁGINAS DE CONTEÚDO Arquitectura de Informação: Estrutura de Informação ETAPAS NA PRODUÇÃO
  14. 14. • Agrupar e hierarquizar a informação de acordo com a sua importância; ! • Ligações que são estabelecidas entre os diversos ecrãs de um website; ! • Tem de ser perceptível para o utilizador; ! • Representa um modelo hierárquico, facilmente perceptível. Arquitectura de Informação: Estrutura de Informação ETAPAS NA PRODUÇÃO
  15. 15. O caminho que o utilizador percorre para alcançar a informação pretendida nunca deve ser nem muito superficial, nem muito profundo. Arquitectura de Informação: Estrutura de Informação ETAPAS NA PRODUÇÃO
  16. 16. Pressuposto 1: O utilizador nunca deve ter que fazer mais de três escolhas até alcançar o que pretende. Pressuposto 2: A quantidade de opções que lhe são apresentadas, de cada vez, devem estar compreendida entre 4 e 7. Menu Website apple.com Arquitectura de Informação: Estrutura de Informação ETAPAS NA PRODUÇÃO
  17. 17. ETAPAS NA PRODUÇÃO Arquitectura de Informação: Estrutura de Informação Páginas Principais • As mais importantes; ! • Através delas o utilizador vai decidir ou não se quer aprofundar a pesquisa de informação; ! • A informação deve estar bem estruturada e a localização das hiperligações deve ser óbvia e explícita. ! • A simplicidade é a chave!
  18. 18. ETAPAS NA PRODUÇÃO Arquitectura de Informação: Estrutura de Informação Páginas Principais BOAS PRÁTICAS ✓ A página principal de qualquer website deve conter sempre as últimas novidades e de preferência a informação de quais as últimas áreas e sub-áreas actualizadas. ! A Homepage é a porta de entrada do website (cada vez menos!) ✓ Não deve ter sempre o mesmo aspecto, caso contrário, os utilizadores ficam aborrecidos e com a ideia de que é um website sem actualização. ! Fugir às “entradas” introdutórias! ✓ Não servem de grande coisa e são apenas mais um obstáculo para o utilizador.
  19. 19. ETAPAS NA PRODUÇÃO Arquitectura de Informação: Estrutura de Informação Páginas Secundárias • Mantêm o menu principal visível, mas oferecem novas opções de escolha ao utilizador (Por vezes é onde aparecem os sub-menus ou menus secundários). ! • É importante manter as escolhas iniciais nas páginas secundárias, de forma a que o utilizador consiga corrigir/ actualizar facilmente o seu percurso.
  20. 20. ETAPAS NA PRODUÇÃO Arquitectura de Informação: Estrutura de Informação Páginas de Conteúdo • Páginas sem uma estrutura de menus de escolha e com um carácter mais objectivo. ! • O menu principal é sempre uma constante. ! • É normal nestas páginas encontrarmos não só ligações às secções principais como às páginas secundárias onde efectuamos as selecções anteriores. ! • A ligação à página principal deve estar sempre presente em cada página, de forma a que, caso o utilizador se perca, consiga voltar de novo ao território já conhecido e alterar/ actualizar o seu percurso.
  21. 21. Arquitectura de Informação: Wireframes • O nome deste documento está relacionado com o facto de serem desenhos com linhas simples, sem grandes elaborações em termos de design. ! • Usualmente desprovido de cor, estilos tipográficos e imagens. ! ! Objectivo: Comunicar as ideias iniciais do design. Uma forma simplificada de mostrar quais os conteúdos que irão aparecer em cada ecrã do produto final, qual a estrutura do documento, grelha, navegação, etc. ! Foco: O conteúdo e a estrutura, não o layout ou o desenho visual. Também conhecidos como: screen blueprints ou simplesmente por protótipos (estáticos, interactvos ou funcionais). ETAPAS NA PRODUÇÃO
  22. 22. • São o rascunho/esboços de um ecrã específico, onde todos os elementos da navegação e informações são posicionadas; ! • Onde agrupamos, ordenamos e criamos hierarquias de conteúdos; ! • É um esqueleto que organiza os elementos da interface, sem interferências do projecto gráfico/visual (desenho do layout gráfico); ! • São os primeiros resultados de toda a pesquisa e análise que foi feita na etapa referente ao pré-projecto; ! • São documentos essenciais para os restantes membros das várias equipas de projecto. Arquitectura de Informação: Wireframes ETAPAS NA PRODUÇÃO
  23. 23. Arquitectura de Informação: Wireframes Produção • Podem ser feitos em papel, html, num programa de apresentações (Keynote, Powerpoint, etc.), Illustrator, Photoshop, Visio, etc. • Podemos usar apenas rectângulos e etiquetas para representar as diferentes áreas do ecrã. ! O que devemos ilustrar: • Áreas de conteúdo; • Descrições de conteúdo (uma descrição curta. Ex.: “Lista de artigos” ou “Formulário de Contacto”). • Prioridades de apresentação de conteúdo (hierarquia). • Identificar a informação (Ex.: nome da página). • Informação de gestão de projecto: o nome do criador do wireframe, o nº de ecrã, a versão, etc. (identificar o wireframe no contexto geral do projecto). ETAPAS NA PRODUÇÃO
  24. 24. Desenhos de Eva-Lotta Lamm
  25. 25. Arquitectura de Informação: Modelos e Especificações Funcionais (SPECS) • Documento onde são descritos todas as funcionalidades que o sistema irá ter; ! • Os casos em que se aplica determinado requisito; ! • Mostrar e ilustrar o que o sistema tem que fazer; ! ! NOTA: Fugir dos documentos complexos em que ninguém entende o que está a ser descrito. ETAPAS NA PRODUÇÃO As descrições do comportamento do sistema como resposta a um pedido, que teve origem, no exterior deste sistema (normalmente um input do utilizador).
  26. 26. Arquitectura de Informação: Storyboards Esboços gráficos associados a cada ecrã e que descrevem, com detalhe, o conjunto de conteúdos e elementos de navegação. ETAPAS NA PRODUÇÃO
  27. 27. Desenhos de Eva-Lotta Lamm
  28. 28. Arquitectura de Informação: Mapa de Fluxos de Navegação (User Flows) • Pode ser um esquema ou usar a sequência de wireframes referentes a um cenário particular; ! • Ilustra as principais interacções relacionadas a determinadas tarefas; ! • Ampliam a visão dos wireframes num ângulo mais virado para a experiência do utilizador; ! • Ao exemplificar tarefas reais que serão utilizadas pelas pessoas ajudam à compreensão de como tudo vai funcionar; ! • Usar um vocabulário visual padrão para todos os fluxos, com uma legenda que explique os significados. ETAPAS NA PRODUÇÃO Diagramas que mostram o percurso de um utilizador. ! Usado para representar as experiências mais comuns de um utilizador num projecto web.
  29. 29. CARRINHO DE COMPRAS INFORMAÇÃO DA COMPRA FACTURAÇÃO OPÇÕES OFERTAS CONFIRMAÇÃO CRIAÇÃO NOVA CONTA
  30. 30. • Brown, D. (2007) Communicating Design. Developing Web Site Documentation For Design and Planning, New Riders. • Friedlein, A. (2001) Web Project Management. Morgan Kaufmann Publishers. • Jacobson, Robert (ed.) (2000) Information Design, The MIT Press. • Morville, P. & Rosenfeld, L. (2007) Information Architecture For The World Wide Web, O’Reilly. BIBLIOGRAFIA

×