Concepção. Guilhermo Reis Objetivo da fase de Concepção

Transcrição

1 Concepção Guilhermo Reis 2 Objetivo da fase de Concepção O objetivo da fase de Concepção é definir as regras de organização e apresentação dos conteúdos e serviços do website e o seu o modelo de interação de forma a atender as necessidades dos públicos-alvos, os requisitos do projeto e os objetivos do negócio. Sua função é criar, validar e documentar as regras de organização do website para as demais fases do projeto do website e para as manutenções futuras. 1

2 3 Atividades da fase de Concepção A fase de Concepção é um processo criativo, interativo e iterativo que envolve a criação, a validação e o refinamento de idéias e conceitos. 1 - Cria os conceitos 2 - Avalia os conceitos 4 - Documenta os conceitos 3 - Refina os conceitos SAPIENT apud MORROGH, E. Information Architecture: An Emerging 21st Century Profession, New Jersey:Prentice Hall, Criando os conceitos A criação dos conceitos é a atividade mais criativa do arquiteto de informação. Nela o arquiteto define os sistemas de organização, de navegação, de rotulação e de busca do website. O processo de geração de idéias é muito particular da cada ser humano, por isso utilize o método que julgar melhor: - Faça brainstorms com toda a equipe do projeto. - Converse com colegas. - Isole-se para rabiscar suas idéias. - Navegue pela web. - Faça benchmarks. O importante na criação dos conceitos é explorar todas as informações obtidas na fase de Pesquisa e conceber a visão geral de uma estrutura de organização do site que acomode todos os requisitos do projeto. 2

3 5 1- Criando os conceitos Algumas ferramentas que podem auxiliar no processo criativo: Metáforas Personas Cenários Diagramas de overviews Mockup das páginas principais 6 Metáforas Metáfora é o mapeamento criativo de conceitos novos em conceitos que nos são familiares. Trata-se de uma poderosa ferramenta para comunicar idéias complexas. Ela pode ser utilizada para explicar, persuadir e entusiasmar as pessoas. Existem três tipos básicos de metáforas: - Metáfora organizacional Utiliza a familiaridade com algo já existente para produzir um entendimento rápido do novo sistema. Ex: concessionárias de automóveis normalmente estão organizadas nos departamentos: carros novos, carros usados, oficina, peças e acessórios. As pessoas têm um modelo mental de como uma concessionária é organizada, assim, ao criar um website de concessionária, faz sentido usar uma metáfora que representa essa organização. - Metáfora funcional Faz uma conexão entre as tarefas que podem ser executadas no ambiente tradicional com aquelas que podem ser executadas no novo ambiente.ex: Em uma biblioteca para achar um livro pode-se percorrer as prateleiras, procurar a ficha do livro no catálogo ou pedir ajuda a biblioteca. Um website de biblioteca pode usar uma metáfora funcional apresentando estas tarefas aos seus usuários. - Metáfora visual Utiliza elementos gráficos como imagens, ícones e cores para criar uma conexão com o novo conceito. Ex: um catálogo de telefones on-line pode usar como cor de fundo o amarelo e ícones de telefones para fazer uma conexão com as Páginas Amarelas. 3

4 7 O layout rico em fotos do site OMG! é uma metáfora das revistas de celebridades. omg.yahoo.com (agosto/2008) 8 Problema das metáforas As metáforas ajudam muito a entender e organizar as informações de um website, porém elas podem ser limitantes se seguidas a risca. É muito difícil encontrar uma única metáfora que consiga mapear exatamente todos os conteúdos e serviços de um website. Além disso a metáfora pode dificultar o crescimento do site. Novos conteúdos e serviços que fazem sentido no contexto do site podem não fazer sentido na metáfora. Assim, as metáforas devem ser utilizadas para guiar a criação da estratégia do site, mas não devem ser seguidas estritamente. 4

