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: ANÁLISE E PESQUISA

2. AGENDA
Etapas na Produção: Planeamento, Concepção e
Implementação.
!
Fase 1 - Análise e Pesquisa:
• Pesquisa, Objectivos e Necessidades;
• Brainstorming, Mapas Mentais, Entrevistas, Grupos Focais
(Focus Group) e Pesquisa Visual;
• Documentação;
• Análise Competitiva (Benchmark);
• Personas;
• Cenários de Actividade.

3. ETAPAS NA PRODUÇÃO
Pontos de partida:
!
• A produção de projectos Web/Multimédia assume-se
como uma actividade relativamente complexa.
!
• Pode envolver uma equipa de profissionais de diversas
áreas (diferentes saberes, linguagens, pontos de vista, etc).

4. ETAPAS NA PRODUÇÃO
Metodologia Projectual
!
Organização de todos as fases previsíveis ou imprevisíveis que
levam à produção de produtos e/ou serviços que vêm
satisfazer uma necessidade.
!
Deve ser aplicada uma metodologia para servir de suporte à
gestão da complexidade do projecto.
!
Deve ser consistente, bem documentada e dinâmica para
que possa ser aplicada noutros projectos e rígida o suficiente
para não permitir atrasos nas várias etapas que compõem a
produção do projecto.

5. ETAPAS NA PRODUÇÃO
Metodologia Projectual
!
A metodologia varia muito de acordo com as necessidades
do projecto. De uma forma resumida podemos organizar todo
o processo da seguinte maneira:
!
1.
Brief;
2.
Pesquisa;
3.
Definição da Estratégia;
4.
Análise Competitiva (Benchmark);
5.
Levantamento de funcionalidades desejadas;
6.
Arquitectura da Informação;
7.
Desenho da experiência do utilizador;
8.
Projecto de Interface;
9.
Projecto de Branding;
10. Desenvolvimento;
11. Implementação;
12. Lançamento;
13. Manutenção e Monitorização.
Dimensões:
!
- Análise do problema.
- Análise de soluções
existentes para problemas
semelhantes.
- Encontrar novas
hipóteses e alternativas de
solução.
- Avaliação das
diferentes alternativas.
- Dar início à realização
do projecto.

6. ETAPAS NA PRODUÇÃO
Exemplo de uma metodologia (uma visão macro):
1 2 3 4 5
DESCOBRIR
EXPLORAR
CONSOLIDAR
REALIZAR
COMUNICAR!
E AVALIAR
• BRIEF
• ESBOÇOS
• CONTEÚDOS
• PRODUÇÃO
• LANÇAMENTO
• DEBRIEF
• MAPA
DO WEBSITE
• CONCEPTUALIZAÇÃO
• WIREFRAMES
• PRÉ-PRODUÇÃO
• TESTES
• MONITORIZAÇÃO
• FEEDBACK
• FEEDBACK
• REQUISITOS
• OBJECTIVOS
• PESQUISA
!
!
• FEEDBACK
!
!
!
• PROTOTIPAGEM
!
!
!
!
(BROWSERS
E PLATAFORMAS)
!
!
!
!
• FEEDBACK

7. ETAPAS NA PRODUÇÃO
Exemplo de uma metodologia (uma visão detalhada):
ANÁLISE, METAS
E ESTRATÉGIA
ARQUITECTURA DE
INFORMAÇÃO
✓
Pesquisa.!
✓
✓
Entrevista
utilizadores.!
✓
✓
!
!
Definição e
Planeamento do
website.!
✓
Desenho de
Informação.!
!
Investigação de
soluções
tecnológicas.
LAYOUT E
INTERFACE
✓
!
✓
✓
!
✓
!
✓
Programação.!
✓
Testes.!
Animação.!
✓
Lançamento.!
Edição Vídeo e
Audio.!
✓
Design Visual.!
!
✓
Branding.!
Acessibilidade e
Usabilidade.
✓
✓
Brief + Debrief.
2 SEMANAS
AFINAÇÃO!
E AVALIAÇÃO
✓
UX (User
Experience).!
IMPLEMENTAÇÃO E
DESENVOLVIMENTO
2 SEMANAS
2 SEMANAS
!
!
!
Motion Graphics!
!
✓
!
!
Avaliação.!
!
Manutenção
Técnica.
3D
2 SEMANAS
1 SEMANAS

