Relatório de redesign de site

Transcrição

1 Relatório de redesign de site Desenvolvedores: Bruno Sampaio Lívia Gabos e Sabrina Dias Site: Apae Brasil - Endereço de acompanhamento do projeto: corais.org/apaebrasil Cliente O projeto foi desenvolvido para a Federação Nacion das Apaes, também conhecida como Fenapaes. Ela é uma instituição sem fins lucrativos reconhecida como de utilidade pública feder e certificada como beneficente de assistência soci; de caráter cultur, assistenci e educacion. Ela possui a missão institucion de promover e articular ações de defesa dos direitos das pessoas com deficiência e representar o movimento das Apaes perante os organismos nacionais e internacionais, para a melhoria da quidade dos serviços prestados pelas Apaes, na perspectiva da inclusão soci de seus usuários. Problemas e necessidades A Fenapaes possui um site com muito conteúdo informativo que precisava de uma nova maneira, mais clara e organizada, para apresentá-lo ao seu público. O site não está estruturado corretamente para trabhar com todas as informações existentes, ficando difícil também a adição de novas informações. Nestes casos, a probabilidade do visitante do site se sentir perdido ao procurar guma informação, por ela estar em caminhos não tão óbvios, faz com que ele desista de procurar e até não volte mais ao site. O site precisa ser renovado para facilitar o acesso das informações, notícias e novidades sobre o movimento das Apaes no Brasil, aumentando a satisfação do público e visibilidade do movimento, visto que com informações de quidade e precisas muito mais usuários do site entenderão o sentido do movimento, aderindo a causa. Internamente, a rede das Apaes também se fortecerá através de uma comunicação mais efetiva na rede. Proposta A idéia é fazer com que o site seja atuizado para um novo layout, mais organizado, elaborado e fácil de encontrar as informações. A acessibilidade é um ponto muito importante para o site, visto que para usuários leigos no assunto fica bastante difícil a elaboração do site e construção. Pensando nisso, não somente o layout e organização terão que ser revistos, mas também todos os textos existentes, para que a redação seja a mais objetiva e clara possível, facilitando a e compreensão de todos os possíveis usuários do site e não somente aos já integrantes da rede Apae. Estratégia de desenvolvimento das atividades Para desenvolver a reformulação do site da Apae Brasil o grupo usou a plataforma de design livre, corais, para publicação e convergência dos conteúdos discutidos. Além disso, outros recursos de interação e comunicação foram utilizados, tais como skype para reuniões em tempo re, gtk para bate-papo em dúvidas pontuais e google docs para compartilhamento de arquivos. Após nossa primeira reunião, definimos as tarefas de trabho, listadas na plataforma do projeto. Dentre as tarefas listadas a única que não conseguiu ser reizada com êxito foi a referente a análise estatística. Mesmo entrando em contato, via telefone, com a Apae Brasil, o responsável pelo site nos solicitou o encaminhando do pedido por e não nos retornou. Glossário Card-Sorting: É uma técnica usada para descobrir como o usuário classifica determinada informação em sua mente.

