Usabilidade Acessível

USABILIDADE ACESSVEL:
Metodologias para a Avaliao

Qualitativa da Usabilidade no
Design para a Web
Hugo Ribeiro
Mestrado em Design da Imagem
Faculdade de Belas Artes da Universidade do Porto, 2012
USABILIDADE ACESSVEL:
Metodologias para a Avaliao
Qualitativa da Usabilidade no
Design para a Web
Hugo Norberto Flix Ribeiro

Mestrado em Design da Imagem
Dissertao para a obteno do Grau de Mestre

Orientador: Miguel Carvalhais
Faculdade de Belas Artes da Universidade do Porto, 2012
AGRADECIMENTOS
A realizao desta Dissertao de Mestrado s foi possvel graas colaborao e ao contributo, de

forma directa ou indirecta, de vrias pessoas e instituies, s quais gostaria de exprimir algumas
palavras de agradecimento e profundo reconhecimento, em particular:
Ao Prof. Miguel Carvalhais, orientador desta Dissertao, pelo incansvel acompanhamento,
pelo rigor e exigncia, pela cedncia de parte da bibliografia, e sobretudo pela enorme amizade
demostrada nos perodos mais difceis da concluso desta investigao;
Ao Prof. Adriano Rangel, Director do Mestrado em Design da Imagem, pela amizade e por todo o
apoio dado ao longo da durao do referido Mestrado;
Aos colegas e amigos Jorge Ribeiro e Roxanne Leito pela colaborao, amizade e esprito de
entreajuda nos projectos conjuntos como o novo stio da Universidade do Porto e eLearning Caf,
assim como em outros que no foram incluidos nesta Dissertao;
Por fim, mas no menos importante, aos meus pais por todos os sacrificios por que tiveram de
passar para que fosse possvel eu chegar a este ponto de progresso acadmico.
Hugo Ribeiro
RESUMO
Num mundo onde a Web se tornou numa ferramenta praticamente indispensvel na vida nas pessoas,
seja como espao de comunicao, de entretenimento ou de trabalho, importante que os utilizadores
possam de facto tirar partido dessa ferramenta, que consigam utilizar os stios que a compem, que
possam retirar a informao ou o servio que desejam. O Design Centrado no Utilizador preocupa-se
com o utilizador e promove-o como o foco de qualquer design aplicado na Web. A Usabilidade avalia
esse mesmo design perante o utilizador e orienta-o de forma a que este, independentemente das suas
sensibilidades ou limitaes, possa de facto tirar partido da informao ou servio providnciado por
determinado stio.
Este projecto prope uma reflexo a designers com base nos princpios do Design Centrado no
Utilizador e na Usabilidade de stios Web, demostrando um conjunto de metodologias de avaliao da
usabilidade a que os designers podero recorrer independentemente da dimenso ou complexidade
do trabalho em mos, e sublinhando a sua importncia como ferramenta de design to vlida como
o conhecimento de linguagem de design, de programao ou do software especifico para a actividade
profissional do designer.
Palavras-Chave: Usabilidade, Webdesign, Interaco, Design Centrado no Utilizador
ABSTRACT
In a world where the Web has become a virtually indispensable tool in peoples life, either as a space for
communication, entertainment or work, it is important that users can actually take advantage of this
tool, that they can use the sites that form the Web, that they can access the information or service they
desire. User-Centered Design is concerned with the users and promotes them to the focus of any design
applied to the Web. Usability assesses this same design with users and guides it so that, regardless of
the users sensitivities or limitations, they can actually take advantage of the information or service
provided by a particular site.
This project proposes a reflection based on the principles of User-Centered Design and the Usability of
Web sites, demonstrating a set of usability evaluation methodologies that designers can use regardless
of the size or complexity of the work at hand, and stresses its importance as a design tool as valid as any
knowledge of language design, programming or software specific to the career of the designer.
Keywords: Usability, Webdesign, Interaction, User Centered Design
NDICE
Introduo
17
1. Usabilidade
1.1. O que a Usabilidade?
1.1.1. A Usabilidade segundo Nielsen
1.1.2. Outros Autores
1.1.2.1. ISO
1.1.2.2. Ben Shneiderman
1.1.2.3. Dix, Abowd, Beale, e Finlay
1.1.3. Sntese
1.2. Heursticas
1.2.1. As Dez Heursticas de Nielsen
1.2.2. As oito Regras de Ouro do Design de Interfaces
1.2.3. Princpios do Design de Interaco
1.2.4. A viso do psiclogo sobre o design da experincia do utilizador
1.2.5 Sntese
1.3. Usabilidade e Acessibilidade
21
21
21
23
23
24
24
25
26
26
31
33
38
41
43
2. Metodologias
2.1. Personas
2.1.1. Tipologias
2.1.1.1. Primrias
2.1.1.2. Secundrias
2.1.1.3. Suplementares
2.1.1.4. Clientes
2.1.1.5. Personas Indirectas
2.1.1.6. Personas Negativas
2.1.2. Processo
2.1.3. Recursos
2.1.4. Prs e Contras
2.2. Card Sorting
2.2.1. Tipologias
2.2.1.1. Card Sorting Aberto
2.2.1.2. Card Sorting Fechado
2.2.1.3. Reverse Card Sorting
2.2.2. Processo
45
46
46
46
46
46
46
47
47
47
48
48
49
49
49
49
50
50
2.2.3. Nmero de Testes Recomendado

2.2.4. Recursos
2.3. Prototipagem
2.3.2. Tipologias
2.3.2.1. Prototipagem Horizontal
2.3.2.2. Prototipagem Vertical
2.3.2.3. Prototipagem de Baixa Fidelidade
2.3.2.4. Prototipagem de Alta Fidelidade
2.3.4. Processo
2.3.6. Recursos
2.4. Percurso Cognitivo
2.4.1. Processo
2.4.3. Recursos
2.5. Avaliao Heurstica
2.5.1. Tipologias
2.5.1.1. Percurso Heurstico
2.5.2. Processo
2.5.4. Recursos
2.6. Teste de Usabilidade
2.6.1. Tipologias
2.6.2. Processo
2.6.4. Recursos
50
51
51
52
52
52
52
52
53
53
53
53
54
54
54
55
55
55
55
56
56
56
57
57
57
58
58
59
61
61
61
3. Casos de Estudo
3.1. Novo Stio da Universidade do Porto
3.1.1. Cliente e contexto
3.1.2. Projecto
3.1.3. Calendarizao
3.1.4. Metodologias
3.1.4.1. Avaliao Heurstica
3.1.4.2. Personas e Cenrios de Utilizao
3.1.4.3. Card Sorting
3.1.4.4. Prototipagem
3.1.4.5. Testes de Usabilidade
63
63
63
63
64
65
65
66
66
68
69
3.1.5. Ponto de Situao

3.1.6. Concluso
3.2. Novo stio do eLearning Caf
3.2.2. Projecto
3.2.3. Calendarizao
3.2.4. Metodologias
3.2.4.1. Teste de Usabilidade
3.2.6. Concluso
3.3. Stio do CEDA
3.3.2. Projecto
3.3.3. Calendarizao
3.3.4. Metodologias
3.3.6. Concluso
3.4. escolinhas.pt
3.4.2. Projecto
3.4.3. Calendarizao
3.4.4. Metodologias
3.4.6. Concluso
72
72
74
74
74
75
75
75
77
77
78
78
78
79
80
80
80
80
81
81
81
81
82
82
82
82
84
84
Concluso
87
Referncias Bibliogrficas
91
Abreviaturas e Smbolos
95
Anexo A: Avaliao Heurstica ao actual stio da UP

Anexo B: Personas para o projecto do novo stio da UP
Anexo C: Arquitectura de informao do novo stio da UP
Anexo D: Prottipos de Layouts para o novo stio da UP
Anexo E: Directivas de Usabilidade, ACeSSibilidade e mobile para o novo stio da UP
97
105
125
133
157
NDICE DE IMAGENS
Figura 1. Exemplo de um barra de progresso de descarregamento de um ficheiro

Figura 2. Exemplo de navegao por separadores
Figura 3. Exemplo de Breadcrumbs
Figura 4. Exemplos de caixas de pesquisa
Figura 5. Exemplo de um formulrio de compras com botes para remover item, actualizar lista de
compras e finalizar compra
Figura 6. Exemplo de um principio de reconhecimento em vez de lembrana
Figura 7. Exemplo de mensagem de erro 404
Figura 8. Exemplo de ajuda e documentao durante o descarregamento de um programa
Figura 9. Formulrio de concluso de compra de um stio de e-commerce
Figura 10. As alteraes na percepo das cores nos principais tipos de daltonismo
Figura 11. Valores por defeito num formulrio para reserva de bilhetes de avio
Figura 12. Demonstrao da Lei de Fitts
Figura 13. Uma das personas criadas para o projecto UP
Figura 14. Still de uma sesso de card sorting realizada do mbito do projecto UP
Figura 15. Prottipos de mdia fidelidade dos estudos preliminares do layout do novo stio da UP
Figura 16. Video still de um dos testes de usabilidade da 1 sesso de testes (Proposta 2)
Figura 18. Video still de um Testes de Usabilidade que tiveram lugar durante a Mostra UP
Figura 19. Video still da homepage do eLearning Caf nos Testes de Usabilidade
Figura 20. Verses desktop, tablet e mobile do stio elearning caf
27
27
28
28
29
29
30
31
32
34
35
36
66
67
68
69
70
71
76
77
INTRODUO
Os estudos de usabilidade tm ganho maior relevncia desde o advento da Web 2.0, com o crescente
recurso a contedos interactivos e aplicaes Web, que tm vindo a aumentar o grau de complexidade
das interfaces grficos. Esta evoluo, assim como uma aposta cada vez maior nos contedos orientados
para o utilizador, tornou ainda mais pertinente o recurso aos mtodos de avaliao qualitativa da
usabilidade de forma a providenciar uma experincia satisfatria ao utilizador.
Apesar de ser um tema debatido na comunidade desde 1990, a sua aplicao ainda hoje deficiente.
As razes so diversas: Os custos destes estudos; a necessidade de pessoal especializado na rea; a
pura e simples falta de tempo ou a errada assuno de que webdesigner ou o developer sabem o que
melhor para o utilizador. Jared Spool (Net Magazine, 2012) afirma que a maioria dos webdesigners e dos
developers no perdem tempo a tentar ver como as pessoas vem aquilo que desenham, comparando
com um cozinheiro que confecciona novos pratos sem nunca os provar, nem ver as pessoas a
deliciarem-se com eles.1
Os webdesigners e os developers tm a tendncia para se esquecerem que no so um utilizador tpico
da Web, confiando na sua experincia e conhecimentos para as decises tomadas relativamente s
interfaces que desenham. Ambos apresentam-se como utilizadores experientes, e as interaces que
desenham e programam, por mais bvias ou evidentes que sejam para si, nem sempre so vistas da
mesma forma por outros utilizadores. Da o conselho de Tidwell (2010): conhece os utilizadores, pois
eles no so como tu.2
Em 1994, Jakob Nielsen falava j em Usabilidade com Desconto mais tarde Usabilidade de Guerrilha
na tentativa de demonstrar que com recurso a um conjunto estrito de metodologias, um webdesigner
ou um developer poderiam realizar os seus prprios testes de forma simples e eficaz, de encontro s
expectativas dos utilizadores, mas ainda hoje evidente que muitos dos projectos de design para a Web
no contemplam o estudo da sua usabilidade.
Quando falamos de usabilidade, a melhor forma de a definir no contexto desta investigao nos dada
por Steven Krug (2000) ao afirmar que significa apenas o assegurar que alguma coisa funciona bem:
1. Todas as tradues do ingls so da responsabilidade do autor: The average developer or designer doesnt
spend any time ever watching people use the things they are designing, he complains. Its crazy. Imagine that
you were a cook who came up with all sorts of new recipes, but you never tasted any of them, and you never
ended up getting to see anybody enjoy them. How good a cook would you become? (Jared Spool, Net Magazine
2012)
2. Know thy users, for they are not you! (Tidwell, 2010)
17
USABILIDADE ACESSVEL: Metodologias para a Avaliao Qualitativa da Usabilidade no Design para a Web
que uma pessoa de mdia (ou mesmo abaixo da mdia) habilidade e experincia pode utilizar essa
coisa (...) para o propsito desta, sem ficar irremediavelmente frustrado. 3
A Usabilidade com Desconto, tal como defendia por Nielsen, contempla trs metodologias: Cenrios
e Prototipagem, Avaliao Heurstica, e Testes de Usabilidade. Neste projecto apresentaremos seis
metodologias: Card Sorting, Personas (Cenrios), Prototipagem, Percurso Cognitivo, Avaliao
Heurstica e Testes de Usabilidade; tendo em considerao que as metodologias acrescentadas podem
ser utilizadas dentro do mesmo principio de custos reduzidos, facilidade e simplicidade de execuo
o que chamamos de Usabilidade Acessvel, ou seja, algo que est ao alcance de todos.
Existem vrias filosofias do design, cada uma delas defendendo um elemento diferente como tendo
o papel central no respectivo processo. A inerente usabilidade, designa-se por Design Centrado no
Utilizador, visto defender um processo que tem o utilizador como centro das decises. Um processo
de design que se preocupa, em primeiro lugar, com o utilizador ser aquele que melhor poder criar
um objecto final capaz de responder s necessidades e exigncias deste. Esta filosofia est em tudo
relacionada com a experincia que o utilizador tem do produto e com o grau de satisfao e eficincia
com que o usa para alcanar os seus objectivos.
O objectivo do Design Centrado no Utilizador assim dar a conhecer os utilizadores e as suas
necessidades, permitindo s empresas adequar as ofertas e identificar novas formas de ajudar o
utilizador. Esta filosofia exige que o designer consiga aproximar ao mximo o utilizador da aplicao,
devendo esta, por isso, seguir o processo mental do utilizador e no, como acontece noutras
abordagens, do cliente, do webdesigner ou do developer. Um sistema realizado a pensar no utilizador e
na sua forma de interagir servir melhor as suas necessidades, aumentando a compreenso, a eficincia
e a eficcia e diminuindo a possibilidade de frustrao. Por seguir o processo mental do utilizador
entende-se no desenhar a interface em funo do que o utilizador pretende especificamente, mas sim
de forma a que este a consiga utilizar de forma eficaz , rpida e agradvel.
Outras filosofias de design variam em funo do indivduo no centro do trabalho, de entre as quais
o designado Design Centrado no Designer, tambm conhecido como Design Centrado no Ego,
possivelmente uma das mais comuns entre os webesignerr de formao artstica. Nesta, o webesigner
v-se a si prprio como o elemento mais bem preparado para tomar as decises necessrias para a
construo de um bom stio Web, um stio usvel, quer do ponto vista tcnico quer, obviamente, do
ponto de vista esttico.
Podemos ainda referir o Design Centrado na Empresa, onde esta assume o papel central no processo
de design sendo o stio organizado em funo da sua estrutura interna, o que mesmo fazendo sentido
para os seus empregados, , na larga maioria das vezes, desconhecido do utilizador, embora se deva
sublinhar que se trata de uma abordagem que poder fazer sentido na construo de uma intranet
3. Usability really just means that making sure that something works well: that a person of average (or even
below average) ability and experience can use the thing (...) for its intended purpose without getting hopelessly
frustrated.
18
Introduo
empresarial. Um bom exemplo tambm pode ser encontrado em stios onde a o cliente domina o
processo de deciso a todos os nveis e o stio desenhado medida das suas expectativas e da sua
opinio sobre as expectativas do utilizador.
Os webdesigners de formao mais tcnica do ponto de vista da programao, ou os developers,
inclinam-se para o que se pode chamar de Design Centrado na Tecnologia, em que esta invade o
espao aos mais variados nveis resultando em stios mais pensados em funo de determinadas
caractersticas media, como a animao Flash, o udio e o vdeo, assim como o excesso de
funcionalidades construdas com base em JavaScript.
Por fim, e talvez o menos comum, o designado Design Centrado no Contedo, onde uma determinado
conjunto de informao pr-existente, nem sempre adaptado Web, se assume como elemento de
organizao do stio.
Aps quase seis anos de trabalho em webdesign no id:D, Investigao e Desenvolvimento em Design da
Faculdade de Belas Artes da Universidade do Porto, foram muito poucas as ocasies onde os trabalhos
a desenvolvidos foram submetidos a avaliaes de usabilidade. E embora tenha havido sempre, da
nossa parte, um cuidado em praticar muitas das metodologias do Design Centrado no Utilizador, quer
no faseamento do projecto, quer na estruturao da interface, o captulo da avaliao da sua usabilidade
foi sendo descurado.
A inexistncia de formao prvia, nessa rea, na frequncia da Licenciatura de Design de
Comunicao, assim como a limitao oramental para a contratao de estudos de usabilidade a
entidades externas, ou pura e simplesmente a falta de tempo, so factores a considerar, mas que de todo
serviram para anular um sentimento crescente da necessidade de recorrer a avaliaes de usabilidade
aos stios a desenhados, de forma a providenciar um melhor servio aos seus clientes.
com base nessa premissa que surge este trabalho de investigao. Na necessidade de ns,
webdesigners, no s conhecermos as metodologias de avaliao da usabilidade de um ponto de vista
qualitativo, ou seja, que nos permita agir de forma que o trabalho que desenvolvemos possa no s
responder s expectativas dos clientes, como (e sobretudo) s expectativas dos utilizadores.
Este projecto teve assim como objectivos recolher e avaliar as principais metodologias e estratgias
de avaliao qualitativa da usabilidade de interfaces para stios Web e colocar estas em prtica num
conjunto de casos de estudo, de forma a verificar a existncia de mais valias para o processo de projecto,
tendo em vista uma economia de custos e tempo.
A metodologia passou por uma leitura analtica de diversas publicaes na rea do design interactivo,
do design centrado do utilizador e da usabilidade para a web, recolhendo, seleccionando, analisando e
cruzando metodologias de avaliao qualitativa da usabilidade. Seguiu-se a escolha de um conjunto de
metodologias tidas como base para a avaliao qualitativa da usabilidade, que foram posteriormente
colocas em prtica em quatro casos de estudo.
19
Alm do mais, outras perguntas foram surgindo ao longo da investigao: No haver uma ligao
estreita entre os estudos de usabilidade e o design? No ser esta uma ferramenta to importante
como qualquer outra ferramenta de design ou como um qualquer software de desenho vectorial ou
tratamento de imagem? No ser esta uma rea que deva ser leccionada em ambiente acadmico, no
seio de uma licenciatura em Design?
20
1. USABILIDADE
1.1. O que a Usabilidade?

Usability really just means that making sure that something works well: that a person of average
(or even below average) ability and experience can use the thingwhether its a Web site, a
fighter jet, or a revolving doorfor its intended purpose without getting hopelessly frustrated.
Steve Krug, Dont Make Me Think! A Common Sense Approach to Web Usability, 2000
Por usabilidade entende-se a capacidade de um dado objecto se adaptar convenientemente ao objectivo

para o qual foi proposto de um ponto de vista da funcionalidade para o utilizador; um atributo
qualitativo que avalia o quo fcil de utilizar um interface de utilizador4 (Nielsen, 2003); a medida
pela qual um produto pode ser usado por utilizadores especficos para alcanar objectivos especficos
com efectividade, eficincia e satisfao num contexto de uso especfico5 (ISO 1998); a capacidade
de um artefacto, em termos de factores humanos, ser usado fcil, eficiente e satisfatoriamente por
utilizadores especficos, desempenhado tarefas especificas, em ambientes especficos (Shackel 1991).
A usabilidade estuda a relao entre as ferramentas e os seus utilizadores, sendo uma disciplina da
rea da ergonomia e da interaco humano-computador (IHC). Para que seja eficaz, uma ferramenta
deve permitir que os utilizadores realizem as tarefas desejadas e necessrias da melhor forma possvel.
O estudo da usabilidade procura a utilizao fcil e o mapeamento claro das funcionalidades e dos
contedos de um sistema interactivo.
1.1.1. A Usabilidade segundo Nielsen

Jakob Nielsen tido por muitos como a figura mais proeminente em termos de usabilidade, tendo
mesmo sido apelidado de O Guru da Usabilidade Web pelo New York Times.6 Nielsen comea
por definir usabilidade como uma factor a ter em conta num espectro mais alargado a que chama
aceitabilidade do sistema7 que por sua vez caracterizada por duas dimenses: a aceitabilidade social e a
4. Usability is a quality attribute that assesses how easy user interfaces are to use (Nielsen, 2003)
5. extent to which a product can be used by specified users to achieve specified goals with effectiveness,
efficiency and satisfaction in a specified context of use (ISO 1998)
6. Meet the guru of Web page usability, a man for whom Web design is not a matter of taste or aesthetics - its a
matter of science. (New York Times, 1998)
7. To some extent, usability is a narrow concern compared to the larger issue of system acceptability, which
21
aceitabilidade prtica. Social, quando os utilizadores reconhecem a sua necessidade e relevncia social;
Prtica, quando so respeitados critrios de custo, confiana, compatibilidade, flexibilidade e qualidade
de uso, que se define pela sua utilidade e usabilidade.8
Falar de usabilidade assim tambm falar de qualidade de uso. Nielsen refere a qualidade de uso como
factor chave da usabilidade dado que um sistema bem sucedido deve ser usvel e til simultaneamente,
deve providenciar as ferramentas necessrias para que o utilizador cumpra uma determinada tarefa
e o consiga fazer de forma rpida, eficiente e intuitiva. Sistemas que no sejam necessrios, que no
providenciem claras mais valias para utilizador, no so assim usveis por natureza. Nielsen (1993)
define usabilidade atravs de cinco atributos:
1. Capacidade de aprendizagem
Qual o grau de facilidade na sua aprendizagem? Por capacidade de aprendizagem entende-se o grau de
facilidade na aprendizagem de um determinado objecto, a facilidade com que uma dada pessoa passa
de utilizador iniciante a utilizador experiente. Quanto mais rpida for a capacidade de aprendizagem,
maior ser o grau de satisfao e confiana com o qual o utilizador interage com um dado objecto.
Nielsen refere que a capacidade de aprendizagem , em certa medida, o atributo mais importante de
usabilidade9, dado que todos os sistemas necessitam de um perodo de aprendizagem e esta ser a
primeira experincia do utilizador com o sistema.
Olhando para um stio Web, quanto mais fcil for a sua utilizao, maior ser a probabilidade de
este ser usado mais vezes pelo utilizador. O sucesso de um stio no se mede pela quantidade de
funcionalidades que contm, mas sim pela facilidade com que estas podem ser usadas para atingir os
objectivos que lhes esto associados e as tarefas que os utilizadores pretendem executar.
2. Capacidade de memorizao
Qual o grau de memorizao aps um perodo de inactividade do utilizador? Por capacidade de
memorizao, entende-se a facilidade com que um dado objecto ou processo poder recordado por
parte do utilizador ao fim de um determinado tempo sem este ter interagido com o objecto. Olhando
para um stio Web, quanto menos complexo for a sua interface, maior ser a probabilidade de um
utilizador o voltar a usar ao fim de algum tempo de inactividade sem necessidade de a reaprender
como o usar.
O utilizador procura sempre os stios com os quais se sente mais vontade na interaco e onde
consegue cumprir as suas expectativas com sucesso. Stios Web com navegaes muito complexas
ou que no recorrem a padres de interaco reconhecidos10 tendem a criar imensos obstculos
ao utilizador, diminuindo assim no s a confiana que o utilizador deposita neste como o grau de
basically is the question of whether the system is good enough to satisfy all the needs and requirements of the
users and other potential stakeholders, such as the users clients and managers. (Nielsen 1993)
8. Utility is the question of whether the functionality of the system in principle can do what is needed, and
usability is the question of how well users can use that functionality. (Nielsen 2003)
9. Learnability is in some sense the most fundamental usability attribute (Nielsen 1993)
10. Existem vastas listas de Padres de Interaco reconhecidos como os referenciados por Tidell no seu livro
Designing Interfaces, ou bibliotecas de padres na Web como a Yahoo! Design Pattern Library (http://developer.
yahoo.com/ypatterns/).
1. Usabilidade
conforto na sua utilizao, levando o utilizador a procurar uma alternativa que lhe permita realizar as
tarefas que pretende de forma mais eficiente e rpida, o que nos conduz ao terceiro atributo.
3. Eficincia na utilizao
Qual a grau de eficincia na utilizao? Por eficincia na utilizao, entende-se o grau de rapidez
e sucesso com que os utilizadores atingem os seus objectivos na interaco com um dado objecto.
Um stio Web com uma curva de aprendizagem pouco acentuada ser necessariamente mais rpido
de utilizar, e o utilizador ir realizar de forma eficiente as tarefas ou aces pretendidas, sejam estas
comprar um produto ou consultar uma informao.
4. Fiabilidade da utilizao
Qual o grau de fiabilidade nas tarefas propostas? Por fiabilidade de utilizao entende-se a quantidade
de ocasies em que ocorrem erros e a facilidade que com que estes so resolvidos um factor
muito importante para o grau de confiana do utilizador em relao ao sistema. Na Web, stios
onde se observam elevadas ocorrncias de erros tendem a ser rapidamente trocados por outros que
proporcionem ao utilizador a possibilidade de realizem a tarefa com maior sucesso e rapidez.
5. Satisfao do utilizador
Qual o grau de satisfao do utilizador na interaco com a interface? Uma interface de sucesso
aquela que os utilizadores utilizam com prazer e satisfao, embora a satisfao seja um factor bastante
subjectivo. Nielsen (1993) referia-se inicialmente a este atributo como satisfao subjectiva, atribuindolhe particular importncia em sistemas orientados para o entretenimento e diverso. O grau de
satisfao pode ter duas dimenses: uma funcional, baseada estritamente na capacidade do sistema em
providenciar as ferramentas necessrias para que o utilizador cumpra com sucesso as tarefas; e outra
visual, baseada na emoo positiva ou negativa criada pelo design da interface, independentemente da
sua funcionalidade.
1.1.2. Outros Autores

Embora sejam os mais amplamente citados, os cinco atributos com que Nielsen define a usabilidade
no so os nicos. Outros autores so amplamente citados com especial incidncia na Norma ISO
9241-11 (1998), Ben Shneiderman (1998) e Alan Dix, Janet Finlay, Gregory Abowd e Russell Beale
(1998). Embora seja evidente que alguns pontos so comuns, no possvel afirmar que a definio de
usabilidade, pelos seus atributos, seja assim universalmente aceite.
1.1.2.1. ISO
A International Organization for Standardization (ISO)11 uma entidade internacional reconhecida

por 170 pases, que aprova, gere e implementa conjuntos de normas relacionadas com a tecnologia
e indstria. A norma ISO 9241-11 (1998) estabelece a definio de usabilidade com recurso a trs
11. Organizao Internacional de Normalizao, na sua designao portuguesa,

23
atributos: efectividade, eficincia e satisfao. Por efectividade entende-se o grau de preciso com
que um utilizador consegue completar na ntegra uma determinada tarefa; por eficincia entendese os recursos utilizados em relao ao grau de preciso e concluso do utilizador ao atingir os
seus objectivos; por satisfao entende-se o nvel de conforto e aceitao que o sistema produz nos
utilizadores e noutras pessoas afectadas por este.
A norma ISO 9241-11 faz tambm referncia satisfao, definindo esta como a ausncia de
desconforto e as atitudes positivas do utilizador perante a utilizao do sistema. Esta estabelecese como um ponto de partido terico, tendo poucas ou nenhumas informaes quanto sua
aplicabilidade prtica, at porque define sistema como a relao entre utilizadores, equipamento
(hardware, software e materiais), tarefas, o ambiente fsico e social, com o objectivo de atingir um
determinado objectivo.
1.1.2.2. Ben Shneiderman
Ben Shneiderman (1998), outro autor vrias vezes citado, no difere do estabelecido por Norman
excepto na semntica. Em vez de atributos, Shneiderman identifica cinco factores humanos centrais
quantificveis para a avaliao dos objectivos dos factores humanos:12 Velocidade de performance, tempo
de aprendizagem, reteno ao longo do tempo, rcio de erros pelos utilizadores e satisfao subjectiva;
sendo estes equivalentes aos identificados por Nielsen e j atrs referidos.
1.1.2.3. Dix, Abowd, Beale, e Finlay
Dix, Abowd, Beale, e Finlay (1998) apresentam trs atributos principais para a definio da usabilidade:
Capacidade de Aprendizagem, Flexibilidade e Robustez; mas expandem estes em vrios outros atributos
complementares. e factores que influenciam estes atributos.
A Capacidade de aprendizagem de um sistema influenciada pela sua consistncia visual, estrutura
e funcionalidade, e se o layout e os seus diversos componentes so estveis ao longo das pginas de
um stio; pela generalizao ou utilizao de padres de interaco reconhecveis pelo utilizador na
interaco com outros sistemas; pela sua familiaridade ou capacidade do sistema ser adivinhado
pelo utilizador sem recurso a manuais de utilizao; pela sua sintetizao ou capacidade de transmitir
a imagem correcta do seu funcionamento de forma que os utilizadores possam construir modelos
mentais deste, ou providenciar informao necessria que permita ao utilizador aferir se aco est a
decorrer e qual a sua consequncia (como, p.ex., o envio de uma mensagem de email e a confirmao
desse mesmo envio); e pela previsibilidade, ou seja, ao capacidade do sistema produzir, de facto, os
resultados que o utilizador espera que produza em funo das suas aces, ou se as aces deste podem
ser previstas com base em interaces passadas.
Quanto Flexibilidade, esta influenciada pela customizao do sistema, pela possibilidade do
utilizador alterar caractersticas do sistema de forma a aumentar a produtividade do mesmo (como,
12. five measurable human factors central to evaluation of human factors goals (Shneiderman 1998)
24
1. Usabilidade
p.ex., aumentar o tamanho do texto, ou utilizar atalhos do teclado); pela sua capacidade de apresentar
alternativas, que num stio Web se pode traduzir na apresentao de contedo texto descritivo em
alternativa a uma imagem; pela capacidade de migrar tarefas, ou possibilitar a alternncia da execuo
da tarefa entre o utilizador e o sistema (como, p.ex., em caixas de pesquisa ou formulrios onde o
sistema apresenta possveis solues com base nas primeiras palavras escritas); pela capacidade de
realizar mltiplas tarefas definidas pelo utilizador em simultneo; e pelo dilogo, ou a capacidade de
sistema e utilizador dialogarem, quer seja a comunicao ao sistema do que o utilizador pretende fazer,
quer seja a informao providenciada pelo sistema sobre o que pode, no pode ou deve o utilizador
fazer.
Por fim, a Robustez, ou o nvel de informao providenciado ao utilizador sobre o estado do sistema,
influenciada pela resposta, ou a capacidade do sistema informar o utilizador relativamente a uma
aco (como o tempo de espera para o descarregamento de um ficheiro, abertura de uma imagem
ou vdeo, etc.); pela capacidade de recuperao ou a possibilidade do utilizador poder voltar atrs na
aco realizada, ou de recuperar de um erro, tendo o sistema neste caso de providenciar informao
correcta sobre os passos a seguir para o efeito; pela visibilidade do estado, ou a capacidade do sistema
providenciar informao til ao utilizador sobre o estado das suas aces; e pela conformidade com a
tarefa, ou seja, se o sistema o adequado para o utilizador atingir os seus objectivos.
1.1.3. Sntese
Nielsen (1993)
Shneiderman (1998)
Capacidade de Aprendizagem Tempo de Aprendizagem
Dix, et al. (1998)
ISO (1998)
Capacidade de Aprendizagem
Capacidade de Memorizao Reteno ao longo do tempo
Efectividade
Eficincia na Utilizao
Velocidade de Performance
Flexibilidade
Fiabilidade da Utilizao
Rcio de erros pelos utilizadores Robustez
Satisfao do Utilizador
Satisfao Subjectiva
Eficincia
Satisfao
No essencial, os atributos de usabilidade definidos pelos trs autores referidos e a norma ISO, so
coincidentes. A ISO no se refere capacidade de aprendizagem, nem faz referncia directa fiablidade
do sitema, no entanto, ao falar de eficincia, indirectamente refere-se tambm fiabilidade. Dix, et al.,
tambm no fazem referncia directa fiabilidade, mas importa aqui sublinhar que os trs atributos
por eles defenidos, so apenas o resultado na interligao de vrios outros sub-atributos que no geral
cobrem um leque bem mais abrangente do que o proposto por Nielsen, Shneiderman ou a ISO, no
entanto, a satisfao por parte do utilizador omitida.
25
1.2. Heursticas
There are basically four ways to evaluate a user interface: Formally by some analysis technique,
automatically by a computerized procedure, empirically by experiments with test users, and
heuristically by simply looking at the interface and passing judgement according to ones own
opinion.
Jakob Nielsen e Rolf Molich, Heuristic Evaluation of User Interfaces, 1990.
Para alm da definio e dos atributos de usabilidade, existem outros conjuntos de princpios
que sistematizam e detalham as principais questes de usabilidade como princpios de design ou
heursticas. Heursticas so normas que se apresentam como solues ideais para um dado problema,
neste caso, de usabilidade, afirmando-se como uma base para a produo de directivas de usabilidade
mais detalhadas e adaptadas a um dado interface visual, seja ele um programa de computador ou um
stio Web.
Os pontos seguintes procuram abranger trs aspectos: uma viso mais geral definida pelas dez
heursticas de usabilidade de Nielsen; uma viso orientada para o design de interfaces definida pelos
Princpios do Design de Interaco de Bruce Tognazzini e pelas Oito Regras de Ouro do Design de
Interfaces de Ben Shneirderman; e uma possvel aproximao compreenso da dimenso psicolgica
do utilizador explorada em A Viso do Psiclogo sobre o Design da Experincia do Utilizador de Susan
Weinschenk.
1.2.1. As Dez Heursticas de Nielsen

