Mariana Almeida

LISTA DE FIGURAS
Figura 1 - Exemplo de organização de interface muito utilizada na Internet ................ 20
Figura 2 - Utilização da marca a parte superior esquerda no site da UFPel e no site da

UFSM. ............................................................................................................................. 21
Figura 3 - Busca posicionada na parte superior no site da UFPel. ................................. 22
Figura 4 - Busca posicionada na parte inferior no site da USP....................................... 22
Figura 5 - Navegação Global e Local do site da USP. ...................................................... 23
Figura 6 - Identificação de breadcrumbs no site da Universidade Federal de Santa

Catarina........................................................................................................................... 24
Figura 7 - Rodapé do site da UFPel. ................................................................................ 25
Figura 8 - Sitemap do site da UFPel feito com post-its. ................................................. 33
Figura 9 - Home do site da Unisinos ............................................................................... 40
Figura 10 - Detalhe do um dos itens do menu lateral do site da Unisinos .................... 41
Figura 11 - Home do site da UFRGS ................................................................................ 42
Figura 12 – Menu de destaques do site da UFGRS......................................................... 43
Figura 13 - WebSort.net: site utilizado para a realização do card-sorting ..................... 44
Figura 14 - Menus identificados no site da UFPel. ......................................................... 46
Figura 15 - Página do item de menu "administração" sem título que identifique onde o
usuário está .................................................................................................................... 47
Figura 16 - Item de menu "convênios" que direciona para uma página externa com
pouco conteúdo.............................................................................................................. 47
Figura 17 - O item "notícias" aparece fragmentado em duas partes diferentes do site

da UFPel. ......................................................................................................................... 48
Figura 18 - Item "calendário acadêmico" que direciona para página do DRA. .............. 48
Figura 19 - Sitemap de até dois níveis de navegação do site da UFPel.......................... 50
Figura 20 - Wireframe da página inicial da UFPel .......................................................... 49

5
Figura 21 - Tabela mostrando escolhas dos usuários em porcentagem. ....................... 70
Figura 22 - Tabela com itens que tiveram categoria escolhida por 100% dos usuários 71
Figura 23 - Tabela dos itens que tiveram mesma categoria escolhida por 80% dos
usuários .......................................................................................................................... 71
usuários .......................................................................................................................... 72
usuários .......................................................................................................................... 74
Figura 26 – Sitemap da nova Arquitetura de Informação .............................................. 79
Figura 27 – Esboços no papel do wireframe da nova Arquitetura de Informação da

home ............................................................................................................................... 80
Figura 28 – Wireframe da nova Arquitetura de Informação da home .......................... 81
Figura 29 – Topo da no A.I. da home.............................................................................. 82
Figura 30 – Menu principal com a categoria Ensino aberta ........................................... 82
Figura 31 – Menu principal com a categoria “Pesquisa e Extensão” aberta ................. 82
Figura 32 – Menu principal com a categoria “Comunicação” aberta ............................ 83
Figura 33 – Menu principal com a categoria “Institucional” aberta .............................. 83
Figura 34 – Menu principal com categoria “Serviços” aberta ........................................ 83
Figura 35 – Menu principal com categoria “Fale Conosco” ........................................... 83
Figura 36 - Banners apresentados no site atual abaixado de Agenda.. ......................... 84
Figura 37 - Comunicados exibidos na página atual do site ............................................ 84
Figura 38 – Conteúdo da home da nova A.I. .................................................................. 85
Figura 39 – Mapa do site e rodapé da home.................................................................. 86
Figura 40 - Comparação entre o wireframe do site atual e o wireframe construído

nessa pesquisa ................................................................................................................ 87
SUMÁRIO
INTRODUÇÃO .................................................................................................................... 7
1 CONHECENDO.............................................................................................................. 12
1.1 Site Institucional ............................................................................................. 12

1.2 Arquitetura de Informação, Experiência do Usuário e Usabilidade ............ 13
1.3 Foco no usuário e outros focos existentes..................................................... 15
1.4 Como navegamos pela internet ..................................................................... 17
1.5 Aspectos importantes para a compreensão dos usuários ............................. 19
1.6 Fatores que prejudicam a experiência do usuário ......................................... 26
1.7 Heurísticas de Nielsen .................................................................................... 27
1.8 “10 qualidades de uma navegação que funciona”de Jennifer Fleming......... 28
1.9 Wayfinding .................................................................................................... 29
1.10 Card-sorting .................................................................................................. 29
2 TRAÇANDO................................................................................................................... 31
3 CAMINHANDO ............................................................................................................. 45
4. OTIMIZANDO .............................................................................................................. 61
e explicitado a partir de agora........................................................................................ 61

4.1 Análise dos testes de usabilidade .................................................................. 61
4.2 Construção das personas ............................................................................... 62
4.3 Itens de menu da nova Arquitetura de Informação e categorias .................. 64
4.4 Análise do card-sorting .................................................................................. 69
4.5 Sitemap da nova Arquitetura de Informação ................................................ 78
4.6 Wireframe da home do site reformulado ...................................................... 80
CONSIDERAÇÕES FINAIS ................................................................................................. 88
PROJEÇÕES FUTURAS ..................................................................................................... 90
REFERÊNCIAS .................................................................................................................. 91
ANEXOS ........................................................................................................................... 93
INTRODUÇÃO
Nos primeiros anos em que a internet se tornara popular, a principal preocupação dos
projetistas dos sites era expor as informações necessárias sobre o que se pretendia comunicar.
“No início, a Web era apenas um ambiente para publicação de documentos no formato texto e
HTML (Hypertext Markup Language) e, portanto, a interação dos usuários era limitada a
ler/imprimir texto e a selecionar links para outros documentos” (WINCKLER, PIMENTA, 2007). O
grande problema é que, para a maioria desses projetistas, todas as informações eram
importantes e, portanto, todas elas se tornavam necessárias e imprescindíveis, assim, os sites
eram basicamente documentos online com uma quantidade de dados assustadora.
O excesso não era visto de forma negativa, mesmo porque, devido à história recente da
internet que se vivia na época, ainda não havia um histórico do que agradava ou não os
usuários, na realidade, tanto internauta quando programadores estavam descobrindo como era
viver na era da web.
Mas logo, conforme mais recursos foram sendo agregados à internet, percebeu-se que
muitas das informações disponibilizadas eram irrelevantes para o usuário que acessava sites
para achar dados específicos que correspondiam ao que era por ele procurado, ignorando os
outros. Além de tudo, a rapidez da internet também mudou o modo com que as pessoas
conviviam com ela; esse caráter ágil acrescentava, inevitavelmente, outras características à
internet, como, por exemplo, conteúdos que fossem todos diretos, de fácil e rápido
entendimento para que, assim, fosse possível realizar várias tarefas simultaneamente. Então, a
quantidade de informações deixava de ser a principal preocupação na web, dando esse posto
às necessidades dos usuários e, assim, os projetistas passaram a se dedicar “à construção de
um espaço de trabalho e de comunicação cada vez mais 'transparente' e 'amigável'” (LÉVY,
1999, p. 27 e 28).
Com o tempo essa característica ganhou força, evoluindo para o que se vê atualmente:
pesquisas por público alvo de cada site e de que esse público carece, conteúdos voltados
8
diretamente para tornar a navegação o mais agradável possível, informações expostas de forma
direta para tornar a experiência rápida, testes de usabilidade com usuários reais, etc.
Mesmo esses atributos sendo primordiais para atingir o que mais se visa hoje, que é uma
boa experiência do usuário, muitos sites ainda não adotam essa postura (por descaso ou,
mesmo, por não saber como agir perante isso), e passam a ser mal vistos diante seu público,
como confirma Luis Agner 1, no livro Ergodesign e Arquitetura de Informação – Trabalhando
com o usuário, que “Parte dos fracassos dos empreendimentos da web pode ser atribuída à
desconsideração das necessidades, dos objetivos e das características dos usuários” (2006, p.
47).
Navegando pela internet é possível encontrar vários sites que tendem ao fracasso por não
levarem em consideração as necessidades dos usuários. A tendência é que a maioria desses
sites sejam acessados por cada vez menos pessoas ou, então, que eles continuem sendo
acessados, mas prejudiquem a imagem do produto, empresa ou instituição a qual se referem.
Tendo em vista sites otimizados com uma preocupação maior com a usabilidade e experiência
do usuário, algumas análises sugerem que o site da Universidade Federal de Pelotas (UFPel)
poderia ser melhor resolvido.
Um portal institucional 2, como o da UFPel, é acessado por uma gama muito grande de
pessoas e contém uma quantidade grande de informações, por isso deve ter um cuidado maior
com a organização dos conteúdos e com a adequação desses conteúdos ao público alvo. Sites
desse tipo são mais complexos de serem pensados justamente por essas características
marcantes de excesso de informações e acesso de usuários muito distintos um dos outros, aqui
pequenos descuidos - como posicionamento e localização de itens de menu, teor da página
inicial, hierarquia dos menus e dos elementos (textos, imagens, campos de preenchimento)
apresentados na tela, etc – podem ser determinantes para o sucesso do portal.
1
Luiz Agner é Doutor em Design pela PUC-Rio (2008), programador visual, pesquisador e professor. Foi o
primeiro autor brasileiro a dedicar um livro inteiro ao tema da Arquitetura da Informação.
2
Site que serve para dar informações sobre a empresa/instituição, sempre deixando claro seus
objetivos; não se trata de um site dedicada a venda de produtos ou serviços.
9
Assim é possível observar como a construção de um website exige muito mais do que bom
gosto estético e que não existe uma fórmula mágica que dê certo pra todos os tipos de sites
imagináveis, assim como diz a designer Fleming3, citado por Agner (2006)
[...] um site só será bem-sucedido se der suporte adequado às intenções e ao

comportamento do seu usuário. A estratégia que funciona bem para um site pode
estar totalmente errada para outro. Por isso, compreender quais são essas intenções e
comportamentos seria a etapa mais importante do design (AGNER, 2006, p.49 e 50).
E é nesse contexto todo que a Arquitetura de Informação se faz essencial. A expressão foi
criada nos anos 70 pelo arquiteto Richard Wurman 4 quando ditou que bons arquitetos de
informação têm como função tornar o complexo claro, tornar a informação compreensível para
outros seres humanos. Se eles exercem sua função com sucesso, são bons arquitetos de
informação. Se falham, não são bons (1976). Então, partindo desse conceito do que é o
profissional da área, é possível chegar a uma definição de que a Arquitetura de Informação (AI)
é a ferramenta usada pra organizar toda a quantidade de informações de forma que estas
sejam intelegíveis perante seus receptores.
Tendo a AI essas características é possível notar o quanto ela é importante para o mundo
da web, tanto para os projetistas dos sites – que os constroem com a intenção de que seja um
sucesso -, quanto para usuários – que pretendem alcançar seus objetivos de forma agradável.
Se todos os sites, inclusive os institucionais como o da UFPEL, fossem pensados de forma a
priorizar a arquitetura de informação, a relação site/usuário teria menor probabilidade de ser
falha.
Traçando os caminhos prováveis que o usuário irá percorrer pelas páginas e dando ao
mesmo o suporte necessário para que em nenhum momento ele se perca no site, a AI bem
planejada facilita a navegação, o deixa mais satisfeito e o faz ter um acesso mais aprazível e,
com isso, mais freqüente. Considerando todos os apontamentos anteriores, e o fato do site da
UFPEL apresentar um grande número de acessos pela população acadêmica – que é muito
ampla e distinta – e mesmo por pessoas externas ao universo da faculdade, optou-se por
reorganizar a estrutura navegacional como um todo, mas levando em consideração que a
construção da monografia tem um tempo determinado não muito extenso e que o objeto de
3
Jennifer Fleming autora do livro Web Navegation: Designing the User Experience de 1998.
4
Richard Saul Wurman é um arquiteto e designer gráfico. Ele é considerado um pioneiro na prática de
tornar a informação compreensível.
10
estudo expõe na página inicial o resumo do site como um todo, decidiu-se por essa
reformulação abranger apenas a home do site.
Justamente por questões de tempo, a ideia inicial era construir uma nova Arquitetura de
Informação de apenas um setor do site, após algumas análises feitas chegou-se a conclusão de
que o público mais assíduo no site da UFPel é o de alunos; além disso, esse é o setor que possui
a quantidade mais densa de conteúdos, logo, seria ele o ideal para ter sua AI básica refeita.
Todavia, a maior parte dos conteúdos destinados a alunos estão na página do DRA
(Departamento de Registros Acadêmicos), além disso, existem várias outras informações
pertinentes a esse público que se encontram em diversas partes distintas do site, o que
dificultaria o processo, deixando parte do site adequado e parte não. Logo, foi mais coerente
decidir por reformular a AI da home do site de forma que também pudesse atingir grande
parcela do público-alvo.
Após todas as reflexões feitas, foi possível chegar à questão problema que levou a
existência desse Trabalho de Conclusão de Curso (TCC): Como propor uma nova Arquitetura da
home do site da UFPel com foco na Usabilidade?
O trabalho será divido em quatro capítulos que englobarão desde conceitos básicos sobre
os assuntos aqui presentes até a parte prática do projeto. O Capítulo Um será de referencial
teórico para mostrar qual a importância de um site com as informações organizadas de forma
clara e coesa, serão abordados conceitos como o de Arquitetura de Informação, Usabilidade e
Experiência do Usuário. Também serão feitas comparações entre soluções ideais e inadequadas
recolhidas através do benchmarck 5 para expor quais recursos utilizados são os mais
apropriados para sites institucionais no geral.
O Capítulo Dois trará a metodologia usada para realização do trabalho, serão explicados
todos os passos percorridos citando os autores que foram usados para construção de
pensamento e realização da prática, aqui também se encontrarão as definições dos testes de
usabilidade – o processo de construção, a escolha dos usuários que irão realizá-los –
benchmarcks mais detalhadas, definições de personas e card-sorting. A análise do site da UFPel
estará no Capítulo Três, serão apontadas as observações feitas da navegação, a estrutura e
5
Benchmarck é o processo contínuo de comparação de produtos, serviços e práticas empresariais. É um
processo de pesquisa que permite realizar comparações de processos e práticas. (SORIO, 2010)
11
disposição dos elementos (menus, busca, etc), quais os caminhos traçados através do site; este
capitulo irá conter todo material proveniente do estudo feito a partir do uso do objeto da
pesquisa.
O Capitulo Quatro trará o resultado dos testes de usabilidade, as análises do card-sorting, a

construção das personas e a definição dos itens de menu, que irão colaborar para a concepção
da nova Arquitetura de Informação da home do site da UFPel, que também estará exposta
neste capítulo. Por fim, serão feitas as Considerações Finais explanando os resultados obtidos
após todas as etapas do projeto.
1 CONHECENDO
Projetar um site é uma tarefa muito mais complexa do que parece. Com a facilidade de
adquirir e fornecer informações, o conhecimento, hoje, é mais disseminado do que nunca, o
que significa que, em diversas áreas, é de certa forma fácil absorver informações suficientes
para executar certas atividades. É o que acontece, por exemplo, com a criação de sites. Tornou-
se tão fácil ter acesso a tutoriais tanto de ferramentas de criação gráfica quanto de códigos de
programação que o ato de projetar um site passou a ser resumido apenas nesses dois aspectos.
Mas na verdade, a construção do um site envolve muitos outros aspectos além desses.
1.1 Site Institucional

O objeto de estudo por ser um site institucional tem uma forma diferente de comunicar
de outros sites, como os de vendas de produtos, por exemplo. Segundo Margarida Kunsch 6
(2003), a comunicação institucional pretende difundir a imagem da instituição e depende de
todos os públicos envolvidos no processo (administradores, reitor, alunos, professores,
comunidade, etc), ela possui algumas características, o objeto que comunica dessa forma [1]
objetiva consquistar simpatia, credibilidade e confiança, tendo como meta final a influência
político social; [2] vincula-se aos aspectos corporativos/institucionais, [3] estabelece um
conceito público para a organização, [4] dissemina informações de interesse público sobre as
políticas e práticas da organização a qual se refere, [5] colabora na constituição de uma
identidade e imagem corporativa e [6] enfatiza a missão, valores e objetivos da organização.
Pode-se perceber esse caráter organizacional instituído no site da Universidade Federal

de Pelotas, conforme fica explícito na listagem de menus e assuntos abordados já a partir de
sua home.
6
Margarida Kunsch Professora-titular da ECA-USP. Mestre, doutora e livre-docente pela mesma
instituição. È presidente da Associação Brasileira de Pesquisadores em Comunicação Organizacional e
Relações Públicas (Abrapcorp).
13
1.2 Arquitetura de Informação, Experiência do Usuário e Usabilidade

Considerando a grande quantidade de informação disponibilizada na rede por vezes tem
feito com que seja esquecido um dos aspectos de maior importância para o sucesso de um site:
a preocupação com os usuários. Para a pesquisa e prática desse trabalho, mapear alguns
conceitos básicos para a reconstrução de uma organização de conteúdo adequada se fez
essencial já que o usuário é a o foco principal desse projeto. As tecnologias que foram surgindo
– e que ainda surgem – têm modificado a forma com que as informações se apresentam,
quanto maior a quantidade de informações, mais difícil dispô-las de uma maneira coerente e de
fácil entendimento e mais recorrente o risco que se corre ao planejar essa organização. É
justamente neste contexto que a Arquitetura de Informação se faz necessariamente presente.
A Arquitetura de Informação (AI) começa a fazer parte da realidade da web no momento

