Redesign do Portal da Prefeitura de Barra Mansa by Design Unifoa

FUNDAÇÃO OSWALDO ARANHA CENTRO UNIVERSITÁRIO DE VOLTA REDONDA CURSO DE GRADUAÇÃO EM DESIGN TRABALHO DE CONCLUSÃO DE CURSO

MARIANA ALVES DA SILVA

REDESIGN DE INTERFACE PARA O PORTAL DA PREFEITURA DE BARRA MANSA

VOLTA REDONDA 2011

FUNDAÇÃO OSWALDO ARANHA CENTRO UNIVERSITÁRIO DE VOLTA REDONDA CURSO DE GRADUAÇÃO EM DESIGN TRABALHO DE CONCLUSÃO DE CURSO

MARIANA ALVES DA SILVA

REDESIGN DE INTERFACE PARA O PORTAL DA PREFEITURA DE BARRA MANSA

Trabalho de Conclusão de Curso apresentada ao Curso de Design do UniFOA como requisito à obtenção do título de bacharel em Design Gráfico

Aluno: Mariana Alves da Silva

Orientador: Prof. Esp. Darwin Mota

VOLTA REDONDA 2011 2

FOLHA DE APROVAÇÃO

Aluno:

Título do Trabalho de Conclusão de Curso:

Orientador:

Banca Examinadora:

_____________________________ Prof.

Agradeço a Deus, a minha família, amigos e professores pela ajuda e motivação.

RESUMO

Este projeto apresenta um estudo sobre Arquitetura da Informação e Ergonomia Informacional voltados para o desenvolvimento do Redesign da atual interface do Portal da Prefeitura de Barra Mansa.

Como o atual portal da Prefeitura de Barra Mansa não possui qualquer investimento voltado para usabilidade, viu-se a oportunidade de tratá-lo como objeto de estudo para a aplicação do levantamento de dados feito sobre Arquitetura da Informação, Ergonomia Informacional e testes de Usabilidade que se fazem tão necessários no atendimento da população que acessa a esses serviços por meio online.

Este projeto mostra também a importância e a realização da análise do conteúdo, testes de usabilidade e design de interação para a geração de um produto que atenda as necessidades dos usuários de maneira fácil e prazerosa.

Palavras-chave: Portal Web, Usabilidade, Arquitetura da Informação, Ergonomia Informacional, usuários

ABSTRACT

This project presents a study on Information Architecture and Ergonomics Informational focused on the development of the interface redesign of the current website of the Municipality of Barra Mansa.

As the current site of the Municipality of Barra Mansa has no investment towards usability, found himself the opportunity to treat it as an object of study for the application of the data collection done about Information Architecture, Informational Ergonomics and usability tests that required to do so in care of the population accessing these services through online.

This project also shows the importance and performance of content analysis, usability testing and interaction design for the generation of a product that meets the needs of users in an easy and enjoyable.

Keywords: Web Portal, Usability, Information Architecture, Informational Ergonomics, users

SUMÁRIO

1- INTRODUÇÃO............................................................................................................15 2- OBJETIVO...................................................................................................................16 2.1 Objetivos Específicos......................................................................................16 2.2 Objetivos Operacionais...................................................................................16 3- JUSTIFICATIVA..........................................................................................................17 4- METODOLOGIA..........................................................................................................19 5 - CRONOGRAMA.........................................................................................................21 6 – LEVANTAMENTOS DE DADOS...............................................................................22 6.1 Usabilidade.....................................................................................................22 6.1.2 Heurísticas de Usabilidade e outros princípios............................................23 6.1.3 Apoio às ações do usuário..........................................................................23 6.1.4 Design de Interação: Aspectos cognitivos...................................................24 6.1.5 Especificação: Delimitando o Projeto.........................................................26 6.1.6 As Estatísticas............................................................................................30 6.1.7 Sobre Testes de Usabilidade......................................................................30 6.2 Arquitetura da Informação e Ergonomia Informacional................................33 6.2.1 Arquitetura da Informação...........................................................................34 6.2.2 Ferramentas para Arquitetar e surpreender...............................................35 6.2.3 Design de Navegação.................................................................................37 6.2.4 Normas e boas práticas para o projeto.......................................................39 6.2.5 Ergonomia....................................................................................................41 6.2.6 Acessibilidade..............................................................................................42 7 – LEVANTAMENTO DE SIMILARES...........................................................................43 7.1 Governo do Estado de Minas Gerais.............................................................43 7.2 Prefeitura de Curitiba.....................................................................................46 7.3 Prefeitura de Florianópolis.............................................................................49 8 – O PORTAL DA PREFEITURA DE BARRA MANSA.................................................52 8.1 HISTÓRICO E METODOLOGIA DO PORTAL...............................................52 8.2 DADOS ESTATÍSTICOS...............................................................................54

8.2.1 Ranking de links acessados na home.........................................................54 8.2.2 Resolução de Tela.......................................................................................55 8.2.3 Navegadores................................................................................................56 9- ANÁLISES DE DADOS...............................................................................................58 9.1 Usabilidade.....................................................................................................59 9.2 Arquitetura da Informação e Ergonomia Informacional..................................64 9.3 Ergonomia.......................................................................................................69 10 - ANÁLISES DE SIMILARES......................................................................................71 10.1 Governo do Estado de Minas Gerais...........................................................71 10.2 Prefeitura de Curitiba...................................................................................77 10.3 Prefeitura de Florianópolis...........................................................................84 11 - SÍNTESE..................................................................................................................88 12 - GERAÇÃO DE ALTERNATIVA................................................................................91 13 - TESTES DE USABILIDADE...................................................................................104 14 - PARTIDO ADOTADO.............................................................................................110 14.1 Especificações Técnicas............................................................................112 14.2 Forma e Função.......................................................................................116 15 - CONCLUSÃO.........................................................................................................123 16 – BIBLIOGRAFIA......................................................................................................125

LISTA DE FIGURAS Figura 1 – Modelo humano de processamento da informação.......................................25 Figura 2 – O ciclo de desenvolvimento centrado no uso.................................................26 Figura 3 – Fichas de personas de um projeto.................................................................27 Figura 4 – Exemplo de uma escala de diferencial semântico.........................................29 Figura 5 – Processo utilizado nos testes da Globo.com.................................................31 Figura 6 – Exemplo de planta de laboratório para testes de usabilidade.......................32 Figura 7 – O esquema geral de um laboratório para testes de usabilidade, com a sala de teste e a sala de controle e observação. ................................................33 Figura 8 – Exemplo de configuração de teste de usabilidade realizado no local de trabalho do usuário. ......................................................................33 Figura 9 – Modelo conceitual da arquitetura da informação...........................................35 Figura 10 – Questionário emocional utilizado no início do projeto. Os usuários marcavam com um ponto sua impressão com relação à homepage da BBC.................36 Figura 11 – Modelo de menus em aba da Amazon.com.................................................38 Figura 12 – Três categorias primarias de navegação (por Fiorito e Dalton)..................39 Figura 13 – O modelo dos 3C da arquitetura da informação. ........................................40

Figura 14 – Interface completa da home do Portal do Governo de Minas Gerais. ........44 Figura 15 – Interface do Portal da Prefeitura de Curitiba. ..............................................47 Figura 16 – Interface do portal da Prefeitura de Florianópolis. ......................................50 Figura 17 – Layout atual do Portal da Prefeitura de Barra Mansa. ................................53 Figura 18 – Resoluções de telas que acessaram o Portal da prefeitura de Barra Mansa. .........................................................................................................................................55 Figura 19 – Dados sobre os navegadores mais utilizados no acesso ao portal.............56 Figura 20 – Lista das palavras-chave mais procuradas..................................................57 Figura 21 – O modelo do processo humano...................................................................63 Figura 22 – Exemplo de organização de interface utilizada para construção de websites .........................................................................................................................................68 Figura 23 – Modelos de caixa de busca aberta...............................................................68 Figura 24 – Topo ou cabeçalho do Portal do Governo de Minas Gerais........................71 Figura 25 – Área dedicada a links de serviços e informações........................................72 Figura 26 – Área de notícias...........................................................................................73 Figura 27 – Área dedicada a apresentação da região....................................................74 Figura 28 – Área para banners e propaganda................................................................75

Figura 29 – Redes sociais e Enquete.............................................................................76 Figura 30 – Rodapé do Portal do Governo de Minas Gerais..........................................76 Figura 31 – Topo Portal Prefeitura de Curitiba...............................................................77 Figura 32 – Área de notícias e categorias de usuários..................................................78 Figura 33 – Área dedicada ao acesso rápido.................................................................78 Figura 34 – Redes Sociais..............................................................................................79 Figura 35 – Seção do portal que exibe notícias e conteúdo multimídia..........................81 Figura 36 – Boletins de ocorrência e banner. .................................................................82 Figura 37 – Notícias e banners.......................................................................................83 Figura 38 – Rodapé do portal da Prefeitura de Curitiba. ................................................84 Figura 39 – Topo do portal da Prefeitura de Florianópolis. ............................................84 Figura 40 – Seção dedicada a notícias no portal............................................................85 Figura 41 – Lateral do portal da Prefeitura de Florianópolis...........................................86 Figura 42 – Rodapé do portal da Prefeitura de Florianópolis..........................................87

Figura 43 - Uma das imagens geradas pelo Google Analytics ......................................91

Figura 44 – Wirefram1 de baixa fidelidade......................................................................93

Figura 45 - Wireframe 2 de baixa fidelidade....................................................................95 Figura 46 – Wireframe 3 de baixa fidelidade...................................................................97

Figura 47 - Primeiro Wireframe de alta fidelidade...........................................................99 Figura 48 – Wireframe 5................................................................................................102

Figura 49 - Recortes de imagem de alguns dos testes filmados...................................104 Figura 50 – Formulário de Diferencial Semântico.........................................................106 Figura 51 – Layout final proposto ao projeto.................................................................110 Figura 52 – Geração de alternativa do layout final proposto ao projeto........................111

Figura 53 - Aplicativo Kuler exibindo as cores complementares ao laranja..................113 Figura 55 – Grid adotado ao projeto..............................................................................114

Figura 56 - Plug-in GuideGuide www.cameronmcefee.com/guideguide.......................115 Figura 57 – Topo ou Header do layout final..................................................................117

Figura 58 - Funcionamento do submenu dos links de usuários específicos.................118 Figura 59 – Espaço Cidadão e Barra de Mensagens....................................................118

Figura 60 - Outras áreas específicas a usuários...........................................................120

Figura 61 – Espaço para informar o que acontece na cidade.......................................120

Figura 62 - Informações gerais......................................................................................121

Figura 63 - Rodapé ou footer apresentando meios de comunicação diretos com a Prefeitura.......................................................................................................................122

LISTA DE TABELAS Tabela 1 – Personas criadas tomando-se como base o público-alvo da BBC................28 Tabela 2 – Lista dos links mais acessados por ordem decrescente...............................54 Tabela 3 – Resumos das pesquisas sobre padrão de posicionamento de elementos de interface...........................................................................................................................66 Tabela 4 – Posicionamento de elementos na interface...................................................89 Tabela 5 – Dados do usuário voluntário Richard..........................................................107 Tabela 6 – Dados do usuário voluntário Eric.................................................................107 Tabela 7 – Dados da usuária voluntária Ariana............................................................108 Tabela 8 – Dados do usuário voluntário Abner.............................................................108 Tabela 9 – Dados do usuário voluntário Jorge..............................................................109

1- INTRODUÇÃO

O presente trabalho de conclusão de curso apresenta um estudo de caso sobre a aplicação da arquitetura da informação e ergonomia informacional no processo de redesign da página principal do Portal da Prefeitura de Barra Mansa.

Um dos fatores fundamentais para o desenvolvimento de projetos web de sucesso é a usabilidade. Ela nos dá a garantia de que a interface atende plenamente os seus usuários. Ao longo deste projeto será mostrada sua importância no processo de criação e redesign de interfaces gráficas humano-computador.

Atualmente o projeto do site da Prefeitura de Barra Mansa não inclui em seu processo qualquer estudo ou pesquisa voltada para usabilidade no site, sendo esta uma das motivações para que ele fosse escolhido como objeto de estudo.

2- OBJETIVO

Análise ergonômica informacional do website da Prefeitura de Barra Mansa, propondo uma nova interface gráfica como produto da análise.

2.1 Objetivos Específicos

Um estudo de caso sobre arquitetura da informação e ergonomia com a possibilidade de aplicação de testes de usabilidade para produção de layouts web para portais.

2.2 Objetivos Operacionais

- Levantamento de dados sobre Usabilidade, Arquitetura da Informação e Ergonomia Informacional. - Fichamento de textos de livros que abordam as palavras-chave citadas acima; - Levantamento de dados de projetos semelhantes; - Levantamento de dados do Portal da Prefeitura de Barra Mansa; - Construção de um protótipo para possível aplicação de testes de usabilidade; - Proposta de layout de uma interface para o portal e apresentação do documento que contém todo o relatório do processo de desenvolvimento do projeto;

3- JUSTIFICATIVA

Além de facilitar o acesso à informação, a internet deve obedecer a padrões que tornam mais confortável esta tarefa para o cidadão. O principal valor da Web é o social. Mais do que tecnológico, este é um ambiente de comunicação humana, de transações comerciais, de oportunidades para compartilhar conhecimentos e, para ser um ambiente universal, deve estar disponível para todas as pessoas, [...]. (W3C, 2010, p.9)

Atualmente no mercado, muitos empreendimentos que desenvolvem websites não tomam conhecimento do impacto positivo causado pela aplicação destes padrões em seus projetos. Em alguns casos, estas empresas preferem ignorar este tipo de etapa, alegando pouco tempo para execução do projeto. Infelizmente frases como “Pesquisas?! Nós não temos tempo nem dinheiro para isso!”. (AGNER, 2006, p. 95) são ouvidas freqüentemente em organizações antigas.

O autor Luiz Agner cita: De acordo com os gurus Lois Rosenfeld e Peter Morville, o desenho (ou redesenho) de sites complexos deve ser precedido de pesquisas para gerar um sólido planejamento estratégico de arquitetura da informação. Com as pesquisas, visaremos a conhecer os objetivos do negócio, dos usuários, assim como a ecologia informacional da organização. (AGNER, 2006, p.95)

Realizar testes de usabilidade, aplicar Ergonomia Informacional e Arquitetura da Informação oferece vantagens como podemos observar com seguinte trecho: O envolvimento de usuários desde o início do projeto também é um ponto importante, que fez com que os redesenhos acontecessem durante o processo e não após o lançamento. Baias e Mayer, autores do livro “Cost Justifying Usability”, de 1994, estimam que esse método gere uma economia de 20% no orçamento. É mais fácil consertar na fase projetual do que depois de tudo pronto. (MEMÓRIA, 2006, p.13)