Desenvolvidas originalmente por Jakob Nielsen em conjunto com Rolf Molich (1990a, 1990b), as Dez
Heursticas de Nielsen comearam por ser um conjunto de consideraes de usabilidade que serviam
de alternativa a uma avaliao de usabilidade feita por especialistas, at ento realizada com base em
directivas de usabilidade (Smith, et al. 1986).
O objectivo de Nielsen e Molich passava por reduzir o grau de complexidade providenciado pelas
directivas de usabilidade, reduzindo estas a nove heursticas: Dilogo simples e natural; Falar a lngua
do utilizador; Minimizar o recurso memria; Ser consistente; Providenciar feedback; Providenciar sadas
claramente assinaladas; Providenciar atalhos; Boas mensagens de erro; Prevenir erros.
Inicialmente desenvolvidas para interfaces visuais de software, as directivas de usabilidade seriam mais
tarde adaptadas por Nielsen para interfaces de stios Web, de acordo com a anlise de 249 problemas de
usabilidade. Nielsen (1994) prope assim um conjunto de dez Heursticas de Usabilidade que so hoje
entendidas como uma norma para o design de interfaces visuais para a Web.
26
1. Usabilidade
1. Visibilidade do estado do sistema

O sistema deve manter sempre o utilizador informado do que se est a passar, providenciando
informao apropriada num perodo de tempo razovel. Na utilizao de hiperligaes, o sistema deve
providenciar informao visual de que uma aco foi espoletada, ou, em processos demorados, deve
ser providenciada informao sobre a durao do processo, de forma que o utilizador no julgue que o
sistema no est a responder sua aco.
Um bom exemplo desta heurstica pode ser visto no processo de descarregamento de um ficheiro,
onde uma janela de dilogo d conta do estado do mesmo, assim como o tempo estimado para a sua
concluso. Outras indicaes podem ser dadas ao utilizador, como avisos para no refrescar a pgina
ou para no fechar a janela de dilogo.
Figura 1. Exemplo de um barra de progresso de descarregamento de um ficheiro
Outro exemplo tpico ocorre durante o envio de um email, onde dada a indicao de que o envio est
a ser efectuado, seguindo uma mensagem confirmando, ou no, se o envio foi processado com sucesso.
2. Compatibilidade do sistema com o mundo real
O sistema deve recorrer a palavras, frases ou conceitos familiares ao utilizador, e no recorrer a termos
prprios do sistema ou orientados para os seus programadores. A utilizao de convenes do mundo
real, como a utilizao de separadores na navegao, fazendo a informao aparecer de forma natural
e lgica permite uma melhor compreenso por parte do utilizador, garantindo que a experincia de
utilizao decorre de forma rpida e sem sobressaltos.
Figura 2. Exemplo de navegao por separadores
A linguagem utilizada deve ser tambm ajustada ao pblico-alvo: utilizar linguagem vernacular,
coloquial ou gria num stio empresarial ou institucional no ser a melhor maneira de comunicar
com o utilizador, podendo mesmo afectar a credibilidade do mesmo. Em contrapartida, a utilizao de
linguagem empresarial num stio dedicado ao grande pblico ou a segmentos especficos desse pblico
acaba inevitavelmente por criar barreiras ao utilizador por desconhecimento da sua orgnica interior e
termos especficos.
27
3. Controle e liberdade do utilizador

Nem sempre os utilizadores seguem os percursos certos, e quando detectam algum erro iro procurar
uma sada de emergncia, pelo que o sistema dever providenciar formas de recuperar desses
erros. Os navegadores Web possuem botes para avanar e retroceder, que possibilitam regressar s
pginas anteriormente visitadas antes do erro, mas outras solues so recomendadas, como sejam:
hiperligaes para a pgina inicial atravs do logtipo do stio, ou breadcrumbs que indicam todo o
percurso seguido desde a pgina inicial.
Figura 3. Exemplo de Breadcrumbs
Outros exemplos de controlo e liberdade do utilizador podem ser providenciados atravs de botes
prprios para retroceder na pgina, botes para fechar janelas de dilogo como nas situaes em
que um pop-up surge (situao tpica quando fornecida uma visualizao em maior escala de uma
imagem), botes para cancelar o envio de emails, botes para cancelar uma encomenda ou remover um
item em formulrios de compras online, etc.
4. Consistncia e uso de padres
O sistema deve manter-se consistente no seu todo e utilizar normalizaes reconhecidas por
todos, sejam estas expresses ou elementos visuais. A utilizao de padres de design de interfaces
reconhecidos minimiza o esforo mental realizado pelo utilizador para completar uma determinada
tarefa no sistema, visto que ir reconhecer esses mesmos padres em interaces anteriores com
outros sistemas. Embora haja sempre espao para a criatividade, elementos como caixas de pesquisa,
formulrios, barras de scroll, botes, etc., devem sempre parecer aquilo que so, independentemente do
design utilizado na interface.
Figura 4. Exemplos de caixas de pesquisa
5. Preveno de erros
Melhor do que um boa mensagem de erro, s um design cuidado que previna a ocorrncia desse
mesmo erro.13 Deve-se eliminar a ocorrncia de erros bvios, ou nas situaes necessrias, providenciar
opes de confirmao antes do utilizador terminar a aco, atravs de ajudas locais e/ou globais, ou
mesmo atravs de exemplos de como proceder.
13. Even better than good error messages is a careful design which prevents a problem from occurring in the first
place (Nielsen, 2005)
28
1. Usabilidade
Em formulrios de compras ou de email, a existncia de botes como cancelar, remover item, ou

avisos sobre quais os campos de preenchimento obrigatrio e ou de concluso da aco como Deseja
efectuar esta compra, ajudam o utilizador a cumprir a tarefa com sucesso sem necessidade de repetir
todo o processo aps ter sido verificado um erro na aco.
Figura 5. Exemplo de um formulrio de compras com botes para remover item, actualizar lista de compras e finalizar compra
6. Reconhecimento em vez de lembrana

O sistema no deve exigir que o utilizador se lembre da forma como interagiu com este na sua ltima
utilizao. Objectos, aces e opes devem ser bem visveis e facilmente reconhecveis, devendo as
interaces mais complexas ser sempre acompanhadas por instrues claras e de fcil acesso.
Esta heurstica particularmente til na interaco com formulrios, seja estes de contacto ou um
carrinho de compras num stio de e-commerce. Se o sistema necessita de uma confirmao por parte do
utilizador para uma dada interaco, o mesmo dever apresentar os dados anteriormente inseridos pelo
utilizador de forma a evitar que este no tenha de recorrer sua memria sobre os dados que inseriu.
Figura 6. Exemplo de um principio de reconhecimento em vez de lembrana
7. Flexibilidade e eficincia de utilizao

Um stio Web deve sempre ser pensado para todos os utilizadores, incluindo os utilizadores mais
experientes, de forma que estes possam executar determinadas tarefas da forma mais rpida e eficiente
possvel. No caso dos utilizadores mais experientes, devem mesmo ser providenciados aceleradores,
como atalhos no teclado, que permitam a realizao das aces sem a utilizao do rato.
29
A utilizao de atalhos de teclado permite uma rpida navegao para reas-chave do stio, assim como
uma rpida utilizao de formulrios, seja na mudana de campo, seja na utilizao dos botes de
enviar, apagar, salvar, etc.
8. Design e esttica minimalista
As pginas de contedos no devem conter informaes no relevantes ou raramente utilizadas,
visto que esta informao ir competir visualmente com a informao relevante, diminuindo a sua
notoriedade e aumentando o tempo de compreenso do todo por parte do utilizador.
Toda a composio dever ter uma organizao e uma hierarquia claras e bem definidas para o
utilizador, utilizando para o efeito a escala, a tipografia, grafismos ou cor. Os elementos devero ser
o suficientemente espaados de forma a evitar dificuldades de interpretao por parte do utilizador,
separando de forma clara o que contedo principal de contedos secundrios e/ou complementares.
9. Ajudar o utilizador a reconhecer, diagnosticar e resolver problemas
As mensagens de erro devem ser claras e utilizar uma linguagem simples e que possa ser facilmente
interpretada pelos utilizadores, no recorrendo a cdigos e indicando sempre que aces devem
seguidas para resolver o problema.
Em casos de erro do stio, como por exemplo as pginas de erro 404 pgina no encontrada, deve
ser indicada a razo para a ocorrncia do erro, assim como ajuda clara e sucinta sobre quais os passos a
seguir para recuperar desse erro. Em formulrios, o mesmo principio deve ser respeitado, com eventual
recurso auxiliar a um cor diferente.
Figura 7. Exemplo de mensagem de erro 404
10. Ajuda e Documentao

Idealmente, deveria ser possvel utilizar qualquer sistema sem recurso a documentao explicativa,
embora esta possa ser de facto necessria. Nesse caso, deve ser a mesma colocada num stio visvel,
de fcil acesso e facilmente pesquisvel. A linguagem deve focar as tarefas do utilizador, mostrando
exemplos e os passos necessrios para que este possa terminar com sucesso as tarefa pretendidas,
devendo ainda ser simples e facilmente interpretada, e se for necessrio o uso de termos ou conceitos
pouco comuns, estes devem conter uma hiperligao a um glossrio.
Caso existam, os botes de ajuda devem estar devidamente identificados e contrastar com outros
elementos de navegao de forma que no sejam confundidos com esta. Deve-se recorrer a smbolos e
expresses facilmente reconhecidas, como pontos de interrogao ou com a expresso ajuda.
30
1. Usabilidade
Figura 8. Exemplo de ajuda e documentao durante o descarregamento de um programa de um stio
1.2.2. As oito Regras de Ouro do Design de Interfaces

As oito Regras de Ouro de Design de Interfaces so um dos conjuntos de heursticas estabelecidas por
Ben Shneiderman (1998) para o design de interfaces visuais que apresentam bastantes semelhanas
com as Dez Heursticas de Nielsen. A explicao de cada uma das regras procurou a sua aplicao a
interfaces visuais de stios Web, a saber:
1. Consistncia
O sistema deve to simples quanto possvel de forma a permitir que o utilizador com ele interaja
intuitivamente. Aces idnticas devem ter resultados idnticos; a mesma terminologia deve ser usada
em todos os menus, em janelas de dilogo e em ajudas contextuais.
2. Atalhos para utilizadores experientes
Com a frequncia de utilizao de um sistema, os utilizadores mais experientes procuram formas
de reduzir o nmero de interaces necessrias para cumprir as suas tarefas, aumentando assim a
velocidade com que estas so cumpridas, pelo que o sistema deve providenciar aceleradores como
atalhos de teclado, macros e abreviaturas que facilitem a interaco aos utilizadores.
3. Feedback informativo
Todas as aces executadas no sistema devem ser acompanhadas de uma resposta por parte desse
mesmo sistema, mais ou menos explicativa em funo da aco espoletada: um item de menu
seleccionado deve indicar que o mesmo foi seleccionado; uma hiperligao visitada deve indicar
que a mesma j foi visitada; o descarregamento de um ficheiro deve indicar o tempo estimado para
a sua concluso e a progresso do mesmo; numa aco que resulte num erro, deve ser providenciada
informao sobre o erro e quais os passos necessrios para a sua resoluo.
31
4. Dilogos de concluso
As aces ou sequncias de aces devem ser estruturadas de forma que o utilizador tenha a percepo
sobre os passos necessrios para a execuo das mesmas, e se estes foram ou no concludos como
em formulrios de compras online, onde a informao requerida para a sua concluso dividida em
vrias etapas, indicando o sistema quais os passos requeridos assim como o seu correcto, ou no,
preenchimento.
Figura 9. Formulrio de concluso de compra de um stio de e-commerce
5. Preveno e tratamento de erros

A ocorrncia de erros deve sempre ser evitada, mas para os casos em que estes ocorram, o sistema deve
providenciar ao utilizador informao sobre como os resolver que seja simples e fcil de compreender,
recorrendo a exemplos, se necessrio.
6. Aces reversveis
As aces devem ser, sempre que possvel, reversveis, de forma a aumentar a confiana do utilizador
no sistema e permitindo assim que aquele interaja com este sem receio de o danificar. Os eventuais
erros que possam ocorrer devem ser devidamente identificados, devendo o sistema providenciar uma
ou vrias resolues para os mesmos, como sugerir uma pesquisa, apontar para a pgina inicial ou
sugerir tpicos relacionados na ocorrncia de um erro 404 pgina no encontrada.
7. Controlo
conveniente providenciar aceleradores, como atalhos de teclado para os utilizadores mais experientes,
de forma que estes sintam que controlam o sistema e no que este que os controla. O sistema deve ser
desenhado de forma que seja o utilizador a iniciar as aces que pretende.
8. Reduo do recurso memria
As limitaes do processamento humano na memria de curta-durao requere que as interfaces sejam
simples e intuitivas, de forma a evitar o recurso memria por parte do utilizador.
32
1. Usabilidade
1.2.3. Princpios do Design de Interaco

Para alm das Dez Heursticas de Nielsen, existem ainda outros conjuntos de heursticas relevantes,
sendo o mais vezes citado incluindo pelo prprio Nielsen os Princpios do Design de Interaco,
ou Primeiros Princpios do Design de Interaco de Bruce Tognazzini (2003), um conjunto de dezasseis
directivas orientadas para o design de interfaces visuais, como sejam:
1. Antecipao
O sistema deve fornecer todas as ferramentas necessrias para que o utilizador possa cumprir com
sucesso determinada tarefa. Ao longo desta, o sistema deve antecipar as necessidades do utilizador,
providenciando sempre as ferramentas necessrias para que o utilizador possa voltar a trs, cumprir os
passos necessrios e seguir em frente.
A antecipao das necessidades do utilizador pode ser assegurada de diversas formas: em questes de
navegao, o stio deve manter esta visvel em todas as pginas em conformidade com a hierarquia
das mesmas na arquitectura de navegao, providenciando ainda acesso s subpginas, caso existam,
ou seja, pginas de primeiro nvel devem assegurar a visibilidade da navegao de primeiro e segundo
nveis; pginas de segundo nvel devem assegurar a visibilidade da navegao de primeiro, segundo e
terceiro nveis; e assim consecutivamente.
Outro exemplo em que este princpio particularmente til pode ser encontrado nos formulrios
para a compra de produtos online. Os stios devem apresentar sempre os passos necessrios para a
finalizao da tarefa, independentemente do ponto em que o utilizador se encontra na execuo da
mesma, assim como a possibilidade de avanar ou retroceder nesse processo a qualquer momento.
Desta forma, o utilizador pode antecipar mentalmente que dados podero ser requeridos ao longo do
processo, podendo no s avanar com sucesso ao longo do mesmo, como retroceder para realizar
qualquer alterao se e quando necessrio.
2. Autonomia
O sistema deve passar a imagem de que o utilizador o controla, mesmo que na prtica no o faa de
facto. Deve ser sempre fornecida informao sobre qual a aco que o utilizador est a executar, quer
seja informao de carcter textual ou visual: atravs da alterao da cor de uma hiperligao quando
aquele interage com o cursor do rato; uma nova cor para hiperligaes quando esta j foi visitada; ou
uma janela a avisar o tempo de durao e o estado do processo de descarregamento de um ficheiro.
Os utilizadores no devem ser obrigados a procurar informao sobre o estado do sistema, pelo que
este deve manter essa informao sempre actualizada e em local visvel. Em stios de e-commerce, a
presena do carrinho de compras com a indicao do nmero de itens que o mesmo contm mantem
sempre informado o utilizador com os dados essenciais, sendo normalmente colocado num local
suficientemente suficiente para no competir visualmente com informao mais importante, mas
to visvel quanto possvel para o utilizador saber onde o encontrar rapidamente. medida que o
utilizador acrescenta ou retira itens, o carrinho de compras vai actualizando o valor do respectivo
contedo.
33
Autonomia e controlo so inseparveis, e este ltimo no pode ser exercido se o sistema no

providenciar as informaes necessrias ao utilizador. Por sua vez, o utilizador aprende mais
rapidamente e sente mais confiana na interaco com o sistema quando sente que o controla.
3. Daltonismo
O daltonismo manifesta-se de diversas formas atinge cerca de 8% dos homens na populao mundial14,
embora haja fontes que apontam para valores a rondar os 10 a 15%.
A utilizao da cor em interfaces deve ter em conta a possibilidade do utilizador poder sofrer de um
dos vrios tipos de daltonismo, pelo que deve ser sempre facultada uma alternativa em qualquer
funcionalidade cuja interaco se baseie na cor. Estas alternativas podero basear-se na utilizao de
diferentes gradaes da mesma cor, numa legenda associada cor ou numa forma grfica diferente.
No aconselhada a utilizao de cor em textos, a menos que seja para representar uma hiperligao,
devendo, neste caso, a hiperligao encontrar-se sublinhada.15
Figura 10. As alteraes na percepo das cores nos principais tipos de daltonismo
4. Consistncia
A importncia da manuteno de valores de consistncia rgidos ao longo da interface varivel,
podendo respeitar a seguinte ordem: Interpretao do comportamento do utilizador; Estruturas
invisveis (objectos interactivos que no se parecem com padres reconhecidos); Estruturas visveis
pequenas (como cones, caixas de seleco, etc.); Aspecto geral da interface; Uma suite de produtos;
Consistncia in house; Consistncia do sistema.
As inconsistncias devem ser utilizadas apenas quando os elementos tm comportamentos diferentes,
como por exemplo os botes de enviar e cancelar num formulrio de contacto.
5. Valores por defeito
Em formulrios, e quando necessrio, podem ser utilizados valores por defeito que indiquem a
natureza do valor pretendido.16 Quando utilizados, os valores que vm por defeito devem poder ser
14. About 8% of the male population has some form of colorblindness (We Are Colorblind, 2012)
15. underlining is essential if you use link colors such as reds or greens, which cause problems for users with
common forms of color-blindness (Nielsen, 2004)
16. Fields in data entry screens contain default values when appropriate (Userfocus)
34
1. Usabilidade
alterados de forma fcil e intuitiva e os campos onde estes sejam utilizados devem ser devidamente
identificados.
Figura 11. Valores por defeito num formulrio para reserva de bilhetes de avio
Vrios stios Web utilizam por defeito valores em campos de formulrios, como caixas de pesquisa
onde podem surgir as designaes Pesquisar ou Procurar, assim como em campos de seleco de
datas, de palavras-chave, categorias, etc. Estes valores, quando utilizados, devero ser identificados de
forma que o utilizador no os confunda com dados por si inseridos, seja atravs de uma cor diferente
para o valor por defeito, ou atravs da alterao da cor de fundo da caixa. A utilizao de valores por
defeito deve ser regrada pois os utilizadores tendem a no os alterar.17
6. Eficincia do utilizador
O sistema deve preocupar-se com a eficincia do utilizador e no do computador, ou seja, deve ser
criado de forma que permita ao utilizador poder cumprir as suas tarefas da forma o mais rpida e
eficiente possvel.
7. Interfaces Explorveis
Devem ser providenciados aos utilizadores pontos de referncia ao longo da interaco, sendo as
breadcrumbs, a ttulo de exemplo, particularmente teis neste captulo. A navegao principal deve ser
sempre visvel e permitir ao utilizador seguir outros caminhos se assim o desejar ou assim precisar.
As aces devem ser reversveis, permitindo ao utilizador voltar atrs caso siga um caminho que no
pretenda ou tenha seguido por engano, ou que estas possam ser canceladas, como num formulrio de
contacto. A reversibilidade das aces liberta o utilizador de constrangimentos e permite que este se
sinta mais confortvel na interaco. Deve ainda sempre manter-se presente uma sada de emergncia,
como uma hiperligao para a pgina principal.
17. But use these with caution, because users tend to leave pre-selected fields as they are (Mifsud, 2011)
35
8. Lei de Fitts
A Lei de Fitts (1954) afirma que o tempo para atingir um alvo uma funo da distncia para o alvo
e o tamanho deste. Segundo este principio, quanto maior for o alvo, mais rpido este ser de utilizar,
ou seja, um boto de dimenso generosa mais rpido de usar uma vez que o utilizador ter uma rea
maior para onde apontar, o que permite maior preciso com menor margem de erro.
Um dos exemplos mais evidentes da aplicao da Lei de Fitts so os formulrios de contacto. Ao
colocar os botes de enviar e cancelar lado-a-lado e com a mesma dimenso, a probabilidade
do utilizador seleccionar a opo errada maior do que se esses botes estiverem separados (ver
figura.12). Desenhar o boto de enviar, aquele cuja aco termina com sucesso a realizao da tarefa,
com uma escala superior, aumenta tambm a facilidade e rapidez com que este seleccionado. No se
trata de dificultar a possibilidade do utilizador cancelar a mensagem, mas sim diminuir a possibilidade
deste seleccionar essa opo por engano.
Figura 12. Demonstrao da Lei de Fitts
9. Objectos Interface-Humano
Os objectos Interface-Humano podem ser vistos, ouvidos, tocados ou percepcionados de outra
forma. Os que podem ser vistos so bastante familiares no interface grfico, enquanto os que se fazem
anunciar noutros sentidos como a audio ou tacto so menos familiares. Um bom trabalho tem vindo
a ser desenvolvido com cones audveis. Estes objectos Interface-Homem apresentam uma forma de
interagir padronizada e resultados ao nvel do comportamento igualmente padronizados. Os objectos
Interface-Homem devem ser perceptveis, auto-consistentes, e estveis.
10. Reduo de latncia
O tempo de espera deve ser optimizado de forma a reduzir ao mnimo a frustrao do utilizador. Todos
os botes devem providenciar uma resposta visual quando activos num espao de 50 milissegundos;
um elemento visual animado como uma ampulheta, relgio ou Ajax loader deve ser exibido para
aces cuja concluso dure entre meio segundo e dois segundos a animao indica ao utilizador que
o sistema est a processar para aces superiores a dois segundos, deve ser exibida uma mensagem
com o tempo estimado para a durao da aco; e no caso do utilizador estar a descarregar um ficheiro,
o tamanho deste e uma barra de progresso.
11. Capacidade de Aprendizagem
Idealmente, os stios Web no devem ter uma curva de aprendizagem, mas na prtica, por mais fceis
que sejam de usar, estes necessitam sempre de um processo de aprendizagem.
12. Uso de Metforas
A utilizao de metforas deve ser cautelosa: estas devem permitir ao utilizador compreender o modelo
conceptual do sistema e criar uma imagem mental do mesmo boas metforas so boas histrias.
Uma boa metfora , por exemplo, o carrinho de compras nos stios de e-commerce, pois este evoca
36
1. Usabilidade
mentalmente a imagem de do mesmo objecto num supermercado, onde o utilizador vai percorrendo os
corredores de produtos e vai colocando os que pretende comprar dentro do carrinho.
13. Proteger o trabalho do utilizador
essencial garantir que, em caso de erro do sistema, o utilizador nunca perde o trabalho realizado.
Em stios Web, isso pode pode ser conseguido atravs do recurso a cookies que guardem os dados no
preenchimento de formulrios, que memorizem hiperligaes j visitadas, etc.
14. Legibilidade
Qualquer texto composto para ser lido deve ser formatado em alto contraste, privilegiando o uso da
cor preta sobre fundo branco ou amarelo plido evitando os fundos cinza. Por outro lado, deve-se
ser privilegiada a utilizao duma tipografia num tamanho que favorea a leitura em ecrs Nielsen
recomenda 10pt no minimo, 12pt para seniores (2006).
Legendas e instrues podem ser compostas em tamanhos mais pequenos de forma a no competirem
com a informao mais relevante. Deve ser ainda mantida uma boa estrutura de escalas para
hierarquizar os contedos, com o mais importante em tamanhos maiores e o acessrio em tamanhos
mais pequenos. A viso humana tende a piorar a partir dos 45 anos, pelo que importante ter cuidado
especial com os tamanhos utilizados.
15. Monitorizar o estado
Os produtos baseados num navegador, como os stios Web, funcionam num ambiente sem estado,18
pelo que o sistema deve conseguir fornecer alguma informao neste sentido.
16. Navegao visvel
A Internet composta por um espao de navegao invisvel19 e imperceptvel, pelo que os utilizadores
tm dificuldades em criar um mapa mental das suas interaces. Os stios devem por isso reduzir a
navegao ao mnimo, no diminuindo a dimenso de menus ou retirando outras formas de navegao,
mas mantendo um layout consistente ao longo das pginas, de forma que o utilizador crie uma
imagem mental de que, quando accionada uma hiperligao, o contedo que chega ao utilizar e no
o utilizador que se desloca ao encontro do contedo. Desta forma, no s se elimina a necessidade do
utilizador criar mapas mentais da interaco, como se proporciona uma maior sensao de domnio e
autonomia do utilizador sobre o sistema.
18. browser-based products exist in a stateless environment

19. The World Wide Web, for all its pretty screens and fancy buttons, is, in effect, an invisible navigation space
(Tognazzini, 2003)
37
1.2.4. A viso do psiclogo sobre o design da experincia do utilizador

Apesar de terem o utilizador como centro da preocupao, uma larga parte das heursticas de
usabilidade so orientadas para aspectos tcnicos do design e desenvolvimento das interfaces visuais
e no para a compreenso da forma como o utilizador pensa. No sendo o principal objectivo desta
investigao um detalhado estudo psicolgico sobre os utilizadores, este um campo que no pode no
entanto deixar de ser referido.
Num artigo publicado no stio UX Magazine20, a psicloga Susan Weinschenk procurou estabelecer um
conjunto de dez heursticas orientadas para a Experincia do Utilizador que providenciam um bom
ponto de partida para uma melhor compreenso do utilizador. Este conjunto de heursticas, descritas
por Weinschenk como A viso do psiclogo do design da experincia do utilizador, est dividido nos
dez pontos que se seguem.
1. As pessoas no querem trabalhar ou pensar mais do que precisam
As pessoas tendem a realizar o menor esforo possvel para a concluso de uma determinada tarefa,
pelo que devem ser fornecidas todas as ferramentas necessrias para que essa tarefa possa ser executada
da forma mais rpida e eficiente possvel, como o recurso a valores por defeito em formulrios que
reduzam a necessidade do utilizador trabalhar para cumprir a tarefa.
Por outro lado, deve-se assegurar apenas as funcionalidades que os utilizadores precisam, e no o que
a equipa de desenvolvimento ou de design ou o cliente julgam que aqueles precisam o excesso de
funcionalidades tornam a experincia, para o utilizador, mais confusa e mais sujeita a erros. Tudo o que
for clicvel, deve parecer clicvel.
Em pginas com muita informao, esta deve ser exibida de forma faseada, pois os utilizadores no
lem os textos na ntegra, antes se limitam a l-los na diagonal, prestando ateno a certas palavras, ou
em frases curtas.21 A informao deve ser dividida em vrias partes , dando a liberdade ao utilizador de
optar por ver ou no mais detalhes.
2. As pessoas tm limitaes
Existe um limite para a quantidade de texto que as pessoas conseguem ler num ecr sem perder
o interesse,22 pelo que a informao deve ser fcil de ler na diagonal, e deve ser no s fornecida
progressivamente, como deve ser tratada editorialmente de forma que seja composta por ttulos,
subttulos, pargrafos, listas, etc. As pessoas tendem a preferir pargrafos curtos, mas lem
20. http://uxmag.com/articles/five-popular-web-strategies-that-dont-work
21. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and
sentences (Nielsen 1993)
22. On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is
more likely. (Nielsen 2008)
38
1. Usabilidade
melhor pargrafos mais longos. Estudos indicam ainda que so poucas as pessoas que conseguem
desempenhar vrias tarefas em simultneo.23
3. As pessoas cometem erros
Deve-se assumir que as pessoas cometem erros, devendo-se nesse sentido antecipar desde logo quais os
erros possveis de ocorrer e por forma a tentar preveni-los, ou permitir que estes possam ser corrigidos.
Deve ser sempre dada a possibilidade de desfazer qualquer aco, permitindo que o utilizador possa
volta atrs a qualquer momento. Qualquer aco propcia a erros, como longos formulrios, deve
ser dividida em vrios passos de forma permitir que o utilizador lide com pequenas quantidades de
informao de cada vez.
4. A memria humana complicada
O funcionamento da memria humana complexo e as pessoas tendem a reconstruir as suas
memrias, sendo que estas no so sempre idnticas, sobre o mesmo evento, de indivduo para
indivduo (efeito Rashomon)24, ou vo-se alterando ao longo do tempo no mesmo indivduo. A
confiana que se deve assim depositar sobre a memria humana limitada. A memria frgil e
degrada-se ao longo do tempo, sendo ainda susceptvel a erros. Norman (1998) e Shneiderman (1998)
referem a regra 7 2,25 mas estudos recentes indicam que as pessoas s conseguem lembrar-se de entre
3 a 4 diferentes itens em simultneo.26
5. As pessoas so seres sociais
As pessoas usam a tecnologia como forma de socializao; procuram conselhos de outras pessoas
quando tm dvidas, do opinies, confrontam pontos de vista, etc. (factor conhecido como validao
social), razes pelas quais ratings e reviews so importantes para os stios Web.
A norma da reciprocidade indica que as pessoas que no retribuem favores so vistas de forma negativa
pela sociedade. Este principio pode ser seguido em situaes em que pedido ao utilizador que
preencha um formulrio, oferecendo-lhe algo em troca antes mesmo do pedido ser feito. Um exemplo
deste principio pode ser verificado em stios noticiosos, onde, em troca de uma newsletter ou uma
edio digital de uma revista ou jornal, pedido ao utilizador para se registar no respectivo stio.
23. http://bits.blogs.nytimes.com/2010/03/30/only-a-few-can-multi-task/
24.Designao oriunda do filme Rashomon de Akira Kurosawa (1950), o efeito Rashomon, consiste do facto de
para para um mesmo objecto de estudo, poderem existir verses diferentes e contraditrias, mas igualmente
vlidas.
25. Teoria formulada por George Miller, que defende que uma pessoa apenas capaz de ter 7 (2) items na
memria de curto prazo. http://www.musanim.com/miller1956/
26. http://www.theteamw.com/2009/10/28/100-things-you-should-know-about-people-3-the-magic-number-3or-3-to-4/
39
6. Ateno
As pessoas esto biologicamente programadas para prestar ateno a tudo o que novo, pelo que um
stio com um design novo ir naturalmente sobressair. No entanto, dependendo do nvel de ateno
que concentremos numa outra aco, o nosso crebro pode ficar cego a alteraes bvias.27
A ateno pode ser atrada atravs da utilizao de cores fortes, tipografia de larga escala ou sons,
devendo estes ser usados apenas se tiverem uma utilidade importante, pois as pessoas distraem-se
tambm com facilidade e elementos como os descritos podem fazer com que o utilizador no esteja
atento ao que importante.
7. As pessoas desejam informao
As pessoas tendem a procurar mais informao do que aquela que realmente precisam ou conseguem
processar. Ter acesso a uma grande quantidade de informao faz com que as pessoas sintam que tm
vrias escolhas, o que, por sua vez, lhes d a sensao de deterem o comando da aco. Mais importante
que o stio indicar que um ficheiro est a ser descarregado, o utilizador saber o que de facto se est a
passar.
8. Processamento inconsciente
A maior parte do processamento mental ocorre de forma inconsciente, sem que a pessoa perceba
de facto que este est a acontecer. Convencer um utilizador a executar uma pequena aco, como
subscrever uma verso gratuita de um determinado produto, aumenta a probabilidade deste mais tarde
executar uma aco maior, como subscrever a verso paga desse mesmo produto.
O crebro primitivo responsvel pela maiorias das nossas aces e pelos nossos instintos mais bsicos
sobrevivncia e reproduo , razo pela qual so imagens relativas a comida, sexo e perigo que
nos captam quase imediatamente a ateno. Por outro lado, o crebro emocional tem tambm grande
peso nas nossas decises, e este afectado pelas imagens (principalmente imagens de pessoas) e por
histrias. Ambos actuam inconscientemente, pelo que mesmo quando as pessoas caracterizam as suas
decises sobre uma dada aco como consciente e racional, por diversas vezes a razo no faz parte da
deciso.
9. As pessoas criam modelos mentais
As pessoas criam modelos mentais sobre si mesmas, de como os objectos funcionam, os eventos
acontecem, as pessoas se comportam, etc., com base no seu conhecimento e experincia (Norman
1998), sendo esses mesmos modelos mentais responsveis pela maior facilidade ou dificuldade
em utilizar determinada interface visual. Um exemplo desses modelos mentais a forma como
manipulamos um livro, folheando-o, principio que muitas aplicaes seguem como leitores de ebooks,
feeds RSS, etc. Produtos cujo modelo mental no se aproxima do modelo mental do utilizador so por
isso mais difceis de utilizar.
27. http://uxmag.com/articles/change-blindness
40
1. Usabilidade
10. Sistema Visual

