laboratório web 2013-2014 - etapas na produção: análise e pesquisa

Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE

DOCENTE: RICARDO PEREIRA RODRIGUES / [email protected]

ETAPAS NA PRODUÇÃO: ANÁLISE E PESQUISA

mailto:[email protected]

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.

AGENDA

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

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.


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.


Exemplo de uma metodologia (uma visão macro):

EXPLORAR CONSOLIDAR REALIZARDESCOBRIR COMUNICAR!E AVALIAR

1 2 3 4 5•BRIEF •DEBRIEF •REQUISITOS •OBJECTIVOS •PESQUISA !!•FEEDBACK

•ESBOÇOS •MAPA DO WEBSITE •CONCEPTUALIZAÇÃO •WIREFRAMES !!!•FEEDBACK

•CONTEÚDOS •PRÉ-PRODUÇÃO •PROTOTIPAGEM !!!!•FEEDBACK

•PRODUÇÃO •TESTES (BROWSERS E PLATAFORMAS) !!!!

•FEEDBACK

•LANÇAMENTO •MONITORIZAÇÃO


Exemplo de uma metodologia (uma visão detalhada):

✓ Pesquisa.!!

✓ Entrevista utilizadores.!!

✓ Definição e Planeamento do website.!!

✓ Brief + Debrief.

2 SEMANAS 2 SEMANAS 2 SEMANAS 2 SEMANAS 1 SEMANAS

ANÁLISE, METAS E ESTRATÉGIA

ARQUITECTURA DE INFORMAÇÃO

LAYOUT E INTERFACE

IMPLEMENTAÇÃO E DESENVOLVIMENTO

AFINAÇÃO!E AVALIAÇÃO

✓ Desenho de Informação.!!

✓ Investigação de soluções tecnológicas.

✓ UX (User Experience).!!✓ Design Visual.!!

✓ Branding.!!✓ Acessibilidade e

Usabilidade.

✓ Programação.!!

✓ Animação.!!

✓ Edição Vídeo e Audio.!!

✓ Motion Graphics!!

✓ 3D

✓ Testes.!!

✓ Lançamento.!!

✓ Avaliação.!!

✓ Manutenção Técnica.


Independentemente da dimensão: O processo de conceptualização, organização e produção é essencialmente o mesmo.

CRIAR UM PROJECTO WEB

ORGANIZAÇÃO!(gestão) CRIATIVIDADE


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.


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?


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?


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.


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.


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.


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!


Grupos Focais (Focus Group) !• Uma conversa organizada com um grupo de indivíduos.• Podem ser usados para planear e definir os objectivos de um

projecto ou para avaliar os resultados.

Condução do grupo: !1. Planear as perguntas; !2. Nomear um moderador 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.


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.


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


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.


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.


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.

AO ESCOLHERMOS O FOCO:

✓ Tipos de informação recolhidos. ✓ Escolha dos concorrentes. ✓ Apresentação dos resultados.

QUADRO CONCEPTUAL: !Definido pelos concorrentes escolhidos, pelos critérios de análise e pela apresentação dos dados recolhidos.

Os critérios podem variar do geral para o particular.


CARACTERÍSTICAS GERAIS:!DESIGN (1-5)NAVEGAÇÃO (1-5)ESTRUTURA (1-5)PUBLICIDADE

SITE A SITE B

PERSONALIZAÇÃO:!PÁGINA INICIALSERVIÇO DE ALERTAPESQUISA AGRADÁVEL

!!332

NÃO

!!423

SIM

!!

SIMNÃONÃO

!!

NÃOSIMSIM

TECNOLOGIA:!JAVASCRIPT / AJAXFLASHHTML5 / CSS3

!!

SIMNÃOSIM

!!

NÃOSIMSIM

CATEGORIAS (Critérios)

Exemplo simples de representação através de índices (utilizam de uma escala de avaliação).

WWW.MINIZOO.PT

CATEGORIAS!CÃES E GATOSPEIXESRÉPTEIS E ANFÍBIOSCAVALOSEXÓTICOS

LAYOUTS DA PÁGINA

HOMEPAGE PÁGINA DE GALERIA

NAVEGAÇÃO NO CATÁLOGO

CATEGORIA PRINCIPAL

HOME

SUB-CATEGORIAS

FILTRO DE CATEGORIA

PÁGINA DE PRODUTO

FLUXO DE FINALIZAÇÃO DE PAGAMENTO

CARRINHO DE COMPRAS

INFORMAÇÃO DA COMPRA FACTURAÇÃ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.

OPÇÕES OFERTAS

CONFIRMAÇÃO

http://WWW.MEGAFRUTAS.PT

LAYOUTS DE PÁGINA

SITE A

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”)

HOMEPAGE

SITE B

SITE C

PÁGINA DE GALERIA PÁGINA DE PRODUTO

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”)

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

LAYOUTS DE PÁGINA

CATÁLOGO DE PRODUTOS

SITE A SITE B SITE C

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

CATEGORIAS (Critérios)

Exemplo simples de representação através de descrições. Especificam como os concorrentes conhecem ou preenchem cada categoria.

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.


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


Personas

Um website bem estruturado terá necessariamente que ter em conta os interesses, as motivações e as aptidões da sua audiência.

OBJECTIVOS PARA QUEM ESTÃO ORIENTADOS?


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.


Créditos: Jason Travis, Persona Series

Créditos: Mailchimp User Personas Research

INFO. DEMOGRÁFICAS!GRUPO ETÁRIO: 21.34Nº DE ANOS ONLINE: 0-4RENDIMENTO: +1000€!CONFORTO COM TECNOLOGIA!PC: MÉDIOLIGAÇÃO INTERNET: FRACA

PERSONA: ANA PEREIRA - NOVA CONSUMIDORA

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.

“Eu não quero ter que consultar a área de informação privada. Eu quero que o site deixe isso claro.”

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.

Cenários !• Um cenário é uma história criada para uma “pessoa-

tipo” (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.


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.


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.

A partir deste cenário listar: !

1. Funcionalidades? 2. Conteúdos?

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.


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.


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.