Você está na página 1de 6

O projeto de identidade visual do portal da prefeitura de Porto Alegre The visual identity project of the Porto Alegre city hall portal

LOBATO, Fernanda Hoffmann M. Engenharia de Produção / Procempa – Cia de Processamento de Dados de Porto Alegre LEIPNITZ, Cristina Esp. Design Gráfico / Procempa – Cia de Processamento de Dados de Porto Alegre SOARES, Leônidas Garcia M. a . Engenharia de Produção / Procempa – Cia de Processamento de Dados de Porto Alegre LEMOS, Marcelo Roennau MBA em E-Business FGV / Procempa – Cia de Processamento de Dados de Porto Alegre

Palavras-chave Identidade visual, Internet, Interação homem-computador.

O artigo descreve o desenvolvimento do projeto de identidade visual dos portais e páginas da Prefeitura Municipal de Porto Alegre. A criação de uma identidade visual para as páginas e portais da Prefeitura visa, sobretudo, a facilidade de busca de informações e serviços que as páginas pertencentes oferecem.

Key-words: Visual identity, Internet, Human-computer interaction.

The article describes the development of the project of the portals and sites of the Porto Alegre City hall visual identity. The creation of a visual identity for the sites and portals aims at, over all, the easiness of search of information and services that the sites offer.

1 - Introdução

Na década de 90 a Web disseminou-se de forma exponencial em escala planetária. Em um curto espaço de tempo, todo o tipo de negócio e indústria procurou criar sua representação no mundo virtual: portais, páginas institucionais, comércio eletrônico, etc. Com a disseminação da rede e dos microcomputadores, mais pessoas começaram a interagir com computadores. Muitas dessas pessoas sem experiência com computadores, com variados níveis educacionais, sociais e de campos profissionais, não necessariamente ligados à informática. Surgiu, então, a necessidade de desenvolver interfaces que se adequassem à esse novo público.

Em 1995 a PROCEMPA iniciou o desenvolvimento de páginas e soluções para Internet, sendo pioneira em muitas iniciativas no meio, porém a identificação da Prefeitura através de uma marca padronizada e questões como navegação, usabilidade, acessibilidade e até mesmo manutenção de páginas e de conteúdos não estavam contempladas. A partir da contratação de designers na PROCEMPA (julho de 2001), iniciou-se o desenvolvimento dos primeiros projetos voltados a resolução dessas deficiências. Através de um trabalho conjunto à área do desenvolvimento, construiu-se uma primeira versão do editor de conteúdos para inclusão de informações através da Internet e pelo próprio responsável pela página. Em 2003 após a união dos dois setores responsáveis pelos projetos em Internet criou-se a massa crítica que viabilizou o projeto de uma identidade visual para toda a Web da PMPA .

2 - Projeto e desenho e páginas

O desenvolvimento de páginas deve ter por base os conceitos do universo do usuário e os fundamentos teóricos. Vélez e Pastor (2001) consideram que o primeiro passo na criação da interface seria o desenho da informação, a partir do tipo de usuário formatar o produto; após seria realizado o desenho da navegação, as linhas-guia que irão conduzir o usuário dentro do sistema e; por último, o estilo formal, o vocabulário visual dos elementos necessários para a interação, a aparência do sistema.

a) desenho da informação: é a fase do processo onde se organizam as informações em uma estrutura coerente e significativa. A interação, o desenho e a informação são dependentes uma das outras. Organizar a informação significa fazê-la identificável, separando temas e grupos. O desenho da informação deve ser cuidadoso em relação à carga que dispõem a cada momento da interação e

fazer a transição entre uma tela e outra de forma rápida e direta;

b) desenho da navegação: assim como o conteúdo deve seguir uma estrutura, os caminhos e passos a serem seguidos devem estar claros para o usuário. O bom planejamento da navegação permite um caminho mais curto para o objetivo, sem sobrecarregar com operações desnecessárias e excesso de opções. No desenho da navegação define-se o que aparece em cada tela e como elas levam ao objetivo. Também são definidas as opções de se realizar uma tarefa, a forma de aparência dos tempos de processamento e as mensagens de erros e confirmação;

c) o estilo formal: é a criação de um vocabulário visual que transmita o conteúdo de forma clara e agradável ao usuário. Na construção da interface, deve-se levar em conta a existência de padrões particulares, para quem o sistema será construído. Por exemplo: no caso de empresas, a existência da identidade visual, logotipo, cores e tipografia corporativa.

Partindo do princípio que todo objeto criado pelo ser humano, incluindo uma página, ter por finalidade a satisfação de uma necessidade, pode-se identificar três possíveis funções que estes objetos desempenham:

prática, estética e simbólica (LOBACH i , 1981 apud MEDEIROS, 2002).

