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 Produo / Procempa Cia de Processamento de Dados de Porto Alegre
LEIPNITZ, Cristina
Esp. Design Grfico / Procempa Cia de Processamento de Dados de Porto Alegre
SOARES, Lenidas Garcia
M.a. Engenharia de Produo / 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, Interao homem-computador.

O artigo descreve o desenvolvimento do projeto de identidade visual dos portais e pginas da Prefeitura Municipal de
Porto Alegre. A criao de uma identidade visual para as pginas e portais da Prefeitura visa, sobretudo, a facilidade de
busca de informaes e servios que as pginas 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 - Introduo
Na dcada de 90 a Web disseminou-se de forma exponencial em escala planetria. Em um curto espao de
tempo, todo o tipo de negcio e indstria procurou criar sua representao no mundo virtual: portais,
pginas institucionais, comrcio eletrnico, etc. Com a disseminao da rede e dos microcomputadores,
mais pessoas comearam a interagir com computadores. Muitas dessas pessoas sem experincia com
computadores, com variados nveis educacionais, sociais e de campos profissionais, no
necessariamente ligados informtica. Surgiu, ento, a necessidade de desenvolver interfaces que se
adequassem esse novo pblico.

Em 1995 a PROCEMPA iniciou o desenvolvimento de pginas e solues para Internet, sendo pioneira em
muitas iniciativas no meio, porm a identificao da Prefeitura atravs de uma marca padronizada e questes
como navegao, usabilidade, acessibilidade e at mesmo manuteno de pginas e de contedos no
estavam contempladas. A partir da contratao de designers na PROCEMPA (julho de 2001), iniciou-se o
desenvolvimento dos primeiros projetos voltados a resoluo dessas deficincias. Atravs de um trabalho
conjunto rea do desenvolvimento, construiu-se uma primeira verso do editor de contedos para incluso
de informaes atravs da Internet e pelo prprio responsvel pela pgina. Em 2003 aps a unio dos dois
setores responsveis pelos projetos em Internet criou-se a massa crtica que viabilizou o projeto de uma
identidade visual para toda a Web da PMPA .

2 - Projeto e desenho e pginas

O desenvolvimento de pginas deve ter por base os conceitos do universo do usurio e os fundamentos
tericos. Vlez e Pastor (2001) consideram que o primeiro passo na criao da interface seria o desenho da
informao, a partir do tipo de usurio formatar o produto; aps seria realizado o desenho da navegao, as
linhas-guia que iro conduzir o usurio dentro do sistema e; por ltimo, o estilo formal, o vocabulrio visual
dos elementos necessrios para a interao, a aparncia do sistema.

a) desenho da informao: a fase do processo onde se organizam as informaes em uma

estrutura coerente e significativa. A interao, o desenho e a informao so dependentes uma das
outras. Organizar a informao significa faz-la identificvel, separando temas e grupos. O
 desenho da informao deve ser cuidadoso em relao carga que dispem a cada momento da
interao e fazer a transio entre uma tela e outra de forma rpida e direta;

b) desenho da navegao: assim como o contedo deve seguir uma estrutura, os caminhos e passos
a serem seguidos devem estar claros para o usurio. O bom planejamento da navegao permite
um caminho mais curto para o objetivo, sem sobrecarregar com operaes desnecessrias e
excesso de opes. No desenho da navegao define-se o que aparece em cada tela e como elas
levam ao objetivo. Tambm so definidas as opes de se realizar uma tarefa, a forma de
aparncia dos tempos de processamento e as mensagens de erros e confirmao;

c) o estilo formal: a criao de um vocabulrio visual que transmita o contedo de forma clara e
agradvel ao usurio. Na construo da interface, deve-se levar em conta a existncia de padres
particulares, para quem o sistema ser construdo. Por exemplo: no caso de empresas, a existncia
da identidade visual, logotipo, cores e tipografia corporativa.

Partindo do princpio que todo objeto criado pelo ser humano, incluindo uma pgina, ter por finalidade a
satisfao de uma necessidade, pode-se identificar trs possveis funes que estes objetos desempenham:
prtica, esttica e simblica (LOBACH i, 1981 apud MEDEIROS, 2002).