Com base nas informações citadas, uma análise sobre o website da Prefeitura de Barra Mansa se faz necessária, visto que as adequações vão de encontro com as necessidades instauradas pelo Governo Federal por meio da lei 5.296 que indica que sites governamentais devem ser acessíveis a qualquer cidadão. Além de propor, para a

comunidade de Barra Mansa, uma melhor experiência de navegação no portal, facilitando a busca por informações e execução de serviços disponíveis no mesmo.

Outro importante motivo que nos leva a realizar a análise ergonômica informacional do site da Prefeitura de Barra Mansa é a facilidade no acesso aos dados estatísticos do público que o utiliza, metodologia adotada para a construção do site e o suporte para dúvidas oferecidas pelos desenvolvedores.

4- METODOLOGIA

Para atingir os objetivos deste projeto, serão feitos estudos de caso e pesquisas bibliográficas sobre Usabilidade, Arquitetura da Informação e Ergonomia Informacional com foco em portais governamentais.

Levantamento de dados sobre Usabilidade, Arquitetura da Informação e Ergonomia Informacional em portais governamentais

O desenvolvimento do projeto conta com uma pesquisa bibliográfica inicialmente feita em 3 livros: “Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações” de Walter Cybis (2007), “Ergodesign e Arquitetura da Informação: Trabalhando com o usuário” de Luiz Agner (2006) e “Design para a Internet: Projetando a experiência perfeita” de Felipe Memória (2006). Eles darão embasamento teórico para a avaliação da interface do portal da Prefeitura de Barra Mansa atualmente e irão auxiliar na etapa do redesign, que inclui heurísticas de usabilidade, arquitetura da informação e aplicação da ergonomia informacional.

Conforme cita Agner: Deve-se descobrir o que o usuário pensa, quer e como age, empregando técnicas de pesquisa como grupos de foco, entrevistas e testes de usabilidade, nos diversos pontos do processo de design (AGNER, 2006, p.128).

A usabilidade é o carro-chefe do projeto, é sobre seus princípios que se tornam claras as necessidades de mudança para atender de forma eficaz os usuários.

Fichamento de textos de livros que abordam as palavras-chave Usabilidade, Arquitetura da Informação e Ergonomia

Realizar o fichamento de textos dos livros que abordam as palavras-chave facilitará, por exemplo, a apresentação das citações que defendem a importância do estudo. 19

Levantamento de dados de projetos semelhantes

O levantamento de dados de projetos semelhantes ao objeto de estudo em questão é importante para que erros sejam evitados e a análise dos acertos possibilite evolução do projeto em desenvolvimento.

Levantamento de dados do Portal da Prefeitura de Barra Mansa

Deve-se levantar o histórico do Portal da Prefeitura de Barra Mansa, saber como foi realizado o projeto, como funciona, colher relatos de usuários diretamente ligados a ele, quais são as estatísticas do site atualmente e analisar estes dados para que na proposta, sejam alcançados todos os objetivos, garantindo qualidade e satisfação no uso da interface.

Geração de alternativa de um modelo para possível aplicação de testes de usabilidade

As avaliações baseadas em princípios de usabilidade são de grande importância para o redesign de interface gráfica humano-computador, pois mostram as reais necessidades do usuário, é uma fase que agrega muito ao resultado final. Existe a possibilidade de serem realizados testes de usabilidade para este projeto mas esta etapa não será realizada nesta primeira fase.

Proposta de layout de uma interface para o portal e apresentação do documento que contém todo o relatório do processo de desenvolvimento do projeto

Sendo este projeto dividido em duas partes, nesta primeira, será apresentado somente o wireframe que mostra a proposta e a aplicação de todo o conhecimento adquirido durante o levantamento e análise de dados colhidos. Na segunda etapa, será apresentado o layout final como resultado do redesign.

5 - CRONOGRAMA

Fev Mar Abr Mai Jun Jul Ago Set Out Nov Levantamento de dados Fichamento de textos Anรกlise de Similares Histรณrico do Portal de BM Modelo Anรกlise dos dados colhidos Redesenho da Interface Interface Final

6 – LEVANTAMENTOS DE DADOS

O levantamento de dados mostrará a importância dos termos Usabilidade, Arquitetura da Informação e Ergonomia em projetos de redesign de interfaces gráficas.

6.1 Usabilidade

Um dos fatores fundamentais para o desenvolvimento de projetos de sucesso é a usabilidade.

Ela nos da a garantia de que a interface atende plenamente seus

usuários. A norma ISO 9241 define usabilidade como a capacidade que um sistema interativo oferece a seu usuário, em determinado contexto de operação, para a realização de tarefas de maneira eficaz, eficiente e agradável. Outra definição do temo de forma objetiva: “A usabilidade é a qualidade que caracteriza o uso dos programas e aplicações.” (CYBIS, 2007, p.15). Dizer que uma interface oferece usabilidade significa dizer que seu usuário consegue alcançar seus objetivos de maneira fácil e prazerosa, logo, fazem parte dos objetivos esperados para a interface final deste projeto.

Não se pode falar de usabilidade sem falar sobre os usuários. Usuário é plural, conhecer o maior número de personalidades orienta qual a melhor maneira e forma de se disponibilizar a informação, atendendo desde o usuário experiente ao iniciante para o uso da interface. “Erro comum é supor que os usuários são iguais. E iguais ao próprio desenvolvedor. Técnicas de pesquisa e testes de usabilidade ajudam a descobrir o que o usuário pensa, quer e como age.” (AGNER, 2006, p.127). Em seu livro, Agner (2006) cita o

autor Gribbons, que defende 5 categorias básicas de usuários: Corporativo,

Analfabetos funcionais, Internacionais, Idosos e Jovens.

Sendo o projeto voltado para interface gráfica de portais governamentais, é preciso ressaltar que um portal governamental deve ter a preocupação de inserir em seu projeto um espaço para pesquisas com base em usabilidade, pois exerce influência na qualidade do atendimento a população que necessita dos serviços online, conforme o autor Luiz Agner (2006) : “O „governo eletrônico‟ (E-gov) objetiva fornecer

informações, serviços e produtos através de meio eletrônico, a partir de órgão públicos, a qualquer momento, local e a qualquer cidadão.”(AGNER, 2006, p.165).

O processo de Arquitetura da Informação e a avaliação de Ergonomia Informacional são fatores determinantes para que o projeto possua usabilidade conforme cita Luiz Agner (2006): O ergodesign e a arquitetura da informação trabalham com os processos mentais humanos – os chamados processos cognitivos. Esses processos dizem respeito a como as pessoas apreendem a informação e como constroem conhecimentos. (AGNER, 2006, p.11)

No tópico seguinte levantaremos os aspectos sobre usabilidade, fundamentais para o sucesso do projeto que se traduz na satisfação do usuário em navegar e alcançar seus objetivos.

6.1.2 Heurísticas de Usabilidade e outros princípios O autor Walter Cybis (2007) nos apresenta em seu livro, “Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações”, alguns dos princípios necessários para que uma interface gráfica possua usabilidade, logo, poderemos adaptar essas questões para o redesign da página principal do portal da Prefeitura de Barra Mansa. O autor começa explicando o que é usabilidade e em seguida apresenta os tópicos: Heurísticas de usabilidade, Regras de Ouro, Princípios de Diálogo e Critérios Ergonômicos. Ele termina o final deste capítulo relacionando critérios do tipo flexibilidade, legibilidade, compatibilidade, brevidade à tipos de usuários novatos e intermitentes, experientes, idosos e outros.

6.1.3 Apoio às ações do usuário

O usuário tem necessidade de saber que suas entradas no sistema estão surtindo efeito, para isso é fundamental o apoio de feedback, que são informações fornecidas aos usuários a partir do momento em que eles utilizam a interface, como por 23

exemplo: Clicar no campo “Nome” de um formulário de contato, o campo fica com uma cor diferente indicando que o usuário marcou realmente aquele campo e é nele, que será inserido o nome naquele momento. O autor Walter Cybis (2007) fala sobre “Apoio às ações do usuário” e “Feedback” dessas ações: A interface ergonômica deve antecipar-se e reagir às ações dos usuários, convidandoo, apoiando-o durante suas ações e fornecendo-lhe respostas adequadas quanto ao andamento e ao resultado dessas ações. (CYBIS, 2007, p.49).

São pequenos detalhes que fazem grande diferença para o usuário durante o uso da interface gráfica.

6.1.4 Design de Interação: Aspectos cognitivos

Um dos fatores que permite o desenvolvimento do Design de Interação no projeto é a Cognição. Entender o relacionamento dos seres humanos no momento em que eles interagem com computadores, faz com que possamos descobrir em que eles são bons e usar isso a favor do projeto, e paralelo a isto, podemos compensá-los caso alguma operação apresente dificuldade de realização. Os autores Preece, Rogers e Sharp (2005), definem o que é cognição e citam também tipos de processos: A cognição é o que acontece em nossas mentes quando realizamos nossas atividades diárias; envolve como processos cognitivos, tais como pensar, lembrar, aprender, fantasiar, tomar decisões, ler , ver escrever e falar.[...] A cognição também foi descrita no que diz respeito a tipos específicos de processos, tais como: atenção; percepção e reconhecimento; memória; aprendizado; leitura, fala e audição; resolução de problemas, planejamento, raciocínio e tomada de decições. (PREECE, ROGERS E SHARP, 2005, p.94).

Para cada um dos cinco processos de cognição citados, os autores listam as principais implicações do design, como por exemplo, no caso da Percepção: As representações de informações precisam ser projetadas de modo a ser percebidas e reconhecidas em mídias diferentes: Os ícones e outras representações gráficas

devem possibilitar aos usuários descobrir rapidamente seu significado. (PREECE, ROGERS E SHARP, 2005, p.98).

A psicologia cognitiva também apresenta conceitos de como a mente humana trabalha a informação, através de metáforas e analogias. Com isso, torna-se possível realizar previsões a respeito do desempenho humano em determinadas tarefas.

Figura 1 – Modelo humano de processamento da informação.

Se uma interface gráfica é desenvolvida para atender a usuários, logo, deve se conhecê-los, estudar seu comportamento diante dela e detectar suas necessidades a fim de atender a todos da melhor maneira possível.

Cybis (2007) mostra que para se alcançar qualidade da interface é necessário foco para as atividades do usuário. Essa atitude não deve necessariamente se limitar à duração de um projeto, e, de fato, empresas mais conscientes da importância da usabilidade para o sucesso de seus produtos empreendem esforço contínuo de prospecção de novas formas de uso, novas ferramentas, novas necessidades e expectativas. (CYBIS, 2007, p.103).

Na Figura 1, o esquema do ciclo de desenvolvimento centrado no uso, pelo autor:

Figura 2 – o Ciclo de desenvolvimento centrado no uso.

Ainda neste capítulo do livro, o autor fala sobre o envolvimento do usuário no projeto, a necessidade de especificar o contexto de uso e a usabilidade pretendida para a interface, padrões de tela, questionário de satisfação e observação do usuário.

6.1.5 Especificação: Delimitando o Projeto

Já sabemos que será necessário conhecer o público do portal de Barra Mansa, e para esta tarefa existem alguns procedimentos e técnicas, onde o autor Walter Cybis (2007), mostra em seu livro algumas técnicas de especificação, que servem para gerar, analisar e organizar requisitos para o novo produto, sistema ou aplicação. “As especificações serão usadas tanto para conduzir o projeto como para testar ou verificar o programa mais tarde.” (CYBIS, 2007, p. 137). Os tópicos abordados pelo autor são: Especificação de requisito para usabilidade, que mostra questionamentos do tipo “quem serão seus usuários diretos e indiretos, quais são os objetivos deles, como será o ambiente e etc”, Especificação do contexto, Especificação de exigências para a usabilidade, Especificações de exigência para a interface, Cenários de uso e Personas (Figura 2).

Figura 3 – Fichas de personas de um projeto.

Outro

autor

que

mostra

utilização

Personas

processo

desenvolvimento de projetos de redesign é Felipe Memória (2006), que cita: Este é um método bem diferente, baseado no livro The Inmates are running the Asylum, de Alan Cooper (1999). Uma persona é um personagem fictício, que tem características próprias. Esse „protótipo de pessoa‟ pode ajudar para que se tomem decisões sobre o visual do produto, funcionalidades desejadas, navegação e interações. Ao basear algumas soluções de projeto nesse personagem fictício, pode-se atingir um grupo grande de pessoas representadas por esse modelo. As personas criadas representam o público-alvo da empresa, identificando em pesquisas anteriores e na base de dados de usuários. (MEMÓRIA, 2006, p.20).

Abaixo, a Tabela 1 apresentada pelo autor mostrando os personas que foram desenvolvidos no Case da BBC:

Tabela 1 – Personas criadas tomando-se como base o público-alvo da BBC.

Trabalhar com personas no projeto de redesign do portal de Barra Mansa facilitará na identificação dos tipos de seus usuários, quais suas expectativas e necessidades no uso do portal.

Outra maneira de se conhecer o usuário é fazer o uso de entrevistas e questionários, uma forma rápida que possibilita ao designer uma outra percepção de seu projeto. No livro Design de Interação, os autores nos mostram algumas recomendações sobre cada tipo de método. Em entrevistas, existem 3 tipos: Não28

estruturada, que se assemelha a uma conversação com foco no assunto em questão; Estruturada, onde existem perguntas predeterminada; e Semi-Estruturadas, onde parece misturar os dois outros tipos, contendo perguntas de respostas abertas ou fechadas. Como nos mostra os autores Preece, Rogers e Sharp (2006): Quando estiver elaborando perguntas para uma entrevista, planeje-as sucintas, diretas, evitando realizá-las em excesso. Apresentamos, as seguir, algumas recomendações: Evite perguntas longas, pois são difíceis de lembrar; Evite sentenças compostas dividindo-as em duas ou mais perguntas separadas(...); Evite perguntas tendenciosas como “Por que você gosta desse tipo de interação”. Se utilizadas sozinhas, elas assumem que a pessoa realmente aprecia tal interação. (PREECE, ROGERS E SHARP, 2005, p.413).

