laboratório web 2013-2014 - etapas na produção: análise e pesquisa
DESCRIPTION
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.TRANSCRIPT
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
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.
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.
ETAPAS NA PRODUÇÃO
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
ETAPAS NA PRODUÇÃ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.
ETAPAS NA PRODUÇÃO
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
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.
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?
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?
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.
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.
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.
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!
ETAPAS NA PRODUÇÃO
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.
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.
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
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.
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.
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.
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.
ETAPAS NA PRODUÇÃO
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
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.
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”.
ETAPAS NA PRODUÇÃO
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?
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.
ETAPAS NA PRODUÇÃO
Créditos: Jason Travis, Persona Series
Créditos: Jason Travis, Persona Series
Créditos: Mailchimp User Personas Research
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.
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.
ETAPAS NA PRODUÇÃO
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.
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.
ETAPAS NA PRODUÇÃO
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.