que a quantidade de dados começa a ser tão grande a ponto de gerar confusão ao invés de
esclarecer, é necessário que a informação seja transformada em conhecimento de forma a se
fazer útil a quem a acessa. Como já citado anteriormente, o termo AI foi criado na década de 70
com Wurman. Baseado no conceito do autor, pode-se dizer que Arquitetura de Informação
nada mais é que a arte de organizar o conteúdo de forma simples e adequada, ou como explica
Agner “o foco da AI é o projeto de estruturas (ambientes informacionais) que fornecem aos
usuários recursos necessários para transformar suas necessidades em ações e para atingir seus
objetivos com sucesso” (2006, p. 88).
Mas isso significa que absolutamente todo conteúdo deve ser útil – e tornar-se
conhecimento – a todos os públicos de um site? De forma alguma, mesmo porque isso seria,
além de impossível, totalmente desnecessário. O que se faz imprescindível é que o conteúdo
esteja organizado de forma que o usuário consiga perceber a disposição das informações e
assim, de maneira fácil e rápida, optar por aquelas que são do seu agrado. Tendo um ambiente
organizado de forma coerente o usuário sabe, intuitivamente, os caminhos que deve percorrer
para encontrar o que procura. Como diz Agner, o arquiteto de informação “é a pessoa que
mapeia determinada informação e nos disponibiliza o mapa de modo que todos possamos criar
nossos caminhos próprios em direção ao conhecimento” (2006, p. 76).
14
Para atingir essa estrutura ideal é preciso prestar atenção no usuário, saber exatamente o
que ele pretende ao acessar o site, quais suas expectativas, o projeto necessariamente deve ser
centrado no usuário para funcionar, se a experiência do usuário não for o foco da estrutura,
muito provavelmente, o site será um fracasso.
A questão é que, quando estamos usando a Web, cada dúvida aumenta o

nosso trabalho, distraindo nossa atenção da tarefa que estamos
executando. As distrações podem ser pequenas, porém vão se
avolumando e, às vezes, podem nos confundir. Como regra geral, as
pessoas não gostam de ter de descobrir como fazer algo. O fato das
pessoas que criaram o site não terem se importado em deixar as coisas
óbvias – e fáceis – pode diminuir nossa confiança no site e em seus donos
(KRUG, 2006, p. 5).
A boa experiência do usuário envolve uma gama muito grande de aspectos, entre as mais
importantes encontram-se a navegação fluida e a usabilidade. Navegação, basicamente
significa se movimentar no espaço, no momento que essa movimentação é feita de forma
quase imperceptível, intuitivamente, a navegação pode ser considerada fluida, o que denota
que o usuário está bem inserido no contexto do site e que se sente a vontade para explorá-lo
sem perigo de se perder por algum caminho. Isso é um ponto positivo, acontece quando “as
interfaces e os projetos de navegação são muito parecidos com uma conversa, um diálogo
entre duas pessoas. Eu faço as perguntas, a interface responde, ela pede uma reação, e eu
continuo o bate-papo” (MEMÓRIA, 2006, p. 50). Em síntese, experiência do usuário é a
qualidade da experiência de uma pessoa ao interagir com um algum objeto específico.
Tudo isso nada mais é que o diálogo entre interface e o usuário, essa conversa, se bem
coesa e clara, é diretamente permeada pela usabilidade que permite que o utilizador do
sistema alcance seus objetivos de interação, a usabilidade é além de tudo a “capacidade, em
termos funcionais humanos, de um sistema ser usado facilmente e com eficiência do usuário”
(SHACKEL, 1993). Usabilidade está em tudo e é de grande importância, segundo Nielsen, ela
(...) pode ser questão de vida ou morte. Na guerra, um soldado em um bombardeio

tem uma boa vantagem se a interface do usuário de seu avião para os sistemas de
mira e disparo for apenas um segundo mais rápido que os do seu inimigo. Na Web,
naturalmente, a usabilidade não tem papel tão crucial. Mas isso pode determinar se
seu Website é bom e malsucedido (NIESEN, 2006, p. 123).
15
Este é um dos quesitos mais importantes de um site bem construído, a usabilidade é

essencial para que o usuário tenha sua utilização facilitada e assim se sinta satisfeito,
aumentando as suas chances de voltar a acessar o site.
1.3 Foco no usuário e outros focos existentes

