MARKETING DIGITAL / 6º SEMESTRE AULA 01+02

Transcrição

1 DOCENTE RICARDO RODRIGUES LICENCIATURA EM PUBLICIDADE E MARKETING MAIL AULAS@ESGANA.COM URL MARKETING DIGITAL / 6º SEMESTRE AULA 01+02

2 PROGRAMA AULA WORKSHOP 1: Arquitectura de Informação (2 AULAS) Inventário de Conteúdos. Estrutura da Informação. Páginas: Principais, Secundárias e de Conteúdo. Personas. Wireframes.

3 DEPOIS... Brief e Debrief Pesquisa Análise Metas / Planeamento ARQUITECTURA DE INFORMAÇÃO CRIAR UMA LINGUAGEM COMUM PARA TODOS OS QUE VÃO TRABALHAR NO PROJECTO. Documentação ou como comunicar o desenho da informação. Comunicar uma ideia é tão importante como ter uma. (Dan M. Brown)

4 INVENTÁRIO DE CONTEÚDOS

5 ARQUITECTURA DE INFORMAÇÃO INVENTÁRIO DE CONTEÚDO 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 da página, criação, etc.). Também conhecida como análise de conteúdo ou auditoria de conteúdo. OBJECTIVO: capturar e descrever cada peça de conteúdo do projecto.

6 ID NOME DA PÁGINA TIPO DE PÁGINA LOCALIZAÇÃO RESPONSÁVEL 1.0 Cursos Destaques /cursos Rui S. 1.1 PM Planos de Estudo /cursos/pm Rui S Web Design Abstract Cadeira /cursos/pm/wd Catarina M Marketing Digital Abstract Cadeira /cursos/pm/md Catarina M. 1.2 Investigação Conteúdo Geral /investigacao Ricardo R Observatório da Publicidade Descrição Detalhada /investigacao/ob Ricardo R. Exemplo de um inventário de conteúdo.

7

8

9 ARQUITECTURA DE INFORMAÇÃO INVENTÁRIO DE CONTEÚDO CAMPOS NECESSÁRIOS PARA CRIAR INVENTÁRIOS DE CONTEÚDOS: Nome do conteúdo: deve ser auto evidente. 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.

10 ARQUITECTURA DE INFORMAÇÃO INVENTÁRIO DE CONTEÚDO CAMPOS NECESSÁRIOS PARA CRIAR INVENTÁRIOS 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? 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, pdf, doc, outros tipos de ficheiros ou apresentação. Acesso: indicações de como é feito o acesso ao conteúdo. Exemplo: se o conteúdo requer uma password.

11 ESTRUTURA DE INFORMAÇÃ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 web-site. INFORMAÇÃO ESTRUTURA CATEGORIAS SUBCATEGORIAS

13

14 ARQUITECTURA DE INFORMAÇÃO ESTRUTURA DE INFORMAÇÃO EXEMPLO DE UMA ESTRUTURA BASE PÁGINA PRINCIPAL E MENU SUB-MENU PÁGINAS DE CONTEÚDO

15 ARQUITECTURA DE INFORMAÇÃO ESTRUTURA DE INFORMAÇÃO Ligações que são estabelecidas entre as diversas páginas de um web-site; Tem de ser perceptível para o utilizador; Representa um modelo hierárquico, facilmente perceptível. NOTA: Se cada página estivesse ligada a todas as outras, formando uma rede absoluta, a confusão instaurava-se e a estrutura tornar-se-ia complexa demais para ser perceptível.

16 ARQUITECTURA DE INFORMAÇÃO ESTRUTURA DE INFORMAÇÃO O caminho que o utilizador percorre para alcançar a informação pretendida nunca deve ser nem muito superficial, nem muito profundo.

17 ARQUITECTURA DE INFORMAÇÃO ESTRUTURA DE INFORMAÇÃO BOAS PRÁTICAS: O utilizador nunca deve ter que fazer mais de três escolhas até alcançar o que pretende (nem sempre é possível). A quantidade de opções que lhe são apresentadas de cada vez devem estar compreendidas entre as 5 e 7. ESTRUTURA 1. PÁGINAS PRINCIPAIS (que incorporam os menus) 2. PÁGINAS SECUNDÁRIAS (com os submenus) 3. PÁGINAS DE CONTEÚDO Cada um destes elementos produzirá páginas de características distintas

