Formação Tecnológica - Referenciais de Formação

213 - Audiovisuais e Produção dos Media

213006 - Técnico/a de Multimédia

MÓDULO UFC D 9 95 8 Carga Horária

11 Ar quit et u r a de in fo r ma çã o 25 horas – 14 Blocos

Objetivos

▪ Identificar as especificações dos diversos suportes multimédia.

▪ Identificar as necessidades e comportamentos dos utilizadores.
▪ Reconhecer a importância de uma boa arquitetura de informação e o impacto que pode ter numa aplicação
multimédia.
▪ Selecionar, organizar e distribuir a informação a integrar numa aplicação multimédia.
▪ Conceber aplicações multimédia tendo em conta as principais normas de usabilidade e acessibilidade.

Conteúdos
▪ Arquitetura de informação
▪ Necessidades e comportamentos dos utilizadores
▫ Modelos de informação
▪ Princípios básicos da arquitetura de informação
▫ Estruturas e hierarquias de informação
▫ Tipos de sistemas de navegação
▫ Sistemas de pesquisa de informação
▫ Principais regras de usabilidade e acessibilidade
▫ Teste de usabilidade
▫ Avaliação heurística
▪ Desenvolvimento de um protótipo
▫ Etapas e estrutura
▫ Normas de usabilidade e acessibilidade

Conteúdos
Arquitetura da informação O termo, arquitetura da informação foi criado em 1976 por Saul Wurman.
Segundo Peter Morville e Louis Rosenfeld, arquitetura da informação é “a arte e a ciência de organizar
Ambiente de informação não pla- a informação para ajudar as pessoas a satisfazer suas necessidades de informação de modo efetivo (…)
neado o que implica organizar, navegar, marcar e pesquisar mecanismos nos sistemas de informação.” A
Informação é o resultado do processamento, manipulação e organização de dados, de forma que repre-
sente uma modificação no conhecimento do sistema (pessoa, animal ou máquina) que a recebe.

A arquitetura da informação deve tornar clara a missão e visão de uma interface, equilibrando as ne-
cessidades da organização que o promove e as necessidades dos utilizadores. Deve também identificar
o conteúdo e as funcionalidades do site, especificando como os utilizadores vão encontrar informações
por meio da sua organização, rotulagem e sistemas de buscas. E prever como o site vai mudar e evoluir
ao longo do tempo.

Objetivos da organização do conteúdo e arquitetura da informação

‖ Prover as condições para o utilizador chegar de um ponto a outro, levando em conta diferentes
Ambiente de informação planeado modos de chegar às informações a partir do ponto em que está.
‖ Comunicar as relações entre os elementos, considerando desde o contexto geral de informações
às suas unidades.
‖ Comunicar as relações entre o geral e cada página / ecrã que o utilizador vê. (Garret, 2003)

Quando bem estruturada, a arquitetura da informação evita problemas, como

‖ Navegação improdutiva – O utilizador desloca-se lentamente pelas páginas sem encontrar o que
procura, ou tem dificuldade em decidir que link selecionar diante de uma série de opções, para
traçar seu percurso. A dificuldade aumenta ainda mais quando não consegue localizar onde está
na estrutura geral.
‖ Dispersão em relação aos objetivos iniciais da navegação – O utilizador percorre caminhos muito
diferentes dos que pretendia, perde-se na pesquisa e esquece o que procurava. Algumas pes-
quisas mostram que os utilizadores preferem os links no meio do texto aos conjuntos de links
agrupados numa área da página.
‖ Excesso de informações na navegação - gera esquecimento do percurso para chegar a um ecrã.
‖ Estrutura difícil de entender – Ocorre quando o utilizador não consegue ter uma visão muito
clara dos canais e dos percursos possíveis. Especialistas afirmam que a estrutura mais plana,
com poucas camadas, facilita o uso por visitantes inexperientes.
Um estudo de McDonald & Stevenson (1998) comparou três tipos de estruturas: hierárquica (distribuída
em níveis), não-linear (inúmeros links conectados a outros na mesma camada, mesmo site) e mista
(estrutura hierárquica + links de referência). A estrutura mista foi a preferida dos utilizadores, por
balancear a rigidez da taxonomia com maior número de opções. Um mapa do site também auxilia a
visualização dos percursos possíveis entre páginas.
As possibilidades de apresentação e organização do mesmo conteúdo são infinitas. Normalmente tam-
bém são inúmeros os caminhos que conduzem um utilizador a uma informação. A construção de cate-
gorias, por exemplo, é um modo de organizar as informações, na medida em que o posicionamento de
cada informação na estrutura leva em conta sua lógica de relacionamentos.

2
Bases da conceção de caminhos para navegação entre informações em Mídias digitais:
‖ Conjugar as informações e conteúdos aos objetivos da interface.
‖ Optar pela abordagem concetual e editorial, com o planeamento da experiência do utilizador e
do modo como as informações estabelecem processos de comunicação / interlocução / reação.
‖ A antecipação dos modelos mentais dos utilizadores, padrões de comportamento em relação às
informações, dispositivos, funcionalidades e circunstâncias de acesso (na rua, no escritório, em
casa, em viagem).
‖ Relação adequada entre a extensão e a profundidade das áreas de informação.
‖ Modo como as informações fluem para o público, de modo a valorizar mais ou menos as infor-
mações comerciais.
A estrutura das informações é uma representação simbólica que em si constitui uma linguagem. Ela
estabelece canais de comunicação com utilizadores individualizados, procurando antecipar os assuntos
que procuram e criar pontos de acesso precisos para sua recuperação.

Componentes da Arquitetura de Informação:

Rosenfeld e Morville, dividem a Arquitetura de Informação de um site em quatro grandes sistemas
interdependentes, cada um composto por regras próprias e suas aplicações.

Sistemas da Arquitetura de Informação:

‖ Sistema de Organização (Organization System)
Determina o agrupamento e a categorização do conteúdo.
‖ Sistema de Navegação (Navigation System)
Especifica a forma de navegar na interface.
‖ Sistema de Rotulagem (Labeling System)
Estabelece as formas de representação e de apresentação da informação, definindo os signos
visuais a usar.
‖ Sistemas de pesquisa (Search System)
Determinam as perguntas que o utilizador pode fazer e as respostas que poderá obter.

A arquitetura de Informação implica:

1. Planeamento - Planeia a estrutura da interface;
2. Organização da informação - Permite a anulação de ambiguidades da interface;
3. Navegação;
4. Usabilidade - Permite o acesso otimizado à informação pelos utilizadores;
5. Interatividade - Define a forma e as possibilidades de interação da interface.

3
Necessidades e comporta- A Arquitetura de Informação resulta da relação entre contexto, conteúdo e utilizadores.
mentos dos utilizadores
Contexto
Devemos considerar os objetivos do projeto, as políticas da empresa, a sua cultura, tecnologia disponí-
vel, assim como os seus recursos humanos. É igualmente essencial considerar os comentários de co-
laboradores, clientes, fornecedores, parceiros, etc.

Conteúdo
Todo o tipo de conteúdos que a empresa disponibiliza, tanto online como offline. Inclui textos, imagens,
gráficos, estrutura, volume de informação, mapeamento das páginas, etc.

Utilizadores
Qual o nosso público-alvo ou personas, as suas necessidades, os comportamentos de procura de infor-
mação, bem como o vocabulário usado e o nível de conhecimento sobre o seu produto/serviço.
Para aplicar a Arquitetura de Informação temos de definir bem quem são os utilizadores da informação.
Quem são eles, qual seu comportamento padrão de busca de informação e quais são suas necessidades.
Para se conhecer o problema e encontrar a solução é necessário efetuar uma pesquisa para compre-
ender as necessidades, comportamentos, experiências e motivações dos utilizadores. Essa pesquisa
faz-se através de vários métodos quantitativos e qualitativos, como entrevistas, prototipagem em pa-
pel, testes de usabilidade, testes A/B, testes de cliques, eye tracking, entre outros.
Uma vez que as necessidades de informação são diversas, tem de se fazer um entendimento mais pro-
fundo dos comportamentos de pesquisa de informação realizados pelos utilizadores. A Arquitetura de
Informação tem de fazer uma abordagem centrada no utilizador, compreendendo o seu modelo mental
e como o mesmo agrupa e categoriza o conteúdo. Os de testes de usabilidade, baseados na medição de
tarefas realizadas e na observação da interação feita pelos utilizadores permitem a orientar a Arqui-
tetura de Informação no desenvolvimento de boas soluções.
Destes testes resulta a criação do perfil do utilizador, o público-alvo, ou personas, que no fundo são
representações do tipo de utilizadores que poderão utilizar as interfaces que se irão desenvolver.