Já para o método de questionários podem existir perguntas abertas ou fechadas. Uma das vantagens do questionário, é que eles podem ser distribuídos para várias pessoas por meio da internet, por exemplo. Ainda os mesmos autores, orientam: Seguindo as questões genéricas, são realizadas as perguntas específicas que contribuem para a meta da avaliação. Se o questionário é longo, as questõees podem ser subdivididas em tópicos relacionados, visando a facilitar e tornar a tarefa mais lógica. (...) A seguir, apresentamos uma lista de recomendações gerais para o design de um questionário: Faça perguntas claras e específicas; Sempre que possível, faça perguntas fechadas e ofereça várias possibilidades de resposta; Pense sobre a ordem das perguntas. O impacto de uma pergunta pode ser influenciado pela ordem em que aparece. Perguntas gerais devem vir antes de perguntas específicas. (PREECE, ROGERS E SHARP, 2005, p.421).

Ainda em questionários, existe o método Diferencial Semântico, também chamado de Questionário Emocional por outros autores. Consiste em uma tabela com adjetivos positivos e negativos dispostos em uma organização onde o entrevistado marca dentro da escala de acordo com sua opinião em relação a interface.

Figura 4 – Exemplo de uma escala de diferencial semântico.

6.1.6 As Estatísticas

Sobre estatísticas, o autor Felipe Memória (2006), mostra sua metodologia para a leitura dos dados. Ele levanta as questões sobre: Acessos do site durante dias e meses, principais páginas acessadas, de onde as pessoas vieram e entre outros.

Para o portal de Barra Mansa, analisaremos a princípio os seguintes aspectos estatísticos:  Ranking de links acessados na home  Palavras-chave mais procuradas  Resolução de Telas  Navegadores utilizados pelos usuários

6.1.7 Sobre Testes de Usabilidade

Sabemos que é necessário conhecer os usuários do portal de Barra Mansa. Para que isso ocorra existem técnicas de pesquisa, entrevistas e testes de usabilidade disponíveis ao longo deste levantamento de dados. Estas técnicas não serão empregadas na primeira fase do projeto, podendo haver uma possibilidade de ocorrer em outro momento durante o processo de design e pesquisa. Mas os dados sobre esses termos serão levantados no decorrer deste documento

O autor Felipe Memória (2006), mostra no em seu livro, a classificação dos tipos de testes de usabilidade. São eles: Testes formais conduzidos como verdadeiros experimentos no sentindo de confirmar ou não determinada hipótese; Testes menos formais, que são um ciclo interativo tendo como objetivo expor deficiência de usabilidade, para gradualmente moldar e melhorar determinado produto. Ele dá como exemplo, na Figura 3, o Case Teste de usabilidade do Globo Media Center, e o Teste custo zero da Globo.com:

Figura 5 – Processo utilizado nos testes da Globo.com.

O autor nos mostra: Os testes de usabilidade podem ser feitos seguindo uma série de diferentes metodologias. Os dois testes que abordamos utilizaram a análise da tarefa, um método consagrado e que realmente funciona. Realizar testes, por mais simples que sejam, é sempre bom. Como diria Jakob Nielsen, testar um usuário é melhor do que não testar nenhum. Se o objetivo for apenas melhorar as funcionalidades de um produto específico, as estatísticas mostram que testes com apenas cinco usuários costumam levantar uma boa quantidade de possibilidades de melhora (cerca de 85%). Isto representa um custo benefício razoável, considerando que para atingir 100% dos problemas são necessários 15 usuários. Quanto mais pessoas forem testadas, menor será, proporcionalmente , a quantidade de problemas encontrados. Mas cuidado: designers não são usuários e usuários não são designers. Nem tudo que os usuários falarem pode ser levado em consideração; Por outro lado, eles sempre enxergam problemas que os designers dificilmente percebiam. (MEMÓRIA, 2006, p. 165).

Aprofundando sobre testes de usabilidades, encontramos no livro de Luiz Agner (2006), a metodologia para a execução de testes. Ele fala sobre o espaço físico, Figura 4, sala onde serão feitos os testes, sobres os participantes, equipamentos, questionários, tarefas e outros aspectos técnicos.

Figura 6 – Exemplo de planta de laboratório para testes de usabilidade.

Já no livro de Walter Cybis (2007), encontramos um conteúdo maior e mais completo sobre testes de usabilidade. O texto é mais formal, comparado ao de Luiz Agner. O conteúdo é organizado entre os seguintes tópicos: Verbalização, Local do teste, Figura 5, Resultados Esperados, Gestão do Constrangimento, Análise Contextual, Montagem dos Testes, Realização dos Testes, Análise e interpretação dos dados e relatos dos resultados.

Figura 7 – O esquema geral de um laboratório para testes de usabilidade, com a sala de teste e a sala de controle e observação.

Figura 8 – Exemplo de configuração de teste de usabilidade realizado no local de trabalho do usuário.

6.2 Arquitetura da Informação e Ergonomia Informacional

Para lidar com um grande volume de usuários e informação, a Arquitetura da Informação se faz necessária assim como a Ergonomia Informacional para o desenvolvimento do projeto de redesign do portal de Barra Mansa.

6.2.1 Arquitetura da Informação

A Arquitetura da Informação é uma etapa do projeto em que o profissional deverá enxergar as necessidades do usuário para organizar de maneira cognitiva toda a informação que será apresentada na interface do portal, sistema ou outro veículo de comunicação. O autor Felipe Memória (2006) explica: A Arquitetura da Informação deve destacar o conteúdo que é realmente relevante em cada página e agrupar as informações da forma mais parecida possível com o modelo mental dos usuários, ou seja, com aquilo que eles pensam. Os fluxos devem envolver cliques suficientes apenas para que o usuário se sinta seguro e não perca tempo. Todas as funcionalidades e conteúdos que serão o coração do produto precisam ser pensados nessa etapa. Para isso é importante prever interatividade entre as pessoas e como vai ocorrer a interação entre o site e os usuários. (MEMÓRIA, 2007, p. 163).

A interface gráfica de um portal governamental deve ser preparada para receber um volume grande de informação, pois pertence a uma classe na web onde é encontrado um grande volume de conteúdo em sua página inicial, a fim de atender a todas as classes de usuários. Quando essas informações não são organizadas podem causar dificuldade ao usuário na busca pelo conteúdo que ele deseja. Cabe a Arquitetura de informação, a tarefa de cuidar para que o conteúdo seja distribuído de maneira compatível com os de usabilidade.

A Figura 7 nos mostra que o arquiteto de informação deverá ser detentor das práticas recomendadas para projeto de navegação e convenções de formatação de conteúdo e de desenho de interface.

Figura 9 – Modelo conceitual da arquitetura da informação.

Com base nos dados levantados sobre a arquitetura da informação no projeto, podemos identificar alguns itens que darão suporte no desenvolvimento do redesign da interface gráfica do portal de Barra Mansa.

6.2.2 Ferramentas para Arquitetar e surpreender

Para o redeseign da atual interface gráfica do Portal de Barra Mansa, podem ser realizados testes na interface atual, a fim de coletar informações estéticas e funcionais, que serão úteis durante o processo de redesign.

É possível destacar as características de uma interface através de um questionário emocional. O autor Felipe Memória (2006), mostra através do Case do site da BBC, uma tabela, Figura 8, com o resultado do questionário emocional utilizado no início do projeto. “Os usuários marcavam com um ponto sua impressão com relação à homepage da BBC”. (MEMÓRIA, 2006, p.19)

Figura 10 – Questionário emocional utilizado no início do projeto. Os usuários marcavam com um ponto sua impressão com relação à homepage da BBC.

Através desta tabela, é possível identificar muitas questões estéticas e funcionais relevantes para um possível ponto de partida no processo do redesign da interface a ser trabalhada.

O autor também destaca a importância de se pensar através de um brainstorm, por exemplo, sobre como poderão ser trabalhadas as regiões mais importantes da interface, para que sejam atraentes sem perder no quesito usabilidade. Memória (2006) mostra como exemplo o trabalho encima do destaque principal citado no Case da BBC, “a maior imagem da página, aquela que causa impacto nos usuários” (MEMÓRIA, 2006, p.23), recebeu uma atenção especial durante o desenvolvimento do projeto.

Para que a interface supere as expectativas, é importante que alguma inovação no modo de exibir o conteúdo seja apresentada. Continuando com o autor Felipe Memória (2006), que mostra alguns exemplos utilizados no case da BBC. Duas idéias que deram embalo ao projeto de redesign que ele chama no livro como: “Estabelecendo os tons: idéia brilhante” e “Áreas de foco: idéia genial”. Ele conta como estas soluções dão personalidade e tornam a interface atraente para os usuários do site.

6.2.3 Design de Navegação

O design de navegação trata basicamente da orientação do usuário dentro do site. Tem como função dar suporte sobre como ir de uma página a outra, onde ele está e pra onde pode ir, e também informar sobre resultados de buscas realizadas por ele. Mas para que se realize uma boa navegação em um projeto, é necessário responder à algumas perguntas básicas, segundo o autor James Kalbach(2007): Por que você está construindo o site?; Quem usará o site?; A que a navegação fornece acesso?; Como o conteúdo deste site está organizado? e Como os usuários navegarão para o conteúdo que eles precisam?. As diferentes abordagens que as pessoas adotam são chamadas de modos de busca por informação. Algumas vezes as pessoas iniciam uma busca sistematicamente. Outras vezes elas estão apenas surfando ou desviando de outra tarefa. (KALBACH, 2007, p. 49).

Existem vários modos de busca por informação, saber quais são eles, pode facilitar na escolha do mais adequado para o projeto do site. O autor James Kalbach (2007) mostra pela ótica de autores diferentes as classificações desses modos de busca por informação, o primeiro, classifica a navegação em: Direcionada, Semidirecionada e Não-direcionada, já a segunda autora citada por ele classifica como: Procura por item conhecido, Procura exploratória, “Você não sabe o que precisa” e Reencontrar. O autor ainda completa: Qualquer pessoa pode abordar um site web em qualquer modo em qualquer hora. Por essa razão, é difícil prever como as pessoas abordarão o seu site. Mesmo assim, se você puder identificar os modos-chave de procura em seu site, poderá ser capaz de melhor suportar as necessidades de seus visitantes em termos de navegação.. (KALBACH, 2007, p. 50).

Após conhecer os modos teóricos de busca comuns entre os usuários, podemos saber como realizar na pratica a navegação. Para isso, o autor fala sobre os mecanismos de navegação, que são links que tem a aparência e o comportamento similar em todo o site. Os mais comuns são: Navegação por passos e por paginação; Trilhas de migalhas de pão (Breadcrumbs); Navegação em árvore, mapas dos site, diretórios, nuvens de tag e índices A a Z; Barras de navegação, abas e menus verticais; Menus dinâmicos e menus drop-down e Mecanismos de visualização.

Figura 11 – Modelos de menus em aba da Amazon.com

Segundo o autor James Kalbach, existem três categorias primarias de navegação: Estrutural, Associativa e Utilitária.

Figura 12 – Três categorias primarias de navegação (por Fiorito e Dalton)

6.2.4 Normas e boas práticas para o projeto

Existem algumas normas consagradas capazes de orientar o processo de redesign do portal de Barra Mansa. Memória (2006) apresenta em seu livro “Design para Internet” um capítulo com o título de “Práticas recomendadas para o projeto de navegação”, com recomendações, normas e boas práticas para o projeto de interface citadas por diversos autores, dentre eles Agner, Santos e Nielsen. Dentre os tópicos encontramos os seguintes temas: “Ser facilmente aprendido”, “Oferecer Alternativas”, “Garantir economia de tempo e ações” e “Criar nomenclaturas claras”. O autor ainda lança três perguntas que seriam fundamentais para demonstrar a necessidade de um projeto de interface: “Qual o público-alvo, Qual o objetivo do produto e Quais as principais tarefas a serem executadas no site?” (MEMÓRIA, 2006, p.44).

Memória (2006) cita Jakob Nielsen, um dos grandes nomes dos estudos sobre usabilidade, e explicita um importante trecho sobre nomenclaturas nos sites, para que a usabilidade esteja presente no projeto: Em seu livro Projetando Websites, Nielsen mostra que 55% dos websites disponibilizam as informações institucionais em link “About (nome da empresa)”, 21% como “About Us (“Sobre Nós”), 7% como “Company Information” (“Informações da Empresa”) e 5% como “Who We Are” (“Quem Somos”). (MEMÓRIA, 2006, p.57).

Em seguida, o autor cita algumas Convenções de desenho de interface e explica: A padronização das interfaces é um conceito básico e um dos mais importantes para quem projeta produtos para a Internet. Assim como o texto escolhido para representar os links, uma solução de design adotada pela maioria dos sites é, até segunda ordem, a melhor solução para o site que você está projetando. A solução usada pela maioria está diretamente relacionada a conceitos de psicologia cognitiva, como facilidade de aprendizado e memorização. Quando utilizamos soluções consagradas, diminuímos as chances de dúvidas e, conseqüentemente, de erro por parte das pessoas que estão utilizando o produto. (MEMÓRIA, 2006, p.58).

Mudando de autor, encontramos no livro de Luiz Agner (2006), uma metodologia de Arquitetura da Informação, denominada Modelo dos 3C, uma proposta livremente adaptada sobre as idéias dos autores Rosenfeld e Morville.

Figura 13 – O modelo dos 3C da arquitetura da informação.

O modelo dos 3C aborda questões pertinentes ao processo do redesign do portal de Barra Mansa, como “Objetivos da organização, políticas, estratégias, cultura organizacional, tecnologia, poder, recursos humanos, estruturas”. Traçar estratégias para que os objetivos da prefeitura de Barra Mansa sejam alcançados.

O autor Luiz Agner (2006) dedica um capítulo inteiro de seu livro para abordar nove dicas para redesign de interface gráfica: Os princípios que apresentamos aqui são universais. Ou seja, eles podem ser aplicados a qualquer interface, seja a de um website, de um software ou de uma multimídia. Visam a aumentar a satisfação das pessoas durante a interação com os computadores e seria bom que fossem conhecidos e respeitados por todos os envolvidos com o projeto de sistemas. (AGNER, 2006, p.29).

Dentre os tópicos encontramos no texto de Agner (2006): Atalhos para os mais experientes, Diálogos com início, meio e fim, Prevenção de erros e Conheça o usuário.

Em um novo capítulo, o autor volta a exibir lições que ele destina à empresas com grande presença na web: As quinze lições a seguir destinam-se às empresas com grande presença na web e aos seus portais, mas não pretendem esgotar esse tema, que é bem amplo. São generalizações a partir da prática e de conclusões de pesquisas. Dirigem-se a todos os profissionais que trabalham com internet. (AGNER, 2006, p.59).

As lições são: Foco no usuário, Comunicação Instantânea, Avaliação do Sucesso, A primeira página, Modelos Mentais, Tempos de resposta, O senso comum, Internet x Intranet, Estilo de Redação, Padrões estéticos, Subsites, Tarefas, Equipes, Usuários Avançados e Usuários Iniciantes.