9. ETAPAS NA PRODUÇÃO
CRIAR UM
PROJECTO WEB
ORGANIZAÇÃO!
(gestão)
CRIATIVIDADE
Independentemente da dimensão: O processo de
conceptualização, organização e produção é essencialmente o
mesmo.

10. ETAPAS NA PRODUÇÃO
Objectivos e Necessidades (definição da estratégia)
!
Definição de Objectivos:
!
Entender a posição do cliente perante a concorrência e o
mercado, questioná-lo, descobrir as suas ambições para este
projecto:
!
• Delinear o que é pretendido com a sua presença digital.
• Determinar a melhor maneira de satisfazer estas
necessidades.
• Aconselhar as melhores soluções.
Ter sempre o cuidado de
documentar as
entrevistas/reuniões, no
sentido de registar as
ideias mais importantes e
os rumos que as
sucessivas reuniões vão
seguindo.

11. ETAPAS NA PRODUÇÃO
Objectivos e Necessidades (definição da estratégia)
!
A resposta a uma série de perguntas, que servirão de base ao
conceito geral do website, estabelecem os objectivos:
O QUE SE PRETENDE ALCANÇAR?
✓
✓
✓
Esta presença na web servirá para quê?
Para divulgar a empresa? Para vender produtos e serviços?
Qual o propósito da marca/empresa?
QUAIS OS OBJECTIVOS PRINCIPAIS?
✓
✓
✓
✓
Fidelizar o cliente?
Assisti-lo nos seus problemas?
Expandir o mercado da empresa?
Angariar novos clientes?

12. ETAPAS NA PRODUÇÃO
Objectivos e Necessidades (definição da estratégia)
!
A resposta a uma série de perguntas, que servirão de base ao
conceito geral do website, estabelecem os objectivos:
QUAL O PÚBLICO-ALVO?
Quem são os clientes da empresa? Que idade têm?
Que grau de instrução têm? Quais as suas condições
económicas?
✓ São pessoas que dominam as novas tecnologias?
✓ Que futuros clientes se pretendem alcançar?
✓
✓
QUE INFORMAÇÃO DISPONIBILIZAR?
✓
✓
✓
✓
Produtos e serviços comercializados?
Informações técnicas sobre produtos?
Recursos e assistências ao cliente?
Divulgação empresarial?

13. ETAPAS NA PRODUÇÃO
Objectivos e Necessidades (definição da estratégia)
!
As respostas a estas perguntas:
!
• A informação em bruto é depois filtrada e condensada numa
lista de objectivos, que dependendo da sua dimensão,
poderão ser repartidos em subcategorias.
!
• Os objectivos devem ser arrumados por ordem de
importância.
!
!
A partir daqui, delinear o que é pretendido com a presença
digital e determinar a melhor maneira de satisfazer estas
necessidades.

14. ETAPAS NA PRODUÇÃO
Brainstorming
!
Combater o problema a partir de todas as direcções possíveis
de uma só vez. Como?
!
Formular perguntas rápidas para chegar a soluções viáveis:
• Ajudam na definição de problemas.
• Permite a geração de conceitos.
RESULTADOS
✓
✓
Listas com ideias, soluções e conceitos descritos;
Esboços e Diagramas rápidos;
Regras:
!
1. Escolher um
moderador;
!
2. Determinar os tópicos;
!
3. Registar e Anotar
tudo;
!
4. Estabelecer um limite
de tempo;
!
5. Avaliar e dar
seguimento às melhores
ideias.