a) funo prtica: o objeto satisfaz as necessidades fisiolgicas do usurio;

b) funo esttica: o objeto satisfaz o usurio no plano sensorial do usurio;
c) funo simblica: o objeto satisfaz o usurio em um nvel espiritual, estabelecendo ligaes com
suas experincias e sensaes anteriores.

Essas funes so intercambiveis dentro de um mesmo objeto e dinamicamente modificadas medida que
os usurios estabelecem outras relaes mediante o uso do produto, ou ao trocarem experincias com outros
usurios. Um objeto pode exercer as trs funes simultaneamente, porm uma delas estar mais em
evidncia do que as outras. No caso da Web, os diferentes objetivos da pgina determinaro qual dessas
funes ser a dominante. O desenho de pginas tem por finalidade satisfazer essas necessidades dos
usurios, promovendo a transformao dos conceitos em solues de forma criativa.

Deve-se lembrar que Internet no pode ser considerada um meio de comunicao visual maduro. Existem
restries para a criao de uma identidade visual na Web. Uma a variabilidade do meio. O modelo de
desenvolvimento, includo a interface, deve ser flexvel adaptao das diversas configuraes de vdeo,
tipos e verses de navegadores, deve-se tambm, levar em conta o peso da pgina (a soma de todos os seus
elementos: cdigos, imagens, textos) e a restrio do fluxo de informao.

3 O projeto
O projeto identidade visual das pginas da Prefeitura de Porto Alegre (PMPA) teve inicio em novembro de
2003. At o momento, no existia uma preocupao formal com a identidade das pginas com a prefeitura.
Alm disso muitas pginas eram documentos htmls estticos, demandando muito tempo da equipe com
manuteno (figura I).

A partir da demanda de uma identidade para todas as pginas em novembro de 2003, abriu-se o debate na
equipe para a criao de uma identidade visual que atende-se aos objetivos propostos.

Objetivos
1. Criar um padro de identidade visual para todas as aplicaes Web da PMPA
2. Estabelecer uma unidade visual entre portais, pginas, hotsites, intranets e sistemas
3. Priorizar os servios em detrimento das informaes institucionais
4. Ser acessvel aos deficientes
5. Ter interface moderna e agradvel, obedecendo a princpios de ergonomia e usabilidade
6. Limitar o peso das pginas tendo em vista os usurios de banda estreita (97%)
Figura I Pginas antigas da Prefeitura de Porto Alegre

Foram estudados os portais de diversas prefeituras, e analisado o histrico das pginas da PMPA. Tambm
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 usurio e acostum-lo s mudanas de forma gradual. O elo de ligao
visual escolhido foi a imagem do cabealho uma foto area da cidade tradicionalmente utilizada em sua
forma azul monocromtica. Paralelamente, foi construda, junto equipe do desenvolvimento no setor, a
nova verso da ferramenta de edio de contedos.

A equipe de design atuou

no processo de levantamento de requisitos, colaborando no planejamento do aplicativo e desenvolvendo o
desenho de interface. Inmeras simulaes foram feitas para testar a adequao da ferramenta s
necessidades do usurio, tambm
requisitaram funcionalidades no aplicativo para automatizar, simplificar e acelerar a gerao de novas
pginas. Alm de tornar mais rpida e automatizada a criao de pginas a partir do padro desenvolvido
pela equipe de design, o programa tambm utilizado pelos prprios usurios nas atividades de atualizao
de contedo. Atualmente a
equipe continua desenvolvendo melhorias e ajustes na ferramenta.

Aps a aprovao dos primeiros desenhos em dezembro de 2004 a equipe passou a formalizar e a
desenvolver o desenho para a disponibilizar as pginas na Web, seguindo as seguintes etapas:
1. Padronizar a arquitetura da informao, estabelecendo nomenclaturas, hierarquias, servios e
navegabilidade, em consonncia com os princpios de ergonomia e usabilidade;
2. Criar prottipos de identidade visual, prevendo a padronizao de cones, estilos, posicionamento
dos elementos na tela, cores, assinatura e elementos comuns;

4. Testes, avaliaes e monitoramento;

5. Desenvolvimento de um padro visual para intranets e sistemas;

6. Documentao e histrico.