Modelos de informação Em design, os modelos mentais correspondem à compreensão, pelo utilizador / ou criador, de como um
sistema ou objeto funciona. Esta compreensão nem sempre se adapta bem ao modo como o sistema ou
objeto funciona: o que os projetistas acham que os utilizadores fazem nem sempre corresponde ao que
eles realmente fazem. Mas os projetistas procuram aproximar-se ao máximo dos modelos mentais que
levam os utilizadores a traçar percursos e a agir.
Os modelos mentais correspondem a imagens simplificadas, construídas pelos utilizadores, que condu-
zem as ações (ou interações) com a interface em uso e o sistema de símbolos que a compõe. O que torna
uma interface fácil de aprender? O que leva as pessoas a cometerem erros?
As imagens espontâneas, rápidas, das ações realizadas e a serem realizadas, bem como as de sua
relação com o conteúdo e elementos funcionais, ilustram como percebem as informações, influenciam
a navegação e a compreensão do conteúdo, e conduzem as ações e escolhas.
A antecipação dos percursos e das ações dos utilizadores está diretamente relacionada as diversas
estruturas cognitivas (ou modelos mentais) que se aplicam em relação aos sistemas de informações,
ao layout e à funcionalidade da interface.

4
 Na conceção de uma interface podem considerar-se quatro modelos mentais genéricos:
‖ A imagem que o utilizador faz do programa, incluindo o conhecimento sobre o seu próprio com-
portamento, sobre o comportamento de outras pessoas, de objetos ou de outros programas que
já usou. Se está acostumado a um modelo de processador de texto, transfere os seus conheci-
mentos e práticas de uso deste programa para o uso de um processador de texto online.
‖ A forma como os projetistas percebem / descrevem o programa e a sua relação com o utilizador.
Com a ressalva de que nem sempre os modelos que os designers têm de uma interface são
completos, consistentes, estáveis, e isentos de ideias pré-concebidas.
‖ A imagem que o programa efetivamente mostra ao utilizador, de modo que possa usá-lo intuiti-
vamente.
‖ O modelo concetual (ou psicológico) que o utilizador elabora a partir do que vê.

Estes modelos são genéricos, pois cada pessoa estrutura suas próprias variantes, mas ajudam no en-
tendimento dos sistemas de informações. Os utilizadores identificam as informações de diversas for-
mas (textos, imagens, sons, links, campos de formulários), interpreta essas informações a partir de
pistas visuais ou baseado em experiências anteriores, e procede de acordo com o seu entendimento
(nem sempre acertada, uma pequena distração ou desvio pode levá-lo a cometer um erro).
Se não consegue fazer uma imagem clara da estrutura de informações e da funcionalidade da interface,
pode ter problemas para encontrar o que procura, e sai para outro site / aplicativo com estrutura mais
clara.
No projeto da interface é possível prevenir erros de interpretação, melhorando a ergonomia do design
para evitar os mesmos e providenciar melhor informação sobre as opções para evitar erros.
Esses processos subjetivos, diferentes para cada pessoa, envolvem aspetos a ser considerados no de-
senho de sistemas de informações, como:

‖ A atenção que cada utilizador dirige aos diferentes elementos.

‖ A interpretação das informações e dos estímulos de diferentes naturezas (funcionais, visuais,
auditivos, estéticos).
‖ A capacidade de aprendizado da ação (de uso, apreensão, atividade lúdica, realização de tarefa)
a ser realizada.
‖ A modelagem das informações, da estrutura, das camadas e etapas de acesso, desdobramentos.
‖ A memória (de curto e longo prazo) da experiência de uso. Quanto mais se interage com o sis-
tema, o modelo mental vai se aperfeiçoando.
Os modelos mentais são normalmente incompletos, inconsistentes, mutáveis e sujeitos a variações cul-
turais. Por isso, para refletir o modo de pensamento e de ação dos utilizadores, evitar erros e lapsos, a
arquitetura funcional e editorial de um website ou aplicativo precisa ser testada exaustivamente em
diversas etapas do projeto e sempre depois do seu lançamento.

Princípios básicos da ar- As estruturas de navegação digitais são organizadas para que cada utilizador possa compreendê-la
quitetura de informação com rapidez e se desloque facilmente entre ecrãs e secções. Quanto mais rápido o visitante construir
um modelo mental de resposta a esta estrutura, mais fácil será seu deslocamento.
Estruturas e hierarquias de in-
formação

5
Tipos de sistemas de navega-
A arquitetura de um site pode seguir modelos como
ção
‖ Linear ou sequencial (flat model)
Define o deslocamento entre etapas ou processos com botões tipo “Próxima página” e “Página
anterior”. A compra online de uma mercadoria, por exemplo, segue uma ordem que vai desde a
identificação do utilizador e dos produtos que procura até o momento da entrega do produto e
pós-compra. O início e o final são previsíveis dentro do objetivo que os encadeia.

Neste exemplo, pode navegar-se linearmente pela apresentação dos autores do site.

A estrutura linear pode ser também classificada como “cronológica” em sites que contam histó-
rias sequenciais em vários ecrãs.
‖ Hierárquico ou arbóreo
Utilizado em sites com grande quantidade de conteúdo, liga tópicos de interesse genérico a tó-
picos mais específicos, com base na construção de uma taxonomia (classificação). As informa-
ções estruturam-se de alto a baixo, como os ramos de uma árvore, ou de baixo para cima, se-
gundo a estrutura de um banco de dados que atende às solicitações dos utilizadores.
A estrutura hierárquica pode apresentar diversas estruturas dominantes, com subordinações e
superposições para cada uma delas e configurar-se como uma estrutura polihierárquica (multi-
dimensional hierarchy model).
Estrutura hierárquica – numa loja de
decoração, a categoria genérica Segundo este modelo, pode aceder-se ao conteúdo através de diversos modos, dependendo do
“Casa”, se subdivide, por exemplo em ponto de partida. Em sites como Amazon.com, por exemplo, que as buscas e percursos podem
“Sala de estar”, que se subdivide em
categorias como “Mesas auxiliares”, organizar-se em torno de tópicos, autores, assuntos, títulos, gêneros, palavras-chave, bem como
que se dividem em novas categorias em torno de interesses personalizados.
como “Mesas de centro”, seguindo
uma ordem decrescente de ‖ Boneca aninhada (nested doll)
abrangência.
Pequenos agrupamentos seguem interesses localizados, facilitando o deslocamento: listas ani-
nhadas de sublinks vão conduzindo lateralmente ao conteúdo procurado – o utilizador toca numa
seta, abre nova lista de links, que se desdobra numa nova lista, e assim por diante. É uma opção
para médias com longas estruturas hierárquicas, pois a menor quantidade de links na mesma
camada facilita a navegação, especialmente em dispositivos móveis.
‖ Centro radial (hub and spoke)
Neste sistema as conexões são dispostas como uma roda de bicicleta – em que um conjunto de
arames convergem para um centro. O tráfego vai de um ecrã central com os principais links
O item “Brasil” deste ecrã desdobra- para as ramificações e vice-versa. Como os aplicativos no ecrã inicial de um smartphone, cada
se em três itens, assinalados a
vermelho. No mesmo site podemos secção tem autonomia, não é necessário ter navegação global em todas as páginas / ecrãs. Para
ver subitens muito mais extensos, ir para uma secção diferente da que se encontra, o utilizador precisa de voltar ao ecrã central,
que não configuram propriamente
bonecas aninhadas. ou hub.
Como economiza bastante o espaço dos ecrãs, é muito usada em dispositivos móveis e aplicativos
para a realização de tarefas, como os de redes sociais.

6
 ‖ Matricial ou em grade
Neste caso, a estrutura não é hierarquizada e segue um modelo horizontal, e o deslocamento
entre páginas não é linear.
Os “Links relacionados” (ou “Veja também”) que unem diversas páginas de um mesmo site se-
gundo algumas afinidades temáticas entre informações, podem estabelecer uma estrutura ma-
tricial.

Estrutura matricial ou em grade – pode navegar-se, horizontalmente pelas imagens de cada seção, que, em si
constituem a narrativa principal de cada ecrã.

A estrutura horizontal é comum também em sites de notícias, em que parte do conteúdo é orga-
nizado em torno de tags, que variam de acordo com o conteúdo em destaque num determinado
dia ou época.
‖ Híbrido
Tópicos genéricos ligam-se a tópicos mais específicos, ou vice-versa, de acordo com conteúdo
gerado dinamicamente pelo utilizador.
‖ Personalizado
O utilizador define as informações que quer receber ou as ferramentas do próprio site rastreiam
o percurso que o utilizador percorreu durante uma visita e selecionam o conteúdo preferido
(normalmente o mais acedido).

Na estrutura híbrida deste modelo,

as categorias mais gerais, como
Movies (Filmes), subdividem-se, por
exemplo em Movies in Theaters (Em
exibição) o que configura uma
organização vertical. Já o conteúdo
da página apresenta comentários
dos espectadores de filmes
organizados tanto pela cotação como
pela data da publicação, dois
critérios com o mesmo grau de
importância e que configuram uma
organização horizontal. Já os
produtos oferecidos mais a baixo,
com links para outros sites,
configuram uma experiência cross-
channel.
Na estrutura personalizada, numa simples página de resultados de pesquisa, vemos uma estrutura vertical
composta pelos links do web site e também uma navegação criada a partir dos termos da busca. A automação
está sujeita a algoritmos criados pelos buscadores, não pelos utilizadores.

7
 ‖ Participativo