15. ETAPAS NA PRODUÇÃO
Mapas Mentais
!
Uma ferramenta de pesquisa mental que permite explorar
rapidamente o foco de um dado problema, tópico ou assunto.
Como fazer:
!
1. Focar - Um elemento
no centro da página.
!
2. Ramificar - criar uma
rede de associações em
torno da expressão ou
imagem central.
!
3. Organizar - as
ramificações principais
podem representar
categorias (sinónimos,
homónimos, frases feitas,
etc.).
!
4. Usar subdivisões.

16. ETAPAS NA PRODUÇÃO
Entrevistas
!
Etnografia: recolher dados através da observação, entrevistas
e questionários.
!
Nem sempre as pessoas conseguem verbalizar o que querem,
mas mostram isso através da sua linguagem corporal, dos
ambientes em seu redor, de entre outras pistas.
!
Objectivo: explorar, em primeira mão, a forma como as
pessoas interagem com objectos ou espaços.
Conduzir uma entrevista:
!
1. Encontrar a pessoa(s)
certa(s) - se possível
encontrar aqueles que se
encontram nos extremos.
!
2. Preparar-se bem! (local,
guião de entrevista,
material de registo e
anotação, etc.)
!
3. Manter-se curioso e
aberto. Evitar chegar à
entrevista com uma
opinião formada.
!
4. Não ter medo dos
silêncios!

17. ETAPAS NA PRODUÇÃO
Grupos Focais (Focus Group)
!
Condução do grupo:
!
1. Planear as perguntas;
Uma conversa organizada com um grupo de indivíduos.
•
!
• Podem ser usados para planear e definir os objectivos de um 2. Nomear um moderador
projecto ou para avaliar os resultados.
e um assistente.
!
3. Criar um ambiente
confortável.
!
4. Manter a mente aberta.
!
5. Dar poder aos
participantes.
!
6. Manter a atenção e a
neutralidade.
!
7. Uma pergunta de cada
vez.

18. ETAPAS NA PRODUÇÃO
Pesquisa Visual
!
• Permitem encontrar territórios, definir ambientes, etc;
• Analisar conteúdo;
• Gerar ideias;
• Comunicar pontos de vista;
• Ajudam a criar soluções visuais inovadoras e bem
informadas.
!
As redes sociais criativas (Pinterest, Dribbble, Béhance,
DeviantART, etc.) podem ser fontes muito ricas e rápidas para
realizar uma pesquisa deste género.
Conduzir uma pesquisa
visual:
!
1. Coleccionar (logótipos,
naming, linguagem
promocional, cores,
texturas, etc.).
!
2. Visualizar - procurar
padrões, repetições e
tendências.
!
3. Analisar - registar as
percepções obtidas na
visualização dos
elementos recolhidos.

19. ETAPAS NA PRODUÇÃO
Documentação ou Como Comunicar o Processo
!
É crucial criar uma linguagem comum entre todos os
elementos que vão trabalhar no projecto.
!
• Serve também como etapa ou marcação do progresso de
um projecto.
!
• Um documento capta uma ideia ou recolhe e sintetiza as
ideias da equipa de projecto.
!
• Documentos: Análise Competitiva, Personas, Cenários,
Inventário de Conteúdos, Mapa do Site, Wireframes, etc.
“Comunicar uma ideia é
tão importante como ter
uma”
!
Dan M. Brown

20. ETAPAS NA PRODUÇÃO
Análise Competitiva (Benchmark)
!
Conhecer a Concorrência:
• Identificação das melhores práticas e providenciar
informação contextual extra para o design;
!
• Processo de análise da forma como os concorrentes
realizam uma função específica com o fim de melhorar a
maneira de realizar a mesma função ou uma função
semelhante no nosso projecto;
!
• Tendo acesso ao que a concorrência oferece dá-nos uma
grande vantagem: podemos incorporar novas
funcionalidades ou então não cair em erros que já tenham
sido cometidos pela concorrência;
!
• Permite-nos oferecer conteúdos e funcionalidade que nos
distinguem dos outros.