18 PÁGINAS PRINCIPAIS

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

20 ARQUITECTURA DE INFORMAÇÃO PÁGINAS PRINCIPAIS BOAS PRÁTICAS A página principal de qualquer web-site 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 web-site! Não deve ter sempre o mesmo aspecto, caso contrário, os utilizadores ficam aborrecidos e com a ideia que é um web-site 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.

21 PÁGINAS SECUNDÁRIAS

22 ARQUITECTURA DE INFORMAÇÃO PÁGINAS SECUNDÁRIAS Mantêm o menu principal visível, mas oferecem novas opções de escolha ao utilizador. É importante manter as escolhas iniciais nas páginas secundárias, de forma a que o utilizador consiga corrigir/ actualizar facilmente o seu percurso.

23 PÁGINAS DE CONTEÚDOS

24 ARQUITECTURA DE INFORMAÇÃO PÁGINAS DE CONTEÚDO Páginas com um carácter mais objectivo. O menu principal é sempre uma constante. A codificação por cores ou símbolos é de especial utilidade em web-sites complexos, pois ajuda o utilizador a identificar rapidamente a secção em que se encontra. É normal nestas páginas encontrarmos não só ligações às secções principais como às páginas secundárias onde efectuámos as selecções. A ligação à página principal deve estar sempre presente em cada página. Se o utilizador estiver perdido volta ao território conhecido e altera a sua selecção/percurso.

25 PERSONAS

26 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS Depois da pesquisa de utilizadores é necessário compreender o contexto em que estes utilizam o nosso projecto. Personas: ajudam a colocar o projecto num contexto explícito/concreto. Também conhecidas por User Profiles, User Role Definitions ou simplesmente Perfis de audiência.

27 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS OBJECTIVOS PARA QUEM ESTÃO ORIENTADOS? Um site bem estruturado terá necessariamente que ter em conta os interesses, as motivações e as aptidões da sua audiência.

28 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS Há que fazer as perguntas certas que ajudam a criar estas personas: O que é mais importante para os utilizadores? A descrição sumária da informação do produto ou as suas especificações técnicas? Quais as informações que utilizam para decidir se vão comprar um produto ou não? As personas mostram como os utilizadores conduzem as suas decisões.

29 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS Representação sumária dos utilizadores-tipo do sistema, descritas como pessoas reais (de carne e osso ). Descrição de como estes utilizadores usam o sistema e o que esperam dele. Ajuda a expressar as necessidades do utilizador e as expectativas destes. Qualquer projecto deve ter o suporte de duas ou mais personas, onde cada uma delas representa um tipo de audiência do sistema. Ajudam a acabar com frases do tipo: Eu acho que os nossos utilizadores querem isto ou Se a minha mãe fosse um consumidor deste produto ela iria querer isto.

30 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN 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: 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áfica da pessoa baseado nos dados das pesquisas efectuadas. Outras simplesmente oferecem um rascunho breve de cada tipo de utilizadores.

31 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS RESUMINDO: Ajudam a captar as necessidades dos utilizadores; Criam um quadro que nos ajuda a tomar decisões em relação ao design. Dependendo dos objectivos das personas no projecto, os seus conteúdos devem enfatizar diferentes tipos de informação.

32 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS NA PRÁTICA: É necessário identificar a informação propriamente dita, adequada a cada situação. Depois de determinado o conteúdo, o passo final é compor toda a informação num documento de design/projecto.

33

34 ANA PEREIRA: NOVA CONSUMIDORA INFO. DEMOGRÁFICAS GRUPO ETÁRIO: Nº DE ANOS ONLINE: 0-4 RENDIMENTO: 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 a um humano.

35 ANA PEREIRA: NOVA CONSUMIDORA MOTIVAÇÕES CENÁRIOS FUNCIONALIDADES COMPORTAMENTOS Aprender sobre os diferentes tipos de contas bancárias online. Comparação de diferentes contas bancárias de diferentes web-sites. Procurar informações de contacto de representantes do banco para fazer perguntas específicas. Gráfico de comparação de produtos. Gráfico de comparação de produtos entre concorrentes. Área de FAQ - Frequently Asked Questions. Chat online com representantes do banco. A Ana clica num link que a leva para uma lista de produtos que lhe permitem fazer comparações. Na página de produto, a Ana clica num link que diz Fale com o gestor de produto. Exemplo de uma persona que represente uma descrição com grande detalhe de um novo consumidor de um site de um banco.