5 9 Problema das metáforas Exemplo da limitação de uma metáfora. Usar a metáfora do carrinho de compra para o comércio eletrônico faz com que os usuários entendam imediatamente essa funcionalidade básica. É possível colocar produtos no carrinho de compras onde ficam prontos para serem comprados mas ainda não foram. (...) Os carrinhos de compras também ressaltam as fraquezas da metáfora. O conhecimento do sistema de referência indicaria ao usuário que a forma de comprar cinco cópias de algo é repetir a ação de colocar um único item no carrinho cinco vezes. Além disso, a forma de retirar objetos do carrinho de compras seria colocá-los de volta na prateleira. Por outro lado, a maioria dos carrinhos de compra do comércio eletrônico permite que os usuários editem o número de itens que desejam comprar e retirem um item comprando zero cópias. NIELSEN (2000) NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000, p Personas Personas é a criação de arquétipos de usuários que servem de exemplos do público-alvo. Trata-se da criação de um personagem com nome, foto e a descrição de suas habilidades, atitudes, restrições e objetivos. Personas ajuda você a entender para quem fazer o design e como fazer aquele usuário aquele humano muito feliz. Humanizar a audiência é o grande benefício dos personas. O usuário genérico se torna o ser humano específico Sam. Cada momento que um membro do time pensa sobre as funcionalidades potenciais e diz usuários devem gostar disso você pode apontar para o persona e perguntar o Sam vai usar isso?. Os vagos usuários alvo do design que são capazes de qualquer coisa se tornam um específico consumidor com coisas que necessita e usa, assim como coisas que não quer e não pode usar. Repentinamente, priorizar funcionalidades se torna um trabalho fácil. WODTKE (2003) WODTKE, C. Information Architecture: Blueprints for the web. Indianapolis: New Riders, 2003., p

6 11 Personas Exemplo de persona Mason Citação típica: Onde posso encontrar aconselhamento financeiro confiável? Mason (32) trabalha em uma companhia de transporte que abaixou o seu salário. Ele não é casado, mas tem um relacionamento de longo Ele tem investido suas poucas economias em aplicações conservadoras (não investe em ações). Tem pouco débito, mas agora ele está preocupado em não ter dinheiro suficiente quando se aposentar. Ele também tem um sentimento de que não está rentabilizando suas economias o suficiente. Ele tem familiaridade com e visita um punhado de websites sobre hobbies regularmente (via linha discada). Ele comprou alguns equipamentos de pesca o mês passado e foi bem. Os objetivos do Mason são: Decidir se está fazendo um bom trabalho gerenciando as suas finanças. Obter aconselhamento confiável sobre como gerenciar melhor suas finanças e que passos seguir. Decidir se a web é um bom lugar para obter aconselhamento financeiro ou se deve ir a uma agência ou perguntar para amigos. Ele já discutiu seus objetivos com alguns amigos. Um deles recomendou nosso website. Outros deram conselhos conflitantes: mais ações, menos ações, e por ai afora. Então ele não tem certeza se está certo. Ele não está seguro que a web é o melhor lugar para obter aconselhamento financeiro confiável, mas ele tem boas experiências obtendo aconselhamento dos websites sobre seus hobbies, então ele quer tentar. Ele está preocupado em terminar em um website que não seja imparcial. DIJCK, P. Information Architecture for Designers. Hove:RotoVision, Cenários Cenários são boas ferramentas para ajudar a entender como o usuário irá navegar pelo website e como será a sua experiência. Um cenário deve retratar como um usuário com uma necessidade e comportamento específico irá utilizar o website para satisfazer sua necessidade. Passos para criar um cenário: - Analisar os principais públicos-alvos do website, suas necessidades e comportamentos Quem são as pessoas que vão usar o website? Por que e como elas vão querer usar o website? Elas vão estar com pressa ou vão querer explorar o website? - Selecionar 3 ou 4 tipos diferentes de usuários que irão utilizar o website com diferentes necessidades e comportamentos - Criar um personagem que representa cada um destes tipos (persona). Pode-se chegar ao requinte de dar nome, profissão, idade, uma foto e a razão explícita que o levou a visitar o site. - Detalhar passo a passo a experiência de cada personagem na sua visita ao website. Ao fazer isto deve-se destacar as funcionalidades do site e como será o comportamento do personagem diante de cada funcionalidade. 6