Pginas demasiadamente povoadas com texto e imagens fazem com que as pessoas no encontrem o
que realmente pretendem. A informao deve ser estrutura e relacionada entre si, agrupando-se pelo
seu grau de familiaridade. A cor uma importante ajuda para que o utilizador compreenda o que
que est relacionado, mas deve ser usada como complemento a outras solues de forma a satisfazer
utilizadores que sofram de daltonismo.
Os estudos de eye tracking revelam dados interessantes sobre a forma como as pessoas olham para
os ecrs, mas o facto de uma pessoa estar a olhar para um determinado local no significa que esteja
realmente a prestar ateno ao que est a ver.28
A tipografia deve ser de uma dimenso generosa, devendo ser evitadas tipografias decorativas ler
devido sua menor legibilidade.29 Importa ainda ter em ateno que as cores mais difceis de ler em
conjunto (texto e cor de fundo) so o azul e o vermelho.
1.2.5 Sntese
Nielsen, et al. (1990)
Shneiderman (1998)
Tognazzini (2003)
Visibilidade do estado
do sistema
Feedback informativo;
Dilogos de concluso
Monitorizar o estado
Compatibilidade do
sistema com o mundo
real
Objectos
Interface-Humano;
Uso de Metforas
Controle e liberdade do Controlo;

utilizador
Aces reversveis
Autonomia
Consistncia e uso de
padres
Consistncia
Consistncia
Preveno de erros
Preveno e tratamento Antecipao

de erros
Reconhecimento em vez Reduo do recurso

de lembrana
memria
Capacidade de
Aprendizagem
Weinschenk (2011)
As pessoas criam
modelos mentais
A memria humana
complicada
Flexibilidade e eficincia Atalhos para

Eficincia do utilizador
de utilizao
utilizadores experientes
28. the interpretation of eye tracking data must be done with an understanding that the eyes do not directly
reflect attention (Gould 2010)
29. decorative typefaces have low legibility because they are primarily meant to be seen at a glance (Bonneville
2011)
41
Nielsen, et al. (1990)
Shneiderman (1998)
Tognazzini (2003)
Weinschenk (2011)
Design e esttica
minimalista
As pessoas no querem
trabalhar ou pensar
mais do que precisam;
As pessoas tm
limitaes;
As pessoas desejam
informao
Ajudar o utilizador a
Preveno e tratamento
reconhecer, diagnosticar de erros
e resolver problemas
As pessoas cometem
erros
Ajuda e Documentao Aces reversveis

Daltonismo
Valores por defeito
Interfaces Explorveis
Lei de Fitts
Reduo de latncia
Proteger o trabalho do
utilizador
Legibilidade
Navegao visvel
As pessoas so seres
sociais
Processamento
inconsciente
Os conjuntos de heursticas aqui apresentados so consistentes no que podemos identificar como os
pontos mais relevantes, tendo o conjunto de heursticas mais citado na literatura, as Dez Heursticas
de Nielsen, como referncia para comparao. Os conjuntos apresentado por Nielsen e Shneiderman
so muito semelhantes entre s, e embora existam algumas diferenas pontuais, a sua interpretao
subjacente praticamente idntica,
A referncia de Nielsel aos princpios de interaco de Tognazinni fazem sentido visto que ambos
parecem complementar-se. Tognazinni faz referncia a questes como o daltonismo, a lei de Fitts,
legibilidade, etc, temas que Nielsen explora em pormenor em estudos paralelos, mas que no so
identificados textualmente no conjunto de heursticas por s defenidos. Da a necessidade de que
estes conjuntos sejam usados numa primeira abordagem avaliao da usabilidade de um stio, e
posteriormente complementados com directivas de usabilidade especificas para os projectos em curso.
Os principios de Tognazzini referem ainda pontos, como os objectos interface-humano, que apesar de
poderem ser comparados ao princpio da compatibilidade do sistema com o mundo real referido por
42
1. Usabilidade
Nielsen, a sua aplicao est mais orientada para o universo das interfaces de software e no para os
stios Web.
Weinschenk traz uma viso muito diferente das de Nielsen, Schneiderman e Tognazinni apesar de
existirem pontos em comum. Ao contrrio destes ltimos, Weinschenk foca-se mais no lado mental do
utilizador, nos modelos mentais e comportamentais deste. Como conjunto de heursticas independente,
no nos parece apresentar dados suficientes para uma avaliao completa, mas so um bom intrumento
de interpretao do utilizador.
1.3. Usabilidade e Acessibilidade

While the primary focus of Web accessibility is on access by people with disabilities, for a
broader business perspective, you can say that accessibility is about designing your website so
that more people can use it effectively in more situations.
Shawn Lawton Henry, Understanding Web Accessibility, 2006
Falar de usabilidade tambm falar de acessibilidade, uma vez que esta ltima pode ser entendida
como uma subcategoria da primeira: a usabilidade tem como preocupao central todos os
potenciais utilizadores de um dado sistema interactivo, enquanto a acessibilidade estabelece-se como
garantia de que esse mesmo sistema universal e passvel de ser utilizado por todos os utilizadores
independentemente de eventuais limitaes motoras e/ou sensoriais, permanentes ou momentneas,
como uma mo ou um brao lesionado. Com a esperana de vida a aumentar nas sociedades
ocidentais, ou nos pases mais evoludos, prevendo-se um aumento exponencial at 2050 (ONU,
2002) existe um crescente nmero de pessoas com limitaes fsicas associadas ao envelhecimento,
como sejam a diminuio das capacidades fsicas em termos de destreza ou a deteriorao da viso
(Comisso Europeia, 2008), pelo que a acessibilidade constitui assim uma preocupao face s
limitaes motoras e/ou sensoriais permanentes, momentneas e progressivas. Mas o conceito pode
ser ainda mais abrangente, incluindo a circunstncia, o ambiente e o dispositivo utilizado para aceder
Web.
Vrios esforos tm sido realizados no sentido de alertar para a questo da acessibilidade em stios
Web, quer por via legislativa , mbito em que o Estado portugus foi pioneiro(Assembleia da Repblica,
1999), quer atravs da aceitao de normas e princpios como as delineadas pelo World Wide Web
Consortium30 atravs da Web Content Accessibility Guidelines. Esses princpios, actualmente na sua
verso 2.0 (WCAG 2.0),31 so definidos em quatro pontos:
30. O World Wide Web Consortium, ou W3C, uma comunidade internacional liderada por Tim Bernard-Lee,
inventor da web, e por Jeffrey Jaffe, que reune uma srie de organizaes pblicas e privadas desde os meios
acadmicos passando pelo meio empresarial, que tem como objectivo desenvolver standards para as tecnologias
web.
31. http://www.w3.org/TR/WCAG/
43
1. Percepo
A informao e a interface devem ser apresentadas de forma facilmente perceptvel para os utilizadores,
ou seja, qualquer que seja a informao, esta no deve ser invisvel a todos os sentidos.
2. Operabilidade
A interface e os seus elementos devem ser operveis pelo utilizador, ou seja, nenhum dos elementos
interactivos deve requerer uma aco que no possa ser realizada pelo utilizador.
3. Compreenso
A informao contida e as aces da interface devem ser compreensveis para o utilizador.
4. Robustez
O contedo deve ser suficientemente robusto para que possa ser interpretado com fiabilidade por
diversos agentes de utilizao, incluindo leitores de ecr ou braile.
44
2. METODOLOGIAS
Ao falarmos de uma usabilidade acessvel, falamos precisamente num conjunto de metodologias que
possam ser colocadas em prtica sem recurso a especialistas na rea, abrangendo inclusivamente a
necessidade de o prprio estudo de usabilidade ser tambm usvel. Jeff Sauro e Erika Kindlund (2005)
sublinham esta necessidade dada a variedade e complexidade dos dados quantitativos, ou mtricas
de usabilidade, fornecidos por diversas metodologias, afirmando a importncia de se estabelecer uma
normalizao. Por outro lado, Nielsen (2004) aponta riscos nos estudos quantitativos, alertando para
o que afirma ser um fetichismo pelos nmeros que leva a que os estudos de usabilidade se foquem
nos dados estatsticos, muitas vezes enganadores, e no em dados qualitativos concretos obtidos pela
observao e estudos dos utilizadores.
Para Nielsen, a usabilidade uma questo contextual e a sua utilidade depende da compreenso do
comportamento humano. Alm do mais, bons estudos quantitativos so caros e difceis de fazer, como
refere ainda, devendo estes ser conduzidos por peritos na rea.
O processo do Design Centrado no Utilizador apresenta um vasto conjunto de metodologias, de design
de pesquisa e de avaliao, disponveis para o design de interfaces,32 em diversas etapas do projecto,33
sendo objectivo deste estudo focar as metodologias de avaliao, sobretudo as que permitem uma
avaliao qualitativa, assim como a sua fcil aplicao por designers, observando ainda a manuteno
de custos baixos.
O stio Usability.gov sistematiza um conjunto mais compacto de metodologias que devem ser
empregues num processo de Design Centrado no Utilizador, desde card sorting a entrevistas
contextuais, passando por grupos de foco, avaliao heurstica, entrevistas individuais (presenciais e
online), design paralelo, personas, prototipagem, anlise de tarefas, testes de usabilidade, casos de uso e
escrita para a Web.
Por sua vez, Nielsen (1994) introduz o que apelidou de Usabilidade de Guerrilha, um conjunto de
trs metodologias de avaliao qualitativa, cenrios de utilizao, testes de usabilidade simplificados e
avaliao heurstica. Krug (2006) vai ainda mais longe apostando unicamente em testes de usabilidade
simplificados. A W3C, por sua vez, aponta para os percursos cognitivos, avaliao heurstica, reviso de
directivas e teste de usabilidade com prottipos de alta e baixa fidelidade.
32. http://www.usabilitynet.org/tools/list.htm
33. http://www.usabilitynet.org/tools/methods.htm,
45
A lista que apresentamos uma sntese dessas metodologias, escolhidas com base nos princpios
da Usabilidade de Guerrilha descritos por Nielsen mas a que juntamos outras que consideramos
igualmente vlidas no sentido da avaliao da usabilidade de um stio Web, de forma directa, em
diversas etapas do desenvolvimento de um stio Web.
2.1. Personas
Personas so arqutipos que representam os objectivos, comportamentos e necessidades dos mais
diversos grupos de utilizadores de um determinado sistema (Cooper 1999). Criadas com base em
inquritos junto dos utilizadores e stakeholders, as personas permitem conhecer os utilizadores de
um dado stio, actuais ou potenciais, as suas diversas necessidades, objectivos, expectativas e tarefas,
permitindo criar desde cedo uma abordagem estratgica interface com o utilizador em mente.
2.1.1. Tipologias
Cooper (2007) define seis categorias principais de personas:
2.1.1.1. Primrias
Uma persona primria representa o utilizador-alvo do sistema, seja este individual ou no. No caso dos
stios Web, um determinado stio poder ter mais do que um utilizador-alvo, dependendo do tipo de
informao ou servio que este providencia, que poder apelar a um vasto pblico e ao cumprimento
de vrias e distintas tarefas.
2.1.1.2. Secundrias
Secundrias so as personas cujos objectivos podem ser largamente atingidos pela persona primria,
mas que possuem necessidades especiais e/ou particulares que no so consideradas prioritrias, cuja
integrao ou desenvolvimento no prejudica a experincia da persona primria.
2.1.1.3. Suplementares
Personas que no so nem primrias nem secundrias, so apelidadas de complementares. Os seus

objectivos so atingidos na integra pela combinao das personas primrias e secundrias, e ficam
satisfeitas com as solues apresentadas para estas. Por vezes, so personas politicas visto que so fruto
da ideia que os stakeholders tm sobre os utilizadores-alvo da sua plataforma.
2.1.1.4. Clientes
As personas clientes so os prprios clientes do sistema, que em determinadas situaes (como a

utilizao da administrao de um stio) podero ser os prprios utilizadores finais do sistema.
46
2. Metodologias
2.1.1.5. Personas Indirectas
Personas Indirectas no so utilizadores do sistema, mas podero ser afectados por este de forma
directa. Num stio Web, poder ser um pessoa que recebe informao recolhida por uma pessoa que
de facto consultou o stio, permitindo assim recolher informaes sobre as ramificaes causadas pela
utilizao do stio.
2.1.1.6. Personas Negativas
Tal como as Indirectas, as Personas Negativas representam utilizadores para os quais a interface no
est a ser desenvolvida, que no so utilizadores ou potenciais utilizadores, ou que possam ter uma
atitude negativa perante esta. Neste ltimo caso, um bom exemplo de uma pessoa negativa poder ser
um utilizador experiente da interface.
2.1.2. Processo
As personas tm a funo de representar os utilizadores-chave de um determinado sistema ao longo do
processo de desenvolvimento deste, permitindo focar e priorizar os aspectos do design da interface a
desenvolver. Apesar de serem personagens fictcias, devem ser criadas da forma o mais realista possvel
uma vez que constituem representaes de pessoas reais. Tambm devem ser o menos ambguas
possvel, visto ser sua funo criar objectivos concretos sobre os quais a equipa de desenvolvimento
possa definir prioridades no desenvolvimento da interface. Criar personas credveis e teis implica
conseguir uma anlise detalhada do utilizador, assim como uma capacidade de sntese criativa (Cooper
2007), procurando padres de comportamento e categorizando esses mesmo padres. Os principais
passos so:
1. Identificar variveis comportamentais;
2. Mapear os utilizadores em funo dessas variveis;
3. Identificar padres de comportamento significativos;
4. Sintetizar caractersticas e objectivos relevantes;
5. Procurar redundncias;
6. Expandir a descrio de atributos e comportamentos;
7. Categorizar as personas.
Aps este processo, segue-se a construo prtica da persona, que dever conter um perfil de carcter
que inclua:
1. Dados demogrficos de base: nome, idade, profisso, passatempos, interesses, motivaes;
2. Categoria (relao da persona com o stio);
3. Descrio do seu dia tpico;
4. Questes e tarefas relacionadas com o stio;
5. Principais frustraes no cumprimentos das tarefas;
47
6. Habilidade na utilizao da Web e computadores;

7. Tempo disponvel para a tarefa;
8. Objectivos, atitude, necessidades, crenas, etc...
Os objectivos das personas, segundo Cooper (1999), podem ser categorizados da seguinte forma:
Individuais: objectivos universais e pessoais simples que passam pela obteno da informao
pretendida de forma rpida e sem barreiras ou erros;
Corporativos: os objectivos do cliente, como sejam, atrair mais utilizadores para o seu stio e mais
clientes para os seus servios ou produtos;
Prticos: onde os objectivos pessoais e cooperativos se fundem e se do resposta mtua;
Falsos: objectivos irrelevantes para o utilizador e mais vocacionados para as questes tcnicas
do prprio sistema, como sejam, a construo de stios compatveis com qualquer plataforma, a
observao do uso de normas de linguagem de programao, etc.
s personas podem ainda serem associados cenrios de utilizao, dado que as informaes recolhidas
na elaborao do seu perfil permitem ter uma ideia de qual ou quais podero ser as principais
interaces do utilizador com o stio, ou os seus padres comportamentais. Esses cenrios devero
conter informao sobre o objectivo da tarefa que o utilizador pretende, o seu contexto e motivao.
2.1.3. Recursos
Para a realizao de personas, os recursos necessrios so de ordem metodolgica. Embora seja possvel
criar personas com base em dados quantitativos personas hipotticas atravs da anlise do trfego
de um stio (Mulder, 2006), o melhor recurso para a sua criao est na pesquisa e em inquritos junto
dos utilizadores de forma a conhec-los e assim assegurar que a interface desenhada para utilizadores
reais.

A utilizao de personas permite focar as equipas de trabalho nas necessidades, objectivos, expectativas
e tarefas do utilizar (Usability.gov). Sempre presentes desde as etapas iniciais do projecto, as personas
permitem confrontar a arquitectura de informao e inspeccionar a interface com base nessas mesmas
necessidade e objectivos, orientando as opes de design tomadas no sentido de lhes dar resposta
e evitando que o designer se assuma como o utilizar da plataforma e a desenhe com base nas suas
expectativas (Spool, 2007). As personas tm ainda a vantagem de substituir os utilizadores reais quando
estes no esto presentes no processo de desenvolvimento.
48
2. Metodologias
Mas embora permitam conhecer o utilizador, as personas, no entanto, no cumprem na totalidade a

sua funo num processo de desenvolvimento, no substituindo os utilizadores reais na ntegra, pelo
que as interfaces devem sempre ser testadas com utilizadores reais. So teis como ferramenta bsica
de inspeco de usabilidade, permitindo compreender qual as necessidades do utilizador e o seu
eventual percurso no stio, mas podendo eventualmente encontrar alguns problemas, no essa a sua
principal funo, e uma interface criada unicamente com base em personas apenas garantir que o que
o utilizador pretende se encontra presente, mas no que o utilizador de facto o conseguir encontrar.
2.2. Card Sorting

O card sorting uma tcnica que permite perceber como os utilizadores agrupam informao e
como interpretam termos e conceitos. As tcnicas de card sorting so particularmente teis para
a arquitectura de informao, permitindo compreender a forma como os utilizadores agrupam a
informao, e tambm quais os melhores termos a empregar na navegao do contedo.
Em determinados tipos de stios Web, como stios institucionais ou empresariais, a arquitectura de
informao tende a seguir o modelo organizacional dessas entidades, mas quem visita esses stios pode
no saber de que forma essa entidade est organizada, pelo que essa estrutura poder no fazer sentido
para os utilizadores (Mathis, 2011). Empregando esta tcnica, possvel compreender de que forma o
utilizador estrutura o contedo que lhe apresentado, ou seja, como as pessoas de facto o vem.
2.2.1. Tipologias
2.2.1.1. Card Sorting Aberto
Num card sorting aberto, providenciado ao utilizadores um conjunto de termos, inscritos em

cartes individuais um por cada termo , e um conjunto de cartes em branco. ento pedido
aos utilizadores que agrupem esses cartes por afinidade de termos e/ou conceitos, fornecendo
uma descrio genrica para esse agrupamento a ser inscrita nos cartes em branco. Esta tipologia
tem como objectivo compreender de que forma os utilizadores interpretam os termos iniciais que
representam conceptualmente os contedos do stio Web, e que termos genricos julgam ser mais
apropriados para agrupar esses mesmo contedos, estabelecendo uma base para o primeiro nvel na
arquitectura de informao.
2.2.1.2. Card Sorting Fechado
Num card sorting fechado so fornecidos aos utilizadores dois conjuntos de termos, inscritos em
cartes individuais um por cada termo. Com um dos grupos a servir de elemento agregador, os
utilizadores devero distribuir os cartes do segundo grupo pelo primeiro por afinidade de termos e/
ou conceitos. O card sorting fechado til enquanto sistema de validao aps um teste de card sorting
49
aberto, pois permite que os termos sugeridos neste sejam testados de forma a comprovar a sua validade
enquanto elementos de primeiro nvel na arquitectura de informao.
2.2.1.3. Reverse Card Sorting
Num reverse card sorting tambm conhecido por card-based classification so fornecidos
vrios grupos de termos, inscritos em cartes individuais um por cada termo sem ordem prestabelecida, tendo o utilizador de criar um percurso de navegao com eles em funo de uma dada
tarefa. Ao utilizador pedido que alinhe, num percurso linear, os cartes que representem os passos
necessrios para cumprir essa mesma tarefa. O reverse card sorting til enquanto sistema de validao
dos resultados obtidos pelos testes de card sorting aberto e fechado, pois permite no s revalidar o
primeiro nvel da arquitectura de informao, como tambm aferir a profundidade desta para 2, 3 ou
mais nveis de arquitectura de informao.
2.2.2. Processo
As sesses de card sorting sero mais eficientes se previamente forem realizadas: entrevistas com
os utilizadores para compreender as suas necessidades, motivaes e objectivos num determinado
stio Web; personas para sistematizar o utilizador tipo com base nessas entrevista; inventariao do
contedo a ser utilizado pelo stio Web; e cenrios de utilizao que permitam entender quais os
percursos que devero ser construdos para que o utilizador possa cumprir as tarefas que pretende.
Estas sesses podem ser realizadas individualmente ou em grupo, segundo o seguinte modelo tipo:
1. Criar uma lista tpicos ou tipos de contedos, que devero ser inscritos individualmente em
cartes;
2. Numa situao de card sorting aberto, providenciar tambm cartes em branco para que o
utilizador possa escrever o termo genrico para os grupos criados, devendo os cartes ser
numerados de forma que a compilao dos resultados se processe mais facilmente;
3. As sesses devem ser realizadas num espao sossegado, onde exista uma mesa que permita
ao utilizador manipular os cartes sem dificuldade, ou um computador com software de card
sorting;
4. Depois de explicado qual o objectivo do teste ao utilizador, fornecer os cartes pedindo-lhe
que os agrupe de acordo com a tipologia utilizada providenciando cartes em branco, caso
o utilizador considere necessria a incluso de novos termos;
5. Analisar os resultados.

Segundo Nielsen (2004), Tulis e Wood (2004), o card sorting deve ser realizado com, pelo menos, 15
utilizadores, nmero para o qual possvel obter um coeficiente de correlao de 0.9, ou seja, possvel
confirmar com 90% de segurana que o resultado obtido representa o modelo mental formado pelos
50
2. Metodologias
utilizadores. De acordo com o que possvel interpretar do estudo de Tulis e Wood, com 5 utilizadores
possvel obter uma correlao de 0.75, o que em projectos de pequena/mdia dimenso poder ser
um valor aceitvel.
2.2.4. Recursos
O card sorting pode ainda ser realizado da forma mais simples, apenas com recurso a papel e caneta,
mas existe software passvel de ser utilizado sem com isso acrescentar custos adicionais ao projecto,
como o XSort34, para sistemas operativos Mac OS X, e o UXSort,35 para sistema operativos Windows.
Existem ainda ferramentas de card sorting online, como o OptimalSort36 e o WebSort,37 para as quais
necessrio o pagamento de uma licena de utilizao. Em ambos os casos, software e ferramentas
online, possvel no s conduzir as sesses de card sorting como ainda obter tabelas de dados
quantitativos relativamente s sesses realizadas.

O card sorting uma tcnica fcil e barata de realizar e que permite analisar a melhor forma de
estruturar a informao e o vocabulrio utilizado (Rubin e Chisnell, 2008). Pode ser feita com eficincia
sem a utilizao de qualquer tipo de software, embora este exista.
Um dos principais problemas do card sorting, no entanto, est na leitura e interpretao dos resultados
obtidos, habitualmente organizados em dendrogramas ou diagramas de afinidade, que exigem recurso
a um analista experiente. De natureza quantitativa, as estatsticas apresentadas podem ser tendenciosas
e enganadoras (Nielsen, 2004), e embora apresentem por vezes dados consistentes entre utilizadores,
outras vezes, esses dados podem ser bastante dspares. assim aconselhada uma anlise qualitativa
em paralelo, sendo pedido aos utilizadores para verbalizarem oralmente as suas decises, de forma a
compreender as razes para as suas escolhas.
Como tcnica orientada para a arquitectura de informao, e embora possa ser utilizado para encontrar
problemas de usabilidade na navegao de um stio Web, o card sorting no se foca no cumprimento
de tarefas, excepto nas situaes em que utilizada a tcnica de reverse card sorting. Tambm no
til para encontrar problemas de usabilidade na interface grfica no seu todo, no devendo os seus
resultados ser interpretados como uma verdade cientificamente correcta, mas sim como uma boa base
de trabalho que posteriormente poder ser alterada em outras fases do projecto onde a interface no seu
todo possa ser avaliada.
34. http://www.xsortapp.com/
35. http://www.uxsort.com/home
36. http://www.optimalworkshop.com/optimalsort.htm
37. http://uxpunk.com/websort/
51
2.3. Prototipagem
No caso especifico do design de interfaces, por prottipo entende-se a representao visual da interface
do utilizador. Embora um prottipo no seja inerentemente interactivo (um esboo, p.ex.), este poder
representar uma progresso espacial e fornecer um limitado grau de interaco entre o utilizador e o
sistema.
Um prottipo pode ser desenvolvido em diversas etapas, usando diversas ferramentas. Inicialmente,
um prottipo pode ser desenvolvido em papel, onde apenas so indicados os respectivos elementos
estruturais (wireframes), evoluindo subsequentemente para verses mais complexas com recurso a
ferramentas de design, outros sistemas que clonem aquele em que o projecto ser produzido (como
CMS)38 ou mesmo verses alfa do sistema final.
Os prottipos no tm necessariamente de replicar todas as funcionalidades do sistema, mas devem
replicar na ntegra o necessrio para a realizao de determinado teste.
2.3.2. Tipologias
2.3.2.1. Prototipagem Horizontal
Um prottipo horizontal representa apenas as funcionalidades de primeiro nvel. Serve sobretudo para
testar e analisar a navegao principal e deve representar ainda o resultado inicial da interaco desse
primeiro nvel.
2.3.2.2. Prototipagem Vertical
Um prottipo horizontal representa a progresso ao longo de um sistema para completar determinada

tarefa, permitindo que o utilizador interaja com a estrutura hierrquica de determinada funcionalidade.
Os prottipos podem ser de baixa ou alta fidelidade, com base nas seguintes dimenses:
1. Detalhe;
2. Funcionalidade;
3. Similaridade de interaco;
4. Aproximao esttica;
38. CMS, Content Managment System ou Sistema de Gesto de Contedos.

52
2. Metodologias
2.3.2.3. Prototipagem de Baixa Fidelidade
Os prottipos de baixa fidelidade so representaes simples da interface, com um nvel baixo de

detalhe e num suporte diferente da verso final da interface. No mostram, necessariamente, o design
final da interface, podendo mesmo por vezes mostrar apenas a estrutura geral em esboo.
2.3.2.4. Prototipagem de Alta Fidelidade
Os prottipos de alta fidelidade so representaes fieis da interface, com um alto nvel de detalhe e
apresentado no mesmo suporte que a verso final (mas no necessariamente no mesmo software).
Representam todas ou quase todas as funcionalidades do stio, assim como os respectivos contedos.
2.3.4. Processo
O processo de prototipagem comea com os primeiros esboos da interface, nomeadamente da sua
estrutura, como o cabealho, menus, contedos, contedos suplementares, menus de apoios, posio
de ttulos, texto, imagem, etc. A utilizao de esboos manuais, menos rigorosos, permite que vrias
solues possveis possam ser idealizadas de forma rpida antes da passagem das solues mais
bem sucedidas para etapas posteriores onde os detalhes vo sendo estruturados e afinados. Estes
esboos rpidos tanto podem ser de pginas estticas, como j prever um progresso ao longo do
stio, representando pginas de diferentes hierarquias na arquitectura de informao, seja por via da
prototipagem horizontal, seja por prototipagem vertical.
medida que o desenho vai sendo refinado, surge ento a necessidade de criar prottipos mais
rigorosos e mais funcionais, quer atravs de software desktop que permita desenvolver prottipos
estticos ou funcionais, quer mesmo, em fases mais avanadas, com a construo de prottipos que
simulem o sistema, utilizando HTML e CSS.

Ao realizar testes de usabilidade com prottipos (de baixa ou alta fidelidade) deve ser usado o mesmo
nmero de utilizadores referido no ponto 2.6.3., relativo aos testes de usabilidade.
2.3.6. Recursos
A prototipagem pode ser realizada de forma mais simples, apenas com recurso a papel e caneta, o que
se designa por prottipos em papel. medida que o processo de trabalho requere prottipos mais fiis
interface ou mais fiis sua funcionalidade, torna-se necessrio o recurso a ferramentas de design,
como software que permita desenho vectorial, ou mesmo programas de tratamento de imagem.Outros
53
programas h ainda que, para alm de permitirem o desenho, permitem tambm algumas interaces
simples que podem simular a utilizao de links , botes ou menus de um stio.

A utilizao de prottipos da interface permite recolher informao junto dos utilizadores sobre
a usabilidade da interface que se encontra a ser desenvolvida. Nielsen (2003) salienta este facto,
sublinhando que, atravs da prototipagem, possvel criar rapidamente uma representao da
interface e test-la com utilizadores numa etapa do design onde as eventuais alteraes interface
posam tambm ser realizadas rapidamente e de uma forma econmica para o projecto. Num estudo
comparativo (Walker, et al., 2002), a questo do nvel de fidelidade dos prottipos face ao utilizador
revelou-se de pouca importncia, j que ambos se revelam capazes de assegurar um bom feedback da
parte do utilizador.
Prottipos de alta fidelidade tm no entanto uma vantagem suplementar, uma vez que, ao garantirem
uma representao o mais realista possvel da interface algo que os prottipos menos funcionais, ou
de baixa fidelidade, no garantem -, no s permitem afinaes finais em termos de usabilidade, como
uma defesa mais consistente das opes seguidas perante os stakeholders (Johansson, et al. 2007).
2.4. Percurso Cognitivo