6.2.5 Ergonomia

Uma definição que sintetiza o papel da Ergonomia no desenvolvimento de projetos de interface gráfica:

Pode-se dizer que a ergonomia está na origem da usabilidade, pois ela visa proporcionar eficácia e eficiência, além do bem-estar e saúde do usuário, por meio da adaptação do trabalho ao homem. Isto significa que seu objetivo é garantir que sistemas e dispositivos estejam adaptados à maneira como o usuário pensa, comporta-se e trabalha e, assim, proporcionem usabilidade. (CYBIS, 2007, p.15).

Objetos de interação como: janelas, caixas de diálogo, formulários, menus, listas, tabelas, botões, campos, textos, gráficos e etc. Todos ficam a cargo da Ergonomia, ela irá cuidar dos aspectos funcionais destes objetos na interface, orientando a estética mais apropriada à eles, para que atendam as necessidades dos usuários. Cybis (2007) dedica parte do capítulo 2 de seu livro, sobre estes objetos. Ele fala sobre qual a forma adequada para atender as necessidades dos usuários. Além dos objetos de interação, ele aborda o tema “Atributos de Objetos”, que trata de tópicos como Nomes, Ícones, Códigos de cores, Códigos de formas, Cores, Fontes, Bordas, Arranjo (layout) e Fundos. Todos estes aspectos serão trabalhados no redesign do portal de Barra Mansa.

Para saber se a abordagem ergonômica aplicada no projeto está de acordo com as expectativas almejadas, existem avaliações para validar os requisitos préestabelecidos. Cybis (2007), cita os tipos de avaliações, são elas: Avaliações Analíticas, Avaliações Heurísticas e Inspeções por listas de verificação. Dos três tipos citados, a que melhor atende o projeto de redesign do portal de Barra Mansa seria a de Inspeções por listas de verificação. Sobre os três tipos, Cybis mostra: As avaliações analíticas enfocam a estrutura da tarefa com um dispositivo informatizado e se caracterizam por algum tipo de decomposição da tarefa para verificar a complexidade ou estimar os tempos das interações propostas. As técnicas de verificação conhecidas como avaliações heurísticas enfocam principalmente a interface do sistema e se baseiam nos conhecimentos ergonômicos e na experiência dos avaliadores que percorrem a interface ou seu projeto para identificar aspectos da interface que atrapalhem os usuários durante as interações. As inspeções por listas de verificação (checklists) têm esse mesmo objetivo, mas dependem do conhecimento agregado à ferramenta de inspeção, uma vez que destinam a pessoas sem formação específica em ergonomia. (CYBIS, 2007, p. 181).

Inspeções por listas de verificação é a mais indicada, pois no processo não haverá a presença de profissional com formação específica em ergonomia.

6.2.6 Acessibilidade

A ausência do termo acessibilidade nos capítulos anteriores não a exclui do produto final. Itens básicos de acessibilidade poderão ser implantados já que a interface 42

gráfica será elaborada sobre as premissas da usabilidade, arquitetura da informação e ergonomia, elementos que permitem uma futura aplicação dos itens de usabilidade. 7 – LEVANTAMENTO DE SIMILARES

Apesar da carência de pesquisas e estudos voltados para questões de usabilidade em sites governamentais no Brasil, foi possível encontrar projetos com uma boa organização de conteúdo. Dentre os vários portais pesquisados, vamos apresentar informações de quatro portais, que melhor apresentaram organização informacional em suas interfaces. As imagens foram colhidas no dia 26 de maio de 2011.

Para extrair as informações dos similares vamos preencher uma tabela como base nos seguintes requisitos:  Nomes  Ícones  Cores  Fontes  Arranjo (layout)  Fundos  Foco da Página  Hierarquização e Agrupamento de elementos  Monotonia  Resolução (largura e altura em pixels)  Elementos de Navegação

7.1 Governo do Estado de Minas Gerais

O portal do Governo de Minas Gerais, Figura 10, apresentou preocupação em atender e orientar seus usuários quanto à navegação e disposição do conteúdo. E notase que um visual amigável colabora para uma boa experiência quanto à navegação. 43

Figura 14 â&#x20AC;&#x201C; Interface completa da home do Portal do Governo de Minas Gerais.

Nomes dos links Foram utilizados nomes auto-explicativos, ou seja, com o significado direto de sua função.

Ícones Identificou-se o uso constante de ícones. Eles estão presentes junto dos links e dos títulos das seções no site, facilitando na identificação da função do link.

Aplicação das Cores A interface utilizou uma paleta de cores compatível com a marca do Governo, usando 4 quatro cores. Fez-se o uso das cores para discriminar as seções dos grupos de usuários específicos e para diferenciar os tipos de links. Para os campos de texto específicos, o cinza utilizado deixou colocou em alguns casos a legibilidade em risco.

Tipografia Foram identificados 3 tipos de fontes. Os nomes das seções e links do menu, utilizam fontes em imagem jpg. Os outros links utilizam fontes web.

Fundos Na interface predomina o fundo branco, tendo ilustrações leves somente no topo e no rodapé.

Foco da Página O foco da página se divide em dois: A atenção se volta para a imagem da notícia principal e também para os links de serviços, pois estão nos 500 primeiros pixels do tamanho total, considerada a região de maior visibilidade na web por conta das resoluções do monitores.

Hierarquização e Agrupamento de elementos Nota-se a hierarquia adotada, a partir do momento em que serviços e notícias, que são os principais motivos de acesso dos usuários, são tratados como prioridade, sendo eles os primeiros itens após o menu do portal. Todas as notícias têm um padrão visual e ficam centralizadas em uma mesma região. A mesma premissa se nota nos dados sobre a cidade, por exemplo, e assim em todas as outras áreas.

Monotonia

Existe uma área da interface gráfica que não possui conteúdo, causando monotonia na página. Ela está abaixo das notícias.

Resolução (largura e altura em pixels)

As dimensões são: 940px por 1930px.

Elementos de Navegação Foram encontrados botões de navegação, no topo e no rodapé.

7.2 Prefeitura de Curitiba

Entre as interfaces pesquisadas, o Portal da Prefeitura de Curitiba, Figura 11, apresentou ser o maior em termos de comprimento. Apesar da grande extensão ele também apresentou ter cuidado a tarefa da disposição das informações.

Figura 15 â&#x20AC;&#x201C; Interface do Portal da Prefeitura de Curitiba.

Nomes dos links Foram utilizados nomes auto-explicativos, ou seja, com o significado direto de sua função.

Ícones A ocorrência de ícones nesta interface foi baixa. E alguns dos ícones encontrados não possuíam descrição, deixando sua função subjetiva.

Aplicação das Cores Foram utilizadas muitas cores sem a preocupação de acompanhar a identidade da marca do site e sem estabelecer funções específicas para as cores, com exceção dos campos de texto simples. Foram encontradas 7 cores ao longo da interface.

Fontes Foram encontrados 2 tipos de fontes. Uma fonte é do tipo aceita pela web e a outra do tipo imagem em jpg, ela está presente no nomes das seções e alguns links principais como no menu.

Fundos O fundo branco é predominante na interface. Sem ilustrações ou grafismos.

Foco da Página A atenção é dividia em 3 pontos: área de notícias, botões dos serviços e banner.

Hierarquização e Agrupamento de elementos Só foi encontrada hierarquia no posicionamento dado aos assuntos mais relevantes do portal, notícias e serviços. No restante da interface, encontramos notícias em várias partes do grid, e de formatos variados. Foi encontrada agrupamento de links relacionados à serviços. Banners foi encontrados em locais distintos.

Monotonia

Ao contrário de monotonia, nota-se um volume exagerado de elementos visuais e informações dispostas na home. Até mesmo conteúdos repetidos foram encontrados, desviando a atenção e poluindo o visual da interface.

Resolução (largura e altura em pixels) 980px por 2513px.

Elementos de Navegação Foram encontrados elementos muito discretos de navegação, no topo e no rodapé.

7.3 Prefeitura de Florianópolis

A Figura 12 mostra a interface do portal da Prefeitura de Florianópolis. Em comparação com os portais pesquisados, este foi o que apresentou menor comprimento, com conteúdo mais enxuto.

Figura 16 – Interface do portal da Prefeitura de Florianópolis.

Nomes dos links Alguns links não mostram a função em seus nomes. Como exemplo, podemos citar os links “processos eletrônicos”, “serviços on-line” e “estrutura organizacional”.

Ícones Não foram encontrados ícones.

Aplicação das Cores As cores utilizadas não mostram compatibilidade com a identidade da marca do site. Foram encontradas basicamente 6 cores. Não foi identificado o uso da cor para funções especificas além dos campos de texto simples.

Fontes Foram identificados 2 tipos de fonte. A fonte em imagem jpg, está presente nos títulos de algumas seções no site. Todos os outros links e textos estão em fonte aceita pela web.

Fundos Nota-se fundo branco na área útil do site, em outras regiões uma cor bege e no topo uma ilustração retratando um dos pontos característicos da cidade de Florianópolis.

Foco da Página A atenção fica divida em dois pontos: Links de serviços e TV com banners.

Hierarquização e Agrupamento de elementos Existe uma hierarquia pela disposição dos assuntos de maior relevância, serviços e notícias, e as notícias estão agrupadas na mesma seção mas em formatos distintos.

Monotonia Não existem áreas vazias e as cores não são muito fortes, deixando o visual leve.

Resolução (largura e altura em pixels) 980px por 1320px.

Elementos de Navegação Botões para navegação foram encontrados somente o “Home”, junto ao menu e o “Mapa do Site” no rodapé. 51

8 – O PORTAL DA PREFEITURA DE BARRA MANSA

8.1 HISTÓRICO E METODOLOGIA DO PORTAL

O Portal da Prefeitura de Barra Mansa foi desenvolvido pela agência web AM4, situada em Barra Mansa – RJ. Não foram utilizados métodos de pesquisa em sua concepção, nem testes de usabilidade. A empresa não adota este tipo de procedimento, pois ainda não desenvolveu um setor entre suas equipes de produção que cuide somente destes termos de usabilidade e pesquisa.

O Portal da Prefeitura de Barra Mansa teve sua primeira edição em 2002, sobre a responsabilidade da empresa Orete Sistemas. Já em 2003, a empresa desenvolvedora passa ser a AM4. O portal veio da necessidade da prefeitura em atender à população quanto ao oferecimento de informações e serviços. Atualmente, ele disponibiliza informações sobre a cidade de Barra Mansa, dados sobre a administração, secretarias, e outros serviços de informação. Além do conteúdo informativo, ele possuiu serviços online, logo, torna-se uma importante ferramenta para a população, otimizando o tempo e desgaste em operações burocráticas convencionais. Abaixo na figura 29, podemos visualizar o layout atual.

Figura 17 – Layout atual do Portal da Prefeitura de Barra Mansa.

A metodologia de criação do projeto pela a agência acontece a partir de um briefing que o setor de marketing recebe do cliente. Este briefing é analisado pela 53

equipe de projeto que, a partir dele, elabora um escopo, contendo os objetivos do cliente e as características que o layout deve apresentar. Neste escopo encontramos também algumas funcionalidades, restrições e referências. Além de conter a lista de links que compõem o mapa do site.

8.2 DADOS ESTATÍSTICOS

A agência nos concedeu gentilmente os dados estatísticos de acesso do Portal. Com isto, podemos mostrar as seguintes informações:

8.2.1 Ranking de links acessados na home

Através da ferramenta gratuita disponibilizada pela Google, o Google Analytics, é possível saber quais são os links mais acessados pelos usuários na home do portal. Foram encontrados basicamente 5 valores relevantes para mostrar esses links. A amostra presente na Tabela 2 corresponde ao período entre 01 de novembro de 2010 a 30 de abril de 2011.

Lista dos links mais acessados por ordem decrescente Links do menu e da home Porcentagem 35%

Nome do(s) link(s) Lista de Serviços, Serviços de Informação, Perfil Rural, Geoprocessamento

6,9%

Editais de Licitação

4,2%

Protocolo on-line

2,6%

Alvará Expresso

Administração Sublinks do menu Lista de Serviços

35%

Consultas Prévias On-line, Perfil Rural, Webmail

6,9%

Licitações

4,2%

Protocolo On-line 54

3,5%

Balcão de Empregos

2,6%

Alvará Expresso Tabela 2 – Lista dos links mais acessados por ordem decrescente.

8.2.2 Resolução de Tela

Saber sobre as resoluções de tela usadas pelos usuários indica quais as medidas e proporções ideais a serem adotadas na parte gráfica do projeto, para que o maior número de usuários seja atendido. A amostra na Figura 14 corresponde ao período entre 12 de abril a 12 de maio de 2011.

Figura 18 – Resoluções de telas que acessaram o Portal da prefeitura de Barra Mansa.

A resolução mais utilizada se encontra dentro dos padrões adotados atualmente para largura ideal para web, 1000px. Além disso, mostra também que apesar disso, ainda existem muitos acessos com uma largura não mais adotada pelos desenvolvedores, que é a 800px por 600px. Mostra também, o aumento crescente de novas resoluções, como a 1280px por 800 e 1280px por 720px, presente na maioria dos notebooks. 55

8.2.3 Navegadores

Foi possível também, através do Google Analitcs, saber as resoluções de telas utilizadas pelos usuários. Este tipo de informação, serve de alerta para determinadas funcionalidades e limitações do layout. A amostra na Figura 15 corresponde ao período entre 12 de abril a 12 de maio de 2011.

Figura 19 – Dados sobre os navegadores mais utilizados no acesso ao portal.

Com o resultado mostrado na figura anterior, é possível saber que durante o desenvolvimento técnico é necessário atenção pois o navegador mais utilizado é o mais criticado entre os desenvolvedores web por dificultar a aplicação de inovações oferecidas pela web atualmente, como o uso do png, por exemplo.

Palavras-chave mais procuradas

Ainda utilizando o Google Analytics como ferramenta para informar dados estatísticos, foi possível rastrear as palavras-chave mais buscadas pelos usuários 56

através do uso de mecanismos de busca, como o Google. Na figura 16 é possível ver as buscas feitas no período entre 1 de novembro de 2010 à 30 de abril de 2011.

Figura 20 – Lista das palavras-chave mais procuradas.

Tipos de Usuários

Os tipos de usuários do Portal, podem ser classificados em 3 grandes grupos: Cidadãos, Empresas e Servidores Públicos. A partir dos nomes dos links citados no escopo do atual portal, em anexo, é possível categorizar às áreas de importância para estes usuários, e com isso, facilitar o acesso a eles, oferecendo usabilidade.

