CENTRO UNIVERSITÁRIO CARIOCA - UNICARIOCA

MILTON FERREIRA DE ANDRADE FILHO

BACHARELADO EM DESIGN – PROGRAMAÇÃO VISUAL

CAMPUS RIO COMPRIDO

Redesign do site do Tribunal Regional do Trabalho 1ª Região

Orientado ao Usuário.

Rio de Janeiro

2010
 MILTON FERREIRA DE ANDRADE FILHO

Redesign do site do Tribunal Regional do Trabalho 1ª Região

Orientado ao Usuário.

Trabalho de conclusão do curso ao

Centro Universitário Carioca – UNICARIOCA,

como requisito a obtenção do grau de bacharelado

em Design – Programação Visual

Orientadora: Profa. Dra Inês Maciel

Co-orientadora: Profa.Ana Sofia Mariz

Rio de Janeiro

2010

2
 MILTON FERREIRA DE ANDRADE FILHO

Redesign do site do Tribunal Regional do Trabalho 1ª Região

orientado ao usuário.

BANCA EXAMINADORA

Orientadora: Profa. Dra. Inês Maciel

Co-Orientadora: Profa. Ana Sofia Mariz

Coordenador: Rafael Leonardo Tocuyo Serrano

Rio de Janeiro

2010
3
Sumário
Agradecimentos | 5

Resumo | 6

Abstract | 7

Introdução | 8

Cronograma | 9

Justificativa | 10

Definição do Cliente e do Público Alvo | 12

Objetivo | 13

Problematização | 14

Referencial teórico | 22

Requisitos e restrições do Projeto | 30

Escopo do projeto | 31

Analise de Similares | 32

Conceito do projeto | 41

Estrutura de navegação | 42

Geração de Alternativas – Wireframe | 44

Seleção de alternativas | 47

Ferramentas e técnicas utilizadas no projeto | 52

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.

Palavras-chave: Judiciário, Usabilidade, Internet, e-Gov

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.

Keywords: Judiciary, Usability, Internet, e-Gov

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.

A Justiça Trabalhista é presidida por um Juiz de Direito ou bacharel nomeado

pelo Presidente da República para mandato de dois anos, e composta pelos vogais
indicados por sindicatos, representando os interesses dos trabalhadores e
empregadores, para mandato também de dois anos.

Os magistrados ingressam na carreira através de concurso público de provas

e títulos, exceção apenas é a admissão do Quinto Constitucional pelo qual
advogados (OAB) e procuradores (MP) ingressam diretamente e sem concurso no
Tribunal, indicados pelas respectivas entidades.

O Tribunal Regional da 1ª Região tinha jurisdição no Distrito Federal, Rio de

Janeiro e Espírito Santo, sendo que, além das juntas já citadas, funcionavam as de
Niterói, Campos, Petrópolis, Cachoeiro do Itapemirim e Vitória. Só existiam
substitutos na sede e eram apenas quatro, que permaneceram nesta situação
durante doze anos.

O público alvo é dividido em quatro grupos principais.

• Advogados;

• Reclamantes;

• Estudantes de Direito (estagiários);

• 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.

A identificação subjetiva se dá através dos elementos gráficos a direita da

figura acima, que se reportam a elementos turísticos conhecidos no Rio de Janeiro.
No site do TRT1, encontramos o título da página, ou link, modificado,
conforme orientação de NIELSEN e TAHIR (2002), mas de forma insuficiente para a
identificação correta, quando armazenada em favorito (bookmarks). Como exemplo,
se clicarmos na opção Conheça o TRT -> Memória, o título da página armazenada
é simplesmente Memória, insuficiente para identificação correta no armazenamento
da página, com difícil recordação de que se trata do TRT1.
NIELSEN e TAHIR (2002, p.25) afirma que toda página necessita de um título
simples e objetivo tendo um papel crítico na marcação e localização do site nos
mecanismo de pesquisa. Quando usuários visitam um site, o título da janela se torna
o nome do marcador, então, deve iniciar com palavras que os usuários,
provavelmente, associarão ao site, sendo assim, os títulos devem transmitir o
máximo de informação possível em um número reduzido de palavras.
Para uma navegação bem orientada, toda página deveria existir, bem no topo,
o elemento de navegação, Você está aqui: que permite ao usuário uma rápida
identificação do trajeto feito, que no site em análise, é inexistente.
KRUG (2006, p.44-45) denomina este elemento de orientação de “migalhas
de pão”, muito útil em sites com muita profundidade, mas alerta, que a falha mais
comum no seu uso é que são “sutis demais”, eles precisam ser destacados, de outra
15
forma perderão o valor como dicas visuais e se confundirão com outros elementos
da página.
No layout da home page contamos com três opções de navegação: topo,
esquerdo e direito. Na navegação direita, optou-se por botões ao invés de links. O
menu no topo tem opções que são mapeadas (image-map), onde seu
funcionamento só ocorre se o cursor estiver bem posicionado. Para pessoas com
problemas motor isso é um impedimento.
Das três opções encontradas, no topo, menu global, somente a opção Mapa
do site é de interesse público as anteriores Intranet e Área Restrita são de uso
restrito e exclusivo de magistrados, funcionário.

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.