O Percurso Cognitivo uma ferramenta de inspeco, com base nos cenrios de utilizao, onde a
interface navegada com o objectivo de cumprir uma tarefa, anotando pelo caminho se todas as opes
necessrias e ferramentas para o cumprimento dessa mesma tarefa esto visveis e so claras para o
utilizador (Wharton, 1994) (Rieman, et al. 1995).
2.4.1. Processo
As tarefas a cumprir devero ser divididas em passos (num stio, podem ser as diferentes pginas
necessrias para o cumprimento da tarefa) e em cada passo devero ser feitas as seguintes perguntas, a
ttulo de exemplo (Wharton, 1994):
1. A aco executada respeita os objectivos do utilizador neste momento?
2. O utilizador vai ver a aco disponvel?
3. O utilizador ir reconhecer que a aco a que precisa?
4. Ir o utilizador perceber o feedback recebido?
Ao dividir a tarefa em diferentes passos, possvel identificar em que momentos o interface falha
no fornecimento da informao necessria para o utilizador cumprir a tarefa, quer atravs das
54
2. Metodologias
funcionalidade necessrias para cumprir essa mesma tarefa (menu, hiperligaes, botes, contedo,
etc.), ou dos avisos imprescindveis em caso de erro.

A inspeco por Percurso Cognitivo no envolve necessariamente utilizadores, apresentando-se como
uma metodologia que pode ser conduzida pela equipa de design de uma interface visual (Wharton,
1994).
2.4.3. Recursos
Para a realizao de uma inspeco por Percurso Cognitivo, os recursos necessrio, para alm
das ferramentas e suportes consideradas necessrias para apontamentos e notas, so de ordem
metodolgica. O Percurso Cognitivo inspecciona a interface por via da realizao de tarefas, pelo
que necessria a existncia de um prottipo da interface com um bom nvel de detalhe e tarefas
previamente estabelecidas e descritas (Lewis, 1994), que podem ser estabelecidas atravs dos cenrios
de utilizao das personas.

O Percurso Cognitivo permite encontrar problemas de usabilidade relativos s tarefas do utilizador
desde as primeiras etapas do desenvolvimento da interface, mas no permite encontrar todos os
problemas, uma vez que as personas e os cenrios de utilizao abrangem sobretudo as tarefas mais
espectveis, mas no todas as tarefas que so possveis de realizar. Para a sua realizao, necessria
a existncia de tarefas pr-definidas e aconselhvel algum treino prvio nesta metodologia bem como
ter em conta que esta procura apenas verificar a facilidade com que o sistema utilizado, deixando de
fora outros princpios de usabilidade. Noutro aspecto, a no utilizao de utilizadores reais tambm
no garante que os resultados obtidos sejam inteiramente vlidos, pelo que um teste de usabilidade
posterior sempre aconselhado.
2.5. Avaliao Heurstica

Por Avaliao Heurstica entende-se uma avaliao, feita por peritos, baseada nas Heursticas de
Usabilidade, que avaliam o sistema e elaboram um relatrio visando o cumprimento dos princpios
que lhe esto associados. um dos mtodos mais informais, mas, ao mesmo tempo, tambm
considerado como um dos principais relativamente ao equilbrio custo/benefcio (Nielsen, 1990).
Comparativamente a outras metodologias, onde o avaliador deve interpretar as aces do utilizador,
na Avaliao Heurstica no necessria a interpretao por parte de terceiros, porque as ideias,
comentrios e informaes elaboradas pelos avaliadores est contida nos seus relatrios.
55
2.5.1. Tipologias
2.5.1.1. Percurso Heurstico
O Percurso Heurstico apresenta-se como um hbrido entre o Percurso Cognitivo e a Avaliao

Heurstica (Sears, 1997). Num Percurso Heurstico, o avaliador confronta o sistema com um conjunto
de Heursticas reconhecido, com base nos cenrios de utilizao previstos para esse sistema. Segundo
Sears, este modelo hbrido permite encontrar mais problemas de usabilidade do que o Percurso
Cognitivo, reduzindo a ocorrncia de falsos positivos que se verificam nas Avaliaes Heursticas, pois
a avaliao foca-se exclusivamente na realizao das tarefas do utilizador no sistema.
2.5.2. Processo
Numa Avaliao Heurstica os avaliadores confrontam um dado sistema ou interface com um conjunto
de heursticas reconhecido, de forma individual, providenciando um comentrio crtico sobre a
observao ou no dos princpios estabelecidos por essas heursticas. Uma vez concluda, os avaliadores
comparam os resultados obtidos individualmente e elaboram uma relatrio final com os problemas
encontrados cruzando os seus dados com os dados obtidos por outros avaliadores.
Os problemas encontrados no mbito de uma Avaliao Heurstica podem ser de diversa gravidade
(Nielsen, 1992), sobretudo em etapas inicias do design, devendo ser enquadrados numa escala de
severidade, de forma a permitir uma melhor viso sobre a influncia e urgncia de resoluo de um
problema. Estas escalas podero ser de trs ou cinco nveis (Pierotti, 1996), a saber:
Escala de severidade de trs nveis
1. Problema meramente cosmtico causador de dificuldades mnimas;
2. Problema ao nvel da realizao da tarefa, ou que confunde o utilizador, mas em que a
recuperao possvel;
3. Problema que impede o utilizador de realizar determinada tarefa ou causa extremas
dificuldades.
Escala de severidade de cinco nveis
1. Problema meramente cosmtico que no afecta a usabilidade do sistema e cuja recuperao
possvel;
2. Problema menor, passvel de ser facilmente contornado pelo utilizador, podendo ser a sua
reparao de baixa prioridade;
3. Problema mdio, capaz de confundir o utilizador mas ao qual possvel que este se adapte,
devendo a reparao ser de prioridade mdia;
4. Problema grave que faz com que o utilizador tenha extremas dificuldades na realizao do seu
trabalho, sendo possvel contorn-lo mas exigindo que a sua reparao deva acontecer antes
do sistema ser lanado - e no sendo possvel a reparao, a documentao dever mostrar
claramente ao utilizador uma alternativa;
56
2. Metodologias
5. Problema catastrfico que impede o utilizador de realizar o seu trabalho e que exige uma
reparao obrigatria e urgente.

Estudos mostram que um nmero de entre 3 a 5 avaliadores mais do que suficiente para a avaliao
por critrios de um stio Web, (Nielsen, 1994) com mais de 75% de erros encontrados. Apesar da
Avaliao Heurstica ser entendida como uma avaliao realizada por peritos, e ser recomendada
a utilizao de avaliadores experientes (Nielsen, 1992), esta pode no entanto ser efectuada por
utilizadores no especialistas, aconselhando-se neste caso que seja realizada por mais de 5 avaliadores
(ij, 2001).
2.5.4. Recursos
Para a realizao de uma Avaliao Heurstica, os recursos necessrio so apenas as ferramentas e
suportes consideradas necessrias para apontamentos e notas. A realizao destes no exige o recurso
a prottipos do sistema ou da interface, podendo ser assim efectuada com esboos integrais ou parciais
da interface, ou com wireframes.

A Avaliao Heurstica permite confrontar a interface com um conjunto de Heursticas de Usabilidade
reconhecidas, procurando detectar os principais problemas de usabilidade. Sendo inspeco guiada
pelos principais objectivos de usabilidade, a Avaliao Heurstica no uma metodologia eficaz para
avaliar e sistematizar problemas de pormenor, que s com testes com utilizadores reais podero ser
encontrados.
No caso de um stio totalmente funcional, aconselhvel realizar a Avaliao Heurstica antes de a
testar com os utilizadores. Um teste com utilizadores prvio s serviria para detectar problemas de
usabilidade que, numa avaliao heurstica, teriam sido facilmente detectados pelos peritos a um
custo muito mais reduzido. Devido a estes problemas, muitos utilizadores podem ficar bloqueados nas
fases iniciais do processo a avaliar e muitos dos elementos importantes podero eventualmente no
ser avaliados, a menos que os utilizadores sejam instrudos sobre como ultrapassar as dificuldades, o
que anularia a validade do teste. Identificar primeiramente os problemas mais graves de usabilidade
na avaliao por critrios heursticos permite realizar posteriormente testes com utilizadores com
melhores resultados.
57
2.6. Teste de Usabilidade

Este o mtodo mais comum para a avaliao de usabilidade, designado tambm como Thinking
Aloud Test ou Mtodo de Verbalizao do Pensamento. O Teste de Usabilidade pode ser realizado em
diversas fazes do projecto e em conjunto com outras metodologias. Numa situao de redesenho de um
stio Web existente, o teste servir para aferir quais os actuais problemas de usabilidade da interface e
que pontos especficos devem ser resolvidos pela nova interface.
Seguidamente, pode ser utilizado para testar os primeiros prottipos da interface na fase inicial do
projecto, sejam esses prottipos em papel, digitais ou funcionais, de alta, mdia ou baixa fidelidade,
seguindo os princpios do design iterativo design > prototipagem > teste > anlise > redesenho ou
em fases mais avanadas do projecto em que a interface se encontre perto de ser implementada.
2.6.1. Tipologias
O Teste de Usabilidade pode ser dividido em duas tipologias, embora na sua essncia sejam o mesma.
Esta distino entre Teste Tradicional e Teste Informal proposta por Krug (2006) vem no seguimento
do que Nielsen (1989, 1997) j havia referido: a possibilidade de conduzir estes testes com elevados
graus de custo/benefcio (1994), sem que com isso tenhamos de utilizar um laboratrio de usabilidade,
com todo o equipamento necessrio, e a custos bem reduzidos.
Teste Tradicional
Teste Informal
Nmero de utilizadores
Normalmente, oito ou mais para

justificar o custo
Trs ou quatro
Esforo de recrutamento
Seleccionados cuidadosamente de
forma a representarem a audincia
alvo
Qualquer pessoa que utilize a Web
Onde testar?
Num laboratrio de usabilidade, com

uma sala de observao e um espelho
falso
Num escritrio ou sala de conferncias
Quem faz o teste?
Um profissional de usabilidade
experiente
Uma pessoa paciente
Planeamento Antecipado
Tem de ser preparado com semanas

de antecedncia para se reservar um
laboratrio de usabilidade e haver
tempo para recrutar
Pode ser efectuado praticamente

em qualquer altura e com pouca
antecedncia de marcao
Preparao
Esboo, discusso e reviso do

protocolo de teste
Decidir o que se pretende mostrar
Quando Testar?
A menos que se disponha de um

oramento flexvel, testar o stio de
uma vez s quando este estiver perto
da concluso
Desenvolver pequenos testes

continuamente ao longo do processo de
desenvolvimento
Custo
Elevado
Reduzido
58
2. Metodologias
O que acontece depois
Um relatrio de 20 pginas surge uma A equipa de desenvolvimento

semana depois, e depois a equipa de
(incluindo o cliente) pode reunir no
desenvolvimento rene e decide quais prprio dia e tirar concluses imediatas
as alteraes a fazer
2.6.2. Processo
Antes de se proceder realizao dos testes, necessrio estabelecer os objectivos do teste, as reas e os
cenrios de utilizao a serem testados e quais as questes que se pretende ver respondidas ao longo da
interaco com a plataforma, assim como num questionrio a ser respondido pelo utilizador no final
da interaco. Nesse questionrio, devem ser evitadas perguntas genricas que respondam a questes
globais da interaco, procurando sim respostas concretas por parte dos utilizadores para pormenores
especficos dessa mesma interaco.
Quanto s tarefas que devero ser cumpridas pelos utilizadores, as mesmas devero ter em conta os
cenrios de utilizao pr-estabelecidos anteriormente, que so assim validados, ou no, por esses
mesmos testes.
Durante um teste de usabilidade temos a possibilidade de observar utilizadores reais a interagir com o
stio e a executar tarefas que se aproximam dos seus objectivos. O principal objectivo da realizao de
um teste tentar perceber quais as componentes da interface que dificultam a interaco, sendo, por
isso, importante que o stio no seja discutido antecipadamente com os sujeitos, para que eles possam,
desde o primeiro contacto, dizer se perceberam para que serve o stio e como que ele funciona.
A realizao do teste deve ser acompanhada por um facilitador cuja funo impedir o sentimento de
frustrao por parte do utilizador na utilizao do interface testado, orientando-o ao longo do teste da
interface.
Krug (2000) refere que a tarefa do facilitador dizer aos utilizadores quais as tarefas que eles devem
executar, encoraj-los a pensar alto descrevendo as razes por detrs das escolhas efectuadas, ouvir
cuidadosamente o que eles tm a dizer e proteg-los. Durante a realizao do teste, o mais importante
ser que os utilizadores percebam que o objecto do teste a interface do stio, no eles prprios, e que,
como refere Lukas Mathis (2008), cada erro que eles cometam ir ajudar a melhorar o stio.
Para alm do facilitador, o teste deve contar ainda com um observador que, ao longo da interaco
do utilizador com a interface , deve tirar notas extensivas do que est a acontecer, porque mais tarde
alguns dados podero cair no esquecimento. Essas notas podem ser tiradas seguindo um formato
livre ou preenchendo uma lista previamente elaborada com todos os pontos essenciais para responder
s perguntas iniciais levantadas pelos cenrios de utilizao. A forma mais eficaz ser a combinao
de ambos os mtodos, o que permite ao observador, por um lado, certificar-se que nenhum ponto
importante esquecido e, por outro lado e ao mesmo tempo, adicionar qualquer informao que ache
relevante.
59
Aps a realizao do teste aconselhvel fazer um pequeno questionrio aos utilizadores, perguntando
o que gostaram e o que no gostaram, que funcionalidades esperariam de uma aplicao semelhante e
se a iriam utilizar no futuro.
Todo o teste registado em formato vdeo e udio, quer atravs da utilizao de equipamento externo
ou de software prprio que registe o que se passa no ecr do computador. Quando a sesso registada
em vdeo e/ou udio, o utilizador dever dar o seu consentimento para tal, se necessrio atravs de uma
autorizao escrita, assegurando este que a sua privacidade ser respeitada e que os dados registados
nunca sero divulgados publicamente. Numa situao em que o autor do design da interface tambm
o facilitador do teste, o utilizador deve ser mantido alheio a este facto pois, se estiver consciente do
mesmo, maior dificuldade ter em manter uma atitude crtica sobre a interface.
O teste deve comear por apresentar a plataforma a cada utilizador, para que este possa, numa fase
posterior, desempenhar as tarefas previamente definidas pelos cenrios de utilizao.
Krug (2000) define dez pontos essenciais a ter em mente quando se pretende realizar um teste de
usabilidade:
1. Testar o Teste. Antes de efectuar o teste com utilizadores, o teste em si deve ser testado na
ntegra de forma a assegurar que as tarefas podem ser cumpridas, no tempo programado, e
que todas as interaces esto disponveis ou providenciam informao concreta sobre o que
fazer se estas no estiverem activas; deve-se ainda certificar que todo o equipamento para
recolha dos dados est operacional.
2. Proteger o Utilizador. Caso o utilizador encontre dificuldades em cumprir determinada
tarefa, deve-se evitar que o mesmo fique frustrado, ajudando-o voltar atrs, se necessrio,
agradecendo sempre tudo o que o utilizador fez, e deixando bem claro que a sua participao
no testes extremamente til, que todos os dados recolhidos so importantes e que qualquer
problema se deve interface e no ao utilizador.
3. Ser simptico e paciente. Talvez o mais importante conselho para a realizao dos testes:
uma atitude afvel e positiva muito importante de forma a deixar o utilizador o mais
vontade possvel, pois um facilitador frustrado perante o teste a ser conduzido influencia
negativamente a motivao do utilizador.
4. Perceber o pensamento do utilizador. O teste de usabilidade procura obter dados sobre
o modelo mental do utilizador, pelo que importante que este v verbalizando o seu
pensamento ao longo do teste, e, sempre que parea bloqueado e pensativo, pea-lhe que diga
em que est a pensar.
5. No fornecer pistas. Se o utilizador encontrar obstculos na interaco e sentir-se frustrado,
deve-se evitar dar-lhe pistas sobre que caminho a seguir, pois dessa forma ir viciar-se os
resultados.
6. Dar instrues simples. As instrues dadas aos utilizadores devem ser o mais simples e claras
possvel, evitando termos tcnicos que o utilizador possa desconhecer, e repetindo-as as vezes
que forem necessrias.
60
2. Metodologias
7. Sondar o utilizador. Ao longo do teste, e sempre que o utilizador efectuar algum comentrio
que se julgue pertinente, deve-se perguntar mais sobre esse comentrio de forma a obter o
mximo possvel de dados.
8. Improvisar. Na mesma sesso e nos ltimos testes os utilizadores podero enfrentar problemas
que os testes anteriores j diagnosticaram, devendo-se, nesse caso, explicar o que aconteceu e
que o erro j est diagnosticado, encaminhando o utilizador para outro cenrio de utilizao.
9. No ficar desiludido com utilizadores inexperientes. Aprende-se mais com utilizadores
inexperientes do que com utilizadores experientes.
10. Escrever notas no final de cada sesso. Mesmo que a sesso esteja a ser gravada, deve-se
sempre escrever notas sobre o que mais de relevante se passou, de forma a evitar que estas
sejam esquecidas.

Estudos mostram que a realizao de testes de usabilidade com cinco utilizadores suficiente para
encontrar 75% dos potenciais erros. Para 100% dos erros encontrados, j se torna necessria a
realizao de testes com quinze utilizadores (Nielsen, 2000).
2.6.4. Recursos
Um teste de usabilidade clssico, envolve meios amplos e dispendiosos, e geralmente efectuado
por empresa especializada, em laboratrios construdos especificamente para o efeito, com vidros
espelhados, cmaras para captar o rosto dos utilizadores e o ecr, e sistemas de gravao udio.
Num teste informal, s necessrio equipamento de registo udio e vdeo externos quando so testados
prottipos em papel, ou um computador equipado com um sistema de registo do ecr quando testados
prottipos funcionais ou verso alfa do sistema, como o Quicktime39, para sistemas operativos Mac OS
X e Windows ou o Silverback40, um software desktop especfico para a realizao de testes de usabilidade
que implica o pagamento de uma licena de utilizao para sistemas operativos Mac OS X, ou ainda o
Camtasia41, que disponibilizado para sistemas operativos Mac OS X e Windows.

O teste de usabilidade com utilizadores o teste por excelncia. O recurso a utilizadores reais permite
recolher dados mais concretos em termos de usabilidade, e, como Nielsen refere (2000), permite
identificar um largo espectro de erros de forma rpida e com recurso a poucos utilizadores. Alm do
39. http://www.apple.com/quicktime/download/
40. http://silverbackapp.com/
41. http://www.techsmith.com/camtasia.html
61
mais, a simplicidade como os testes podem ser conduzidos por no especialistas permite que possam
ser efectuados por qualquer membro de uma equipa de trabalho, especialmente os designers, uma vez
que os resultados destes testes tm implicao directa no design da interface (Nielsen, 2007). Como
Nielsen sublinha ainda (2009), sempre prefervel um estudo com utilizador mal conduzido, a nenhum
estudo.
O teste no do todo infalvel, pois h sempre o perigo do prprio utilizador, que se encontra num
ambiente artificial de utilizao, fornecer dados errados, seja por falta de motivao para o teste, ou por
nervosismo, ou qualquer outra razo.
62
3. CASOS DE ESTUDO
Aps o levantamento das questes relacionadas com o estudo da usabilidade e principais metodologias
para a avaliao qualitativa da usabilidade no design para a Web, seguiu-se a sua aplicao em casos
reais com o objectivo de no s validar as suas vantagens e desvantagens anteriormente enumeradas,
como verificar as suas mais valias para um projecto de desenvolvimento de um stio Web, quer, por um
lado, numa perspectiva do design centrado no utilizador, quer, por outro, numa perspectiva de baixo
custo.
Os casos de estudo que se seguem foram todos realizados no mbito da nossa actividade profissional
no id:D FBAUP, um grupo de investigao em design criado no seio da Faculdade de Belas Artes e que
integra o respectivo Centro de Estudos, que presta servios em vrias reas do design para o exterior.
3.1. Novo Stio da Universidade do Porto

A Universidade do Porto, doravante identificada pela sigla UP, a maior instituio de ensino e
investigao cientfica em Portugal, com cerca de 31.000 estudantes, 2.300 professores e investigadores
e 1.700 funcionrios no docentes espalhados por 15 escolas e 69 unidades de investigao, distribudas
por trs polos universitrios localizados na cidade do Porto, aos quais se juntam mais de 2.000
estudantes estrangeiros ao abrigo dos mais variados programas de intercmbio que a UP mantm com
escolas de vrios pontos do mundo. Na sua oferta curricular contam-se mais de 700 programas de
formao (entre licenciaturas, mestrados e doutoramentos, passando pela educao contnua).42
3.1.2. Projecto
As metas a atingir pelo novo stio foram transmitidas pela Dra. Lgia Ribeiro, Pr-Reitora para as
Tecnologias de Informao e Comunicao da UP numa reunio preparatria, consistindo as mesmas
em:
1. Apresentar a UP comunidade em geral;
42. http://sigarra.up.pt/up/web_base.gera_pagina?P_pagina=122225
63
2. Cativar estudantes para os vrios ciclos de estudos oferecidos pela UP, incluindo a educao
contnua;
3. Divulgar o trabalho de investigao realizado pela UP e captar parceiros para projectos e
investigadores de referncia;
4. Fomentar a transferncia de tecnologia;
5. Fomentar a cooperao internacional;
6. Fomentar e manter uma relao de proximidade com os antigos estudantes da UP;
7. Contribuir para a construo e comunicao de uma imagem pblica de qualidade e
dinamismo da UP, uma imagem que, apesar da organizao distribuda da UP possa ser
interpretada como coesa, revele unidade na diversidade;
8. Permitir um conhecimento mais prximo da realidade de cada Faculdade da UP e do que cada
uma se faz na comunidade acadmica.
Entre diversos problemas levantados junto da equipa reitoral da UP, assim como junto dos utilizadores
do stio da UP, esto referenciados problemas de usabilidade gerais e, de forma mais especfica, de
arquitectura de informao e navegao, sendo este um dos pontos a melhor consideravelmente.
Para a realizao do projecto foram estabelecidas trs equipas de trabalho: uma equipa de design
e usabilidade constituda pelo grupo de colaboradores do id:D FBAUP e pelo seu coordenador;
uma equipa de produo de contedos do Departamento de Comunicao e Imagem da UP; e uma
equipa de programadores do Departamento de Informao e Comunicao da UP, responsvel pelo
sistema SIGARRA, sobre o qual a plataforma dever ser implementada. Um conjunto abrangente de
metodologias baseadas nas boas prticas do Design Centrado no Utilizador, incluindo metodologias de
avaliao qualitativa da usabilidade, foi estabelecido previamente para este projecto. Essa metodologias
so as que seguidamente se descrevem na calendarizao, podendo ainda nos anexos ser consultada
documentao complementar sobre o projecto.
3.1.3. Calendarizao
Projecto de grande envergadura, este foi divido em cinco fases de trabalho com a durao total prevista
de um ano, tendo por base as etapas estratgicas definidas pelo Design Centrado no Utilizador: Anlise,
Design, Avaliao, Implementao. Constrangimentos vrios, sobretudo decorrentes de atrasos na
disponibilizao, por parte da equipa de programao da Faculdade de Engenharia, de uma instalao
limpa do sistema a utilizar, impediram o cumprimento do calendrio estabelecido inicialmente e que
consistia no seguinte:
Fase 1: Estudos Prvios (Novembro 2011 a Janeiro de 2012)
1. Reunies preparatrias com o cliente;
2. Estudos de utilizao do stio actual realizados em unidades orgnicas da UP com utilizadores
representativos dos diferentes pblicos-alvo;
3. Inqurito online junto da comunidade acadmica da UP;
4. Relatrio analtico com as concluses do estudo prvio e do inqurito.
64
3. Casos de Estudo
Fase 2: Anteprojecto (Dezembro 2011 a Fevereiro de 2012)

1. Definio de personas e cenrios de utilizao;
2. Definio das reas de contedo do stio;
3. Inventrio de contedo;
4. Arquitectura de informao;
5. Mapa do stio;
6. Directivas de acessibilidade;
7. Directivas de usabilidade;
8. Wireframes, estruturas de navegao e estudos gerais de layout.
Fase 3: Design (Fevereiro de 2012 a Abril de 2012)
1. Definio da arquitectura de informao final;
2. Mapa do stio final, incluindo designaes das seces e pginas do stio;
3. Testes arquitectura de contedos e terminologias finais;
4. Incio do desenvolvimento do livro de estilo do stio;
5. Projectos de layout finais;
6. Realizao de testes com utilizadores durante o desenvolvimento dos projectos de layout finais;
7. Plano de manuteno e reviso de contedos do stio;
8. Mapa de produtores de contedo;
9. Implementao do projecto.
Fases 4 e 5: Implementao (Abril de 2012 a Julho de 2012)
1. Testes de usabilidade e acessibilidade verso alfa do stio;
2. Testes de usabilidade e acessibilidade verso beta do stio;
3. Desenvolvimento de directivas para os projectos de layout dos stios das diferentes unidades
orgnicas.
3.1.4. Metodologias
3.1.4.1. Avaliao Heurstica
Ficou estabelecido desde o primeiro momento que o novo stio da UP continuaria a ter como base o
sistema SIGARRA43 actualmente em uso, pelo que a equipa de design realizou uma avaliao heurstica
ao actual stio da UP de forma a estabelecer uma lista de prioridades. Para esta avaliao, foram tidas
em conta as Dez Heursticas de Usabilidade de Nielsen descritas anteriormente, mas sem recurso a
escalas de severidade, tendo-se optado assim por uma avaliao qualitativa em vez de quantitativa. A
anlise detectou vrias falhas no stio em todas as dez heursticas (ver Anexo A).
43. Sistema de Informao para Gesto Agregada dos Recursos e dos Registos Acadmicos. Plataforma utilizada
na totalidade da UP como sistema de intranet, como tambm como sistema de gesto de contedos dos variados
stios pblicos das diferentes unidades orgnicas
65
Com base nos resultado obtidos nos inquritos junto dos utilizadores do stio up.pt, foi elaborado um
conjunto de personas primrias e secundrias que personalizassem os utilizadores dominantes com
uma breve descrio biogrfica, interesses e motivaes e possveis cenrios de utilizao (ver Anexo
B).
Figura 13. Uma das personas criadas para o projecto UP
A realizao das personas e cenrios de utilizao mostrou-se importante na definio da arquitectura

de informao e como ferramenta de inspeco da interface na ptica do cumprimento de tarefas para
os testes de usabilidade realizados mais tarde.
As reunies preliminares com o cliente e com a equipa de produo de contedos, assim como as
anlises de contedos do stio actual, permitiram criar um mapa do stio e um primeiro esboo da
arquitectura de informao do mesmo (ver Anexo C). De forma a validar as designaes empregues na
estrutura de navegao, foi conduzida uma sesso de card sorting com 10 utilizadores que teve lugar na
Faculdade de Belas Artes. Optou-se por realizar esta sesso de forma informal, indo ao encontro aos
utilizadores, de forma a obter ganhos de tempo, o que acabou por se concretizar.
Ao optar-se por um modelo mais informal, baseado nos princpios da Usabilidade de Guerrilha,
eliminou-se por completo a necessidade, no s de reservar um espao, com todos os constrangimentos
de tempo e logstica, como de contactar previamente os utilizadores e programar datas especficas para
que estes realizarem os testes. Os testes foram assim executados praticamente no momento em que se
66
3. Casos de Estudo
achou necessrio, tendo para isto bastado um reunio preparatria para reunir o material e preparar a
moderao necessrios.
Os 10 utilizadores foram seleccionados entre estudantes, professores e funcionrios da Faculdade
de Belas Artes, com o cuidado de obter uma amostra representativa dos diferentes pblicos. A
escolha de utilizadores oriundos do mesmo estabelecimento de ensino deveu-se ao facto de ser neste
estabelecimento onde o id:D opera, e onde se poderia fazer rapidamente os testes pretendidos. Foram
assim realizados testes junto de seis estudantes (incluindo um estudante estrangeiro), dois professores
e dois funcionrios, tendo os resultados validado em boa parte a primeira proposta da arquitectura de
informao.
Os testes foram realizados com o recurso a software gratuito, tendo-se optado pelo modelo de card
sorting fechado com 10 utilizadores, nmero que se considerou suficiente para recolher dados
relevantes, apesar do nmero mnimo aconselhado ser de 15 utilizadores. Aos utilizadores foi
apresentado um conjunto de grupos que identificavam as seces do primeiro nvel do menu e um
conjunto vasto de cartes representando os restantes nveis. Os utilizadores, na esmagadora maioria,
optaram por no criar trs nveis de organizao, mas admite-se aqui que o processo no tenha sido
devidamente explicado, limitando-se a associar os cartes aos grupos que julgaram testar relacionados.
Figura 14. Still de uma sesso de card sorting realizada do mbito do projecto UP
Os resultados, excepto em algumas designaes genricas sem significado sem uma associao
contextual, como Unidades ou Transferncia de Tecnologia, comprovaram a validade da primeira
proposta de arquitectura de informao, tendo-se registado no entanto comentrios sublinhando a
estranheza na diferenciao entre Inovao e Investigao, em ambos os grupos de primeiro nvel.
Tambm foi sublinhado pela maioria dos utilizadores estudantes que a associao de primeiro Ciclo
(Licenciatura), segundo Ciclo (Mestrado) e terceiro Ciclo (Doutoramento) a Estudar deveu-se
unicamente ao reconhecimento destas designaes posterior sua entrada na Universidade, e que
estas lhes eram totalmente desconhecidas enquanto alunos pr-universitrios. Sem excepo, os dois
professores que participaram no teste associaram terceiro Ciclo ao grupo Investigao.
Com base nestes resultados, foi apresentada uma segunda proposta que acabaria por sofrer alteraes
por parte da equipa de contedos, ao arrepio dos resultados obtidos pelo card sorting, como a
manuteno da separao de Inovao e Investigao e a aposta nas designaes primeiro Ciclo
67
(Licenciatura), segundo Ciclo (Mestrado) e terceiro Ciclo (Doutoramento), embora em reunies

posteriores tenha sido possvel negociar este ltimo ponto.
3.1.4.4. Prototipagem
No decorrer deste projecto foram desenvolvidos dois prottipos do stio (ver Anexo D). A realizao
de prottipos de importncia vital para a compreenso da progresso do utilizador ao longo do stio,
permitindo uma ideia abrangente quanto a questes de consistncia de estrutura e layout, bem como
confrontar as solues de design com os cenrios de utilizao, e testar estes mesmo cenrios.
Para um primeiro teste de usabilidade, foi realizado um prottipo vertical da interface representativo
do principal cenrio de utilizao: ver a oferta formativa da Universidade do Porto em termos de
Licenciaturas, procurar a licenciatura e o seu plano de estudos, encontrar informaes relevantes como
propinas, bolsas e alojamentos. O prottipo realizado foi de mdia fidelidade e funcional em ambiente
Web, com um bom nvel de detalhe da interface excepto no comportamento das hiperligaes, que
apenas eram visveis pela alterao do cursor.
Figura 15. Prottipos de mdia fidelidade dos estudos preliminares do layout do novo stio da UP
Um segundo prottipo foi realizado para uma segunda sesso de testes, dado que, ao contrrio do
previsto, a equipa de programao no forneceu em tempo til uma instalao do sistema a utilizar.
A equipa de design optou assim por utilizar um sistema alternativo que permitisse uma representao
o mais realista possvel na ptica do utilizador, de forma a recolher o mximo de dados teis ao
prosseguimento do trabalho. Um prottipo de alta fidelidade, com todas as funcionalidades previstas
para o sistema, revelou-se imprescindvel, no s para evitar novos atrasos, como para sublinhar os
resultado obtidos pela Avaliao Heurstica realizada ao sistema que ir ser utilizado na verso final do
stio.
68
3. Casos de Estudo
3.1.4.5. Testes de Usabilidade
Foram realizadas at ao momento trs sesses de testes de usabilidade segundo o Mtodo de