36 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN PERSONAS DESCRIÇÃO DE PERSONAS GRANDE DETALHE MÉDIO DETALHE BAIXO DETALHE

37 CENÁRIOS

38 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN CENÁRIOS Um cenário é uma história criada para uma pessoa-tipo e tem por objectivo humanizá-la de forma a que se consiga visualizar o site 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 sistema. Permitem que os elementos da equipa de projecto identifiquem quais as informações que os utilizadores necessitam/procuram.

39 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN 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 site. Esta tarefa deve ser composta por uma ou mais necessidades e objectivos dos que foram compilados para o público-alvo.

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: 1. CONTEÚDOS? 2. FUNCIONALIDADES?

42 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN 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.

43 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN CENÁRIOS SOBRE ESTE CENÁRIO: FUNCIONALIDADES Mecanismo que pesquise tipos de carro, com filtros por marca, categoria de preços... Indicações e sugestões gerais de como avaliar as suas necessidades. Simulador de financiamento. Sistema que permite guardar as pesquisas para futuras consultas.

44 DOCUMENTAÇÃO OU COMO COMUNICAR O DESIGN CENÁRIOS Com um simples cenário consegue-se determinar uma série de conteúdos e funcionalidades de interesse que devemos incorporar no web-site.

45 WIREFRAMES

46 WIREFRAMES O nome deste documento está relacionado com o facto de serem desenhos com linhas simples, sem grandes elaborações em termos de design. Também conhecidos como: blueprint ou protótipos. 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. Usualmente desprovido de cor, estilos tipográficos e imagens.

47 WIREFRAMES São o rascunho/esboços de um ecrã específico, onde toda a navegação e informação são posicionadas; Onde se agrupam, ordenam e se criam 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; Muito importantes para a definição de prazos;

48 WIREFRAMES Já servem para serem testados por utilizadores; Através deles os designers têm acesso ao esqueleto daquilo que vão desenhar.

49 WIREFRAMES PRODUÇÃO Podem ser feitos em papel, html, num programa de apresentações (Keynote, Powerpoint, etc), Illustrator, Photoshop, Visio. 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. (dentificar o wireframe no contexto geral do projecto).

50

51

52 A partir do conjunto de URL s fornecidos analisar: estrutura de informação, funcionalidades e navegação. OBJECTIVOS: Análise crítica de projectos existentes; Reinterpretar e apresentar soluções novas e que resolvam problemas identificados; Representar as soluções através de desenho de Wireframes. URL s (dois por grupo):

53 CRITÉRIOS DE AVALIAÇÃO: ESTRUTURA DE INFORMAÇÃO Clareza na forma como os conteúdos estão organizados (estrutura clara e objectiva). Categorias e sub-categorias (fazem sentido?). Identificar o objectivo principal do site (verificar se é possível identificar rapidamente do que trata o site / quais os objectivos). Verificar se as páginas estão bem identificadas (em que área do site é que estamos). CONTEÚDOS Existe actualização de conteúdos?. O formato do texto é o mais adequado para a linguagem web? Existem erros ortográficos graves? A informação é apresentada de forma clara? FUNCIONALIDADE O layout é auto-explicativo e claro? É fácil pesquisar informação? (barra de pesquisa, mapa do site, barra de navegação, links, contactos). No caso de existir a possibilidade de efectuar uma compra online, é claro o que o utilizador tem de fazer para concretizar a compra?

54 CRITÉRIOS DE AVALIAÇÃO (CONT.): NAVEGABILIDADE A navegação é intuitiva e fácil de navegar? A nomenclatura usada nos links é a mais correcta?

55 BIBLIOGRAFIA BROWN, Dan. COMMUNICATING DESIGN. DEVELOPING WEB SITE DOCUMENTATION FOR DESIGN AND PLANNING. New Riders (2007). DIJCK, Peter Van. INFORMATION ARCHITECTURE FOR DESIGNERS. Rotovision (2003). ENGLAND, Elaine & FINNEY, Andy. MANAGING MULTIMEDIA. Addison Wesley - 3ª Edição (2002). FRIEDLEIN, Ashley. WEB PROJECT MANAGEMENT. Morgan Kaufmann Publishers (2001).