É estruturada em torno das ações dos utilizadores e dos objetos sociais criados ou modificados
durante as ações.
‖ Cross-media (Mídias cruzadas)
Segue os encadeamentos de um ambiente amplo de informações, composto por um conjunto de
ambientes mais restritos, mídias e canais interligados, que se complementam e dependem um
do outro para compor a experiência de uso ou completar uma ideia ou tarefa. Considera a expe-
riência de acesso e uso fragmentada ou parcial em cada um, sendo que nenhum produto em si
provê a experiência completa.
O registo de um e-mail para receber uma newsletter é uma experiência cross-mídia quando há
o envio de mensagem para a caixa de correio do assinante e este precisa clicar num link para
confirmar o registo. O registo não é finalizado caso não haja confirmação.
Em canais de mídias ou canais cruzados, a manutenção de pistas visuais semelhantes em todos
eles facilita o encadeamento das ações. O uso consistente de cores, fontes, posicionamentos,
proporções, diferenciação de tipos links, permite que os utilizadores se familiarizem facilmente
com um ambiente em qualquer dispositivo.
‖ Cross-channel (ou transchannel, canais cruzados)
Considera uma estrutura de informações composta por elementos dispersos de maneira estru-
turada (criação, publicação, ação, relacionamento, recriação). O conjunto de elementos individu-
ais, cada um contribuindo à sua maneira, compõe uma experiência integrada, entre canais.
Um único canal pode ou não conter uma porta de entrada ao ambiente, e a maioria dos utiliza-
dores não percorre todos os seus pontos de contacto do início ao fim. Alguns canais permitem
que os utilizadores completem a sua experiência sem precisar de outros.
O filme Angry Birds foi lançado em 2014, mas o jogo já era conhecido antes. A Rovio, empresa
Estrutura cross-channel, em que o site criadora, oferece também séries de vídeos através das apps móveis do jogo. A criação dos sub-
está diretamente relacionado com o
jogo, a app móvel e o livro impresso. produtos da marca é influenciada pela experiência de uso do jogo, bem como pelo conhecimento
do público (global, de diversas idades) e dos seus desejos. Embora relacionados, jogos, séries e
filme compõem experiências independentes entre si.
‖ Multi-channel (multicanais)
Oferta de serviços ou experiências da mesma natureza que podem ser acedidos ou usados a
partir de inúmeros canais. Os utilizadores acedem a um ou outro e podem realizar a mesma
tarefa ou aceder à mesma informação completa.
Ou seja, um cliente de um banco acede à sua conta através do website, obtém seu extrato, mas
pode fazê-lo também numa caixa ATM, pelo telemóvel, ou deslocando-se ao banco.
‖ Alfabético
Muito simplificado, acompanha índices como glossários ou listas de nomes de pessoas, ou defi-
nições de palavras, ou de produtos dentro de uma categoria.
Estas estruturas normalmente estão presentes em partes dos canais, não são orientadoras da
navegação completa pelo canal.
‖ Ad hoc, “caótico” ou em teia
Não apresenta uma ordem aparente, os relacionamentos entre itens são mais editoriais que es-
truturais.
Os percursos são definidos pelos utilizadores que se deslocam de acordo com os seus interesses,
seguindo hiperlinks que encontram nas páginas, ou ordenações baseadas nas características
das próprias informações. Ou então por um editor, ou especialista em conteúdo, que determina
os relacionamentos entre links.

8
 É uma forma de estrutura que oferece maior risco de desorientação que as outras, no entanto
permite o cruzamento total e irrestrito de informações, pois não está condicionada a nenhum
modelo pré-definido. Testes de usabilidade mostram que há uma relação negativa entre os links
inseridos dentro de textos e os agrupados em barras de navegação. Neste caso, muitos utiliza-
dores passam por links durante a leitura sem mesmo notá-los. O uso de modelos híbridos neste
caso é mais eficaz.

Os diferentes mídias digitais normalmente combinam vários modelos de estruturas, de acordo com as
características do conteúdo que publicam, com os seus objetivos (concetuais e comerciais) e com os
modos como se relacionam com o público.
Sob o ponto de vista dos utilizadores, cada tipo de estrutura contribui para a construção de uma nar-
rativa que reflete como os interesses e modelos mentais de cada um se relacionam com os princípios
gerais que regem sua organização.

Sistemas de pesquisa de infor- Qual a importância do Sistema de busca?

mação
“Cerca de 1/3 das pessoas que nós testamos normalmente tentam a busca como as suas estratégias
iniciais, e as outras recorrem a ela quando não conseguem uma resposta seguindo os links (nave-
gando).”
SPOOL apud ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web.

Existem algumas formas clássicas de apresentação dos resultados: alfabética, cronológica, listado por
relevância, por popularidade, listados de acordo com o perfil do utilizador, etc.
Navegar consiste numa experiência de “movimento” – percorrer um caminho de um ponto de origem
até outro ponto (destino). Navegar na net é um processo interativo de constante descoberta, mas que
se pode também tornar frustrante.
No mundo real é infinita a quantidade de pontos de referência que a paisagem oferece aos seus “nave-
gadores” para se orientarem. Num site as referências têm de ser criadas. Torna-se necessário criar
“placas de informação” como numa rua. Ou seja, é necessário criar um sistema de navegação que es-
tabeleça pontos de referência e uma sinalização para orientar o utilizador no seu percurso. A inexis-
tência de um sistema de navegação faz com que o utilizador se perca ao navegar num site.
Para Rosenfeld e Morville (2006, p. 116) os “sistemas de navegação são compostos de vários elementos
básicos, ou subsistemas”. Primeiro, temos os sistemas de navegação global, local, e contextual que
estão integrados dentro das páginas web. Eles fornecem o contexto e flexibilidade, ajudando os utiliza-
dores a perceber o local em que se encontram e onde podem ir. Em segundo lugar, temos os sistemas
complementares de navegação, como mapas do site, índices e guias que existem fora das páginas de
conteúdo de navegação.

Sistema de Navegação Global, Local e Contextual

Navegação Global Onde estou? Para onde posso ir?
Para onde posso ir?
O que está próximo
Navegação local

O que está rela-

Navegação con- Para onde posso
cionado com o
textual ir?
conteúdo

9
Sistema de Navegação Complementar
Mapa do site Índice Guia

Categoria 1 A Primeiro passo

Subcateg.1, Subcateg.2, Subcateg.3 ___________________ ___________________
___________________ ___________________
Categoria 2 Segundo passo
B
Subcateg.1, Subcateg.2, Subcateg.3 ___________________ ___________________
___________________ ___________________
Categoria 3
C Terceiro passo
Subcateg.1, Subcateg.2, Subcateg.3
___________________ ___________________
___________________ ___________________

Segundo Padovani e Moura (2008, p. 87) existem 6 (seis) componentes de navegação que “trabalham de
forma integrada e interdependente e, portanto, no seu conjunto pode ser considerado um sistema”. São
eles:
‖ Áreas clicáveis – permitem aos utilizadores pressionar ou selecionar elementos através de um
dispositivo de apontamento.
‖ Recursos para identificar áreas clicáveis – permitem que as pessoas identifiquem com mais
facilidade os elementos clicáveis.
‖ Indicadores de localização – indicam a quem usa o sistema de navegação sua localização exata
dentro deste sistema.
‖ Ferramentas para auxiliar a navegação – permitem aceder às informações de maneira diferen-
ciada ao “nó-a-nó”.
‖ Ferramentas de retro navegação – auxiliam o utilizador que usa um sistema de navegação a
retroceder a um ou mais nós de navegação sem necessitar de repetir exatamente os links que
usou para chegar à sua posição atual.
‖ Feedback – informa sobre uma mudança de estado no sistema após uma ação do utilizador.

Comportamento do utilizador ao fazer uma pesquisa

Quando estão a pesquisar uma informação, os utilizadores alternam entre a navegação nos menus e a
ferramenta de busca.

Os utilizadores utilizam múltiplas interações

A pesquisa da informação não é feita num único passo, a não ser a pesquisa por um item conhecido. O
utilizador pesquisa uma informação, aprende com o resultado e refina sua pesquisa.
Normalmente é difícil ao utilizador encontrar tudo que necessita numa única vez porque ele não co-
nhece o suficiente sobre o tópico para fazer a pergunta certa.

10
Sistema de pesquisa
Estrutura Básica de um Sistema de Busca
Sistema de navegação

Interface de Busca Simples da Google.com Interface de Busca Avançada da Google.com

O que é usabilidade - User Experience UX

A Usabilidade consiste no conjunto de métodos criados para maximizar a facilidade de utilização, neste
caso de um portal ou de páginas de internet.
Esta disciplina, que coloca o utilizador no centro, tem como objetivo facilitar as suas capacidades de
aprendizagem e de execução de tarefas.
Ao eliminar barreiras na utilização de uma página de internet, estamos a tornar a página mais agradá-
vel para o utilizador e a promover futuras visitas.

“Experiência do utilizador engloba todos os aspetos da interação do utilizador final com a empresa,
seus serviços e seus produtos"
Jakob Nielsen e Don Norman
A UX foca-se em aspetos que vão para lá da facilidade de interação do utilizador. Esta disciplina, em
permanente evolução, procura otimizar a experiência dos utilizadores com as páginas, desde o primeiro
contacto.

O que é a Acessibilidade Web