Verbalizao do Pensamento. As sesses decorreram em diferentes etapas do desenvolvimento
do layout para o novo stio da UP no sentido de aferir o quanto este fcil e simples de utilizar. A
primeira sesso decorreu durante a fase de prototipagem dos dois diferentes estudos de layout que se
encontravam a ser desenvolvidos paralelamente (ver Anexo D), no sentido no s de verificar qual
dos layouts apresentava a melhor estrutura de navegao do ponto de vista de facilidade de utilizao,
maior clareza na sua hierarquia, melhor compreenso de um progresso ao longo desta e das diferentes
seces estruturais do layout (pesquisa, navegao, contedo, contedo complementar, contactos,
notcias, breadcrumbs).
Apesar de um dos objectivos deste teste ser precisamente obter dados qualitativos sobre as duas
propostas de layout para uma deciso final e informada sobre qual delas apresentava a melhor
resposta em termos de usabilidade, no se tratou na totalidade de um teste comparativo, visto ter-se
criado espao para a possibilidade de diferentes elementos de cada uma das propostas, elementos
que proporcionassem a melhor resposta a problemas concretos de navegao, tomassem parte de um
modelo final misto. Por outro lado, pretendia-se ainda verificar qual dos dois layouts proporcionava a
melhor resposta emotiva por parte dos utilizadores.
Foram realizados dez testes no total, todos com alunos da Faculdade de Belas Artes inscritos no
primeiro ano de Licenciatura, dada a facilidade e rapidez com que os utilizadores poderiam ser
encontrados, e os testes realizados. Por outro lado, a escolha de alunos do primeiro ano, deveu-se ao
facto destes no estarem ainda totalmente integrados da estrutura da UP, podendo assim facilmente
desempenhar simultaneamente o papel de alunos pr-universitrios, e alunos universitrios. Cada
uma das propostas foi testada por cinco utilizadores. Foram realizados prottipos funcionais de mdia
fidelidade em ambiente Web para uma das seces do stio, a seco ensino, e outras pginas que
continham informaes relevantes mas integradas noutras seces.
69
Pretendia-se que o utilizador procurasse informaes relativas Licenciatura de Design de

Comunicao da Faculdade de Belas Artes da Universidade do Porto, o respectivo plano de estudos
(situado num pgina externa ao stio da UP) e informaes complementares como condies de
acesso a Bolsas de Estudo, Alojamento e Propinas. Todas estas informaes estavam contidas ao longo
das pginas da seco Ensino e respectivas subseces, ora no seu contedo texto, ora atravs de
hiperligaes contidas em algumas das pginas que apontavam para outras pginas noutras seces do
stio. Os testes foram conduzidos pelos elementos da equipa de design, tendo sido realizada no final dos
mesmos uma pequena reunio para aferir os resultados e identificar as possveis alteraes a fazer.
Antes da realizao do teste de usabilidade, foi realizado um pequeno exerccio preliminar, o Trunk
Test (Krug 2006), com o objectivo de verificar se os utilizadores identificavam o stio em anlise, para
quem este se destinava, as suas diferentes partes estruturais (pesquisa, navegao, contedo, contedo
complementar, contactos) e a sua posio relativa na arquitectura de informao (breadcrumbs). Em
ambos os layouts foram identificados problemas na identificao do breadcrumbs enquanto elemento
que identifica a posio relativa de determinada pgina na arquitectura de informao, mas verificou-se
que este problema decorria mais do desconhecimento da sua funo. Verificou-se tambm dificuldades
na interpretao da seco de ltimas notcias, que continha imagens, com os utilizadores a referiremse a estas com destaques para eventos, um problema identificado como banner blindness (Nielsen
1997, 2007).
Quanto ao teste de usabilidade, ambos os layouts tiveram uma boa resposta por parte dos utilizadores,
sobretudo no que toca ao contedo que deveria ser identificado no texto de cada uma das pgina e na
navegabilidade do menu nos primeiro e segundo nveis. No entanto, ambos revelaram problemas na
interpretao das hiperligaes para contedos suplementares e na navegao de terceiro nvel, onde se
encontravam as grandes diferenas entre as duas propostas: nas propostas 1 e 2, os dois primeiros nveis
desenvolviam-se horizontalmente, enquanto o terceiro nvel se desenvolvia verticalmente direita do
contedo na proposta 1, com as hiperligaes para contedos complementares a encontrarem-se por
baixo da navegao de terceiro nvel; na proposta 2, a navegao de terceiro nvel era horizontal, dentro
do contedo e por baixo na navegao principal, com as hiperligaes a desenvolverem-se direita do
contedo.
70
3. Casos de Estudo
Os utilizadores revelaram grande dificuldade em encontrar o menu de terceiro nvel na proposta 2,

mas maior facilidade em encontrar as hiperligaes para contedos suplementares. No final, a larga
maioria considerou a proposta A mais intuitiva em termos de navegao e a mais agradvel em termos
visuais, e os testes mostraram que os utilizadores que testaram a proposta 1 cumpriram com maior
facilidade as tarefas propostas. No final, a equipa decidiu ento dar seguimento proposta A nas etapas
subsequentes de desenvolvimento.
Um segunda sesso foi marcada para o fim-de-semana da Mostra UP, Mostra de Cincia, Ensino e
Inovao da Universidade do Porto, onde foi possvel testar a interface, com recurso a um prottipo
totalmente funcional, junto de alunos pr-universitrios, professores, investigadores e funcionrios da
UP. O objectivo do teste centrou-se no entanto nos testes com os alunos pr-universitrios, com um
cenrio de utilizao idntico ao dos primeiros testes. Ao todo foram realizados trinta e sete testes,
entre os quais dez com alunos do 12. ano de escolaridade, trs do 11., um do 10. ano e cinco do
9. ano. Os testes confirmaram, de uma forma geral, a validade da arquitectura de informao, com
os alunos a conseguirem, na maioria dos casos, cumprir a tarefa proposta: procurar a licenciatura
de Design de Comunicao e informaes relativas a propinas, bolsas de estudos e alojamento,
informaes que podiam ser consultadas ou acedidas na seco Estudar.
Figura 18. Video still de um Testes de Usabilidade que tiveram lugar durante a Mostra UP
Os contedos acessveis na seco Estudar por via de hiperligaes para outras pginas como Bolsas e
Alojamento foram sempre acedidos atravs dessa mesma seco. Em conversa, posterior ao teste, com
os utilizadores, foi consensual que a presena destas pginas na seco Viver e na respectiva subseco
Vida Acadmica causava estranheza, uma vez que Viver e Vida Acadmica so associados a questes
de ordem cultural e ldica da vida de um estudante universitrio. A nova seco dedicada s notcias,
que na primeira sesso de testes no era identificada como tal, foi reformulada atravs da aposta numa
maior diferenciao da rea respectiva relativamente ao restante contedo, sem recurso a imagens e
com um ttulo de contextualizao, de que resultou um melhor reconhecimento. Os estudos com os
utilizadores mais novos (10 e 9 ano) revelaram inmeras dificuldades na interaco com o stio, algo
que dever ser revisto, embora o cliente no o considere prioritrio, e apesar de ter sido notada falta de
motivao por parte dos utilizadores para o cumprimento do teste.
71
Os testes com os restantes utilizadores no foram realizados com o nmero mnimo necessrio de
utilizadores, tendo na sua maioria servido apenas de demonstrao do processo. O ambiente da Mostra
UP, onde as diversas Unidades Orgnicas da Universidade do Porto mostram de uma forma ldica o
propsito dos seus cursos, revelou-se no entanto um local pouco apropriado para a execuo destes
testes, mostrando que estes no podem ser executados em qualquer ambiente, devendo-se observar
um mnimo de condies que no foi a encontrado. O excesso de rudo prejudicou o registo udio
das sesses e resultou na perda duma boa parte dos dados, visto que o teste depende em boa medida
da verbalizao das aces e decises tomadas por parte do utilizador, assim como a presena de
muitas pessoas em volta do local onde decorreram os testes originou muitas distraces por parte dos
utilizadores que efectuavam os testes. Embora no seja imprescindvel efectuar estes testes em ambiente
laboratorial, desnecessria, deve ser assegurada a ausncia de rudo e distraces que os possam
influenciar negativamente.

O projecto encontra-se actualmente na fase de implementao, a cargo da equipa de programao
da FEUP, e prev-se a realizao de novos testes de usabilidade particularmente com dispositivos
moveis com utilizadores assim que a verso beta esteja disponvel. Tendo a verso alfa sido realizada
numa sistema diferente daquele que ser utilizado para o novo stio da UP, imperativo realizar vrias
sesses de testes. Como vimos, a avaliao heurstica plataforma actual detectou debilidades que tero
de ser resolvidas de forma que o produto final constitua, no s uma mais-valia em termos de design,
de layout e de contedos, mas tambm que seja mais fcil de usar, no crie frustraes ao utilizador e se
imponha como uma ferramenta de comunicao eficaz para a UP. Com os atrasos sucessivos, a ltima
previso para a concluso do projecto aponta para que esta ocorra no incio de 2013.
3.1.6. Concluso
As metodologias empregues at ao momento no projecto do novo stio da UP mostram ser uma
mais-valia no processo projectual do mesmo, sem que os atrasos at agora sentidos possam ser de
forma alguma imputveis sua aplicao. Os inquritos realizados junto dos utilizadores, bem como
a posterior elaborao de personas e cenrios de utilizao, permitiram que o desenvolvimento
dos primeiros esboos da interface e da arquitectura de informao com esta ltima a ser
complementada com a utilizao de card sorting com vista a encontrar o melhor modelo mental para
a navegao fossem constantemente focados com base nessas mesmas personas e cenrios, e nas
expectativas, necessidades e tarefas do utilizador. Os cenrios de utilizao mostraram-se tambm
importantes para uma constante focagem nas tarefas do utilizador ao longo do desenvolvimento da
interface.
A diviso da equipa de design por trs propostas de layout permitiu o desenvolvimento de diferentes
conceitos e diferentes opes que de forma alguma pode ser entendido como uma disperso de
recursos. Os testes posteriores realizados com as duas propostas finais revelaram pontos fortes em
72
3. Casos de Estudo
cada uma das propostas, permitindo que o projecto evolusse mais rapidamente, dado que, em vrias
situaes, para cada opo que se revelou pouco funcional, uma alternativa melhor havia j sido
explorada.
Parece-nos tambm clara a importncia do desenvolvimento de directivas de usabilidade, acessibilidade
e mobile (ver Anexo E), pois permite que a equipa de design confronte as com os layouts desenvolvidos
sempre que se julgue necessrio, tal como os cenrios de utilizao. Futuramente, com a primeira
verso do sistema funcional, ser possvel fazer uma anlise deste em confronto com as directivas, de
forma a apontar e priorizar as reas a serem melhoradas no mesmo.
Na segunda sesso de testes, durante a Mostra UP, ao ser ampliado o segmento do pblico-alvo foi
possvel encontrar novos problemas que os primeiros testes no haviam revelado, sublinhando assim a
necessidade destes testes serem efectuados com o maior nmero de utilizadores possvel, e sobretudo
com o maior nmero de sensibilidades possvel. A primeira sesso, realizada unicamente com
alunos do primeiro ano de licenciatura, com idades entre os 18 e os 20 anos, revelaram utilizadores
experientes, no s na utilizao da Web, como familiarizados com as tarefas, algo que na segunda
sesso, com alunos pr-universitrios, entre os 15 e os 17 anos, no se verificou. Em projectos cujo
espectro de pblico-alvo muito abrangente, testes com 5 utilizadores indiscriminados so suficientes
para encontrar a maiorias dos problemas bvios de navegao e do cumprimento de tarefas, mas
falham na necessidade de encontrar a melhor arquitectura de informao.
Os testes decorreram com recurso a software de baixo custo, e em mdia, para cada dia de testes foi
necessrio outro dia para a compilao dos resultados, mostrando a rapidez com que estes podem ser
efectuados, sendo necessrio cerca de um tero do tempo necessrio quando os testes so realizados
por profissionais da rea. Ao decorrerem num ambiente natural de utilizao do stio, no se sentiu a
artificialidade gerada pelos laboratrios de usabilidade, com os utilizadores a demostrarem uma maior
predisposio para a participao nos testes.
Outra questo relevante tambm detectada durante este projecto, foi a relutncia por parte do cliente
em alterar a arquitectura de informao com base nos estudos de utilizador, o que obriga a uma
cuidada negociao final, entre a organizao interna do cliente e a forma como o utilizador a v. Neste
caso, ambas so incompatveis em alguns pontos, e embora tenha sido possvel algumas alteraes
importantes e nucleares (p.ex.: Licenciatura em vez de primeiro ciclo; Mestrado em vez de segundo
ciclo; Doutoramento em vez de terceiro ciclo) h ainda algumas alteraes que se julga ser importante
realizar. Curiosamente, mesmo que no tenham sido efectuados testes com um nmero de utilizadores
considerado suficiente, observou-se tambm que os funcionrios da UP tiveram dificuldades em
encontrar informaes relativas aos servios dos quais fazem parte no seio da UP.
Por fim, a segunda sesso de testes de usabilidade foi, para os trs alunos finalistas estagirios, o
primeiro contacto prtico com um teste de usabilidade, tendo sido evidente para ns que estes, no s
foram capazes de o efectuar como pretendido, como foram tambm capazes de tirar as suas prpria
concluses sobre os mesmo. Com uma reunio preparatria e a presena numa palestra dada sobre
usabilidade no mbito desta investigao, todos mostraram um bom domnio conceptual da temtica,
73
explicando-a aos utilizadores de forma esclarecedora e conduzindo-a sem problemas maiores, excepto
algum natural nervosismo. Da anlise dos vdeos das sesses, possvel comprovar que os estagirios
seguiram as indicaes dadas, mostraram capacidade de improvisao quando necessrio e seguiram
os conselhos fornecidos (Krug, 2000), embora, e no entanto, ao efectuar estes testes num ambiente com
excesso de rudo e distraces, uma boa parte dos dados tenha sido perdida por impossibilidade de
ouvir na ntegra os registos udio.
3.2. Novo stio do eLearning Caf

O eLearning Caf um espao um espao hbrido, de lazer, convvio e aprendizagem, com
caractersticas inovadoras para favorecer a troca de saberes e de experincias em diferentes reas
do conhecimento e a aprendizagem em grupo, promovendo a interdisciplinaridade e a inovao44.
Desenvolvido pela Universidade Digital45 da Universidade do Porto, o eLearning Caf constituise como um espao onde os alunos da referida universidade podem no s encontrar um local
de convvio, lazer, trabalho e estudo, como um espao onde podero usufruir de uma srie de
equipamentos informticos, bem como assistir a conferncias de pequena dimenso, mesas redondas,
apresentaes ou workshops. Actualmente, o eLeraning Caf constitudo por apenas um espao,
situado no Polo da Asprela da Universidade do Porto, estando prevista a abertura de um segundo
espao junto ao Jardim Botnico da cidade do Porto.
3.2.2. Projecto
O anterior stio do eLearning Caf havia sido desenvolvido no seio da equipa do id:D, em 2010, em
colaborao com um programador indicado pela Universidade do Porto. O projecto de 2010 consistiu
apenas na elaborao de uma folha de estilos CSS para o stio existente de forma a que este respeitasse a
nova imagem corporativa desenvolvida paralelamente. Tratando-se apenas do que poderamos designar
como operao de cosmtica, as falhas inicialmente encontradas acabariam por no ser devidamente
corrigidas, pelo que os problemas que o stio j evidenciava se mantiveram.
Passados dois anos, a equipa do id:D foi uma vez mais contactada para trabalhar sobre o stio do
eLearning Caf com vista a uma reformulao total do mesmo. O anterior stio foi considerado muito
complexo, com uma estrutura de navegao muito complexa e uma imagem geral demasiado pesada
e pouco dinmica. Com uma estrutura que privilegiava as notcias e os eventos na pgina principal,
o formato foi identificado pela equipa de gesto do stio como pouco eficaz, sendo, por outro lado,
vontade do cliente imprimir uma maior aposta em imagens, com galerias dos espaos actual e futuro
44. http://elearningcafe.up.pt/index.php/pt/o-que-e/o-que-e.html
45. http://sigarra.up.pt/reitoria/unidades_geral.visualizar?p_unidade=5
74
3. Casos de Estudo
algo que j havia sido pedido no anterior projecto mas, porque o sistema em que assentava o stio
no o permitia sem um investimento adicional em funcionalidades, o cliente optou por no realizar.
O projecto de redesenho do stio do eLearning Caf pretendia assim colmatar as deficincias apontadas,
quer a nvel de funcionalidade, quer a nvel de arquitectura de informao, quer ainda a nvel da
transmisso da informao que o cliente apontou como prioritria: as notcias e os eventos do espao
actual.
Com uma calendarizao curta e um oramento limitado, o projecto do novo stio do elearning Caf
constituiu-se assim como uma oportunidade de testar no terreno os princpios da usabilidade de
guerrilha anteriormente descritos. Para alm dos projectos de layout, foram realizadas duas sesses de
testes com utilizadores no prprio espao, recorrendo assim a utilizadores reais do mesmo, no mbito
das quais, para alm da avaliao da usabilidade, foi ainda realizado um teste comparativo para a
escolha dos dois layouts desenvolvidos paralelamente.
As propostas apresentaram uma arquitectura de informao idntica, com uma pgina de abertura a
apresentar o conceito eLearning Caf e contactos gerais, acompanhada de um menu de acesso a cada
um dos espaos, e uma seco de notcias e eventos. As seces relativas a cada espao fsico, Asprela
e Botnico, tinham o contedo desenvolvido numa nica pgina com um menu de segundo nvel
a apontar para diferentes seces dessa pgina. A seco de notcias e eventos apresentava uma lista
geral categorizada, com a possibilidade de filtragem desta lista pelas suas diversas categorias, com cada
notcia ou evento a apontar para uma pgina individual com o texto integral. Ao longo de todas as
pginas, um menu de apoio localizado no rodap providenciava acesso a outros contedos relevantes
para o eLearning Caf, como sejam, os Regulamentos e a Poltica de Privacidade.
3.2.3. Calendarizao
No existiu uma calendarizao rgida para o projecto de redesenho do stio do eLearning Caf, tendo
o cliente pedido apenas que o projecto fosse concludo at ao final de Setembro de 2012. Os testes de
usabilidade foram realizados durante os meses de Abril e Maio de 2012.
3.2.4. Metodologias
Foram realizadas duas sees de testes de usabilidade com utilizadores que decorreram no prprio
espao do eLearning Caf. Dez utilizadores estiverem envolvidos em cada uma das sesses, com ambas
as propostas a serem testadas na ntegra segundo os cenrios estabelecidos com cinco utilizadores cada,
sendo pedido posteriormente a estes que navegassem livremente na segunda proposta e emitissem uma
opinio sobre as preferncias pessoais quanto ao tratamento visual da interface.
75
Na segunda sesso, os utilizadores cumpriram os mesmo cenrios em ambas as propostas, sendo-lhes

posteriormente tambm pedida uma opinio sobre a preferncia pessoal relativamente ao tratamento
visual da interface. As sesses decorreram no interior do espao eLearning Asprela, em ambiente
natural de utilizao, e na segunda sesso, para alm dos utilizadores do espao, foram conduzidos dois
testes com dois colaboradores que gerem o dia-a-dia do espao.
Os cenrios propostos passavam por encontrar informaes relativas ao servios prestados pelo
eLearning Caf da Asprela, o seu horrio e localizao, bem como encontrar as ltima notcias e
eventos sobre o espao e o respectivo contacto.
Na primeira sesso, ambos os layouts tiveram bons comportamentos, no tendo o tratamento visual
diferenciado mostrado qualquer relevncia nos resultados obtidos. Os utilizadores cumpriram com
facilidade os cenrios propostos, encontrando toda a informao requerida, mas menos de metade o
fizeram com recurso ao scroll, utilizando o menu para encontrar as seces de contedo onde julgaram
poder encontrar essa mesma informao - facto verificado em ambas as propostas.
Figura 19. Video stills da homepage do eLearning Caf nos Testes de Usabilidade
O problema principal verificou-se na pgina de entrada e no menu de acesso aos espaos: o facto de
actualmente apenas existir o espao do Polo da Asprela criou confuso junto dos utilizadores, com
estes a no compreenderem as designaes Asprela e Botnico como forma de entrada em pginas
correspondentes a espaos diferentes. Em conversa com os utilizadores, aps os testes, ficou claro que
mais de metade dos utilizadores que participaram no teste desconheciam mesmo que o espao em que
se encontravam era o eLearning Asprela.
Na segunda sesso, alteraram-se as designaes para Espao Asprela e Espao Botnico, o que
facilitou a compreenso por parte dos utilizadores, mas mesmo assim assistiu-se ao facto de 1/3 dos
utilizadores continuarem a no compreender as diferenas.
Apesar de apresentarem diferentes propostas visuais, as funcionalidades eram idnticas em ambos
os layouts, no tendo os testes comparativos permitido obter resultados considerados relevantes. Na
primeira sesso, onde os utilizadores cumpriam cenrios numa verso e navegavam livremente na
segunda, apenas um utilizador optou pelo segundo layout. Na segunda sesso, com os cenrios a serem
76
3. Casos de Estudo
cumpridos em ambas as verses, dois utilizadores preferiram a segunda verso mostrada, o que levou a
equipa a decidir assim deixar a opo pelas propostas para o cliente, dados os resultados inclusivos.

Concludos os testes de avaliao preliminares, o projecto est agora na fase de implementao que se
prev estar concluda no fim do ms de Setembro de 2012, pese embora este ter estado parado durante
o ms de agosto. Aps a implementao do sistema, sero efectuadas mais duas sesses de testes
interface, quer na sua verso desktop, quer na sua verso para dispositivos mveis.
Figura 20. Verses desktop, tablet e mobile do stio elearning caf
3.2.6. Concluso
A realizao de testes comparativos tendo por base apenas a diferenciao por via do design da
interface mostrou-se neste caso pouco til, no se verificando qualquer influncia do design na
percepo da usabilidade do stio, embora possamos admitir que as propostas eram demasiado
77
idnticas para se verificarem influncias, o que poder ser um bom ponto de partida para investigaes
futuras que entendemos pertinente fazer.
Embora o objectivo destes testes fosse testar a usabilidade do stio, ficou patente para ns a necessidade
de se efectuar estudos junto dos utilizadores de forma a compreender as suas necessidades e, sobretudo,
a forma como percepcionam o que poderemos designar como o produto apresentado. Mais de metade
dos utilizadores mostraram, no s desconhecimento sobre a designao do espao em que se
encontravam, visto que actualmente apenas existe um e todos o conhecem pelo nome eLearning Caf,
como tambm desconhecimento da existncia de um stio na Web sobre o eLearning Caf. Apesar
da equipa do projecto, com base na sua experincia acumulada, poder afirmar com segurana que o
conceito apresentado o ideal para o produto disponibilizado, estudos prvios realizados junto dos
utilizadores do eLearning Caf teriam sido de uma mais-valia importante e alertado para o principal
problema encontrado.
3.3. Stio do CEDA

O CEDA, Centro de Estudos do Design e das Artes um gabinete de prestao de servios ao exterior
da Faculdade de Belas Artes da Universidade do Porto que opera nas reas do design e das artes
plsticas. Desde a sua criao, em 2006, o CEDA tem realizado diversos projectos no mbito do
design grfico, Web design, design editorial, concepo de trofus, arte pblica, instalao, etc., cujo
desenvolvimento tem sido efectuado em diversos nveis organizacionais, atravs do estabelecimento
de ncleos de trabalho permanentes - como foi o caso do id:D - Investigao e Desenvolvimento em
Design, Projectos Vivos (ncleo entretanto extinto) - ou grupos de trabalho no-permanentes criados
especificamente para dar resposta a determinadas solicitaes. O id:D possui actualmente um stio que
rene o respectivo porteflio de trabalhos em idd.fba.up.pt, mas no existe um stio que agrupe todos
os trabalhos realizados pelos diversos ncleos e grupos de trabalho.
3.3.2. Projecto
O projecto do stio do CEDA foi desenvolvido no seio do id:D pela equipa de estagirios curriculares,
alunos finalistas da Licenciatura de Design de Comunicao da Faculdade de Belas Artes da
Universidade do Porto. O objectivo do projecto passava pela construo de uma plataforma de
comunicao na Web que permita apresentar o trabalho desenvolvido no CEDA, as suas reas de
actuao, estrutura e contactos.
Trs estagirios ficaram responsveis por toda a concepo desde as primeiras abordagens com o
cliente e outros stakeholders, passando pelas vrias fases de design e testes com utilizadores. Neste
caso de estudo, pretendeu-se analisar a forma como estes alunos estagirios se comportavam
78
3. Casos de Estudo
perante a necessidade de efectuar estudos de usabilidade com utilizadores, tendo em conta a sua
pouca experincia na temtica, com total autonomia na anlise dos resultados por eles obtidos.
Ambos tiveram uma primeira abordagem ao tema durante as aulas da cadeira de Web Design, tendo
posteriormente participado numa palestra sobre usabilidade dada no mbito desta investigao, assim
como em algumas das sesses de teste de usabilidade levados a efeito no mbito do projecto UP e
escolinhas.pt.
3.3.3. Calendarizao
O projecto teve incio em Maro de 2012 e tinha como data prevista de concluso Junho de 2012, tendo
sido dividido em trs fases:
Fase 1: Estudos Prvios (Abril de 2012)
1. Reunies preparatrias com o cliente;
2. Inqurito junto dos coordenadores dos vrios ncleos de trabalho do CEDA, colaboradores e
funcionrios afectos;
3. Definio de personas e cenrios de utilizao;
4. Definio das reas de contedos do stio;
5. Inventrio de contedos;
6. Arquitectura de informao;
7. Wireframes, estruturas de navegao e estudos gerais de layout.
Fase 2: Design (Maio - Junho de 2012)
1. Definio da arquitectura de informao final;
2. Mapa do stio final, incluindo designaes das seces e pginas do stio;
3. Testes arquitectura de contedos e terminologias finais;
4. Realizao de testes com utilizadores durante o desenvolvimento de prottipos em papel;
5. Projecto de layout final;
6. Implementao do projecto.
Fase 3: Implementao (Junho de 2012)
1. Testes de usabilidade.
Inteiramente desenvolvido por trs estagirios finalistas da Licenciatura de Design de Comunicao
da Faculdade de Belas Artes da Universidade do Porto, a calendarizao do projecto foi sofrendo
alguns atrasos a meio da Fase 2, sobretudo aps a sada de um dos elementos do grupo, no tendo sido
possvel terminar o projecto.
79
3.3.4. Metodologias
Com base nos inquritos realizados, os alunos estagirios realizaram um conjunto de personas
primrias que personalizassem os objectivos e necessidades dos utilizadores dominantes do stio.
Apesar das personas apresentadas fornecerem poucos dados, considerou-se no entanto que os
objectivos-chave desta metodologia tinham sido minimamente alcanados. Ficou no entanto por
associar a estas personas um ou mais cenrios de utilizao para uma melhor compreenso das tarefas
que motivam o utilizador.
Os alunos estagirios realizaram em conjunto uma sesso de card sorting fechado para testar a
primeira proposta para a arquitectura de informao. Os alunos mostraram bom domnio do processo
de execuo da metodologia, mas algumas falhas na interpretao dos resultados, pese embora as
evidentes melhorias na proposta final, bem mais simplificada que a testada. Foram realizados 10
testes no total, nmero que foi considerado suficiente para a obteno de dados satisfatrios para a
elaborao da arquitectura de informao do stio, com a sesso a durar um dia, incluindo compilao
e analise dos resultados. No foram utilizados quaisquer recursos digitais, com o card sorting a ser
efectuado com recurso a cartes de papel escritos.
Ficou evidente alguma dificuldade em interpretar os resultados e, sobretudo, faltou alguma ateno
aos comentrios dados pelos utilizadores durante o teste: os resultados finais ficarem refns dos
dados estatsticos e a equipa limitou-se a retirar as categorias consideradas desnecessrias, ora pela
redundncia, ora pelo desconhecimento do seu significado - situaes que, com uma boa anlise dos
inquritos realizados e uma posterior correcta estruturao da arquitectura de informao, cedo teriam
sido resolvidas no projecto.
Duas sesses de teste de usabilidade estavam programadas para este projecto mas, at ao momento,
apenas uma foi realizada. O teste decorreu com prottipos em papel da interface visual, tendo os alunos
estagirios desenvolvido duas propostas distintas, das quais uma seguiria para a fase seguinte aps a
apresentao dos resultados. Os alunos envolvidos j haviam anteriormente realizado testes no mbito
do projecto do novo stio da UP e escolinhas.pt. O registo foi efectuado com recurso a uma mquina
fotogrfica com capacidade de gravao vdeo.
Foi concedida total liberdade aos alunos, tendo os testes decorrido sem superviso e com a equipa de
orientao a limitar-se observao da sua execuo. As experincias em testes anteriores mostraramse bastante benficas, com os alunos a observarem o processo de forma considerada satisfatria,
mas com resultados dspares no que toca apresentao de resultados, com um dos relatrios a no
80
3. Casos de Estudo
apresentar dados suficientes para uma opinio esclarecida sobre os problemas, indicando apenas, numa
escala de cor, a existncia de problemas de mdia ou alta gravidade.