a) função prática: o objeto satisfaz as necessidades fisiológicas do usuário;

b) função estética: o objeto satisfaz o usuário no plano sensorial do usuário;

c) função simbólica: o objeto satisfaz o usuário em um nível espiritual, estabelecendo ligações com suas experiências e sensações anteriores.

Essas funções são intercambiáveis dentro de um mesmo objeto e dinamicamente modificadas à medida que

os usuários estabelecem outras relações mediante o uso do produto, ou ao trocarem experiências com outros usuários. Um objeto pode exercer as três funções simultaneamente, porém uma delas estará mais em evidência do que as outras. No caso da Web, os diferentes objetivos da página determinarão qual dessas funções será a dominante. O desenho de páginas tem por finalidade satisfazer essas necessidades dos usuários, promovendo a transformação dos conceitos em soluções de forma criativa.

Deve-se lembrar que Internet não pode ser considerada um meio de comunicação visual maduro. Existem restrições para a criação de uma identidade visual na Web. Uma é a variabilidade do meio. O modelo de desenvolvimento, incluído a interface, deve ser flexível à adaptação das diversas configurações de vídeo, tipos e versões de navegadores, deve-se também, levar em conta o peso da página (a soma de todos os seus elementos: códigos, imagens, textos) e a restrição do fluxo de informação.

3 O projeto

O projeto identidade visual das páginas da Prefeitura de Porto Alegre (PMPA) teve inicio em novembro de

2003. Até o momento, não existia uma preocupação formal com a identidade das páginas com a prefeitura.

Além disso muitas páginas eram documentos htmls estáticos, demandando muito tempo da equipe com manutenção (figura I).

A partir da demanda de uma identidade para todas as páginas em novembro de 2003, abriu-se o debate na

equipe para a criação de uma identidade visual que atende-se aos objetivos propostos.

Objetivos

1. Criar um padrão de identidade visual para todas as aplicações Web da PMPA

2. Estabelecer uma unidade visual entre portais, páginas, hotsites, intranets e sistemas

3. Priorizar os serviços em detrimento das informações institucionais

4. Ser acessível aos deficientes

5. Ter interface moderna e agradável, obedecendo a princípios de ergonomia e usabilidade

Figura I –Páginas antigas da Prefeitura de Porto Alegre Foram estudados os portais de diversas
Figura I –Páginas antigas da Prefeitura de Porto Alegre Foram estudados os portais de diversas
Figura I –Páginas antigas da Prefeitura de Porto Alegre Foram estudados os portais de diversas
Figura I –Páginas antigas da Prefeitura de Porto Alegre Foram estudados os portais de diversas

Figura I –Páginas antigas da Prefeitura de Porto Alegre

Foram estudados os portais de diversas prefeituras, e analisado o histórico das páginas da PMPA. Também foram levantados e analisados estudos de usabilidade e design. A equipe de design decidiu por uma interface que mantivesse alguma identidade com o portal antigo, visando minimizar o impacto do usuário e acostumá-

lo às mudanças de forma gradual. O elo de ligação visual escolhido foi a imagem do cabeçalho – uma foto

aérea da cidade tradicionalmente utilizada em sua forma azul monocromática. Paralelamente, foi construída,

junto à equipe do desenvolvimento no setor, a nova versão da ferramenta de edição de conteúdos.

A equipe de design atuou no processo de levantamento de requisitos, colaborando no planejamento do

aplicativo e desenvolvendo o desenho de interface. Inúmeras simulações foram feitas para testar a adequação da ferramenta às necessidades do usuário, também requisitaram funcionalidades no aplicativo para automatizar, simplificar e acelerar a geração de novas páginas. Além de tornar mais rápida e automatizada a criação de páginas a partir do padrão desenvolvido pela equipe de design, o programa também é utilizado pelos próprios usuários nas atividades de atualização de conteúdo. Atualmente a equipe continua desenvolvendo melhorias e ajustes na ferramenta.

Após a aprovação dos primeiros desenhos em dezembro de 2004 a equipe passou a formalizar e a desenvolver o desenho para a disponibilizar as páginas na Web, seguindo as seguintes etapas:

1.

Padronizar a arquitetura da informação, estabelecendo nomenclaturas, hierarquias, serviços e navegabilidade, em consonância com os princípios de ergonomia e usabilidade;

2.

Criar protótipos de identidade visual, prevendo a padronização de ícones, estilos, posicionamento

dos elementos na tela, cores, assinatura e elementos comuns;

4.

Testes, avaliações e monitoramento;

5.

Desenvolvimento de um padrão visual para intranets e sistemas;

6.

Documentação e histórico.