2 Mapa Conceitu: ferramenta administrativa, para organizar e representar o conhecimento, de forma ger, sendo basicamente um aperfeiçoamento do conhecido organograma. Sitegrama: Organograma que mostra a hierarquia de navegação de um website. Cada caixa é uma página e as ligações são links. Wireframe: É um esboço estrutur de uma interface, demonstrando os elementos que serão apresentados visumente na tela e seu peso relativo. Reformulação do site Apae Brasil Análise de conteúdo Começamos a pesquisar guns site relacionados a Apae, que normmente são das instituições ligadas a Apae Brasil, que podem ser acompanhadas pelo blog do projeto ( Anisamos guns itens desses sites e começamos a trabhar com o conteúdo do site. O inventário do conteúdo do site, o mapa do site (Figura 1) e o mapa conceitu (Figura 2) foram feitos com base no site antigo, para termos as informações necessárias para serem trabhadas. O inventário (pode ser visto no link do projeto nos ajudou a quantificar as informações existentes no site e onde poderiam ser encontradas, de modo bem dethado. O sitegrama possibilitou a visuização da disposição dessas informações. Já o mapa conceitu, foi possível entender quais os principais tópicos que o site aborda, mas não exatamente como eles estão dispostos. Comparando as informações entre o sitegrama e o mapa conceitu podemos perceber que as informações com assuntos semelhantes não estão agrupadas uns com os outros. Além disso, foi possível encontrar: a) Informações que não representavam o mesmo conteúdo, mas que possuíam o mesmo nome; b) Informações que pertencem ao mesmo contexto, mas que estavam separadas em diferentes categorias do site; c) Nomes de links e conteúdos que não eram informativos ou explicativos o suficiente, fazendo o usuário entrar para descobrir se o conteúdo é ou não o que procura. Situações como essas fazem com que o visitante fique perdido ao tentar encontrar as informações, podendo até desistir de fazê-lo, fazendo com que a rejeição do site como um todo aumente. Pensando nisso foi feita toda a análise desse conteúdo e as maneiras para melhorar a distribuição desse conteúdo e para que ele ficasse de fácil locização. Métodos de análise Para a verificação do melhor método de agrupamento das informações foi reizado um card-sorting para essa definição. Para isso houve uma preparação para definirmos as informações que seriam usadas e sua possível disposição, facilitando a associação das idéias do participante da pesquisa. Definimos que ele seria disposto de maneira híbrida, foram dadas gumas categorias pré estabelecidas nessa preparação e houve a possibilidade do participante adicionar mais categorias, se quisesse. Deste modo, foi possível perceber se os nomes dados eram suficientemente claros. Por se tratar de um conteúdo de assuntos muito específicos, mas sem um nome que demonstrasse isso, na maioria das vezes, foi necessário a análise, caso a caso de cada uma dessas partes do site, tanto para o cardsorting quanto para a estruturação posterior do site. Com os resultados do card-sorting fizemos a análise do seu conteúdo (resultados disponíveis em websort.net/r/614867/a3997e07bdc2/), comparando também com o que havíamos estabelecidos anteriormente para a preparação do conteúdo.

3 Figura 1: Sitegrama origin Figura 2: Mapa conceitu do site da apae Após isso, fizemos um novo sitegrama (Figura 3) com o resultado fin dessa análise. Esse sitegrama nos ajudou na formatação de fluxogramas comparativos de como as pessoas faziam para procurar uma determinada informação antes e como ficou agora, sientando as melhorias reizadas na distribuição do conteúdo (Figura 4).

4 Figura 3: Novo sitegrama, baseado no resultado do card-sorting Figura 4: Imagem de fluxograma Comparando este sitegrama com o mapa conceitu, podemos perceber uma melhor conexão entre as informações, fazendo com a associação de idéias seja mais simples, facilitando a locização dos conteúdos. No fin, os wireframes (Figura 5, 6 e 7) reizados foram com base nos documentos criados para o site novo e as conclusões das observações feitas sobre o site antigo. Eles servem para demonstrar mais visumente a disposição das informações das páginas, sem exatamente existir um trabho de cores e imagens sobre ele.

5 Figura 5: Wireframe da página princip Figura 6: Wireframe de página interna - Leis, decretos e resoluções

