Redesign de site ONG Pierre Bourdieu Fernando Feldberg Tadeu Araújo 1
1. Introdução 1.1 O Projeto Como avaliação final do curso, foi apresentado à turma uma série de sites de ONGs (organizações não governamentais) para serem analisados e escolhidos pelos grupos no intuido de servirem como estudos de caso para aplicação dos conceitos e técnicas aprendidos no decorrer dos módulos. 1.2 Instituição escolhida No caso deste projeto, a ONG escolhida foi a Organização Não Governamental Pierre Bourdieu que atua desde 1999 promovento congressos, seminários e debates de caráter científico e educacional com o objetivo de permitir o acesso ao ensino de forma democrática. Promovendo consultorias educacionais, cursos pré-vestibulares, palestras e cursos de línguas estrangeiras a ONG promove o desenvolvimento educacional de qualidade sem fins lucrativos. 1.3 Justificativa da escolha da instituição Ao analisar o site da ONG, verificou-se uma clara deficiência em relação à organização das informações (Figura 1). Fica evidente o excesso de opções no menu de navegação o que reflete a classificação deficiente do conteúdo do site. Além disso percebemos um layout desorganizado dos elementos na página com títulos sem destaque, estilos de links inconsistentes, alinhamentos de imagens, botões e textos deficientes ou inexistentes. Todos estes fatores colaboram para diminuir a eficiência da utilização do site por seus usuários bem como sua imagem perante futuros parceiros e mídia. Visando resolver os problemas citados acima e desta forma permitir que a ONG consiga oferecer melhores serviços à seus usuários e reflita uma melhor imagem é que decidiu-se por utilizá-la como estudo de caso neste projeto afim de aplicar os conceitos da Arquitetura de Informação e Design de Interação. 2
Figura 1 1.4 Estrutura do projeto Analisando projetos semelhantes na plataforma Corais.org, juntamente com o material disponibilizado pelo curso decidiu-se por aplicar a seguinte estrutura no desenvolvimento do projeto de redesign do site: Planejamento de Informações Levantamento de Informações Classificação de Informações Navegação Visualização de Informações Esta estrutura apresentou-se ser bastante eficiente no trabalho em grupo (memo no caso do grupo em questão formado por apenas dois integrantes) pois permitiu a definição clara das etapas do projeto e suas respectivas tarefas bem com avaliar destas tarefas realmente eram necessárias para o andamento do cronograma. 3
2. Planejamento de Informações 2.1 Briefing O planejamento de informações se iniciou com a formulação do briefing, documento que define os principais interessados no projeto bem como os objetivos a serem atingidos e as tarefas a serem executadas para atigir os objetivos definidos. Para isso foi necessário analisar o site atual, acessando todas as suas páginas e conteúdo verificando as seus pontos fortes e deficiências, simulando a navegação do ponto de vista de usuários da ONG afim de entender quais necessidades deveriam ser levadas em conta no desenvolvimento. Foi nesta etapa que a duas necessidades se tornaram evidentes: classificação de conteúdo que fizesse sentido aos usuários; layout cujo conteúdo fosse organizado de forma coerênte e eficaz para a utilização do site. Pequenos pontos como inconsistências visuais em links (cada um apresentando um estilo e cor), inconsistências em vocabulário e links quebrados também foram encontrados na análise feita durante a criação do briefing. (briefing_pierre_bourdieu_v2.doc) 2.2 Mapa Conceitual Sendo um site de pequeno porte, o desenvolvimento de um mapa conceitual foi suficiente para entender as funcionalidades oferecidas com as quais os usuários interagiam. Dessa forma foi possível visualizar quais seriam os principais serviços e uma possível reorganização destes de forma coerente com sua utilização. (mapamental_estruturanova_pierre_bourdieu_v3.png) Figura 2 4
3. Levantamento de Informações 3.1 Inventário de Conteúdo Para se classificar as informações é necessário saber o que há para ser organizado. Gera-se um documento especificando cada um dos links oferecidos pelo site aplicando descrições que permitem ter uma visão ampla das informações que serão trabalhadas. No caso da ONG Pierre Bourdieu, através de uma planilha e análise manual (acessando link por link do site), verificou-se quais eram os links que o site oferecia, seus nomes, destinos (conteúdo para download) e descrições, bem como se estavam funcionando da forma como deveriam. Esse documento ajudou a confirmar as inconsistências na classificação do conteúdo do site. (inventario_pierre_bourdieu_v1.xlsx) Além disso esse procedimento permite verificar qual parcela do conteúdo do site está fora deste sendo apresentada redirecionando os usuários para outras páginas. Figura 3 5
4. Classificação de Informações 4.1 Taxonomia A taxonomia pode ser descrita como o desenvolvimento das categorias nas quais o conteúdo de um site será classificado. Tendo a classificação do conteúdo sido detectada como um dos principais problemas apresentados pelo site da ONG, foi imprescindível que se desenvolvesse uma taxonomia que permitisse aos usuários visualizar o conteúdo das páginas de forma coerênte e eficaz, tornando a utilização do site mais simples e implementando a findability (capacidade de encontrar as informações procuradas). O principal objetivo foi centralizar informações que no site atual estavam espalhadas e colocá-las sob categorias sob as quais fizessem sentido para os usuários durante a navegação. Isso aconteceu por exemplo com os intens "Membros" e "Parceiros" que como ilustrado na Figura 4 foram colocados sob a categoria "Sobre a ONG" por se tratarem de informações referentes à instituição. Outro exemplo foi a separação de "Cursos e Projetos" em duas categorias diferentes com o objetivo de facilitar a divisão do conteúdo voltado para estudos e os projetos diversos como "Creche Cidadã". Figura 4 6
5. Navegação 5.1 Fluxograma de Navegação O fluxograma de navegação é uma ferramenta útil para avaliar as possíveis sequências que os usuários podem seguir durante a utilização de um site. Portanto foi necessário desenvolver vários diagramas para que cada parte da navegação do site pudesse ser visualizada ao menos de forma superficial para análise rápida. Foi nesta etapa que pôde-se avaliar a necessidade de inclusão de conteúdos relacionados como links rápidos que permitissem a navegação contextual entre as páginas do site complementando a navegação hierárquica. (fluxograma_pierrebourdieu_v2.png) Figura 5 7
5.2 Sitegrama O sitegrama, diferentemente do fluxograma de navegação, demostra a navegação pelas páginas de um site. Cada entidade é uma página ou link. Sua vantagem é tornar visual a relação do todo entre as partes pode-se verificar a coerência de toda a navegação do site prevendo possíveis problemas ou necessidades. (sitegrama.jpg) Figura 6 8
6. Visualização de Informações 6.1 Wireframe Após definida a macro-estrutura do site iniciou-se o desenvolvimento da estrutura da interação dos usuários com esta estrutura, ou seja, menus, links, aparência do site e layout. O foco agora são as páginas individualmente e seus elementos. O objetivo deste documento não é definir as diretrizes do design gráfico do site mas sim da organização dos elementos do ponto de vista da Arquitetura de Informação. Utilizando uma ferramenta simples foram criados os wireframes das principais telas do site prevendo onde seriam dispostos os objetos no layout: menus de navegação, logotipo da ONG, imagens, links auxiliares, etc. (bourdieu_wireframe.pdf) Figura 7 9
7. Conclusão De que adianta ouvir dizer que estamos na era da informação se não se consegue encontrála? Fica evidente que o papel do Arquiteto de Informação ganha importância em projetos como o relatado neste trabalho. Além do aumento de sua quantidade pontos críticos ao se lidar com informação é a sua subjetividade em relação à interpretação e organização. Não existem definições 100% corretas. É por isso que a figura de um profissional capaz de entender o perfil das pessoas que buscam tais informações e aliar estas especificações às limitações técnicas do projeto, juntamente com os objetivos mercadológicos que normalmente acompanham tais casos se torna imprescindível. 8. Referências bibliográficas ARQUITETURA DA INFORMAÇÃO Curso On-line - Edyd B. Junges e Frederick van Amstel, Faber Ludens. 9. Ferramentas Mapas mentais - Xmind - http://www.xmind.net/ Wireframe - Pencil Project - http://pencil.evolus.vn/en-us/home.aspx Diagramas - Cacoo - https://cacoo.com/ 10