7 13 Cenários Exemplo de Cenário Cenário 2 Persona: Mason Idade: 32 Ocupação: Motorista de caminhão É de manhã. Na sua primeira visita ao website, Mason quer descobrir se esse website pode ajudá-lo. Quando ele chega na nossa home-page, ele já visitou três outros websites que lhe foram recomendados entretanto, ele não gostou deles. Sua paciência está sendo testada. A home-page apresenta alguns avisos sobre a imparcialidade do website Mason dá uma olhada rápida nisso. Existe uma seção com artigos sobre como gerenciar suas finanças o título parece relevante para ele. Sua atenção cai em um artigo chamado Como você está gerenciando as suas finanças faça um teste. Ele vai ao artigo e o lê rapidamente. O artigo fala algumas coisas que ele não conhece ele gosta e olha com mais interesse as coisas no website. Existe links para uma discussão mais aprofundada e uma lista de artigos introdutórios similares. Ele vai a outro artigo introdutório: Discutindo finanças com seus amigos: quem você deve ouvir? Novamente ele lê rapidamente um artigo curto com boas dicas e clica em links para uma leitura mais profunda. Mason começa a perceber que o website pode lhe ser útil. Ele começa a imprimir os artigos sua conexão dial-up é cara e ele tem tempo para ler no ônibus e na hora do almoço. Ele imprime cinco artigos. Então ele encerra a seção e leva os artigos ao trabalho. DIJCK, P. Information Architecture for Designers. Hove:RotoVision, Diagramas de overview Metáforas, personas e cenários são boas ferramentas para estimular a criatividade e a colaboração, mas são caóticos e desorganizados. Em algum momento durante o desenvolvimento dos conceitos é necessário organizar esse caos. Para isso utilize diagramas de overview, diagramas com uma visão geral da arquitetura de informação. Diagramas de overview são importantes ferramentas para formalizar as idéias e direcionar o pensamento para uma visão mais prática e factível. Por exemplo, conceitos como Arquitetura de Informação adaptável são simples de definir em uma reunião de brainstorming, mas são difíceis de serem definidos e especificados formalmente para o caso específico de um website. Os diagramas de overview devem: - Retratar a organização das grandes áreas do website. - Definir os rótulos destas grandes áreas. - Representar as principais páginas do site (HP, páginas de entrada de seção, etc.) e os relacionamentos entre elas (hierarquia, fluxo). - Apontar os principais caminhos que o usuário irá percorrer. - Mostrar uma visão geral de todo o website. 7

8 15 Exemplo de diagrama de overview Diagramas de overview Home-Page [pág. 2] Seções para consulta e inclusão das referências Seções institucionais Sistema de Bsuca Biblioteca [pág. 2] Últimas Atualizações [pág. 2] Meus Artigos e Apresentações [pág. 2] Inserir Nova Referência [pág. 3] Quem é Guilhermo [pág. 2] Entre em contato [pág. 3] Resultado da Busca [pág. 2] 16 Mockup das principais páginas Diagramas de overview mostram a visão geral do site, mas não conseguem retratar os elementos necessários em cada página. Para isto mockup das páginas são necessários. Mockups são esboços muitos simplificados das páginas, especificando seus elementos principais. Eles ajudam a comunicar de forma clara as implicações da arquitetura no nível da página e ajudam a validar os cenários de uso do site. Estes mockups servem de base para a criação dos wireframes do site. Toub, S. Evaluating Information Architecture: A practical guide to assessing web site organization, Argus,

9 17 Minhas Favoritas Ferramentas para auxiliar na criação dos conceitos 18 Mind Map (Mapa Mental) Ferramentas para auxiliar na criação dos conceitos Tipo de diagrama que funciona como uma representação gráfica de como as idéias se organizam em torno de um determinado foco. São desenhos elaborados a partir de um único centro, do qual são irradiadas as informações relacionadas. Podem ser feitos com um software adequado ou com canetas coloridas e um bloco de papel. São voltado para a gestão de informações, de conhecimento e de capital intelectual; para a compreensão e solução de problemas; na memorização e aprendizado; na criação de manuais, livros e palestras; como ferramenta de brainstorming; e no auxílio da gestão estratégica de uma empresa ou negócio. (Wikipedia) Graham Burnett (wikipedia) Danny Stevens (wikipedia) 9

10 19 Ferramentas para auxiliar na criação dos conceitos DENIM Software para auxiliar na fase de Concepção de um website. Desenha esboços a mão livre do sitegrama, do fluxo das transações e dos wireframes utilizando um tablet e cria protótipos navegáveis com esses esboços. Disponível em: DENIM 2.1 (setembro/2007) 20 Ferramentas para auxiliar na criação dos conceitos GUI Mags Imãs com o desenho dos elementos de interface gráfica utilizado para se desenhar esboços de telas em quadro brancos magnéticos. Disponível em: 10