6 Figura 7: Wireframe das página interna de conteúdo Desenvolvimento Na nova estruturação, foi criada uma barra de acessibilidade no topo do site (primeiro ponto de acesso do usuário) que também contém links para o webmail e a intranet da APAE. A parte superior do site foi otimizada para apresentar mais opções para o usuário, dando também um maior destaque à marca da APAE e ao lema da mesma. O corpo do site continua dividido em 3 colunas na página inici e 2 colunas nas páginas internas na área do conteúdo. A coluna da esquerda aparece em todas as páginas, contendo a busca do site, o menu exibido de forma vertic, para melhor disposição doas opções que aumentaram de significativamente de 7 para 13 opções. Abaixo do menu existem chamadas de destaque, que levam o usuário as áreas de filiação na APAE e para acesso à parte de educação da APAE. As notícias e os vídeos foram colocados em posições semelhantes ao site atu, tanto pela sua importância quanto pelo fato de que é uma área com que o usuário já é familiarizado. A agenda teve sua posição e formato terados para facilitar a visuização das informações.foram adicionados espaços para a área de Eventos e concursos, como também Projetos e programas. Além disso, os parceiros e o debate virtu tiveram seu tamanho e forma de exibição terados para ganharem mais destaque. Nas páginas internas, foi pensado na utilização de recursos de javascript para facilitar a visuização do conteúdo. Na página de Leis, decretos, portarias e resoluções, por exemplo, é apresentado primeiramente apenas os títulos de cada conteúdo, ao clicar em um deles seu conteúdo é revelado. Sugestão para software gerenciador de conteúdo Nós sugerimos a utilização do gerenciador de conteúdo Joomla, pois é open source, seguro, possui equipes de desenvolvimento em todo o mundo e é capaz de estruturar o conteúdo conforme o planejado para este projeto. Ele também oferece soluções para as necessidades do site, tais como: newsletter, inserção de multimídia, gestão de usuários do site (administradores, escritores, etc.), facilita a indexação nos sites de busca, é de fácil atuização e organização do conteúdo e possui opções de acessibilidade. Caso existe guma atuização ou necessidade futura não incluida neste projeto, ela poderá ser aplicada de maneira tranquila, já que o Joomla possui inúmeros módulos e plugins.

7 ANEXOS Anexo 1: Briefing para re-design do site da Apae Brasil Site: A Apae é uma organização soci, cujo objetivo princip é promover a atenção integr à pessoa com deficiência, prioritariamente aquela com deficiência intelectu e múltipla. A FenApaes (Federação Nacion das Apaes) é uma organização soci sem fins lucrativos, que congrega como filiadas, atumente, mais de duas mil Apaes que compõem a Rede Apae. Sua missão é promover e articular ações de defesa dos direitos das pessoas com deficiência e representar o movimento perante os organismos nacionais e internacionais, para a melhoria da quidade dos serviços prestados pelas Apaes, na perspectiva da inclusão soci de seus usuários. Objetivos A Apae possui muito conteúdo informativo e precisa que ele seja apresentado de maneira mais clara e organizada para seu público. Objetivos específicos do projeto Princip - Divulgar as ações da ONG Atrair mais parceiros e voluntários para a ONG Estruturar todo o conteúdo de forma mais clara para o usuário Melhorar o design gráfico, deixando o site mais propício à Tornar o site mais acessível Criar áreas específicas para cada tipo de público, com informações específicas (ex. área para iniciantes que precisam de informações, área para pessoas que possuam ligação com a ONG, área para voluntários. ) Público vo Pais, responsáveis ou cuidadores de pessoas com deficiências Funcionários e envolvidos com a Apae, inclusive os envolvidos nas regionais específicas. Pessoas com deficiência, atendidos ou que pretendem ter atendimento pela Apae. Voluntários e parceiros. Métricas de sucesso Aumento do número de parceiros e voluntários da ONG Redução do número de contatos de pessoas com dúvidas gerais cuja resposta se encontra no site Maior efetividade no encaminhamento de dúvidas e informações para as áreas específicas relacionadas: voluntários, parceiros, regionais para atendimento, etc. Aumento de visitas no site Aumento de pessoas inscritas para receber notificações, atuizações; Medidas a serem tomadas Revisar os links e as categorias Revisar diagramação do site Recriar todo o design gráfico do site Inserir e aviar o SEO Aviar e reestruturar os textos do site Criar interações com os visitantes como rede sociais Criar pesquisa de conteúdo