Para o World Wide Web Consortium (W3C [1]) acessibilidade é o atributo através do qual “as pessoas
possam perceber, compreender, navegar e interagir com a web, e podem contribuir para a web”.
A Acessibilidade Web traduz-se pelo conjunto de normas utilizadas na conceção e construção de uma
página de Internet, para que esta possa ser acedida por qualquer pessoa, independentemente de esta
ter ou não uma deficiência.

Diferenças e relações entre acessibilidade e usabilidade:

‖ Um site que é construído com acessibilidade máxima beneficia todos os utilizadores e não apenas
os que são portadores de alguma deficiência;
‖ A acessibilidade é um subconjunto de usabilidade;
‖ Uma página de internet não é utilizável a não ser que seja acessível;
‖ Sem acessibilidade não existe usabilidade, mas existe acessibilidade sem usabilidade.
‖ Os objetivos da acessibilidade são os de aumentar a inclusão de pessoas com deficiência no
mundo digital.

11
Principais regras de usabili- Os conteúdos são o elemento mais importante de uma página de internet.
Uma das principais preocupações que se deve ter em conta na criação de uma página da internet é
dade e acessibilidade
apresentar os conteúdos de forma clara.
Os textos devem ter um tipo e tamanho de letra confortável e adequado a uma leitura simplificada.
Também os espaçamentos entre linhas devem permitir uma leitura fácil e que não canse a vista.
Os conteúdos devem ser organizados e apresentados de forma a tirar partido dos espaços em branco,
com o objetivo de simplificar a interface, melhorando a legibilidade e a procura de informação na pá-
gina.

Consistência visual
A informação relevante e os itens clicáveis (blocos de navegação principais e secundários) devem en-
contrar-se constantemente nos mesmos sítios de forma clara e previsível.
Desta forma, à medida que os utilizadores exploram a página de internet, conseguem antecipar o local
da informação e tomam a iniciativa de pesquisar os conteúdos, mesmo antes destes carregarem.
Uma vez constante a localização dos itens, os utilizadores habituam-se a essa lógica navegando de
forma mais eficaz e intuitiva.
As hiperligações da navegação na página (a navegação global) devem diferenciar-se dos outros ele-
mentos de navegação (ex.: navegação numa subcategoria do menu) e devem encontrar-se sempre no
mesmo sítio.
Os utilizadores aprendem a compreender melhor a estrutura da página se for criado um sistema de
navegação comum constante em todas as páginas.

Conteúdos de texto
O texto deve manter-se coerente em todas as páginas. Por exemplo, elementos como números de tele-
fone e/ou códigos postais, devem ter um aspeto semelhante em todas.
Exemplo:
- Números de telefone - 123 456 789, então todos os números devem ser seguir essa regra e não outra
como 12 345 67 99 ou 123456788.
A consistência visual dos textos implica também a consistência na utilização de tipos e tamanhos de
letras, os espaçamentos, as cores nos títulos, rótulos e a localização dos títulos, textos e imagens em
todas as páginas.
Esta constância tem como finalidade:
‖ Conseguir que os utilizadores cheguem mais depressa à informação;
‖ Evitar erros durante a navegação pela página;
‖ Aumentar a satisfação dos utilizadores;
‖ Reduzir a curva de aprendizagem dos utilizadores do site.

Uniformizar ações
As opções que os utilizadores podem realizar na página, devem estar de acordo com a forma como as
executam noutras páginas ou até mesmo na vida real.
Desta forma, idealmente, não precisam de memorizar nenhuma informação (mesmo que seja momen-
tânea) e escolhem as opções de forma mais rápida.
Por isso, é essencial que os elementos responsáveis por realizar ações se apresentem sempre da
mesma forma e com o mesmo tipo de funcionamento.

12
Exemplo:
- As hiperligações devem aparecer sempre com o mesmo aspeto e corresponder sempre à mesma res-
posta visual, a cada passagem do rato, de uma forma constante em e todas as páginas.
- O carrinho de compras nos sítios de comércio eletrónico é um exemplo da utilização de uma metáfora
do quotidiano para simbolizar uma ação virtual. Tanto na realidade como na internet, o utilizador adi-
ciona os produtos ao carrinho de compras e por fim efetua o pagamento.

Reconhecimento (affordance) e coerência

Os utilizadores entendem certas sequências de comportamentos e concretizam-nas melhor quando
estas podem ser repetidas sem terem que pensar. O termo affordance, cuja tradução aproxima poderá
ser “reconhecimento”, corresponde ao potencial que um objeto tem de sugerir ao utilizador a informa-
ção de como este pode usá-lo.
O conceito de affordance também pode ser aplicado nas páginas da internet. Da mesma forma que uma
maçaneta de uma porta sugere ao utilizador a ideia de que se for girada pode abrir essa porta, a apa-
rência de um objeto numa página web pode também sugerir a maneira como este pode ser usado.
O objetivo é que o utilizador percecione, através da experiência de navegação da página, que um item
com um aspeto particular realiza apenas uma determinada ação.
Assim, as opções dos menus devem ser sempre coerentes no que diz respeito às ações que resultam do
seu clique de forma a evitar que um item da página seja utilizado para realizar ações diferentes.
Uma vez reconhecido o objeto, o utilizador interioriza que um item ou figura do site com um aspeto
particular uma vez clicado realiza sempre a mesma ação.
Assim que esta lógica é assimilada pelo utilizador, ele nem precisa de ler o que está escrito no botão.
As opções destrutivas (hiperligações para apagar, remover ou cancelar algo) devem ter sempre um
aspeto diferente de forma serem distinguíveis. Por norma aparecem a vermelho.
Esta distinção é importante para que o utilizador crie a affordance de que todas as ligações que esti-
verem a vermelho resultam em ações de perda ou remoção de dados. Desta forma ele será mais cui-
dadoso das próximas vezes que encontrar ligações com uma aparência semelhante evitando carregar
nelas por engano.

Versão para impressão

As páginas da internet devem estar preparadas para que os conteúdos sejam lidos online e no papel.
Se o artigo for longo a probabilidade de os utilizadores resolverem imprimi-lo é maior do que a de o
lerem online.
Esta opção deve ser feita com uma folha de estilos CSS, especificamente para impressão em vez de
usar uma ligação que abre o mesmo conteúdo apenas numa versão diferente (otimizada para impres-
são).
No que respeita à impressão, um ficheiro CSS garante ao utilizador a capacidade de o fazer diretamente
do menu “imprimir” do navegador da internet.

Tipografia
A tipografia é uma parte fundamental da interface do utilizador, já que a maior parte do tempo que o
utilizador passa online está a ler conteúdos. Um princípio muito utilizado online é o de não fazer o
utilizador pensar, e este pode e deve também ser aplicado na tipografia, complementado com o não se
deve fazer o utilizador forçar a vista.
Uma página de internet deve ser simples de usar e para isso acontecer, o conteúdo deve ser de leitura
fácil e por isso é que é fundamental ter noções básicas sobre tipografia.

13
Tamanho do Texto
Uma das principais questões de usabilidade e acessibilidade numa página de internet é o tamanho do
texto. Os textos muito pequenos causam dificuldades óbvias de leitura pela maioria do público-alvo em
questão.
Tamanhos de letra inferiores a 12 pixéis dificultam a leitura dos conteúdos tornando-a mais lenta.
Se o nosso público-alvo incluir pessoas com idade superior a 65 anos, convém usar pelo menos o ta-
manho de 14 pixéis.
Estes são os valores os recomendados para os conteúdos de um site.
Em casos específicos, também podem ser usados tamanhos de texto mais pequenos em informações
secundárias como notas e rodapés. Nestes casos, 9 pixéis é o limite mínimo recomendável.

Espaçamento entre linhas

O espaçamento mínimo entre as linhas dos blocos de texto dos conteúdos deve ser de 1.4.
O intuito de um espaçamento maior entre linhas de texto é o de facilitar a sua leitura, reduzindo a
sensação de cansaço visual até ao fim.

Contraste entre o texto e a cor de fundo

O contraste entre a cor dos textos e a de fundo deve assegurar uma boa leitura.
Para muitos leitores, os textos podem tornar-se ilegíveis se tiverem um mau contraste entre as duas
cores, mesmo para os que não têm problemas de visão.
No que diz respeito aos valores de contraste, as recomendações de acessibilidade indicam valores di-
ferentes para textos em que o tamanho é inferior a 18 pixéis e para os que têm mais de 18 pixéis (ou
textos a negrito com mais de 14 pixéis).
Para passar no teste mínimo de acessibilidade (AA), tem de haver um rácio de contraste de pelo menos
4.5:1, e em textos maiores do que 18 pixéis esse valor deve ser de pelo menos 3:1.
Podem usar-se sistemas que calculam automaticamente o contraste entre duas cores e que indicam
se passa ou não no teste de acessibilidade:
- Colour Contrast Check - por Jonathan Snook
- Contrast Ratio - por Lea Verou

Evitar o uso de texto justificado

O texto pode ser justificado tanto à esquerda como à direita criando a sensação que está organizado.
Por vezes isto pode criar espaços irregulares entre as palavras de uma frase de modo a que o texto
fique alinhado de ambos os lados.
A existência destes espaços irregulares dificulta a leitura dos conteúdos tornando-a lenta e cansativa.
Por esta razão convém evitar este alinhamento nos textos e optar por um alinhamento à esquerda.