O projecto encontra-se na sua fase de implementao, mas com os atrasos sofridos durante a Fase 2,
aps a sada de um dos elementos do grupo, a calendarizao foi sendo sucessivamente atrasada, no
existindo no momento um data prevista para a concluso do projecto.
3.3.6. Concluso
A Faculdade de Belas Artes apresenta actualmente no currculo da sua Licenciatura de Design de
Comunicao duas disciplinas dedicadas ao Web Design, disciplinas optativas semestrais para os
alunos do terceiro ano (Web Design I) e 4 ano (Web Design II). Na disciplina de Web Design II so
abordadas as temticas do Design Centrado no Utilizador e da Usabilidade. claro que os alunos nem
sempre aprendem a matria da mesma forma, por inmeras razes, desde a motivao para o assunto
falta de ateno durante as aulas, pelo que alguma dificuldade sempre esperada quando estes se vem
envolvidos num projecto real.
Neste pequeno exerccio, ficou assim patente a necessidade de uma maior aposta nestas temticas
no ambiente acadmico e na importncia que estas tm para uma futura carreira ligada ao design.
Aprender e dominar as metodologias relacionadas com o Design Centrado no Utilizador ou com a
Usabilidade, hoje em dia, para um designer, to importante como dominar outras ferramentas de
Design ou metodologias de Design. Em vrias situaes, estas at so comuns com outras reas do
design. Esboos, wireframes e prototipagem no so metodologias especficas do Web Design, embora
o ambiente Web seja evidentemente diferente dos ambientes editorial, tipogrfico, etc.
Dominar algumas metodologias de usabilidade, sobretudo as que afectam o design de um stio Web ,
na nossa opinio, imperativo para a formao de qualquer aluno de Design que se pretenda no futuro
especializar nesta rea.
3.4. escolinhas.pt
O escolinhas.pt uma aplicao Web desenvolvida pela Tecla Colorida Software Educativo, Lda, que
visa proporcionar um primeiro contacto com as Tecnologias de Informao e Comunicao a alunos
do ensino bsico tendo posteriormente alargado o seu pblico-alvo aos alunos do ensino secundrio
, proporcionando ferramentas de ensino formal que podem ser utilizadas na escola ou em casa. O
81
sistema permite que os alunos possam criar e partilhar trabalhos, de mbito acadmico ou meramente
ldico, jogar jogos didcticos, enviar mensagens a colegas, amigos, professores ou encarregados de
educao.
Na ptica do professor, possvel criar trabalhos de casa para alunos, bem como fornecer fichas de
trabalho ou o mais variado contedo acadmico. Aquele pode ainda corrigir, comentar e avaliar
trabalhos enviados pelos alunos, comunicar com eles, com os colegas ou com os encarregados de
educao por mensagem, bem como criar e gerir turmas.
3.4.2. Projecto
O id:D tem estado envolvido em diversas reas do projecto escolinhas.pt atravs de equipas de design,
tendo o cliente pedido nova colaborao para a realizao de testes de usabilidade ao sistema, na ptica
do professor, de forma a inventariar eventuais problemas na interface a serem resolvidos na prxima
verso do sistema. Para alm dos testes, foi tambm pedida a apresentao de recomendaes em
termos de metodologias de avaliao da usabilidade a serem observadas em futuros desenvolvimentos.
3.4.3. Calendarizao
Um relatrio de usabilidade do sistema na ptica do professor e um conjunto de recomendaes em
termos de metodologias de avaliao da usabilidade dever ser apresentado at ao final do ms de
Setembro de 2012. Os testes de usabilidade tiveram lugar durante os meses de Maio e Junho de 2012.
3.4.4. Metodologias
Foram realizadas duas sesses de testes de usabilidade com os utilizadores do sistema, na ptica
indicada pelo cliente - uma sesso com dez professores do ensino secundrio e outra com quatro
professores do ensino primrio - sesses essas das quais se efectuou um registo vdeo (do ecr) e
udio utilizando software gratuito. Os cenrios de utilizao testados foram os mesmos em ambas as
sesses, sendo pedida, a cada utilizador, a realizao de trs tarefas que abrangiam genericamente as
funcionalidades do sistema. A saber:
Cenrio 1: Editor de trabalhos e workflow de partilha/publicao. Criar um documento, com um texto
e uma imagem; mover a imagem para a frente do texto; publicar o documento no Wall de uma turma;
partilh-lo com colegas de trabalho; apagar o documento.
Cenrio 2: Funcionalidades de Gesto de turma. Criar nova Turma e adicionar professores e alunos;
editar turma, apagar alunos e acrescentar outros alunos; apagar a turma.
82
3. Casos de Estudo
Cenrio 3: Mensagens com anexos. Criar mensagem; adicionar ficheiro guardado no computador;
enviar mensagem a um elemento da lista de contactos.
O sistema revelou vrias deficincias que poderiam ter sido detectadas em fases iniciais do projecto
caso tivessem sido realizados testes de usabilidade com utilizadores, ou mesmo percursos cognitivos.
No editor de trabalhos e no workflow de partilha, todas as ferramentas necessrias para o cumprimento
da tarefa estavam presentes, no entanto, o editor de trabalhos foi considerado pouco intuitivo,
sobretudo no que toca confirmao da edio. Um vez criado um tipo de contedo no editor,
o contedo s se torna definitivo aps ter sido seleccionada a opo pr-visualizar. Para o editar
posteriormente, o utilizador deve colocar o cursor sobre o contedo, surgindo as opes disponveis
mover, editar e apagar com recurso a cones, cujo pouco contraste e dimenses muito reduzidas
os tornavam pouco bvios ao utilizador, a que acrescia o facto de no possurem uma verso em texto
ou outra ajuda contextual sobre a sua utilidade ou funcionalidade. As opes finais do documento,
como publicar, enviar, apagar e partilhar, encontram-se todas ao mesmo nvel e com o mesmo
comportamento visual, o que causa alguma confuso nos utilizadores e exige ateno extra na sua
utilizao.
Os utilizadores mostraram tambm alguma dificuldade na edio de turmas, com, uma vez mais, a
maioria das opes de edio a ter tratamento idntico a outras opes. A ttulo de exemplo, refira-se
que as hiperligaes para edio de turmas, edio de membros e cancelamento de turmas tinham o
mesmo tratamento visual que as hiperligaes para a pgina da directora de turma, ou para a pgina da
turma, na pgina onde eram apresentadas todas as turmas, o que criava confuso junto do utilizador.
Nesta seco foram tambm encontradas algumas opes que apenas deveriam estar visveis ao
administrador do sistema, podendo qualquer utilizador com acesso de professor apagar uma turma da
qual no fosse director, opo que s deveria estar visvel ao director de turma e ao administrador.
No envio de mensagens, detectou-se a inexistncia de um boto de carregamento de ficheiros,
obrigando o utilizador a anexar s mensagens que pretendia enviar apenas ficheiros pr-existentes ou
pr-carregados, o que obrigava o utilizador a preocupar-se, em primeiro lugar, em fazer o carregamento
do ficheiro numa rea distinta antes de criar a mensagem propriamente dita.
No final das sesses foi realizado um pequeno questionrio sobre a opinio do utilizador sobre a
plataforma e funcionalidades que gostaria de ver implementadas em verses futuras. No geral, os
utilizadores apontaram um interface pouco intuitivo e a ausncia de ajuda contextual que, quando
presente, no suficientemente contrastante ou suficientemente identificvel para ser entendida como
tal. Foram tambm apontadas crticas ao tratamento visual da interface, desenhada inicialmente para
o ensino primrio, tendo sido caracterizado como infantil, provocando assim pouca empatia com o
utilizador. Ficou ainda evidente, tendo em considerao que a maioria dos utilizadores testados no
havia interagido com o sistema por um longo perodo antes do teste, que este obrigava o utilizador a
recorrer constantemente memria da sua ltima interaco
83

Os resultados preliminares foram apresentados durante um encontro de stakeholders promovido pela
Tecla Colorida e brevemente ser apresentado um conjunto de boas prticas de usabilidade a serem
includas nos processos de desenvolvimento do sistema conforme requerido.
3.4.6. Concluso
Os problemas encontrados no teste de usabilidade sublinham, no s a necessidade da usabilidade ser
uma preocupao desde as primeiras etapas do desenvolvimento de qualquer sistema para a Web, como
as mais-valias da realizao destes testes desde cedo. Alguns problemas encontrados nos menus na
ptica do professor, apesar de no terem sido entendidos como graves, poderiam ter sido perfeitamente
detectados com a realizao de card sorting durante a concepo da arquitectura de informao e
imediatamente resolvidos.
A falta de algumas das funcionalidades necessrias ao cumprimento das tarefas propostas, como as
encontradas no envio de mensagens, tambm poderiam ter sido detectadas bem cedo no processo
de desenvolvimento do sistema, quer atravs da inspeco da interface com recurso aos percursos
cognitivos, quer atravs de testes de usabilidade durante o perodo de prototipagem.
Tal como nos projectos anteriores, os testes de usabilidades realizados no mbito deste projecto,
foram realizados com recurso a software gratuito de registo udio e vdeo (do ecr) e num espao que
simulou a utilizao natural do sistema. Os testes, que englobaram 14 utilizadores em duas sesses
distintas, duram um dia em acumulado, ao qual se acrescenta dois dias para a analise e compilao dos
resultados dos testes.
O objectivo deste projecto passava por elaborar um conjunto de boas prticas de usabilidade a
serem futuramente includos no processo de desenvolvimento do sistema, que apesar de abranger
um conjunto de metodologias de Design Centrado no Utilizador, carece de metodologias que
inspeccionem e avaliem a usabilidade da interface, em particular e do sistema, em geral. Sublinhe-se
que o ltimo teste de usabilidade realizado datava j de Janeiro de 2011.
Embora o relatrio final no tenha sido ainda entregue ao cliente, com segurana que podemos
indicar que o projecto dever conter as seguintes etapas, com vista a uma maior incluso das
preocupaes da usabilidade no processo de desenvolvimento.
Realizao de sesses de card sorting para o estabelecimento de uma boa arquitectura de informao.
A realizao de uma sesso de card sorting com 15 utilizadores, com recurso a cartes escritos ou
impressos, no demorar mais do que trs dias desde a sua preparao sua realizao e anlise
de resultados; com recurso a software de utilizao livre, o tempo poder ser reduzido a dois dias em ambas as situaes, no existem custos acrescidos relevantes para alm do tempo gasto na sua
realizao.
84
3. Casos de Estudo
Realizao de inspeces utilizando o mtodo de percurso cognitivos de forma a garantir que todas as
funcionalidades necessrias para o cumprimento de tarefas se encontram visveis e/ou disponveis no existem custos acrescidos relevantes para alm do tempo gasto na sua realizao.
Inspeces regulares da interface com recurso a directivas de usabilidade, directivas essas que
permitem previamente identificar todas as necessidades da interface de um ponto de vista tcnico.
Realizao de testes de usabilidade com utilizadores, pelo menos, antes da implementao final de
novas verses do sistema ou de melhorias ao mesmo. Os testes devero ser realizados pelo menos com
5 utilizadores, prevendo-se pelo menos dois dias desde a sua preparao sua realizao e anlise de
resultados- recurso a software para o registo vdeo do ecr e udio poder acarretar custos acrescidos,
mas o investimento residual.
85
86
CONCLUSO
Os estudos de usabilidade tm ganho maior relevncia com o crescente recurso a contedos

interactivos e aplicaes Web, que no s tm aumentado o grau de complexidade das interfaces
grficas, como tambm exigem novas formas de visualizar informao. Com uma aposta cada vez
maior nos contedos orientados para o utilizador, torna-se ainda mais pertinente o recurso aos
mtodos de avaliao qualitativa da usabilidade de forma a conseguir desenvolver uma experincia
satisfatria.
O presente trabalho teve como objectivos recolher e avaliar as principais metodologias e estratgias
de avaliao qualitativa da usabilidade de interfaces para stios Web e colocar estas metodologias
em prtica num conjunto de casos de estudo de forma a verificar a existncia de mais-valias para
o processo projectual. A metodologia seguida passou por uma leitura atenta e analtica de diversas
publicaes, impressas e online, na rea do design interactivo, do design centrado do utilizador e da
usabilidade para a Web, recolhendo, seleccionando, analisando e cruzando metodologias de avaliao
qualitativa da usabilidade. Seguiu-se a escolha de um conjunto de metodologias tidas como base para
a avaliao qualitativa da usabilidade em stios Web, metodologias essas que foram posteriormente
colocas em prtica em projectos prticos.
A principal estratgia de usabilidade -nos fornecida pelos princpios do Design Centrado no
Utilizador. Estes defendem um processo que tem o utilizador como centro das decises, e um processo
de design que se preocupa em primeiro lugar com o utilizador ser aquele que melhor poder criar
um objecto final que responda s necessidades e exigncias desse mesmo utilizador. Esta filosofia est
em tudo relacionada com a experincia que o utilizador tem do produto e com o grau de satisfao
e eficincia com que o usa para alcanar os seus objectivos, em suma, com a usabilidade de um stio
Web. O Design Centrado no Utilizador identifica um conjunto de metodologias que, quando aplicadas
em diferentes etapas de um projecto Web e com diferentes fins, mantm sempre o foco do designer no
utilizador, seja na etapa de anlise, na etapa de projecto, ou na avaliao.
No entanto, a realidade mostra-nos que a usabilidade ainda um extra a ter em considerao em
projectos de interfaces para a Web, ora por manifesta falta de tempo, ora por manifesta insuficincia
oramental, ora por esta ser vista como uma ferramenta altamente especializada que exige profissionais
experientes para a sua colocao em prtica. Nielsen (1994, 1997, 2007) e Krug (2006) defendem, no
entanto, que os estudos de usabilidade podem ser conduzidos sem necessidade de conhecimentos
prvios especializados e que, utilizando um conjunto reduzido de mtodos de avaliao, podero ser
executados sem necessidade de avultados investimentos. E mesmo um estudo mal conduzido pode
desde logo detectar um quarto dos problemas de usabilidade mais graves (Nielsen, 2007, 2009).
87
No nosso objectivo colocar em causa o papel da engenharia de usabilidade enquanto profisso

estabelecida e autnoma dentro de uma equipa de desenvolvimento de um stio Web, mas antes
mostrar pela sua mais valia num projecto, que os estudos de usabilidade no s podem ser conduzidos
dentro de um oramento muito restrito, como tambm recorrendo aos prprios webdesigners ou
developers para a sua realizao. Alis, ficou patente que uma primeira linha de ataque usabilidade
deve mesmo ser constituda por estes, dado que so os resultados recolhidos tm implicaes directas
no desenho das interfaces. Quanto mais depressa webdesigners e developers tiverem acesso a estes
dados, mais depressa possvel fazer as alteraes necessrias. A existncia de um intermedirio, o
especialista em usabilidade, poder tornar esses dados abstractos, dificultando a compreenso real das
razes que levam os utilizadores a terem determinadas atitudes.
Embora se possa afirmar que as metodologias mais orientadas para o design so em certa medida
bvias no que toca s suas mais-valias, preciso referir que nem sempre a pessoa que realiza o design
de um stio a mesma que implementa esse design para HTML e/ou CSS, ou a mesma que programa
as interaces do mesmo. Um webdesigner assim mais completo enquanto profissional quando
consciente das diversas necessidades inerentes a um projecto de um stio para a Web com interveno
directa no design do mesmo: no necessita de ser um perito nas diferenas reas, mas deve conhecer as
especificidades de cada uma.
Existe assim uma estreita ligao entre usabilidade e esttica (Lawrence, et al. 2007) mesmo que duas
diferentes solues estticas para um mesmo projecto possam ser vlidas em termos de usabilidade,
como foi possvel apurar num dos casos de estudo. Esta afirmao tornou-se-nos bastante clara: o
estudo e a avaliao de usabilidade de uma interface grfica de um stio tm implicaes directas
no desenvolvimento da sua esttica, pois as opes quanto a forma, cor, tipografia, podero ser
influenciadas pelos estudos realizados. No existe muita investigao nesta rea, que se afigura como
um campo que merece ser explorado no futuro.
Alm do mais, as implicaes so claras em termos de economia de tempo e de pessoal (Nielsen,
2007). Um webdesigner consciente relativamente s questes de usabilidade, e sobretudo capaz de
rapidamente colocar em prtica uma avaliao de usabilidade de um projecto em que esteja envolvido,
consegue, de uma forma clere, resolver problemas imediatos que surjam, principalmente durante
as primeiras etapas de design e durante a prototipagem, que geralmente teriam de esperar por uma
avaliao especializada que poder demorar vrios dias a ser marcada, vrios dias a ser conduzida e
uma semana para ser analisada e apresentada (Krug, 2006).
Por outro lado, nem todos os projectos so de grande envergadura ou complexidade. Nem sempre
h tempo, oramento ou disponibilidade para realizar estudos etnogrficos junto dos utilizadores
ou elaborar personas, e nem sempre a equipa de design constituda por vrios Web designers que
permita troca de experincias, opinies e explorao de diferentes conceitos e diferentes respostas
a determinados problemas. Segundo um estudo de 2011 (A List Apart, 2011) sobre o universo de
pessoas que fazem stios46, 29.3% dos profissionais assumem-se como trabalhadores por contra
46. The survey for people who make websites (A List Apart, 2011)
88
Concluso
prpria e/ou freelancers, no contabilizando estudantes, pessoas que o fazem como hobby ou
voluntrios.47
O trabalho por conta prpria, ou em regime de freelance, por vezes um trabalho solitrio, e todas as
ferramentas que possibilitem um trabalho de qualidade so indispensveis quando uma nica pessoa
responsvel por todas as etapas do projecto.
Com os projectos a desenvolverem-se num ambiente acadmico, e com o envolvimento de estudantes
finalistas de design nos mesmos, ficou tambm patente a importncia dos princpios da usabilidade
fazerem parte do currculo de um curso de design (Nielsen 1997), seja como disciplina autnoma, seja
como parte de uma disciplina vocacionada para o Web Design. Spool afirma mesmo que vital que
ns observemos os utilizadores, pois s assim temos a plena conscincia dos problemas que surgem,
conscincia que no criada por um relatrio na terceira pessoa48.
Limitaes
Os constrangimentos de tempo surgidos ao longo dos diferentes casos de estudo impossibilitaram um
estudo mais completo sobre a utilizao prtica das metodologias definidas pelos princpios do Design
Centrado no Utilizador, visto que todos os projectos esto ainda em fase de concluso. A anlise de
todo o processo, desde as suas etapas preliminares at sua implementao final, ser necessria para
uma concluso mais fundamentada e mais abrangente, bem como para a apresentao final de um
conjunto de boas prticas em termos processuais que possam ser aplicadas em projectos para stios
Web, sobretudo de pequena e mdia dimenso.
Noutro aspecto, ficou tambm por testar na prtica as metodologias de avaliao qualitativa junto
de utilizadores com limitaes visuais e motoras, assim como a avaliao dos stios em dispositivos
mveis. Pensar no utilizador pensar em todos os utilizadores independentemente da sua habilidade
ou dispositivo que utiliza para aceder Web (Clark, 2007), e por habilidade entende-se no s a
experincia acumulada na utilizao na Web, como as limitaes fsicas do utilizador, assim como por
dispositivo entende-se no s smartphones, tablets e desktops, como leitores de ecr ou leitores braile.
Mais-valias
Este trabalho de investigao pretende constituir-se como uma matriz metodolgica de orientao para
a prtica profissional, mas tambm como um conjunto de princpios e experincias que possam servir
de base para novos estudos ou para a sua aplicao em currculos de mbito acadmico. Em termos
profissionais, as metodologias e as experincias aqui descritas fornecero um conjunto de ferramentas
indispensveis a uma maior especializao no mbito profissional do webdesign, seja em trabalho de
equipa, individualmente, em estdio ou em regime freelance. A conscincia dos princpios do Design
47. In 2011, freelancers made up 29.3% of careerists (e.g., all groups except students/hobbyists/volunteers) (A
List Apart, 2011)
48. Its vital that you observe your users yourself, Spool argues. If you just get this error report that says The user
tried to do this, your first reaction is: Well, why would anyone try to do that? But when you actually sit there and
you meet the guy and interact with him, you think: Ah! This guys pretty sharp. And then you watch him, and you
see behaviours you didnt expect to see. (Jared Spool, Net Magazine 2012.)
89
Centrado no Utilizador permitir uma melhor resposta a projectos futuros e uma maior compreenso
sobre o desenho de stios que so usados por inmeras pessoas, das mais diversas e diferenciadas
sensibilidades culturais e sociais.
Esta abordagem usabilidade acessvel carece tambm de estudo aprofundado, pelo que este estudo
mais uma porta que se abre com vista a investigaes futuras que procurem estabelecer uma ligao
umbilical entre o Web designer e o estudo da usabilidade, dada a relao intrnseca entre ambos,
sobretudo na influncia que os estudos de usabilidade tm sobre o design de interfaces visuais.
Acreditando nesta ligao umbilical, julgamos tambm que este estudo poder ainda alertar professores
e alunos para as questes da usabilidade e da sua importncia enquanto matria necessria nos
currculos dos cursos de Design, nomeadamente nos da Universidade do Porto.
Futuro
H ainda inmeras reas a explorar: a relao entre usabilidade e esttica, j referida, e tambm
a sua aplicao em dispositivos mveis como smartphones e tablets. O crescente recurso a estes
dipositivos, com ecrs de dimenses bem mais pequenas que os dispositivos desktop, uma realidade
incontornvel, prevendo-se que em 2014 o nmero de utilizadores que recorram a dispositivos mveis
para aceder Internet ultrapasse os que utilizam desktops (Morgan Stanley, 2010).
A aposta em interfaces flexveis que respondam de forma consistente a qualquer plataforma fornecendo
os mesmos contedos (Marcotte, 2010) lana novos desafios em termos de usabilidade, assim como a
mudana de paradigma na construo de stios Web, com uma passagem de desktop first, para mobile
first, que implica a construo de um stio Web com base na sua utilizao em dispositivos mveis,
sendo progressivamente adaptado a tablets e desktops (Wroblewski, 2009).
Este um tema que ainda este ano criou alguma polmica (Clark, 2012; Lawson, 2012), aps Nielsen
ter publicado um conjunto de directivas onde defendia a construo de stios diferentes para desktop
e dispositivos mveis como soluo ideal em termos de usabilidade, defendendo ainda que os stios
para dispositivos mveis deveriam ter menos contedo que a sua verso para desktop (Nielsen, 2012).
Tanto o projecto do novo stio da UP como do eLearning Caf fazem uso de interfaces flexveis,
disponibilizando em ambas as verses o mesmo contedo, pelo que o seu estudo ir certamente
levantar novos desafios.
With more mobile phones being sold than PCs, with a growing number of people using phones
as their exclusive Web client, the idea that we should treat the desktop as the real website is
simply becoming quaint.
Josh Clark, Nielsen is wrong on mobile, Smashing Magazine, 2012
Our 100-year mission is this: we want to get rid of all of the bad design in the world
Jared Spool, Net Magazine, 2012
90
REFERNCIAS BIBLIOGRFICAS
IJ, Raila; MANTERE, Jussi; (2001). Are Non-Expert Usability Evaluations Valuable? In 18th
International Symposium on Human Factors in Telecommunications (HfT01). Bergen, Norway.
BONNEVILLE, Douglas; (2011). How to Choose a Typeface. Disponvel em WWW: <http:// www.
smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/>. [Consultado em 2012.08.13]
COOPER, Alan; (1999). AThe Inmates Are Running the Asylum: Why High Tech Products Drive Us
Crazy and How to Restore the Sanity. Sams - Pearson Education.
COOPER, Alan; REIMANN, Robert; CRONIN, David; (2007). About Face 3: The Essentials of
Interaction Design. 3rd Ed. Indianapolis, Indiana: Wiley Publishing.
DIX, et al. (1998). Human-Computer Interaction, 2nd Ed. Prentice Hall.
FITTS, Paul M.; (1954). The information capacity of the human motor system in controlling the
amplitude of movement. In Journal of Experimental Psychology, vol.47, no.6, Junho 1954, pp. 381391.
GOULD, Nick; ZOLNA, Jesse; (2010). Eye Tracking and Web Usability: A Good Fit? Disponvel em
WWW: <http://uxmag.com/articles/eye-tracking-and-web-usability-a-good-fit>. [Consultado em
2012.08.13]
HENRY, Shawn L; (2006). Understanding Web Accessibility. Disponvel em WWW: <http:// uiaccess.
com/understanding.html>. [Consultado em 2012.08.09]
HENRY, Shawn L; (2007). Just Ask: Integrating Accessibility Throughout Design. Disponvel em
WWW: <http://www.uiaccess.com/accessucd/> . [Consultado em 2012.08.09]
ISO 9241-11; (1998). Ergonomic requirements for office work with visual display terminals (VDTs)
Part 11: Guidance on usability.
KRUG, Steve; (2000). Usability testing on 10 cents a day, Keeping testing simpleso you do enough
of it. In Dont Make Me Think! A Common Sense Approach to Web Usability. Berkeley, California: New
Riders.
KRUG Steve; (2006). Dont Make Me Think! A Common Sense Approach to Web Usability. Berkeley,
California: New Riders.
91
KRUG, Steve; (2010). Rocket Surgery Made Easy - The Do-it-yourself Guide to Finding and Fixing
Usability Problems. Berkeley, California: New Riders.
LAWRENCE, Dave; TAVACOL, Soheyla (2007). Balanced Website Design - Optimising Aesthetics
Usability and Purpose. London: Springer.
MIFSUD, Justin; (2011). An Extensive Guide to Web Form Usability. Disponvel em WWW: <http://
uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/ >. [Consultado em
2012.08.02]
MOLICH, Rolf, et al; (1990). Improving a human-computer dialogue. Communications of the ACM
33, 3, Maro 1990, pp.338-348.
NIELSEN, Jakob, et al; (1990). Heuristic evaluation of user interfaces. Proc. ACM CHI90 Conf., Abril
1990, pp.249-256.
NIELSEN, Jakob; (1992). Finding usability problems through heuristic evaluation. Proc. ACM CHI92,
Monterey, Maio 1992, pp.373-380.
NIELSEN, Jakob; (1993). Usability Engineering. Academic Press, San Diego.
NIELSEN, Jakob; (1994). Heuristic Evaluation, in Nielsen, J. e Mack, R. L. (Eds.), Usability Inspection
Methods. John Wiley and Sons, New York.
NIELSEN, Jakob; (1994). Guerrilla HCI: Using discount usability engineering to penetrate the
intimidation barrier. Academic Press, USA.
NIELSEN, Jakob; (1997). How Users Read on The Web. Disponvel em WWW: <http:// www.useit.
com/alertbox/9710a.html>. [Consultado em 2012.08.08]
NIELSEN, Jakob; (2003). Usability 101: Introduction to Usability. Disponvel em WWW: <http://www.
useit.com/alertbox/20030825.html>. [Consultado em 2012.04.09]
NIELSEN, Jakob; (2004). Card Sorting: How Many Users to Test, 2004. Disponvel em www: http://
www.useit.com/alertbox/20040719.html. [Consultado em 2012.07.08]
NIELSEN, Jakob; (2004) Risks of Quantitative Studies. Disponvel em www: http:// www.useit.com/
alertbox/20040301.html. [Consultado em 2012.07.11]
NIELSEN, Jakob; (2005). Ten Usability Heuristics. Disponvel em WWW: <http:// www.useit.com/
papers/heuristic/heuristic_list.html>. [Consultado em 2012.04.10]
92
Referncias Bibliogrficas
NIELSEN, Jakob; LORANGER, Loa; (2006). Prioritizing Web Usability. Berkeley, California: New
Riders.
NIELSEN, Jakob; (2007). Fast, Cheap, and Good: Yes, You Can Have It All. Disponvel em WWW:
<http://www.useit.com/alertbox/fast-methods.html> [Consultado em 2012.06.25]
NIELSEN, Jakob; (2008). How Little Do Users Read? Disponvel em WWW: <http:// www.useit.com/
alertbox/percent-text-read.html>. [Consultado em 2012.08.08]
NIELSEN, Jakob; (2012). How Many Test Users in a Usability Study?, 2012. Disponvel em www:
<http://www.useit.com/alertbox/20040719.html> [Consultado em 2012.06.22]
NORMAN, Donald; (1998). The Design of Everyday Things. MIT Press
MATHIS, Lukas; (2011). Designed for Use: Create Usable Interfaces for Applications and Web. Pragmatic
Programmers.
MAY, Tom; (2012). Jared Spool on usability and intuitive Design, 2012. Disponvel em WWW: <http://
www.netmagazine.com/interviews/jared-spool-usability-and-intuitive-design> [Consultado em
2012.08.10]
PIEROTTI, Denise; (1996). Heuristic Evaluation Activities. Disponvel em WWW: <http:// www.stcsig.
org/usability/topics/articles/he-activities.html> [Consultado em 2012.08.10]
RUBIN, Jeffrey; CHISNELL, Dana; (2008). Handbook of Usability Testing : How to Plan, Design, and
Conduct Effective Tests, 2nd Edition. New York: John Wiley.
SHACKEL, Brian; (1991). Usability Context, framework, definition, design and evaluation. Shackel,
B. e Richardson, S., (Eds.) Human Factors for Informatics Usability. Cambridge, UK, Cambridge
University Press, pp.21-37.
SHNEIDERMAN, Ben (1998). Designing the User Interface: Strategies for Effective Human - Computer
Interaction, 3rd Edition. Addison Wesley.
SMITH, S.L., et al, (1986). Guidelines for Designing User Interface Software. Disponvel em WWW:
<http://hcibib.org/sam/>. [Consultado em 2012.08.01]
SPOOL Jared M.; (2007). Three Important Benefits of Personas Disponvel em WWW: <http://www.
uie.com/articles/benefits_of_personas/> [Consultado em 2012.08.23]
TIDWELL, Jenifer; (2005). Designing Interfaces, Patterns for Effective Interaction Design. Sebastopol,
California: OReilly.
93
TOGNAZZINI, Bruce; (2003). First Principles of Interaction Design. Disponvel em WWW: <http://
www.asktog.com/basics/firstPrinciples.html>. [Consultado em 2012.06.11]
TULLIS, Tom; WOOD, Larry; (2004). How Many Users Are Enough for a Card-Sorting Study?
Proceedings UPA2004, Minneapolis, Junho 2004.
USERFOCUS. 23 Forms and Data Entry Usability Guidelines. Disponvel em WWW: <http://www.
userfocus.co.uk/resources/formschecklist.html>. [Consultado em 2012.07.28]
WE ARE COLORBLIND, (2012). A Quick Introduction to Colorblindness. <http:// wearecolorblind.
com/article/a-quick-introduction-to-color-blindness/>. [Consultado em 2012.08.04]
WEISCHENK, Susan (2010). The Psychologists View of UX Design. Disponvel em WWW: <http://
uxmag.com/articles/the-psychologists-view-of-ux-design>. [Consultado em 2012.08.10]
94
ABREVIATURAS E SMBOLOS
CSS
Cascading Style Sheets, ou Folha de estilo em cascata em portugus
FBAUP
Faculdade de Belas Artes da Universidade do Porto
HTML
HyperText Markup Language, ou Linguagem de Marcao de Hipertexto em portugus
IHC
Interaco Humano-Computador, do ingls Human-Computer Interaction
ISO
International Organization for Standardization, ou Organizao Internacional de Normalizao em
portugus
SIGARRA
Sistema de Informao para Gesto Agregada dos Recursos e dos Registos Acadmicos
UP
Universidade do Porto
95
ANEXO A
AVALIAO HEURSTICA AO ACTUAL STIO DA UP
97
RELATRIO USABILIDADE SIGARRA.UP.PT

Foram considerados os resultados do inqurito como base para conduzir uma
anlise usabilidade do sigarra.up.pt.
As pginas ou seces analisadas foram seleccionadas a partir das respostas
dadas s perguntas Que informao procurou? / What kind of information
were you looking for?:
1)
2)
3)
4)
5)
6)
7)
8)
9)
Bibliotecas e Museus
Doutoramentos
Educao continua
Histria
Investigao
Licenciaturas
Mapas e Localizao
Mestrados
Publicaes
A anlise ser feita segundo as 10 Heursticas de Nielsen.

1) VISIBILIDADE DO ESTADO DO SISTEMA.
ONDE ESTOU?
Uma vez seleccionada uma seco no menu de navegao principal, esse mesmo
indicador substituindo por uma imagem aleatria relacionada com a U.Porto,
fazendo com que o utilizador perca alguma noo de onde est. Deixa de ser
claramente assinalado no menu a posio do utilizador mas colocado o ttulo
da seco na coluna central, por cima dos menus horizontais de navegao.
De forma a tornar o sistema mais intuitivo o ideal seria manter o ttulo e o
indicador no menu principal.
O sistema de navegao secundrio corresponde a um menu e um submenu que
se dispem horizontalmente acima do contedo principal da pgina. A
localizao do utilizador dada atravs da diferenciao cromtica entre a
seco e subseco seleccionadas em contraste com as restantes no activas. Tal
como foi referido no estudo de acessibilidade, a diferenciao cromtica
insuficiente para alguns utilizadores, no caso especfico do primeiro menu
horizontal.
PARA ONDE POSSO IR?
Homepage: atravs do logtipo no canto superior esquerdo da janela;
Todas as restantes seces do site atravs do menu de navegao principal;
Outras subseces da rea onde me encontro actualmente atravs dos
submenus.
Tenho ainda outras opes relacionadas com o contedo principal de cada
pgina que se encontram na barra complementar direita. Esta coluna pouco
intuitiva uma vez que parece no existir um critrio muito forte em relao a
contedo apresentado. Algumas vez tenho apenas links para as notcias mais
recentes enquanto que noutros casos tem mesmo informao essencial que
parece pertencer na coluna central do contedo principal. Ex: Lista de cursos
http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=1001601. Esta
distribuio irregular de contedos leva a que o utilizador navegue com incerteza
e obriga-o a analisar a pgina toda com cuidado para no lhe escapar a