8 Estratégias do projeto Todo a redação do site deve ser revisado para que os textos fiquem mais enxutos e claros para o visitante. Existem textos longos e nem sempre o usuário consegue a informação que precisa. A taxonomia e disposição de gumas informações do site deve ser aviada e refeita, para facilitar a encontrabilidade de informações no site. Como exemplo de outros site, é interessante que o conteúdo chame a atenção do visitante para que ele se sinta estimulado a interagir com as instituições próximas a ele e que ele encontre informações importantes sobre assuntos relacionados. O design do site deve ser simples, chamando a atenção para áreas onde o visitante pode conseguir informações sobre suas afiliadas e seus trabhos. Uma parte importante é trabhar com o máximo de acessibilidade possível, em se tratando dos textos, layout e desenvolvimento do site. Pela área relacionada o site deve ter como objetivo princip ser um exemplo de acessibilidade para ququer pessoa que queira ler seu conteúdo. Planejamento das atividades do projeto Navegar pelo site da Apae Brasil e similares Reizar o inventário do conteúdo do site e sitegrama Reizar uma prototipação das novas telas (wireframe, arquitetura de informação, redação, etc) Análise estatística do site Teste e refinamento dos protótipos Aprovação do layout Codificação Seções para revisar no site Principais A federação As Federações estaduais Transparência institucion Políticas estratégicas Procuradoria jurídica Comunicação institucion UNIAPE Subcategorias com notícias e espaços abertos para contatos.

9 Anexo 2: Inventário de conteúdo Arquivo com o inventário de conteúdo do site Apae Brasil, formato xls. Hierarquia Nome do Link Título da página URL Link quebrado? Descritivo Categoria Site ou página? 1 Área 1 (ger) Federação Nacion das Apaes - Inclusão da pessoa com deficiência 1.1 A Federação Quem Somos não página inici da APAE Histórico Rede Apae e sua história não Página com a história da APAE Área de atuação Área de atuação não Áreas em que a ong atua Missão Missão não A missão da ong Estrutura Organizacion Diretoria Diretoria não Os diretores da ong Conselho de administração Conselho de administração não Conselho administrativo da ong Conselho consultivo Conselho consultivo não Conselho concultivo da ong Conselho fisc Conselho fisc não Conselho fisc da ong Autodefensoria Autodefensoria não Autodefensoria Equipe técnica Fenapaes Equipe técnica não Equipe técnica Fenapaes Organograma Organograma não Organograma Organizacion Articulação institucion Articulação institucion não Articulação da instituição Pesquisa - Marca APAE Pesquisa não Apresenta o resultado de uma pesquisa sobre a marca da ONG Sa de situação Sa de situação não Dados e informações sobre a rede APAE Convenção - Corde A Federação não Informações sobre a federação 1.2 Federações estaduais 1.3 Transparência Institucion Federações estaduais não Mapa com informações sobre todas as APAE do país

10 1.3.1 Planejamento estratégico Informações Financeiras Ano 2006 Informações financeiras Ano 2007 Informações financeiras Ano 2008 Informações financeiras Ano 2009 Informações financeiras Ano 2010 Informações financeiras Ano 2011 Informações financeiras Licitações Pregoeiros Rede APAE APAE em rede - Prestação de contas Automonitoramento FENAPAES 1.4 Políticas estratégicas Acompanhamento e Monitoramento de Ações Planejamento estratégico não Arquivos do planejamento para download não Arquivos das informações financeiras para download não Arquivos das informações financeiras para download não Arquivos das informações financeiras para download não Arquivos das informações financeiras para download não Arquivos das informações financeiras para download não Arquivos das informações financeiras para download Pregoeiros Rede APAE não Informações sobre os pregoeiros da APAE Apae em rede não Arquivo com informações sobre a situação ficanceira para download Automonitoramento FENAPAES Acompanhamento e Monitoramento de Ações não Arquivo de monitoramento das ações da APAE para download não vídeo e texto sobre as ações da Apae Sa de soluções Sa de soluções não Explicativo sobre as sas de soluções Sustentabilidade Sustentabilidade não Explicativo sobre as Instituicion ações de sustentabilidade da Apae Apae em rede Apae em rede não informações sobre o projeto Apae em rede Uniapae Uniapae não Informações sobre a universidade Autodefensoria Autodefensoria não informações sobre o programa