21. ETAPAS NA PRODUÇÃO
Análise Competitiva (Benchmark)
COMO SE FAZ?
✓
Elabora-se uma lista dos principais concorrentes.
!
✓
Lista-se as funcionalidades e conteúdos disponibilizados, bem
como uma série de critérios para a sua avaliação.
!
✓
Estabelecemos uma escala de avaliação (1 a 5 por exemplo) para
as características ou para a oferta de funcionalidades que
estejam presentes ou não.
!
✓
Fazemos print screens de todos os websites analisados para
facilitar a identificação à posteriori.
!
✓
Documentar os resultados, estruturar os prós e contras de cada
site concorrente.

22. ETAPAS NA PRODUÇÃO
Análise Competitiva (Benchmark)
!
• Duas dimensões de análise: Critérios e Concorrentes.
!
• Ajuda a equipa de design e os clientes a posicionar os seus
produtos no contexto de desenvolvimento de um projecto.
!
• É muito importante definir o propósito da análise, para
percebermos quais os critérios que vamos seguir e qual a
melhor forma de apresentar os dados recolhidos e
analisados.
QUADRO
CONCEPTUAL:
!
Definido pelos
concorrentes escolhidos,
pelos critérios de análise e
pela apresentação dos
dados recolhidos.
AO ESCOLHERMOS O FOCO:
✓
✓
✓
Tipos de informação recolhidos.
Escolha dos concorrentes.
Apresentação dos resultados.
Os critérios podem variar
do geral para o particular.

23. CATEGORIAS (Critérios)
CARACTERÍSTICAS GERAIS:
!
DESIGN (1-5)
NAVEGAÇÃO (1-5)
ESTRUTURA (1-5)
PUBLICIDADE
PERSONALIZAÇÃO:
!
PÁGINA INICIAL
SERVIÇO DE ALERTA
PESQUISA AGRADÁVEL
TECNOLOGIA:
!
JAVASCRIPT / AJAX
FLASH
HTML5 / CSS3
SITE A
SITE B
!
!
!
!
3
3
2
NÃO
4
2
3
SIM
!
!
!
!
SIM
NÃO
NÃO
NÃO
SIM
SIM
!
!
!
!
SIM
NÃO
SIM
NÃO
SIM
SIM
Exemplo simples de representação através de índices (utilizam de uma escala de avaliação).

24. WWW.MINIZOO.PT
LAYOUTS DA PÁGINA
CATEGORIAS
!
CÃES E GATOS
PEIXES
RÉPTEIS E ANFÍBIOS
CAVALOS
EXÓTICOS
HOMEPAGE
NAVEGAÇÃO NO CATÁLOGO
PÁGINA DE GALERIA
FLUXO DE FINALIZAÇÃO DE PAGAMENTO
OPÇÕES
OFERTAS
HOME
CARRINHO DE
COMPRAS
CATEGORIA
PRINCIPAL
SUBCATEGORIAS
FILTRO DE
CATEGORIA
PÁGINA DE
PRODUTO
INFORMAÇÃO
DA COMPRA
FACTURAÇÃO
CONFIRMAÇÃO
CRIAÇÃO NOVA
CONTA
Exemplo de relatório de análise de concorrência mais complexo, onde são explorados aspectos
diferentes de um site num mesmo documento.

25. LAYOUTS DE PÁGINA
HOMEPAGE
PÁGINA DE GALERIA
PÁGINA DE PRODUTO
SITE A
SITE B
SITE C
Exemplo de relatório com um critério diferente: os dados são representados por pequenas imagem, uma representação eficaz para
análises de layouts de páginas. (em inglês esta forma de representação é conhecida por “Small Multiples”)

