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.

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

10. 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

11. 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

12. 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

14. 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

15. 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).

16. 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

17. • 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

18. 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

19. 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

20. 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!

21. 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.

22. 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.

23. 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.

24. 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

25. • 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

26. 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

27. Desenhos de Eva-Lotta Lamm

30. 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).

31. 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

32. Desenhos de Eva-Lotta Lamm

33. 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.

34. CARRINHO DE
COMPRAS
INFORMAÇÃO DA
COMPRA
FACTURAÇÃO
OPÇÕES OFERTAS
CONFIRMAÇÃO
CRIAÇÃO NOVA
CONTA

38. • 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