Aproveitar os espaços em branco para criar separação entre os conteúdos

Quando procuramos uma informação específica num site, queremos que o caminho até ela seja o mais
simples e intuitivo possível.
Se os conteúdos estiverem mal-organizados torna-se difícil chegar à informação que procuramos.
Os conteúdos das páginas devem estar espaçados para que seja claramente visível a localização grá-
fica de cada item e opções.
As zonas em branco servem para distinguir visualmente as diferentes áreas da página os conteúdos.

14
Estabelecer uma hierarquia visual
A informação apresentada em cada página deve ser organizada consoante o seu nível de importância
e para isso é fundamental que a ordem de importância de cada título seja facilmente percetível. Como
num índice, o “1” deve ter mais destaque que o “1.1” que por sua vez terá mais destaque que o “1.1.1” e
assim sucessivamente.
Os utilizadores devem ser auxiliados pelo layout (organização do espaço) das páginas com vista a en-
contrarem a informação relevante de forma rápida e direta.
No topo da página deve estar a informação mais relevante com o intuito de ser identificada rapida-
mente, devendo apresentar-se na ordem que seja mais conveniente para os utilizadores.
Por norma, as pessoas preferem a informação numa forma hierárquica, ou seja, dividida por títulos e
subtítulos para que a sua atenção se foque num nível de cada vez.
É mais fácil de implementar esta hierarquia se os cabeçalhos forem usados corretamente para separar
os conteúdos no texto (utilizando <h1>, <h2>, etc.), possibilitando manter a semântica do HTML e ainda
facilita a apresentação dos conteúdos visualmente na página.
Pode-se dar mais destaque aos títulos e subtítulos e dividir os conteúdos em blocos de informação
hierárquicos por intermédio da linguagem CSS.

Utilizar títulos descritivos

O título descritivo é mostrado na janela do navegador e é determinado no início do HTML através do tag
(etiqueta) “<title>”.
Os motores de busca assumem os títulos para identificar as páginas, além disso, o título da página de
ser coerente com os conteúdos que nela existem.

Alinhamento
No ocidente, a direção natural de leitura é feita do canto superior esquerdo para a direita e por isso é
que o alinhamento dos textos à esquerda, ou justificados, são mais fáceis de ler. Os textos alinhados à
direita e centralizados são mais difíceis de ler são porque os pontos de partida são irregulares. No caso
dos últimos, são muito usados para destacar blocos de texto mais pequenos de informação como títulos
e citações.
Nos textos justificados a questão é mais complexa, isto porque na internet a hifenização é inexistente,
o que provoca lacunas entre as palavras, criando ruído na leitura. Apenas os textos pequenos devem
ser justificados.

Tipos de letra
Genericamente falando, de acordo como W3C, no âmbito da tipografia para internet esta está dividida
em cinco tipos genéricos de fontes:
- Serifa (Serif) - Este tipo de letra carateriza-se por conter pequenos traços, ornamentos e/ou prolon-
gamentos no fim das hastes das letras.
Exemplos: Times New Roman, Baskerville, Bookman, Century, Georgia, Garamond e Rockwell.
- Sem Serifa (Sans-serif) - Tipo de letra com hastes simples e sem ornamentos.
Exemplos: Helvetica, Arial, Futura, Gill Sans, Univers e Frutiger.
- Cursiva (Script ou Brush) - Tipo de letra com caracteres inclinados e ligados, como na escrita à mão.
Exemplos: Comic Sans MS, Blackadder ITC, Lucida Handwriting e Brush Script.
- Fantasy - Tipos de letra decorativas e por norma com fraca legibilidade.
Exemplos: Papyrus, Impact, Haettenschweiler e Copperplate.

15
- Monoespaçada (Monospace) - Este tipo de letra tem sempre a mesma largura fixa e é frequentemente
utilizado para códigos de programação.
Exemplos: Courier, Prestige Elite, Fixedsys e Monaco.

Escolher um tipo de letra

Devido à maior facilidade de leitura, os tipos de letra mais utilizados nas páginas de internet são as
Serifa e Sem-Serifa. As fantasy e as cursivas são menos usadas, sobretudo em grandes blocos de texto.

Tamanho
Num navegador, o tamanho padrão do texto é 16px. Esta medida é a que garante melhor a leitura de um
texto num monitor, tendo em conta a distância existente entre este e o utilizador.
Unidades de medida: Pixel vs. EM
As unidades de medida mais usadas para o tamanho da letra em internet são a EM e o pixel.
A EM é uma medida relativa e corresponde ao tamanho do corpo quadrado da letra M de uma fonte
enquanto que o pixel é uma medida absoluta que corresponde ao menor ponto possível num ecrã.

Utilização de EM
É verdade que existem poucos utilizadores que alteram o tamanho da letra no navegador, mas existem
e são, por norma, pessoas com algum tipo de deficiência visual. Utilizar a EM como unidade de medida
do tamanho da letra, em vez do pixel, é a melhor forma de evitar que o zoom danifique o aspeto do
layout.

Design responsivo
Outra vantagem do uso de EM é o seu design responsivo pois este adapta-se a vários formatos de ecrã
(desktop, dispositivos móveis, outros), mantendo uma boa legibilidade.

Largura
O tamanho das linhas também vai interferir com o processo de leitura. Para garantir uma maior facili-
dade de leitura ao utilizador, o número máximo de caracteres por linha ronda os 65, incluindo o espa-
çamento.

Peso
Esta é a medida usada para a espessura dos caracteres. A letra pode ser normal, negrita, mais negrita
e mais fina. Existem também fontes que permitem escolher o valor da espessura de um intervalo entre
100 e 900.
- 100 – Fino
- 200 – Extra Light (Ultra Light)
- 300 – Light
- 400 – Normal
- 500 – Médio
- 600 – Semi negrito
- 700 – Negrito
- 800 – Extra Negrito
- 900 – Negro

16
Contraste
O processo de leitura num monitor é muito mais cansativo do que em papel, devido à iluminação dos
ecrãs. Uma boa forma para minimizar este facto é a utilização correta do contraste das cores do texto.
Ritmo Vertical
Também para facilitar o processo de leitura, o equilíbrio do texto é um fator importante.
Uma das melhores formas para manter o ritmo equilibrado passa por utilizar uma grelha horizontal, o
que simplifica a visualização da hierarquia de tamanho da fonte, distâncias de margens, espaçamento
e entrelinhas.

Esquema de cores
Nas páginas de internet, as combinações de cores servem não só uma função estética, mas também
para melhorar a experiência de utilização.
À semelhança do que acontece no mundo que nos rodeia, as cores ajudam a estabelecer reações visu-
ais, emotivas e de comportamento. Para o sucesso de um projeto, a escolha de um esquema de cores
adequado é fundamental.
Existem muitas formas de classificar as cores a mais comum e elementar é a que divide as cores quen-
tes (amarelo, magenta e vermelho) das frias (verde, violeta e azul).

Cabeçalhos e rodapés

Cabeçalho (Header)
Um cabeçalho é a área de topo da página, e onde geralmente se coloca a informação que estará pre-
sente em todas as páginas: logótipo, título, menu e área de pesquisa são exemplo de elementos colo-
cados nesta área. Este é importante pois funciona como uma referência chave para o utilizador que
caso se sinta perdido consegue sempre uma orientação através do recurso a este elemento.

Rodapés (Footer)
Os rodapés das páginas devem conter links relevantes e convencionados (como políticas da página,
contactos, mapas do site, e links internos) para os utilizadores que chegam à parte inferior da página.

Parágrafos
O aspeto visual do texto assume uma importância de grande relevo, pois ajuda o utilizador a orientar a
sua leitura e a identificar claramente a importância de cada entrada, assim os títulos (headings) têm
um papel importante no que diz respeito a estabelecer esta hierarquização da informação.
Se forem devidamente construídos, estes ajudam a reduzir o esforço mental dos utilizadores, quando
estes estão a visualizar a página, tudo porque estes separam os conteúdos no texto.

Navegação em página
Os utilizadores devem ter acesso aos conteúdos de um sítio de internet intuitiva e eficazmente, através
da sua navegação. A experiência de navegação deve apresentar-se de forma clara, consistente e trans-
versal a todas as páginas, uma vez que se trata da única maneira dos utilizadores navegarem entre os
menus, submenus e páginas associadas a um sítio da internet. Todos os conteúdos do sítio devem ser
fáceis de encontrar pelo utilizador, independentemente da área ou página onde se encontram. Em suma,

17
a estrutura de navegação definida para o sítio, ou portal, deve ser mantida em todas as suas páginas
para que seja coerente.
Outro tema relevante é que os conteúdos sejam de fácil acesso, quer seja através da utilização de uma
boa pesquisa, quer seja através um fluxo de navegação simples e claro e que não canse o utilizador
fazendo com esta desista de chegar ao seu destino. Durante muito tempo existiu o paradigma da “regra
dos três cliques”, que definia que a distância entre o utilizador e o conteúdo que procura nunca deve
ultrapassar os três níveis. Atualmente sabemos que não é importante se a informação está mais perto
ou distante do utilizador, mas o que é relevante é a forma de chegar até ela.
De forma a facilitar a sua visibilidade, é necessário agrupar e distinguir uns elementos da navegação
dos outros. Isto pode ser feito criando zonas de navegação primárias (técnica e teoricamente, nesta
área estão os conteúdos mais procurados pelos utilizadores) e secundárias (conteúdos complementares
que por regra não são a principal causa da consulta à página pela maioria dos utilizadores). Idealmente,
o próprio site deve fornecer feedback (informação) sobre a localização do utilizador.