informao que procura. Causa desconforto e uma experincia pouco intuitiva.
2) COMPATIBILIDADE DO SISTEMA COM O MUNDO REAL
O sistema deve usar a linguagem do utilizador, com palavras, frases e conceitos
familiares ao utilizador, em vez de termos orientados ao sistema. Deve seguir
convenes do mundo real de forma a apresentar a informao de uma forma
natural e lgica.
A linguagem utilizada no sigarra.up.pt parece estar adequada ao pblico alvo. A
utilizao de siglas mais especficas feita dentro de reas dedicadas a grupos
de utilizadores mais restritos.
Ex: http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=1001459.
3) CONTROLO E LIBERDADE DO UTILIZADOR
O utilizador deve sentir que tem sempre controlo sobre o sistema. Se seleccionar
uma funo errada dever ter a possibilidade de termin-la ou se escolher um
caminho errado deve conseguir voltar atrs e seleccionar outro.
No sigarra.up.pt apresentado, em todas as pginas, uma forma de regresso
homepage (logtipo no canto superior esquerdo acompanhado de um cone
home), assim como a possibilidade de escolher outra seco do website
atravs do menu principal de navegao sempre presente esquerda.
O utilizador sente-se seguro a navegar por saber que a qualquer momento pode
voltar ao incio da seco ou subseco sem grandes dificuldades.
4) CONSISTNCIA E PADRES
Utilizadores no deveriam ter de adivinhar se diferentes palavras, situaes, ou
aces significam a mesma coisa. Deve seguir-se um padro implementado no
sistema.
Ao comparar as designaes utilizadas, por exemplo, nas licenciaturas,
mestrados e doutoramentos em relao aquelas usadas nos cursos de formao
contnua verificamos que para o mesmo conjunto de informao (uma listagem
de cursos disponveis) existem duas designaes distintas: Lista de Cursos e
Catlogo de cursos. Isto confunde o utilizador na medida em que parece
existir uma diferena no gnero de informao apresentada, quando na verdade
no h.
A repetio de ttulos iguais para contedos ligeiramente diferentes em seces
e espaos com hierarquias diferentes provoca no utilizador confuso e
desconfiana em relao informao absorvida, uma vez que surge a suspeita
de poder ainda faltar outro pedao de informao escondido noutra seco.
Ex: Mobilidade em http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina
=122311 e Mobilidade em http://sigarra.up.pt/up/web_base.gera_pagina?
p_pagina=1001545.
Existem pginas em que os menus horizontais de navegao desaparecem sem
justificao e por isso fogem norma de navegao implementada no site. Ex:
http://sigarra.up.pt/up/web_base.gera_pagina?P_pagina=122
498, http://sigarra.up.pt/up/conteudos_geral.conteudos_ver?pct_pag_id=1223
50&pct_parametros=p_pagina=122350&pct_disciplina=&pct_grupo=885&pct_g
rupo=886&pct_grupo=887&pct_grupo=889&pct_grupo=1137&pct_grupo=132
1#1321
5) PREVENO DE ERROS
FORMULRIOS
Ex: http://sigarra.up.pt/up/u_funcionarios_geral.formquery?pa_onde=web_base.
gera_pagina?P_pagina=1001651
Se o formulrio submetido sem nenhum campo preenchido aparece toda a
informao passvel ser pesquisada, por ordem alfabtica. No existe uma
mensagem de erro ou alguma forma de alertar o utilizador para o facto dos
campos de preenchimento estarem vazios.
Se os campos so mal preenchidos (por exemplo o de categoria) feita a
pesquisa e devolvida uma pgina com um cone e o erro No foram
encontrados resultados. Esta mensagem insuficiente uma vez que no alerta
o utilizador para a razo pela qual no foram encontrados resultados
compatveis com a pesquisa.
PGINAS DE ERRO
As pginas de erro no so consistentes. No caso comum de faltar a ltima letra
de um URL, por ser mal copiada e colada por exemplo, so diversos os tipos de
erro devolvidos pelo sistema:
- http://sigarra.up.pt/up/u_funcionarios_geral.formquery?pa_onde=web_base.
gera_pagina?P_pagina=100165 a pgina construda sem os menus de
navegao horizontal (URL original: http://sigarra.up.pt/up/u_funcionarios
_geral.formquery?pa_onde=web_base.gera_pagina?P_pagina=1001651)
- http://sigarra.up.pt/up/web_base.gera_pagina?P_pagina=12249 o ecr fica em
branco sem pgina e sem mensagem de erro (URL original: http://sigarra
.up.pt/up/web_base.gera_pagina?P_pagina=122498)
- http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=244 o utilizador
redireccionado para uma pgina onde lhe pedido para efectuar uma
autenticao no sistema (URL original: http://sigarra.up.pt
/up/web_base.gera_pagina?p_pagina=2444)
- https://sigarra.up.pt/up/web_page.inicia pgina de Erro 404 (URL original:
https://sigarra.up.pt/up/web_page.inicial)
ERRO 404
Ex: http://sigarra.up.pt/up/web_base.gera_pagina?p_pagia=1001691
So fornecidas explicao, instrues e opes suficientemente bem estruturadas
para orientar o utilizador de volta ao site, de uma forma mais satisfatrio
possvel.
6) RECONHECIMENTO AO INVS DE LEMBRANA
O utilizador deve conseguir reconhecer onde est sem ter que se lembrar dos
passos todos que deu at chegar ali.
Para alm do problema do menu principal j acima referido (falta de indicador
da posio actual do utilizador), na maioria das pginas o utilizador tem alguma
facilidade em situar-se no interior da estrutura do site.
Os maiores problemas surgem quando o utilizador segue um link interno que o

levo a uma pgina onde os menus horizontais de navegao desaparecem.
Quando isto acontece o utilizador lanado para uma pgina sem contexto,
sendo obrigado a utilizar o boto back do browser ou a navegar para a
homepage e comear o processo de procura da informao de novo.
Ex: se nesta pgina http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=
1001561 seguirmos o link Documentos, presente na coluna da direita, somos
enviados para http://sigarra.up.pt/up/conteudos_geral.conteudos_ver?pct_pag
_id=1001561&pct_parametros=p_pagina=1001561
7) FLEXIBILIDADE E EFICINCIA DE USO
OS LINKS LEVAM O UTILIZADOR ONDE ERA ESPERADO?
Salvo raras excepes o texto dos links suficientemente explcito. No so
dados nomes de ornamento s seces ou subseces. No caso de novas
janelas ou novas tabs, existe um aviso dado atravs do atributo title da
hiperligao.
ESTRUTURA
A ESTRUTURA DO LAYOUT EXPLCITA NA MEDIDA EM QUE PROPORCIONA UMA
ORGANIZAO EFICIENTE E LGICA DO CONTEDOS?
O site est divido em 3 colunas: navegao principal, contedo principal,
informao complementar. Um dos maiores problemas detectados a
ineficincia na articulao de contedos entre a coluna central e a coluna
complementar. Muitas vezes informaes ou links que deveriam ser
apresentados como fazendo parte do contedo principal, so enviados para a
coluna complementar. Fenmeno que obriga o utilizador a procurar
minuciosamente pela informao que pretende.
Ex: http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=1001601
Neste exemplo, uma pgina dedicada s Licenciaturas, apresentado ao
utilizador um link para uma listagem das diversas unidades orgnicas no
interior do contedo principal, enquanto que a listagem de cursos disponveis
(que ser potencialmente o que mais procurado nesta pgina) est remetida
para a coluna complementar.
O CARREGAMENTO DAS IMAGENS E DOS CONTEDOS EFICIENTE?
No foram detectados problemas nesta rea.
8) ESTTICA E DESIGN MINIMALISTA
So utilizadas demasiadas seces e subseces. o contedo organizado
segundo trs nveis: menu principal, submenu horizontal, submenu do submenu
horizontal.
Cada uma destas seces contem toda a informao que lhe diz respeito
directamente ou que lhe est de alguma forma relacionada. O que acontece na
prtica que existem contedos muito semelhantes repetidos ao longo do site.
Trata-se de uma abordagem confusa, onde a arquitectura da informao no foi
bem estruturada e que obriga o utilizador a procurar pedaos do mesmo tema
em partes diferentes do site. O utilizador ao encontrar informao semelhante
repetida levado a questionar a qualidade e integridade da informao que
tinha lido anteriormente, talvez seja impulsionado a ler duas vezes contedos
quase iguais ou ento a desistir de procurar por a experincia se revelar como
demasiado desorganizada.
As imagens aleatrias, que surgem no contexto do menu principal, so rudo
visual desnecessrio e confundem o utilizador porque ocupam o lugar daquilo
que deveria ser um indicador visual da seco onde actualmente se encontra.
No contexto da homepage, a rea central quase toda (foco de ateno do
utilizador) ocupada por imagens aleatrias que em nada contribuem para
melhor esclarecer o utilizador acerca da instituio da Universidade do Porto.
Chegado homepage o utilizador no fica a saber mais do que j sabia
anteriormente.
9) AJUDAR OS USURIOS A RECONHECER, DIAGNOSTICAR E CORRIGIR ERROS
Mensagens de Erro devem ser apresentadas em linguagem simples, sem cdigo,
indicar claramente o problema e sugerir uma soluo.
Como j foi visto, existe uma grande inconsistncia nas pginas de erro do
sigarra.up.pt, assim como a inexistncia de mensagens de erro de submisso de
formulrios ou sugestes de preenchimento. A nica mensagem de erro passvel
de ser considerada como tal a do Erro 404. Esta ltima explicita claramente o
problema A pgina pode ter sido removida, estar temporariamente indisponvel
ou o seu endereo ter sido alterado e sugere quatro possveis solues: 1)
hiperligao para voltar pgina anterior, 2) Certifique-se de que o endereo
introduzido est correcto, 3) Faa Reload/Refresh no seu programa de
navegao (browser), ou 4) hiperligao para aceder pgina inicial.
10) AJUDAS E DOCUMENTAO
Sem links para ajuda.
Existe um ndice de A a Z de toda a informao disponvel no site.
ANEXO B
PERSONAS PARA O PROJECTO DO NOVO STIO DA UP
105
PERSONAS
Joo Magalhes
Estudante do Ensino Secundrio
Frequenta o 12 na Escola Secundria Alexandre Herculano no Porto.

Encontra-se na rea de Cincias e Tecnologias e pretende ingressar
num curso relacionado com a engenharia informtica. Tem 17 anos
e j usa o computador desde os 6 e a Internet regularmente desde
os 10.
Interesses
Cursos oferecidos pela universidade nas reas cientficas e tecnolgicas
Sadas profissionais dos diferentes cursos ou reas cientficas
Como a universidade? (Vida acadmica, localizao das faculdades,
transportes)
Contacto com grupos de alunos e/ou associaes de estudantes
Cenrio 1:
Apesar de saber a rea de estudos que quer prosseguir, o Joo ainda
est com dvidas sobre que curso tirar. De forma a esclarecer as
dvidas vai tentar comparar os planos de estudo dos cursos que lhe
parecem mais interessantes.
Cenrio 2:
De forma a conhecer a melhor o ambiente, o Joo pondera fazer
uma visita faculdade. Para isso, vai ao site procurar a morada da
faculdade e instrues de como l chegar ou sobre com quem pode
falar nessa visita.
PERSONAS
Filipa Fernandes
Estudante do Ensino Secundrio
Tem 17 anos e frequenta a Escola Secundria de Vieira do Minho na

rea de Cincias Socioeconmicas. Sempre viveu em Vieira do Minho
e no conhece ningum no Porto.
Interesses
Cursos oferecidos pela Universidade
Como a Universidade
Contactos
Alojamento
Como a cidade do Porto
Cenrio 1:
Como no conhece a universidade, nem a cidade do Porto, a Filipa
vai tentar encontrar informao sobre o ambiente da cidade e da
universidade.
Cenrio 2:
Depois de ter decidido a que curso se candidatar, a Filipa procura
informaes sobre alojamento. Vai ao site ver se universidade disponibiliza residncias de estudantes. E se sim, o que tem que fazer
para se candidatar.
PERSONAS
Susana Santos
Estudante de 1 Ciclo
Tem 22 anos e encontra-se a frequentar o 3 ano da licenciatura em

Histria de Arte da Faculdade de Letras da U.Porto. Ainda se encontra indecisa entre continuar a estudar ou procurar trabalho. Caso
continue a estudar, pondera entre continuar na U.Porto ou tentar
outra universidade.
Interesses
Mestrados
Mobilidade
Emprego
Formao contnua
Investigao
Cenrio 1:
Agora que se encontra a finalizar o curso, a Susana vai procurar
quais so as opes de mestrados oferecidos pela Universidade
dentro da rea. Alm dos cursos na sua faculdade que ela j
conhece mais ou menos procura sobretudo encontrar cursos
oferecidos por outras faculdades dentro da sua rea de interesse.
Interessam-lhe tambm eventuais ofertas de emprego (em part- ou
full-time) que a ajudem a suportar os custos com um eventual curso
de mestrado.
PERSONAS
Fernando Ferreira
O Fernando tem 25 anos. Encontra-se na recta final do Mestrado em

Finanas e Fiscalidade. Quer prosseguir a via acadmica mas ter de
encontrar um emprego ou bolsa que permita manter-se a si prprio
ao longo do Doutoramento.
Interesses
Doutoramento
Emprego
Investigao
Cenrio 1:
Ainda se encontra procura de um Doutoramento logo, vai rever o
leque de ofertas disponveis.
Cenrio 2:
O Fernando no tem em vista nenhuma universidade em particular,
no descarta a possibilidade de sair do Porto mas gostou particularmente da sua experincia enquanto aluno da FEP.
Cenrio 3:
Uma vez que o primeiro ano ser curricular ter de ter em especial
considerao a compatibilidade do horrio em que o doutoramento
se desenrola com o seu novo horrio de trabalho, assim ser fundamental o acesso a esse gnero de informao.
Cenrio 4:
Aps um desentendimento na secretria, o Fernando pretende clarificar quais so os seus direitos e para isso vai procurar informaes
junto do provedor.
PERSONAS
Mrio Mendes
Estudante de Formao Contnua
O Mrio actualmente professor de Desenho no ensino secundrio

e foi incentivado pela prpria instituio a ingressar num Curso de
Formao Contnua. A situao actual do Mrio no lhe deixa muito
tempo disponvel mas sempre gostou de aprender e est motivado
para escolher um curso.
Interesses
Formao Contnua
Cenrio 1:
O Mrio tem liberdade de escolha de um curso no interior de duas
grandes reas de estudo: Artes ou Cincias da Educao, assim ter
de filtrar o catlogo de cursos segundo estas duas opes, percebendo tambm quais so os cursos oferecidos em regime pslaboral.
Cenrio 2:
Tendo em conta que mora e trabalha na periferia da cidade, ser
particularmente til a consulta de mapas e possibilidades de transporte para chegar s diversas faculdades.
PERSONAS
Lus Lopes
Tem 30 anos. ABD no curso de doutoramento em Arquitectura. Pondera prosseguir carreira acadmica ou profissional fora da Universidade.
Interesses
Investigao (post-docs, etc. na U.Porto ou outras universidades)
Concursos docentes (U.Porto ou outras, Portugal ou estrangeiro)
Call for papers ou publicaes cientficas
Normas e regulamentos para apresentao de teses e defesa das
mesmas
Cenrio 1:
Agora que se encontra a preparar a defesa da tese, o Lus vai
procurar as normas de apresentao definidas pela universiadade.
PERSONAS
Susan Spencer
A Susan actualmente aluna de Mestrado na rea de jornalismo

no estrangeiro. No domina o portugus mas est interessada em
completar um semestre curricular em Portugal. No conhece ningum que a possa ajudar com questes de alojamento e transporte.
Interesses
Mobilidade
Cursos na rea do jornalismo e cincias da comunicao
Vida no Porto
Cenrio 1:
Procura cursos ou cadeiras da rea do jornalismo, fotografia e video
e por isso filtrar a informao segundo estes trs grupos e no
apenas por unidade orgnica ou cursos.
Cenrio 2:
Precisa de guias de orientao acerca da vida no Porto, alojamento,
transportes e localizao das instituies de ensino.
Cenrio 3:
Procura um curso de Portugus.
Cenrio 4:
Gostaria de entrar em contacto com outros alunos de mobilidade
que j tenham feito um percurso semelhante ao dela.
PERSONAS
10
Maria Monteiro
Alumni
Tem 31 anos e licenciou-se em Qumica pela Faculdade de Cincias.

Desde o fim do curso que se encontra a trabalhar na rea. Apesar de
razoavelmente satisfeita com a actual situao, no pe de parte
outras alternativas de futuro.
Interesses
Alumni
Notcias
Eventos
Formao Contnua
Cursos de 2 e 3 ciclos
Emprego
Cenrio 1:
Apesar de j ter acabado o curso h alguns anos, a Maria gosta de
estar a par das iniciativas da universidade. Como tal, gosta de ir ao
site procurar eventos nos quais possa participar assim como notcias sobre a Universidade.
Cenrio 2:
A Maria gosta se manter actualizada na sua rea de formao. Gosta
regularmente de ir ao site da U.Porto ver se existem novos cursos de
formao contnua na sua rea.
PERSONAS
11
Ctia Carvalho
Me
A Ctia me da Filipa Oliveira que est agora a ponderar ingressar

no Ensino Superior. Pretende auxiliar a filha na escolha de um curso
e instituio de ensino uma vez que a Filipa parece estar mais motivada pela vida no Porto do que propriamente pelo curso a que se vai
candidatar.
Interesses
Cursos
Vida acadmica
Propinas
Alojamento
Mostra U.Porto
Cenrio 1:
Procurar cursos de licenciatura a que o agrupamento de Cincias
Socioeconmicas d acesso e quais so as sadas profissionais de
cada um e/ou quais so as ofertas de formao ao nvel de 2 ciclo.
Cenrio 2:
Consultar o valor das propinas anuais, condies de pagamento, etc.
Cenrio 3:
Encontrar alojamento universitrio.
Cenrio 4:
Procurar contacto directo com outros pais de alunos universitrios
e/ou com responsveis pelas faculdades que leccionam os cursos a
que a filha se ir candidatar.
PERSONAS
12
Ana Arajo
Docente Ensino Superior
A Ana actualmente professora na Faculdade de Desporto da

U.Porto. Tem 32 anos. A sua carga horria no muito extensa pelo
que decidiu enveredar por um ramo de investigao que j tinha
em vista muitos anos. Ainda se encontra numa fase de recolha de
informao e procedimentos.
Interesses
Investigao
Cenrio 1:
Vai fazer uma filtragem dos contedos por rea de investigao:
Cincias da Sade.
Cenrio 2:
Tem interesse em rever projectos de investigao semelhantes ao
seu.
Cenrio 3:
Requer acesso a informao acerca de regulamentos e procedimentos regulares de acesso/ candidatura.
PERSONAS
13
Antnio Fonseca
Poltico Local
Tem 61 anos, assessor do Presidente da Cmara Municipal do

Porto e desde os 22 que est envolvido na politica. Trabalha diariamente num computador, mas no algo que se sinta vontade a
fazer. Usa-o sobretudo para responder e escrever emails e consultar
um ou outro site.
O Antnio sofre de degenerao muscular relacionada com a idade,
que no seu caso faz com a viso central, no olho esquerdo, seja desfocada. Tem dificuldade em ler informao online formatada numa
fonte demasiado pequena ou com pouco contraste sobre o fundo e
fica frustrado quando tenta fazer zoom de um site e este fica completamente desformatado e ilegvel.
Interesses:
Factos e Nmeros
Eventos
Contactos
Parcerias
Cenrio 1:
O Antnio encontra-se a preparar uma nova proposta de legislao
para apresentar na prxima Assembleia Municipal; como tal, vai
procurar no site da U.Porto dados que sustentem a sua proposta.
PERSONAS
14
Paula Pires
Empresria
A Paula tem 40 anos e gerente de uma seguradora e foi-lhe pedido

para encontrar cursos de formao contnua para o departamento
de contabilidade.
Interesses
Formao Contnua
Cenrio 1:
Encontrar cursos que se adequem necessidades de formao do
departamento de contabilidade.
Cenrio 2:
Apresentar aos superiores um oramento que inclui propinas e
transportes.
Cenrio 3:
Apresentar igualmente os objectivos e competncias adquiridas
para cada um dos possveis cursos.
Cenrio 4:
Consultar datas de incio e fim dos cursos, assim como os seus
horrios.
PERSONAS
15
Joana Junqueira
Jornalista
Tem 38 anos e na trabalha na redaco do Jornal de Notcias. Actualmente encontra-se a fazer uma reportagem sobre um projecto
de investigao da U.Porto que recentemente ganhou um prmio. A
Joana tem um ligeiro tremor na mo direita que no a impossibilita
de fazer a maioria das tarefas como escrever ou usar o rato com
alguma eficcia. No entanto, quando os botes ou links so demasiado pequenos torna-se frustrante acertar na sua rea clicvel.
Interesses
Factos e Nmeros
Histria
Projectos de Investigao
Pesquisar pessoas
Cenrio 1:
De forma a completar a completar o seu artigo, a Joana vai procurar
dados sobre o trabalho efectuado pelos centros de investigao na
U.Porto.
Cenrio 2:
A Joana sabe que o prmio foi ganho pelo investigador da Faculdade
de Medicina Francisco Gonalves, para recolher mais informao
sobre a pessoa vai pesquisar o nome dele no site.
PERSONAS
16
Jos Santos
Turista
Tem 42 anos e trabalha na rea da educao. Est com a famlia a

prepara uma vista ao Porto para as prximas semanas. No conhece
muito da cidade e pareceu-lhe interessante explorar tambm o que
a U.Porto tem para oferecer.
Interesses
Bibliotecas
Museus e Arquivo
Histria
Loja
Cenrio 1:
De forma a planear a sua visita, o Jos quer saber que museus a Universidade tem disponveis a visitantes. Consequentemente tambm
procura saber a morada e horrios de funcionamento dos mesmos.
PERSONAS
17
Allegra del Sarto

Turista Estrangeira
A Allegra estudante universitria em Itlia. Vem a Portugal, no

pela primeira vez, visitar a av. No percebe portugus. Procura actividades ou espaos universitrios que possa frequentar e talvez at
conhecer outros estudantes da sua idade.
Interesses
Bibliotecas
Museus
Actividades (conferncias, exposies)
Cenrio 1:
Acesso a informao traduzida para ingls.
Cenrio 2:
Informao relativa a bibliotecas, museus, exposies, actividades,
conferncias, ect. (horrios, localizao, transportes).
PERSONAS
18
Alexandra Antunes
Estudante do 8 ano de escolaridade
A Alexandra pensa ingressar no Ensino Superior depois de completar

o 12 ano. Trata-se de um projecto a longo prazo visto ainda se encontrar no ensino bsico. Ouviu falar, atravs de uma amiga, acerca
da Universidade Jnior e est agora interessada em explorar este
gnero de activadades que a U.Porto oferece a pessoas da sua idade.
Tem vontade com o computador e com Web e por isso vai procurar
a informao de que precisa online.
Interesses
Universidade Jnior
Dias Abertos
Bibliotecas
Museus
Cenrio 1:
Escolher de entre as vrias actividades oferecidas na U.Jnior.
Cenrio 2:
Manter-se a par das datas dos dias abertos da U.Porto.
Cenrio 3:
Descobrir e localizar bibliotecas e museus.
Cenrio 4:
Aceder a informao relativa a inscries, datas e horrios.
PERSONAS
19
Manuel Maia
Professor de Secundrio
Tem 54 anos. Professor do secundrio da provncia que quer visitar

uma Faculdade ou a Universidade com os seus alunos. Ou convidar
um representante da U.Porto ou de uma das U.O. para participar num
dia aberto (ou dia de carreira) na sua escola.
Interesses
Dias abertos
Contactos das diversas U.O
Localizao das vrias U.O
Cenrio 1:
Dias abertos, Contactos das diversas U.O, Localizao das vrias U.O.
Cenrio 2:
Entrar em contacto que algum responsvel na U.O.
Cenrio 3:
Localizar a U.O a ser visitada.
PERSONAS
20
ConstruNorte
Empresa de Construo
Empresa de construo civil procura colaborao com a U.Porto para

desenvolvimento de determinada tecnologia. a primeira vez que
fazem nada do gnero por isso no sabem com quem falar ou quais
os procedimentos normais para iniciar contacto com a Universidade.
Interesses
Contactos
Procedimentos e Regulamentos relativos a colaboraes
Cenrio 1:
Consultar a informao dsponvel online na procura de alguma
orientao no sentido de como apresentar uma proposta de colaborao a determinada U.O. (regulamentos, procedimentos, candidaturas).
Cenrio 2:
Procurar algum responsvel com quem comunicar pessoalmente.
Cenrio 3:
Ver exemplos de cooperaes anteriores.
ANEXO C
ARQUITECTURA DE INFORMAO DO NOVO STIO DA UP
125
faculdade
faculdades
reitor
rgo de
governo
PDF
relatrios
factos e nmeros
prestao de
contas
funcionamento
vice-reitor +
etc
rgos de
governo
organizao
a universidade
prmios
prmios
antigos alunos
ilustres
professores
emritos
doutores h.c.
histria
notcias >
concursos
repositrios
arquivo
biblioteca
bibliotecas e
arquivos
about
museu
museus
edifcio
edifcios
links destacados:
loja, editorial
curso
cursos
reas (+ cursos)
alojamento,
bolsas,
propinas,
mobilidade,
acesso e
ingresso
alojamento,
bolsas,
propinas,
mobilidade,
acesso e
ingresso
faculdade
2 ciclo
1 ciclo
cooperao >
relaes
internacionais
alojamento,
bolsas,
propinas,
mobilidade,
acesso e
ingresso
3 ciclo
viver >
alojamento
estudar
faculdade
estudos
avanados
curso
reas (+ cursos)
especializao
reas (+ cursos)
formao
contnua
estudos sniores
u. jnior
u. vero
outros cursos
centro de
investigao
(id.up)
centros de
investigao
investigao
bolsas
como investigar
(financiamento,
alojamento, etc.)
financiamento
viver >
alojamento
UPIN
I&D+i
UPTEC
about > edifcios
about > museus
about >
bibliotecas e
arquivos
turismo / cidade
alojamento
SASUP
cantinas
viver/visitar
out
in
voluntariado
actividades
extra-curriculares
cooperao >
relaes
internacionais
informaes para
alunos de
mobilidade
vida acadmica
mostra up
e-learning cafs
sade na U.Porto
participadas/
empresas
participadas
relaes
internacionais
como
colaborar;
contactos
gabinete do
antigo
estudante
benefcios
cooperao
alumni
eventos
concursos
bolsas,
candidaturas,
concursos e
prmios,
recrutamentos,
bolsas de
emprego
notcias gerais
actualidade,
mobilidade e
cooperao,
recortes de
imprensa,
repositrio,
TIC, UPIN,
I&D, ensino e
formao
notcias/eventos
reas cientficas/
temas
calls
tv.up
noticias.up
jpr
jpn
provedor
docentes
about > edifcios
campus
provedor
estudante
provedor
funcionrios
mapas
contactos
associaes de
estudantes
transportes
rodap
redes sociais
termos de uso /
privacidade
ANEXO D
PROTTIPOS DE LAYOUTS PARA O NOVO STIO DA UP
133
ndice
Layout 1
Pgina da seco Estudar, 5
Pgina da seco Licenciaturas, 7
Pgina da seco Licenciaturas por reas Cintificas, 9
Pgina da seco Cincias da Educao (site up), 11
Pgina da seco Cincias da Educao (site faculdade), 13
Layout 2
Pgina da seco Estudar, 15
Pgina da seco Licenciaturas, 17
Pgina da seco Licenciaturas por reas Cintificas, 19
Pgina da seco Cincias da Educao (site up), 21
Pgina da seco Cincias da Educao (site faculdade), 23
11
13
15
17
19
21
23
ANEXO E
DIRECTIVAS DE USABILIDADE, ACESSIBILIDADE E MOBILE

PARA O NOVO STIO DA UP
157
DIRECTIVAS DE
ACESSIBILIDADE,
USABILIDADE E
MOBILE
Porto, Outubro 2011
DIRECTIVAS DE ACESSIBILIDADE, USABILIDADE E MOBILE
ndice
Directivas de Acessibilidade, 3
Directivas de Usabilidade, 15
Directivas Mibile, 19
Directivas de Acessibilidade
1.
Consideraes Gerais
1.1.
Limitar ao essencial os passos necessrios para chegar ao contedo.
1.2.
Evitar splash screens ou pginas de apresentao sem informao.
1.3.
Fornecer todo o contedo em pelo menos duas lnguas (portugus e ingls).
1.4.
Manter consistncia de layout e mecanismos de navegao ao longo de todas as pginas.
2.
HTML markup
2.1.
Geral
2.1.1.
Assegurar sempre uma correcta estrutura semntica do HTML. Sem essa segurana as
tecnologias assistivas tero mais dificuldade em interpretar correctamente uma pgina
Web.
2.1.2.
Utilizar folhas de estilo (CSS) para separar o contedo da sua formatao visual.
2.2.
Imagens
2.2.1.
Utilizar o atributo alt para descrever de forma textual a informao contida numa imagem
ou grfico.
2.2.2.
No caso da descrio textual da imagem ser demasiado extensa (no caso de imagens ou
grficos muito complexos) fazer uso do atributo longdesc em vez do alt.
2.2.3.
Ter ateno ao texto preenchido no alt, verificar se realmente se constitui como uma ajuda e no algo que contribua para dificuldades de utilizao. Devem testar-se os atributos
alt com um leitor de ecr enquanto o ecr se encontra desligado, de forma a verificar se o
texto faz ou no sentido no contexto em que est inserido. Consideraes especficas em
relao ao texto alt:
2.2.3.1. Deve apresentar o contedo e a funo da imagem. Por exemplo, se a imagem se tratar
de um link ento o texto alternativo para alm do contedo da imagem dever tambm
explicitar a pgina de destino (funo).
ex: No caso especfico do logtipo da U.Porto, que funcionar como uma hiperligao
para a homepage (colocado no canto superior esquerdo do website), o texto alt
dever ser composto Link homepage Universidade Porto e no apenas Homepage. Neste ltimo caso e uma vez que este ser um dos primeiros links a ser
lido pelas tecnologias assistivas em todas as pginas, poder induzir os utilizadores em erro levando-os a acreditar que se encontram sempre na homepage.
2.2.3.2. No deve ser redundante, ou seja, repetir informao j mencionada no texto da pgina.
O texto alternativo dever expor de forma sucinta a informao contida na imagem sem
repetir informao j includa no corpo de texto.
2.2.3.3. No utilizar expresses como Imagem de... ou Grfico de.... As tecnologias assistivas
j possuem mecanismos que alertam os utilizadores acerca da presena de imagens e
grficos, sendo que repetir estas palavras no texto alt torna-se extremamente maador.
2.2.3.4. No caso de uma imagem ser meramente decorativa ento o atributo alt dever ser preenchido da seguinte forma alt=.
2.3.
Tabelas
2.3.1.
Nunca utilizar tabelas apenas por questes de formatao grfica (criar um layout com
vrias colunas por exemplo). Fazer uso de tabelas apenas quando o contedo as justifica.
2.3.2.
Garantir que a todas as tabelas est associado um <summary> adequado, que deve incluir
uma breve descrio da forma como a informao est estruturada no interior da tabela,
assim como uma breve explicao de como navegar essa informao de forma eficaz.
2.3.3.
Assegurar o correcto markup das tabelas, com cabealhos <th> suficientemente descritivos.
2.3.4.
Evitar tabelas demasiado extensas. Se possvel dividir essas tabelas de forma lgica em
vrias tabelas mais pequenas. Cada uma delas correctamente estruturada com cabealhos e um sumrio da estrutura da informao.
2.4.
Listas
2.4.1.
Listas devem ser marcadas como tal recorrendo aos respectivos elementos HTML disponveis: <ul>, <ol>, <dl>.
2.5.
Hiperligaes
2.5.1.
Evitar um nmero muito elevado de links numa nica pgina. Isto poder tornar-se incmodo para utilizadores de leitores de ecr uma vez que estes, em muitos casos, navegam
uma determinada pgina saltando de link em link de forma a construir uma ideia geral dos
contedos da pgina.
2.5.2.
As hiperligaes textuais devem ser sempre sublinhadas.
2.5.3.
Os links textuais devero ser suficientemente descritivos de forma a no dependerem