11 21 2- Avaliando os conceitos Após desenvolver os conceitos o próximo passo é avaliá-los para verificar se são viáveis. Mantenha sempre o diálogo com todas as pessoas da equipe de projeto e faça-os participar da construção da arquitetura de informação do website. Não deixe para mostrar seu trabalho apenas quando estiver pronto. Os conceitos devem ser avaliados em três dimensões: - A arquitetura de informação proposta é fácil de usar e atende as necessidades do usuário? Avalie a usabilidade através de análises heurísticas e testes de usabilidade como o card sorting e os protótipos em papel. - Ela é viável técnica, operacional e estrategicamente? Discuta com as demais pessoas da equipe de projeto (webdesigners, redatores, programadores) custos, prazos e recursos para implementar a arquitetura proposta. Verifique se atende a todos os requisitos técnicos, operacionais e as diretrizes de posicionamento. - Atende as necessidades de negócio? Valide com o cliente se a arquitetura atende a proposta definida para o website Refinando os conceitos Durante a avaliação dos conceitos novas idéias podem surgir e outras são descartadas. Avalie e incorpore essas mudanças na arquitetura de informação do website e teste novamente. O ciclo termina quando o arquiteto julgar que já definiu conceitos suficiente para especificar detalhadamente todas as páginas do website. 11

12 23 4- Documentando os conceitos A documentação da estratégia tem por objetivo registrar todas as regras e diretrizes da arquitetura de informação do website. Sua função é registrar as idéias e conceitos por trás da solução para: - Formalizar a aprovação pelo cliente - Facilitar a comunicação entre os membros da equipe do projeto - Direcionar as manutenções futuras do website Não existe uma lista exata de todos os tópicos que a documentação da estratégia deve ter porque eles variam conforme as necessidades de cada projeto. A seguir é apresentada uma lista sugerida de tópicos: - Diretrizes - Sistema de Organização - Sistema de Navegação - Fluxo das Transações - Sistema de Busca - Sistema de Rotulação - Ajuda on-line - Esboço da Home-Page e das principais telas Documentando os conceitos Diretrizes - Apresenta as diretrizes básicas para a construção do website definindo o que a arquitetura do website deve privilegiar. - Trata-se de um breve resumo do levantamento de requisitos, destacando os seus pontos principais Sistema de Organização - Documenta o conjunto das regras de categorização e ordenação dos conteúdos e serviços do website. - Contém: Regras de categorização dos conteúdos e serviços e suas justificativas. Regras de ordenação dos conteúdos e serviços em cada categoria e suas justificativas. Diagrama de overview (esboço do sitegrama) aplicando as regras de categorização e ordenação aos conteúdos e serviços do site para validação. 12

13 25 4- Documentando os conceitos Sistema de Navegação - Documenta a função, regras e modelo de interação dos elementos de navegação do website. - Contém: Logotipo Barra de Navegação Global Menu Local Bread Crumb Passo a Passo Cross Content Mapa do site Índice Remissivo - Faça um mockup das principais páginas para ilustrar esses elementos. Fluxo das Transações - Documenta o modelo de interação do usuário para cada tipo de transação: - Contém: Levantamento de cada tipo de transação do website. Desenho do fluxo de cada tipo de transação. Mockup das páginas necessárias para ilustrar cada fluxo Documentando os conceitos Sistema de Busca - Documenta o modelo de interação do sistema de busca do website. - Contém: Levantamento dos perfis de usuário que devem ser atendido. Ex: normal, avançado, etc. Definição dos tipos de busca necessários e possíveis de serem implementados. Ex:busca por palavra chave, por código, etc. Mockup das interfaces de cada tipo de busca. Mockup das páginas de resultados contendo: Mockup das páginas sem resultados contendo: Definição a ajuda do sistema de busca Sistema de Rotulação - Documenta as regras para rotulação das categorias e dos elementos de interface: - Contém: Estilo de linguagem dos rótulos do sistema Principais palavras do vocabulário controlado 13

14 27 4- Documentando os conceitos Ajuda on-line - Documenta o conjunto de textos explicando como utilizar o website: - Contém: Perfis de usuários que devem ser atendidos (novatos, avançados, primeira vez). Tipos de ajuda que serão necessários (explicação de procedimentos, explicação da interface, etc.). Definição do acesso e da apresentação dos textos de ajuda. Esboço da Home-Page e das principais páginas - Mockup das principais páginas do website apresentando e explicando seus principais elementos. 14