REFORMULAÇÃO SITE ARCA BRASIL Equipe A³ Elton Sacramento Eveline Almeida Gabriela Yu 1
1. Introdução O site escolhido foi o ARCA Brasil (http://www.arcabrasil.org.br/), uma ONG que promove o bem-estar e o respeito aos direitos dos animais. Detalhe da home do site atual da ARCA BRASIL Como a maioria das ONGs, a equipe não tem muito tempo para se dedicar à criação de um site elaborado, portanto é visível que ele foi crescendo com o tempo e o conteúdo foi ficando desorganizado e a navegação confusa. Após reuniões definimos que seguiríamos as seguintes etapas na respectiva ordem: 1. Planejamento de informações 2. Levantamento de informações 3. Classificação de informações 4. Navegação 5. Visualização de informações Primeiramente decidimos analisar a organização do site atual para verificar o que poderia ser feito e fundamentar o briefing. Após isso criamos um mapa conceitual para definir a interaçao do usuário com os componentes e a estrutura do site. Depois listamos todo o conteúdo do site e criamos um inventario de conteúdo. Ao mesmo 2
tempo analisamos como se comportavam os usuários que acessam o site através de uma etnografia virtual, pelas redes sociais que a arca se encontra e por meio de uma pesquisa de satisfação. Após isso realizamos mais um estudo, utilizando o card-sorting para verificar como os usuários agrupariam o conteúdo. Depois desses estudos, começamos a classificar o conteúdo definindo a taxonomia que poderia ser utilizada, criando categorias e subcategorias. De posse dessa classificação fizemos um sitegrama para visualizar a organização das seções do site e sua possível navegação. Para demonstrar o fluxo dessa navegação criamos um fluxograma de uma das ações mais importantes da Arca. Por fim, criamos um wireframe para que mostrar como seria a visualização das informações. A seguir apresentamos com mais detalhes a execução dessas tarefas. 3
2. Planejamento de Informações 2.1. Briefing Após uma análise de todas as páginas do site começamos a fazer o Briefing. Sua elaboração foi importante para identificarmos inicialmente o que precisava ser corrigido e quais etapas seriam seguidas para esse fim. Identificamos que havia destaques em excesso e também muitos menus, o que tornava a navegação confusa. Percebemos que o mais interessante seria destacar as ações e projetos mais importantes ou com atuação mais recente. Também seria legal que a área de notícias fosse diferenciada da área dos projetos. Verificamos também que a busca não estava bem localizada e que ela remetia diretamente para o site do google, fazendo a pessoa sair do site da ARCA. 2.2. Mapa Conceitual Dentre as possíveis ferramentas de planejamento que tínhamos disponíveis, escolhemos o Mapa Conceitual. Este foi de extrema importância para identificarmos os principais elementos e funcionalidades e como os usuários interagiam com eles. Com o apoio desta ferramenta pudemos analisar quais itens precisavam de melhorias, quais poderiam ser realocados ou integrados a outros (menus), além de enxergarmos a ausência de outros (galeria de imagens) que poderiam ser de grande importância no site. Mapa Conceitual do Projeto O mapa conceitual encontra-se com tamanho original em arquivo anexo. 4
3. Levantamento de Informações 3.1. Inventário de Conteúdo O inventário de conteúdo foi o levantamento sistemático dos links, e classificação destes; pudemos observar como a ARCA trabalhou os links dentro do portal. Se por um lado é muito bom fazer link dentro do conteúdo textual, para que o usuário não tenha que recorrer só ao menu, por outro lado eles usaram este recurso exageradamente. O portal parece dobrar de tamanho (conteúdo) pela redundância. Existem links e banners demais espalhados pela home do portal sem critério, o que acaba distribuindo a atenção do usuário. Concluímos que é mais importante fazer com que o usuário encontre a informação que procura do que fazer parecer que o site tem muito conteúdo. Mais vale um site pequeno mas com conteúdo relevante do que um site grande, confuso e redundante. A planilha com o inventário encontra-se em arquivo anexo. 3.2. Etnografia Virtual Essa etapa foi importante para conhecermos o público da ARCA; as redes sociais observadas foram : Facebook (perfil e fanpage), Orkut e Twitter. As observações foram importantes para levantar informações tais como: a forma com que os usuários se relacionam com a ONG; qual seria sua participação; se interagem entre si; qual o tipo de linguagem utilizada; o perfil dos participantes; quais tópicos atraem mais o público, entre outros. Com um prazo maior, o próximo passo seria interagir mais nestas redes para obtermos respostas mais objetivas de acordo com o foco do projeto e conhecer mais a fundo o usuário. Contudo esta etapa nos auxiliou principalmente na definição de destaques e na linguagem a ser utilizada no conteúdo. Também nos auxiliou a definir termos para classificação e criação das taxonomias. O relatório sobre a Etnografia Virtual encontra-se em arquivo anexo. 3.3. Questionário Decidimos fazer um questionário com a intenção de realizar uma pesquisa de satisfação entre os usuários e identificar o que funcionava e o que precisaria mudar no site atual. 5
Tela com a interface da pesquisa de satisfação Por meio de perguntas sobre o layout, escolha de destaques, facilidade de navegação, linguagem utilizada, entre outras, pudemos conhecer a opinião dos usuários que se dispuseram a responder. Essa etapa nos auxiliou em etapas futuras do projeto como o sitegrama e o wireframe, e seu resultado pode muito bem ser utilizado como justificativa para as mudanças propostas. As telas com as perguntas, resultados e análise encontram-se em arquivo anexo. 6
4. Classificação de Informações 4.1. Card-sorting Apesar da análise da etnografia virtual nos indicar algumas palavras que facilitavam a definição dos termos da taxonomia, decidimos por realizar um card-sorting para um resultado mais específico e apurado. Deixamos os agrupamentos abertos, sem indicar nenhuma categoria pré-definida, pois queríamos saber se os vocábulos utilizados atualmente eram de fácil entendimento. Com o resultado verificamos que havia concordância quase nula entre os participantes. Apesar de sabermos que apenas dez participantes num card-sorting aberto resultaria em pouca concordância, não esperavamos esse resultado. Apesar de tudo, foi interessante ver como os participantes agruparam o conteúdo e os termos que utilizaram. Isso auxiliou bastante ao reconhecer o tipo de linguagem a ser utilizada para a taxonomia. As planilhas e o diagrama em formato original encontram-se em arquivo anexo. Diagrama com o resultado do card-sorting 4.2. Taxonomia Uma das etapas mais importantes do projeto, onde redefinimos a classificação e organização do conteúdo do site. 7
Primeiramente utilizamos o inventário de conteúdo e criamos um mapa mental de navegação pelo conteúdo para mostrar todas as associações entre as páginas. Mapa mental com as atuais associações entre seções e páginas Analisando o mapa percebemos a associação muitas vezes confusa e uma utilização exagerada e incorreta dos hiperlinks(na maioria das vezes em forma de múltiplos menus) e um número excessivo de seções com conteúdo duplicado. Mapa mental da nova organização dos menus e a taxonomia utilizada 8
Resolvemos reduzir a quantidade de seções e tornar o acesso ao conteúdo o mais objetivo possível. A fim de reduzir a duplicação de conteúdo, ao invés de ter os mesmos itens em vários menus, resolvemos mostrá-los somente na forma de conteúdo relacionado, através de tags (ou outro sistema de associação de conteúdo que dependerá do cms a ser utilizado). Assim os itens aparecerão no menu somente uma vez, mas estarão presentes em todo o site. Os mapas se encontram com tamanho original em arquivo anexo. 9
5. Navegação 5.1. Sitegrama Com a taxonomia definida, criamos o sitegrama com a organização das páginas do site. É interessante perceber que o site tem bem menos conteúdo do que parecia ter antes mas as informações estão mais fáceis de se encontrar. O sitegrama encontra-se com o tamanho original em arquivo anexo. Sitegrama proposto 5.2. Fluxograma de Navegação Com o sitegrama pronto, decidimos fazer um fluxograma para demonstrar como o usuário executaria uma tarefa na nova navegação proposta. A tarefa de navegação escolhida foi o cadastro de Profissionais ou Estudantes no Programa Veterinário Solidário. Esta serviu para desvincular elementos que estão em desuso, atualizando assim o processo de cadastro, que antes era feito através de pop-up e foi modificado para ser realizado na própria página. 10
11
6. Visualização de Informações 6.1. Wireframe Na construção do wireframe, foi proposta uma diminuição dos destaques, colocando os mais importantes num slideshow e os secundários num banner rotativo pequeno no final da página. O menu foi reduzido para somente um no topo da página, com sub-menus nas seções de conteúdo mais acessado. Foi incluído um espaço para explicar rapidamente o trabalho da ong, pois essa falta havia 12
sido citada em pesquisa com usuários ao acessarem o site pela primeira vez. Ganharam destaques diferenciados também as formas de ajuda à ong e as ações Adotar é tudo de bom e Veterinário Solidário. Essas são as áreas mais acessadas do site então é interessante destacá-las ao máximo. A seção de notícias ganhou um formato diferenciado, pois será uma área de atualização constante e não de conteúdo estático como as demais. A busca ganhou mais destaque ficando acima do menu e o link para a versão em inglês permaneceu no lugar por ser praticamente uma área padrão para versões em outras línguas. As redes sociais que antes ficavam em banners ganharam lugar de destaque perto do menu e ao lado da busca. 13