Quando um site começa a ser projetado, costuma-se pensar que para que ele seja
adequado e funcione corretamente é importante que seja focado no usuário e supra as
necessidades do mesmo. Mas isso não é uma regra, apesar de menos conhecidos, existem
outros focos existentes que não o foco no usuário. Segundo Frederick Van Amstel 7 (2006), o
design pode ser centrado [1] no cliente, [2] no designer, [3] no sistema, [4] no usuário, [5] no
comportamento, [6] na atividade, [7] na tarefa e [8] na ação. As citações literárias não serão
paginadas pois foram retiradas de uma matéria presente na internet
(http://usabilidoido.com.br/design_centrado_em_que.html).
[1] Design centrado no cliente: esse foco se dá, geralmente, quando o produto deve
trazer algum retorno para uma organização, “transmitir a imagem que a organização quer
passar aos usuários”. Por vezes, quando o foco está no cliente, áreas do site ficam difíceis de
serem compreendidas pelos usuários, por vários motivos como, por exemplo, usar
nomenclatura complexa não familiar a quem acessa o site.
[2] Design centrado no designer: “o resultado de um design centrado no designer é,

quase sempre, uma obra de arte”, por vezes essa obra de arte pode ser bem pensada não só
esteticamente e assim ser relevante para os usuários. O designer precisa levar em consideração
a forma com que o usuário final irá utilizar o site.
[3] Design centrado no sistema: a forma como o site é usado não é tão importante
quanto o funcionamento do sistema, “as funcionalidades do sistema não são definidas pela sua
utilidade para o usuário final, mas sim pela relevância tecnológica no mercado”.
7
Frederick Van Amstel é cofundador do Instituto Faber-Ludens de Design de Interação e editor do blog
Usabilidoido. Bacharel em Comunicação (UFPR) e Mestre em Tecnologia (UTFPR), Frederick vive na
Holanda, onde realiza pesquisa de doutorando sobre Design Participativo
16
[4] Design centrado no usuário: neste foco o projeto, o público-alvo e suas necessidades
são reconhecidos e definidos. O produto precisa adaptar-se ás características dos usuários e
suprir suas principais necessidades. Segundo Van Amstel, como não é possível envolver todos
os usuários no processo “o design centrado no usuário tende a gerar produtos adaptados
comente para aqueles usuários que participaram das pesquisas”.
[5] Design centrado no comportamento: se preocupa em prestar atenção no que o

usuário faz, e não no que o usuário diz, assim, identifica padrões de comportamento que sejam
comuns entre um grupo de pessoas. O grande problema desse foco é acreditar que todas as
pessoas irão se comportar da mesma maneira.
[6] Design centrado na atividade: o projeto deve se adaptar à cultura onde os usuários
estão inseridos, “quando se projeta pensando na atividade, se projeta também as mudanças
nas estruturas sociais e simbólicas dos indivíduos”. O produto é ferramenta de mediação entre
pessoas que participam de uma mesma atividade.
[7] Design centrado na tarefa: nesse foco só é importante o modelo mental do usuário
sobre as tarefas a serem realizadas, são mostradas de forma muito clara as etapas necessárias
para cumprir uma tarefa determinada.
[8] Design centrado na ação: as funcionalidades do produto devem estar sempre

disponíveis e serem de fácil acesso, a interface precisa seguir os padrões de interação já
conhecidos pelo usuário, “o mais importante é que cada ação resulte reação esperada pelo
usuário”.
Optou-se que esse projeto fosse centrado no usuário por possuir públicos diversos e um
número muito grande de pessoas que acessam o site. Por ser um site institucional, e assim as
ações realizadas nele serem mais específicas, as decisões tomadas pelos usuários participantes
dos testes de usabilidade, representam as tarefas desempenhadas e caminhos percorridos de
grande parte dos usuários.
17
1.4 Como navegamos pela internet

Entender um pouco melhor conceitos como estes de Arquitetura de Informação,
Experiência do Usuário e Usabilidade, nos faz refletir sobre a navegação pela web no geral e na
forma em que usamos a internet. Steve Krug (2006) explica como funciona a navegação dos
usuários pelo site. Geralmente os sites são projetados como se quem os acessa fosse analisar
atentamente cada parte da estrutura das páginas organizando mentalmente a disposição dos
elementos, seguindo um caminho linear de compreensão dos conteúdos e pensando em todas
as opções antes mesmo de clicar em qualquer link. A questão é que são raros os usuários que
fazem esse estudo ao acessar algum site, a grande maioria deles condiciona a sua navegação à
pressa que tem em acessar a informação, o que está procurando, o tipo de página que está
acessando. Logo é importante, para projetar páginas realmente eficazes a todos os tipos de
usuários de determinado site, adotar três fatores sobre o uso real da web: as páginas não são
lidas, os usuários apenas dão uma olhada nelas; os usuários não fazem escolhas ideais e sim
escolhem o que lhes é suficiente; o usuário não tenta descobrir como as coisas funciona, ele
apenas está preocupada em atingir seu objetivo.
As pessoas tendem a gastar pouco tempo navegando atentamente em páginas na web,

elas simplesmente passam pelas páginas procurando frases ou palavras-chave que chamem a
sua atenção. Segundo Krug apenas passamos rapidamente pelas páginas porque [1]
“Geralmente estamos com pressa”: o usuário navega pela internet justamente por seu caráter
ágil e sempre visando economizar tempo, mesmo que aja tempo livre pra navegar, “como
conseqüência disso, os usuários da Web tendem a agir como tubarões: Eles têm de se manter
em movimento ou morrem. Nós simplesmente não temos tempo para ler mais do que o
necessário” (2006, p. 10), e além de não haver tempo, não há desejo por parte do usuário de
permanecer mais em cada página, afinal, se a web é rápida o usuário quer acompanhá-la; [2]
“Sabemos que não precisamos ler tudo”: interessa ao usuário apenas partes específicas de cada
página pela qual navega, sabendo disso, ele apenas dá uma olhada rápida na tela de forma a
definir o que lhe é mais relevante e, consequentemente, suficiente; [3] “Somos bons nisso”: a
vida toda nós folheamos jornais e revistas usando esse mesmo método de apenas selecionar e
ler o que nos é mais importante, e se sabe que esta fórmula funciona então aplica-se isso
também na internet.
18
Apesar de no projeto de um site ser suposto que os usuários irão examinar cada página,
considerar todas as opções e escolher a melhor delas, isso não acontece, ele escolhe a primeira
opção razoável que encontra. Mas por que os usuários não procuram a melhor opção? Aqui
entra em pauta novamente a pressa, entender tudo que acontece numa página é difícil, é
muito mais fácil e rápido fazer o que for suficiente, além disso, o usuário sabe que não
acontece nada grave se ele errar o caminho, “a penalidade por fazer uma suposição equivocada
em um Web site é geralmente apenas um ou dois cliques no botão Voltar, tornando o ato de
fazer o suficiente uma estratégia efetiva” (KRUG, 2006, p. 11), o usuário também sabe que
pesar as opções pode não ser muito eficaz, em sites não muito bem projetados, por vezes, a
melhor escolha não colabora para uma navegação agradável e satisfatória.
Segundo Steve Krug, poucas são as pessoas que gastam tempo tentando aprender como
alguma tecnologia funciona, sempre se visa atingir um objetivo e não necessariamente
aprender como o sistema trabalha. Mas embora os artefatos sejam usados o tempo todo sem
que sejam compreendidos, muitas vezes as tarefas desejadas são cumpridas mesmo que de
forma não esperada por quem a projetou. Na web até mesmo usuários com bom conhecimento
técnico tendem a agir sem seguir um “manual”, o que por vezes pode implicar em resultados
ainda assim positivos ou, então, gerar falhas de compreensão. Isso acontece porque para a
maioria das pessoas não é importante a forma como algo funciona, mas sim se consegue fazer
o manuseio do objeto atingindo os fins desejados, além disso, no momento em que qualquer
forma de utilização que funcione é encontrada, tende-se a não se procurar mais por uma opção
melhor. Apesar dos usuários não terem essa preocupação com a compreensão de um sistema,
em alguns casos, seria muito útil se eles entendessem como as coisas funcionam a chance de
encontrarem o que estão procurando seria ainda maior, eles perceberiam melhor o que o site
tem a oferecer além das coisas que desejam encontrar, os usuários se sentirão espertos e no
controle o que os fará retornar ao site.
A forma como o usuário navega pela internet só afirma que não é fácil projetar o site, por
isso é muito importante que se conheça muito bem o público-alvo para saber exatamente o
que lhe agrada e assim tornar todo o site interessante perante o usuário.
19
1.5 Aspectos importantes para a compreensão dos usuários

Levando em consideração que os usuários estão sempre passando rapidamente pelas
páginas na web, Steve Krug elencou cinco fatores importantes que asseguram que eles
compreendam o site o máximo possível: [1] hierarquia visual clara em cada página, [2] páginas
com áreas claramente definidas, [3] itens clicáveis claros, [4] minimização da confusão e [5] uso
das convenções.
Assegurar-se que a aparência visual de cada elemento da página corresponda ao que ele
deve comunicar é uma das melhores formas para torná-la mais facilmente compreendida,
assim deixar o que mais proeminente o que é mais importante, manter coisas relacionadas
logicamente também relacionadas visualmente e agrupar elementos semelhantes são
essenciais para que essa hierarquia visual seja atingida. “Uma boa hierarquia visual nos
economiza trabalho fazendo um tipo de pré-processamento da página para nós, organizando e
priorizando seu conteúdo de uma forma que possamos captar tudo quase instantaneamente”
(KRUG, 2006, p.16).
Logo dividir a página em áreas bem definidas também ajuda para que o processo seja
mais instantâneo e tornar óbvio o que pode ser clicado ou não permite ao usuário escolher
rapidamente em quais espaços da página irá direcionar a sua atenção.
Fazer uso das convenções também é interessante, elas são muito úteis porque maioria
dos casos elas funcionam, facilitando o movimento do usuário pelo site e diminuindo o trabalho
de descobrir como tudo funciona. Não é uma regra usar convenções, mas elas são seguras e
garantem o resultado final do projeto, muitas vezes “o tempo gasto reinventando a roda
resulta em um novo dispositivo revolucionário. Porém, às vezes apenas aumenta a quantidade
de tempo gasto reinventando a roda” (KRUG, 2006, p. 17). Inovar ou usar convenções8 depende
muito do público ao qual o site quer atingir, se esse público espera algo surpreendente
certamente usar as convenções irá frustrá-lo.
As convenções também são abordadas por Felipe Memória, segundo o autor elas
facilitam e otimizam a navegação do usuário. Em projetos para o web é muito importante que
8
Convenções, segundo o dicionário, são regras, acordos, contratos; ao aplicar-se a web o significado se
altera um pouco, relacionando-se a práticas muito utilizadas com as quais os usuários já têm
familiaridade e, por isso, são mais facilmente entendidas pelo mesmo.
20
exista uma padronização, pois “quando utilizamos soluções consagradas, diminuímos as

chances de dúvida e, consequentemente, de erro por parte das pessoas que estão utilizando o
produto” (2005, p. 58). As convenções se constroem quando os estudos feitos por especialistas
da área acabam sendo usados durante um período de tempo com sucesso. Vários autores,
como, por exemplo, Krug e Nielsen, participaram de pesquisas para descobrir o melhor
posicionamento dos elementos de um site bem construído, todas essas análises por parte dos
autores geraram um wireframe 9 de padrão de localização.
Figura 1 - Exemplo de organização de interface muito utilizada na Internet. FONTE: Memória, 2005.
A marca é um exemplo de posição de elemento que se tornou padrão, praticamente

todos os sites existentes usam-na na parte superior esquerda da página, esse padrão
“provavelmente surgiu como derivação da cultura ocidental de leitura da esquerda para a
direita, de cima para baixo. A marca seria, teoricamente, a primeira imagem percebida pelos
visitantes em uma área nobre da página” (MEMÓRIA, 2005, p. 60).
9
Wireframe é um esboço da interface que o usuário terá contato, mostrando o design de interface sem
mostrar ainda o design gráfico (DIJCK, 2003).
21
Figura 2 - Utilização da marca a parte superior esquerda no site da UFPel e no site da UFSM.
FONTE: reprodução do site.
Em um site com grande densidade informacional, como é o caso de um site institucional,

que possui uma quantidade grande de informações, o campo de busca é um dos recursos mais
importantes, já que muitos usuários preferem navegar pela busca por acharem isso faz com
que achei os conteúdos desejados mais rápido. Quando o site possui uma quantidade muito
pequena de páginas, o uso da busca faz-se desnecessário. Como padrão o elemento é usado
como campo aberto na página inicial, onde de preferência a caixa de busca seja simples e
direta, apresentando poucas opções de filtros aparentes com objetivo evitar que o usuário se
confunda ou que a quantidade de filtros torne a busca mais lenta, quanto ao posicionamento, é
mais adequado que o elemento se localize na área superior da página. Apesar de essas
observações parecerem óbvias, ainda existem muitos sites com grande quantidade de
22
conteúdo que não seguem a padronização. A UFPel é uma das exceções, a busca se encontra
posicionada corretamente na parte superior do site.
Figura 3 - Busca posicionada na parte superior no site da UFPel. FONTE: reprodução do site.
Figura 4 - Busca posicionada na parte inferior no site da USP. FONTE: da reprodução do site.
Partimos então para a navegação global, ela aparece em todas as páginas do site e
permite que o usuário se desloque entre as seções. Memória (2005) frisa que Nielsen foi um
dos autores que realizou muitas pesquisas sobre a navegação local, assim conclui:
23
(...) dois padrões de navegação global podem ser considerados amplamente
conhecidos. O primeiro, utilizado por 30% dos sites pesquisados, é o posicionamento
na vertical esquerda, enquanto o segundo, que se repetiu em 48% dos casos,
corresponde à utilização da parte superior com os links distribuídos na horizontal
(MEMÓRIA, 2005, p. 64).
Com o tempo a navegação horizontal foi a que ganhou maior espaço na web e acabou por
se tornar padrão, esse posicionamento “facilita e torna natural a utilização da navegação local,
ou contextual, na coluna da esquerda, (...) já que as pessoas também esperam encontrar
elementos de navegação por ali” (MEMÓRIA, 2005, p. 68).
Figura 5 - Navegação Global e Local do site da USP. FONTE: reprodução do site.
Os breadcrumbs também são importantes para a navegação do site e caracterizam-se por

um texto de uma única linha que tem como função mostrar a localização de uma página na
hierarquia do site (NIELSEN, 2007). Os caminhos de pão, como igualmente são chamados,
também funcionam como uma navegação estrutural. Alguns estudos feitos pelos pesquisadores
Lida e Chaparro em 2003 mostraram que breadcrumbs são mais eficientes quando posicionados
abaixo da marca a empresa e, evidentemente, acima do conteúdo do site, além disso, para
separação dos links não há uma convenção de símbolo ou sinal, desde que este passe a idéia de
continuidade.
24
Figura 6 - Identificação de breadcrumbs no site da Universidade Federal de Santa Catarina.

A área central é a mais utilizada para exposição do conteúdo, mas “além do conteúdo, os
usuários esperam encontrar outras funcionalidades na parte central das páginas. Em páginas
internas, grande parte das pessoas espera que exista algum link que as leve de volta à página
inicial” (MEMÓRIA, 2005, p. 72). Existem outros itens importantes que geralmente são
associados ao que se encontra na área central como, por exemplo, conteúdos relacionados às
informações presentes na página, que normalmente fica posicionado à direita.
Outra convenção de interface bem usada é a de navegação de rodapé. Nela

constantemente se repetem links de navegação global, além de poder apresentar informações
de copyright, data da última atualização, política de privacidade, contato, etc. Mais
recentemente o rodapé, em alguns casos, apresenta o sitemap 10 com itens clicáveis.
10
Sitemap é um "mapa do site", uma lista com todas as páginas de conteúdo, geralmente organizadas
segundo algum critério. (ELIAS, 2008).
25
Figura 7 - Rodapé do site da UFPel. FONTE: reprodução do site.
Além de todos esses aspectos, Steve Krug (2006) cita todos os elementos que a página
inicial tem de conter. Primeiramente é necessária a identificação e a missão do site, ou seja, ele
tem que mostrar, logo que o usuário se depara com a página inicial, o que é o site e para que
ele serve, além de justificar porque o usuário está acessando esse site ao invés de outro. A
hierarquia também é característica importante, a primeira página tem de dar uma visão geral
do que tudo que o site apresenta (conteúdo e recursos) e mostrar como ele está organizado.
Algo que atraia os usuários é necessário.
A propaganda do conteúdo mostra as partes mais novas, melhores ou mais populares

do conteúdo, como as melhores histórias e ótimos negócios. A propaganda dos
recursos me convida a explorar seções adicionais do site e a experimentar recursos
(KRUG, 2006, p. 59).
Ainda é essencial que o conteúdo que é atualizado com certa freqüência e que é bastante
acessado pelo usuário possua atalhos deixando claro como chegar a qualquer lugar do site. E,
apesar da página inicial ter que necessariamente apresentar os caminhos que o usuário precisa
percorrer para encontrar o que procura, é interessante também “algumas das coisas
maravilhosas que o site tem a oferecer” (Krug, 2006) e que possam interessar a quem acessa a
página, mesmo que isso não seja exatamente o que eles procuravam inicialmente.
26
1.6 Fatores que prejudicam a experiência do usuário

Tão importante quanto dominar inúmeros conceitos sobre arquitetura de informação,
navegação e convenções, é conhecer quais fatores que fazem com o que o usuário entenda que
não há preocupação dos projetistas com seus interesses.
“Esconder” informações que o usuário de fato queira acessar, como, por exemplo,
números de telefone de atendimento ao cliente, faz com o que o mesmo não se sinta
importante para tal empresa ou instituição.
A questão de esconder números de telefone é tentar evitar que os usuários liguem,

porque cada chamada custa dinheiro. O efeito comum é diminuir a boa vontade e
garantir que eles ficarão ainda mais irritados quando descobrirem o número e ligarem.
Por outro lado, se o número gratuito estiver bem a vista – talvez até em todas as
páginas – saber de alguma forma que eles podem ligar se quiserem, é muitas vezes
suficiente para manter as pessoas procurando pelas informações no site durante mais
tempo, aumentando a chance de que resolverão eles mesmo os problemas. (KRUG,
2006, p. 105).
“Punir” o usuário por não pensar como o projetista o irrita, afinal ele não deve, por
exemplo, se preocupar em colocar hífen no número de CPF enquanto estiver preenchendo um
formulário ou então em preencher o número do cartão que está separado por caixas onde
cabem apenas quatro números por vez. Além disso, solicitar mais informações do que o
necessário não é recomendado, “a maioria dos usuários é cética sobre solicitações de
informações pessoas e acha irritante se um site solicita mais do que é necessário” (KRUG, 2006,
p. 105). Muitas vezes, frases que mostram um interesse forçado na opinião de quem navega
pelo site não agrada, a frase “Sua ligação é importante para nós” pode fazer com que muitos
usuários não se sintam a vontade.
Uma das principais coisas a se evitar é o uso de floreios, ou seja, fazer com que o usuário
por algum motivo tenha que esperar mais que o tempo necessário para acessar a informação
desejada, por exemplo, ter que esperar uma introdução longa em flash ou dificultar a passagem
pelas páginas as enchendo de fotos e marketing. Isso só demonstra que o site não se importa se
o usuário está com pressa e se esse excesso de informação o incomoda.
27
1.7 Heurísticas de Nielsen

Jacob Nielsen transcreveu no livro Usability Engineering (1993) algumas características
que garantiriam a boa experiência do usuário ao acessar um site. Estes conceitos serão
retomados durante a análise do site.
[1] Visibilidade e estado de sistema (feedback): a interface sempre deve informar o

usuário o que está acontecendo.
[2] Correspondência entre o sistema e o muito real: comunicação do sistema deve

corresponder à realidade do usuário.
[3] Prevenção de erros: design pensado e cuidadosamente planejado com o mínimo de

erros.
[4] Consistência e padronização: tratar coisas similares da mesma forma, facilitando a

identificação dos elementos e navegação do usuário.
[5] Flexibilidade e eficiência de uso: o sistema precisa ser fácil para usuários leigos, mas
também bastante flexível permitindo que usuários mais experientes consigam navegar com
maior rapidez.
[6] Reconhecimento ao invés de lembrança: interface contextualizada e informações que

orientem as ações do usuários, para que ele não precise acessar a memória o tempo todo; o
sistema deve dialogar com o usuário.
[7] Projeto estético e minimalista: evitar que sejam passadas mais informações que as
necessárias; linguagem simples, natural e direta.
[8] Recuperação de erros: avisos de erros com mensagens simples e claras.
[9] Controle e liberdade do usuário: permitir refazer ou desfazer ações e retornar ao

ponto.
[10] Ajuda e documentação: utilizados para orientar os usuários, deve ser visível, de fácil
acesso e oferecer ferramenta de busca.
28
1.8 “10 qualidades de uma navegação que funciona”de Jennifer

Fleming
Em 1998 no livro Designing the User Experience, Jennifer Fleming expõe alguns fatores
necessários para que a navegação de um site seja adequada e agradável. Estes conceitos serão
retomados nas análises do site.
[1] Se facilmente aprendido: o usuário deve gastar pouco tempo aprendendo como o site
funciona.
[2] Ter consistência: elementos de navegação e menu devem seguir um padrão em todas
as páginas, os elementos que se repetem ajudam na orientação do usuário.
[3] Dar retorno: efeitos que dão ao usuário retorno das suas ações.
[4] Estar contextualizado: usar nomenclaturas e elementos que estejam totalmente

contextualizados ao propósito do site a fim de deixar claro para onde o usuário será levado.
[5] Oferecer alternativas: páginas desenvolvidas para funcionar em diversas plataformas

e atender as necessidades de usuários que não tenham a tecnologia para visualizar as páginas
elaboradas.
[6] Garantir economia de tempo e ações: é imprescindível que se evitem caminhos

desnecessários, e que o usuário gaste muito tempo procurando conteúdo ou, por exemplo,
preenchendo um formulário.
[7] Promover mensagens visuais claras: a página, além de bonita, deve ser funcional e
comunicar corretamente as mensagens, ter uma navegação fácil e ter uma boa usabilidade.
[8] Criar nomenclaturas claras: nomenclatura que fale a linguagem do usuário.
[9] Seguir o propósito do site: projeto feito segundo os objetivos da empresa e dos
usuários.
[10] Ajudar os objetivos do usuário: dar suporte às tarefas e objetivos do usuário.

29
1.9 Wayfinding
O termo wayfinding surgiu na década de 70 com Kevin Lynch 11 e significa o
comportamento humano em saber onde está, pra onde ir, escolha do melhor caminho a ser
seguido, reconhecimento do local de destino logo que o alcança e capacidade de encontrar o
caminho de volta. Resumidamente, wayfinding descreve como funciona a orientação em um
ambiente e os processos cognitivos utilizados para que ocorra o deslocamento e um ponto ao
outro, e vice-versa. Se aplica tanto ao ambiente físico quanto ao virtual.
O wayfinding pode ser usado em várias áreas como psicologia cognitiva, lingüística,
design, arquitetura, urbanismo, marketing, etc. O wayfinding será usado nessa pesquisa nos
momentos em que os usuários estiveram inseridos no processo, nos testes de usabilidade onde
os participantes tiveram que traçar caminhos dentro do site para cumprir tarefas e no
cardsorting 12.
1.10 Card-sorting
Para Frederick Van Amstel na publicação “Card-sorting é melhor que buraco” no site
Usabilidoido, o card-sorting é uma técnica utilizada para descobrir como o usuário classifica
determinada informação, permite identificar e delinear a navegação mais coerente para cada
usuário.
No card-sorting, normalmente o usuário recebe cartões descrevendo os conteúdos que

serão disponibilizados no site e os relaciona com as categorias também disponibilizadas a ele.
Essa técnica pode ser usada tanto para avaliar uma nomenclatura já existente como para criar
novas. Na pesquisa, o card-sorting vai se configurar em uma das ferramentas metodológicas
para a proposição da nova Arquitetura de Informação.
11
Kevin Lynch é urbanista e autor; promoveu diversas contribuições ao campo urbanístico em pesquisa
em como os observam e percebem o espaço urbano. Seu livro mais famoso é “A imagem da cidade”
publicado em 1960.
12
Card-sorting na tradução para o português significa “classificação de cartão”.
30
Após estudar os conceitos, definições e noções de soluções ideais para que a navegação
seja agradável e entender melhor como o usuário se comporta nas interfaces navegacionais,
percebe-se o quanto esse conhecimento é importante e deve ser aplicado para construção de
uma estrutura preocupada em satisfazer seu público-alvo.
2 TRAÇANDO
É natural que pessoas ligadas a Universidade Federal de Pelotas tenham que

eventualmente acessar o site da mesma. Tão natural quanto o acesso é a navegação por esse
ambiente que se apresenta tanto quanto confusa. Esse foi o pensamento inicial envolvido na
definição do tema do Trabalho de Conclusão de Curso. Após alguns anos e inúmeros acessos
frustrados que, por vezes, levavam a desistência, percebeu-se, empiricamente, que de fato o
que acontecia não era apenas aquela demora pra entendimento das páginas que muitas vezes
incide, mas sim que a estrutura do mesmo fazia com que as informações procuradas fossem
encontradas muito dificilmente ou, ainda pior, que elas nem fossem encontradas. Assim
começou-se a construção deste projeto de pesquisa.
Resumidamente, o trabalho passou pelas seguintes etapas:
1. Seleção de referências bibliográficas
2. Benchmarck de sites institucionais
3. Observação do site da UFPel
4. Construção de um sitemap simples com post-its
5. Listagem de dificuldades gerais encontradas a partir da observação feita

anteriormente
6. Análise detalhada dos itens de menu
7. Análise segundo Jacob Nielsen e Jennifer Fleming
8. Realização de testes de usabilidade
9. Benchmarck detalhados
10. Análise dos testes de usabilidade
11. Construção das personas

32
12. Definições de itens de menu adequados e categorias
13. Card-sorting
14. Definição da localização dos itens de menu nas categorias
15. Construção do sitemap da nova Arquitetura de Informação
16. Construção do wireframe da home do site reformulado
Iniciou-se a seleção de referências bibliográficas para pesquisa, elas são extremamente

importantes por definir conceitos imprescindíveis para construção da prática do trabalho. Nesta
etapa foram abordadas diversas definições relevantes para a pesquisa. Além disso, foi feito um
benchmarck de sites institucionais que também é apresentado nas referências bibliográficas
como forma de exemplificar alguns conceitos e boas práticas para um site de estrutura
navegacional bem construída.
Indo para além do conhecimento teórico, partiu-se para a análise mais detalhada da
organização de conteúdo e da navegação do site da UFPel, com o objetivo claro de identificar
muitos dos pontos a serem melhorados posteriormente, nessa etapa já é possível ter um
panorama do que será modificado mais tarde na prática. Primeiramente navegou-se pelo site a
fim de entender rapidamente a distribuição e quantidade de conteúdo, assim foi gerado um
sitemap simples construído inicialmente de forma manual e em seguida digitalizado.
33
Figura 8 - Sitemap do site da UFPel feito com post-its. FONTE: da autora.

34
Assim, foram listadas as dificuldades gerais encontradas no site baseadas nos estudos
feitos anteriormente sobre AI, navegação, usabilidade, etc.
Após perceber como os caminhos são traçados pela navegação e a forma como o
conteúdo é apresentado para o usuário, deu-se início à uma análise mais detalhada dos itens de
menu a fim de descobrir exatamente para onde cada item leva, se o destino é coerente ao que
se propõe e se o resultado é satisfatório. Foram examinados de forma individual cada um dos
trinta e cinco itens de menu presentes na página inicial. Logo, foram feitas duas análises
baseadas em autores, a primeira delas segundo Jennifer Fleming, e a outra baseada nas
Heurísticas de Jacok Nielsen.
Tendo a análise pronta e percebendo inúmeros pontos negativos no site da UFPel que
podem ser otimizados a fim de melhorar a usabilidade e experiência do usuário, fez-se
necessário realizar testes de usabilidade com o objetivo de encontrar outras questões mal
resolvidas focadas e direcionadas ao público que irá realizar os testes e que passaram
despercebidas na análise. Geralmente, testes de usabilidade fazem parte de um processo de
desenvolvimento de um projeto, no caso dessa pesquisa, ele funciona como ferramenta para
identificar erros de navegação do site com a finalidade de aperfeiçoá-lo. Testes são
importantíssimos por serem um feedback direto dos usuários e segundo Theo Mandel, no livro
The elements of user interface (1997), é necessário que se busque as informações junto às
pessoas que de fato usam um determinado sistema e não com as pessoas que gerenciam essas
informações, o usuário diz o que representa sua preferência e visão pessoal do produto que
está sendo avaliado, o que é essencial já que este produto deve ser focado no próprio usuário.
Teste de usabilidade, segundo Jeffrey Rubin (1994), é um processo no qual os

participantes avaliam o grau que um produto se encontra em relação a critérios específicos de
usabilidade. “Eles são instrumentos indicados para medir a taxa de sucesso da busca de
informações e para pesquisar o comportamento dos indivíduos durante a interação com os
sistemas informatizados” (AGNER, 2006, p. 104). Esse tipo de teste possui benefícios como, por
exemplo, permitir observar o comportamento dos usuários e compará-lo ao de outros usuários
que realizam a mesma tarefa. Além disso, eles possibilitam compreender as dificuldades
sentidas pelo participante através do registro das verbalizações durante o teste, o que
enriquece os resultados.
35
Essencialmente o que se procura saber com a realização dos testes de usabilidade é: se os

participantes conseguiram realizar as tarefas, se as informações relevantes foram devidamente
encontradas, quanto tempo foi gasto para achar essas informações, se os caminhos percorridos
foram os mais eficientes, se os usuários sabem o que estão fazendo e as direções que estão
tomando e, principalmente, quais os problemas foram encontrados por eles.
Os testes realizados nessa pesquisa foram feitos com base os autores Steve Krug e Felipe
Memória. Tentou-se que os participantes abrangessem grande parte do público-alvo, logo,
participaram dos testes: um membro da comunidade em geral, um futuro aluno, dois alunos da
universidade, um professor mais recente na instituição, um professor com mais tempo de casa,
um técnico-administrativo.
Para que os testes fossem realizados com êxito foi necessário fazer cinco testes
diferentes, cada qual direcionado para um dos públicos (comunidade, futuro aluno, aluno,
professor, técnico-administrativo), além disso, fez-se um roteiro englobando desde a
apresentação do projeto e objetivo dos testes até a realização de tarefas pelos participantes. O
roteiro é dividido por passos, todos com exceção do 4, permanecem iguais para todos os
testes.O quarto passo muda conforme o público ao qual o teste será aplicado. A seguir a
descrição de todos os passos elaborados.
ROTEIRO
PASSO 1
Informar sobre a confidencialidade dos dados que serão recolhidos.
“Todas as informações recolhidas neste teste, incluindo seus dados pessoais, serão usadas
exclusivamente nessa pesquisa. Posteriormente os resultados do testes serão distribuídos com a
identificação de cada usuário em forma de número.”
PASSO 2
Breve apresentação do teste.

36
“Este teste tem como objetivo identificar quais os possíveis problemas de navegação do
site da UFPel, ele faz parte da pesquisa do meu Trabalho de Conclusão de curso. Sua
participação é parte importante dessa pesquisa.Obrigado por participar.”
PASSO 3
Recolher algumas informações sobre o nível de experiência dos participantes através de

um pequeno questionário.
“Quantos anos você tem? Quantas horas por dia navega na internet? Você costuma
acessar o site da UFPel? Com que freqüência? O que você costuma procurar quando acessa esse
site? Você tem sucesso em achar o que procura neste site?”
PASSO 4
Tarefas a serem realizadas no site.
COMUNIDADE
“Quais as rotinas que são mais comumente acessadas? Por que?”
“Você sentia dificuldade quando começou a utilizar o site da instituição? Se sim, qual foi a
maior das dificuldades”
“Você acha que o portal da universidade funciona bem? Costuma achar com freqüência as
informações que procura?”
“Você considera claras as nomenclaturas dos itens de menu?”
“Hoje, você encontra dificuldades ao navegar no site? Quais?”
FUTURO ALUNO
“Considerando que você ainda não faça parte da universidade e queira ingressar ela de
alguma maneira, como você descobre o que pode cursar?”
“Como você descobre a forma de ingressar na UFPel?”

37
“Supondo que você não more em Pelotas e considerando que queira realmente ingressar
na UFPel, você acessaria o link ‘cidade de Pelotas’ para conhecer melhor a cidade?”
ALUNO
“Você encontra alguma dificuldade navegando pelo site da UFPel? Quais?”
“Caso você queira, por algum motivo, acessar os sites de cursos pertencentes a outras
unidades acadêmicas que não a sua, como você precede?
“Supondo que estamos em época de rematrícula e você precise fazer a sua, como
procede?”
“Você fez sua rematrícula com sucesso e agora quer saber que dia as aulas começam,
onde você procura por isso?”
“Se você quer se inscrever para receber benefícios da universidade, como auxílio
transporte ou auxílio alimentação, onde você procura por isso?”
“Navegando com atenção especial às nomenclaturas dos itens de menu, você acha que
elas estão adequadas? Através dos nomes você consegue entender para onde os links
pretendem te levar?”
“Navegue livremente pelo site e vá me dizendo em voz alta o que você está pensando.”
PROFESSOR

38
“Supondo que você precise registrar um projeto de pesquisa, como você realiza essa
tarefa?”
“Supondo que você precise solicitar algum tipo de material, onde encontra o documento
que é necessário preencher?”
“De que forma você acessa a página do RAAD (Relatório Anual de Atividades Docentes?)”
“Como você acessa o G.O.L. (Gestão On-line – Gerencionador do Sistema Acadêmico) para
publicar notas e imprimir diário de classe?”
“Navegue livremente pelo site e vá me dizendo em voz alta o que você está pensando.”
TÉCNICO-ADMINISTRATIVO
“Supondo que você precise solicitar algum tipo de material, onde encontra o documento
que é necessário preencher?”
“Caso você precise fazer solicitação de material de consumo, como procede?”
“Para acompanhar a chegada de um documento enviado por protocolo a seu destino, qual
o procedimento deve ser adotado?”
“Caso seja necessário cadastrar um projeto ou preencher um relatório, onde isso deve ser
feito?”
PASSO 5
Agradecer ao utilizador pela participação.

39
Para este teste de usabilidade foram usados alguns critérios para avaliar o sucesso
baseados em alguns textos de Ivo Gomes13, do utilizador ao realizar as tarefas: Fácil (conclusão
da tarefa na primeira tentativa), Médio (conclusão da tarefa na segunda ou terceira tentativa
com pequenas dificuldades), Difícil (conclusão da tarefa na terceira ou quarta tentativa com
muita dificuldade), Ajudado (conclusão da tarefa apenas com ajuda para isso, não é
considerada uma tarefa cumprida com sucesso), Insucesso (conclusão da tarefa não realizada).
Os testes de usabilidade foram acompanhados em tempo real e em sua realização foi

usado o software HiperCam que captura ações de qualquer parte do desktop. Foram gerados
vídeos da realização das tarefas feitas durante o teste, que serviram como base para saber
quanto tempo foi gasto pelos usuários em cada uma das tarefas e assim definir qual o nível de
dificuldade. Foram analisados: [1] o tempo gasto para realizar cada tarefa proposta, [2] as
observações feitas em voz alta pelos participantes e [3] as reações físicas destes durante a
navegação do site, estas sim, registradas em vídeo. A reprodução dos testes, na íntegra, é
encontrada nos anexos.
Após toda a construção do referencial teórico, da análise e dos testes de usabilidade,

optou-se por fazer um benchmarck um pouco mais detalhado para contribuir na nova
organização do site da UFPel. Foram escolhidos dois sites institucionais, o da Unisinos e o da
UFRGS.
13
Ivo Gomes é licenciado em Ergonomia, especializado em Ergonomia de Sistemas de Informação.
Atualmente trabalha no Departamento de Usabilidade e Qualidade do Portal SAPO.
40
Figura 9 - Home do site da Unisinos. FONTE: reprodução do site.
O site da Unisinos apresenta uma navegação bem clara, com menus agrupados de forma
bem coerente e adequada. O menu horizontal que se posiciona no topo do site e que funciona
como menu principal apresenta 8 categorias: [1] Ensino: apresenta os níveis de formação
oferecidos pela universidade (graduação, mestrado, especialização, etc) e também permite que
o usuário descubra os cursos oferecidos em cada uma das cidades onde existe a universidade,
além disso, ainda apresenta alguns links de destaque relacionados a ensino; [2] Pesquisa e
41
Inovação: link para matéria sobre a importância da pesquisa, além de itens em destaque
relacionados à pesquisa e inovação; [3] Extensão: apresenta links relacionados à extensão e
chamada para um congresso que irá acontecer; [4] Comunicação; [5] Serviços: destaque para a
biblioteca da instituição e links que tenham relação com serviços (Matrículas, Transportes, etc);
[6] Institucional: mostra as cidades onde a universidade se encontra e links relacionados à
instituição, como “A Unisinos”, “Estrutura” e “Ouvidoria”; [7] Fale Conosco: destaque para o
atendimento online, e links de “Envie sua mensagem”, “Perguntas frequentes”, etc; [8] Minha
Unisinos: login de usuário. Todas as categorias possuem link para páginas destinadas
especificamente para cada uma delas, por exemplo, a categoria “Ensino” possui um link para
uma página específica de Ensino.
Ainda existe um menu vertical, na lateral esquerda do site, destinado especificamente a

parte de ensino, com links rápidos para os cursos desejados.
Figura 10 - Detalhe do um dos itens do menu lateral do site da Unisinos. FONTE: reprodução do site.
A home do site ainda possui áreas de destaque para inscrições nos diferentes eventos e
cursos oferecidos pela universidade e uma área destinada às novidades em geral. No rodapé
encontram-se os links de redes sociais e um sitemap com os principais itens de menus. Outro
fator que chama atenção no site é o campo de busca que possui bastante destaque.
42
Figura 11 - Home do site da UFRGS. FONTE: reprodução do site.
O site da UFRGS a pouco tempo passou por uma reformulação, mudou todo layout mas
ainda apresenta algumas dificuldades de navegação. Apesar disso a forma como os conteúdos
foram agrupados é bem coerente e clara.
O menu do site se divide em 7 categorias diferentes: [1] A UFRGS: assuntos relacionados à

instituição – histórico, unidades acadêmicas, plano de gestão, etc – , também apresenta links
43
externos referentes a UFRGS; [2] Ensino: mostra unidades acadêmicas, cursos, etc, nos links
externos dá acesso a páginas como as de pró-reitorias de graduação e pós-graduação, entre
outras páginas; [3] Pesquisa e Inovação: apresenta links sobre pesquisas científicas e inovações
tecnologias, além de dar acesso á páginas externas relacionadas à esses assuntos; [4] Extensão
e Cultura: links como “Agenda Cultural”, “Museu da UFRGS”, e acesso para páginas externas,
como a de Pró-reitoria de Extensão; [5] Cooperação Internacional: apresenta links relacionados
ao assunto como “Estudar no Exterior”, “Acordos de Cooperação”, etc, além de dar acesso para
páginas externas; [6] Bibliotecas: apresenta tanto coisas relacionadas à biblitoteca – até mesmo
link externo – quanto periódicos e repositório digital; [7] Serviços: serviços oferecidos pela
universidade.
O site ainda apresenta um menu de destaques interessante, com cores diferentes para
cada item, mas deixa a desejar no rodapé por não possuir nenhum sitemap ou links dos
principais itens de menu.
Figura 12 – Menu de destaques do site da UFGRS. FONTE: reprodução do site.
Após a realização de todos os passos descritos anteriormente, os testes de usabilidade

foram analisados a fim de descrever pontos negativos específicos percebidos pelos usuários
testados.
Logo, começou-se a construção das personas com intuito de facilitar as definições dos
novos itens de menu e nova organização do site. Personas são modelos que representam um
grupo de indivíduos, em relação às características e objetivos. O uso de desses modelos é uma
técnica que apresenta a descrição concisa de um personagem utilizando um produto específico,
no caso dessa pesquisa, utilizando o site da UFPel. Os participantes são pessoas envolvidas no
projeto; foram reunidas as características marcantes percebidas nos usuários dos testes de
usabilidade em uma persona para cada um dos tipos de usuários do site (futuro aluno, aluno,
44
professor, etc). Essa técnica facilita que se usem as opiniões dos usuários como parâmetro para
construção da nova Arquitetura de Informação de forma mais fácil por estarem agrupadas em
um único personagem que representa todos os usuários de um mesmo grupo. Foram definidos,
então, com base nas pesquisas e testes de usabilidade, os itens de menu (itens novos e itens
mantidos) e categorias que a nova Arquitetura de Informação iria conter.
Logo, o card-sorting foi posto em prática; foram reunidos os mesmos usuários já utilizados
nos testes de usabilidade para organizar o conteúdo e itens definidos anteriormente da forma
que lhes fosse mais adequada, para que assim propor a organização de conteúdo mais
adequada ao público do site. Foi utilizado o site websort.net para auxiliar na realização do card-
sorting online, a partir da definição de itens de menu e de categorias. Foi solicitado que cada
usuário organizasse os conteúdos nas categorias que julgasse mais adequadas.
Figura 13 - WebSort.net: site utilizado para a realização do card-sorting. FONTE: reprodução do site.
Os resultados obtidos no card-sorting serviram como referência para definir como as

informações do site iriam se organizar na nova Arquitetura de Informação, ou seja, em qual
categoria cada item de menu seria colocado.
Assim, após todos os itens de menu e a disposição das informações terem sido definidas,
foi possível construir o sitemap e o wireframe da home do site reformulado.
3 CAMINHANDO
Após entender os conceitos e práticas ideais de Arquitetura de Informação, foi necessário

compreender melhor o que acontece no site da Universidade Federal de Pelotas, para, com
isso, saber quais os pontos fracos do objeto de estudo e o que precisa ser modificado de modo
a otimizar a experiência e satisfação do usuário. Decidiu-se analisar o site a partir da
observação do funcionamento da navegação e dos caminhos aos quais o usuário é conduzido.
Como base para a observação foram usados alguns atributos que, segundo Jacob Nielsen
(2007), estão diretamente associados à usabilidade: ser fácil de aprender, ser eficiente na
utilização, ser fácil de ser recordado, ter poucos erros e ser subjetivamente agradável. Essas
características, de um produto projetado com a preocupação de atender seu público-alvo e que
preza a experiência do usuário, permearam toda a análise.
Primeiramente começou-se listando as dificuldades gerais encontradas:
• Existência e disposição de um número muito grande de itens de menu, o que torna a

navegação confusa e a localização dos itens mais difícil; o site possui uma quantidade
muito grande de itens de menu o que dificulta tanto a leitura inicial da tela quanto o
conhecimento da localização dos conteúdos que o usuário deseja encontrar.
46
Figura 14 - Menus identificados no site da UFPel. FONTE: representação do site.
• Os itens não são agrupados de uma forma que se torne possível organizá-los por
categorias; não é possível distinguir a quais áreas (setores) os menus se referem, os
setores do site - como, por exemplo, setores/assuntos pertinentes a alunos,
professores, etc. – não são bem definidos, assim usuários que pertencem a esses grupos
específicos podem levar mais tempo para localizar onde estão os conteúdos
especificamente destinados à eles.
• Algumas páginas internas além de não possuírem nenhum título, não marcam de forma
visual o item de menu no qual o usuário está e nem mesmo usam os breadscrumbs, logo
tornam mais difícil para o usuário de localizar.
47
Figura 15 - Página do item de menu "administração" sem título que identifique onde o usuário está. FONTE:
representação do site.
• As nomenclaturas de alguns itens de menu não ficam bem claras, não sendo possível
por vezes, saber do que se trata; freqüentemente o usuário não sabe para onde o item
de menu irá levá-lo. Por exemplo, o que se pretende acessar com os itens “Centro de
Informática” ou “Busca de E-mail”?
• Itens de menu que possuem pouco conteúdo e, logo, não deveriam ser acessados em
uma página externa, como acontece, desnecessariamente, com maior parte dos itens.
Figura 16 - Item de menu "convênios" que direciona para uma página externa com pouco conteúdo. FONTE:
reprodução do site.
48
• Assuntos que aparecem fragmentados em áreas diferentes do site.
Figura 17 - O item "notícias" aparece fragmentado em duas partes diferentes do site da UFPel.
• Itens de menu em que o nome do item não corresponde à página para qual ele
direciona. Como acontece com o item “Calendário Acadêmico” que direciona para
página do Departamento de Registros Acadêmicos (DRA) onde não existe na tela
principal um link para o calendário.
Figura 18 - Item "calendário acadêmico" que direciona para página do DRA.

49
• Arquivos em PDF não são sinalizados como tal, gerando uma expectativa que não é
suprida, ou seja, esses PDFs são tratados da mesma maneira que os itens de menu,
então os usuários clicam nos links com a esperança de que eles os levaram pra alguma
página.
• Alguns links abrem páginas internas e outros abrem no próprio site sem,
aparentemente, haver algum critério para tal escolha.
• Alguns links no site encontram-se em lugares de difícil visualização e incoerentes, por

exemplo, o login do usuário UFPelNet localiza-se no pequeno calendário existente na
página inicial.
Após analisar mais genericamente a home, os caminhos traçados inicialmente por ela,
percebeu-se que não há a presença de nenhum mapa do site básico (visão geral da estrutura de
navegação) para facilitar que o usuário entenda mais rapidamente a organização e se localize
de maneira mais fácil. Além disso, o sitemap ajuda a visualizar melhor como o conteúdo é
distribuído pelo site, e para essa pesquisa ele é essencial, pois, por ser uma exibição mais ampla
e universal (dos níveis de navegação apresentados) permite observar onde se encontram
possíveis erros de direcionamento de itens de menu, de hierarquia, etc. Assim, sentiu-se a
necessidade de construir um sitemap do objeto de estudo como contribuição para análise, e
um wireframe, para facilitar a visualização do posicionamento dos elementos e conteúdos do
site.
51
Figura 20 - Wireframe da página inicial do site da UFPel. FONTE: reprodução do site.
Com o Sitemap e o wireframe da home observou-se para onde cada item de menu é
direcionado e o que é apresentado como seu conteúdo, assim se pode perceber o que está
inadequado de forma à confundir o usuário, o que contribui para deixar a análise dos assuntos
52
apresentados mais clara e completa. Cada um dos trinta e cinco itens de menu foi examinado
separadamente, sendo listado e agrupado aqui conforme a organização observada no site.
MENU 1
1. Graduação: Conteúdo destinado para um grupo bem amplo: para quem ainda não
ingressou na faculdade e pretende conhecer os cursos ofertados por essa instituição
de ensino, para quem já é aluno da graduação, para os professores (neste item de
menu encontram-se desde programa de formação docente até documentos de
estágios). Pertinentemente, o item de menu direciona para o site da Pró-Reitoria de
Graduação (PRG), onde são apresentados conteúdos e links relacionados à formação
superior.
2. Pós-Graduação: Destinado a um público um pouco mais restrito que o anterior:

graduados - que procuram uma especialização e pós-graduandos e graduandos –
que procurar se informar sobre uma futura especialização; o link dá acesso à página
da Pró-Reitoria de Pesquisa e Pós-Graduação (PRPPG).
3. Pesquisa: Direcionado para mesma página do item citado acima – PRPPG – tem o
objetivo de expor as informações relacionadas a projetos de pesquisas realizados na
universidade; destina-se a professores orientadores, alunos orientandos e alunos
interessados em fazer parte de algum grupo de pesquisa.
4. Extensão: Núcleo vertente da universidade que promove um diálogo entre a

academia e a sociedade na qual está inserida; o link é destinado às pessoas
envolvidas nos projetos, tanto professores quanto alunos, e dá acesso ao site da Pró-
Reitoria de Extensão e Cultura (PREC).
5. Ensino Técnico: Item de menu direciona para site do Conjunto Agrotécnico Visconde
da Graça (CAVG), com informações e documentos relevantes para estudantes do
centro e pessoas interessadas em ingressar.
MENU 2
53
1. SISU: Devido à mudança no ingresso de diversas universidades federais que

trocaram o vestibular tradicional pela seleção dos alunos ingressantes através do
Exame Nacional do Ensino Médio (ENEM) e sendo o SISU o sistema gerenciado pelo
Ministério da Educação (MEC) para que a seleção aconteça, esse é um item de menu
de grande importância no site, apesar disso ele não possui o destaque necessário.
Link direciona para a página do SISU - UFPel (Sistema de Seleção Unificada
Universidade Federal de Pelotas).
2. Bibliotecas: Linkado para página do Sistema de Bibliotecas (SISBI - UFPel) onde é

possível pesquisar, renovar, reservar livros e materiais catalogados, o item é
designado para as pessoas que compõe a faculdade (alunos, professores, etc.).
3. Educação à Distância: Item focado nos alunos já ingressados nessa categoria, como
também interessados que buscam informações sobre graduação e pós-graduação à
distância, professores e técnicos que trabalham nessa modalidade; direciona para
página do Centro de Educação Aberta e à Distância (CEAD). O posicionamento nesse
grupo de itens não é muito pertinente, sendo mais conveniente que ele estivesse
junto aos itens do Menu 1.
4. Identidade Visual: Exibe elementos da identidade visual da universidade usados por

alunos e professores em documentos acadêmicos; seria mais pertinente a localização
desse item no Menu 5 apresentado posteriormente.
5. Cidade de Pelotas: Direcionado para página Pelotas – Patrimônio Cultural do RS; o

item, além não tem nenhuma relação com os itens aos quais está agrupado, não
possui grande relevância para o site, o público que provavelmente acessaria esse
item seriam alunos de fora, ingressantes pelo SISU.
MENU 3
1. Unidades Acadêmicas: Apresenta todas as unidades acadêmicas da universidade e os

cursos oferecidos por cada uma delas, os nomes dos cursos são linkados para os sites
correspondentes, quando esses existem. Conteúdo para quem pretende conhecer os
54
cursos e ingressar na universidade ou para quem quer maiores informações acerca

do curso em que está.
2. Administração: Lista os Conselhos e Unidades Administrativas existentes; a

nomenclatura do item é ampla demais e pode confundir o usuário, já que há no site
outros itens com conteúdos também administrativos.
3. Documentos: Exibe uma listagem de documentos de grande importância para todo

público acadêmico e que são frequentemente acessados pelos mesmos como
formulário auxílio-transporte, processo seletivo professor substituto, planos de ação,
relatórios de gestão, etc.
MENU 4
1. Contatos: Formulário de Preenchimento para contato.
2. Extranet: Direcionado para tela de Centro de Administrativos, possui conteúdo

destinado a alunos e professores que pode ser acessado mesmo fora da
universidade. Exemplos: sistema acadêmico, G.O.L. (gestão online) 14, etc.
3. Intranet: Conteúdo passível de ser acessado apenas dentro da universidade.
MENU 5
1. Calendário Acadêmico: É um dos itens mais importantes para os alunos da

universidade por apresentar informações de grande interesse, tanto para alunos
quanto para a comunidade acadêmica em geral, férias, período de matrículas,
recessos e feriados, entrega de notas, período de exames, digitação de notas no
sistema. O link é direcionado para o site do Departamento de Registros Acadêmicos
(DRA), onde não é disponibilizado o calendário acadêmico, o que deixa o usuário
perdido e sem saber que caminho percorrer para acessar o que pretendia a partir
desse item.
14
G.O.L. é o Gerenciador do Sistema Acadêmico do site de acesso dos UFPel onde são digitadas as
notas, retirados os diários de classe, feitos os acompanhamentos e rotinas ligados à avaliação, etc.
55
2. Convênios: Item direcionado para Coordenadoria de Convênios. Tratam-se de

convênios interinstitucionais, de estágio, de intercâmbio, apresentam também os
termos necessários para estabelecer tais convênios. Conteúdo destinado tanto para
discentes quanto professores e técnico-administrativos.
3. Portarias: Link para tela de Atos Administrativos, possui todas as atividades de ordem
administrativa realizadas na universidade; destinada para todo público que faz parte
da UFPel (professores, funcionários e, mais raramente, alunos).
4. Comissão de Avaliação: Link para página da Comissão Própria de Avaliação (CPA),

com parâmetros e documentos relacionados à administração e, por isso, voltado a
professores e técnicos que exercem esse tipo de atividade administrativa. Como
possui um caráter administrativo seria conveniente que fizesse parte do Menu 3.
5. Produção Científica: Apresenta links para os trabalhos apresentados no Congresso de

Iniciação Científica e uma lista de outros trabalhos relacionados à produção científica;
destinado ao público geral da UFPel. Apesar de se destinar ao público em geral, nesta
tela encontram-se expostos apenas projetos científicos de uma área específica e links
para diferentes do CIC.
6. Editora e Gráfica: Direcionado para página da Editora e Gráfica Universitária

apresentando informações sobre. Destinado ao público em geral, interessado em
publicar livros ou utilizar o serviço de gráfica disponibilizados pela unidade.
7. Busca de E-mail: Item que leva à página que possui apenas uma Busca de Usuários
Cadastrados da UFPelNet, após a realização da busca é possível obter informações
como email do usuário cadastrado e unidade na qual trabalha. A quantidade de
conteúdo é muito pequena e, provavelmente, não há a necessidade de uma página
contendo apenas a busca.
8. Guia Telefônico Interno: Direciona para uma tela da Central Telefônica que possui
acesso aos números a partir de links de cada unidade acadêmica ou pela busca.
9. Centro de Informática: Está erroneamente linkado para página do Gerenciamento de

Informações e Concursos (CGIC), além disso, esse item de menu se torna
56
desnecessário, principalmente, por dois motivos: o item “Extranet” já direciona para

tela de Centro de Informática, que possui a conteúdos e links essenciais para alunos e
professores, e a nomenclatura do item não demonstra qual o conteúdo a ser
apresentado nesta seção. Esse erro foi corrigido durante a pesquisa; o nome desse
item foi mudado para CGIC.
10. Prestação de Contas: Link para PDF desatualizado de Prestação de Contas de 2007;
seria adequado um item de menu contendo este PDF e outros relacionados (assim
como prestação de contas de outros anos) de forma que o usuário não fosse
surpreendido ao clicar em um item de menu e ser direcionado para um PDF ou para
um download do mesmo.
11. Guia do Recolhimento da União: Linkado para uma tela de Tesouro Nacional do
Ministério da Fazenda, trata-se de um documento para registrar ingressos de valores
na Conta Única; por se tratar de um conteúdo de caráter financeiro, como o anterior,
deveria encontrar-se como link dentro do mesmo item de menu onde estaria
“Prestação de Contas”.
12. Relatório de Gestão 2009: Link para um PDF da Controladoria-Geral da União; por se
tratar de um documento de característica financeira seria apropriado que estivesse
como link em um item de menu juntamente com “Prestação de Contas” e “Guia do
Recolhimento da União”.
MENU 6
1. Processos Seletivos/Concursos Públicos: Item linkado para página do Centro de

Gerenciamento de Informações e Concurso (CGIC), com informações destinadas às
pessoas que queiram fazer parte da universidade.
2. DRA: Leva para a página do Departamento de Registros Acadêmicos destinada,

principalmente, para alunos da instituição. Não deveria estar nesse grupo de itens,
pois trata de um conteúdo destinado ao público interno, sendo o resto dos
elementos de destaque não designados especificamente pra esse público.
57
3. DIPI: Item direcionado para o Departamento de Intercâmbio e Programas

Internacionais.
4. Federal FM: Não possui nenhuma relação com o restante dos itens com ele
agrupados; leva para página da Rádio Universitária.
5. Centro de Integração do Mercosul: Direciona para site do centro.
6. RAAD: Linkado para página de Comissão Permanente de Pessoal Docente, aborda

conteúdo destinado especificamente aos professores; seria mais adequado que
fizesse parte de “Extranet”. Durante a pesquisa esse item foi retirado da home.
7. Periódicos: Direcionado para Periódicos no site do Capes, seria adequado que

estivesse junto a “Produção Científica”.
Itens inseridos no site durante a pesquisa:
1. PAVE: Direciona para a página do Programa de Avaliação da Vida escolar que se trata
de uma modalidade alternativa de seleção para os cursos de graduação da UFPel.
2. AGT: item direciona para a página da Agência de Gestão Tecnológica que tem o intuito
de apoiar grupos de pesquisas, interações com empresas, etc.
A fim de tornar a análise do site um pouco mais fluida e também com o intuito de perceber
questões não possíveis de serem englobadas nos diagnósticos realizados anteriormente, foram
feitas mais duas análises.
Primeiramente foram utilizadas as Heurísticas de Nielsen, descritas anteriormente no

Capítulo 1.
[1] Visibilidade e estado de sistema (feedback): no site da UFPel muitas vezes esse
feedback não se faz claro, o usuário acessa muitos links que direcionam para caminhos errados,
algumas páginas internas não possuem título não permitindo saber onde se está localizado, não
existe uma sinalização específica para downloads de pdfs.
58
[2] Correspondência entre sistema o mundo real e [3] Prevenção de erros: no caso do
objeto estudado esse fator é contrariado já que alguns itens de menu possuem nomes com
difícil entendimento, justamente, por muitas vezes, se tratar de terminologias usadas por quem
projeta o site ou por quem está envolvido de forma mais profunda com a universidade e todos
os seus setores, a organização caótica não agrupada por setores também foge desse principio
no momento em que não atinge a expectativa de quem navega pelas páginas. Essa expectativa
frustrada guia o usuário para destinos não desejados, quando tais coisas acontecem é essencial
que exista uma forma dele voltar ao estado anterior de uma forma fácil e sem traumas.
[4] Consistência e padronização: além das informações com funcionalidades iguais serem
tratadas sempre do mesmo modo entre si e de modo diferente em relação às informações com
outro tipo de funcionalidade, a localização dos itens na interface, a grid 15 básica do site e a
identidade visual não se mantêm iguais, nem mesmo semelhantes, na maior parte das páginas
do site da UFPel, constantemente os itens de menu direcionam para páginas totalmente
diferentes daquela em que estava, o usuário demora mais a entender a lógica do sistema, assim
leva mais tempo para entender o site por completo e sua experiência é prejudicada.
[5] Flexibilidade e eficiência de uso: o site estudado não proporciona uma boa navegação
para usuários experientes e, menos ainda, para usuários leigos.
[6] Reconhecimento ao invés de lembrança: Mesmo tendo uma navegação mais linear
(sem várias opções de acessar a mesma informação) o sistema estudado não é estruturado de
forma simples o suficiente para fazer com o que o usuário consiga memorizar caminhos, sem
precisar aprender a lógica de navegação cada vez que acessa o site novamente.
[7] Projeto estético e minimalista: muitas vezes no site da UFPel a linguagem não e
utilizada de uma forma simples, além disso, assim como, constantemente, sejam usados
elementos e informações demais – menu de destaques –, em diversas outras situações o
conteúdo é menor do que deveria.
15
Grid é uma rede de linhas, que funcionam como linhas-guia ajudando o designer a alinhar elementos
entre si (LUPTON, 2008).
59
[8] Recuperação de erros: as mensagens de erro não são expostas de forma totalmente
clara; quando se clica em “intranet”, por exemplo, o usuário depara com título “erro 403:
acesso negado”.
[9] Controle e liberdade do usuário: muitas vezes durante a navegação não são achados
botões para voltar ao estado anterior em que se estava.
[10] Ajuda e documentação: o site da UFPel não possui nenhuma área específica destinada
à ajuda ao usuário e nem mesmo apresenta sitemap ou breadcrumbs, o que poderia facilitar a
navegação e o entendimento.
Após essa análise, o site da UFPel foi observado segundo as “10 qualidades de uma
navegação que funciona” citadas por Jennifer Fleming, também citadas anteriormente no
Capítulo 1.
[1] Ser facilmente aprendido: no site da UFPel percebe-se que não há o cuidado em tornar
as páginas fáceis de ser compreendidas, a disposição dos itens de menu e dos conteúdos, as
nomenclaturas equivocadas e de difícil entendimento, entre outros fatores, tomam o tempo e a
paciência do usuário e não otimizam os caminhos percorridos por ele. Essa despreocupação se
torna ainda mais grave em um site institucional, como é o caso deste, onde se encontram as
informações necessárias para a vida acadêmica e o motor de toda instituição, logo, por mais
difícil que seja a utilização do mesmo, os usuários continuarão, obrigatoriamente, acessando o
site. Isso gera uma experiência frustrante e prejudica a imagem da universidade.
[2] Ter consistência: percebe-se que na grande maioria os menus e os elementos de

navegação não são os mesmos em todo site da UFPel, como praticamente todos os itens de
menu são direcionados pra páginas externas (embora ainda façam parte do domínio do site) a
identidade visual, menu, posicionamento de elementos e nomenclaturas mudam a cada clique.
[3] Dar retorno: o site possui alguns sinais que dão retorno ao usuário de suas ações; por
exemplo, itens de menu mouse over.
60
[4] Estar contextualizado: ao acessar uma página totalmente diferente da em que se

estava, não há presença de um botão “voltar para página x”, o que pode fazer com que o
usuário se sinta perdido por estar fora do contexto apresentado a ele anteriormente.
[5] Oferecer alternativas: o site foi construído de forma a ser leve e rodar em todos os
navegadores da mesma forma, também não há necessidade de possui tecnologias menos
comuns para acessar o mesmo.
[6] Garantir economia de tempo: além de muitas vezes o número de cliques ser grande, o
trajeto percorrido para chegar a tal conteúdo não possui uma seqüência pertinente ou possui
itens de menu de difícil compreensão, transformando um acesso simples e rápido em um mal
sucedido e que irrita o usuário.
[7] Promover mensagens visuais claras e [8] Criar nomenclaturas claras: o site da UFPel
por vezes não apresenta um design bem claro - como, por exemplo, não dá um tratamento
diferenciado para botões – assim como não possui a nomenclatura dos itens sempre evidente,
em muitos links não é possível ter uma noção exata de qual página se terá acesso a partir dele.
[9] Seguir o propósito do site e [10] Ajudar os objetivos do usuário: o propósito do site, de
expor informações gerais sobre a universidade, é seguido, mas de forma inadequada, pois
apesar de vários caminhos serem presentes, a dificuldade de compreensão deles – seja por
posicionamento de elementos, nomenclaturas, etc. – faz com que, muitas vezes, o usuário não
consiga atingir seus objetivos.
Percebe-se, a partir deste capítulo, que os fatores que contribuem para que a experiência
não seja tão agradável quanto o esperado são muitos, e considerando que um dos principais
objetivos da navegação é suprir as necessidades e aspirações do usuário, entendem-se que
existem inúmeros aspectos a serem melhorados na Arquitetura de Informação do site da UFPel.
4. OTIMIZANDO
Tendo todas as etapas anteriormente percorridas, foi traçado o caminho para se chegar à
otimização da home do portal da UFPel. Foi feita a análise dos testes de usabilidade, a
construção as personas, a definição dos itens de menu e categorias, a análise do card-sorting, a
definição da categorização de cada item e, finalmente, o sitemap e wireframe novos, conforme
explicitado a partir de agora.
4.1 Análise dos testes de usabilidade

Para começar o processo de reorganização do conteúdo da home do site da UFPel foi feita
uma análise dos testes de usabilidade e foram apontados algumas considerações gerais em
relação à navegação e organização do conteúdo do site atual.
[1] O site possui uma quantidade muito grande de informações e elementos, o que dificulta
a leitura do mesmo e o torna mais confuso.
[2] Grande quantidade de itens de menu e uma má disposição destes, o que dificulta achar
o item de menu desejado.
[3] Alguns usuários só conseguem achar rapidamente o que procuram porque já decoraram
o caminho anteriormente, as duas considerações citadas acima interferem para que o site não
seja intuitivo.
[4] Site não possui padronização, itens de menu são agrupados de forma diferente,
imagens não possuem padrão de tamanho, cada página externa – mesmo que da UFPel –
possui identidade visual diferente, etc.
[5] Algumas informações que são bem acessadas ficam escondidas, o que faz com que o
usuário demore mais tempo para achá-la ou, até mesmo, desista de procurá-la.
[6] A boa navegação do site é restrita a usuários mais experientes.
[7] Design mal resolvido.

62
[8] No caso de alguns itens, o menu de destaque funciona muito bem.
4.2 Construção das personas

Além da análise dos testes de usabilidade, as personas também foram importantes para a
construção da nova A.I.. Características e aspirações vários usuários pertencentes a um grupo
são agrupadas em uma única persona (Futuro aluno: Bruna, por exemplo), o que permite a
visualização dos interesses de cada grupo por inteiro e interfere nas decisões tomadas.
FUTURO ALUNO
Bruna tem 16 anos e está se formando no ensino médio. Ela mora em Rio Grande e desde
o começo do ano ela tem procurado universidades da região que ofereçam os cursos que lhe
agradem. Após pesquisar várias universidades, Bruna optou por tentar ingressar na
Universidade Federal de Pelotas e desde então acessa o site com maior freqüência, para saber
mais sobre os cursos e sobre a universidade em si.
ALUNO
Gabriela tem 21 anos, adora escutar música, frequentemente acessa redes sociais para
conversar com amigos, ela também usa a internet como ferramenta de compra e como fonte
de referências visuais. Gabriela é estudante de Cinema na Universidade Federal de Pelotas
(UFPel) e costuma navegar na internet aproximadamente 7 horas por dia; entre os sites que
acessa encontra-se o da instituição. Geralmente, a estudante entra no portal para fazer
rematrícula ou ver notas publicadas pelos professores no final de cada semestre.
Gabriela possui grande familiaridade com a internet, mas ainda assim, encontra
dificuldades quando procura outros caminhos no site da UFPel que não os do sistema
acadêmico, ela sente falta de achar outras informações, como onde pegar os ônibus para os
diversos campi da universidade – para ajudar seus amigos que são de fora e estão vindo
estudar na cidade de Pelotas –, ou como ter acesso ao calendário acadêmico para saber
exatamente o que ocorrerá durante os semestres letivos.
63
TÉCNICO
Felipe tem 30 anos de idade, gosta de passar seu tempo livre em casa com sua esposa,
longe de suas rotinas diárias de trabalho. Ele trabalha na parte administrativa da Universidade
Federal de Pelotas, onde frequentemente executa algumas tarefas pela internet, como por
exemplo, distribui a carga horária de professores e a responsabilidades por disciplinas através
da intranet. Felipe cumpre todas as tarefas profissionais diárias – na internet – sem muitas
dificuldades.
PROFESSOR
Luísa tem 33 anos, passa boa parte do seu tempo livre lendo e estudando sobre assuntos
do seu interesse. Ela é professora na UFPel há 3 anos e já está acostumada com as rotinas que
precisa cumprir online. Algumas tarefas são comumente realizadas por Luísa: registro de
projetos de pesquisa, solicitação de material, impressão de diários de classe, etc. Ela navega na
internet aproximadamente 4 horas por dia, das quais parte são usadas para acessar o site da
instituição onde trabalha. Particularmente ela tem algumas dificuldades, mas, frequentemente,
tem sucesso em cumprir as suas rotinas profissionais por já conhecer os caminhos que precisa
percorrer no site.
Como professora da universidade, Luísa muitas vezes já presenciou reclamações de

alunos em relação ao portal e percebeu, também navegando, que os alunos realmente têm
motivos para ter dificuldades.
COMUNIDADE
Maria Paula tem 30 anos e gosta muito de estar conectada à internet, navega durante
aproximadamente 8 horas por dia. Ela se formou em Artes na Universidade Federal de Pelotas e
constantemente acessa o site da universidade em busca de concursos e de projetos ou cursos
que possa participar mesmo não fazendo mais parte da instituição. Maria já está extremamente
habituada com a internet e até mesmo com o site da UFPel, já que o acessa no mínimo 3 dias
por semana, e apesar dessa familiaridade com o site ela ainda encontra dificuldades em achar
algumas informações, se incomoda pois acha que não é dada a devida atenção à parte de
atualização de notícias e novos concursos.
64
4.3 Itens de menu da nova Arquitetura de Informação e categorias

Tendo as análises feitas e também as personas finalizadas foi possível decidir quais os itens
de menu ideais e as categorias a qual cada item iria pertencer. Os pontos negativos
encontrados no site e os perfis gerais dos usuários (as personas) foram essenciais para definir
os itens de menu que se manteriam, os que teriam seus nomes modificados e os que seriam
acrescentados.
Itens de menu com nomes mantidos:
• Graduação: página com um breve texto sobre graduação e quais os tipos (bacharelado,
licenciatura, etc) oferecidos pela universidade; apresenta links para a “Pró- reitoria de
Graduação” e para “Cursos”.
• Pós-Graduação: página com um breve texto sobre pós-graduação e quais os tipos

(especialização, mestrado, doutorado, etc) oferecidos pela instituição; apresenta link para a
“Pró-reitoria de Pesquisa e Pós-Graduação”.
• Pesquisa: página com um breve texto falando sobre a pesquisa na universidade;

apresenta links para a “Pró-reitoria de Pesquisa e Pós-Graduação”, “Produção científica”,
“Periódicos” e “AGT” (Agência de Gestão Tecnológica) – item que passou a fazer parte do site
enquanto a pesquisa estava sendo realizada.
• Extensão: página falando da relação de integração entre universidade e comunidade;

apresenta links para a “Pró-reitoria de Extensão e Cultura” e “MERCOSUL”.
• SISU: direciona para a página do Sistema de Seleção Unificada – Universidade Federal de

Pelotas (http://prg.ufpel.edu.br/sisu/).
• PAVE: direciona para a página do Programa de Avaliação da Vida Escolar

(http://ces.ufpel.edu.br/vestibular/pave/).
• Bibliotecas: direciona para a página de Sistemas de Bibliotecas

(http://prg.ufpel.edu.br/sisbi/).
• Educação a distância: direciona para a página do CEAD – Centro de Educação a Distância

– (http://cead.ufpel.edu.br/index.php).
65
• Identidade visual: apresenta breve texto falando sobre a Identidade Visual da

universidade, os logos para construção de trabalhos e link de download para pdf Manual de
Identidade Visual da marca da instituição.
• Extranet: página com texto explicando o que é Extranet; apresenta os links: [a]
Bibliotecas - Consulta ao Acervo, [b] Consulta à Tramitação de Processos, [c] Consulta ao
Cadastro de Servidores, [d] G.O. L (Gestão On-Line - Gerenciador do Sistema Acadêmico), [e]
Rede SERPRO, [f] SAUI (Sistema de Apoio aos Usuários de Informática), [g] SIEX (Sistema de
Informação da Extensão), [h] Sistema de Gestão Acadêmica - Consulta de Alunos, [i] Sistema de
Projetos de Pesquisa.
• Intranet: página com texto explicando o que e Intranet; apresenta links separados em
duas categorias:
[1] Consultas, que contêm os links [a] Bens patrimoniais, [b] Bibliotecas – consulta de
acervo, [c] Cadastro de servidores, [d] Dados orçamentais, [e] Produtos em estoque no
almoxarifado, [f] Tramitação de processos, [g] Consulta de pregões – sistema de registro de
preço, [g] Consulta de contatos de fornecedores, [h] Controle de pedidos 2010, [i] Controle de
pedidos 2011, [j] Controle de prazo de entrega
[2] Sistemas corporativos, que contêm os links [a] Administração patrimonial – WebSAP,
[b] Cadastro de pacientes – PROASA, [c] Controle de processos, [d] Controle de serviços –
Prefeitura universitária, [e] G.O.L (Gestão On-line – Gerenciador de sistema acadêmico), [f]
Posto de saúde, [g] Rede SERPRO, [h] SAUI (Sistema de apoio aos usuários de informática), [i]
SIEX (Sistema de informação da Extensão), [j] Sistema de controle de documentos – ConDoc, [l]
Sistema de projetos de pesquisa.
• Cidade de Pelotas: página falando sobre Pelotas, cidade onde a universidade está
localizada.
• Documentos: apresenta links para documentos relacionados ao público geral da

universidade – por exemplo, Formulário Auxílio-Transporte, Formulário de Cadastro na
UFPelNet, Solicitação de Hospedagem e Alimentação, etc.
• Calendário acadêmico: página contendo o calendário acadêmico do ano letivo, com as

principais rotinas ligadas ao Departamento de Registros Acadêmicos (DRA) como publicação de
notas, solicitação de reopção, etc.
66
• Convênios: direciona para a página da Coordenadoria de Convênios

(http://wp.ufpel.edu.br/convenios/).
• Portarias: apresenta lista de todos os processos administrativos – como abertura de

concurso, alteração de conselhos, mudança de cargos de servidores, etc – da universidade.
• Comissão de avaliação: direciona para a página da Comissão Própria de Avaliação

(http://wp.ufpel.edu.br/cpa/).
• Produção científica: página com breve texto falando sobre a produção científica na
UFPel; apresenta links para os trabalhos no Congresso de Iniciação Científica (CIC) e outros
trabalhos científicos de outras naturezas.
• Editora e gráfica: direciona para a página da Editora, Gráfica e Livraria Universitária

(http://prec.ufpel.edu.br/egu/).
• Busca de e-mail: apresenta uma Busca de Usuários Cadastrados na UFPelNet.
• Guia telefônico interno: apresenta lista de telefones separados por faculdade,

instituição, pró-reitoria, etc.
• CGIC: direciona para a página do Centro de Gerenciamento de Informações e Concursos

(http://cgic.ufpel.edu.br/wp/). Esse link ficará posicionado junto à lista de unidades
administrativas dentro do item de menu “Conselhos e Unidades Administrativas”.
• Prestação de contas: página com um breve texto sobre o assunto; apresenta links para
pdfs de prestação de contas de vários anos.
• Guia do recolhimento da União: direciona para a página do SIAFI – Sistema Integrado de

Administração Financeira) no site da Fazenda
(http://www.tesouro.fazenda.gov.br/siafi/index_gru.asp).
• Processos seletivos/concursos públicos: direciona para página do Centro de

Gerenciamento de Informações e Concursos – CGIC – (http://cgic.ufpel.edu.br/wp/).
• DRA: direciona para página do Departamento de Registros Acadêmicos

(http://www.ufpel.edu.br/alunos/).
67
• DIPI: direciona para página do Departamento de Intercâmbio e Programas

Internacionais (http://wp.ufpel.edu.br/dipi).
• MERCOSUL: direciona para página do Centro de Integração do MERCOSUL

(http://mercosul.ufpel.edu.br/).
• AGT: direciona para página da Agência de Gestão Técnológica

(http://www.ufpel.edu.br/agt/).
• Periódicos: direciona para a página dos Periódicos do CAPES

(http://www.periodicos.capes.gov.br/).
Itens de menu que tiveram seus nomes modificados:
• Cursos: a nomenclatura foi mudada de “Unidades acadêmicas” para “Cursos” com

objetivo de tornar o entendimento melhor e fazer com que o item passasse exatamente o que
queria expor; a página apresenta listagem dos cursos oferecidos pela universidade linkados
cada item para a página do respectivo curso que representa.
• Conselhos e unidades administrativas: nome mudado de “Administração” para

“Conselhos e unidades administrativas”, pois a nomenclatura anterior não deixava claro o que
exatamente iria ser apresentado nessa tela; a página apresenta os Conselhos superiores –
Conselho Universitário, por exemplo – e as Unidades administrativas – tais como pró-reitorias.
• Envie sua mensagem: anteriormente o item se chamava “Contatos”, mas por apresentar
um formulário de envio de mensagem optou-se por chamá-lo “Envie sua mensagem”; a página
apresenta um formulário de envio de mensagem.
• Relatórios de gestão: anteriormente se chamava “Relatório de gestão 2009” pois linkava

para um pdf com o relatório referente a 2009, como o conteúdo exposto nessa página mudou,
seu nome também foi modificado para ser coerente ao conteúdo apresentado; a página
contém links para os relatórios de gestão de vários anos.
• Rádio Federal FM: foi acrescentada a palavra “rádio” no item de menu “Federal FM”
para que a nomenclatura ficasse mais clara e explicativa; item direciona para a página da Rádio
Federal FM (http://federalfm.ufpel.edu.br/).
68
Itens de menu acrescentados:
• Notícias: esse item de menu não existe na versão atual do site; as principais notícias têm
suas chamadas apresentadas na home do site e levam para o site da Coordenadoria de
Comunicação Social. Somente essa forma de apresentação das notícias não é muito eficiente, já
que uma grande quantidade de chamadas é colocada meio ao número já elevados de
elementos existentes na home e, além disso, ser levado para uma página externa toda a vez
que se quiser acessar uma notícia por inteiro faz com o que o usuário se sinta perdido.
Portanto, optou-se por criar um item de menu “Notícias” que irá levar para uma página onde
serão apresentadas as últimas notícias, a primeira será exposta na sua totalidade enquanto as
demais terão só as chamadas apresentadas. Ainda assim, a home também conterá com alguns
destaques de notícias com fotos, o que já acontece no portal atualmente.
• Agenda: esse item também não existe no site atual; a agenda é apresentada na home
em pequenas chamadas linkadas para a página da Coordenadoria de Comunicação Social.
Apresentar as informações somente dessa forma traz os mesmos problemas de Notícias.
Optou-se, então, por criar um item de menu “Agenda” que direcionará para uma página onde
estarão as principais chamadas dos acontecimentos na UFPel assim como um calendário
mostrando o que acontecerá em cada período.
• Licitações: item de menu que não existe no site atual, ele aparece apenas na home
apresentando as últimas solicitações e direciona para uma página com a listagem completa de
licitações. Novo item de menu irá direcionar para a mesma página citada.
• A UFPel: não existe no site nenhum conteúdo falando sobre a universidade em si, o que
a universidade, o que ela oferece, etc. Decidiu-se criar esse item de menu para expor
informações sobre a universidade, como uma forma de apresentação.
• História: esse item de menu irá conter a história da UFPel.
• Transportes: esse é um item bem importante para novos alunos; nele serão
apresentados os dias e horários de transportes disponíveis para os diferentes campi da
universidade, assim como os ônibus que são oferecidos pela própria universidade.
• Localização: esse item mostra o endereço da instituição, telefones e a localização dos

campi da universidade no Google Maps.
69
Devido à navegação confusa gerada, entre outros motivos, pela falta de organização dos
menus, os itens foram separados em seis categorias, com o objetivo de diminuir a quantidade
de informação apresentada ao usuário e permitir que ele escolha o que deseja acessar em
primeira instância sem que todos os itens precisem ser expostos a ele em um mesmo
momento. Além disso, a categorização dos menus resolve dois problemas apontados pelos
participantes dos testes de usabilidade: o problema de nomenclatura de muitos itens (já que
explicita ao usuário a que gênero cada item pertence) e o da grande quantidade de itens de
menu mal organizados.
• ENSINO: categoria que irá englobar itens importantes para a vida acadêmica, assim
como links relacionados ao ensino oferecido pela universidade.
• PESQUISA E EXTENSÃO: categoria que agrupa itens relacionados à pesquisa e à

extensão. Optou-se por agrupar pesquisa e extensão para que não fossem criadas duas
categorias diferentes que possuíssem poucos itens de menu; a distinção entre pesquisa e
extensão é feita através de uma divisão no submenu em drop down.
• COMUNICAÇÃO: agrupa itens importantes para o diálogo da universidade com seu

público.
• INSTITUCIONAL: engloba itens relacionados à instituição como, por exemplo, a história,

localização, relatórios de gestão, etc.
• SERVIÇOS: categoria que agrupa itens relacionados a serviços oferecidos pela

universidade.
• FALE CONOSCO: agrupa itens que condizem como forma de comunicação com a
universidade.
4.4 Análise do card-sorting

Com o card-sorting foi possível saber onde o usuário acha que os itens de menu devem
ser agrupados, quais são as categorias adequadas para cada um. Os resultados serviram como
referência para a definição da categoria de cada item.
70
Abaixo tabela criada pelo site utilizado para o card-sorting, mostrando qual a escolhas
os usuários em porcentagem:
Figura 20 - Tabela mostrando escolhas dos usuários em porcentagem. FONTE: da autora.

71
[1] Categoria escolhida com unanimidade – 100 % dos usuários – e que serão mantidas
assim localizadas.
Figura 21 - Tabela com itens que tiveram categoria escolhida por 100% dos usuários. FONTE: da autora.
• Envie uma mensagem: categoria “FALE CONOSCO”.
• Pesquisa: categoria “PESQUISA E EXTENSÃO”.
• Extensão: categoria “PESQUISA E EXTENSÃO”;
• Comissão de avaliação: categoria “INSTITUCIONAL”.
• Graduação: categoria “ENSINO”.
• Cursos: categoria “ENSINO”.
[2] Categoria escolhida por 80% por usuários e que, devido ao alto índice de
compatibilidade, são consideradas pertinentes na categoria elencada.
Figura 22 - Tabela dos itens que tiveram mesma categoria escolhida por 80% dos usuários. FONTE: da autora.
• Busca de e-mail: categoria “FALE CONOSCO”.

72
• AGT: categoria “PESQUISA E EXTENSÃO”.
• A UFPel: categoria “INSTITUCIONAL”.
• Conselhos e Unidades administrativas: categoria “INSTITUCIONAL”.
• História: categoria “INSTITUCIONAL”.
• Portarias: categoria “INSTITUCIONAL”
• Relatórios de Gestão: categoria “INSTITUCIONAL”.
• SISU: categoria “ENSINO”.
• PAVE: categoria “ENSINO”.
• Rádio Federal FM: categoria “COMUNICAÇÃO”.
• Notícias: categoria “COMUNICAÇÃO”.
[3] Categoria escolhida por 60% dos usuários, onde cabem justificativas para a
manutenção de alguns itens, conforme explicitado a seguir.
• Produção Científica: categoria “PESQUISA E EXTENSÃO”.
• MERCOSUL: apesar da maioria dos usuários julgar que o item pertence à categoria
“INSTITUCIONAL”, O MERCOSUL está relacionado à extensão, logo, deve ser encaixado na
categoria “PESQUISA E EXTENSÃO”; a confusão dos usuários em relação ao item é natural
73
devido à nomenclatura apresentada, mas nesse caso o nome do item não pode ser mudado
pois este é o nome do Centro de Integração e o item direciona para a página do mesmo.
• Editora e Gráfica: categoria “SERVIÇOS”.
• Convênios: categoria “SERVIÇOS”.
• Documentos: apesar da maioria dos usuários achar que o item pertence à categoria
“INSTITUCIONAL”, esse item não se encaixa nessa categoria pois apresenta formulários pra
solicitações diversas que disponibilizam serviços da universidade (auxílio transporte, por
exemplo), logo o item entrará na categoria “SERVIÇOS”.
• Cidade de Pelotas: categoria “INSTITUCIONAL”.
• Guia do recolhimento da União: categoria “INSTITUCIONAL”.
• Pós-Graduação: categoria “ENSINO”.
• Educação à distância: categoria “ENSINO”.
• DRA: categoria “ENSINO”. O item ainda terá um item de destaque na home, já que nos
testes de usabilidade os usuários declararem acessar o DRA através do destaque existente no
site atual.
• Processos seletivos/ Concursos públicos: para maioria dos usuários o item pertence à
categoria “INSTITUCIONAL”, mas como ele poderia ser encaixado em mais de uma categoria,
será apresentado na home do site em forma de destaque.
• Agenda: categoria “COMUNICAÇÃO”.
• Bibliotecas: categoria “SERVIÇOS”.
• Guia telefônico interno: apesar de para a maioria dos usuários o item pertencer à
categoria “SERVIÇOS”, ele ficará localizado em “FALE CONOSCO” por apresentar contatos com
os diferentes campi e departamentos da universidade.
74
[4] Itens com categorias escolhidas por 40% dos usuários, onde cabem
justificativas para a modificação de categoria de alguns itens.
• Identidade Visual: para 40% dos usuários o item pertence à categoria “COMUNICAÇÃO”
e para outros 40% pertence à categoria “INSTITUCIONAL”. Apesar de Identidade visual ser uma
forma de comunicação da marca, ela não representa uma forma de comunicação entre o
público e a instituição, logo ficará localizada na categoria “INSTITUCIONAL”.
• Prestação de contas: para 40% dos usuários o item pertence à categoria

“INSTITUCIONAL” e para outros 40% pertence à categoria “SERVIÇOS”. Como o item traz dados
sobre as contas da universidade e não é um serviço oferecido pela mesma, será encaixado na
categoria “INSTITUCIONAL”.
• Transportes: 40% dos usuários o item pertence à categoria “COMUNICAÇÃO”, para

outros 40% pertence à categoria “SERVIÇOS”. O item será agrupado na categoria “SERVIÇOS”,
pois neste item são mostradas as linhas e horários de ônibus disponibilizados pela universidade,
o que caracteriza um serviço da mesma.
• Intranet: para 40% dos usuários o item pertence à categoria “ENSINO”, para outros 40%
pertence à categoria “SERVIÇOS”. O item não irá fazer parte de nenhuma categoria, pois, além
de não ter uma categorização muito exata (poderia se encaixar em mais de uma categoria), é
um item importante que precisa ser facilmente acessado, logo o item será apresentado em
forma de destaque na home do site.
• Extranet: para 40% dos usuários o item pertence à categoria “ENSINO”, para outros 40%
pertence à categoria “SERVIÇOS”. Assim como a “Intranet”, o item não irá fazer parte de
nenhuma categoria, pois, além de não ter uma categorização muito exata (poderia se encaixar
75
em mais de uma categoria), é um item importante que precisa ser facilmente acessado, logo o
item será apresentado em forma de destaque na home do site.
• CGIC: para maioria dos usuários o item pertence à categoria “SERVIÇOS”, porém, o item
direciona para a mesma página do item “Processos seletivos/ Concursos públicos”, logo, assim
como este, poderia ser encaixado em qualquer categoria. Para não repetir dois itens com
mesmo direcionamento na home, o item “CGIC” deixou de existir na navegação principal e
passou a fazer parte da lista presente em “Conselhos e Unidades administrativas”.
• DIPI: para maior parte dos usuários o item pertence à categoria “INSTITUCIONAL”, mas
como ele não pode se encaixar em nenhuma categoria, por ter características de mais de uma
categoria, será apresentado em forma de destaque na home do site.
• Calendário acadêmico: categoria “ENSINO”.
• Periódicos: para 40% dos usuários o item pertence à categoria “COMUNICAÇÃO”, para
outros 40% pertence à categoria “PESQUISA E EXTENSÃO”. Como o item apresenta conteúdo
relacionado à pesquisa, ficará localizado na categoria “PESQUISA E EXTENSÃO”.
O item de menu “Licitações” e “Localização” não haviam sido criados quando o card-
sorting foi feito pelos usuários. O primeiro estará na categoria “INSTITUCIONAL”, o segundo na
categoria “SERVIÇOS”.
Com base em todas as análises feitas, tanto do site quanto das considerações dos
usuários no card-sorting foi possível definir em qual categoria seria enquadrado cada item de
menu.
76
77
Dos 42 itens de menu da nova Arquitetura de Informação, quatro itens – “Extranet”,

“Intranet”, “”DIPI” e “Processos Seletivos/Concursos” – serão apresentados como destaque na
home, devido a sua falta de categorização e/ou por serem itens muito acessados e que
necessitam ser posicionados em lugar de destaque devido esse motivo. O item “CGIC” também
não ficou encaixado em nenhuma categoria, o link ficou dentro do item de menu “Conselhos e
Unidades administrativas”.
ITEM DE MENU ATUAL ITEM DA NOVA A.I. CATEGORIA
Graduação Graduação ENSINO
Pós-Graduação Pós-Graduação ENSINO
Pesquisa Pesquisa PESQUISA E EXTENSÃO
Extensão Extensão PESQUISA E EXTENSÃO
SISU SISU ENSINO
PAVE PAVE ENSINO
Bibliotecas Bibliotecas SERVIÇOS
Educação à distância Educação à distância ENSINO
Identidade Visual Identidade Visual INSTITUCIONAL
Cidade de Pelotas Cidade de Pelotas INSTITUCIONAL
Unidades Acadêmicas Cursos ENSINO
Administração Conselhos e Unidades INSTITUCIONAL
administrativas
Documentos Documentos SERVIÇOS
Contatos Envie sua mensagem FALE CONOSCO
Extranet Extranet HOME
Intranet Intranet HOME
Calendário acadêmico Calendário acadêmico ENSINO
Convênios Convênios SERVIÇOS
Portarias Portarias INSTITUCIONAL
Comissão de avaliação Comissão de avaliação INSTITUCIONAL
Produção Científica Produção Científica PESQUISA E EXTENSÃO
Editora e Gráfica Editora e Gráfica SERVIÇOS

78
ITEM DE MENU ATUAL ITEM DA NOVA A.I. CATEGORIA
Busca de e-mail Busca de E-mail FALE CONOSCO
Guia Telefônico interno Guia telefônico FALE CONOSCO
CGIC CGIC Dentro de “Conselhos e
Unidades administrativas”
Prestação de Contas Prestação de Contas INSTITUCIONAL
Guia de recolhimento Guia de recolhimento INSTITUCIONAL
da União da União
Relatório de gestão 2009 Relatórios de Gestão INSTITUCIONAL
Processos seletivos/ Processos seletivos/ Destaque HOME
Concursos públicos Concursos públicos
DRA DRA ENSINO/destaque HOME
DIPI DIPI Destaque HOME
Federal FM Rádio Federal FM COMUNICAÇÃO
MERCOSUL MERCOSUL PESQUISA E EXTENSÃO
AGT AGT PESQUISA E EXTENSÃO
Periódicos Periódicos COMUNICAÇÃO
Notícias COMUNICAÇÃO
Agenda COMUNICAÇÃO
A UFPel INSTITUCIONAL
História INSTITUCIONAL
Transportes SERVIÇOS
Localização INSTITUCIONAL
Licitações SERVIÇOS
4.5 Sitemap da nova Arquitetura de Informação

Após ter os itens de menu e as categorias decididas o novo sitemap foi construído.
80
4.6 Wireframe da home do site reformulado

Logo começou-se a decidir quais os melhores conteúdos a serem apresentados na home e
o posicionamento dos mesmos na página. O processo começou no papel; foram feitos diversos
esboços até chegar a um adequado a proposta da pesquisa, as decisões foram feitas com o
intuito de propor uma arquitetura de informação mais clara.
Figura 26 – Esboços no papel do wireframe da nova Arquitetura de Informação da home. FONTE: da autora.
O wireframe feito a mão foi digitalizado.

81
Figura 27 – Wireframe da nova Arquitetura de Informação da home. FONTE: da autora.

82
O topo da home apresenta o logo da UFPel à esquerda, a busca no centro e a direita o

login do Webmail.
Figura 28 – Topo da no A.I. da home. FONTE: da autora.
Como grande parte dos itens de menu da nova Arquitetura de Informação foram
distribuídos em 6 categorias, mas como ainda sobravam itens que não possuíam categoria e,
ainda, outros que já estavam agrupados mas precisavam de um destaque, optou-se por
apresentar dois menus.
[1] Menu principal: apresenta as categorias definidas para a nova A.I., cada uma com seus
itens de menu específicos; o menu é drop down, ou seja, é aberto quando o mouse está
posicionado sobre ele. Além do itens de menu serem separados em categorias, em cada drop
down de categoria ele também é dividido em grupos de conteúdos semelhantes.
Figura 29 – Menu principal com a categoria Ensino aberta. FONTE: da autora.
Figura 30 – Menu principal com a categoria “Pesquisa e Extensão” aberta. FONTE: da autora.
83
Figura 31 – Menu principal com a categoria “Comunicação” aberta. FONTE: da autora.
Figura 32 – Menu principal com a categoria “Institucional” aberta. FONTE: da autora.
Figura 33 – Menu principal com categoria “Serviços” aberta. FONTE: da autora.
Figura 34 – Menu principal com categoria “Fale Conosco”. FONTE: da autora.
Decidiu-se também que a home apresentaria conteúdos que são destinados ao público-
alvo em geral:
[1] Últimas notícias: apresenta destaque das três últimas notícias, cada notícia vem
acompanhada do botão “Leia mais” que leva para a página da notícia específica; possui menu
de navegação.
[2] Eventos: apresenta os eventos que estão acontecendo que são relacionados à
universidade; corresponde ao que era apresentado em forma de imagens (banners) logo abaixo
da listagem de “Agenda” na home atual do site; neste item também se encaixam os
comunicados que são apresentados na parte superior esquerda do site atual.
84
Figura 35 - Banners apresentados no site atual abaixado de Agenda. FONTE: reprodução do site.
Figura 36 - Comunicados exibidos na página atual do site. FONTE: reprodução do site.
[3] Novo na UFPel: destinado à tudo que há de novo na universidade, desde novos sites
feitos até novos laboratórios de informática, por exemplo; aqui são encontrados o conteúdo
que está na home do site atual em uma seção de mesmo nome desta.
[4] Destaques: espaço destinado a destaques diversos como, por exemplo,

cursos, links institucionais (transportes, identidade visual, etc); essa área,
diferentemente das citadas anteriormente, é apresentada de forma estática.
85
Figura 37 – Conteúdo da home da nova A.I.. FONTE: da autora.
Por fim, optou-se por apresentar o sitemap de forma descritiva para que todos os itens
do menu de categorias pudessem ser vistos, facilitando a visualização do conteúdo do site por
inteiro. No rodapé é apresentado o endereço da instituição.
86
Figura 38 – Mapa do site e rodapé da home. FONTE: da autora.

CONSIDERAÇÕES FINAIS
Esta pesquisa teve como objetivo principal propor uma nova Arquitetura de Informação
para a home do site da Universidade Federal de Pelotas, a fim de tornar mais adequada a
organização de conteúdo e permitir aos usuários uma navegação mais agradável. Ao longo do
projeto foram transcorridas várias etapas, algumas delas como as análises feitas a partir do
referencial teórico foram essenciais para comprovar a importância da pesquisa, confirmando a
necessidade de uma reformulação da Arquitetura de Informação do portal.
O capítulo um propunha apresentar os conceitos essenciais para uma boa Arquitetura de

Informação e navegação ideal, foram apresentados os referenciais teóricos já planejados
inicialmente, que contribuíram para cumprir o objetivo do capítulo, dando, assim, uma boa
base para o resto da pesquisa. O capítulo dois atingiu de forma esperada ao que pretendia,
mostrar a metodologia a ser seguida durante o trabalho, os passos transcorridos durante o
trabalho foram apresentados detalhadamente de maneira a dar conta da descrição das etapas
da pesquisa. O capítulo três trouxe as análises exatamente da forma como foram previstas,
conseguindo, assim, demonstrar os reais pontos negativos do site da UFPel e a necessidade da
organização de conteúdo.
No capítulo quatro foi apresentada a parte prática do trabalho e as etapas percorridas até
se chegar na nova Arquitetura de Informação da home (sitemap e wireframe). Os resultados
dos testes de usabilidade e o card-sorting acrescentaram à pesquisa, confirmando o que
deveria ser modificado e justificando as decisões tomadas na criação de itens de menu,
categorias e caminhos de navegação. Foi possível chegar à conclusão de que com itens de menu
com nomenclaturas adequadas agrupados em categorias bem definidas mudam
completamente a forma com o que o portal da universidade é visto, facilita o entendimento e a
navegação do mesmo. Além disso, a definição de que o conteúdo contido na home seria de
interesse do público-alvo em geral da universidade torna a página inicial mais limpa, permitindo
uma melhor leitura do site e um melhor visualização do que está sendo apresentado ao
usuário.
89
Durante toda a pesquisa os usuários foram peça importantíssima. Logo que foi decidido
que o estudo e a reconstrução da Arquitetura de Informação teria foco no usuário ele passou a
fazer parte do processo como um todo e ajudou na tomada de decisões. Os usuários
participaram tanto dos testes de usabilidade, encontrando e sinalizando os pontos negativos do
site da UFPel, quanto do card-sorting, definindo em quais categorias seriam localizados a
maioria dos itens de menu da nova A.I..
Através do referencial teórico, das análises e estudos feitos, o objetivo principal da

pesquisa – de mostrar como propor uma nova Arquitetura de Informação para a home do site
da UFPel com base na usabilidade – foi atingido com sucesso, resultando em uma nova A.I. mais
organizada e construída de acordo com o que foi defendido ao longo da pesquisa.
PROJEÇÕES FUTURAS
1. Prever em quais locais (espaços) da nova Arquitetura de Informação do site

seriam colocados itens novos, caso eles viessem a existir.
2. Criar um tipo de sinalização, instruções de como navegar no site, a fim de guiar

o usuário pela nova Arquitetura de Informação do site.
REFERÊNCIAS
AGNER, Luis. Ergodesing e arquitetura de informação. Rio de Janeiro: Quartet, 2006.
AMSTEL, Frederick Van. Design Centrado em quê?. Disponível em:

<http://usabilidoido.com.br/design_centrado_em_que.html> Acesso em: outubro e
novembro de 2011.
EXPLORANDO E APRENDENDO. Disponível em: <http://www2.explorando.com.br> Acesso em:

setembro de 2011.
FLEMING, Jennifer. Web Navegation: Designing the User Experience. Sebastopol: O'Reilly
Media, 1998.
GOMES, Ivo. Disponível em: < http://www.ivogomes.com/> Acesso em: agosto e setembro de
2011.
KRUG, Steve. Não me faça pensar. Rio de Janeiro: Alta Books, 2006.
KUNSH, Margaria Maria Krohling. Planejamento de Relações Públicas na Comunicação

Integrada. São Paulo: Summus, 2003.
LUPTON, Ellen; PHILLIPS, Cole. Novos fundamentos do design. São Paulo: Cosac Naify, 2008.
MANDEL, Theo. The Elements of User Interface Design. United States: Wiley, 1997.
MEMÓRIA, Felipe. Design para internet: projetando a experiência perfeita. Rio de Janeiro:
Elsevier, 2005.
NIELSEN, Jacok; LORANGER, Hoa. Projetando Websites com Usabilidade. Rio de Janeiro:
Campus, 2007.
NIELSEN, Jacob. Usability Engineering. Massachusetts: Morgan Kaufmann, 1993.
PAIVA, V.L.M.O. In: LEFFA.V. (Org.) Interação na aprendizagem das línguas. Pelotas: EDUCAT,
2003. p.219-254.
RUBIN, Jeffrey. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective
Tests. United States: Wiley, 1994.
PINHEIRO, Gabriel. Wireframes: Conceito e Ferramentas. Disponível em:

<http://cafeinterativo.wordpress.com/2011/03/10/wireframes-conceito-ferramentas/> Acesso
em: setembro de 2011.
92
SORIO, Washington. O que é Benchmarcking?. Disponível em: <

http://www.guiarh.com.br/z59.htm> Acesso em: 20 setembro de 2011.
UFRGS. Disponível em: <http://www.ufrgs.br/ufrgs/inicial> Acesso em: outubro e novembro de

2011.
UNISINOS. Disponível em: <http://www.unisinos.br/portal/> Acesso em: outubro e novembro

de 2011.
UNIVERSIDADE FEDERAL DE PELOTAS. Site construído e mantido pelo Centro de Informática,

[1995-2011]. Disponível em: <http://ufpel.tche.br> Acesso em: agosto e setembro de 2011.
ANEXOS
ANEXO A – Testes de Usabilidade
Teste - 25/09/2011
Informações
- Aluno 1
- Idade: 22 anos
- Navega pela internet 9 horas por dia
- Não costuma acessar o site da UFPel
- Raramente encontra no site as informações que deseja
1. “Quais as rotinas que são mais comumente acessadas? Por que?”
Nas raras vezes que acessa o site entra no link do DRA. Acessa com mais freqüência o site
do seu curso que, segundo ele, possui diversas informações úteis.
2. “Você acha que o portal da universidade funciona bem? Costuma achar com freqüência
as informações que procura?”
Para o usuário testado o site da instituição não funciona como deveria, ele não consegue
achar as informações que procura.
3. “Você encontra alguma dificuldade navegando pelo site da UFPel? Quais?”
Segundo o usuário, é fácil se perder no site devido à quantidade de informações que é

muito grande e a estrutura confusa da página.
4. “Caso você queira, por algum motivo, acessar os sites de cursos pertencentes a outras
- UNIDADES ACADEMICAS -> CURSO DE LETRAS

94
- acessou muito rapidamente a informação correta => realização da tarefa: FÁCIL
5. “Supondo que estamos em época de rematrícula e você precise fazer a sua, como
procede?”
- após transcorrer o caminho: UNIDADES ACADEMICAS -> DESIGN DIGITAL -> ALUNOS, e
não encontrar o que desejava, voltou a home do site da UFPel e seguiu DRA -> SISTEMA
ACADEMICO
- realização da tarefa: MÉDIO
6. “Você fez sua rematrícula com sucesso e agora quer saber que dia as aulas começam,
- primeiramente acessou CALENDÁRIO ACADÊMICO, após não ter encontrado a

informação que procurava acessou UNIDADES ACADÊMICAS -> DESIGN DIGITAL -> CALENDÁRIO
ACADÊMICO
7. “Se você quer se inscrever para receber benefícios da universidade, como auxílio
-Usuário acessou o link do DRA, ficou vários minutos procurando a informação mas não
achou e desistiu da tarefa
- realização da tarefa: INSUCESSO
8. “Navegando com atenção especial às nomenclaturas dos itens de menu, você acha que
Os nomes do itens de menu não estão bem claros para este usuário. Ele não sabe para
onde vários itens irão levá-lo, tais como: convênios, portaria, comissão de avaliação, busca de
email, centro de informática, etc.
9. “Navegue livremente pelo site e vá me dizendo em voz alta o que você está pensando.”
95
O usuário diz que o site é muito difícil de ler, pois possui muitos itens de menu, a
disposição é ruim e há um excesso de informação. Além disso, ele acha as nomenclaturas
complicadas e o layout mal resolvido.
96
Teste - 26/09/2011
Informações
- Aluno 2
- Idade: 20 anos
- Nas raras vezes que acessa raramente encontra o que está procurando
Só acessa o DRA para entrar no sistema acadêmico e poder realizar tarefas como a de
rematrícula.
O usuário acha que o portal da universidade não funciona bem. Ele só consegue achar as
informações que já acessou anteriormente, segundo ele, só encontra o que anteriormente
havia demorado algum tempo tentando descobrir onde fica e porque decorou o caminho.
O usuário não consegue se localizar com a quantidade de menus existentes. O design do

site (ou como citado pelo testado: a falta de design) o incomoda, já fazendo com que perca a
paciência logo que entra na página.
4. “Caso você queira, por algum motivo, acessar os sites de cursos pertencentes a outras
- UNIDADES ACADEMICAS -> CURSO MEDICINA

97
5. “Supondo que estamos em época de rematrícula e você precise fazer a sua, como
procede?”
- DRA -> SISTEMA ACADÊMICO
- perguntado ao usuário se ele conhecia algum outro caminho para acessar o sistema
acadêmico e a reposta foi negativa, afirmou que se não existisse o menu de destaque DRA não
sabia como chegar no destino desejado.
6. “Você fez sua rematrícula com sucesso e agora quer saber que dia as aulas começam,
- primeiramente: DRA -> SITEMA ACADÊMICO, percebendo que não realizaria a tarefa
nesse item, passou a procurar a informação na home do site, demorar alguns minutos até
acessar o caminha CALENDÁRIO ACADÊMICO -> EDITAIS E COMUNICADOS, ainda assim não
achou a informação e desistiu de procurá-la chegando à conclusão de que esta não existia.
7. “Se você quer se inscrever para receber benefícios da universidade, como auxílio
- Usuário ficou alguns minutos procurando onde poderia estar esta informação, leu
praticamente todos os itens de menu até chegar a conclusão de que encontraria o que estava
procurando em DOCUMENTOS
8. “Navegando com atenção especial às nomenclaturas dos itens de menu, você acha que
Segundo o usuário testado, as nomenclaturas não estão adequada, ele não consegue
entender para onde vários itens de menu irão levá-lo, além disso constatou que muitos itens
anunciam que levarão para um lugar específico e levam para outro totalmente diferente do
98
esperado. O usuário ficou confuso com o item “Unidades Acadêmicas”, segundo ele ali deveria
constar o nome Cursos já que “é a parte mais importante do site”. Além disso, ele se confundiu
com o link “Graduação” em relação ao link “Unidades Acadêmicas” que segundo seu raciocínio
eram a mesma coisa.
O usuário frisa que acha o site péssimo, pois além do design ser ruim, é mal organizado e
ele não consegue achar nada que procura. Para ele o site é mal divido e possui muito itens de
menu, que o deixa confuso sem saber por onde procurar as informações desejadas.
99
Teste - 28/09/2011
Informações
- Professor 1
- Idade: 30 anos
- Acessa o site da UFPel geralmente 2 vezes por semana
- Usuário do site há mais de 10 anos, antes de professor foi aluno da instituição
- Costuma achar o que está procurando
Acessa o site por dois motivos diferentes, primeiro para utilização das funcionalidades
relacionadas ao seu trabalho e segundo para obter informações no geral não necessariamente
ligadas à parte docente. O usuário frisou que como passou a fazer parte da instituição neste
semestre, e teve uma demora para que seu nome fosse inserido no sistema, ainda está se
adaptando as rotinas docentes no site. Acessa com freqüência os editais de concursos.
O usuário respondeu que para as informações que ele pretende acessar o portal funciona
bem.
As coisas que estão relacionadas com o sistema docente ele ainda não tem familiaridade,
foi a pouco tempo registrado e ainda não precisou acessar a maioria das rotinas de professores.
Mas para as outras informações que ele pretende acessar o portal funciona bem.
4. “Você considera claras as nomenclaturas dos itens de menu?”

100
Para o usuário as nomenclaturas estão adequadas, segundo ele, é possível entender para
onde cada link irá levar.
5. “Supondo que você precise registrar um projeto de pesquisa, como você realiza essa
tarefa?”
O usuário disse que não sabia acessar e nem tentou realizar a tarefa.
6. “Supondo que você precise solicitar algum tipo de material, onde encontra o
documento que é necessário preencher?”
O usuário não achou o lugar no qual estava o formulário e realçou que prefere fazer
processo de forma presencial, indo até o departamento (ou pró-reitorias). Ele acha que o site
não está preparado para esse dia de processo.
7. “De que forma você acessa a página do RAAD (Relatório Anual de Atividades
Docentes)?”
O usuário informou que ainda não tem acesso a esse sistema. Ele navegou um pouco
pelos menos mas não chegou a clicar em nada.
8. “Como você acessa o G.O.L (Gestão On-Line – Gerenciador do Sistema Acadêmico) para
O usuário testado desconhece o caminho para acessar o G.O.L. Assim como os demais
acessos às rotinas docentes ele está esperando uma posição da instituição em relação ao seu
acesso aos sistemas para posteriormente consultar o que precisa.
101
O usuário acha o site límpido e claro, ele frisa que essa posição dele pode ser influenciada
pelo tempo que ele navega no site da UFPel (mais de 10 anos). Ele acha os comunicados
animados interessantes e úteis, e diz que consegue chegar a muitas informações desejadas
rapidamente. O usuário acha que os banners centrais (logo abaixo de agenda) incomodam pois
não estão em um lugar adequado e não possuem um padrão de tamanho, ele também acho
inapropriado que a maioria dos links levem para páginas externas e com identidades visuais
totalmente diferentes da home.
102
Teste - 08/11/2011
Informações
- Professor 2
- Idade: 29 anos
- Navega pela internet aproximadamente 5 horas por dia
- Acessa o site da UFPel 2 ou 3 vezes por semana
- Nem sempre consegue encontrar o que está procurando
- Usuário diz já estar de certa forma adaptado com o site por acessá-lo com freqüência
Costuma acessar bastante a agenda, o calendário acadêmico, a parte de gerenciamento

(G.O.L.), concursos, administração, documentos e telefones.
O usuário acha o site confuso.
O usuário diz que as informações no portal como um todo parecem estar escondidas,
como é o caso dos contatos de outros setores ou informações documentais.
O usuário não acha as nomenclaturas claras, para ele os nomes podiam ser mais
explícitos, como o item “unidades acadêmicas” que poderia ser “cursos”.
5. “Supondo que você precise registrar um projeto de pesquisa, como você realiza essa
tarefa?”
- PESQUISA -> DEPARTAMENTOS/PESQUISA -> PROJETOS DE PESQUISA -> CADASTRE

AQUI SEU PROJETO DE PESQUISA
103
- realização da tarefa: SUCESSO
6. “Supondo que você precise solicitar algum tipo de material, onde encontra o
- DOCUMENTOS -> FORMULÁRIO DE SOLICITAÇÃO DE MATERIAL E SERVIÇO
- usuário diz que, embora saiba achar o documento, não sabe como encaminhar o
mesmo, sente falta de alguma instrução explicando como proceder.
7. “De que forma você acessa a página do RAAD (Relatório Anual de Atividades
Docentes)?”
8. “Como você acessa o G.O.L (Gestão On-Line – Gerenciador do Sistema Acadêmico) para
- EXTRANET -> G.O.L. -> NOTAS
O usuário frisa os pontos citados anteriormente durante as perguntas e diz achar o

destaque “processos seletivos/ concursos públicos” muito útil.
104
Teste – 06/10/2011
Informações
- Técnico administrativo 1
- Idade: 27 anos
- Acessa o site da UFPel todos os dias
- Frequentemente acessa a rede interna (intranet)
- Costuma achar o que está procurando
Diversas rotinas realizadas na intranet, entre elas, o cadastro de professores.
O usuário diz achar o portal razoável.
O usuário deu um exemplo pontual de onde encontra maior dificuldade: no setor G.O.L.
encontra um item de menu que deveria possuir um conteúdo óbvio que não se encontra lá.
Com exceção deste caso, o testado diz encontrar pouquíssimas dificuldade, ao menos na parte
de intranet, que é a mais frequentemente utilizada por ele.
Logo que o usuário sinalizou que achava no geral a intranet razoavelmente fácil de ser
utilizada, lhe foi direcionada a pergunta: quando você começou a utilizar a intranet na UFPel já
achou de fácil manuseio?. A resposta foi positiva, ele sempre achou que a intranet apresentasse
uma boa usabilidade. Além de tudo o usuário frisou que na observação geral dele no site,
percebe que o setor que apresenta maiores problemas realmente é o de alunos.

105
O usuário testado diz não achar claras as nomenclaturas apresentadas. Ele volta a citar o
exemplo anterior.
5. “Supondo que você precise solicitar algum tipo de materiall, onde encontra o
6. “Caso você precise fazer solicitação de material de consumo, como procede?”
7. “Para acompanhar a chegada de um documento enviado por protocolo a seu destinho,

qual o procedimento deve ser adotado?”
8. “Caso seja necessário cadastrar um projeto ou preencher um relatório, onde isso deve
ser feito?”
O usuário não precisa realizar essa tarefa na sua rotina e não saber como fazer.

106
Teste – 14/10/2011
Informações
- Futuro aluno 1
- Idade: 17 anos
- Perguntado sobre o que achava do site e da facilidade ou não de usá-lo, o usuário disse
não acessar o site tanto a ponto de saber os pontos negativos do mesmo. O acesso dele se
resumiu em buscar os cursos oferecidos pela universidade.
1. “Considerando que você ainda não faça parte da universidade e queira ingressar ela de
alguma maneira, como você descobre o que pode cursar?”
Usuário achou a informação sem maiores problemas.
2. “Como você descobre a forma de ingressar na UFPel?”
O tempo para achar o caminho foi um pouco mais demorado, depois de alguns minutos o
usuário percebeu que clicando em SISU ele conseguiria realizar a tarefa solicitada.
3. “Supondo que você não more em Pelotas e considerando que queira realmente
ingressar na UFPel, você acessaria o link ‘cidade de Pelotas’ para conhecer melhor a cidade?”
O usuário, apesar de não morar em Pelotas, não acessaria o este link. Segundo ele Pelotas
já é uma cidade conhecida e mesmo que ele quisesse ter acesso a informações sobre a cidade
iria procurar no Google.
107
Teste – 28/10/2011
Informações
- Comunidade 1
- Idade: 32 anos
- Costuma acessar o site da UFPel 3 vezes por semana
- O usuário diz que não encontra as informações desejadas tantas vezes quanto gostaria
O usuário procure maior parte de informações na parte de concurso, também lê notícias

e procura telefones de setores com o qual gostaria de se comunicar.
2. “Você sentia dificuldade quando começou a utilizar o site da instituição? Se sim, qual foi
a maior das dificuldades”
Sim, a maior das dificuldades foi localizar contatos de setores que compõe a universidade.
3. “Você acha que o portal da universidade funciona bem? Costuma achar com
freqüência as informações que procura?”
Para o usuário a página inicial está funcionando, entretanto as páginas dos setores têm
grandes problemas de usabilidade e funcionalidade. Segundo ele, não há uniformidade na
apresentação da informação o que prejudica seriamente a pesquisa de informações. O usuário
com freqüência não acha o que está procurando e apela para o campo de pesquisa por palavra-
chave.
Não. Para o usuário testado, as nomenclaturas não sugerem o conteúdo que está por trás
delas, não é intuitivo.
5. “Hoje, você encontra dificuldades ao navegar no site? Quais?”

108
O usuário diz encontrar algumas dificuldades. Alguns setores, como o centro

especializado em seleção utilizam as ferramentas de blog, o qual, segundo ele, as pessoas
responsáveis não parecem muito treinadas em alimentar o site com informações. O usuário diz
que muitas vezes editais não aparecem na home do site, o que pode prejudicar algum
interessado em se candidatar às vagas, além disso, ele realça que a maioria das informações
estão bastante restritas a usuários com um certo grau de conhecimento de como funciona a
universidade de dentro, e não deveria ser dessa forma.

Mariana Almeida

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Mariana Almeida

Enviado por

Direitos autorais:

Formatos disponíveis

LISTA DE FIGURAS

Figura 1 - Exemplo de organização de interface muito utilizada na Internet ................ 20

Figura 2 - Utilização da marca a parte superior esquerda no site da UFPel e no site da

Figura 3 - Busca posicionada na parte superior no site da UFPel. ................................. 22

Figura 4 - Busca posicionada na parte inferior no site da USP....................................... 22

Figura 5 - Navegação Global e Local do site da USP. ...................................................... 23

Figura 6 - Identificação de breadcrumbs no site da Universidade Federal de Santa

Figura 7 - Rodapé do site da UFPel. ................................................................................ 25

Figura 8 - Sitemap do site da UFPel feito com post-its. ................................................. 33

Figura 9 - Home do site da Unisinos ............................................................................... 40

Figura 10 - Detalhe do um dos itens do menu lateral do site da Unisinos .................... 41

Figura 11 - Home do site da UFRGS ................................................................................ 42

Figura 12 – Menu de destaques do site da UFGRS......................................................... 43

Figura 13 - WebSort.net: site utilizado para a realização do card-sorting ..................... 44

Figura 14 - Menus identificados no site da UFPel. ......................................................... 46

Figura 17 - O item "notícias" aparece fragmentado em duas partes diferentes do site

Figura 19 - Sitemap de até dois níveis de navegação do site da UFPel.......................... 50

Figura 20 - Wireframe da página inicial da UFPel .......................................................... 49

Figura 21 - Tabela mostrando escolhas dos usuários em porcentagem. ....................... 70

Figura 26 – Sitemap da nova Arquitetura de Informação .............................................. 79

Figura 27 – Esboços no papel do wireframe da nova Arquitetura de Informação da

Figura 28 – Wireframe da nova Arquitetura de Informação da home .......................... 81

Figura 29 – Topo da no A.I. da home.............................................................................. 82

Figura 30 – Menu principal com a categoria Ensino aberta ........................................... 82

Figura 31 – Menu principal com a categoria “Pesquisa e Extensão” aberta ................. 82

Figura 32 – Menu principal com a categoria “Comunicação” aberta ............................ 83

Figura 33 – Menu principal com a categoria “Institucional” aberta .............................. 83

Figura 34 – Menu principal com categoria “Serviços” aberta ........................................ 83

Figura 35 – Menu principal com categoria “Fale Conosco” ........................................... 83

Figura 36 - Banners apresentados no site atual abaixado de Agenda.. ......................... 84

Figura 37 - Comunicados exibidos na página atual do site ............................................ 84

Figura 38 – Conteúdo da home da nova A.I. .................................................................. 85

Figura 39 – Mapa do site e rodapé da home.................................................................. 86

Figura 40 - Comparação entre o wireframe do site atual e o wireframe construído

1.1 Site Institucional ............................................................................................. 12

e explicitado a partir de agora........................................................................................ 61

PROJEÇÕES FUTURAS ..................................................................................................... 90

[...] um site só será bem-sucedido se der suporte adequado às intenções e ao

O Capitulo Quatro trará o resultado dos testes de usabilidade, as análises do card-sorting, a

1.1 Site Institucional

Pode-se perceber esse caráter organizacional instituído no site da Universidade Federal

1.2 Arquitetura de Informação, Experiência do Usuário e Usabilidade

A Arquitetura de Informação (AI) começa a fazer parte da realidade da web no momento

A questão é que, quando estamos usando a Web, cada dúvida aumenta o

(...) pode ser questão de vida ou morte. Na guerra, um soldado em um bombardeio

Este é um dos quesitos mais importantes de um site bem construído, a usabilidade é

1.3 Foco no usuário e outros focos existentes

[2] Design centrado no designer: “o resultado de um design centrado no designer é,

[5] Design centrado no comportamento: se preocupa em prestar atenção no que o

[8] Design centrado na ação: as funcionalidades do produto devem estar sempre

1.4 Como navegamos pela internet

As pessoas tendem a gastar pouco tempo navegando atentamente em páginas na web,

1.5 Aspectos importantes para a compreensão dos usuários

exista uma padronização, pois “quando utilizamos soluções consagradas, diminuímos as

A marca é um exemplo de posição de elemento que se tornou padrão, praticamente

Em um site com grande densidade informacional, como é o caso de um site institucional,

Figura 5 - Navegação Global e Local do site da USP. FONTE: reprodução do site.

Os breadcrumbs também são importantes para a navegação do site e caracterizam-se por

Figura 6 - Identificação de breadcrumbs no site da Universidade Federal de Santa Catarina.

Outra convenção de interface bem usada é a de navegação de rodapé. Nela

Figura 7 - Rodapé do site da UFPel. FONTE: reprodução do site.

A propaganda do conteúdo mostra as partes mais novas, melhores ou mais populares

1.6 Fatores que prejudicam a experiência do usuário