9- ANÁLISES DE DADOS

9.1 Usabilidade

Usuários

A quantidade de usuários que acessam o portal é grande, mais de 86 mil visitas únicas, dentro desse grupo existem muitas categorias distintas umas das outras. Mas existem alguns autores que conseguiram categorizar estes usuários. Com base nas informações coletadas nos levantamento de dados, os grupos de usuários à serem pesquisados serão: Usuários Iniciantes, Intermediários e Avançados.

Pontos positivos: Todos os grupos de usuários serão atendidos quanto suas necessidades de navegação.

Pontos Negativos: Muitos requisitos a serem atendidos na disposição dos conteúdos na interface e perda em valores estéticos.

Princípios e Recomendações de Usabilidade

Das referências em usabilidade levantadas no capítulo que fala sobre usabilidade, daremos foco:

- liberdade e controle ao usuário; - consistência e padrões; - prevenção de erros; - reconhecer em vez de relembrar; - flexibilidade e eficiência de uso; - design estético e minimalista; - fornecer atalhos; - fornecer feedback informativo;

- permitir o cancelamento das ações; - fornecer controle e iniciativa ao usuário; - reduzir a carga de memória de trabalho. - autodescrição (feedback) - conformidade às expectativas do usuário; - facilidade de individualização; - facilidade de aprendizagem.

Tipos de Usuários

Usuários diretos e seus objetivos: Cidadãos, Empresas e Servidores Públicos. Para os cidadãos, basicamente o portal deve oferecer informações sobre serviços e como realizá-los online, endereços de órgão públicos como hospitais, escolas e informações sobre eventos e novidades que vão ocorrer ou que já ocorrerão na cidade. Deve também informar sobre as atividades da prefeitura na cidade e sobre novos serviços disponíveis.

Para as Empresas, o portal deve mostrar informações sobre serviços disponíveis, oportunidades de investimento na cidade e motivos para investir na cidade, bem como dados econômicos, geográficos e populacional.

Para os Servidores Públicos, que são os funcionários da prefeitura de Barra Mansa e outras cidades e também de governos de vários estados, deverão encontrar informações gerais sobre a prefeitura, sobre a administração, sobre meios de comunicação com os administradores e também encontrar formas de manutenção e atualização do conteúdo do site.

Quem são os Usuários indiretos e seus objetivos: Podem ser classificados usuário indiretos aqueles que realizam buscas em mecanismos de pesquisa sobre assuntos relacionados a cidade, a prefeitura e/ou seus serviços, assuntos culturais e de lazer. É também de interesse deste tipo de usuário casual a

busca sobre características da cidade, como História, Cultura, População, Turismo e Localização.

Qual categoria o projeto deverá priorizar: Por ordem de maior número de usuários, iremos priorizar a disposição da página inicial para os Cidadão e Empresas, que constituem a maior parte dos usuários que acessam o portal.

Como os usuários deverão proceder para realizar seus objetivos: Mesmo havendo uma certa prioridade para algumas categorias de usuário, o portal atenderá a todas as categorias. Fornecendo entradas de acesso para servidores da mesma maneira que oferecerá entrada de acesso ao link responsável a oportunidade de emprego, por exemplo.

Ambiente técnico, físico e organizacional em que o sistema será operado: O portal deverá funcionar de maneira leve e agradável, atendendo a variedade de configurações de computadores e conexões a internet. Com as atuais medidas do Governo, o número de internet banda larga aumenta consideravelmente a cada mês, tornando o espaço web mais funcional e democrático: O crescimento do número de usuários de banda larga virá da Classe C, aponta pesquisa do Ipea (Instituto de pesquisa Econômica Aplicada) divulgada nessa segunda-feira(5-set-2011). Segundo o estudo, o crescimento do número de famílias com computador em casa virá dos lares nos quais a renda varia entre três e dez salários mínimos (de R$ 1.635 a R$ 5.450) – e que apresentou aumento de 9% nos domicílios informatizados entre 2006 e 2010. (BusinessReview.com, 2011. p. 65).

Outro fator determinante para o aumento da banda larga para a população de baixa renda é o novo plano do governo Dilma: O Plano Nacional de Banda Larga teve seu lançamento oficial em maio de 2010. Seu objetivo é massificar até 2014 a oferta de acessos de internet banda larga para a apopulação. O plano será coordenado pel Ministério das Comunicações e operado pela estatal Telebrás. (G1, 2011. p. 65).

Requisitos para a interface e para a usabilidade do sistema: Acesso a internet, Monitor com resolução de preferência igual ou superior a 1024px de largura, mouse e teclado.

Pontos Positivos: Priorizar os usuários específicos faz com que o site atenda a população de uma maneira mais eficaz, já que está voltado para suas necessidades primeiramente. Pontos Negativos: Usuários de outras cidades podem se sentirem rejeitados.

Aplicando Usabilidade ao projeto

Técnicas de especificação são importantes para gerar, analisar e organizar requisitos para a nova interface. Elas serão usadas tanto para conduzir o projeto como para testar ou verificar a interface gráfica mais tarde. Cybis (2007) nos mostra uma lista de especificações de requisitos de usabilidade: - quem serão seus usuários diretos e indiretos e quais são as categorias de usuários para quem o sistema será desenvolvido; - quais são os objetivos que cada categoria terá em relação ao sistema e como os usuários deverão proceder para realizar seus objetivos; - como será o ambiente técnico, físico e organizacional em que o sistema será operado; - quais os requisitos para a interface e para a usabilidade do sistema. Tal informação é essencial para “delimitar” o projeto da interface do sistema e estabelecer requisitos para os testes da usabilidade. (CYBIS, 2007. p.137).

Outra fase integrante da Técnica de Especificação é Técnica de Personas. Nesta etapa é gerado alguns usuários falsos com características dos usuários reais da interface. Walter Cybis (2007) explica: A „criação‟ deve, entretanto, estar baseada nas informações qualitativas coletadas por meio de entrevistas e questionários junto à população-alvo do sistema. O processo se inicia com a escolha de um nome e de uma foto para representar a pessoa. Como cada pessoa é única, a descrição deve mostrar suas particularidades com o máximo de detalhes: idade, sexo, família,

endereço, emprego, características físicas, preferências e aversões, desejos, necessidades e objetivos, tipo de computador. Pôsters de todas as personas criadas devem ser colados nas paredes da sala de projeto para que todos vejam seus nomes, suas fotos e suas características [...]. (CYBIS, 2007. p.142)

O autor cita um exemplo de personas para um projeto de site de vendas de entradas de cinema por celular: „Andréia tem 32 anos, é casada, tem dois filhos e mora no centro de Florianópolis. É professora universitária, adora cinema e tem um telefone celular com conexão WAP. Ocupada com o trabalho e os filhos, não tem tempo para nada, mas não perde uma oportunidade de ir ao cinema. Ela é canhota, sofre de astigmatismo e é uma pessoa muito discreta. Tem horror a filas, a chamar a atenção ou fazer as pessoas esperarem por ela‟. As personas permitem maior entendimento dos usuários, colocando-os no centro das decisões do projeto. Na etapa de testes se buscará saber se o sistema atende aos objetivos dos conjuntos das personas definidos durante os desenvolvimentos. (CYBIS, 2007. p. 143).

O autor Felipe Memória (2006) explica como foram feitas as personas no Case da BBC: [...], foram criadas quatro personas com diferentes perfis [...]. Uma delas foi considerada a „primária‟, ou seja, aquela que se tivesse sua necessidade atendida possivelmente faria com que um maior número de pessoas fosse contemplado. (MEMÓRIA, 2006. p. 21).

Personas serão feitas para representar dois usuários de cada grupo específico: Usuários iniciantes, intermediários e avançados.

Outro aspecto que enriquece a usabilidade no projeto, é o uso da cognição que apresenta um modelo de processamento da mente. Os autores Preece, Rogers e Sharp (2005), mostram a importância do modelo aplicado ao design de interação: O modelo prevê quais processos cognitivos estão envolvidos quando um usuário interage com um computador, o que permite calcular quanto tempo ele irá levar para realizar as tarefas, o que pode ser muito útil ao compararmos interfaces diferentes. (PREECE, ROGERS E SHARP, 2005. p. 116).

Figura 21 – O modelo do processo humano.

Pontos Positivos: Trabalhar com personas no projeto de redesign do portal facilitará na identificação dos tipos de seus usuários, quais suas expectativas e necessidades no uso do portal.

Pontos Negativos: Demanda um tempo longo e requer uma pesquisa vasta sobre o público, investigação e questionários para a coleta de informações.

As Estatísticas

Saber quais as premissas para a leitura dos dados estatísticos colhidos do portal de Barra Mansa é fundamental. Ao longo do projeto, poderão ser colhidos outros dados através da ferramenta Google Analytics.

Pontos Positivos: Dados estatísticos facilitam no reconhecimento de falhas e acertos. Mostram o que deve melhorar e o que não funciona e etc.

Pontos Negativos: O volume de informações gerado pelo Google Analytics pode gerar confusão e poluir as informações que realmente interessam.

9.2 Arquitetura da Informação e Ergonomia Informacional

Arquitetura da Informação

O arquiteto de informação deve estudar o conteúdo a ser exibido na home do portal, ele deve investigar a relevância dos conteúdos e a melhor hierarquia a ser adotada alinhando as premissas de usabilidade e fazendo o uso das estatísticas e perfis dos usuários.

Pontos Positivos: Contribui para uma interface que apresenta um conteúdo com fluidez e organização.

Pontos Negativos: O conteúdo pode ser muito variado e mudar de acordo com o tempo.

Ferramentas para arquitetar e surpreender

Existem métodos que podem ser empregados no momento de colher informações mais sensoriais do que técnicas junto ao usuário. As impressões dos usuários com relação à interface gráfica atual ou similar fornecerão muitos dados que ajudarão na construção de uma interface gráfica melhor. Esse tipo de informação, emocional, é um processo que, para alguns, pode parecer dispensável, mas revela aspectos que passam despercebidos aos olhos dos desenvolvedores, podem ser obtidos através de formulários com perguntas ou tabelas para mensurar a satisfação dos usuários durante o uso ou a partir da simples visualização do layout.

Incluir brainstorm nas etapas iniciais do projeto de redesign da interface do portal de Barra Mansa pode ajudar na geração de novas formas estéticas da apresentação do conteúdo. Dando a possibilidade ao usuário de ter uma experiência única, e até criar um relacionamento amigável entre usuário e interface. O autor Felipe Memória (2006), destaca a importância de um brainstorm para geração de novas idéias, como exemplo, no case do redesign do site da BBC: A maior imagem da página, aquela que causa impacto nos usuários, foi exaustivamente estudada no processo da BBC. Foram criados modelos com camadas, como storyboard de acontecimentos, formas de destacar a mesma história de outros ângulos e destaques com várias matérias diferentes que poderiam ocupar maior espaço na tela. (MEMÓRIA, 2006, p.23).

Dessa maneira, boas idéias e inovações podem ser geradas, com uma simples reunião e debate de pontos de vista diferentes.

Pontos Positivos: Geração de idéias e soluções inéditas atribuindo valor à interface.

Pontos Negativos: Produtos inovadores demais podem causar confusão ao público, principalmente a usuários iniciantes.

Design de Navegação

Dentre as três categorias primarias de navegação citadas no levantamento de dados, a que melhor atende o projeto do portal, é a Navegação Estrutural. Kalbach (2007) afirma: Tal como o nome sugere, a navegação estrutural segue a estrutura de um site web. Ela permite que as pessoas se movam para cima e para baixo em diferentes pontos da hierarquia de um sie. A navegação estrutural pode ainda ser dividida em dois tipos: navegação principal e navegação local. (KALBACH, 2007, p.110).

Pontos Positivos: O usuário pode acessar qualquer página do site do ponto em que estiver.

Pontos Negativos: Por ser um conjunto que se repete em todas as páginas, para usuário que utilizam leitores de tela, pode ficar cansativo a todo momento a leitura dos mesmos elementos. Apesar disso, existe uma maneira para evitar este incomodo, basta acrescentar um link chamado Pular Navegação, assim o usuário evita a leitura de todos os itens.

Normas e boas práticas para o projeto

Existem recomendações, normas e boas práticas consagradas por diversos autores para o projeto de interface gráfica. O autor Felipe Memória (2006) explica que ao se utilizar soluções consagradas diminui-se a chance de dúvida, logo, a ocorrência de erros também diminui. A seguir, Memória (2006) mostra através da Tabela 2, as convenções já utilizadas e respeitadas em uma série de Web sites:

Elemento de interface Marca da empresa

Posicionamento Canto superior esquerdo

Pesquisador Nielsen, Adkisson e Bernard

Busca

Parte Superior

Nielsen, Adkisson e Bernard

Navegação global

Parte superior com links na Nielsen, Adkisson e Krug horizontal

Navegação local

Coluna da esquerda

Nielsen, Adkisson e Bernard

Breadcrumbs

Parte superior, abaixo da Adkisson, Lídia e Chaparro marca da empresa

Conteúdo

global

e Área central

e Krug Bernad

contextual Navegação de rodapé

Parte Inferior

Nielsen, Krug e Lynch e Horton

Tabela 3 – Resumos das pesquisas sobre padrão de posicionamento de elementos de interface.

Pontos Positivos: As chances do usuário sentir dificuldade para navegar é reduzida.

Pontos Negativos: Pode fazer com que a interface se parece com outras interfaces que seguem as mesmas normas.

O autor ainda mostra um wireframe como resultado da relação entre os elementos da Tabela 3 na Figura 17 abaixo:

Figura 22 – Exemplo de organização de interface utilizada para construção de websites.

As normas e padrões a serem seguidos são variados, e abordam várias seções do layout, abaixo um exemplo do autor Felipe Memória (2006) na Figura 18:

Figura 23 – Modelos de caixa de busca aberta

Graças a popularização dos sites de busca, há uma tendência dos mecanismos de buscas serem encontrados como “protagonistas” da página em que estão. Já em sites corporativos, o autor diz que o padrão mais utilizado é o campo busca alinhado ao canto direito da página.

Com relação ao posicionamento ideal para a Navegação global ou menu, o autor Adkisson, citado por Felipe Memória mostra que: “ 87% dos sites pesquisados

posicionavam seus links de navegação global no topo da página, sendo 43% no formato de fichas e 39% como barra de navegação global” (MEMÓRIA, 2006. p. 64).

Apesar do numero de websites que utilizam a popular navegação horizontal, ainda existem casos onde a navegação vertical se faz necessária, como mostra Memória (2006): Em sites que demandam uma grande quantidade de links para diferentes áreas, a navegação disposta na vertical é mais eficiente. A vertical também resolve melhor quando existem a necessidade constante de adicionar ou retirar links, muito comum em grandes portais. (MEMÓRIA, 2006. p. 65).