No canto esquerdo, um pouco abaixo do topo e acima da pesquisa,

encontramos outro erro de codificação que pode levar o usuário a erro de
interpretação, acreditando ser uma opção clicável, como pode ser visto na figura
abaixo.

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.

As opções de acesso da coluna a direita da página, não oferecem um bom

contraste frente/fundo prejudicando a legibilidade das opções, como pode ser
verificado na figura abaixo.

Outra situação crítica que foge as recomendações dos padrões W3C, é a

mudança dos estados do link, já devidamente aceito e instituído, por outra cor
17
aleatoriamente, como na figura abaixo, onde, os três estados a coloração é a mesma
não servindo de orientação de navegação para o usuário saber se visitou o link ou
não.

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.

No design existem quatro regras básicas: proximidade, alinhamento, contraste

e repetição. Em algumas páginas a repetição dos elementos do design inexiste,
como na opção acompanhamento processual, gerando inconsistência. A figura
abaixo ilustra o problema.

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.

A partir desse instante o site em foco é o do Tribunal do Tocantins. Para

retornar o usuário deverá fechar a janela atual para ter acesso novamente ao
Tribunal do Rio.
O mapa do site, elemento muito útil de navegação, para usuários mais
experientes, tem opções de navegação que ora mostram inconsistência com as
opções na navegação local (esquerda) ora tem opções que inexistem no mesmo
elemento de navegação, como, por exemplo, programa de qualidade, opção que
existe no mapa do site e que inexiste em outro lugar, na navegação, para citar um
exemplo.
20
 Finalizando a cor azul clara para o layout não oferece um bom contraste para
delimitar as áreas da página, onde o ideal seria um contraste mais forte, conseguido
através de uma cor escura sobre uma cor clara, como exemplo, poderia ser um azul
mais escuro.

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.

No projeto do wireframe cabe indicar a correta marcação dos elementos que

compõem a página: imagens, textos, formulários, flash, mecanismos de busca etc.
padronizados para todos os wireframes da documentação.

Além da função estrutural, o wireframe também se presta a marcação de

etapas de um processo de interação entre usuário e sistema. Como sistemas de
compras online, por exemplo, que vão da busca pelo produto, escolha dessa busca,
confirmação de compra, preenchimento do cadastro e opção de pagamento. Para
cada etapa do processo de compra é necessário haver um wireframe, explicando
detalhamente as possibilidades de interação e o caminho percorrido pelo usuário.

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.

Sintetizando, NIELSEN (2007) recomenda:

• Escolher a fonte mais adequada no caso do ambiente web é importante
observar se estão presentes no computador do usuário, independente de ser
serifada ou não, pois de outra forma, o computador é que decidirá que fonte
25
 utilizar. Observar também a compatibilidade com o conceito que se deseja
transmitir.

• 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.

• Manter a consistência da interface significa usar poucas combinações de

fontes, sempre que possível, dentro da mesma família tipográfica, utilizando a
folha de estilos (CSS) para formatá-la conforme a necessidade de
apresentação.

• Garantir um contraste satisfatório, pois, no monitor digital as variações são

incontroláveis, uma vez que depende de fatores que não estão ao alcance do
designer, como, a resolução, brilho, contraste, para citar alguns elementos.

• Limitar a comprimento da linha de texto, pois, em ambientes digitais linhas

muito estreitas ou muito largas dificultam a leitura o comprimento adequado
deve ficar entre 50 e 60 caracteres de largura.

Fontes segura para Web

Nos principais sistemas operacionais em uso encontramos algumas fontes em
comum, consideradas fontes seguras para serem utilizadas em ambiente web.
• Arial
• Arial Black

• 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.

Separação do código da formatação

A estrutura da página será separada da sua formatação através de folhas de estilo
(CSS).

Páginas em conformidade com os padrões Web

Especificações abertas que permitirão maior acessibilidade das páginas ao maior
número de usuários possível.