26. LAYOUTS DE PÁGINA
SITE A
SITE B
SITE C
SITE D
NAVEGAÇÃO
INFORMAÇÃO DE DESCRIÇÃO DE PRODUTO
INFORMAÇÃO DO CARRINHO DE COMPRAS
INFORMAÇÃO PROMOCIONAL
CONTEÚDO NÃO COMERCIAL
Exemplo de relatório com um critério diferente: os dados são representados por pequenas imagem, uma representação eficaz para
análises de layouts de páginas. (em inglês esta forma de representação é conhecida por “Small Multiples”)

27. CATEGORIAS (Critérios)
SITE A
SITE B
SITE C
CATÁLOGO DE PRODUTOS
Visitando a homepgae,
esta não mostra a
profundidade do
catálogo, clicando em
cada categoria de
produtos, é revelada
ima lista com cerca de
duas dúzias de tipos
de produtos
específicos.
Catálogo extensivo
com todas as
categorias de
produtos visíveis.
O catálogo é limitado
aos produtos para
cães, gatos e peixes e
foca-se, quase
exclusivamente, nos
produtos da categorias
“cães”.
Exemplo simples de representação através de descrições. Especificam como os concorrentes conhecem ou preenchem cada categoria.

28. ETAPAS NA PRODUÇÃO
Análise Competitiva (Benchmark)
!
Conclusões:
• Não interessa quão pequenos possam ser as análises! A
importância está na documentação das conclusões.
!
• É fundamental saber interpretar os dados no contexto do
nosso projecto.
!
• Ao colocarmos em palavras as conclusões a que chegamos
estamos a estabelecer uma direcção específica para o
desenho do projecto.

29. ETAPAS NA PRODUÇÃO
Personas
!
• Representação sumária dos utilizadores-tipo do sistema,
descritas como pessoas reais (ou arquétipos). Expressam as
necessidades e as expectativas do(s) utilizador(es).
!
• Descrevem os utilizadores de um sistema, representando de
forma clara a forma como eles usam o sistema, o que
esperam dele, entre outras coisas. Servem como guia para o
design.
!
• Qualquer projecto deve ter o suporte de duas ou mais
personas, onde cada uma delas representa um tipo de
audiência para o sistema.
Também conhecidas por
“User Profiles” , “User
Role Definitions” ou
simplesmente “Perfis de
audiência”.

30. ETAPAS NA PRODUÇÃO
Personas
OBJECTIVOS
PARA QUEM ESTÃO ORIENTADOS?
Um website bem estruturado terá necessariamente que ter em
conta os interesses, as motivações e as aptidões da sua
audiência.

31. ETAPAS NA PRODUÇÃO
Personas
!
Como nasce uma persona?
• São produto da pesquisa sobre quais os públicos-alvo do
sistema.
!
• A complexidade das personas depende directamente da
profundidade da pesquisa (e do orçamento que dispomos):
!
Pesquisas de mercado;
✓ Entrevistas;
✓ Inquéritos;
✓ Métodos Etnográficos.
✓
Algumas personas tiram
um retrato rico em
descrições detalhadas dos
utilizadores. Um retrato,
quase biográfico da
pessoa baseado nos dados
das pesquisas efectuadas.
!
Outras simplesmente
oferecem um rascunho
breve de cada tipo de
utilizadores.

33. Créditos: Jason Travis, Persona Series

34. Créditos: Jason Travis, Persona Series

35. Créditos: Mailchimp User Personas Research

36. Créditos: Mailchimp User Personas Research