Uma outra metodologia que mercê atenção por ser compatível com os objetivos almejados para o redesign da interface gráfica do portal de Barra Mansa é citada por Luiz Agner (2006) na figura 8, presente no levantamento de dados, sobre o Modelo 3C.

Pontos Positivos: O usuário já consegue utilizar estes tipos de objetos de interação devido a experiências anteriores.

Pontos Negativos: Pode causar monotonia no visual da interface por ser parecido com outras que utilizam as mesmas normas.

9.3 Ergonomia

A ergonomia está diretamente ligada à usabilidade. É ela quem vai cuidar da relação entre o usuário e os objetos de interação presentes na interface gráfica do portal de Barra Mansa. Os objetos a serem trabalhados no redesign do portal são: Nomes, Ícones, Códigos de cores, Códigos de formas, Cores, Fontes, Bordas, Arranjo (layout) e Fundos.

Será necessária a avaliação da interface, para comprovar se a ergonomia está juntamente com a arquitetura da informação, propiciando usabilidade aos usuários. 69

Existem três metodologias para a realização desta avaliação: Avaliações Analíticas, Avaliações Heurísticas e Inspeções por listas de verificação.

Pontos Positivos: Concisão, uniformidade e fluidez.

Pontos Negativos: Monotonia.

10 - ANÁLISES DE SIMILARES

Agora vamos realizar a análise de algumas áreas relevantes dos projetos similares ao portal da Prefeitura de Barra Mansa.

10.1 Governo do Estado de Minas Gerais

Topo

O topo, Figura 19, abriga um menu principal, contendo as áreas do site, links de acessibilidade, campo de busca, links de contato, links para relacionados a ajuda e redes sociais. Logo, podemos perceber que com o topo do site, é possível ter acesso a todas as áreas do portal.

Figura 24 – Topo ou cabeçalho do Portal do Governo de Minas Gerais.

No menu principal, é fácil perceber três grandes grupos de usuários que acessam o portal: Cidadãos, Empresas e Servidores Públicos podemos chamá-los de usuários específicos. Os links são destacados de duas formas: Pela cor alaranjada, diferente do vermelho que engloba os links institucionais, e pelo grafismo com perspectiva, que desloca os links “Cidadão, Empresa e Servidor, município, estado” para cima, chamando a atenção do usuário.

Ao lado destes links, existe um espaço que auxilia na navegação. Chamado “Atalho rápido”, ele suporta os links mais requisitados pelos usuários, facilitando o acesso dos mais experientes, que já familiarizados com a interface, encontram o que 71

procuram com mais rapidez e conforto. Com premissas de atender a navegabilidade, existe o link “Página inicial”, que além do clique no logotipo, leva o usuário a voltar a página inicial facilmente. Nota-se também um link ao lado do ícone de RSS, com o nome de “o que é”, dedicado a usuários leigos no assunto, a fim de explicar do que se trata o link RSS.

Vale ressaltar a região dedicada aos links de acessibilidade. Botões para aumentar e diminuir a letra dos textos auxiliando a leitura para usuários com limitações óticas. Botão para alterar o contraste facilitando a leitura para usuários daltônicos ou com outro tipo de limitação em questões de iluminação da página, e o link acessibilidade que organiza as informações de modo a atender o público com deficiência visual.

Serviços

Figura 25 – Área dedicada a links de serviços e informações.

Área do site, Figura 20, dedicada aos usuários específicos. Além do nome dos links, existem ícones ilustrativos, facilitando o entendimento do usuário. Existem ainda campos para busca e um list menu, que oferece os serviços por categoria. Esta área é organizada em estilo de ficheiro, dividindo as áreas de interesse.

Notícias

Figura 26 – Área de notícias.

A Figura 21 mostra a área dedicada para as notícias. As principais estão dispostas em uma galeria, onde são ilustradas por imagens grandes, tornando assim esta região uma área nobre do site pois causam impacto visual nos usuários. Já as outras notícias, são tratadas de forma mais simples: Título em vermelho, data da postagem e chamada resumindo o assunto da notícia.

Conheça Minas

Figura 27 – Área dedicada a apresentação da região.

Podemos observar na Figura 22 o tratamento organizado sobre assuntos relacionados à região mineira. Texto ilustrado por imagens que representam todos os pontos fortes da região e abaixo, uma área que mostra Minas em números, tornando a leitura interessante e menos cansativa, pois mostra muitas informações

de forma

direta.

Banners

Figura 28 – Área para banners e propaganda.

A Figura 23 mostra a única região da interface dedicada a apresentar banners promocionais.

Proximidade com o usuário

Figura 29 – Redes sociais e Enquete.

A Figura 24 nos mostra a preocupação dos desenvolvedores em receberem feedback dos usuários através do uso de enquete, uma maneira simples e fácil de se obter retorno do público. Além disso, o site mostra estar alinhado com os sites de comunidades na web, como os populares Twitter e Youtube.

Rodapé

Figura 30 – Rodapé do Portal do Governo de Minas Gerais.

A Figura 25 nos mostra que o rodapé repete os principais links encontrados no topo e exibe também botões diferenciados de acesso a serviços importantes como disque denúncia e número de emergência.

10.2 Prefeitura de Curitiba

Topo

Figura 31 – Topo Portal Prefeitura de Curitiba.

A Figura 26 mostra a disposição dos links do site da Prefeitura de Curitiba. Ele possui 2 menus. O primeiro, posicionado na parte superior exibe links ligados a questões de navegação como o “Início”, “Mapa do Site” e “Acesso Rápido”. Abaixo encontramos um grande campo de busca, previsão do tempo e ícones sem descrição do que sejam. Na parte inferior do topo, encontramos o menu que liga o usuário ao conteúdo do site e apresenta também, discretamente, a divisão dos usuários específicos: Cidadão, Empresa, Servidor e Turista.

Notícias e Classificação dos usuários

Figura 32 – Área de notícias e categorias de usuários.

É na figura 27 que podemos notar a primeira discriminação clara entre os tipos de usuários específicos. Divididos por boxes coloridos, o portal oferece uma chamada com link para o conteúdo que interesse à aquele tipo de usuário. 77

Em destaque, temos as notícias, que são exibidas de duas maneiras: Cinco notícias que aparecem ilustradas com chamada e três chamadas de notícias com o assunto em verde.

Acesso Rápido

Figura 33 – Área dedicada ao acesso rápido.

Na figura 28 nota-se um grande empenho dos desenvolvedores ao elaborarem uma área dedicada a links de acesso rápido. A seção é dividida em dois momentos: no primeiro, existem as categorias e cada uma delas possui uma divisão com dois grupos: “Assuntos”, que contém ícones e descrição de links e “Mais Acessados”, que contém uma pequena lista com os links mais acessados por aquele tipo de usuário.

No segundo momento, foi empregado o uso de uma tecnologia de nome Nuvem de Tags, que exibe de forma descontraída e direta os termos com mais evidência no site.

Proximidade com o usuário

Figura 34 – Redes Sociais.

O portal disponibiliza parte da coluna lateral, como pode ser visto na Figura 29, para tratar das redes sociais, chamada para envio de sugestĂŁo do usuĂĄrio para o portal e banner com algum assunto relacionado Ă algum evento.

Multimídia e Notícias

Figura 35 – Seção do portal que exibe notícias e conteúdo multimídia.

A Figura 30 mostra como ficaram distribuído os conteúdos de notícias e multimídia. Não houve aproximação dos assuntos que são de mesma categoria, como podemos observar a ocorrência de notícias na parte superior, lado esquerdo e na parte inferir. Em ambos, a notícia tem formato diferente, ocorrendo também repetição de assunto.

O portal conta com um espaço nesta seção para exibição de vídeos, link para rádio da cidade e chamada para entrevista em áudio, mais conhecido na web como Podcast.

Boletim de ocorrência e Banners

Figura 36 – Boletins de ocorrência e banner.

O portal disponibiliza como podemos observar na Figura 31, informações que são atualizadas freqüentemente sobre o transito. O texto é de formatação simples. Abaixo, encontramos um espaço que exibe dois banners, com assuntos relacionados a 82

campanhas realizadas pela prefeitura. É possível notar setas de navegação, indicando que existem mais banners nesta seção.

Notícias e banners

Figura 37 – Notícias e banners.

A Figura 32 nos mostra uma nova ocorrência de área dedicada à notícias. Notase que existem notícias de assuntos iguais aos já vistos nas seções anteriores. A formatação do texto não seguiu nenhum padrão das notícias da parte superior. Abaixo das notícias, encontramos dois banners de formato igual ao que já vimos na seção Boletim de ocorrência e banners.

Rodapé

Figura 38 – Rodapé do portal da Prefeitura de Curitiba.

A Figura 33 mostra a organização do conteúdo aplicada no rodapé do portal. Os links foram classificados e separados por tons diferentes. Nota-se também o uso do telefone utilizando a tecnologia Skype.

10.3 Prefeitura de Florianópolis

Topo

Figura 39 – Topo do portal da Prefeitura de Florianópolis.

A Figura 34 mostra a organização de links adotada no topo. São três menus principais, sendo que o menu “Governo” e “Serviços” são integrados ao menu superior. A divisão de conteúdo com base nos usuários específicos não é tão completa como nos outros sites pesquisados. Neste topo encontramos um espaço para banners, links de intranet e webmail. 84

Notícias

Figura 40 – Seção dedicada a notícias no portal.

A Figura 35 nos mostra a área dedicada a exibição de notícias no portal. A seção começa com três notícias em destaque com fotos ilustrativas, abaxio mais três notícias de formato diferenciado também recebem imagens ilustrativas, mas em tamanho reduzido. Ao lado, uma lista com quatro notícias em formato simplificado: Assunto, Data e chamada. Encerrando a seção, temos um box intitulado “mais notícias” que exibe

assunto e chamada da notícia. Apesar da ocorrência de notícias variar no formato, não ocorreu repetição de assunto como podemos presenciar no portal de Curitiba.

Lateral

Figura 41 – Lateral do portal da Prefeitura de Florianópolis.

A Figura 36 apresenta “Calendário”, “Destaques” em formato de banners, espaço para um banner de tamanho maior do que os em destaque e espaço para Twitter da prefeitura.

Rodapé

Figura 42 – Rodapé do portal da Prefeitura de Florianópolis.

A Figura 37 exibe o rodapé adotado na interface, em comparação com os já apresentados neste capítulo, ele é o mais simples, contendo uma linha de direitos autorais e três link básicos: Política de Privacidade, Mapa de Navegação e Créditos. Dos três, o único link que apresenta relevância ao público-alvo é o Mapa de Navegação.

11 - SÍNTESE Abaixo, a proposta inicial dos itens que compõem a síntese do projeto:

Princípios e Recomendações de Usabilidade - consistência e padrões; - design estético claro e objetivo; - fornecer atalhos; - autodescrição (feedback) - fornecer feedback informativo; - conformidade às expectativas do usuário; - facilidade de aprendizagem.

Aplicando Usabilidade ao projeto

- Definição dos usuários diretos e indiretos e das categorias de usuários para quem a interface gráfica irá atender; - Definir os objetivos que cada categoria terá em relação a interface gráfica e simular como os usuários, a partir de suas características, irão realizar seus objetivos; - Produção de duas personas para cada um dos grupos de usuários específicos.

As Estatísticas

- Colher os dados estatísticos do portal atualmente e direcionar esses números na execução da etapa de arquitetura da informação, ergonomia, personas e usabilidade.

Arquitetura da Informação

- Coletar o conteúdo a ser exibido na home do portal, e encontrar a relevância dos conteúdos e elaborar a hierarquia apropriada a ser adotada, alinhando às premissas de usabilidade e fazendo o uso das estatísticas e perfis dos usuários.

Ferramentas para arquitetar e surpreender

- Fazer uso da Escala de Diferencial Semântico e Questionários para saber dos usuários de teste suas impressões quanto a nova interface elaborada; - Geração de ideias a fim de elaborar inovações e layouts atraentes e funcionais para as áreas mais importantes da interface.

Normas e boas práticas para o projeto

- Desenvolvimento de wireframes;

Elemento de interface

Posicionamento

Marca da empresa

Canto superior esquerdo

Busca

Parte Superior

Navegação global

Parte superior com links na horizontal

Breadcrumbs

Parte superior, abaixo da marca da empresa

Conteúdo

global

e Área central

contextual Navegação de rodapé

Parte Inferior

Tabela 4 – Posicionamento de elementos na interface.

Ergonomia -

Definição dos objetos de interação: Nomes, Ícones, Códigos de cores, Códigos de formas, Cores, Fontes, Bordas, Arranjo (layout) e Fundos.

- Avaliação da interface pelo método Inspeções por listas de verificação

12 – GERAÇÃO DE ALTERNATIVAS

Arquitetura da Informação

Podemos definir Arquitetura da Informação como a análise do conteúdo principal a ser distribuído da melhor forma a atender os usuários, definindo hierarquias para a informação e priorizando o que deverá ser destacado. Além de garantir organização e promover usabilidade à interface.

No caso deste projeto, já encontramos uma divisão de conteúdo e uma determinada organização do atual Portal de Barra Mansa, fazendo com que a tarefa seja melhorar o que já existe, sugerir uma nova organização de links e até mesmo links novos que tornem o projeto mais interessante aos usuários.

Podemos ver na Figura 37 como o Google Analytics nos ajuda a realizar uma análise dos links mais acessados na home do portal, afim de classificá-los para os três grupos de usuários a qual a nova interface do Portal está sendo desenvolvida.

Figura 43 - Uma das imagens geradas pelo Google Analytics

Wireframes

De um modo geral, Wireframes são considerados como esboços preliminares aos layouts finais, eles podem representar a arquitetura da informação de maneira gráfica. O autor James Kalbach (2007), define da seguinte forma: Eles mostram o esqueleto do sistema de navegação independente do design visual final, ou a campanha primária de informações básicas necessárias em cada página. Wireframes são a ferramenta visual para descobrir como você progredirá a partir dos requisitos, conceito e mapa do site para páginas desenhadas. Eles lhe permitem desconstruir o problema e propor soluções apropriadas. (KALBACH, 2007, p.282)