Foi definido que uso de cores, figuras e demais elementos seguiria níveis de flexibilidade, sendo as orientações mais restritivas à medida que a página está mais identificada com a Prefeitura e seu objetivo (divulgar/prestar serviços). Assim sendo, páginas de secretarias tem regras mais restritivas que uma página de evento. Foram respeitadas particularidades das secretarias, como cores e logotipos.

A área central é livre, permitindo diversas foram de diagramação. A manutenção do menus à esquerda,

cabeçalho e coluna direita com busca, mapa da página, contatos e banners que permitem um acesso rápido e

identificação imediata pelo usuário. O uso do desenho limpo e leve permite que o usuário permaneça mais tempo na página buscando informações e navegando sem cansar-se.

Quanto ao aspecto tecnológico foi abolido o uso de molduras, em função de embaralharem a apuração de estatísticas sobre visitação das páginas e até mesmo na geração de conteúdos para deficientes. Também não foi aconselhado o uso de janelas pop-ups (novas janelas abertas sem permissão do usuário) em função do ruído estabelecido por esse dispositivo. Os navegadores mais recentes já possuem inibidores de janelas avulsas, pelo recurso ser utilizado indiscriminadamente por páginas comerciais. Quanto á animação, esta é permitida desde que se tenha critério, evitando a sua banalização e o efeito “carnaval” (identificado nas fases anteriores das páginas). A animação deve cumprir seu objetivo de salientar uma informação específica.

Buscou-se montar uma estrutura informacional das páginas é lógica e intuitiva, seguindo a regra dos três cliques, com simplicidade e clareza, sendo estes conceitos amplamente adotados por todos as páginas que trabalham com informação através do meio Internet. Trata-se de uma forma de linguagem atual que privilegia a relação do pouco tempo que as pessoas tem para absorverem informação.

pouco tempo que as pessoas tem para absorverem informação. Figura II – Novas páginas da Prefeitura
pouco tempo que as pessoas tem para absorverem informação. Figura II – Novas páginas da Prefeitura
pouco tempo que as pessoas tem para absorverem informação. Figura II – Novas páginas da Prefeitura
pouco tempo que as pessoas tem para absorverem informação. Figura II – Novas páginas da Prefeitura

Figura II – Novas páginas da Prefeitura de Porto Alegre

Ao mesmo tempo em que as páginas eram desenvolvidos e seu conteúdo alimentado pelos usuários das secretarias verificou-se a necessidade de maiores informações, apesar da existência de um manual no próprio programa de alimentação de conteúdo e do treinamento recebido. Foram então, criadas diretrizes para a criação da estrutura da informação junto aos órgãos e secretarias.

1. A estrutura da páginas deve ser lógica e intuitiva, com muita simplicidade e clareza. Não transformar o organograma do órgão nos linques da página.

2. Deve ser dada prioridades para os serviços. A missão do órgão, nomes de pessoas e outras informações institucionais são de interesse secundário.

3. Evitar a banalização de recursos animados. Muitos elementos piscando ou animados em uma tela não atraem a atenção para lugar algum, confundindo o usuário.

4. O usuário deve encontrar a informação desejada até o terceiro clique. Isto significa que uma estrutura de linques deve ter, no máximo, quatro níveis de profundidade, sob pena de muitas páginas não serem visitadas ou encontradas.

6.

O caminho a ser seguido para a execução de tarefas, busca de informações e baixar arquivos deve ser claramente sinalizado para quem acessa.

7. O texto para Web deve ser mais curto e objetivo do que o texto impresso.

8. Os nomes das seções devem se adequar à linguagem do usuário; evitar termos técnicos, siglas ou expressões de classe. Não utilizar nomenclaturas que só os funcionários ou iniciados conhecem.

9. O conteúdo das páginas é de responsabilidade de cada órgão, sob a supervisão da CS e Procempa. Em todos deve haver uma equipe responsável por atualizar as informações e responder os e-mails recebidos. Uma página desatualizada causa grande frustração a quem acessa.

10. A página deve prover meios para o acesso de portadores de deficiência.

3 – Conclusão As páginas começaram a ser disponibilizadas na Web a partir de julho de 2004. Apesar da previsão de conclusão em setembro de 2004 a primeira etapa, com a disponibilidade de todas as páginas com a identidade o projeto continua em aberto devido, sobretudo, a falta de estrutura de manutenção nas secretarias e órgãos.