11 1.4.7 Educação inclusiva Experiências da Rede Apae na inclusão escolar Educação Física Coordenadores estaduais Regulamentos Regulamentos de modidades não Explicativo sobre a educação na Apae Coordenadores estaduais não informações sobre os coordenadores estaduais não Informações sobre regulamentos para download Conteúdo técnico Conteúdo técnico não Artigos para download Documentos Documentos gerenciais não documentos gerenciais gerenciais para download 1.5 Procuradoria Jurídica Filiação Filiação não Modelos de documentos para download Estatutos Estatuto da federação nacion da Apaes Estatuto da federação das Apaes por estado estatutos não Arquivos dos estatutos para download estatutos não Arquivos dos estatutos para download Estatuto das Apaes estatutos não Arquivos dos estatutos para download Regimento interno não texto e arquivo para download do regimento Utilidade pública Utilidade pública feder - não Instruções para feder - Concessão requerer a Concessão CONCESSÃO de Utilidade Pública Feder UPF Utilidade pública feder - Manutenção leis, decretos, portarias e resoluções Concessão e renovação do Cebas Manutenção de utilidade pública feder leis, decretos, portarias e resoluções Concessão e renovação do Cebas não Instruções e arquivos para download não arquivos para download não Informações sobre o cebas Manu de eleições Manu de eleições não arquivos para download sobre as eleições 1.6 Comunicação Institucion Semana Nacion Semana Nacion da Pessoa não Informações sobre a da Pessoa com com Deficiência Intelectu e semana Deficiência Múltipla 2011 Intelectu e

12 Múltipla Autodefensores site Publicações Autodefensores site não link externo site site Boletim eletrônico Boletim eletrônico não boletins eletrônicos enviados pela apae Revista Mensagem Revista Mensagem da Apae não download das revistas da Apae Projeto Sinergia Projeto Sinergia não Informações e arquivos para download sobre o projeto Campanhas Apae noel Apae Noel não Informações sobre a campanha Cartões de Nat Cartões de Nat não informações e arquivos para download Formulários - Formulários de campanhas não Formulários para campanha download Cartão Bradesco Cartão Bradesco Apae não Informações sobre o Apae cartão Apae energia Apae energia não Informações sobre a campanha Eventos Olimpíada Nacion das Apaes Olimpíada Nacion das Apaes Congresso XXIV Congresso Nacion Nacion das das Apaes Apaes Festiv Nacion Festiv Nacion Nossa Arte Nossa arte Conteúdos Concursos Concurso Nacion de Cartões de Nat Concurso Naicon de Cartazes Download da marca APAE 1.7 Uniapae Concurso Cartões de Nat não informaçoes sobre as olimpíadas não Informações sobre o congresso nacion não Informações sobre o festiv nacion nossa arte não Informações sobre o concurso Concurso Naicon de Cartazes não Informações sobre o concurso Notícias não arquivo da marca para download e informações EAD - Uniapae EAD - Uniapae não link externo site site UNIAPAE- UNIAPAE- Fenapae não link externo site site Fenapae Uniapae MG Uniapae MG não link externo site site 1.8 Cursos da Uniapae Programas de Educação não link externo site site 1.9 Notícias do movimento SAIBA O QUE ESTÁ ACONTECENDO NO não Notícias das apaes