Uma outra questão que deve ser levantada sobre Wireframes é sobre a Fidelidade. Kalbach (2007) fala sobre: Assim como protótipos, existem wireframes de alta e de baixa fidelidade. Wireframes de baixa fidelidade podem nem mesmo mostrar o layout, podem ser apenas uma lista dos tipos de navegação, conteúdo e a funcionalidade necessária para cada página. Wireframes de alta fidelidade podem claramente sugerir um design final, incluindo o tamanho e a posição dos elementos navegacionais. A maioria dos designers web cria wireframes que caem em algum lugar entre wireframes de alta e baixa fidelidade. (KALBACH, 2007, p.283)

Para a home do Portal da Prefeitura de Barra Mansa foram gerados cinco wireframes. Três que apresentam fidelidade média, pois não contém indícios de layout porém apresentam alguns títulos reais do projeto e dois wireframes de alta fidelidade, pois já mostram indícios de layout e permitem também testes prévios de usabilidade, antes do layout final.

Wireframes de Baixa Fidelidade

A Figura 39 apresenta o Wireframe 1, que mostra simplicidade e equilíbrio quanto as áreas de destaque. Nota-se o mesmo peso de destaque visual para a área de Notícias e Serviços. As duas têm basicamente o mesmo tamanho. Isso faz com que a maior parte do público que busca os links relacionados à serviços não encontrem dificuldade na busca dos mesmos, e ao mesmo tempo, as notícias ilustram e atualizam sempre a home, pois a foto da matéria em destaque ajuda a ilustrar o visual do site.

Figura 44 – Wirefram1 de baixa fidelidade

Notícias

São exibidas quatro matérias: uma com grande destaque e outras com destaques menores, todas com foto ilustrativa, fazendo com que a leitura fique mais atraente.

Serviços

Foram criadas três chamadas, uma para cada público. Abaixo do título haverá um texto explicativo, indicando qual o tipo de conteúdo o usuário encontrará após o clique.

Banner

Abaixo da área de Serviços, existe um espaço para banners, que possibilita a comunicação da Prefeitura com os cidadãos sobre novos projetos, recomendações, avisos ou qualquer outro tipo de utilidade pública a ser divulgado de maneira mais chamativa e dinâmica.

Projetos

Espaço dedicado a exibição dos principais projetos da prefeitura. Contam com a exibição de uma imagem e breve texto explicativo.

Links

Área dedicada à exibição de links importantes, como forma de atalho para os links mais acessados, pode ser utilizado este espaço. Possuem um formato não convencional da imagem ilustrativa, chamando atenção do usuário.

Wireframe 2

Com características ao Wireframe 1, o Wireframe 2, na Figura 40, apresenta um layout mais enxuto, exibindo somente os links mais essenciais da página, possibilitando um futuro layout mais limpo e atraente.

Figura 45 – Wireframe 2 de baixa fidelidade

Notícias

Imagem grande da matéria em destaque, auxiliando na função de ilustração imagética da página. Abaixo conta com mais 2 notícias.

Serviços

Elaborado com esquema de abas, ele já exibe a lista dos serviços oferecidos em cada categoria, facilitando ao usários na busca de links.

Banner

Links

Em formato de botão, ou imagem, a área dedicada à exibição de links importantes, como forma de atalho para os links mais acessados, pode ser utilizado este espaço.

Wireframe 3

Diferente dos outros Wireframes, o Wireframe 3, Figura 41, apresenta como área de destaque um espaço para banner, ao contrários dos anteriores que apresentavam uma imagem grande para notícia. Aqui poderá ser mostrada a campanha vigente da Prefeitura, e/ou divulgação de outros assuntos de grande importância.

Figura 46 – Wireframe 3 de baixa fidelidade

Serviços

Ao lado do banner principal, encontramos 3 list menus, que ao clique do cursor, será exibida uma lista com os links de serviços de cada categoria.

Notícias

As notícias são exibidas em um mesmo formato, com foto e chamda.

Banner

Abaixo das notícias, no lado esquerdo, existe uma área para banners, que possibilita a comunicação da Prefeitura com os cidadãos sobre novos projetos, recomendações, avisos ou qualquer outro tipo de utilidade pública a ser divulgado de maneira mais chamativa e dinâmica.

Links

Área dedicada à exibição de links importantes, como forma de atalho para os links mais acessados, pode ser utilizado este espaço. Possuem uma imagem ilustrativa e uma pequena chamada.

Wireframe 4 Diferente dos wireframes anteriores, o Wireframe 4, Figura 38, foi desenvolvido para que apresentasse alta fidelidade ao que se espera do layout final do projeto.

Figura 47 â&#x20AC;&#x201C; Primeiro Wireframe de alta fidelidade

Nomes dos links 99

Foram utilizados nomes auto-explicativos, ou seja, com o significado direto de sua função.

Ícones Não foram utilizados ícones junto aos títulos afim de deixar a interface mais leve visualmente.

Fontes Nesta fase, a fonte ainda não é escolhida como a oficial para o layout final, mas se mostra muito adequada em questões legibilidade porém a família Myriad Pro não é considerada fonte web, logo deverá receber atenção quanto a isto.

Fundos Na interface predomina o fundo branco, tendo ilustrações leves somente no topo.

Foco da Página O foco da página se divide em dois: A atenção se volta para a imagem da notícia principal e também para os links de serviços, pois estão nos 570 primeiros pixels do tamanho total, considerada a região de maior visibilidade na web por conta das resoluções do monitores.

Hierarquia e Disposição do Conteúdo Neste layout os usuários são claramente priorizados. As áreas dedicadas a eles são ilustradas e possuem links selecionados a partir dos mais acessados. Ao lado temos a área para notícias, que deverá ser abastecida com novidades e eventos que estão acontecendo na cidade. Ao lado, de maneira discreta fez-se a utilização de uma área de banner padrão para divulgação de algum serviço ou quaisquer outra notícia por parte da Prefeitura ou Governo a fim de informar a população.

Depois das áreas principais, Usuários e Notícias, temos outras áreas de utilidade pública, mostrando de um modo geral a cidade, atendendo não só a população local como também usuários que não moram na cidade, para que possam ter um meio de conhecê-la.

100

Outra área importante valorizada na home, é a área de Oportunidade de Emprego. Aqui o usuário encontra este serviço já disponível no site atual de maneira clara e direta, tornando uma ferramenta aliada da população.

Monotonia Não é detectada qualquer área vazia no wireframe desenvolvido.

Resolução (largura e altura em pixels) As dimensões são: 940px por 1200px.

Elementos de Navegação Foram encontrados links de navegação, no topo e no rodapé.

Wireframe 5

Seguindo a mesma linha do Wireframe 4, o Wireframe 5, Figura 39, traz uma divisão de áreas diferente do Wireframe 4. As áreas do Cidadão, Empresas e Servidor Público são exibidas através de abas, após o clique no menu principal. Ao lado, com o mesmo peso visual das Áreas dos Usuários as Notícias da Semana e, abaixo delas, vem a classificação de outras notícias voltadas a Eventos e Cultura. Encontramos também em, destaque secundário, texto e imagem para Geoprocessamento e Perfil Rural, que durante no site atual são áreas de grande acesso. E uma ferramenta diferente do Wireframe 4 é a Enquete, um veículo de comunicação direta com a Prefeitura, através de uma pesquisa de opinião simples.

101

Figura 48 – Wireframe 5

Nomes dos links Foram utilizados nomes auto-explicativos, ou seja, com o significado direto de sua função.

Ícones Não foi utilizado ícones junto aos títulos afim de deixar a interface mais leve visualmente.

Fontes

102

Nesta fase, a fonte ainda não é escolhida como a oficial para o layout final, mas se mostra muito adequada em questões legibilidade porém a família Myriad Pro não é considerada fonte web, logo deverá receber cuidados quanto a isto.

Fundos Na interface predomina o fundo branco, tendo ilustrações leves somente no topo.

Monotonia Não é detectada qualquer área vazia no wireframe desenvolvido.

Resolução (largura e altura em pixels) As dimensões são: 940px por 1068px.

Elementos de Navegação Foram encontrados links de navegação, no topo e no rodapé.

103

13 –TESTES DE USABILIDADE

Após o levantamento de dados sobre testes de usabilidade (capítulo 6), foi adotado o seguinte teste de usabilidade: uma entrevista semi-estruturada, escala de diferencial semântico e filmagem da tela e do usuário simultaneamente durante a entrevista, sendo que dois dos usuários testados não receberam gravação por falta de equipamento adequado.

Figura 49 – Recortes de imagem de alguns dos testes filmados

Foram entrevistados seis voluntários, de perfis diferentes. Entre eles, usuários experientes e amadores. As perguntas utilizadas na entrevista durante a gravação foram:

104

Nome: Idade: Sexo: Localidade: Ocupação/Profissão: Local de maior tempo de acesso a internet:

1. O nome utilizado nos links deixa claro sua função? Quais links você não entendeu?

2. O website contém informações que seriam úteis para você? Do que você sente falta em sites desse tipo?

3. Encontre as redes sociais, Endereço da Prefeitura, Campo Busca, Notícias Recentes. Você consegue localizar informações com facilidade?

4. As informações são apresentadas em uma forma estéticamente agradável?

5. Ficou claro o propósito do site com relação ao conteúdo apresentado?

6. Existe algo que te encomoda? Descreva o que é e porquê.

7. O que você acha desnecessário neste website?

8. Existe algo que te surpreendeu? Descreva.

9. A divisão de categorias, Espaço Cidadão, Acesso do Empresário e Área do Servidor é útil ou se torna uma medida confusa?

10. Qual dos dois wireframes te agradou mais? Porquê?

105

Após a entrevista durante a filmagem, o usuário recebia o formulário, Figura 42, de Diferencial Semântico para ser preenchido.

Figura 50 – Formulário de Diferencial Semântico

O Wireframe 4, foi o escolhido por todos os entrevistados como sendo a melhor proposta. A maioria das perguntas foram respondidas positivamente, mas ainda sim houveram ressalvas sobre alguns itens:

O link ouvidoria, poderia ter um nome com significado direto; Os links acima do campo busca não estão deixando claro sua função; Mais destaque para eventos da cidade;

106

O título Destaques da Semana não deixa claro que ali são notícias;

Listadas as alterações, podemos retificá-las diretamente no desenvolvimento do layout final.

Os Entrevistados

Abaixo, a ficha de cada um dos entrevistados:

Nome

Richard N. de Oliveira

Idade

21 anos

Sexo

Masculino

Cidade

Barra Mansa

Ocupação / Profissão Operador de Tráfego de Conteúdo

Acesso a internet Casa e trabalho Comentários

“Exposto dessa maneira fica bem simples de visualizar.”

Observações

Participou do vídeo e preencheu o questionário emocional

Pontuação Q.E.

42 pontos Tabela 5 – Dados do usuário voluntário Richard

Nome

Eric Briam Nunez

Idade

25 anos

Sexo

Masculino

Cidade

Barra Mansa

Ocupação / Profissão Estudante de Design Acesso a internet Casa e faculdade Comentários

“Acho legal ter um meio mais direto de comunicação com a Prefeitura”

107

Observações

Participou da entrevista e preencheu o questionário emocional

Pontuação Q.E.

40 pontos Tabela 6 – Dados do usuário voluntário Eric

Nome

Ariana Isabela

Idade

26 anos

Sexo

Feminino

Cidade

Barra Mansa

Ocupação / Profissão

Gerente de Equipe de Webdesigners

Acesso a internet Casa e trabalho Comentários

“Eu acho legal ter mais destaque pra eventos da cidade.”

Observações

Participou do vídeo e preencheu o questionário emocional

Pontuação Q.E.

33 pontos Tabela 7 – Dados da usuária voluntária Ariana

Nome

Abner Azevedo

Idade

22 anos

Sexo

Masculino

Cidade

Volta Redonda

Ocupação / Profissão

Webdesigner

Acesso a internet Trabalho e faculdade Comentários

“Muito legal.”

Observações

Participou da entrevista e preencheu o questionário emocional

Pontuação Q.E.

42 pontos Tabela 8 – Dados do usuário voluntário Abner

108

Nome

Jorge Fernandes da Silva

Idade

57 anos

Sexo

Masculino

Cidade

Volta Redonda

Ocupação / Profissão

Técnico de Materiais

Acesso a internet Casa Comentários Observações

Participou do vídeo e preencheu o questionário emocional

Pontuação Q.E.

nulo Tabela 9 – Dados do usuário voluntário Jorge

Considerando que o Q. E., Questionário Emocional, possui pontuação de 0 a 5 com 9 linhas de adjetivos que avaliam o layout, podemos definir como Ótimo para 45 pontos, Bom para 36 pontos, Regular para 18 pontos, Ruim para 9 pontos e Péssimo para 0 pontos, a maioria dos entrevistados mantiveram suas impressões de 33 a 42 pontos, mostrando que a interface desenvolvida se mostra alinhada ao objetivo do projeto que é ter usabilidade.

109

14 – PARTIDO ADOTADO

Figura 51 – Layout final proposto ao projeto.

110

O layout final proposto, foi feito a partir do Wireframe 4. Nele aplicamos as ressalvas concordantes com o projeto levantadas pelos participantes da pesquisa. Outro ponto que foi mudado do Wireframe 4 para o Layout final, foi a questão do banner lateral. Para que houvesse uma hierarquia mais definida, uma das áreas em destaque deveria prevalecer. A mais adequada foi Espaço do Cidadão, logo, foi aumentada a largura da lateral em que se localiza e a de notícias foi diminuída. Assim, o destaque não ficou tão dividido entre as duas partes como ficava no Wireframe 4. Na figura 43.1 podemos ver como estava ficando o layout sendo fiel ao Wireframe 4:

Figura 52 – Geração de alternativa do layout final proposto ao projeto.

111

14.1 Especificações Técnicas

Tamanho

O layout possui 915 pixels de largura e 1250 pixels de altura. Este tamanho atende a quase todas as telas utilizadas para navegar no site, como podemos observar na Figura 14 do capítulo 8 onde estão exibidas as estatísticas de acesso ao Portal hoje.

Cores

A Prefeitura de Barra Mansa, não possui manual específico para a logo atual. Mas é possível ver que as cores que devem acompanha-la precisariam ser concordantes com a cor Laranja. Utilizando uma ferramenta de cores gratuita na web, Figura 44, o Kuler (kuler.adobe.com), da Adobe, foi possível encontrar nas cores complementares do Laranja, uma paleta agradável e concordante com o projeto. A partir desta consulta ficaram definidas as cores principais: Azul, Laranja e Bege. Três cores foram suficientes para contribuir na organização dos elementos no layout. Na interface as cores foram utilizadas como ferramenta para organizar o conteúdo. As notícias são em azul e as áreas dedicadas aos usuários específicos são em laranja e bege. Assim, ao realizar geral sobre o layout o usuário consegue notar uma separação a partir das cores.

112