37. PERSONA: ANA PEREIRA - NOVA CONSUMIDORA
INFO. DEMOGRÁFICAS
!
GRUPO ETÁRIO: 21.34
Nº DE ANOS ONLINE: 0-4
RENDIMENTO: +1000€
!
CONFORTO COM
TECNOLOGIA
!
PC: MÉDIO
LIGAÇÃO INTERNET:
FRACA
“Eu não quero ter que consultar a área de
informação privada. Eu quero que o site deixe isso
claro.”
BACKGROUND PESSOAL
!
A Ana é uma mulher solteira que trabalha muitas horas na
área da consultoria em gestão. Viaja muito e raramente tem
tempo para tratar de recados e coisas simples do dia-a-dia.
Ao mesmo tempo ela tem alguma reserva em fazer
transacções comerciais online pelo potencial risco existente
de fraude. A conveniência e as possíveis reduções de
custos bancários online são factores que a atraem, mas Ana
quer sentir-se segura de que a sua informação e o seu
dinheiro estão seguros.
NECESSIDADES
!
Segurança nos assuntos relacionados com a segurança e a privacidade.
• Mensagens claras sobre o que esperar.
• Fácil acesso.
•
MOTIVAÇÕES
!
•
Recolher informações sobre os diferentes tipos de contas bancárias online.
Exemplo de uma persona que represente uma descrição com grande detalhe de um novo consumidor de um site de um banco.

38. ETAPAS NA PRODUÇÃO
Cenários
!
• Um cenário é uma história criada para uma “pessoatipo” (persona) e tem por objectivo humanizá-la de forma a
que se consiga visualizar o website e os seus utilizadores.
!
• Útil para a determinação dos conteúdos e funcionalidades a
incorporar.
!
• Os cenários criados podem ser +/- realistas e criam o
ambiente para uma interacção entre o utilizador e o
sistemas.
!
• Permitem que os elementos da equipa de projecto
identifiquem quais as informações que os utilizadores
procuram.

39. ETAPAS NA PRODUÇÃO
Cenários
!
Como construir um cenário?
Para cada utilizador (grupo de utilizadores):
!
• Nome;
• Atribui-se uma persona a esse utilizador tipo;
• Criamos um cenário que lhe dará vida;
• Criamos o “Pano de fundo”;
• Uma tarefa para cumprir no website. Esta tarefa deve ser
composta por uma ou mais necessidades e objectivos dos
que foram compilados para o público-alvo/personas.

40. A Ana tem 27 anos, é enfermeira, vive em Lisboa e desloca-se
para o trabalho num carro comercial.
Nos próximos 7 meses o agregado familiar da Ana vai
aumentar, e a Ana está a pensar trocar de carro para uma
opção familiar.
!
Actualmente está fazer uma especialização e com o
investimento que fez nesta formação, e uma criança a caminho,
o seu rendimento mensal sofreu um forte abalo.
!
Nesta contexto a Ana está à procura de um carro barato,
económico e tem preferência por duas marcas específicas. Não
tem noção de quanto custa um carro de gama familiar por isso
está disposta a comprar um em segunda mão, caso os seus
rendimentos não sejam suficientes.

41. A partir deste cenário listar:
!
1. Funcionalidades?
2. Conteúdos?

42. ETAPAS NA PRODUÇÃO
Cenários
!
Sobre este cenário:
FUNCIONALIDADES
✓
Mecanismo que pesquise tipos de carro, com filtros por marca,
categoria de preços, etc.
!
✓
Indicações e sugestões gerais de como avaliar as suas
necessidades.
!
✓
Simulador de financiamento.
!
✓
Sistema que permite guardar as pesquisas para futuras
consultas.

43. ETAPAS NA PRODUÇÃO
Cenários
!
Sobre este cenário:
CONTEÚDOS
✓
Como o utilizador não dispõem de muito tempo devem ser
fornecidos mecanismo para contactar o stand e marcar um test
drive.
!
✓
Uma secção só com carros usados.
!
✓
Links de acesso a entidades de crédito.
!
✓
Gráficos e animações com informação que realce as condições
de segurança dos carros.
Com um simples cenário
consegue-se determinar
uma série de conteúdos e
funcionalidades de
interesse que devemos
incorporar no website.

44. BIBLIOGRAFIA
• Best, K. (2006) Gestão de Design, AVA Publishing.
• 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.
• Lupton, E. (2012) Intuição, Ação, Criação. Graphic Design Thinking. Editorial Gustavo Gili.