Foi definido que uso de cores, figuras e demais elementos seguiria nveis de flexibilidade, sendo as
orientaes mais restritivas medida que a pgina est mais identificada com a Prefeitura e seu objetivo
(divulgar/prestar servios). Assim sendo, pginas de secretarias tem regras mais restritivas que uma pgina
de evento. Foram respeitadas particularidades das secretarias, como cores e logotipos.

A rea central livre, permitindo diversas foram de diagramao. A manuteno do menus esquerda,
cabealho e coluna direita com busca, mapa da pgina, contatos e banners que permitem um acesso rpido e
identificao imediata pelo usurio. O uso do desenho limpo e leve permite que o usurio permanea mais
tempo na pgina buscando informaes e navegando sem cansar-se.

Quanto ao aspecto tecnolgico foi abolido o uso de molduras, em funo de embaralharem a apurao de
estatsticas sobre visitao das pginas e at mesmo na gerao de contedos para deficientes. Tambm no
foi aconselhado o uso de janelas pop-ups (novas janelas abertas sem permisso do usurio) em funo do
rudo estabelecido por esse dispositivo. Os navegadores mais recentes j possuem inibidores de janelas
avulsas, pelo recurso ser utilizado indiscriminadamente por pginas comerciais. Quanto animao, esta
permitida desde que se tenha critrio, evitando a sua banalizao e o efeito carnaval (identificado nas fases
anteriores das pginas). A animao deve cumprir seu objetivo de salientar uma informao especfica.

Buscou-se montar uma estrutura informacional das pginas lgica e intuitiva, seguindo a regra dos trs
cliques, com simplicidade e clareza, sendo estes conceitos amplamente adotados por todos as pginas que
trabalham com informao atravs do meio Internet. Trata-se de uma forma de linguagem atual que
privilegia a relao do pouco tempo que as pessoas tem para absorverem informao.

Figura II Novas pginas da Prefeitura de Porto Alegre

Ao mesmo tempo em que as pginas eram desenvolvidos e seu contedo alimentado pelos usurios das
secretarias verificou-se a necessidade de maiores informaes, apesar da existncia de um manual no prprio
programa de alimentao de contedo e do treinamento recebido. Foram ento, criadas diretrizes para a
criao da estrutura da informao junto aos rgos e secretarias.
1. A estrutura da pginas deve ser lgica e intuitiva, com muita simplicidade e clareza. No transformar
o organograma do rgo nos linques da pgina.
2. Deve ser dada prioridades para os servios. A misso do rgo, nomes de pessoas e outras
informaes institucionais so de interesse secundrio.
3. Evitar a banalizao de recursos animados. Muitos elementos piscando ou animados em uma tela
no atraem a ateno para lugar algum, confundindo o usurio.
 4. O usurio deve encontrar a informao desejada at o terceiro clique. Isto significa que uma
estrutura de linques deve ter, no mximo, quatro nveis de profundidade, sob pena de muitas pginas
no serem visitadas ou encontradas.
5. Toda informao indispensvel ao usurio deve estar localizada na tela principal, sem que seja
preciso recorrer barra de rolagem.
6. O caminho a ser seguido para a execuo de tarefas, busca de informaes 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 sees devem se adequar linguagem do usurio; evitar termos tcnicos, siglas ou
expresses de classe. No utilizar nomenclaturas que s os funcionrios ou iniciados conhecem.
9. O contedo das pginas de responsabilidade de cada rgo, sob a superviso da CS e Procempa.
Em todos deve haver uma equipe responsvel por atualizar as informaes e responder os e-mails
recebidos. Uma pgina desatualizada causa grande frustrao a quem acessa.
10. A pgina deve prover meios para o acesso de portadores de deficincia.

3 Concluso
A
s pginas comearam a ser disponibilizadas na Web a partir de julho de 2004. Apesar da previso de
concluso em setembro de 2004 a primeira etapa, com a disponibilidade de todas as pginas com a
identidade o projeto continua em aberto devido, sobretudo, a falta de estrutura de manuteno nas secretarias
e rgos.