Figura 53 – Aplicativo Kuler exibindo as cores complementares ao laranja.

Na Figura 45, podemos ver a paleta gerada a partir da consulta ao Kuler. O laranja foi utilizado nos principais títulos, como por exemplo, Espaço do Cidadão e Cultura e Lazer. Os azuis estão sendo utilizados principalmente na área de notícias, mas também em textos corridos como na descrição da Cidade de Barra Mansa, e também são utilizados no rodapé. O Bege, é utilizado no menu principal, e nos outros menus disponíveis nas áreas dedicadas aos usuários específicos.

Figura 54 – Paleta de cores adotada para o projeto.

113

As cores adotadas para o fundo do site foram o Branco e o Cinza. Dessa forma, a sensação de alinhamento e organização são maiores. Além disso, as cores claras aplicadas como fundo, mostram atributos que a prefeitura quer mostra no Portal: transparência, seriedade e paz.

Grid O item mais valorizado para que se atingisse uma qualidade visual, foi o espaçamento. Aliado ao item alinhamento, essas duas características fazem com que a leitura do layout seja feita de maneira organizada, sem confusão visual e com sensação de conforto na leitura, já que um portal de prefeitura sempre terá um volume de conteúdo em sua página principal.

Para gerar o grid utilizado no layout, Figura 46, foi utilizada uma ferramenta alocada ao software adotado para a execução do layout, Photoshop, um plug-in chamado GuideGuide .

Figura 55 – Grid adotado ao projeto.

114

Nesta ferramenta é possível controlar o número de colunas e o espaçamento entre elas de acordo com a necessidade do projeto em questão.

Figura 56 – Plug-in GuideGuide www.cameronmcefee.com/guideguide.

No livro Criar Grids, a autora Beth Tondreau (2009) fala sobre a questão do grid interrompido: Em um projeto que inclui uma gama de questões informacionais, um grid agrega variações, clareza e autoridade. Um grid bem-planejado permite ao designer diversificar o layout da página, mantendo uma estrutura coerente. Três colunas podem conter tanto pequenas informações, como simples cabeçalhos ou muita informação, como títulos e subtítulos. (TOUDREAU, 2009, p. 166).

Para o projeto colocamos 16 colunas com espaçamento entre elas de 25px. Este número foi alcançado após algumas tentativas de outros números, até que algum se mostrasse de acordo com as idéias do conteúdo proposto. Um processo de desconstrução do grid.

Fontes 115

Existem duas fontes sendo utilizadas no projeto, Tahoma e Myriad Pro. Para que fique claro o uso de fontes sem serifa, podemos citar os autores Hans Peter e Friderich Forssman (2007), autores do livro Primeiros Socorros em Tipografia: A escrita na tela do monitor é instável. Os mesmos caracteres podem aparecer firmes ou tremulando, parecer mais claros ou escuros, nítidos ou fora de foco e sobre um fundo mais claro ou mais escuro. (...) Os tipos para tela não devem ser finos/light demais nem ter contrastes fortes. Deve-se evitar que os caracteres sejam difusos e percam a relação entre eles ou que possam ser confundidos. (FRIDERICH E FORSSMAN, 2007. p. 84).

A fonte Myriad foi utilizada por questões de legibilidade e estética, já a Tahoma, foi utilizada principalmente por questões de usabilidade na web. Existem fontes classificadas como Fontes HTML ou Fontes web. A Tahoma pertence a esse grupo, logo ela foi escolhida por atender aos requisitos que a web necessita e é a que está em uso na maior parte dos textos no layout. Assim, o site não precisará ter muitas fontes em imagem, somente os títulos principais em laranja, que estão em Myriad. Já aos sublinks das sessões dedicadas aos usuários específicos, será utilizado o recurso Fonte-face, que a grosso modo, pode se entender como um método utilizado para transformar uma fonte comum em fonte web, auxiliando na indexação do site nos buscadores web, como o Google, por exemplo. Isso facilita no momento em que o usuário pesquisa nestes buscadores algum conteúdo relacionado a prefeitura de Barra Mansa, por exemplo, sendo o conteúdo em fonte web, o buscador consegue acessar o conteúdo do portal por estar “legível” para o sistema do buscador.

14.2 Forma e Função

Topo

116

Figura 57 – Topo ou Header do layout final.

Aqui foram trabalhadas as questões de navegação, acessibilidade e identidade visual. O menu, disponibiliza os links de forma legível, com nomes de fácil entendimento e de maneira organizada.

Os links A+ A- e Contraste no topo, são links de

acessibilidade, onde usuários que sentirem necessidade podem aumentar o tamanho da letra do texto e também podem inverter as cores de fundo e letra. O campo Busca permite três maneiras de pesquisa: uma busca geral, outra dentro da área de serviços e outra sobre telefones. Essas questões não são encontradas hoje no site atual da Prefeitura. Foi adicionando um link mais discreto para webmail. Ele serve de atalho para os usuários que acessam o portal com maior freqüência e possuem conta neste Webmail, logo, ele não precisa de tanto destaque já que é direcionado um público específico e experiente. Mas é importante que esteja em uma local de fácil acesso.

No topo foi trabalhado também de modo a ilustrá-lo, o ícone representativo da cidade, A Ponte dos Arcos. De maneira sutíl ela é um forte indicativo de que se trata da Cidade de Barra Mans. A logo utilizada hoje pela prefeitura foi mantida a direita, modo recomendado pelas normas de navegação web, e ao passar o cursor do mouse sobre a logo, é mostrada uma frase em tamanho pequeno dizendo “Voltar a página inicial”, quando o usuário estiver em alguma página interna.

Ainda sobre o menu, é oferecido no projeto um funcionamento aos links dos usuários específicos, em que, ao passar o cursor do mouse sobre algum dos links marcados de borda branca, é mostrada uma aba com todos os sublinks relacionados ao link escolhido, como podemos ver o exemplo do link Empresas, Figura 48.1:

117

Figura 58 – Funcionamento do submenu dos links de usuários específicos.

Espaço Cidadão

Basicamente de modo geral, todo site possui uma área de maior destaque. No layout proposto ao projeto, esta área é a Espaço Cidadão, Figura 45.

Figura 59 – Espaço Cidadão e Barra de Mensagens.

Esta área carrega grande responsabilidade, pois ela ocupa grande parte dos 570 primeiros pixels que o usuário encontra em sua tela após acessar o endereço do Portal.

118

A idéia é que neste espaço, o cidadão se sinta valorizado. Para isso, a área mostrará algumas fotos de famílias barramansenses, agregando valor sentimental ao projeto. Para que o usuário entre e sinta como se fosse a imagem da sua própria família neste espaço. Segundo modo de valorizar o cidadão, é oferecer links de utilidade para ele. No site atual encontramos uma organização de links mais fria, já nesta proposta, mostra-se a preocupação de tornar isto mais próximo da realidade, como podemos perceber a inclusão do link Horários de Ônibus, por exemplo. Outro item levantado na pesquisa de usabilidade com os voluntários foi a questão do item Ouvidoria. Este nome, não traduz muito bem sua função, deixando confuso o seu entendimento. Apesar disto, verificou-se que seria mais interessante explicar o nome, do que trocá-lo. Dessa forma, o projeto ensina o usuário o significado da palavra e quando ele encontrar uma situação parecida, ele lembrará do significado graças ao Portal. Junto com a imagem da família, foi inserido um pequeno espaço que diz: “A Prefeitura quer ouvir você” e em seguida o link Ouvidoria, em forma de botão, para que fique claro que é um link.

De maneira discreta porém muito funcional, foi adicionado um campo onde a prefeitura poderá instruir o usuário a navegar no site com dicas simples, ou até mesmo informá-lo sobre alguma notícia ou urgência. É o espaço chamado Recado. Ele pode ser removido, ou, mantido. Um espaço que pode ser muito útil para usuários iniciantes, e que deve ser muito bem utilizado pois o espaço para texto é pequeno, apesar do texto poder ser “rolante”.

Outros Grupos de Usuários

Depois dos cidadãos comuns, outros usuários priorizados na interface são os Empresários e os Servidores Públicos. De maneira menos chamativa e mais objetiva, com intuito de serem áreas de atalho para esses usuários, foram criadas as áreas Acesso do Empresário e Área do Servidor, Figura 50. Cada uma abriga links que foram escolhidos cuidadosamente para atender de maneira mais prática os interesses destes usuários.

119

Figura 60 – Outras áreas específicas a usuários.

Notícias

Responsável por manter o site atualizado, e fornecer informações aos usuários sobre tudo que está acontecendo na cidade de Barra Mansa, foi desenvolvida a área de Notícias, Figura 51.

Figura 61 – Espaço para informar o que acontece na cidade.

120

Toda semana, várias notícias importantes são cadastradas no site. Mas foi identificada durante o teste de usabilidade a falta de praticidade para encontrar notícias relacionadas a eventos que ocorrerão na cidade. Logo, dividimos esta área com notícias secundárias com o nome de Eventos, Cultura e Lazer. Uma maneira de incentivo a cultura na cidade. Pois muitos eventos ocorrem, porém a divulgação as vezes é falha. Além de notícias, foi gerado um espaço para divulgação de banners sobre campanhas da prefeitura ou campanhas vindas do Governo Federal, como por exemplo, orientações sobre o Combate a Dengue.

Informações Gerais

A fim de ressaltar programas, oportunidades e informações sobre a cidade de Barra Mansa, a área inferior do site, Figura 52, foi dividida em três partes:

Figura 62 – Informações gerais.

Cultura e Lazer – Reúne links para conteúdos relacionados a espaços e projetos que abordam cultura e lazer na cidade. Valorizando estes pontos e ao mesmo tempo incentivando o cidadão a explorá-los e freqüentá-los. Oportunidades de Emprego – Uma ferramenta útil que o site atual possui, porém estava muito escondido no site, logo, resolveu-se explorá-lo e, paralelamente, ajudando a movimentar o número de empregadores e empregados.

121

Conheça Barra Mansa – Aqui é possível ao usuário que não é cidadão de Barra Mansa e ou visitante primário ao portal, tenha a oportunidade de conhecer mais sobre a cidade. E também, ao investidor interessado sobre a região.

Rodapé ou Footer

A principal premissa para esta área é que ela apresentasse um conteúdo útil, Figura 53, logo, resolveu-se ressaltar telefones de utilidade pública como Polícia, Bombeiros, e no endereço da Prefeitura existe um ícone, que leva o usuário ao mapa do Google, orientando de forma prática o usuário a enxergar a localização da Prefeitura nas ruas da cidade. Este espaço é um meio de oferecer comunicação direta com a Prefeitura de Barra Mansa de forma organizada e prática ao cidadão.

Figura 63 – Rodapé ou footer apresentando meios de comunicação diretos com a Prefeitura.

Além destes itens básicos, temos links diretos das redes sociais, como Curtir do Facebook, plug-in inserido na página de forma que o usuário participe da rede com apenas um clique e, nesta mesma praticidade, o botão Follow do Twitter, que possibilita o usuário seguir o perfil da Prefeitura. Lembrando que para esses itens funcionarem, o usuário deve estar logado nas redes em seu computador.

122

15 - CONCLUSÃO

O projeto sobre Redesign do Portal da Prefeitura de Barra Mansa mostra um estudo sobre Ergonomia Informacional e Arquitetura da Informação aplicadas a um caso real, onde são avaliadas boas formas de desenvolvimento de uma interface gráfica voltada para usabilidade.

O portal da Prefeitura de Barra Mansa que está disponível hoje na web foi desenvolvido sem qualquer tipo de pesquisa prévia voltada para usabilidade, logo, viuse a oportunidade de realizar um estudo de caso sobre Arquitetura da Informação e Ergonomia Informacional com a possibilidade de aplicação de testes de usabilidade neste projeto.

Foram feitos estudos de casos e estudos bibliográficos voltados a Arquitetura da Informação, Ergonomia Informacional e Usabilidade. Foram levantados dados sobre projetos semelhantes, geração de alternativas e testes de usabilidade antes do desenvolvimento do layout final.

Um dos fatores que tornou difícil o estudo sobre o desenvolvimento de portais governamentais voltados a usabilidade, é a ausência de materiais específicos a este assunto. Muitos dos estudos abordam interface web e interfaces humano-computador de forma genérica, abrindo um leque muito grande de itens a serem pesquisados.

Os estudos sobre Arquitetura da Informação e Ergonomia Informacional mostram como é possível a elaboração de uma interface que ofereça usabilidade a seu público, a partir da análise do conteúdo a ser exibido e a forma como ele será mostrado. Além disso, o Design empregado no projeto se faz presente, para que aja uma interação do público com a interface. O estudo também mostra a importância de se conhecer os usuários, como realizar testes e pesquisas junto a eles para que sejam atendidos no projeto de maneira prazerosa e confortável para a realização de suas tarefas.

123

Com a aplicação dos estudos sobre o conteúdo atual do portal, foi possível desenvolver uma interface mais atraente as usuários, com conteúdo organizado e direto. Os testes realizados com os voluntários forneceram subsídios para que fosse gerado um produto positivo, uma interface que alcança seu objetivo primário que é a usabilidade.

Os testes de usabilidade foram realizados encima de wireframes que apresentavam grande fidelidade a proposta final, porém não foi possível executar testes de usabilidade mais complexos encima da proposta final. Também é possível notar que se o projeto possuísse páginas internas, e não somente a página principal, o tornaria mais valoroso. O número pequeno de voluntários participantes no projeto mostra que: quanto maior o número e qualidade de testes de usabilidade forem empregados ao projeto, maiores as chances do desenvolvimento de um projeto capaz de se tornar referência em meio aos portais governamentais no Brasil.

124

16 - BIBLIOGRAFIA

AGNER, Luiz. Ergodesign e Arquitetura da Informação: Trabalhando com o usuário. Rio de Janeiro: Quartet, 2006.

CYBIS,Walter. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicação. São Paulo: Novatec Editora Ltda., 2007.

ISO 9241. Ergonomic requiriments for office work with visual display terminals (VDTs). Part 10: Dialogue principles.

MEMÓRIA, Felipe. Design para a Internet. Rio de Janeiro: Elsevier, 2006.

NIELSEN, Jakob. Usability Engineering. San Francisco: Morgan Kaufman, 1994.

SHNEIDERMAN, B & PLAISANT, C. Designing the user interface: strategies for effective human-computer interaction. 4. Ed. Addisson Wesley Publisjing Company, 2004.

W3C. Dimensões e características da Web brasileira: um estudo do .gov.br, Rio de Janeiro: Http://www.s2publicom.com.br/imprensa/ReleaseTextoS2Publicom.aspx?press_release _id=24064

125

ANEXOS

126