Embed Size (px)
DESCRIPTION
Trabalho de conclusão de curso
Citation preview
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
2
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
3
FOLHA DE APROVAÇÃO
Aluno:
Título do Trabalho de Conclusão de Curso:
Orientador:
Banca Examinadora:
_____________________________
Prof.
_____________________________
Prof.
_____________________________
Prof.
4
Agradeço a Deus, a minha família,
amigos e professores pela ajuda e motivação.
5
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
6
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
7
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
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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.
16
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;
17
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
18
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.
19
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.
20
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.
21
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
22
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
23
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
24
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, convidando-o, 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
25
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:
26
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).
27
Figura 3 – Fichas de personas de um projeto.
Outro autor que mostra a utilização de Personas no processo de
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:
28
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ão-
29
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.
30
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:
31
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.
32
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.
33
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.
34
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.
35
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)
36
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.
37
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).
38
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.
39
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).
40
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.
41
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).
42
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
43
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 nota-
se que um visual amigável colabora para uma boa experiência quanto à navegação.
44
Figura 14 – Interface completa da home do Portal do Governo de Minas Gerais.
45
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.
46
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.
47
Figura 15 – Interface do Portal da Prefeitura de Curitiba.
48
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
49
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.
50
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”.
51
Í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é.
52
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.
53
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
54
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 Nome do(s) link(s)
35% 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
2% 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
55
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.
56
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
57
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.
58
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;
59
- 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
60
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).
61
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,
62
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).
63
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.
64
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
65
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
66
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 Posicionamento Pesquisador
Marca da empresa Canto superior esquerdo Nielsen, Adkisson e
Bernard
Busca Parte Superior Nielsen, Adkisson e
Bernard
67
Navegação global Parte superior com links na
horizontal
Nielsen, Adkisson e Krug
Navegação local Coluna da esquerda Nielsen, Adkisson e
Bernard
Breadcrumbs Parte superior, abaixo da
marca da empresa
Adkisson, Lídia e Chaparro
e Krug
Conteúdo global e
contextual
Área central Bernad
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:
68
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
69
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.
70
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.
71
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
72
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.
73
Á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.
74
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.
75
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
76
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.
77
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.
78
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.
79
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.
80
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.
81
Multimídia e Notícias
Figura 35 – Seção do portal que exibe notícias e conteúdo multimídia.
82
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
83
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. Nota-
se 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.
84
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.
85
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
86
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.
87
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.
88
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.
89
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
contextual
Área central
Navegação de rodapé Parte Inferior
Tabela 4 – Posicionamento de elementos na interface.
90
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
91
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
92
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.
93
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
94
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.
95
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
96
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.
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.
97
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.
98
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.
99
Figura 47 – Primeiro Wireframe de alta fidelidade
Nomes dos links
100
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.
101
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.
102
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
103
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.
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.
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é.
104
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:
105
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ê?
106
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;
107
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”
108
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
109
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.
110
14 – PARTIDO ADOTADO
Figura 51 – Layout final proposto ao projeto.
111
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.
112
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.
113
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.
114
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.
115
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
116
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
117
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:
118
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.
119
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.
120
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.
121
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.
122
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.
123
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, viu-
se 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.
124
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.
125
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
126
ANEXOS