Navegação Primária
A navegação primária organiza o conteúdo direcionado para a maioria dos utilizadores. O critério de
organização deve ser um equilíbrio entre o propósito do portal e as necessidades de quem procura a
informação. O tipo de conteúdo primário de um site pode ser o conteúdo secundário de outro. Tudo
depende do público-alvo, e dos objetivos que o sítio tem, por exemplo: a área de ‘Notícias’ é conteúdo
primário no sítio da Internet de um jornal, enquanto a secção de ‘informações sobre a empresa’ será
conteúdo secundário. Num sítio marcadamente institucional, essa ordem seria inversa.

Navegação secundária
Navegação secundária é o conteúdo de segunda importância para o utilizador, ou no primeiro impacto
da página. Qualquer conteúdo que não se encaixe nos objetivos primários do site, mas que possa ter
alguma relevância para o utilizador, ou que implique um acesso repetido, pode ser colocado na nave-
gação secundária. Áreas sobre “Quem Somos”, “Anunciar”, ou “Ajuda”, ou até componentes como “área
do cliente”, “Perguntas Frequentes”, etc.

Fornecer sempre as opções de navegação

A navegação principal deve ser constante e transversal a todas as páginas. É de evitar a existência de
páginas sem elementos de navegação, pois estas constituem-se num “beco sem saída”. Assim, as op-
ções de navegação principais não devem estar escondidas, mas sim visíveis. Quer isto dizer que há
elementos da navegação que parecem visíveis e que fazem com que o utilizador seja obrigado a passar
o rato, em cima de cada opção de navegação, para que este entenda qual delas corresponde ao conteúdo
que procura. Em suma todos os ícones que sejam meramente gráficos e não despoletem qualquer ação,
devem estar claramente identificados como inativos, por exemplo através da utilização de uma cor
mais esbatida.
A possibilidade de aceder ao menu de navegação principal deve ser facultada a qualquer altura e em
qualquer página em questão. Mesmo nas páginas de erro, o utilizador deve conseguir navegar para
qualquer página tanto pelo menu principal como pelo espaço destinado à pesquisa de informação, evi-
tando-se desta forma o tal “beco sem saída”.

Ser consistente em todas as páginas

Os elementos de navegação principal e secundária deverão figurar sempre nos mesmos locais ao longo
de todas as páginas de internet.

18
À medida que vão explorando e conhecendo melhor o site, os utilizadores começam a tentar prever
intuitivamente a localização da informação no ecrã mesmo antes dela carregar. Se os itens aparecerem
sempre nos mesmos sítios, os utilizadores habituam-se a essa lógica e interiorizam-na, podendo nave-
gar de forma mais rápida.
Na navegação global as ligações devem ser facilmente distinguíveis dos outros elementos da navega-
ção, como por exemplo, a navegação de um submenu.
Os utilizadores compreendem melhor a estrutura de um sítio da internet, se este tiver um sistema de
navegação constante.

Utilizar títulos de menus claros e autoexplicativos

A perceção dos textos nos menus deve ser evidente para que o utilizador entenda imediatamente quais
os conteúdos a que vai aceder quando clicar numa determinada ligação.
Deve-se fugir, dentro do possível, ao uso de abreviaturas nos menus principais.
Ocasionalmente, o nome do item pode não ser suficiente para que os utilizadores entendam qual a
ligação de destino. Nestes casos, pode-se recorrer à técnica de “speaking navigation”, que consiste em
acrescentar uma etiqueta com uma breve descrição de texto a cada item do menu.

Assegurar que os itens clicáveis parecem clicáveis

As opções clicáveis (links e botões) devem-se evidenciar e distinguir dos outros elementos que figuram
na página. Esta distinção faz-se através do uso de cores diferentes, mas também pode ser feita com
um sublinhado ou itálico.

Botões
Os botões, que normalmente têm uma cor de fundo diferente e se apresentam num formato quadran-
gular ou retangular, devem ter uma imagem que sugira a ideia de que são clicáveis e que assinale os
limites da área interativa.

Tabs (Separadores)
Entende-se por “Tabs” abas de navegação. Estas devem apresentar-se visualmente de forma clara tal
como o seu nome indica. É importante que o utilizador entenda qual a aba de navegação que está ativa.
Isto faz-se através do uso de uma cor de fundo de texto igual à cor da aba que está selecionada e ativa.
A distinção entre abas é particularmente relevante quando existem apenas duas abas. Quando existem
3 abas não há dúvidas, porque há sempre uma que tem a cor diferente das outras duas que são iguais.

Assegurar que os itens não clicáveis não se parecem com links

Se um texto não tiver uma ligação, deve-se evitar o uso do sublinhado. A experiência de navegação do
utilizador ensinou-o que, por norma, o que estiver sublinhado é sempre uma ligação para outra página.
Isto significa que independentemente de um texto estar sublinhado e não ter qualquer ligação, muitos
utilizadores vão tentar clicar e sentir-se frustrados por não a conseguirem abrir.
No corpo do texto não devem ser usadas cores diferentes em palavras frases ou parágrafos. O texto
deve ser constante mantendo a cor em todas as páginas, de forma a evitar que o uso de uma cor dife-
rente num texto sugira a existência de uma ligação para outra página que efetivamente não existe.

19
Assegurar espaçamento extra nos links
Relativamente aos links, que por norma são muito pequenos, é necessário criar um espaçamento extra
(chamado padding) à volta das ligações. Isto surge com o propósito de simplificar a navegação porque
as ligações que surgem em apenas um caractere, são demasiado estreitas e difíceis de clicar.
A área clicável das ligações só cresce, e dá uma melhor apresentação visual ao utilizador, através da
criação de um espaçamento extra. Este garante que os utilizadores de smartphones conseguem acertar
confortavelmente com o dedo nas ligações correspondentes à paginação, não necessitando de fazer
zoom (aproximar a imagem) nem correr o risco de clicar sem querer na ligação do lado.

Garantir acesso à homepage a partir de todas as páginas

Todas as páginas do sítio devem permitir um acesso fácil e direto à página principal.
A experiência de navegação dos utilizadores habituou-os a voltarem à página principal sempre que
queiram iniciar uma nova tarefa ou reiniciar a tarefa que estavam a fazer. Estes devem poder voltar à
página principal de forma rápida e intuitiva.
A imagem ou logótipo do sítio tem que ter uma ligação para a página principal. Ainda assim, há muitos
utilizadores que não têm um nível de experiência de navegação tão elevado e é precisamente a pensar
neles que deve ser incluído, no menu principal, uma ligação para aceder à página inicial do sítio.
Essa ligação deve estar escrita em português: “Página Inicial”, ou “Início” em vez de “Homepage” ou
“Home”. O uso de uma imagem como ligação para a página inicial deve ser feito para que seja claro o
seu propósito.

Texto dos links deve fazer sentido quando lido fora do seu contexto
As ligações devem apresentar-se para que os utilizadores as compreendam e antecipem o seu propósito
antes de clicarem.
Por vezes, o uso de termos simples e demasiado explicativos como “clique aqui” pode revelar-se con-
traprodutivo na medida em que quando lido fora do contexto não dá nenhuma informação adicional.
Existem utilizadores com necessidades especiais que dependem de sistemas de leitura de ecrã e que
ativam a opção de ler apenas as ligações na página ignorando o resto.
Desta forma, em vez de termos as seguintes ligações: “Para registar uma nova conta, clique aqui” –
devemos usar ligações que digam: “Registe uma nova conta”, identificando imediatamente a ação que
se vai realizar.

Texto dos links deve refletir o título da página de destino

As ligações devem ter textos consistentes com o título ou o cabeçalho principal da página de destino.
Desta forma, os utilizadores devem entender imediatamente que chegaram à página que pretendiam
depois de clicarem numa ligação.

Evitar o uso de carrosséis

Após a realização de testes a utilizadores, constatou-se que a utilidade dos carrosséis é quase nula.
Por norma, os utilizadores percecionam o primeiro ou o segundo item do carrossel e continuam a na-
vegar fazendo descer a página com o rato (scroll) para ver o que falta da página. As outras imagens ou
figuras do carrossel têm por norma uma visibilidade muito reduzida. Isto é um exemplo do que não fazer