Apesar disso, o processo de criação de intranets dentro da identidade foi iniciado, já existindo intranets ativas em dezembro de 2004. O projeto continua coma implantação da identidade em programas criados para a prefeitura. Em relação às páginas e portal são necessários a qualificação e treinamento do pessoal responsável pela manutenção das páginas na prefeitura, para solucionar o problema do excesso de blocos de texto nos níveis secundário. Em paralelo estão sendo desenvolvidas novas funcionalidades no ProWeb de forma a permitir uma diagramação mais refinada e atraente. Está prevista, também, a flexibilização modelos para os diversos sites da prefeitura, atendendo suas particularidades, com o desafio de não perder a identidade e a facilidade de uso.

Em janeiro desse ano foi iniciado o estudo para disponibilizar os sites de forma acessível ao aos portadores de necessidades especiais, seguindo o que foi estabelecido no decreto número 5296 estabeleceu normas gerais e critérios básicos para a promoção da acessibilidade das pessoas com necessidades especiais. O Decreto estabeleceu, ainda, um prazo de um ano para os órgãos governamentais, nos âmbitos federal e estadual, tornarem seus conteúdos web acessíveis. Devido ao fato de o programa de gerenciamento e a identidade terem sido concebidos pensando numa possibilidade de formatar conteúdos acessíveis a equipe tem encontrado poucos problemas na implantação do projeto de acessibilidade no prazo determinado.

Novos recursos de interatividade, aplicação de tecnologias e novos serviços para melhorar a comunicação entre a prefeitura e os usuários estão previstos nos sites da PMPA à medida que uma cultura de internet e recursos for sendo implantada e absorvida junto aos órgãos.

Notas

1 LÖBACH, Bernd. Diseño Industial: bases para la configuración de los productos industriales Barcelona: GG Diseño,

1981.

Bibliografia AGNER, LUIZ. Desenhar interfaces é um processo político. 2004. Disponível em:

<http://Webinsider.uol.com.br/vernoticia.php/id/2103>. Acesso em: 14 ago. 2004. BASTIEN, C.; SCAPIN, D. Human factors criteria, principles, and recommandations for HCI:

methodological and standatdisation issues. INRIA, Internal Repport, 1993. CECIL, RICK. Composition and Usability. Digital Web Magazine, 2000. Disponível em:

<http://www.digital-Web.com/features/feature_2000-3.shtml>. Acesso em: 15 abr. 2004. DONDIS, DONIS A. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997. HILHORST, DIDIER P. The Designer Is Dead, Long Live The Designer! Digital Web Magazine, 2004. Disponível em: <http://www.digital-Web.com/>. Acesso em: 15 abr. 2004. KRISTOF, RAY; SATRAN, Amy. Interactivity by Design. Mountain View, CA: Adobe Press, 1995. KRUG, STEVE. Não me Faça Pensar. São Paulo: Market Books, 2001. LEVY, PIERRE. Cibercultura. 2. ed. São Paulo: Editora 34, 1999.

LYNCH, PATRICK; HORTON, SARAH. Web Style Guide. 2000. Disponível em:

<http://www.Webstyleguide.com>. Acesso em 14 set. 2000. MEDEIROS, ITAMAR. Sobre a discussão estética vs. Usabilidade. 2002. Disponível em:

<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004. Sobre a evolução do design de interfaces (2). 2002. Disponível em:

<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004. NATOLIDESIGN. Strategy, Process and Methodology. Disponível em: <http://www.natolidesign.com>. Acesso em: 18 ago. 2004. NIELSEN, JAKOB. Top Ten Web-Design Mistakes of 2002. Disponível em:

<http://www.useit.com/alertbox/20021223.html>. Acesso em: 15 mar. 2003. NIELSEN, JAKOB; TAIHR, MARIE. 50 Websites Desconstruídos. Rio de Janeiro: Campus, 2002. PÓVOA, MARCELLO. Usabilidade de verdade. Webinsider, 2004. Disponível em:

<http://Webinsider.uol.com.br/vernoticia.php/id/2071>. Acesso em: 14 ago. 2004. SCHWARTZMAN, MICHEL LENT. Projetando um site em etapas.Disponível em:

<http://www.uol.com.br/publish/37/ Webdesign/dadi_37.htm>. Acesso em: 20 nov. 1998. TOGNAZZINI, BRUCE. First Principles. 2001. Disponível em: <http://www.asktog.com/basics /firstPrinciples.html, 2001>. Acesso em: 15 mar. 2003. VÉLEZ, Manuel; PASTOR, Adela González. El Diseño Gráfico. Curso Introducción a la Interacción Persona-Ordenador: El libro electrónico. Disponível em <http://griho.udl.es/ipo/pdf/11DisGra.pdf >. Acesso em: 5 jun. 2002.

Fernanda Hoffmann lobato fernanda.lobato@procempa.com.br Cristina Leipnitz leipinitz@procempa.com.br Leônidas Garcia Soares leonidas@procempa.com.br Marcelo Roennau Lemos marcelo@procempa.com.br