13 MOVIMENTO APAEANO 1.10 Sa de Soluções Sa de soluções não contato com a federação Contato 1.11 Avie nosso Avie o atendimento de não Aviação sobre a sa Contato atendimento nossa equipe de soluções 1.12 PDDE - Programa PDDE não Dinheiro Direto na Escola PDDE 2010 PDDE não PDDE 2011 PDDE não 1.13 Programas Programas não Projeto Sinergia Projeto Sinergia não Informações e arquivos para download sobre o projeto Projeto Águia Projeto Águia não Disponibilização de materias para o programa Apae Educadora Apae Educadora não Projeto e materiais para escolas 1.14 Debate virtu Debate virtu: Parecer nº 13/2009 da Câmara de Educação Básica/ Conselho Nacion de Educação não Debate virtu 1.15 Chat Chat não Chat Contato 1.16 Links Links não Links 1.17 Parceiros e Colaboradores Parceiros e Colaboradores não Links de parceiros e colaboradores 1.18 Webmail Apae Brasil Bem-vindo ao Webmail hp&nosidebar=1&horde_logout_token=p99bzollqsloa3jqznão Comunicaç ão OEGBi xs&app=imp 1.19 Sisapae Home não Sistema da apae Comunicaç ão 1.20 Download da marca APAE e Bandeiras 1.21 Pesquisas Pesquisas do Movimento Apaeano Pesquisa - Pesquisa Conhecendo a Conhecendo a Família da APAE Família da APAE Pesquisa - Notícias Satisfação das Filiadas 2011 Notícias não Download dos logos não não Pesquisa sobre as Comunicaç apaes ão MOS+OUVILOS+RESPONDA+NOSSA+PESQUISA+DE+SATISFACAO PARA+CONSTRUIRMOS+JUNTOS+A+EXCELENCIA+DE+NOSSOS+ATEN DIMENTOS+PARTICIPE+E+RESPONDA+AGORA.html não Pesquisa de satisfação Comunicaç ão

14 Acesso aos colaboradores Ações Apae nos estados Area Jurídica Área restrita Biblioteca virtu Campanhas Ensino e Universidades Entre em contato Estrutura organizacion Eventos e concursos FENAPAES Filiação e manutenção Financeiro Institucion Não sei Notícias Outros Ouvidoria Participe Pesquisas Prestação de contas Projetos Projetos e programas Publicações Transparencia institucion Anexo 3: Resultado do card- sorting This table shows the % of times each item was placed in each group????? Transparência financeira Prestação de contas Automonitoramento FENAPAES Automonitoramento FENAPAES Estatutos Estaduais Coordenadores estaduais Federações estaduais Uniapae MG Licitações Convenção - Corde Documentos gerenciais Situação da Rede Apae Filiação Concessão e renovação do Cebas Intranet da rede Apae Regimento interno Leis, decretos, portarias e resoluções Regulamentos Manu de eleições Utilidade pública feder Articulação institucion

15 Estatuto das Apaes Planejamento estratégico Área de atuação Histórico Missão Conteúdo técnico Conselho fisc Diretoria Conselho de administração Organograma Conselho consultivo Equipe técnica fenapaes Debate virtu Sa de Soluções Avie nosso atendimento Chat Boletim eletrônico Notícias do movimento Revista Mensagem da Apae Pesquisa sobre Marca APAE Pesquisas Downloads Projeto Sinergia Projeto Sinergia Programa Dinheiro Direto na Escola Projeto Aguia Cartões de Nat Cartão Bradesco Apae Cursos da Uniapae Alunos defensores Educação inclusiva Apae Educadora

16 EAD - Uniapae UNIAPAE - Universidade da Rede Apae Acompanhamento e Monitoramento de Ações Apae noel Congresso Nacion das Apaes Semana Nacion da Pessoa com Deficiência Intelectu e Múltipla Olimpíada Nacion das Apaes Concurso Naicon de Cartazes Festiv Nacion Nossa arte Concurso Nacion de Cartões de Nat