20
se pretendermos que estes conteúdos sejam vistos pelos utilizadores na página. Eles devem estar aces-
síveis e visíveis, sem haver a necessidade de usar a navegação extra proporcionado pelo carrossel nem
ter de esperar que este mude a visibilidade dos conteúdos que vai apresentando automaticamente.
Se por alguma razão o uso de um carrossel for essencial, existe um conjunto de regras cujo cumpri-
mento é desejável:
- Dar visibilidade e facilidade de acesso aos controlos de navegação;
- As setas do teclado devem permitir navegar pelo carrossel;
- Deve ser clara a indicação de qual o item que está a ser visualizado e quantos mais existem no car-
rossel. Isto pode ser feito através do uso de uma lista de thumbnails (miniaturas) que indique o item
atual; uma indicação descritiva que mostre que estamos, por exemplo no item "1 de 4", em que "1" é o
item atual e "4" é o total de itens do carrossel; ou pode-se usar uma pista visual que permita perceber
o número total de itens e qual o item que estamos a ver (ex.: utilização de círculos num dos cantos
inferiores do carrossel);
- Se a rotação automática estiver ativa, deve parar mal o utilizador pare o rato em cima do carrossel.
No caso de o utilizador estar a navegar com o teclado, a rotação deve parar automaticamente assim
que seja feito foco no carrossel.

Localização do utilizador
O utilizador deve ser constantemente informado da sua localização, por intermédio de um apontamento
(feedback) visual evidente no menu, assinalando a página onde este se encontra.
A navegação do tipo “breadcrumb” (navegação por categoria) pode complementar essa informação caso
haja mais de dois níveis hierárquicos de navegação.
Desta forma, o utilizador consegue reconhecer a página onde está, assim como a sua localização na
estrutura do sítio da internet.

Fornecer feedback nos elementos clicáveis

Para lá da necessidade dos itens clicáveis se distinguirem com facilidade relativamente a outros não
clicáveis, deve-se dar também um esclarecimento (feedback) contextualizado quando o utilizador
passa o rato ou as setas do teclado em cima dos itens clicáveis.

Grelhas
O sistema de grelhas é usado para criar layouts de páginas através de uma série de linhas e colunas
que permitem esquematizar o conteúdo.
Um sistema de grelhas deve incluir um sistema responsivo de grelhas que redimensione adequada-
mente, até 12 colunas, o layout em função do tamanho do ecrã do dispositivo. Este sistema deve incluir
classes pré-definidas que permitem opções simples de layout e mixins capazes de gerar layouts mais
semânticos.

Botões
Os botões são atualmente uma das formas mais usadas na interação do utilizador com as páginas de
internet.

21
Posicionamento
Os botões devem colocar-se à direita dada a sua comprovada eficácia.

Tamanho
As áreas dos botões são constituídas por duas partes: a parte clicável, chamada de superfície ativa e a
outra parte sem qualquer ligação conhecida por dead pixel. (pixel morto).
Por norma, um botão de maiores dimensões é mais fácil de usar, mas isso não significa que esta pro-
porção seja escalável, ou seja aumentar simplesmente um botão não significa aumentar a sua usabili-
dade, antes pelo contrário. Um botão enorme e de uma cor disruptiva não significa necessariamente
mais eficácia; o estímulo visual provocado pode distrair o utilizador e incitar ao clique sem especificar
o seu objetivo.
Em suma, o tamanho do botão deve ser suficiente para este ser facilmente interpretado no contexto da
página onde se encontra o utilizador.

Tabelas
As tabelas têm como um papel muito importante para a usabilidade de uma página de internet, pois
estas ajudam os utilizadores a visualizarem e facilmente compararem vários tipos de informação. Para
que estes objetivos sejam cumpridos é necessário assegurar que a leitura e interpretação dos dados é
fácil e intuitiva, distinguindo por exemplo as diferentes linhas através do recurso de cores alternadas.
Em http://www.jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns encontra boas referência
na construção de padrões de tabelas com bons padrões para visualização de informação.

Mensagens complementares

Feedbacks e erros
Uma questão importante para o utilizador e que deve ser usada como boa regra de usabilidade é escla-
recer sempre o utilizador (dar feedback) sobre as ações bem, ou malsucedidas, dando indicação do que
pode ser feito para corrigir as que resultaram em erro, através do envio de mensagens de erro e de
sucesso.
O utilizador deve percecionar imediatamente as cores e os ícones das mensagens de sucesso e de erro.
Por norma o verde representa sucesso enquanto que o vermelho significa que algo correu mal e há um
erro. Não nos devemos cingir apenas às cores para distinguir a informação erro/sucesso, por isso é
essencial incluir iconografia ou que a própria mensagem contenha os termos “erro” ou “sucesso”.
‖ Fornecer feedback do resultado das ações do utilizador
‖ Mensagens de erro
‖ Localização das mensagens
‖ Visibilidade das mensagens
‖ Mensagens de sucesso
‖ Páginas de erro (404)
‖ Mensagens inline
Para mais informação consulte: https://usabilidade.gov.pt/mensagens-complementares

22
 Formulários
A principal forma de interação dos utilizadores numa página de internet, e especialmente em portais
públicos, são os formulários e neles residem alguns problemas de usabilidade.
Os formulários e o seu preenchimento devem ser intuitivos para os utilizadores, evitando bloquear o
seu caminho e facilitando a concretização dos seus objetivos.
Relativamente ao preenchimento do formulário, é importante que, para além de simples, este apenas
tenha os campos necessários. Em relação à componente visual, é importante respeitar as convenções
e padrões mais comuns, a não ser que algo o justifique. Assim, devemos evitar elementos dissonantes,
como campos de preenchimento estilizados, pois estes podem provocar dúvidas nos utilizadores.
Um exemplo é a utilização de um design diferente do que é considerado standard nas checkboxes e que
podem depois ser confundidas com botões rádio sendo que estes têm objetivos e funções diferentes.
Devemos também considerar sempre que a principal função do formulário se centra na submissão de
Para mais informação consulte: informações. Assim, é necessário garantir a diferenciação do botão submeter das outras ações secun-
https://usabilidade.gov.pt/formu- dárias, como o botão de Cancelar, para que os utilizadores não cliquem no botão errado por engano e
larios percam os dados que acabaram de inserir.

Pesquisa
Devido à densidade da informação dos sítios de internet de organismos públicos, muitos têm na pesquisa
a primeira interação com os utilizadores, sendo por essa razão fundamental permitir que a pesquisa se
apresente como uma verdadeira alternativa à navegação por menus.
O tipo e complexidade de informação de um sítio de internet de um organismo público, obriga a que
muitas vezes os dados que o utilizador procura se encontrem arrumados em várias áreas e nem sempre
as mais óbvias para o utilizador, por isso, também aqui a pesquisa assume um papel fundamental ao
apresentar as várias pastas onde se encontra a informação que o utilizador procura.
Por fim, é preciso ter a noção que as nomenclaturas usadas pelos serviços públicos nem sempre são
do conhecimento do cidadão por isso é imprescindível que a pesquisa tenha isto em consideração atra-
vés do recurso a sinónimos e tags.
Em muitos sítios da internet, esta área é a primeira e a última a ser visitada pelo utilizador, por isso é
muito importante não só ela estar bem visível.

Resultados ordenados com base no contexto dos conteúdos

Por norma, os resultados da pesquisa estão ordenados por relevância, no entanto, há ocasiões onde a
apresentação por ordem alfabética ou cronológica poderá fazer mais sentido.

O que fazer quando a pesquisa não origina resultados

Nestes casos, o utilizador deve receber a informação que o resultado da sua pesquisa não originou
nenhum resultado. Mais, também devem ser dadas ajudas para que este tenha mais sucesso na sua
próxima pesquisa, minimizando desta forma a sua sensação de frustração.

Tornar a pesquisa visível

Quando o utilizador precisa de fazer uma pesquisa no sítio da internet, não deve ter de começar por
pesquisar o campo de pesquisa. Por outras palavras, o formulário de pesquisa deve ser bem evidente.
Para que tal aconteça, aconselha-se que este se encontre no topo da página.
Se a caixa de pesquisa for aberta através de um ícone ou link, devemos permitir que o utilizador faça
a pesquisa imediatamente, sem precisar de fazer um novo clique.

23
Teste de usabilidade A usabilidade mede a eficácia, a eficiência e a satisfação com que um utilizador pode realizar um con-
junto específico de tarefas.
Análise de usabilidade de um site com base num sistema de boas práticas - Analistas de usabilidade
avaliam o site, investigando possíveis problemas, e depois comparam as suas conclusões.

O que é teste de usabilidade?

Método para detetar problemas na interação do utilizador com um produto e compreender melhor a
interação do utilizador com um produto, entre os quais:

‖ Inadequação
‖ Inconsistência,
‖ Resposta inesperada
‖ Complicação
‖ Ambiguidade

Caraterísticas e objetivos:
‖ Método empírico (envolve utilizador)
‖ Principal objetivo: validar as soluções de interface
‖ Realizado com participantes com perfil do público-alvo
‖ Método: observação da interação do utilizador com produto
‖ Avaliar o entendimento da Interface e dos fluxos projetados - modelos mentais
‖ Avaliar situação
‖ Receber feedback sobre o design
‖ Identificar pontos críticos da interação / Entender a situação real de uso
‖ Correção dos erros detetados / descoberta de padrões e sugestão de melhorias

Tipos de testes de usabilidade?

‖ Formativo / Sumativo
‖ Exclusivo / Comparativo
‖ Qualitativo / Quantitativo
‖ Coletivo / Individual
‖ Livre / Estruturado
‖ Em campo / Em laboratório

24
Lista de verificação de usabilidade – Exemplo - https://usabilidade.gov.pt/lista-de-verificacao
Esta lista de verificação permite identificar de uma forma fácil e simples se o seu sítio na internet
cumpre as principais regras e recomendações de usabilidade, sem necessidade de grandes conheci-
mentos técnicos.