demasiado de informao contextual. Se pensarmos em utilizadores de leitores ou magnificadores de ecr conseguiremos perceber as dificuldades que se apresentam quando o
destino do link depende apenas da informao textual e grfica em seu redor, fenmeno
que obriga este grupo de utilizadores a ouvir ou a procurar por entre enormes quantidades
de texto que so, por vezes, inteis. Por exemplo, em vez de compor um link com o texto
mais informao deveramos ter algo mais como mais informao sobre licenciaturas.
2.5.4.
No caso de imagens utilizadas como hiperligaes, dever fazer-se recurso do atributo alt
para melhor definir o seu destino.
2.5.5.
Deixar espao entre hiperligaes de modo a facilitar a seleco. Isto torna-se especialmente importante em casos de mobilidade reduzida ou comprometida em que poder ser
difcil acertar no link desejado se este estiver muito prximo de outros links.
2.5.6.
Nunca recorrer a links textuais ou botes demasiado reduzidos. Devem sempre assumir
uma proporo confortvel, tanto para utilizadores com acuidade visual reduzida ou mobilidade/destreza comprometidas.
2.6.
Formulrios
2.6.1.
Limitar sempre a quantidade de informao pedida ao necessrio. Formulrios demasiado extensos mostram-se frustrantes do ponto de vista do utilizador. No caso de se pedir
informao adicional, colocar em primeiro lugar os campos de preenchimento obrigatrio
e depois os campos facultativos.
2.6.2.
Agrupar campos relacionados do formulrios em elementos <fieldset> com ttulos informativos <legend>.
2.6.3.
Fazer corresponder os elementos <label> aos seus respectivos campos de edio. Existem
duas formas de o fazer sendo que a seguinte a mais correcta:

<label for=nome>Nome: </label>
<input type=text name=nome id=nome />
2.6.4.
Em situaes em que no possvel recorrer ao elemento <LABEL> deve acrescentar-se

o atributo title aos campos de input. Por exemplo, caixas de pesquisa normalmente no
so acompanhadas de um rtulo, por isso, nestes casos importante incluir o atributo
title=search.
2.6.5.
Colocar os rtulos bem prximos dos campos de formulrio correspondentes. O rtulo

deve encontrar-se sempre esquerda, com excepo dos botes rdio e checkboxes onde
dever situar-se direita.
2.6.6.
Instrues de preenchimento devem estar sempre antes do campo de edio na estrutura

do DOM. S deste modo que os leitores de ecr lem as instrues antes do campo de
edio, o que faz mais sentido do que se fosse ao contrrio.
2.6.7.
No caso de ocorrerem erros de preenchimento, a pgina retornada deve incluir, no topo,

uma lista de todos os erros assim como hiperligaes para o campo correspondente.
2.6.8.
Ao retornar erros ao utilizador, no recorrer apenas ao asterisco para assinalar campos

que precisam da sua ateno. Nem todas as tecnologias assistivas sabem interpretar esta
conveno, pelo que apenas lem estrela seguido do rtulo do campo de input.
2.6.9.
No assinalar os campos com erro apenas cromaticamente.
2.6.10. Aos campos de preenchimento obrigatrio deve estar associado um rtulo que os identifica como tal

<label for=nome>Nome Completo: (Preenchimento obrigatrio)</label>
<input type=text id=nome name=nome />
2.6.11. Verificar se a ordem dos campos e do tabindex mantm a ordem lgica apresentada visualmente.
2.6.12. No caso de utilizar imagens como botes garantir a existncia do texto alt, que deve ser
preenchido com o mesmo texto presente na imagem.
2.6.13. Garantir que o boto para submeter o formulrio encontra-se sempre prximo do ltimo
campo do formulrio.
2.6.14. Garantir que ao carregar na tecla Enter o formulrio realmente submetido
2.7.
Tabindex
2.7.1.
Garantir que a ordem dos elementos navegveis por teclado (tabindex) corresponde
ordem hierrquica representada visualmente na pgina.
2.7.2.
O breadcrumb dever ser o primeiro elemento no tabindex, uma vez que contem logo
partida a identificao da instituio, e os diversos passos seguidos at pgina onde o
utilizador se encontra actualmente (ex: U.Porto > Estudar > Licenciaturas). Desta forma
utilizadores de leitores de ecr so imediatamente informados da sua posio no interior
do site. Recomenda-se a seguinte ordem:
Breadcrumb;
2.7.3.
Link para a homepage;
Caixa de pesquisa;
Menu principal;
Menu secundrio (se disponvel);
Menu complementar (se disponvel);
O ttulo da pgina;
Contedos do sidebar.
Colocar hiperligaes cuja funo ser permitir aos utilizadores contornar certos tipos
de contedo. Por exemplo, colocar uma hiperligao ignorar menu antes do menu de
navegao que permite aos utilizadores de tecnologias assistivas avanar directamente
para o contedo principal da pgina. O mesmo dever ser considerado no que diz respeito
s colunas laterais de informao complementar e ao rodap.
2.8.
<TITLE>
2.8.1.
O elemento <TITLE> dever ser correctamente preenchido e utilizado em todas as pginas, fornecendo aos utilizadores informao objectiva acerca do ttulo e dos possveis
contedos daquela pgina.
2.9.
Cabealhos
2.9.1.
Devem sempre ser utilizados os elementos <H1, H2 ,... > de forma a respeitar a ordem
hierrquica do contedo.
2.9.1.1. Estudos recentes demonstram que os utilizadores de leitores de ecr preferem a utilizao de dois <H1> em cada pgina: sendo que o primeiro a identificao da instituio
e o segundo o ttulo do contedo principal da pgina. Todos os outros ttulos devem ser
correctamente assinalados consoante a sua ordem na hierarquia do documento e no
apenas os <H1>.
2.9.1.2. Estatsticas de 2010 referem ainda que o principal mecanismo de navegao, por parte
dos utilizadores de leitores de ecr, consiste em percorrer todos os cabealhos da pgina,
de modo a extrair uma ideia do contedo e da estrutura da pgina.
2.9.2.
Garantir que os cabealhos so sempre graficamente destacados do restante contedo.

Sobretudo atravs de um tamanho de fonte substancialmente maior.
2.9.3.
Evitar sublinhar cabealhos uma vez que podem ser confundidos com hiperligaes.
2.10.
Abreviaturas e acrnimos
2.10.1. Vozes sintetizadas por vezes tm dificuldade em pronunciar algumas abreviaturas ou

acrnimos de forma correcta, o que resulta na maioria dos casos em palavras/sons
incompreensveis para o utilizador. Assim, todos os acrnimos e abreviaturas ao longo da
pgina devem ser adequadamente assinalados fazendo recurso ao elemento <ABBR>.
2.11.
<LANG>
2.11.1. Tal como no caso anterior, uma voz sintetizada a ler em portugus, por exemplo, vai tentar
pronunciar todas a palavras de acordo com essa lngua, o que pode resultar em sons mais
ou menos compreensveis. De forma a evitar que isto acontea, todas as alteraes lngua natural do documento devem ser assinaladas atravs do elemento <LANG>.
2.11.2. Garantir que a lngua natural do documento correctamente definida no elemento <html>.
2.12.
<EM> e <B>
2.12.1. Dependendo do software, alguns leitores de ecr alteram o tom da voz de acordo com
estes elementos. Colocar apenas um itlico ou um negrito, atravs do CSS, numa frase ou
palavra que de alguma forma deve estar enfatizada no o suficiente para que a mensagem seja correctamente comunicada a alguns grupos de utilizadores. ento necessrio
utilizar o correcto markup HTML para assinalar este gnero de enfatizaes.
3.
Mecanismos de navegao
3.1.
Colocar hiperligaes cuja funo ser permitir aos utilizadores contornar certos tipos
de contedo. Por exemplo, colocar um link ignorar menu antes do menu de navegao que permite aos utilizadores de tecnologias assistivas avanar directamente para
o contedo principal da pgina. O mesmo dever ser considerado no que diz respeito s
colunas laterais de informao complementar.
3.2.
Garantir que o breadcrumb o primeiro item no tabindex de uma pgina.
3.3.
Fazer recurso tecnologia WAI-ARIA na implementao dos menus de navegao (ver

seco 11).
3.4.
Evitar a utilizao de imagens como botes nos menus de navegao.
3.5.
Garantir um adequado destaque visual dos menus de navegao.
3.6.
Fazer uso das convenes relativas ao posicionamento dos menus.
3.7.
Garantir a consistncia de mecanismos de navegao ao longo de todas as pginas (posicionamento, formatao grfica, comportamento).
3.8.
Evitar contedos redundantes ao longo das opes dos menus.
3.9.
Access Keys
3.9.1.
O atributo accesskey til para atribuir atalhos de teclado a algumas aces frequentes
ou importantes na interaco do utilizador com o site. No entanto, no existe nenhuma uniformizao oficial desses atalhos, pelo que variam imensamente de um site para
o outro. Tambm como consequncia dessa heterogeneidade, na maioria das vezes os
utilizadores chegam a determinado site e no sabem que teclas de atalho utilizar ou se
de facto elas realmente existem. Para alm destes ltimos dois problemas, igualmente
importante referir que as combinaes de teclas que accionam os atalhos de teclado variam de browser para browser e entre sistemas operativos. Como forma de contornar esse
problema existem algumas sugestes que passamos a mencionar:
3.9.2.
Incluir um descrio das teclas de atalho na seco de ajuda do site. Isto obriga criao
de mais um link em todas as pginas. Para alm de ser um pgina complexa por ter de
incluir todos os atalhos em diferentes browsers e sistemas operativos.
3.9.3.
Como forma alternativa primeira soluo pode realizar-se um deteco do browser atravs de script e adicionar dinamicamente a combinao correcta de teclas ao atributo title
de cada elemento.
3.9.4.
10
Adoptar o modelo sugerido pelo Governo do Reino Unido para uniformizar a implementao desses atalhos. Este modelo o mais largamente adoptado:

S contornar menus de navegao
1 homepage
2 notcias/novidades
3 mapa do site
4 pesquisa
5 FAQ/perguntas frequentes
6 ajuda
7 reclamaes
8 termos e condies
9 formulrio para sugestes/feedback
0 informao sobre atalhos de teclado
Os elementos passveis de incluir o atributo accesskey so os seguintes (todos suportam

o atributo title anteriormente referido):
<a>

<area>
<button>
<input>
<object>
<select>
<textarea>
4.
CSS
4.1.
No devem ser conduzidas alteraes ao layout de forma inline no documento HTML.

Devem ser utilizadas folhas de estilo parte para toda e qualquer formatao visual.
4.2.
Utilizar sempre medidas relativas (%) na construo dos layouts. Isto beneficiar no
apenas o utilizadores com reduzida acuidade visual mas tambm os utilizadores de dipositivos mveis e ecrs de dimenses reduzidas.
4.3.
Garantir que determinado elemento quando focado, atravs do teclado, recebe o apropriado destaque grfico.
11
4.4.
Estabelecer um adequado contraste cromtico entre elementos textuais e o fundo.
4.5.
Utilizar tamanhos de fonte entre os 12pt e 14pt no mnimo para texto corrido.
5.
Novas janelas e pop-ups
5.1.
Evitar a ocorrncia de novas janelas e/ou pop-ups. Se necessrio, ento evitar a abertura
de novas janelas e/ou pop-ups sem avisar o utilizador previamente. Este gnero de alteraes abruptas tornam-se especialmente difceis em ambientes no grficos em que a
alterao de contexto no imediatamente perceptvel.
5.2.
Se determinado link abrir uma nova janela isto poder ser referenciado no atributo title.

ex: <a href=... title=abre numa nova janela />
6.
Pesquisa
6.1.
Oferecer sempre a opo de pesquisa em todas as pginas.
6.2.
Dever ser sempre um dos primeiros elementos no tabindex.
6.3.
Colocar a caixa de pesquisa num local convencional, assim por exemplo, um utilizador
de um magnificador de ecr no precisar de procurar a pgina toda aqueles locais onde
mais frequentemente se encontram estes mecanismos.
6.4.
No caso do campo de uma pesquisa ser submetida sem a introduo de dados para
pesquisar, a pgina de retorno dever notificar o utilizador de que deixou o campo em
branco. Por vezes utilizadores com acuidades visual reduzida ou ento sem viso nenhuma podero no se aperceber de que no preencheram o campo.
6.5.
O motor de pesquisa dever ser tolerante quanto a possveis erros ortogrficos. Isto
torna-se especialmente importante quando consideramos utilizadores com deficincias
cognitivas ou utilizadores cegos que no tm contacto visual com a lngua escrita e por
isso esto mais sujeitos a erros ortogrficos relacionados com a sonoridade das palavras.
6.6.
Os resultados no devem ser apresentados com recurso a tabelas HTML. Devero antes
ser uma listagem. Este tipo de estrutura muito mais fcil de navegar atravs do uso de
tecnologias assistivas do que as tabelas.
7.
Multimdia
7.1.
Assegurar formas alternativas de aceder a contedos vdeo ou udio
7.1.1.
Fornecer sempre legendas no caso de vdeo com udio.
7.1.2.
S vdeo: Assegurar uma transcrio textual ou uma descrio auditiva daquilo que no
12
vdeo.
7.1.3.
S udio: Assegurar uma transcrio textual do udio.
8.
URL
8.1.
Uma das primeiras coisas que um utilizador de um leitor de ecr ouve a URL da pgina,
assim estas deveriam ser o mais simples e directas possvel, de forma fornecer ao utilizador de modo imediato alguma informao sobre a sua localizao.
9.
Scripts
9.1.
Assegurar que os atalhos de teclado default continuam a funcionar.
9.2.
Evitar alteraes dinmicas na pgina sem que o utilizador seja previamente notificado.
9.3.
Verificar a estrutura da pgina com os scripts desligados.
9.4.
Assegurar que todas as aces programadas com recurso a scripts so acessveis tanto
atravs do rato como atravs do teclado.
10.
Erros
10.1.
No caso de um erro de input ser detectado este deve ser comunicado ao utilizador de
forma textual e no apenas atravs de um destaque grfico.
10.2.
Devem ser providenciados rtulos e instrues quando input por parte do utilizador
necessrio.
10.3.
No caso de acontecer um erro e sugestes para o corrigir serem conhecidas ento devem ser sugeridas ao utilizador.
13
11.
WAI-ARIA
11.1.
Landmark Roles utilizados para definir as grandes seces estruturantes da pgina (navigation, main, banner, complementary, search, form)
11.2.
Propriedades
11.2.1. aria-owns: utilizado para comunicar s tecnologias assistivas a relao entre os vrios
itens do menu.

ex: Quando um item do menu principal selecionado aparece ento o menu secundrio, o item de primeiro nvel selecionado dever ser dinamicamente alterado
de forma a incluir a propriedade aria-owns, cujo valor dever ser o ID do menu
secundrio. Desta forma o utilizador de tecnologia assistiva informado acerca da relao entre o item selecionado do primeiro menu e o segundo menu de
navegao. O mesmo aplica-se para o segundo e terceiro menus.
11.2.2. Widget Roles utilizados para identificar alguns elementos de utilizao mais complexa. No
caso especfico do site up.pt so utilizados poucos sistemas complexos sendo que o nico
identificado at agora a estrutura de navegao em rvore e o menu j anteriormente
referido:

Menu
Menuitem
Tree
Treeitem
14
Directivas de Usabilidade
1.
Consideraes Gerais
1.1.
O ttulo do site (texto e logotipo), menu de navegao principal (1 e 2 nveis) e a caixa

de pesquisa (search box) devem ser reconhecidos visualmente de forma rpida, segundo
padres estabelecidos para web:
1.1.1.
O logotipo deve localizar-se no canto superior esquerdo.
1.1.2.
O menu de navegao deve situar-se imediatamente abaixo do cabealho.
1.1.3.
O formulrio de pesquisa deve situar-se direita , numa posio superior.
1.1.4.
Na homepage, deve ser clara a funo do site, e que tipo de recursos podero ser encontrados.
1.2.
As diferentes seces do site (cabealho, navegao, contedo central, sidebar, rodap)

devem ser claras e distintas, e a sua relao deve ser consistente.
1.2.1.
O menu principal (1 e 2 nveis) deve estabelecer uma relao visual forte com a rea de
contedo.
1.2.2.
O contedo central e a navegao contextual devem estabelecer uma relao de proximidade visual.
1.2.3.
Os destaques (sidebar) devem ser visualmente diferenciados do contedo central.
2.
Mecanismos de Navegao
2.1.
A estrutura de navegao principal, secundria e breadcrumbs devem ser persistentes e

consistentes visualmente em todas as pginas, excepto:
2.1.1.
O 2 e 3 nveis da navegao principal deve ser visveis apenas quando solicitado ou necessrio.
2.1.2.
O breadcrumb no deve ser visvel na homepage.
2.2.
A hierarquia dos diferentes nveis da navegao principal deve ser clara visualmente.
2.2.1.
Uma vez seleccionado, deve ser claro qual o item de 1 nvel seleccionado.
2.2.2.
Uma vez seleccionado, deve ser claro qual o item de 2 nvel seleccionado e qual o de 1
nvel correspondente.
2.2.3.
Uma vez seleccionado, deve ser claro qual o item de 3 nvel seleccionado e qual os de 2
e 3 nveis correspondentes.
2.2.4.
Fornecer uma referencia visual sempre que o cursor estiver sobre um item de menu
(pseudo classe :hover).
2.3.
15
As designaes dos itens da navegao principal devem ser claras recorrendo a expresses facilmente reconhecidas e/ou padronizadas.

2.4.
ex.: Sobre em vez de Quem Somos

Deve ser fornecida a localizao da pagina da estrutura ao site com recurso ao bredacrumb.
2.5.
Todos os itens da navegao principal, navegao contextual e hiperligaes devem ter

caractersticas nicas que os destingam entre si.
2.5.1.
A distino pode ser cromtica, tipogrfica, grfica ou ambos.
2.6.
Deve existir um mapa do site com o resumo de toda a estrutura do site acessvel em
todas as pginas.
3.
Contedo
3.1.
Ttulos
3.1.1.
Todos os ttulos devem ser o mais curtos possveis e objectivos, reflectindo o contedo da
pgina ou da seco.
3.1.2.
Os ttulos devem ser nicos. Deve-se evitar a existncia de pginas com ttulos idnticos
ou semelhantes.
3.1.2.1. Quando necessrio a utilizao da mesma designao, esta deve reflectir o seu contexto
3.1.3.
Deve-se recorrer a uma estrutura hierrquica de ttulos visualmente distinta (<h1>, <h2>,
<h3>,) (ver ponto 2.9 em Directivas de Acessibilidade)
3.1.3.2. O atributo title deve descrever o contedo da pgina

3.2.
Textos
3.2.1.
Todos os textos devem ser escritos propositadamente para uma lgica de leitura em web.
(ver NIELSEN, Jakob: Designing Web Usability, New Riders, 2000. pp.100-115)
3.2.2.
O texto deve ser composto num tamanho mnimo para leitura em monitores (12px), considerando diferentes resolues, e ter um bom contraste com o fundo.
3.2.3.
O texto devem ser o mais sucinto e objectivo possvel, composto em curtos pargrafos
que permitam uma leitura rpida e transversal.
3.2.4.
O texto deve ser nica e exclusivamente referente seco indicada. Se necessrio incluir
textos de outra seces prefervel criar uma hiperligao contextual para a pgina correspondente.
3.2.5.
16
O primeiro pargrafo deve providenciar uma rpida contextualizao de todo o contedo

da pgina.
3.2.6.
Em situaes em que sejam necessrios textos extensos, o ritmo de leitura deve ser
quebrado por diferentes nveis de ttulos, listas, etc. (ver NIELSEN, Jakob: Designing Web
Usability, New Riders, 2000. pp.100-115).
3.2.7.
Blocos muito extensos de texto devem ainda ser divididos por pginas, com hiperligaes
compostas numa tabela de contedos.
3.2.8.
Em textos paginados, deve ser indicado o n de pginas totais e qual o n da actual pgina.
3.2.9.
Deve-se evitar texto composto em caixa alta. Se for necessrio destacar uma palavra,
frase ou pargrafo, deve-se compor o destaque com recurso a negrito ou outro contraste
visual.
3.2.10. Deve-se evitar a existncia de textos idnticos ou semelhantes em diferentes seces do

site.
3.2.11. Pginas que no tenham qualquer contedo devem ser omitidas.
3.2.12. Deve-se evitar a existncia de contedo desactualizado. Em alternativa, deve-se indicar a
ltima actualizao.
3.2.13. Acrnimos e abreviaturas, quando usados, devem ser definidos inicialmente no texto, ou
com recurso ao atributo title.
3.2.14. A linguagem deve ser clara e normalizada ao longo do site, e facilmente interpretada sem
conhecimento prvio do assunto da pgina.
3.3.
Links
3.3.1.
As hiperligaes devem ser claras e distintas quando compostas no texto, providenciar
feedback visual (pseudo classe :hover) e indicar qual a aco a seguir (atributo rel).
3.3.2.
As hiperligaes para pginas j visitadas devem diferenciar-se visualmente dos links para
pginas ainda no visitadas (pseudo classe :visited).
3.3.3.
Os links para o download de ficheiros devem ser claros e distintos dos restantes, assim
como indicar o tipo de ficheiro e o seu tamanho.
4.
Pesquisa
4.1.
A caixa de pesquisa deve estar claramente identificada, situada numa posio padronizada e persistente ao longo do site.
4.2.
A pgina dos resultados de pesquisa deve:
Indicar o nmero total de resultados.
Listar estes por ordem de relevncia.
Apresentar o ttulo e resumo da pgina.
A
presentar a sua posio na estrutura de navegao (breadcrumb)
4.3.
17
Quando necessria a utilizao de pesquisas especificas, deve ser indicado claramente

em que seco ir ser efectuada a pesquisa

4.4.
ex: Pesquisar Cursos, Pesquisar Professores, etc.
Os botes de aco dos formulrios de pesquisa devem ter designaes comuns e facilmente identificveis

ex: Submeter, Cancelar, Pesquisar,...
5.
Multimedia
5.1.
Recorrer a contedos video e audio apenas em situaes em que estes criem mais valia
para a compreenso do contedo.
5.2.
Assegurar formas alternativas de aceder a este contedos (ver ponto 7 em Directivas de

Acessibilidade).
5.3.
As imagens devem ter um texto descritivo da prpria imagem (atributo alt) (ver ponto 7
em Directivas de Acessibilidade).
5.4.
As imagens devem ser formatada exclusivamente para web, obedecendo aos tamanhos
mximo e mnimo assim como aos formatos indicados.
6.
Erros
6.1.
Devem ser compostas pginas de erro, especifica para os mais comuns (404,500) e uma
genrica para os restantes.
6.2.
A pgina de erro deve apresentar possveis solues para a situao e/ou links para voltar atrs ou ao incio da pgina.
7.
Impresso
7.1.
O site deve ter uma folha de estilos CSS que permita uma correcta impresso das pginas.
8.
URLs
8.1.
O site deve ser acessvel com ou sem a utilizao de www. no endereo
8.2.
A URL de cada pgina deve ser nica e descritiva, e compreensiva para humanos.
18
19
Directivas Mobile
1.
Preparar o contedo tendo em conta as caractersticas destes dispositivos
1.1.
Evitar pginas com textos demasiado longos.
1.2.
Optimizar as imagens para dimenses mais reduzidas, ou em alternativa, servir imagens

diferentes dependendo da resoluo do dispositivo; parte dos acessos mobile so feitos
a partir de ligaes 3G com largura de banda limitada.
1.3.
Minimizar o uso de tabelas, caso seja possvel, optar pelo uso de listas; tabelas, sobretudo se tiveram vrias colunas, obrigam o utilizador a fazer scroll horizontal.
1.4.
Minimizar o uso de dropdowns, caso sejam indispensveis, disponibilizar formas de

acesso ao contedo alternativas.
1.5.
Procurar que o texto dos links seja o mais descritivo possvel (por regra geral mas em
especial neste tipo de dispositivos pois no possvel usar tooltips).
1.6.
Prestar ateno ao uso de scipt para apresentar contedo principal (ex: navegao) e
verificar em particular o seu funcionamento em dispositivos com suporte limitado de
script, (ex: Opera Mini).
1.7.
Procurar no usar tecnologias no suportadas, ou suportadas de forma limitada, por todos os browsers (ex: Flash); caso seja realmente indispensveis o seu uso, disponibilizar
paralelamente alternativas mais acessveis.
2.
Adaptar a navegao
2.1.
De forma a o utilizador no ter que fazer constantemente scroll para aceder ao contedo,
disponibilizar apenas uma navegao bsica no topo da pgina, caso necessrio, apresentar a navegao completa no final do contedo.
2.2.
Disponibilizar a navegao completa apenas na homepage.
2.3.
Caso o espao no seja um problema, fornecer a possibilidade de voltar pgina imediatamente anterior, assim como pgina principal; apesar de algumas plataformas fornecerem algum tipo de mecanismo de voltar atrs, a sua apresentao no consistente.
3.
Minimizar e facilitar a entrada de texto em formulrios.
3.1.
Fornecer forma de completar automaticamente o texto digitado pelo utilizador (auto-
20
complete), p.ex: na pesquisa de um curso, preencher automaticamente (restringindo

s opes possveis) o nome do curso; ou o completar automaticamente um campo de
pesquisa com as palavras mais pesquisadas.
3.2.
Sempre que possvel, fornecer valores predefinidos que faam sentido ao utilizador;
procurar valores que sirvam o maior nmero de utilizadores, p.ex: se num campo de pesquisa possvel pesquisar por professores ou por cursos mas a maioria dos utilizadores
pesquisa por cursos, prefervel preencher seleccionar por defeito a pesquisa por curso.
3.3.
Caso se justifique, oferecer opes de escolha mltipla em vez de obrigar entrada manual de texto.
3.4.
No caso da funcionalidade esteja disponvel e o seu uso seja pertinente, aproveitar a

informao disponibilizada pelo dispositivo quanto localizao actual do utilizador
(geolocation), p.ex: para completar formulrios relativos morada.
3.5.
Aproveitar, quando aplicvel, o histrico de utilizao para preencher automaticamente

(ou apresentar como opo de escolha) formulrios com informao fornecida anteriormente (excepto para informao sensvel, p.ex: passwords).
3.6.
Disponibilizar um boto, nos campos de entrada de texto livre, para facilitar a remoo
completa do texto fornecido.
Adaptar os campos de entrada de texto para o tipo contedo; definir atravs do HMTL o
tipo de input do formulrio, sejam eles:

Alfanumrico
Numrico
Telefone
Email
Data
Etc.
4.
Aproveitar funcionalidades especficas deste tipo de dispositivos
4.1.
Possibilidade de fazer directamente uma chamada clicando num nmero de telefone

click-to-call. p.ex: pgina de contactos.
4.2.
Ligar moradas directamente ao mapa nativo.
4.3.
Ligar endereos de email directamente aplicao nativa de email.
5.
Layout
5.1.
Possibilitar alternar entre as diferentes verses do site, p.ex. utilizar o layout normal na
21
verso mobile.
5.2.
Procurar que o layout das vrias verses seja o mais consistente possvel; o aspecto grfico e contedo no devem variar consideravelmente entre verses mobile e desktop.
5.3.
Formatar todos os elementos clicveis com dimenses mnimas necessrias a poderem

ser usados pela ponta dos dedos (aproximadamente: 1cm x 1cm [Saffer]; 44px/pt [iPhone Human Interface Guidelines]).
5.4.
Espaar razoavelmente listas de elementos clicveis de forma a minimizar possveis

erros do utilizador ao clicar.
5.5.
Optar por usar um layout de uma coluna devido ao tamanho reduzido.
5.6.
Optar preferencialmente por organizar o contedo verticalmente e assim aproveitar a

facilidade em fazer scroll.
5.7.
Formatar todos os elementos, sejam eles texto ou imagem de forma que o utilizador no
tenha que fazer scroll horizontal.
5.8.
Optar preferencialmente por navegao vertical, devido ao espao limitado.
5.9.
Preparar o layout de forma que seja igualmente acessvel e usvel nas duas orientaes
possveis.

Usabilidade Acessível

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Usabilidade Acessível

Caricato da

Copyright:

Formati disponibili

USABILIDADE ACESSVEL:

Metodologias para a Avaliao

Mestrado em Design da Imagem

Faculdade de Belas Artes da Universidade do Porto, 2012

Hugo Norberto Flix Ribeiro

Dissertao para a obteno do Grau de Mestre

Faculdade de Belas Artes da Universidade do Porto, 2012

A realizao desta Dissertao de Mestrado s foi possvel graas colaborao e ao contributo, de

2.2.3. Nmero de Testes Recomendado 

3.1.5. Ponto de Situao 

Anexo A: Avaliao Heurstica ao actual stio da UP 

Figura 1. Exemplo de um barra de progresso de descarregamento de um ficheiro 

1.1. O que a Usabilidade?

Por usabilidade entende-se a capacidade de um dado objecto se adaptar convenientemente ao objectivo

1.1.1. A Usabilidade segundo Nielsen

1.1.2. Outros Autores

A International Organization for Standardization (ISO)11 uma entidade internacional reconhecida

11. Organizao Internacional de Normalizao, na sua designao portuguesa,

Capacidade de Aprendizagem Tempo de Aprendizagem

Dix, et al. (1998)

Capacidade de Memorizao Reteno ao longo do tempo

Rcio de erros pelos utilizadores Robustez

1.2.1. As Dez Heursticas de Nielsen

1. Visibilidade do estado do sistema

Figura 1. Exemplo de um barra de progresso de descarregamento de um ficheiro

Figura 2. Exemplo de navegao por separadores

3. Controle e liberdade do utilizador

Figura 3. Exemplo de Breadcrumbs

Figura 4. Exemplos de caixas de pesquisa

Em formulrios de compras ou de email, a existncia de botes como cancelar, remover item, ou

6. Reconhecimento em vez de lembrana

Figura 6. Exemplo de um principio de reconhecimento em vez de lembrana

7. Flexibilidade e eficincia de utilizao

Figura 7. Exemplo de mensagem de erro 404

10. Ajuda e Documentao

Figura 8. Exemplo de ajuda e documentao durante o descarregamento de um programa de um stio

1.2.2. As oito Regras de Ouro do Design de Interfaces

Figura 9. Formulrio de concluso de compra de um stio de e-commerce

5. Preveno e tratamento de erros

1.2.3. Princpios do Design de Interaco

Autonomia e controlo so inseparveis, e este ltimo no pode ser exercido se o sistema no

Figura 12. Demonstrao da Lei de Fitts

18. browser-based products exist in a stateless environment

1.2.4. A viso do psiclogo sobre o design da experincia do utilizador

10. Sistema Visual

Controle e liberdade do Controlo;

Preveno e tratamento Antecipao

Reconhecimento em vez Reduo do recurso

Flexibilidade e eficincia Atalhos para

Nielsen, et al. (1990)

Ajuda e Documentao Aces reversveis

1.3. Usabilidade e Acessibilidade

Personas que no so nem primrias nem secundrias, so apelidadas de complementares. Os seus

As personas clientes so os prprios clientes do sistema, que em determinadas situaes (como a

2.1.1.5. Personas Indirectas

6. Habilidade na utilizao da Web e computadores;

2.1.4. Prs e Contras

Mas embora permitam conhecer o utilizador, as personas, no entanto, no cumprem na totalidade a

2.2. Card Sorting

Num card sorting aberto, providenciado ao utilizadores um conjunto de termos, inscritos em

2.2.3. Nmero de Testes Recomendado

2.2.5. Prs e Contras

Um prottipo horizontal representa a progresso ao longo de um sistema para completar determinada

2.2.3. Nmero de Testes Recomendado

3.1.5. Ponto de Situao

Anexo A: Avaliao Heurstica ao actual stio da UP

Figura 1. Exemplo de um barra de progresso de descarregamento de um ficheiro