Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Orientado ao Usuário.
Rio de Janeiro
2010
MILTON FERREIRA DE ANDRADE FILHO
Orientado ao Usuário.
Rio de Janeiro
2010
2
MILTON FERREIRA DE ANDRADE FILHO
orientado ao usuário.
BANCA EXAMINADORA
Rio de Janeiro
2010
3
Sumário
Agradecimentos | 5
Resumo | 6
Abstract | 7
Introdução | 8
Cronograma | 9
Justificativa | 10
Objetivo | 13
Problematização | 14
Referencial teórico | 22
Escopo do projeto | 31
Analise de Similares | 32
Conceito do projeto | 41
Estrutura de navegação | 42
Seleção de alternativas | 47
Considerações Finais | 53
Anexos | 55
Referências bibliográficas | 56
4
Agradecimentos
Primeiramente agradeço a Deus por essa oportunidade, aos meus familiares que
sempre me apoiaram, mesmo nos meus momentos temperamentais, aos meus
professores que contribuíram diretamente com o sucesso deste projeto e a todos
que direta ou indiretamente fizeram e fazem parte da minha vida.
5
Resumo
A popularização da Internet tornou a rede um dos melhores meios para a
disponibilização dos serviços do governo. Através do acesso fácil, rápido e dinâmico
popularizaram-se as informações jurídicas na grande rede, no entanto, na maioria
das vezes, o usuário encontra-se desorientado e insatisfeito em meio a tantos dados
inúteis, inconsistentes e pouco sistematizados.
Este trabalho aborda o redesign do Tribunal Regional do Trabalho 1ª Região
do Rio de Janeiro, focado na tarefa e orientado ao usuário, principalmente, aquele
que busca informações sobre o seu processo trabalhista, que é a principal
reclamação nos fóruns jurídicos.
6
Abstract
The popularization of the Internet makes the network one of the best means for the
delivery of government services. Through the easy, quick and dynamic became
popular legal information on large network of global reach, however, in most cases,
the user is confused and unhappy in the midst of so many useless data, inconsistent
and poorly systematized.
This paper discusses the redesign of the Regional Labor Court 1st Region of
Rio de Janeiro, task-focused and user-oriented, especially those seeking information
about their labor process, which is the main complaint in legal forums.
7
Introdução
Desde o final da década de 1990 o governo tem se esforçado para melhorar e se
manter em contato com seus eleitores e cidadãos através da Web, colocando
informações do governo online (e-Gov), fazendo com que essas informações sejam
fáceis de encontrar e acessíveis as pessoas.
O conceito “governo eletrônico” ou e-Gov é mais um recurso do governo para
permitir aos cidadãos acessar informações e serviços do governo de acordo com a
sua conveniência, partilhando dados e informações governamentais com o público
oferecendo transparência dos seus atos aos cidadãos, visando também melhorar as
operações internas e entre governos.
A Web 2.0 e os meios de relacionamento sociais são uma realidade e novos
desafios para os governos. Nesse ponto o governo têm sido muito lento em se
ajustar a essa nova realidade de interação.
Finalmente as questões de usabilidade onde dados, páginas Web e serviços
devam estar disponíveis a qualquer tipo de pessoa independente da condição física
ou tecnológica, são mais um desafio do e-Gov.
8
Cronograma
9
Justificativa
A justificativa para esse projeto veio da necessidade pessoal de consultar processos
neste Tribunal e, uma vez, comentando com outras pessoas verifiquei que os
descontentamentos eram os mesmos, independentemente se eram advogados ou
suas partes (reclamantes).
No trecho abaixo, retirado do site www.jusbrasil.com.br, em 19/08/2010,
verificamos os conflitos existente entre os advogados e o Tribunal de Trabalho do
Rio acerca do acompanhamento processual:
“A reclamação é total de todos os advogados. Embora o
SAPWeb (Sistema de Acompanhamento Processual, por meio
do qual é possível acompanhar os processos de forma
eletrônica) seja o campeão de queixas, o sistema está longe de
ser o único problema”
Buscando confirmar a necessidade de melhorias na utilização do site,
realizamos uma pesquisa com oito advogados que utilizam o site do TRT para as
suas necessidades, e propusemos alguns questionamentos, visando coletar mais
informações desse Tribunal:
Com que freqüência você acessa o site do TRT? 38% responderam que
acessam o site pelo menos uma vez ao mês, seguida de 38% que acessam uma vez
por semana, ou seja, 76% precisam acessar o site com bastante regularidade, sem
contar que 13% acessam todos os dias.
Você encontra tudo que procura no site do TRT? E Você acha fácil localizar o
que procura? Nas duas questões houve empate nas opções escolhidas pelos
entrevistados, onde, 57% discordam, pois, no site as opções não são bem
estruturadas.
Você acha que ele é atualizado regularmente? 63% das pessoas, que
acessam o site em busca sobre as informações processuais, discordam totalmente
quanto à atualização do conteúdo.
Outra questão proposta, você acha a consulta processual fácil de realizar?
63% discordam totalmente. E, por último, fizemos um questionamento subjetivo,
objetivando conhecer a percepção dos que tem necessidades de acessar o site com
bastante regularidade, perguntei, o visual dele é agradável? E 57% dos
10
entrevistados discordam afirmando que poderia ser um pouco melhor. A pesquisa foi
realizada no dia 01/09/2010.
Do acima exposto concluímos que: o site é acessado com bastante
regularidade, talvez um dos motivos seja justamente na questão da arquitetura da
informação inadequada, associada a não atualização periódica das informações,
fazendo com que os usuários recorram a ele mais de uma vez para obter uma
mesma informação.
A reclamação quanto ao visual deve-se também, em parte, ao fato de ser
difícil encontrar o que procura, principalmente, para as pessoas que acessam pela
primeira vez, podendo ser este um fator intimidador.
A cartilha de codificação do e-GOV (2010, p.8) determina que a prestação de
serviços governamentais, através de sites e portais da administração pública, deve
ser fácil de usar, relevantes e efetivos, visando aumentar a satisfação dos usuários
no acesso aos serviços eletrônicos governamentais.
11
Definição do Cliente e do Público Alvo
A Justiça do Trabalho estruturou-se com base em dois órgãos criados por Getúlio
Vargas, em 1932, para solucionar conflitos trabalhistas: A Comissão Mista de
Conciliação e Juntas de Conciliação e Julgamento.
• Advogados;
• Reclamantes;
• Magistrados e funcionários.
12
Objetivo
Apresentar uma proposta para o redesign do site do Tribunal Regional do
Trabalho, através da usabilidade, visando às melhorias orientadas ao usuário,
possibilitando melhor acesso a todos que necessitam buscar informações
neste tribunal independente de questões físicas ou tecnológicas.
Os sites do Governo Federal (.gov.br) não aderiram, ainda, aos padrões
recomendados pelo W3C (consórcio da Web que desenvolve padrões de codificação
Web), que objetivam permitir uma maior universalidade nos acessos aos diversos
sites na Web. Esses padrões são conjuntos de regras para normatizar os códigos
HTML.
Em relatório apresentado no dia 17/08/2010, o Comitê Gestor da Internet no
Brasil (CGI.br) e pelo Núcleo de Informações e Coordenação do Ponto BR (NIC.br),
apresentaram relatório que “fotografou” o cenário virtual no domínio .gov.br no País.
Segundo este relatório um dos tópicos analisados foi a aderência aos padrões
do W3C, que são indicadores importantes para permitir a universalidade de acesso a
qualquer dispositivo conectado a Web, a partir de qualquer sistema operacional,
garantindo acesso universal aos sites.
Foram coletadas informações de 6,3 milhões de páginas HTML, destas cerca
de 95% apresentaram mais de uma incorreção aos padrões do W3C. Do total
somente 5% estão completamente dentro dos padrões.
Outro dado importante, segundo o mesmo relatório, é que 98% não
apresentaram nenhuma aderência aos padrões de acessibilidade, não permitindo ao
usuário deficiente visual utilizar os sites .gov.br.
13
Problematização
Introdução
Na problematização foram levantadas somente questões de usabilidade não sendo
incluído nessa análise questões computacional, como acesso a banco de dados e de
acessibilidade. A não ser quando essa acessibilidade pode ser resolvida com
melhorias nas questões de usabilidade.
A primeira reclamação dos usuários é na questão de lentidão no acesso as
informações do site do TRT. Uma vez digitado o endereço URL http://www.trt1.jus.br
este é redirecionado para outro endereço que acessará o conteúdo a partir de um
banco de dados. Além da lentidão no acesso, por mais de uma vez no teste
apresentou como página inexistente ou temporariamente fora do ar.
14
O layout é de tamanho fixo 800 px que em monitores maiores, a redução da
área de visualização, prejudica a legibilidade, independentemente, das condições
visuais do usuário.
Na questão da identificação do site, como elemento de orientação a
navegação, não é muito clara, pelo menos na questão textual (Tribunal Regional do
Rio de Janeiro 1ª. Região), sendo somente informado TRT1 com imagens turísticas
do Rio de Janeiro e mais nada, como pode ser visto na figura abaixo.
Nas opções de topo o baixo contraste escolhido não favorece uma boa
legibilidade, como visto na figura acima.
NIELSEN e TAHIR (2002, P.19) afirma que a navegação em todo lugar no site
é fundamental para que os usuários consigam encontrar, sem muito trabalho, o que
procuram, e que entendam o que está por trás de cada link sem a necessidade de
se clicar para descobrir para que servem ou significam.
Abaixo do topo encontramos a informação da data da visitação,
completamente desnecessária. Quando se acessa o site com navegadores
diferentes do Internet Explorer o ano assume uma forma diferente da esperada. A
figura abaixo ilustra o problema.
16
Dificilmente o usuário comum saberá que é um erro de codificação, pode
imaginar diversas situações, como por exemplo, clicando poderá mudar ou aumentar
a fonte.
No projeto do menu local (esquerdo) encontramos títulos separadores de
categoria, em contraste diferente visando grupos de opções. Os itens de opções
desses grupos utilizam menu pull-down para exibir suas opções, só que somente
são conhecidas a partir do clique. Poderia existir uma ponta de seta informando que
existem outras opções embutida. A figura abaixo ilustra o fato.
A mesma cor é utilizada para todos os estados do link (link a visitar, ativo e
link visitado), onde as cores padrão são: azul, vermelho e roxo.
NIELSEN e LORANGER (2007, p.61) lembram que não alterar as cores dos
links cria confusão na navegação. A mudança da cor dos links favorece a memória
de curto prazo e evita que cliquemos nos link que já visitamos, aumentando a
eficiência na navegação.
Na página do Acompanhamento Processual existe uma orientação que está
no local errado, como podemos ver na figura abaixo. O visitante somente tem
acesso a esse aviso depois de ter entrado na página.
18
Além de abrir em uma nova janela do navegador, dificultando a flexibilidade
de navegação para o visitante, que fica impedido de usar o botão voltar, não repete
os elementos do design que identifica em que site está.
NIELSEN (2007, P.63) orienta que, nunca se deve “quebrar” o botão voltar,
pois, na web as pessoas devem se sentir a vontade, sabendo que podem desfazer
ou alterar suas ações. É saudável estimular os usuários a explorarem os sites da
maneira como preferirem, sabendo que podem voltar a qualquer momento ao ponto
de onde partiram. Este é um dos princípios da Interação Homem-Computador.
Após o dia 19/08/2010 foram feitas duas mudanças na opção
acompanhamento processuais. Uma a inclusão de um botão na coluna central da
home page, acima da área de notícias, mantendo a opção anterior, na navegação
lateral direita. A outra a retirada das letras de verificação captcha para localizar um
processo.
NIELSEN e LORANGER (2007, p.189) esclarece que não devem existir áreas
duplicadas de navegação para os mesmos links, pois, as pessoas precisam se
esforçar para descobrir a diferença entre os links com mesmo nome. E acrescenta
que na verdade diminui a probabilidade de que os usuários os enxerguem, e só
serve para poluir a home page.
A figura abaixo mostra a redundância na home page. A segunda opção
acompanhamento processual, nos botões da direita, acabará não sendo mais
utilizado o que prejudicarão outros links dentro dessa página ligados ao
acompanhamento processual.
19
A opção Cálculo trabalhista (TST), como em outras opções, o usuário é
levado para outro domínio saindo do site em questão e sendo dirigido para o site do
Tribunal do Tocantins, quebrando o botão voltar do navegador. Como visto na figura
abaixo.
Conclusão
O site do Tribunal necessita de melhorias na sua usabilidade, evitando com isso
dispêndio de energia para realizar a tarefa do dia-a-dia, principalmente, se for um
usuário novato no site.
Na cartilha do e-Gov (2010, p.8) encontramos o seguinte:
“Sítios e portais que seguem as melhores recomendações de
codificação são mais ágeis e versáteis, além de oferecer
facilidades para o transporte das mesmas soluções para outros
meios eletrônicos como aparelhos celulares, computadores de
mão e outros. A solução dos problemas mais comuns de
formatação gera ganhos imediatos e, em geral, custa muito
pouco para resolver.”
Então, entendemos que uma nova arquitetura de informação associada a um
design mais funcional dentro das regras de padrões web (W3C) e da usabilidade,
resolverá os problemas já detectados.
21
Referencial teórico
Arquitetura da Informação
Segundo AGNER (2009, p.89) a arquitetura da informação é uma metadisciplina que
tem sua preocupação voltada para o projeto, a implementação e a manutenção de
espaços informacionais digitais, e tem sido usada para descrever o mix de
competências necessárias para produzir recursos que vão além da capacidade
humana.
MORROGH, citado por AGNER (2009) explica que para se tornar eficaz a
arquitetura da informação deverá atuar como uma instância mediadora entre os
interesses dos usuários, do cliente, dos designers e da equipe de programação.
AGNER (2009, p.97) afirma que a arquitetura da informação deve ser
compreendida como quatro sistemas independentes, cada qual com suas regras:
sistemas de organização, de rotulação, de navegação e de busca.
Sistema de organização – Determina como é apresentada a organização e a
categorização dos conteúdo.
Sistema de rotulação - Define signos verbais (terminologias) e visuais para
cada elemento informativo e de suporte à navegação do usuário.
Sistema de navegação – Especifica formas de se mover através do espaço
informacional.
Sistema de busca – Determina as perguntas que o usuário pode fazer e as
respostas que irá obter no banco de dados.
Card Sorting
AGNER (2009, p.133) define o card sorting como uma técnica utilizada para gerar
informações sobre o modelo mental dos usuários acerca das questões de
informação e ter como objetivo, verificar se as arquiteturas dos sites fazem sentido
sob a visão dos usuários, pois, o que sempre parece óbvio para o projetista não o é
para o usuário. O autor explica ainda que essa técnica além de barata, rápida e
confiável, serve de base para gerar estruturas, menus de navegação e hierarquias
de informações.
A idéia por trás dessa técnica é simples: se você deseja que as pessoas
encontrem facilmente o que procuram, então se deve organizar o conteúdo com
22
base no entendimento que as pessoas têm sobre esses mesmos conteúdos.
Segundo NIELSEN, citado por AGNER (2009, p.134) As empresas comentem
um erro clássico nos seus sites corporativos que é organizar as informações
baseadas em como as empresas enxergam as suas informações. Para evitar isso se
deve aplicar essa técnica em três estágios: no projeto de um novo site; na criação de
uma nova área; ou no seu completo redesign. E comparando o teste de usabilidade
com card sorting afirma: no teste de usabilidade o objetivo é a avaliação, já no card
sorting, o objetivo é a geração de estruturas.
Wireframe
É um esboço auxiliar a construção de um site. Sua principal função é estruturar o
conteúdo de cada página, indicando o posicionamento de cada elemento do layout e
sua relação com o todo.
Usabilidade
Usabilidade é um atributo relacionado à facilidade no uso de algo, referindo-se a
rapidez com que os usuários podem aprender a usar alguma coisa, a eficiência
deles ao usá-la, o quanto lembram daquilo, seu grau de propensão a erros e o
quanto gostam de utilizá-los. Se as pessoas não puderem ou não conseguir utilizar
um recurso, ele pode muito bem não existir.
NIELSEN, citado por FERREIRA (2008, p20) diz que o termo usabilidade
descreve a qualidade da interação de uma interface com os usuários e que se
23
determina pelas seguintes características: facilidade no uso, capacidade de
aprendizagem rápida, dificuldade de esquecimento, ausência de erros operativos,
satisfação do usuário e eficiência na execução da tarefa.
FERREIRA (2008, p.21) orienta que o projeto de sites deve visar à
conveniência do usuário, possibilitando a concentração e a atenção nos objetos com
que trabalha diretamente, os quais quanto mais refletirem o mundo real melhores
serão. Ainda afirma que consideram problemas de usabilidade situações que
possam retardar, prejudicar ou inviabilizar uma tarefa, que aborrecem, constrangem,
e às vezes, traumatizam o usuário.
CSS
A Cascading Style Sheet (CSS) é uma linguagem para estilos que definem o layout
de páginas HTML, controlando, fontes, cores, margens, linhas, alturas, larguras,
imagens de fundo e posicionamentos. Ela conta com recursos que são aceitos por
todos os navegadores.
O CSS é independente do HTML e pode ser utilizado com qualquer linguagem
de marcação baseada em XML.
A independência do CSS do HTML faz com que seja mais fácil fazer e manter
sites web, além de projetos mais rápidos e mais baratos.
Alguns dos benefícios do uso do CSS para o desenvolvimento de páginas
para web, podem ser:
• Controle do layout de várias páginas a partir de um único arquivo CSS;
• Aplicação de diferentes layouts para servir diferentes mídias (telas,
impressoras, celulares etc);
• Emprego de várias técnicas de desenvolvimento;
HTML
É a abreviação para HYPER TEXT MARKUP LANGUAGE, que traduzido para
português seria Linguagem de Marcação de Hipertexto que se destina a escrever
documentos que possam ser lidos por navegadores web.
A web foi inventada em 1992, por Tim Bernners-Lee quando trabalhava na
Seção de Computação do CERN – Organização Européia de Pesquisa Nuclear, com
sede em Genebra, na Suíça, quando iniciou pesquisas visando descobrir um método
24
que possibilitasse aos cientistas do mundo compartilhar eletronicamente seus textos
e pesquisas e que tivesse ainda a funcionalidade de interligar os documentos, então
estava criada a web e os links como conhecemos hoje.
Tim desenvolveu um software próprio e um protocolo para recuperar
hipertexto denominado HTTP. O formato criado para o HTTP foi chamado de HTML.
Ele tomou por base as especificações de uma outra linguagem a SGML, que é um
método internacionalmente reconhecido e aceito, contendo normas para criação de
linguagem de marcação. A sua invenção foi demonstrada pela primeira vez em 1990,
em uma estação de trabalho NeXT, nos laboratórios do CERN. Estava criada então o
embrião da World Wide Web, bem como a linguagem de marcação de hipertexto.
A linguagem HTML é constituída de elementos e atributos. Os elementos
foram escolhidos levando em conta a destinação do elemento. Assim, um elemento
HTML destinado a marcar um cabeçalho, recebeu o nome de heading; o elemento
destinado a marcar parágrafo foi denominado de paragraph e assim por diante. Esse
vínculo entre o nome do elemento e sua finalidade na marcação é um conceito
básico que está perfeitamente de acordo com o objetivo primordial da linguagem que
é marcar estruturalmente conteúdos de um documento. Trata-se de um conceito
fundamental no desenvolvimento de um site seguindo as Web Standards.
Tipografia web
NIELSEN (2007) afirma que a tipografia está relacionada não só a legibilidade, mas
também a consistência das interfaces, sendo apontada como um recurso que pode
facilitar a orientação do usuário, ao lado de outros códigos como a cor e demais
elementos gráficos.
O autor considera também, que o uso de fontes serifadas é inadequado para
o projeto web, pois, nas telas as fontes não serifadas são as mais recomendadas.
Afirmando que na baixa resolução da tela do computador o texto pequeno é mais
legível quando se apresenta em fonte sem serifa, como a Verdana, por exemplo.
• Definir corretamente o corpo do texto, para o público alvo almejado, pois, nem
sempre é possível realizar teste com os usuários. Oferecer controle ao
usuário permitindo que a função de redimensionamento de texto possa estar
visível no próprio site. No projeto da folha de estilos utilizar valores relativos,
ao invés de fixos, por exemplo, 140% ao invés de 14pt.
• Century Gothic
• Comic Sans MS
• Helvetica
• Impacto
• Trebuchet MS
• Verdana
26
Cor na web
Existem dois processos de formação de cores: aditivas e subtrativas.
As cores aditivas é a adotada em monitores de vídeo. A mistura acontece a
partir de vários comprimentos de onda da luz e essa mistura altera o comprimento
de onda que atinge o olho humano.
As cores subtrativas é o processo utilizado nas pinturas e arte gráfica,
diferentemente dos monitores não emite luz, simplesmente a reflete.
O processo de interesse do projeto de interface web é a aditivo.
FERREIRA (2008, p.71) afirma que a cor tem a capacidade de transformar
informação em conhecimento. Propiciando aos olhos, quase sem esforço, uma série
de detalhes. A mensagem ganha vida conferindo a interface vantagens competitivas.
A cor serve também como guia visual orientando o olho através das imagens e
palavras detendo-se nas informações de interesse.
MARCUS, citado por FERREIRA (2008, p.71) fala da influência da cores no
dia-a-dia das pessoas, quando afirma que, afeta os sentidos e estimula as emoções,
pensamento e intelecto.
O emprego inadequado de cores pode interferir dificultando a captação de
informações básica, implicando em desperdício de energias e tempo.
A utilização de cores segue regras de utilização eficaz. Cores mal escolhidas
podem confundir. Uma boa escolha pode não garantir o sucesso da interface web,
mas a sua eficiência.
MARCUS e JACKSON, citado por FERREIRA (2008, p.72) fazem as
seguintes recomendações no uso de cores nas interfaces:
• Mostrar os objetos tal como são vistos na natureza;
• Representar associações simbólicas;
• Dar destaque a certos aspectos da interface;
• Sugerir um estado de espírito;
• Facilitar a identificação de estruturas e de processos;
• Diminuir a ocorrências de erros;
• Facilitar a memorização da interface;
27
As cores e alguns significados
Branco
Dada a sua leveza a cor branca é ideal para atrair a atenção para um fundo escuro.
A interface com fundo branco confere ao texto escuro maior legibilidade, sendo,
portanto, a cor de fundo mais comum nos sites.
Preto
Tem em sua característica a capacidade de realçar as outras cores, se
harmonizando com todas.
Vermelho
É considerada a cor de maior impacto emocional, talvez por sua associação com
sangue e fogo, tendo o seu significado variando de acordo com a cultura. Esta cor é
uma das três cores primárias dos monitores RGB. Seu uso em interfaces assinala
com eficiências mensagens de alerta e informações importantes. Seu uso não é
recomendado em áreas muito extensas, pois, como é uma cor dominante, tende a
ser muito agressiva e chamativa.
Amarelo
Cor incandescente e acolhedora. Sua associação mais óbvia é com o sol,
simbolizando vida e calor. Por se tratar o matiz mais claro de todos, é um bom
indicador de atividade. JACKSON, citado por FERREIRA (2008, P.76) orienta que o
seu emprego como texto, só deve acontecer em fundo preto ou azul-escuro.
Verde
Cor normalmente ligada a natureza e a vegetação, sendo, a mais visível das três
cores primárias dos monitores RGB, devendo ser utilizada como cor central, pelas
mesmas razões que o vermelho.
28
Azul
Por ser tratar da cor do céu, do mar, esta cor sugere profundidade, espaço, ar. É
uma cor fria e suave, sendo a mais tranqüila de todas as cores, tendo grande poder
relaxante e calmante. É um bom fundo para cores vivas. Simboliza autoridade,
profundidade e espiritualidade. É também uma das três cores primárias dos
monitores RGB. Por sua dificuldade de focalização e contraste o azul não é
recomendado para textos e detalhes finos. Em áreas extensas e como cor periférica
o azul é excelente, sobretudo por suas qualidades de expansão e de profundidade.
O uso correto das cores, no que diz respeito ao aprendizado e compreensão,
favorecem a memorização motivando o usuário a usar a interface.
MARCUS, citado por FERREIRA (2008, P.79) recomenda 10 itens no uso de
cores em monitores:
• Usar no máximo cinco cores, mais ou menos duas;
• Usar cores familiares, consistentes e codificadas com referências
apropriadas;
• Não utilizar simultaneamente cores de alto croma;
• Usar cores com variação mínima no aspecto cor/tamanho;
• Usar cores centrais e periféricas apropriadas;
• Usar o mesmo código de cores para descrever itens e subitens;
• Usar cores de elevada intensidade e saturação para chamar a atenção;
• Usar paleta de cores segura para web;
• Usar cores para realçar informações.
29
Requisitos e restrições do projeto
O projeto usará como base a cartilha do e-GOV (2010, p.9), as recomendações do
W3C, para padrões web, juntamente com as orientações de NIELSEN (2007) nas
questões de Usabilidade, que são:
Páginas leves
As páginas deverão ter algo em torno de 50KB, não devendo ultrapassar 100KB,
somados código, conteúdo e imagens.
Restrição
Como restrição, o nosso projeto não privilegiará as questões de lentidão do sistema,
inconsistência de dados, e mesmo conteúdo de algumas páginas que entendemos
ser de responsabilidade do pessoal de sistemas, uma vez que as páginas são
atualizadas dinamicamente. O nosso protótipo somente simulará as situações.
30
Escopo do projeto
Sendo um projeto de sustentação governamental, o redesign do Tribunal
Regional do Trabalho 1ª região, deve aderir às normas de padrões web da W3C
objetivando a universalização da informação. Tendo ainda como alvo buscar ao
máximo a simplicidade, clareza e objetividade, favorecendo aos usuários,
principalmente os que buscam consultar os seus processos trabalhistas, acesso
rápido aos mesmos, sem muitas complicações na informação numérica processual
para se obter suas consultas e resultados.
Ficando assim, o desafio em estruturar o site de maneira que permita acesso
a todos em todos os recursos rapidamente. A percepção da necessidade dos
usuários do site, aliado a clareza e simplicidade, são metas a alcançar.
31
Análise de Similares
Introdução
Na analise dos similares tomamos por referência NIELSEN (2002), onde afirma que
a home page precisa transmitir o que a empresa faz, a relação com a concorrência e
ao mundo físico.
O autor afirma ainda que, a home page têm diversos objetivos e os usuários
diversas metas. Num primeiro acesso o usuário acessa a home page para descobrir
o que a empresa faz. Algumas vezes o usuário está pesquisando uma possível
aquisição, em outras necessita de um serviço, consulta e por ai vai.
Salienta ainda que os usuários inexperientes se sentem oprimidos por home
pages que não o ajudam a encontrar o que procuram. Quando não conseguem
entender o website os usuários podem ficar envergonhados, confusos e certamente
não voltarão a utilizar o site novamente.
32
Similares
[ http://www.trt19.jus.br em 19/08/2010]
Projeto desenvolvido para a resolução de 800 px de largura, usando como cor
base do layout azul pastel.
A home page identifica bem o tribunal informando além da iniciais TRT9, a
direita, no topo, por extenso o nome do tribunal e a região, juntamente com o estado.
A página principal é bem limpa, com boa legibilidade, boa área de respiro,
entre as colunas, bem confortável a navegação no acesso ao conteúdo.
Foram escolhidos dos tipos de navegação: global, no topo com menu
hierárquico e no centro, menu de acesso rápido, pull-down.
No menu central, para identificar que é um menu pull-down, seria
interessante ter uma ponta de seta, como aparece no menu do topo, para informar
que existem outras opções embutidas.
33
A direita existe a consulta processual, um ponto positivo, pois, a maior parte
dos acessos feitos pelos advogados e suas partes é justamente para consultar o
andamento processual, como mostra a figura abaixo.
34
As páginas internas seguem o mesmo padrão, conforme figura abaixo.
35
Tribunal Regional do Trabalho 7ª. Região – Ceará
[ http://www.trt7.jus.br em 19/08/2010]
Projeto desenvolvido com layout líquido (se ajusta ao tamanho da janela) para
a largura a partir de 1024px, podendo também ser visualizado em resoluções
menores com alguma perda na navegação. A cor base do layout é azul marinho.
Como ponto negativo, no carregamento da home page, abre bem no centro da
janela um comunicado pop-up com layout transparente com difícil localização do
botão fechar, para alguns os usuários com algum tipo de limitação visual isso é um
empecilho.
Na questão de identificação do site, esta é inexistente, pelo menos com
clareza. No canto superior esquerdo está o logotipo sem o nome textual por extenso
do Tribunal bem destacado, como observamos na figura abaixo.
36
A navegação é através de menu horizontal com níveis hierárquico e, em
algumas opções, com mais de um nível hierárquico. Neste menu não tem a opção
para voltar para a página inicial a não ser através do logotipo. Esta forma de acesso
não é conhecida por todos, principalmente pelas pessoas com pouca intimidade com
internet.
Na parte central da home page, nós encontramos a opção de consulta
processual, é uma alternativa muito interessante, uma vez que as consultas de
processos são as opções mais utilizadas nos tribunais, mas as letras de verificação,
sempre causam confusão na leitura e, por conseguinte, na digitação. A figura abaixo
ilustra a alternativa.
37
Algumas opções abrem em novas janelas no navegador, não recomendável,
pois, elimina a flexibilidade de navegação através do botão voltar.
No site existem elementos de acessibilidade, para o aumento de fonte,
através dos A’s no canto superior direito. Ponto positivo.
38
Tribunal Regional do Trabalho 11ª Região
[http://www.trt11.jus.br]
Projeto desenvolvido para a resolução 800px de largura, usando como cor
base do layout verde.
A home page identifica bem o tribunal informando o nome por extenso
próximo ao brasão da república a esquerda da página.
A página principal é bem limpa, com boa legibilidade, boa área de respiro
(espaços em branco entre as colunas), bem confortável de acessar e ler o conteúdo.
A tipografia utilizada em todo o site são as famílias: Verdana, Geneva, sans-
serif em vários pesos.
Foram escolhidos dos tipos de elemento de navegação: no topo, horizontal
com duas linhas de menu e a esquerda menu hierárquico. No topo a primeira linha
são as opções globais. A segunda linha, sub-opções das opções globais.
Abaixo do menu existe uma linha de orientação que KRUG (2006), denomina
“migalhas de pão” essa orientação permite uma navegação confortável, pois a cada
momento, o usuário pode identificar o caminho feito e, clicando nos termos que
aparecem em negrito, permite-se voltar para as páginas anteriormente.
39
KRUG (2006, p.45) explica que quando utilizado este recurso ele deve
receber algum destaque, para não perder a sua função de orientação.
O que normalmente acontece é este recurso receber pouco destaque, como
no site do TRT11, onde poderia receber um tamanho tipográfico maior para destacar
do conteúdo. A frase “Você está aqui:” quase não se consegue ler. Vide figura
abaixo.
41
Estrutura de navegação
A estrutura principal de navegação atual do site do Tribunal Regional do
Trabalho 1ª Região, sem demonstrar a partir do segundo nível, é a apresentada
abaixo:
Nesta arquitetura encontramos muitas opções que poderiam ser mais bem
distribuídas, criando outros grupos de informações.
42
No primeiro estudo propusemos o seguinte com estrutura de navegação:
43
Geração de alternativas - Wireframe
A partir do estudo de navegação iniciamos alguns estudos de layouts.
Neste primeiro wireframe, utilizamos a navegação a esquerda por permitir
uma maior possibilidade de opções, devido à altura da tela, caso houvesse
necessidade de aumentarmos o número de opções.
44
Em outra proposta, modificamos a navegação para o topo, ficando assim, o
wireframe mais limpo, conforme figura abaixo.
45
No wireframe abaixo, mais enxuto, resolvemos o problema do topo, do site, e
ainda permitiu-nos incluir outras opções para consulta processual, por nome da parte
ou pelo nome do advogado ou número OAB, como na análise dos similares,
aumentando a usabilidade na consulta. No site atual do Tribunal o usuário não tem a
possibilidade de consultar os seus processos sem clicar em uma opção. Neste
projeto os usuários não precisam navegar para consultar, simplesmente preenche-se
o formulário com a informação que tiver a mão e faz-se a consulta.
46
Seleção da Alternativa
A alternativa escolhida foi à última evolução do wireframe. Nele conseguimos
incluir de maneira satisfatória a pesquisa de acompanhamento processual de três
formas possíveis aumentando a satisfação dos usuários, além de outras propostas
conceituais.
48
O menu Drop-Down permitirá conhecer as opções hierárquicas da navegação
global do site, sem a necessidade de se clicar, passando simplesmente o mouse por
essas opções. No caso de novas opções, em um nível de detalhamento maior,
novas opções serão apresentadas, tornando assim, a navegação agradável.
49
No layout, acima, apresentamos a página de conteúdo padrão, nela
mantivemos os elementos de identificação do site em um conteúdo textual
agradável. O mais importante nessa página é a “migalha de pão”, que segundo
KRUG (2006), é um ótimo elemento de orientação. Como este pesquisador também
salienta, buscamos um bom contraste com boa área de respiro, para que em uma
rápida olhada, favoreça ao usuário quanto a sua localização “Onde estou? De onde
eu vim?”, uma vez que este mesmo usuário pode simplesmente ter chegado ao site
via método de buscas como o Google.
50
O Layout do resultado da consulta processual, fora os elementos de repetição
do site, foi utilizado o formulário de retorno existente no sistema atual, uma vez que
para a realização da prototipação será esse o resultado visual da consulta.
51
Ferramentas e técnicas utilizadas no projeto
Para a realização do projeto foram utilizadas as seguintes ferramentas:
• Adobe Fireworks CS4 – utilizado no projeto dos layouts das páginas;
• Grid 960 como framework CSS - utilizado para o layout das páginas
• Pure CSS Menu - utilizado para o projeto da navegação;
• Adobe Dreamweaver CS4 - utilizado para o projeto do HTML e CSS.
52
Considerações finais
A principal reclamação nos fóruns jurídicos trabalhista do Rio de Janeiro é no tocante
ao acesso ao acompanhamento processual, onde apesar de todo o sistema ser
automatizado, para se chegar à consulta de fato, é necessário, caso não se conheça
o sistema, fazer uma “ginástica” para ser localizar a informação de fato, maior
objetivo de quem acessa o site.
Na proposta de redesign conseguimos resolver as seguintes principais
questões abaixo:
Identificação do site
Na questão de identificação do site tornamos fácil o seu reconhecimento, seja pelo
título em extenso, seja pela imagem da Enseada de Botafogo, um dos cartões
postais do Rio de Janeiro ao fundo.
Navegação
Redefinimos a navegação reagrupando opções conforme o seu grau de
relacionamento uma com as outras, tornando mais intuitiva à navegação.
53
consórcio W3C e as próprias recomendações da cartilha do e-Gov.
54
Anexo
Formulários de pesquisas
Sobre o uso do TRT
Com que freqüência você utiliza o site do TRT?
[ ] Todos os dias
[ ] Uma vez por semana
[ ] Uma vez por mês
[ ] Uma vez a cada 2 meses
[ ] Uma vez por semestre
[ ] Nunca visitei
55
Referências Bibliográficas
56
RELATÓRIO RETRATO DA WEB GOVERNAMENTAL -
http://www.nic.br/imprensa/releases/ 2010/rl-2010-17.pdf em 03/09/2010
OAB media conflito entre o TRT1 e os advogados -
http://www.jusbrasil.com.br/noticias/2287200/oab-do-rio-cria-comissao-para-mediar-
conflito-entre-advogados-e-trt em 03/09/2010
57