1. Desempenho
■ A página tem um tempo de carregamento adequado.
■ O contraste entre o fundo e a fonte do texto é adequado.
■ O tamanho e estilo da tipografia são nítidos e fáceis de ler.
■ O sítio está preparado para gerar páginas de erro. (i.e. 404 - Página não encontrada, etc.)
■ Os conteúdos estão otimizados para dispositivos móveis.

2. Navegabilidade
■ Existem ajudas visuais que identifiquem a localização na estrutura do site. (Breadcrumbs, etc.)
■ Os serviços disponíveis do site estão devidamente assinalados e identificados.
■ Os links são consistentes e fáceis de serem identificados.
■ Os links são claros e identificam o destino.
■ As páginas do site estão identificadas e nomeadas. (i.e., nome da página que surge no navegador)
■ O sítio está preparado para compatibilidade com todos os navegadores. (i.e., Cross browser)
■ O url da página é claro e facilmente memorizável.
■ É possível aceder diretamente à página principal em qualquer zona do site. (i.e., homepage link)
■ O botão Voltar está sempre presente nas páginas.
■ Os elementos clicáveis estão claramente identificados como passíveis de ser acionados.

3. Design
■ O design é intuitivo e apelativo.
■ O design está preparado para todos os dispositivos de navegação. (i.e., web design responsivo)

4. Formulários e mensagens
■ As mensagens de erro são claras e percetíveis.
■ Os formulários funcionam corretamente (São apresentadas mensagens de submissão com su-
cesso ou de erro).
■ Os campos obrigatórios estão devidamente assinalados.

5. Organização da informação
■ A organização das páginas do site é consistente através de toda a estrutura. (i.e., estilo de nave-
gação e arrumação do conteúdo).
■ Os ícones representam claramente as suas ações e têm a propriedade ALT definida.
■ A informação relevante encontra-se destacada.
■ O espaçamento entre linhas é adequado.
■ Os textos estão redigidos de acordo com a perspetiva do cidadão destinatário do serviço.
■ Os títulos são claros e coerentes com o conteúdo.
■ Não existem anúncios ou pop-ups intrusivos.

6. Disponibilização de serviços
■ Existe informação sobre as várias fases do processo.
■ A ajuda é clara e está perfeitamente visível.
■ A informação é simples e objetiva.

25
Avaliação heurística Análise Heurística - Baseada na experiência / expectativas do especialista
Também conhecidos como métodos de inspeção, ou de prognóstico, caracterizam-se pelo facto de o
utilizador não participar diretamente nas avaliações.
Requer a presença de um especialista, que explorará a interface, a fim de encontrar problemas de
usabilidade.
Além da identificação dos problemas, os avaliadores fazem sugestões de correção.
Tem como resultado um relatório formal dos problemas identificados e as sugestões de melhorias.

Jakob Nielsen, no livro Usability engineering, propõe um conjunto de dez heurísticas

de usabilidade:

Caraterísticas
Regras
1. Visibilidade e re- 1. É um método rápido e
conhecimento do barato para analisar a
estado ou con- usabilidade de um pro-
texto atual do duto / website/sistema.
sistema (NIELSEN, 2005a; 2005b);
2. Compatibilidade
com o mundo 2. Destaca-se pela eficiên-
real cia no levantamento
3. Controle e liber- precoce de problemas
dade do utiliza- de usabilidade;
dor
3. Dispensa o uso de um la-
4. Consistência e boratório específico e
padrões não envolve utilizado-
res;

5. Prevenção de er- 4. Recomenda-se que a

ros análise seja realizada
por especialistas em
usabilidade, porém nada
6. Reconhecimento
impede que utilizadores
ao invés de me-
estudem os critérios de
morização
avaliação e realizem a
análise. (NIELSEN, 2005a;
7. Flexibilidade e 2005b);
eficiência de uso
5. Nielsen (2005a) diz que o
melhor custo benefício
para a aplicação desta
8. Projeto estético análise é utilizando en-
minimalista tre 3 e 5 avaliadores.

26
 9. Diagnóstico e
correção de er-
ros

10. Ajuda e docu-

mentação

Desenvolvimento de um Protótipos podem acompanhar a realização de projetos web ao longo de todas as suas etapas, da con-
ceção à produção. Com diferentes graus de complexidade, são muito úteis para criar ideias em equipa,
protótipo modelar funcionalidades e informações e comunicar as soluções homologadas para os stakeholders -
grupos de interesse, intervenientes.
A realização de Mídias digitais acontece em etapas, ou sprints, ciclos, por profissionais com diversas
competências e a participação, cada vez mais frequente, do cliente ou de um representante do cliente
(o dono do produto). Em cada uma, o produto é pensado, testado e aperfeiçoado para se que aproxime
cada vez mais da versão que vai chegar ao público.
Para que os clientes, os representantes do público que participam dos testes, e a equipa de projeto
possa “vê-los”, usá-los, e aperfeiçoá-los, estes modelos devem se aproximar, dentro das suas possibi-
lidades técnicas, do produto a ser lançado. Para permitir seu rápido aperfeiçoamento, devem ser facil-
mente editáveis e reelaboráveis, e autoexplicativos na medida do possível, para serem facilmente com-
preendidos pelos utilizadores.
A produção de protótipos mais ou menos elaborados em cada etapa do projeto permite que o produto
evolua aos poucos, o que, afinal, não deixa de acontecer também depois do lançamento. A diferença é
que durante o projeto, o produto é alvo do aperfeiçoamento que consolida a sua estrutura concetual,
informacional, visual, funcional, enquanto o aperfeiçoamento posterior ao lançamento é mais direta-
mente relacionado à resposta do público em aspetos pontuais.

Etapas e estrutura Etapas e estrutura de um projeto web

Embora os produtos do projeto web dependam do método aplicado, em cada etapa é possível gerar um
produto mais e mais próximo do produto que vai ser lançado ao público:

> 1 - Briefing > 2 - Planeamento > 3 - Arquitetura de informação > 4 - Conteúdo > 5 - Criação > 6 - Produção
> 7 - Tecnologia > 8 – Testes > 9 - Publicação
‖ A etapa da conceção gera, junto com um briefing concetual, comercial e de marketing, um pro-
tótipo esquemático dos elementos que o produto deve ter, bem como das suas funcionalidades.
Este protótipo é muitas vezes um modelo desenhado em papel, às vezes chamado paper pro-
totype, refeito inúmeras vezes sem ónus de tempo e de recursos técnicos para sua produção.
Este protótipo inicial gera o planeamento do projeto.
‖ A etapa da arquitetura da informação gera wireframes e protótipos funcionais, modelos mais
bem elaborados da interface, que já têm funcionalidades e percursos delineados. Nesta etapa
são utilizados já os conteúdos do site.

27
 ‖ A fase de criação surge com a implementação do layout sobre a base estrutural e gera uma
versão alfa do produto, que pode ser testada com mais intensidade e rigor tanto por represen-
tantes dos utilizadores finais tanto como pela equipa de projeto.
‖ Depois dos testes e ajustes, a versão beta do produto geralmente é mais divulgada para o pú-
blico, estando ainda sujeita a intensa revisão e acompanhamento projetual. Isto aplica-se
mesmo que o site já esteja sendo usado por público amplo e o produto tenha as mesmas carac-
terísticas da versão mais finalizada.

É comum encontrarmos produtos amplamente utilizados e já lançados há longo tempo com o selo “beta”
estampado sob o logotipo. Esta prática refere-se em parte ao facto de que o produto ainda se mantém
em estado de intenso desenvolvimento, mas refere-se também ao fato de que ambientes online não
ficam nunca prontos, mantêm-se em permanente estado de aperfeiçoamento.
Por simularem o produto que vai ser lançado, os protótipos realizados ao longo do projeto web, além de
ajudarem no aperfeiçoamento do produto ajudam a tirar o foco do projeto no próprio projeto. Ou seja,
não são os produtos do projeto, esquemas, relatórios, manuais, os seus objetivos, mas as versões gra-
dualmente mais bem acabadas do produto final que afinal têm valor, tanto para quem faz quanto para
quem usa o produto online.

Bibliografia

Information architecture for the World Wide web – designing large-scale websites, Louis Rosenfeld e Peter Morville. O’Reilly, 2003
Ambient findability, Peter Morville. O’Reilly, 2005
Ergodesign e arquitetura de informação, trabalhando com o usuário – como melhorar a usabilidade de seus projetos na internet, Luiz Agner.
Rio de Janeiro: Quartet, 2006
Mental models in human-computer interaction: research issues, J. M. Carroll e J. R. Olson. Springfield, VA: U.S. Department of Commerce,
National Technical Information Service, 1987.
Organizing Knowledge – an introduction to managing acess to information, Jennifer Rowley e John Farrow. Burlington: Ashgate Publishing
Limited, 2000
Wayfindings for the mobile web, Dennis Kardys (Smashing Magazine)
Types of navigation systems (O’Reilly’s; Information Systems for the World Wide Web)
What is cross-channel, (Andrea Resmini, blog)
https://usabilidade.gov.pt/usabilidade-e-acessibilidade

28