Apesar disso, o processo de criao de intranets dentro da identidade foi iniciado, j existindo intranets ativas
em dezembro de 2004. O projeto continua coma implantao da identidade em programas criados para a
prefeitura. Em relao s pginas e portal so necessrios a qualificao e treinamento do pessoal
responsvel pela manuteno das pginas na prefeitura, para solucionar o problema do excesso de blocos de
texto nos nveis secundrio. Em paralelo esto sendo desenvolvidas novas funcionalidades no ProWeb de
forma a permitir uma diagramao mais refinada e atraente. Est prevista, tambm, a flexibilizao modelos
para os diversos sites da prefeitura, atendendo suas particularidades, com o desafio de no perder a
identidade e a facilidade de uso.

Em janeiro desse ano foi iniciado o estudo para disponibilizar os sites de forma acessvel ao
aos portadores de necessidades especiais, seguindo o que foi estabelecido no decreto nmero 5296
estabeleceu normas gerais e critrios bsicos para a promoo da acessibilidade das pessoas com
necessidades especiais. O Decreto estabeleceu, ainda, um prazo de um ano para os rgos governamentais,
nos mbitos federal e estadual, tornarem seus contedos web acessveis. Devido ao fato de o programa de
gerenciamento e a identidade terem sido concebidos pensando numa possibilidade de formatar contedos
acessveis a equipe tem encontrado poucos problemas na implantao do projeto de acessibilidade no prazo
determinado.

Novos recursos de interatividade, aplicao de tecnologias e novos servios para melhorar a comunicao
entre a prefeitura e os usurios esto previstos nos sites da PMPA medida que uma cultura de internet e
recursos for sendo implantada e absorvida junto aos rgos.

Notas
LBACH, Bernd. Diseo Industial: bases para la configuracin de los productos industriales Barcelona: GG Diseo,
1981.

Bibliografia
AGNER, LUIZ. Desenhar interfaces um processo poltico. 2004. Disponvel 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. Disponvel em:
<http://www.digital-Web.com/features/feature_2000-3.shtml>. Acesso em: 15 abr. 2004.
DONDIS, DONIS A. Sintaxe da Linguagem Visual. So Paulo: Martins Fontes, 1997.
HILHORST, DIDIER P. The Designer Is Dead, Long Live The Designer! Digital Web Magazine, 2004.
Disponvel 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. No me Faa Pensar. So Paulo: Market Books, 2001.
LEVY, PIERRE. Cibercultura. 2. ed. So Paulo: Editora 34, 1999.
LYNCH, PATRICK; HORTON, SARAH. Web Style Guide. 2000. Disponvel em:
<http://www.Webstyleguide.com>. Acesso em 14 set. 2000.
MEDEIROS, ITAMAR. Sobre a discusso esttica vs. Usabilidade. 2002. Disponvel em:
<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004.
______. Sobre a evoluo do design de interfaces (2). 2002. Disponvel em:
<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004.
NATOLIDESIGN. Strategy, Process and Methodology. Disponvel em: <http://www.natolidesign.com>.
Acesso em: 18 ago. 2004.
NIELSEN, JAKOB. Top Ten Web-Design Mistakes of 2002. Disponvel em:
<http://www.useit.com/alertbox/20021223.html>. Acesso em: 15 mar. 2003.
NIELSEN, JAKOB; TAIHR, MARIE. 50 Websites Desconstrudos. Rio de Janeiro: Campus, 2002.
PVOA, MARCELLO. Usabilidade de verdade. Webinsider, 2004. Disponvel em:
<http://Webinsider.uol.com.br/vernoticia.php/id/2071>. Acesso em: 14 ago. 2004.
SCHWARTZMAN, MICHEL LENT. Projetando um site em etapas.Disponvel em:
<http://www.uol.com.br/publish/37/ Webdesign/dadi_37.htm>. Acesso em: 20 nov. 1998.
TOGNAZZINI, BRUCE. First Principles. 2001. Disponvel em: <http://www.asktog.com/basics
/firstPrinciples.html, 2001>. Acesso em: 15 mar. 2003.
VLEZ, Manuel; PASTOR, Adela Gonzlez. El Diseo Grfico. Curso Introduccin a la Interaccin
Persona-Ordenador: El libro electrnico. Disponvel 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
Lenidas Garcia Soares leonidas@procempa.com.br
Marcelo Roennau Lemos marcelo@procempa.com.br
i