Páginas independentes de navegadores e plataformas

Não serão utilizados tags, formatações ou comandos proprietários que possam
comprometer prejudicar ou impedir a visualização correta das páginas em outros
navegadores ou sistemas operacionais.

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

Tribunal Regional do Trabalho 19ª. Região – Alagoas

[ 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.

No caso da consulta processual existe uma redundância, onde o usuário tanto

pode acessar as informações processuais pelas opções a direita (consulta direta), no
topo, através da opção Processos => consultas processuais, como também no
menu hierárquico central Consultas processuais. Acredito ser desnecessários
todos esses caminhos para se consultar um processo o que pode confundir o
usuário, como afirma NIELSEN (2007). Com exceção da consulta rápida a
processos, na coluna a direta, as outras duas opções oferecem consultas, além do
código, consultas por advogado e reclamante, vide figura abaixo.

34
 As páginas internas seguem o mesmo padrão, conforme figura abaixo.

Todas as opções do menu global hierárquico (topo) passa a figurar a

esquerda da página exibida. Duas coisas ficam faltando nesse tipo de recurso: o
primeiro qual foi a opção escolhida e como, título do conteúdo, a opção escolhida.
Na figura acima a opção escolhida foi: O Tribunal, ficando faltando o texto em
destaque O Tribunal, para orientação da navegação. Como ponto positivo não
existe quebra do botão voltar, pois, todo o conteúdo é aberto na mesma janela do
navegador. As únicas exceções são: Extranet->Gabinete Virtual e Extranet->Correio
TRT19.
A tipografia utilizada em todo o site é determinada pela folha de estilos (CSS)
com as seguintes famílias de fontes: Verdana, Helvetica, Arial, sans-serif, com esse
procedimento consegue-se manter o mesmo design nos principais sistemas e
navegadores.
A arquitetura da informação foi projetada de maneira satisfatória para a
navegação global. Necessitando somente de alguns elementos de orientação para
facilitar a navegação do usuário evitando cliques desnecessários.

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.

No topo encontramos um menu reduzido com poucas opções de navegação:

contatos, fale conosco, webmail, portal de serviços e ouvidoria. Neste a opção
contato e fale conosco, tem títulos que podem causar confusão, pois, é comum
utilizar-se os dois com a mesma finalidade. No caso do TRT7, contato é uma relação
de endereços e telefones do Tribunal.

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.

Na figura acima, quase ao centro de forma bem discreta, encontramos o

nome do tribunal por extenso. Este deveria estar no topo da página.
O site tem um visual bem limpo, com boa área de respiro, bem diagramado,
boa legibilidade.
A tipografia utilizada em todo o conteúdo são as famílias de fontes: Arial,
Helvetica, sans-serif.
Na navegação através das páginas, encontramos navegação local e
contextual. A visualização do conteúdo é tipo artigo necessitando navegar por
opções no rodapé do artigo próximo/anterior para dar continuidade da leitura. Veja
figuras abaixo.

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.

No canto direito, logo abaixo do topo, encontramos o título: Consultar

Processo, onde não está claro aonde se deve clicar, mas logo se percebe que o
local que deve receber o clique é na lupa e não no título. Nesse caso a metáfora
utilizada cria ambigüidade e incertezas, pois, a lupa é muito utilizada junto com caixa
de pesquisa. A figura abaixo ilustra o problema.

Já na página da consulta, o método é bom, pois caso o usuário tenha

conhecimento como preencher os campos, muito bem, mas caso não o possua,
existem duas orientações: uma através de um flash e outra textual informando toda a
resolução que determina o preenchimento do número para a consulta, servindo
assim de ajuda para os usuários que desconhecem como compor o número CNJ.
Todas as páginas, tanto da navegação global como local, o resultado é
apresentado na mesma janela, permitindo flexibilidade aos usuários utilizarem o
botão voltar para retornar a pontos anteriores.
A navegação a partir dos ícones faz com que algumas opções abram em
novas janelas do navegador. Outras, porém, abrem dentro da mesma janela do
navegador. Essa alternativa impede navegações rápidas só para identificar o que o
link faz.
A área de acesso rápido está na segunda rolagem. Se for importante, por que
não estão mais acima? Pois, dificilmente um usuário focado na consulta processual,
encontrará estas opções. Como as opções abrem, na mesma janela do navegador,
poderia fazer parte da navegação local.
40
Conceito do projeto
A partir dos vários estudos, teorias e pesquisas até aqui apresentadas, o
projeto da nova interface privilegiará um tamanho de janela de navegação maior, por
exemplo, 1024px de largura, também centralizado na janela do navegador utilizado
pelo usuário.
No caso de monitores maiores, ao que for definido no projeto, o excedente
lateral será preenchido como elemento gráfico, complementando a interface,
buscando manter a consistência e uma boa legibilidade.
No conceito da nova interface utilizaremos a cor azul, por entendermos que
ela nos remete a seriedade, tranqüilidade e profundidade e, também, por ser a cor
da identidade visual do Estado do Rio de Janeiro. Outras cores serão utilizadas
como elementos da nova interface buscando uma harmonia, a ser mais bem definida
na geração de alternativas.
A nova interface contará com dois tipos de navegação: a navegação global
(topo) e a navegação local (esquerda). Em ambas as navegações será utilizado
menu hierárquico, com indicação visual para o fato.
Através de card sorting, aplicado em usuários do site, identificaremos qual a
melhor arquitetura informacional para as opções da navegação do site.
A tipografia escolhida por padrão será a Verdana, por ser uma das sem
serifas presentes em todos os sistemas operacionais mais utilizados, e de melhor
legibilidade em tamanhos pequenos e em equipamentos de baixa resolução, como
os monitores de computador, conforme orienta NIELSEN (2007).
A cor utilizada de fundo para o conteúdo, de todo o site, será de alto contraste
(preto sobre branco) por ser esta relação, associada à tipografia escolhida, a que
permite uma melhor leiturabilidade.
Na questão da consulta processual, visando uma melhor usabilidade, na
home page, será incluído elemento de interação que permita ao usuário consultar os
seus processos mais rapidamente, sem passar por várias opções.
Pretendemos também separar o conteúdo conforme os públicos alvos definido
no projeto, por exemplo, uma área para os advogados, para os reclamantes e outra
para os funcionários e magistrados.

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:

Apesar de a distribuição ter sido mais intuitiva, incorríamos no equivoco da

terminologia utilizada, por exemplo, ADVOGADOS E CIDADÃOS, submetendo a
observação de pessoas comuns não estavam bem claros o seu conteúdo.
Fizemos novos estudos e propomos o diagrama abaixo, acreditando ser mais
intuitivo e coerente.

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.

A idéia inicial de trazer para a página principal os elementos de consulta de

processos, nesta primeira visão foi satisfeita, eliminamos diversos elementos que
acreditamos totalmente desnecessários na primeira tela, tornando-a mais limpa e
clara.

44
 Em outra proposta, modificamos a navegação para o topo, ficando assim, o
wireframe mais limpo, conforme figura abaixo.

Neste, é permitido uma largura maior da tela para o conteúdo, apesar da

limitação da largura para os elementos de navegação.
Submetido a apreciação de usuários este foi o aceito.
Em ambos os wireframes o topo ficou um pouco largo, pois precisava conter
além da navegação a caixa para pesquisa processual, em alguns navegadores
poderia ocupar muito espaço, uma vez que pode conter muitos links no navegador
antes da barra de endereço, diminuindo a área útil para exposição do site, então,
fizemos novos estudos e ajustes para simplificação desta área.

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.

Neste layout satisfizemos várias questões de usabilidade, sendo o mais

importante conseguirmos trazer para a primeira página as três formas básicas de
consultas processuais, por número, pelo nome da parte (reclamante) e pelo
advogado, sem congestionar a home page.
Em diversos fóruns sobre o TRT do Rio de Janeiro, a questão de acesso aos
processos é a principal reclamação, tanto de advogados, bem como, das pessoas
reclamantes, que não conseguiam acompanhar o andamento dos mesmos.
Melhoramos também a questão da identificação do site, colocando por
47
extenso o nome do Tribunal, onde anteriormente, só informava TRT1, que se não
fosse pelos elementos gráficos conhecidos do turismo do Rio de Janeiro, ficaria
difícil a identificação.
A questão da identidade visual do site através da repetição dos elementos foi
resolvida. No projeto em uso, em algumas opções, simplesmente os elementos de
repetição somem.
Um maior contraste entre os elementos, uma apresentação mais limpa em
uma janela maior permitirá um melhor conforto visual.
A tipografia utilizada será a Verdana por ser uma das sem serifas presentes
em todos os sistemas operacionais mais utilizados, e de melhor legibilidade em
tamanhos pequenos e em equipamentos de baixa resolução, como os monitores de
computador, conforme orienta NIELSEN (2007). Caso esta não esteja presente no
sistema operacional do usuário então será substituída pela Arial ou, na falta dessa, a
tipografia sem serifa padrão do sistema do usuário.
A cor azul, tanto na imagem do topo, bem como, nos elementos de
navegação se deu ao fato de permitir maior profundidade e seriedade, transmitindo
assim, tranqüilidade no uso do site.
No layout abaixo, demonstramos a imagem da navegação em uso.

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.

Os formatadores CSS utilizados nesse projeto serão:

• grid960.css - utilizado na orientação dos elementos como um todo;
• menu.css - utilizado para a navegação;
• base.css - utilizado para formatar as Tags HTML;
• texto.css - utilizado para a formatação textual do conteúdo.

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:

Acesso ao acompanhamento processual

No acesso ao acompanhamento processual propomos uma unificação das formas
de consulta, já na primeira página, se permitindo, de cara, chegar a informações no
menor esforço possível, bastando para isso, se ter umas das seguintes informações:
número do processo, nome do advogado com OAB ou o nome da parte reclamante.

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.

Orientação nas páginas

Em todas as páginas foram colocada orientação auxiliar de localização, para quando
se estiver navegando ter condições de se orientar rápida e facilmente. Medida
sugerida pelo pesquisador e consultor STEVE KRUG, denominada, por este, por
migalha de pão.

Foram também utilizadas todas as regras de usabilidade, sugerida pelos

pesquisadores e consultores NIELSEN E KRUG, além das regras de padrões web do

53
consórcio W3C e as próprias recomendações da cartilha do e-Gov.

Por questões de tempo, este projeto, não pode privilegiar um estudo em

equipamentos móveis para o mesmo Tribunal, onde seria muito interessante uma
proposta de desenvolvimento de acesso ao TRT do Rio de Janeiro, também a partir
desse tipo de equipamento. Hoje uma realidade em franca expansão.

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

Você encontra tudo que procura no site do TRT?

1 2 3 4 5
Discordo totalmente Concordo Totalmente

Você acha fácil localizar o que procura?

1 2 3 4 5
Discordo totalmente Concordo totalmente

Você acha a consulta processual fácil de realizar?

1 2 3 4 5
Discordo totalmente Concordo totalmente

Você acha que ele é atualizado regularmente?

1 2 3 4 5
Discordo totalmente Concordo totalmente

55
Referências Bibliográficas

NIELSEN, Jakob. LORANGER, Hoan, Usabilidade na Web – Jakob Nielsen, Hoa

Loranger, CAMPUS, 2007
NIELSEN, J. TAHIR, M, Home pages usabilidade: 50 websites desconstruídos,
CAMPUS, 2002
SILVA, M. S., Construindo sites com CSS e (X)HTML, NOVATEC, 2008
AGNER, L, Ergodesign e arquitetura de informação trabalhando com o usuário,
QUARTET, 2009
FERREIRA, S, B, L, e-Usabilidade, LTC, 2008
KRUG, S, Não me faça pensar uma abordagem de bom senso a Usabilidade na
Web, ALTABOOKS, 2006
TIPOGRAFIA WEB - http://webtypography.net em 15/09/2010
DESENVOLVIMENTO WEB COM USO DE PADRÕES: Tecnologias e Tendências
- http://www.renatatr.com/monografia/monografia.pdf em 31/08/2010
MELHORANDO O ACESSO AO GOVERNO COM O MELHOR USO DA WEB -
http://www.w3c.br/divulgacao/pdf/gov-web.pdf em 31/08/2010
E-GOV, CARTILHA DE CODIFICAÇÃO -
http://www.governoeletronico.gov.br/biblioteca/arquivos/padroes-brasil-e-gov-cartilha-
de-codificacao em 31/08/2010
E-GOV, CARTILHA DE REDAÇÃO -
http://www.governoeletronico.gov.br/biblioteca/arquivos/padroes-brasil-e-gov-cartilha-
de-redacao-web em 31/08/2010
E-GOV, CARTILHA DE USABILIDADE -
http://www.governoeletronico.gov.br/biblioteca/arquivos/padroes-brasil-e-gov-cartilha-
de-usabilidade em 31/08/2010
CENSO WEB .GOV.BR - http://www.cgi.br/publicacoes/pesquisas/govbr/cgibr-nicbr-
censoweb-govbr-2010.pdf em 02/09/2010
REVISTA CGI.br, ano 1, 2009 – 1ª. edição -
Http://www.cgi.br/publicacoes/revista/edicao01/cgibr-revistabr-ed1.pdf em 02/09/2010
REVISTA CGI.br, ano 2, 2010 – 2ª. edição -
http://www.cgi.br/publicacoes/revista/edicao02/cgibr-revistabr-ed2.pdf em 02/09/2010

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