Você está na página 1de 43

Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.

pt 113 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Mdu|o 0 S - ArqulLeLura de
lnformao

Cb[ecLlvos Lspeclflcos
! Conhecer as especlflcaes dos dlversos suporLes mulLlmedla.
! ulsLlngulr os dlferenLes Llpos de navegao.
! Conhecer as necessldades e comporLamenLos dos uLlllzadores.
! Compreender a lmporLncla de uma boa arqulLeLura de lnformao e o
lmpacLo que pode Ler numa apllcao mulLlmedla.
! Seleclonar, organlzar e dlsLrlbulr a lnformao a lnLegrar numa apllcao
mulLlmedla com o ob[ecLlvo de a Lornar o mals eflcaz e lnLulLlva posslvel.
! Conceber apllcaes mulLlmedla Lendo em conLa as prlnclpals normas de
usabllldade e acesslbllldade.

ConLeudo rogramLlco
! lnLroduo a ArqulLeLura de lnformao.
o ueflnlo de fluxos de navegao,
! uesenvolvlmenLo de um mapa de navegao
! Crlao de grelhas de composlo
o LsLruLurao da lnformao (hlerarqulas e seces),




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 114 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
o ueflnlo das Lecnologlas a lnLegrar (flash, hLml, dhLml, asp,
php.eLc,)
! Apllcao dos concelLos de usabllldade e acesslbllldade
! MeLodos de avallao
! Avallao PeurlsLlca
! 1esLes com uLlllzadores
! uesenvolvlmenLo de um proLLlpo.





Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 115 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
uesenvolvlmenLo
ArqulLeLura de lnformao

A ArqulLeLura de lnformao preocupa-se com o desenvolver de uma esLruLura
que a[ude os uLlllzadores a lldar e a enconLrar com facllldade a lnformao.
A forma como o lnLerface esL pensado, deflne de que forma e que os
uLlllzadores vo usar o slLe.
A ArqulLeLura de lnformao organlza os fluxos de lnformao, de forma a
Lornar o slLe uma ferramenLa verdadelramenLe usvel.
Se pensarmos que cada um de ns Lem esquemas menLals dlferenLes e que
dlferenLes pessoas usam dlferenLes camlnhos para chegar ao mesmo local, Lemos uma
ldela basLanLe aproxlmada de quo dlflcll e a Larefa do ArqulLeLo de lnformao.





Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 116 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
C ArqulLeLo de lnformao

C ArqulLeLo de lnformao e aquele que organlza e esLruLura, deflnlndo a
navegao no slLe, as funclonalldades e a lnLerao com
o uLlllzador.
Cabe ao ArqulLeLo de lnformao Lraduzlr os
ob[ecLlvos e requlslLos do negclo em esquemas
funclonals e vlsuals, desenvolver o mapa do slLe e
esLruLurar a forma como a navegao do slLe val ser felLa.

lluxos de navegao

C Lermo lluxograma deslgna uma represenLao grflca de um deLermlnado
processo ou fluxo de Lrabalho, efecLuado geralmenLe com recurso a flguras
geomeLrlcas normallzadas e as seLas unlndo essas flguras geomeLrlcas. ALraves desLa
represenLao grflca e posslvel compreender de forma rplda e fcll a Lranslo de
lnformaes ou documenLos enLre os elemenLos que parLlclpam no processo em
causa. C fluxograma pode ser deflnldo Lambem como o grflco em que se represenLa o
percurso ou camlnho percorrldo por cerLo elemenLo (por exemplo, um deLermlnado
documenLo), aLraves dos vrlos deparLamenLos da organlzao, bem como o
LraLamenLo que cada um val lhe dando. A exlsLncla de fluxogramas para cada um dos
processos e fundamenLal para a slmpllflcao e raclonallzao do Lrabalho, permlLlndo
a compreenso e posLerlor opLlmlzao dos processos desenvolvldos em cada
deparLamenLo ou rea da organlzao.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 117 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

Mapas de navegao




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 118 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
usabllldade e comunlcao

C que e usabllldade?

Slmpllflcar, renLablllzar, opLlmlzar, faclllLar, melhorar, acelerar so verbos que
gravlLam em Lorno do concelLo de usabllldade. Mals usabllldade e slnnlmo de malor
flexlbllldade e de malor lnLerao.
Mas aflnal o que e a usabllldade?

usabllldade e uma caracLerlsLlca daqullo que e uLlllzvel, funclonal. L Lornar
bvlo o bvlo, Lendo em conLa as necessldades do uLlllzador e o conLexLo em que esLe
esL lnserldo.
A usabllldade esL em Lodo lado e
exlsLe quase sempre um pormenor que pode
ser alLerado para melhor, no enLanLo ressalve-
se que mudar no e obrlgaLorlamenLe
slnnlmo de melhorar. Lm equlpa vencedora
no se mexe (ou no se deve mexer mulLo...).
8oLes e lnformaes nos devldos
locals com sua hlerarqula de lmporLncla,
cores e dlagramao lnLulLlvas e adequadas,
comporLamenLo adequado ao publlco. lsLo e usabllldade em ao. Cuando um




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 119 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
produLo e usvel, nem se pensa no concelLo de usabllldade. C problema esL quando o
produLo no se adequa ao uLlllzador (uma cadelra desconforLvel, uma [arra mal
desenhada, um pacoLe dlflcll de abrlr). A usabllldade e um camlnhar progresslvo em
dlreo ao uLlllzador e no o conLrrlo (user-cenLered deslgn- uCu)
na lnLerneL a usabllldade no basLa, mas corresponde a uma boa parLe do
camlnho. or exemplo esLe boLo e mulLo mals cllcvel do que esLe . egando no
exemplo de uma lo[a onllne e Lo slmples quanLo lsLo: se um lnLernauLa no enconLra
um produLo, no o compra. lazer com que o uLlllzador enconLre o que procura e
usabllldade em ao. um slLe Lem, numa perspecLlva opLlmlsLa, enLre 10 a 13
segundos para convencer, por lsso Lodos os elemenLos da pglna preclsam de ser
avallados, pesados, medldos em Lermos de lmpacLo. As pglnas preclsam de carregar
rapldamenLe (esLe facLor e um dos mals aponLados como fulcrals no sucesso ou
lnsucesso do slLe) e Lodos os elemenLos grflcos preclsam de ser opLlmlzados
(Lamanho, qualldade, lnLeresse). Ser que Lodas as lmagens so necessrlas? Ser que
as anlmaes em flash se [usLlflcam sempre? Casos a pensar e a pesar.
uma lmagem pode valer mll palavras, mas Lambem mll lnLerpreLaes
dlferenLes1 e uns LanLos cllcks de deslsLncla. C Lempo e um bem escasso e caro. Se a
demora for mulLa, o uLlllzador val procurar ouLro slLe, oferLa e o que no falLa na rede.
As preocupaes do uLlllzador comum prendem-se com dlnhelro e Lempo e esLar
onllne slgnlflca gasLar lmpulsos Lelefnlcos e Lempo. LsLe[a em busca de lnformao ou
de enLreLenlmenLo as preocupaes do uLlllzador so se o slLe val demorar a abrlr, se
val abrlr, se o browser val funclonar naquele slLe.
A par da lmporLncla da rapldez, Lemos o facLor prevlslbllldade. C prevlslvel e
reconforLanLe, e um reconhecer de camlnho. Se um LexLo subllnhado a azul represenLa
para Lodos um llnk e um LexLo a rosa um llnk vlslLado para qu mudar? no h razes




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 120 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
esLeLlcas que [usLlflquem por sl s a alLerao de esquemas menLals adqulrldos, de
prLlcas lnLerlorlzadas.
Cuer nos anos 80 e quer nos prlmrdlos lnLerneL, a aLeno esLava cenLrada no
uLlllzador especlallzado e na mqulna. Po[e em dla, em vlrLude da esLablllzao dos
preos e da qualldade das mqulnas, a aLeno esL cenLrada no uLlllzador mulLas
vezes pouco famlllarlzado com o unlverso lnformLlco.
Lm regra o uLlllzador comum no esL famlllarlzado com lnLerfaces
compuLaclonals, Lem pouqulsslmo Lempo para aprender como funclona cada slLe e
esL conecLado aLraves de um slsLema de balxlsslma velocldade. Se num uLlllzador
quase proflsslonal, pequenas alLeraes no fazem a dlferena, pols rapldamenLe se
adapLa, num lnLernauLa novaLo" e alnda lnseguro pequenas mudanas podem
provocar mulLas reslsLnclas e mulLas deslsLnclas. Conversar com um uLlllzador
"novaLo" faclllLa a percepo das dlflculdades de navegao. As melhorlas e os a[usLes
do esquema de navegao dependem (devem depender) do modo como o uLlllzador
comum usa o slLe. C conLacLo com uLlllzadores reals" aLraves de conversas,
quesLlonrlos, reglsLo de acessos e lmpresclndlvel. uesLa lnLerao, desLe feedback
nasce um slLe realmenLe amlgvel.
C uLlllzador Lem a posslbllldade de alLerar alguns parmeLros de vlslbllldade da
pglna no seu browser. As caracLerlsLlcas prprlas das dlferenLes plaLaformas podem
alLerar a exlblo de cor e a correo gama (brllho e conLrasLe).
ulferenLes browsers podem exlblr a mesma pglna de forma dlferenLe. 1odas
esLas varlanLes/condlclonanLes fazem com que uma mesma pglna possa mudar e
mulLo de uma plaLaforma para ouLra. C Lamanho e o Llpo de leLra podem ser
apresenLado dlferenLemenLe de um browser para o ouLro. C neLscape (no menu:




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 121 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
edlLar - prefernclas) e o lnLerneL Lxplorer (no menu: ver - opes) permlLem alLerar o
modo como a fonLe e exlblda. L bvlo que o aumenLo ou a dlmlnulo da fonLe
alLeram a dlsposlo dos menus. LsLes aspecLos no podem ser negllgenclados
aquando da felLura do slLe.

8egras bslcas de usabllldade

Clareza na arqulLeLura da lnformao
lacllldade de navegao
Slmpllcldade
A relevncla do conLeudo
Coerncla
8apldez
ALeno nos uLlllzadores

LnLraves a usabllldade

1. lrrelevncla
2. 8edundncla
3. ouca lnformao
4. lnadequao dlscurslva
3. lnconslsLncla




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 122 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
6. Mau poslclonamenLo e m organlzao
7. vlolao das convenes da rede

!acob nlelsen, o grande especlallsLa da usabllldade, aponLa seLe enLraves a
usabllldade na rede. C prlmelro enLrave aponLado e lrrelevncla. lrrelevncla no uso
de Lermos como 'webslLe', 'onllne' e 'homepage' no LlLulo da homepage quando o
uLlllzador obvlamenLe sabe que esL em Lodos esses conLexLos. C mesmo se passa com
LlLulos de pglna lnlclados por arLlgo (exemplo: os nossos produLos, o carrlnho de
compras, as suas duvldas em vez de produLos, carrlnho de compras, duvldas) o que
no permlLe crlar marcadores (bookmarks) na ordem alfabeLlca mals lglca para o
uLlllzador. lrrelevncla alnda em llnks lnlclados por Lermos repeLldos, em geral o nome
da prprla empresa em cu[o webslLe o lnLernauLa [ se enconLra.
www.empresa.com/moradas em vez de moradas. C segundo enLrave e a redundncla,
lsLo e vrlas ocorrnclas de um mesmo elemenLo em reas dlferenLes, prlnclpalmenLe
opes de navegao e aLe llnks caLlvos para a homepage na prprla homepage. A
lnformao sobre assunLos slmllares deve esLar Loda [unLa e os nomes nos menus no
devem levar a mal-enLendldos.
C Lercelro enLrave e a ausncla de conLeudos lnformaLlvos vlldos e realmenLe
lmporLanLes. A lnformao no se pode mlsLurar com o markeLlng de uma forma
pouco orLodoxa. 1lLulos e cabealhos demaslado vagos, pouco especlflcos devem ser
evlLados.
C quarLo enLrave e a lnadequao dlscurslva que se pode verlflcar em
cabealhos de noLlcla mulLo longos e dlflcels de ler onllne, opes de menu com
Lermos demaslado Lecnlcos para o grande publlco, nomes fanLasla que nada lnformam




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 123 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
usados como lLens de menu (exemplo grande casa" em vez de homepage"),
abrevlaLuras usadas sem prevla apresenLao do Lermo compleLo. C qulnLo enLrave e
a lnconslsLncla, a falLa de coeso como por exemplo o uso aleaLrlo de leLras
malusculas e mlnusculas enLre as opes de um mesmo menu de navegao ou uso
aleaLrlo de slnals de ponLuao. A poslo, a ordem, o espaamenLo deve ser
conslsLenLe na lnLerface de forma a a[udar o uLlllzador a domlnar o processo. C sexLo
enLrave prende-se com o mau poslclonamenLo e m organlzao de elemenLos-chave
e com a caLegorlzao e subcaLegorlzao de menus. L lmporLanLlsslmo enconLrar os
hlpernlmos e os hlpnlmos, de forma a sub caLegorlzar conslsLenLemenLe os
assunLos.
or flm, o seLlmo erro e a vlolao de convenes da web LaclLamenLe acelLes
por Lodos como a alLerao cor padro dos llnks ou a oculLao do boLo de
reLrocesso. LsLes enLraves fazem com que por vezes o uLlllzador se slnLa confuso com
uma mulLlpllcldade de opes de navegao.

Algumas quesLes prLlcas
!"#$%&'

C loyoot deve mosLrar a fllosofla, as mals vallas da empresa, valorlzando-a.
Cada empresa Lem uma llnguagem, uma lmagem que o loyoot do slte necesslLa de
subllnhar.
C loyoot dever ser concebldo a parLlr do lugar onde se preLende que o
uLlllzador lnlcle a movlmenLao do olhar.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 124 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
A dlsLrlbulo dos elemenLos e as cores escolhldas so lmporLanLlsslmas,
normalmenLe os olhos movlmenLam-se da esquerda para a dlrelLa, e de clma para
balxo (em z"), o que sugere que o loyoot ldeal e aquele que leva o uLlllzador a ver
prlmelro os elemenLos superlores esquerdos (normalmenLe o logLlpo), e a parLlr dal,
descer em forma dlagonal. Cs olhos procuram normalmenLe prlmelro os elemenLos
malores e s depols os mals pequenos e prlmelro olham para os elemenLos mals
escuros e d depols para os mals claros.
um ouLro bom exemplo e o do www.portugalfashion.com:
L aqul (www.mulLlopLlcas.com) um mau exemplo, pols o olhar da [ovem dlrlge-
nos para lugar nenhum. 8epare-se como o menu do lado esquerdo aumenLarla a
leglbllldade do slLe: C flm da pglna e normalmenLe pouco explorado pelos
uLlllzadores, [ que a sua experlncla de uso lhes dlz que a lnformao que l consLa
no e normalmenLe relevanLe. ual a m aposLa dos www.cLL.pL que guardaram o flm
da pglna para a pesqulsa".
Coerncla e equlllbrlo so palavras-chave quando se fala do loyoot. A Lela deve
Ler aproxlmadamenLe a mesma quanLldade de LexLo e caracLeres grflcas em cada
meLade da Lela. uma manelra de avallar o equlllbrlo da Lela pode ser felLo Lraando
uma llnha lmaglnrla verLlcal ou horlzonLalmenLe em meLade da Lela. As medldas
devem conLer aproxlmadamenLe a mesma quanLldade de LexLo.
Como comunlcar na lnLerneL
Asslm como num [ornal os LlLulos da 1 pglna desLacam as noLlclas mals
lmporLanLes, numa pglna web a hlerarqula vlsual deve ser preservada, segulndo o
esquema da plrmlde lnverLlda:




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 125 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

A lnformao mals lmporLanLe deve esLar logo no prlnclplo. na lnLerneL no se
l com o mesmo Llpo de aLeno que se l no papel, l-se na dlagonal procurando
lnformao relevanLe e buscando o prxlmo llok de lnLeresse. ara se Ler uma ldela,
noLe-se que no papel a rapldez medla de lelLura osclla enLre as 240-400 palavras por
mlnuLo, enquanLo que no monlLor a medla balxa para 100 a 200 palavras por mlnuLo.
S esLe dado e prova suflclenLe que a lnLerneL exlge uma forma de escrlLa dlferenLe.
A esLe propslLo, abrlmos um parnLesls para falar da lmporLncla das verses
de lmpresso. Apesar das prevlses o consumo de papel no dlmlnul com o advenLo
da lnLerneL. Cs compuLadores so bons para guardar lnformao, mas geralmenLe
maus para us-la pols mesmo quando um compuLador Lem uma resoluo alLa, a
dlflculdade de lelLura e grande e, alem dlsso, na web uma pglna compeLe com
mllhares de ouLras que esperam um cllck o que faz com que a aLeno do uLlllzador
dlmlnua.
L lmporLanLe Ler em aLeno !"#$%& mulLa genLe lmprlme lnformao a parLlr da web.
ara esLes uLlllzadores uma verso ptlot-ftleoJly" e o ldeal. uma verso amlgvel de
lmpresso faz com que, ao remover a barra de navegao, os banners, lmagens,
fundos, o numero de pglnas a lmprlmlr se[a menor e que Lambem exlsLa uma




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 126 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
poupana consldervel no LlnLelro. C copy" e pasLe" Lambem e mals slmples a parLlr
de uma verso ptlot-ftleoJly.

CuLro ponLo lmporLanLe e hlerarqula da
lnformao.

Cuando olhamos pela prlmelra vez para algo procuramos as semelhanas e as
dlferenas. LsLas assoclaes vlsuals permlLem-nos separar ob[eLos, esLa seleo e
felLa a parLlr das cores, LexLuras, Lamanho .
roxlmldade Slmllarldade ConLlnuldade


CuanLo mals conLrasLe vlsual exlsLlr enLre dols ob[eLos, mals facllmenLe eles
so percebldos como dlsLlnLos:




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 127 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

A hlerarqula conslsLe no uso das relaes vlsuals para conLar uma hlsLrla".
LlemenLos
que manLem enLre sl uma llgao devem ser coerenLemenLe agrupados.
Sem hlerarqula vlsual o uLlllzador flca perdldo, pols Lodos os elemenLos da
pglna clamam por aLeno

n|erarqu|a
v|sua|
Sem h|erarqu|a
v|sua|



nesLe senLldo e necessrlo subcaLegorlzar correLamenLe produLos ou aes,
no esquecendo de dar LraLamenLo grflco ldnLlco a lLens semelhanLes.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 128 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

um bom exemplo de hlerarqulzao de lnformao e o dado em
www.consumiveis.com no e preclso enLrar em nenhuma pglna para saber quanLos
Llpos de LlnLelros so dlsponlblllzados e para que marcas. num s olhar o uLlllzador
poder escolher a soluo que mals lhe convem, poupando Lempo e cllcks. As pglnas
devem esLar dlvldldas em rea bem deflnldas e os conLeudos nos locals onde o
uLlllzador espera que eles esLe[am.

no quadro abalxo, mosLramos o resulLado de um esLudo levado a cabo pelo
ueparLamenLo de slcologla da WlchlLa SLaLe unlverslLy3. nesLe esLudo procurou-se
saber quals as expecLaLlvas de locallzao de funclonalldades por parLe dos
uLlllzadores comuns, Lendo-se chegado a Labela aqul apresenLada.
C exemplo da www.landsend.com serve para llusLrar o poslclonamenLo pouco
bvlo do carrlnho de compras, que para alem do mals no esL ldenLlflcado nem com
um slmbolo lcnlco.
num ouLro esLudo desLa mesma unlversldade sobre as expecLaLlvas dos
uLlllzadores conclul-se o segulnLe:
Cs lloks lnLernos devem esLar no canLo esquerdo da [anela,
Cs lloks exLernos devem esLar do lado dlrelLo ou no canLo esquerdo lnferlor,
C boLo de reLrocesso deve esLar no Lopo esquerdo da [anela,
C logln e o reglsLo devem esLar do lado esquerdo da pglna,
C boLo de a[uda no lado dlrelLo,




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 129 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Cs lloks para produLos especlflcos no cenLro do lado esquerdo,
C boLo de adlclonar ao carrlnho do lado dlrelLo.
LsLes esquemas menLals dos uLlllzadores no devem ser conLrarlados, sob pena
de eles slmplesmenLe no perceberem o slte. Cs uLlllzadores perdem por vezes mulLa
lnformao s porque no a veem. A verdade e que lnovar mulLo no e soluo, a roda
s fol lnvenLada uma vez....

C uLlllzador esL acosLumada a uma deLermlnada lnLerface, por lsso no e
aconselhvel mudar o loyoot frequenLemenLe.
CuanLo as dlmenses da pglna, segulmos de perLo Mlguel SanLlnho que refere
que o loyoot poJe tet o lotqoto e o oltoto poe se polset. No eotooto exlstem
vootoqeos e Jesvootoqeos poe Jeveto set tomoJos em cooslJetoo. um loyoot com
75Jpt Je lotqoto oo 'cobe' em tesoloes com, pot exemplo, 640x480pt. "Ok!", Jlz-se,
"j oloqom oso mooltotes com essos tesoloes. O mlolmo os 800x600". loto poem
tem tooto cettezo ocooselbvel coosoltot os 'loqs' Je ocesso oo slte e vetlflcot os
Jlfeteotes tesoloes otlllzoJos. lot ootto loJo, como se lmptlme em A4 omo pqloo
cojo lotqoto est JeflolJo poto mols Je 595px (optox. 21cm - lotqoto Jo pqloo A4)?

Pome page

Apesar de ser um lugar comum dlzer que a bomepoqe e a cara do slte, no e
demals repeLl-lo. A pglna de aberLura espelha (ou melhor, deve espelhar) a fllosofla
sub[acenLe ao slte. 1raLa-se no s da pglna mals lmporLanLe como Lambem da
pglna mals vlsLa.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 130 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
A esLeLlca no pode ser descurada. Se o slte for mulLo funclonal, mulLo bem
esLruLurado, mas no for acolhedor, os uLlllzadores senLlr-se-o pouco LenLados a
vlslL-los. C que no pode aconLecer e que o processo de embelezamenLo dlflculLe o
acesso ao slte.
Mlguel SanLlnho, num esLudo sobre a lnuLllldade das pglnas lnlclals3, anallsou
33 pglnas de enLrada de slLes porLugueses conclulndo que:
As pglnas de enLrada consome, em medla, 14 segundos para compleLar uma
anlmao ou carregar as lmagens e redlreclonar para a pglna prlnclpal. C que
em mll uLlllzadores slgnlflca quase 4 horas de Lempo desperdlado!
46 uLlllzam llash e 64 apenas P1ML, 14 uLlllza as duas Lecnologlas.
17 dos slLes posslblllLam salLar a anlmao e enLrar lmedlaLamenLe no slLe.
uos 20 de slLes que uLlllzam som na pglna de enLrada nenhum posslblllLa
desllg-lo.
Conclul-se enLo que se as funclonalldades que as pglnas de enLrada oferecem
so lnuLels ou se podem ser oferecldas de um modo mals slmples e eflcaz, elas devem
ser ellmlnadas.
A relao enLre a apresenLao vlsual e a
funclonalldade e dlflcll mas no e lmposslvel.
C momenLo prlnclpal e o da planlflcao do
slLe. L preclso saber para que serve aquele slLe e qual o
seu publlco-alvo. uma boa planlflcao obrlga os
dlversos lnLervenlenLes a pensar, a enconLrar solues
e evlLa remendos e remodelaes a posLerlorl.






Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 131 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
AS LLlS uL nlLLSLn


1. lnclulr uma frase slnLese sobre o slLe (Lagllne)
2. Lscolher um LlLulo com boa vlslbllldade nos moLores de busca
3. uar lnformao sobre a empresa numa rea aparLe
4. LnfaLlzar os prlnclpals servlos do slLe
3. lnclulr um moLor de busca caso a dlmenso do slLe o [usLlflque
6. LvlLar descrever os conLeudos do slLe, e preferlvel mosLrar excerLos recenLes
7. Comear os llnks com palavras-chave
8. Crlar um llnk para os arqulvos do slLe
9. LvlLar ruldo vlsual (demaslados grflcos e lmagens desproposlLadas)
10. uLlllzar lmagens relevanLes.

Lsquema de navegao

no basLa desenvolver um slte com deslgn aLraenLe para aLralr e fldellzar os
uLlllzadores.
Cs recursos vlsuals aLe podem aLralr o uLlllzador num prlmelro momenLo, mas
no so razo basLanLe para manL-lo ou faz-lo reLornar ao slte. Cs argumenLos so
os conLeudos, mas para chegar aos conLeudos e necessrlo um esquema de navegao




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 132 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
funclonal, bvlo, slmples para que nenhum uLlllzador pense sequer que ouLro esquema
serla vlvel. A barra de navegao e o velculo que leva o uLlllzador a vla[ar pelo slte. Lm
balxo Lemos Lrs exemplos de barras de navegao. C prlmelro exemplo e o
www.exlL.pL e uma barra pouco convenclonal mas funclonal, [oga com slmbolos
lcnlcos e com LexLo.
Cs separadores so um slmbolo flslco que
resulLa mulLo bem na web. Cs separadores, como
noLa SLeve krug em no me faa pensar, so
evldenLes, dlflcels de lgnorar, agradvels e
sugerem um espao flslco. Cs melhores
separadores so aqueles que, como no
www.hoLmall.com, em www.chlp7.com e na
www.lo[a21.com, lndlcam onde esLamos, pols crlam a lluso que o separador aLlvo se
move para a frenLe do ecran.
Cs segulnLes exemplos (www.800.com e www.ouLposL.com ) so exemplos de
gulas menos bem conseguldas pols a lluso de que esLamos mesmo no separador aLlvo
no e LoLalmenLe consegulda. Cuando um arqulLeLo desenha um predlo de ralz, a
prlmelra colsa a fazer e esboar um plano onde se perceba a forma como as pessoas
lnLeragem com as reas funclonals.
num slLe dever-se-la fazer a mesma colsa. A componenLe pragmLlca e
fundamenLal, parafraseando WlLLgensLeln: no pergunLes como e o slLe, pergunLa para
que serve.
A Lnlca Lem de esLar no uso. L se mulLas pessoas enconLram dlflculdades em
orlenLar-se, se no enconLram o que preLendem, se deslsLem, a culpa no e,




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 133 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
seguramenLe, delas. um exemplo de mau uso da barra de navegao e o da flgura ao
lado. no h uma hlerarqula na lnformao.
A pesqulsa e o carrlnho de compras esLo escondldos no melo de ouLras
funclonalldades, sem qualquer desLaque nem sem nada que o [usLlflque.
C modo como a lnformao e esLruLurada e cruclal. A navegao e a forma
naLural de lncorporar conLeudos de modo coerenLe e conslsLenLe.
As opes dos menus devem ser apresenLadas por ordem de lmporLncla e por
ordem de frequncla de seleo. As funclonalldades oferecldas devem ser
dlsponlblllzadas hlerarqulcamenLe (lnformao por camadas) e o numero de opes
por nlvel e o numero de nlvels (profundldade) deve ser Lal que no oferea nem
opes em demasla, nem obrlgue os usurlos a cllcar um numero excesslvo de vezes
para chegar a lnformao dese[ada. Cs especlallsLas lndlcam que seLe e o numero mals
razovel de hlperllgaes na barra de navegao.
uma barra pouco hablLual, mas funclonal e www.arrowporLugal.com :
C percurso do uLlllzador deve ser o menor posslvel. Cs uLlllzadores que Llverem
que cllcar mals de 4 nlvels para enconLrar o que dese[am, podem slmplesmenLe
deslsLlr do slLe. A lnformao deve esLar no mxlmo a Lrs cllcks de dlsLncla. Mals do
que lsso e perca de Lempo e slnal de m esLruLurao do slLe.
ue evlLar barras de navegao malores do que a Lela para evlLar que o
uLlllzador Lenha que andar com o browser para clma e para balxo.
L lgualmenLe lmporLanLe conLexLuallzar o vlslLanLe, oferecendo-lhe sempre a
hlpLese de volLar para o ponLo de parLlda e oferecendo-lhe Lambem a posslbllldade




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 134 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
de aLalhar camlnho aLraves de llnks. 8oLes de navegao conslsLenLes que permlLam,
por exemplo avanar ou reLroceder, permlLem uma uLlllzao lglca e lnLulLlva.
CuanLo aos boLes, uma meno poslLlva para a www.cenoura.com. Cs boLes
do mesmo a lluso que foram carregados.
1er uma barra de navegao em
Lodo o slLe faz com que o uLlllzador
descubra para onde quer lr sem preclsar de
volLar sempre ao ponLo de parLlda. LsLa
barra (barra de navegao global ou de
navegao perslsLenLe) e alnda uma
lnLerface de aprendlzagem rplda para o
uLlllzador. A barra de navegao perslsLenLe
deve ser lgual em Lodo o slLe, excepLo na homepage e numa pglna de formulrlos. (na
homepage porque se LraLa de uma pglna especlal, e a cara do slLe que merece um
LraLamenLo dlsLlnLo, numa pglna de formulrlos uma barra de navegao pode ser
dlsLracLlva).
A barra de navegao perslsLenLe ganha alnda mals lmporLncla se pensarmos
que uma boa parLe do fluxo de um slLe advem de pesqulsa. Cra quando se faz uma
pesqulsa no somos redlreclonados obrlgaLorlamenLe para a uma home page mas para
uma pglna lnLerlor. um uLlllzador pouco famlllarlzado como a lnLerneL pode no
saber como lr para a pglna lnlclal caso no Lenha uma barra de navegao ou uma
lndlcao de que camlnho segulr.
ara aLravessar um campo relvado e provvel que 20 pessoas Lrllhem 20
camlnhos dlferenLes. Ao flm de uns Lempos verlflca-se que alguns camlnhos foram




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 135 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
repeLldos e ouLros no. A lglca lmpllclLa a consLruo dos camlnhos vlrLuals e
semelhanLe, ao consLrulr llnks, percursos e preclso anLeclpar os esquemas dos
uLlllzadores, prever camlnhos e acompanhar o uso que e felLo do slLe para asslm ser
posslvel opLlmlz-lo.
uma vez que o esquema de navegao esLe[a lnLerlorlzado e lmporLanLe
manL-lo.
Coerncla e conslsLncla: o mesmo LexLo, a mesma cor no mesmo slLlo.
num bom esquema de navegao e lndlspensvel um bom mapa do slLe, pols al
esLo dlsponlvels Lodas as pglnas do slLe e as relaes enLre elas. C mapa do slLe e
uma especle de lndlce que pode ser opLlmlzado com um slsLema de pesqulsa mas nem
Ludo so boas noLlclas...
Cs mapas do slLe so mulLas vezes confusos e dlflcels de enconLrar. C mapa do
slLe deve conLexLuallzar o uLlllzador, permlLlndo-lhe num slmples olhar saber onde
esL, de onde velo e para onde pode lr.

lonLes

As fonLes e cores apresenLadas dependem do compuLador e do browser que
esL a ser uLlllzado. no vale a pena escolher um Llpo de leLra aparenLemenLe
fanLsLlco se depols o uLlllzador no o consegue vlsuallzar correLamenLe. Se o
uLlllzador no Lem a fonLe que escolhemos dlsponlvel, auLomaLlcamenLe o
compuLador apresenLar-lhe- o LexLo na defaulL fonL.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 136 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
As fonLes abalxo lndlcadas so as mals uLlllzadas na rede:

CuanLo a opo por fonLes serlf ou sans serlf, e sabldo que as fonLs serlf so
mals leglvels no papel, enquanLo que em ecrs com pouca deflnlo as fonLes sans
serlf parecem preferlvels, [ que se evlLa o efelLo de esbaLlmenLo. As fonLes serlf no
ecran, devldo aos seus ornamenLos, quando em Lamanhos pequenos (10, por
exemplo) funclonam como ruldo vlsual.
num esLudo reallzado6 conclulu-se que no h dlferenas slgnlflcaLlvas na
eflclncla de lelLura das dlferenLes fonLes (apresenLadas no quadro aclma), a dlferena
esL na rapldez de lelLura.
C 1lmes New komoo e Atlol, ambas em Lamanho 12, uma setlf e ouLra soos
setlf, foram as fonLes que permlLlram uma lelLura mals rplda. no enLanLo, e a fonLe
vetJooo (que fol, a semelhana da Ceotqlo, desenvolvlda para compuLador) que se
apresenLa como a mals consensual, permlLlndo um desempenho basLanLe razovel ao
nlvel da lelLura e saLlsfazendo a nlvel esLeLlco. Cuando dlzemos consensual,
reporLamo-nos a relao enLre a rapldez de lelLura efeLlva e a percepo que os
uLlllzadores Lm dessa mesma rapldez. ue facLo, o vetJooo e uma boa alLernaLlva
porque e leglvel em Lamanhos pequenos e em ecrs de pouca resoluo.
num ouLro esLudo, levado a cabo pela mesma equlpa, no qual se preLendla
averlguar sobre a performance do 1lmes New komoo e do Atlol verlflcou-se que os
uLlllzadores Lm melhor desempenho de lelLura com LexLos em 1Nk (12) e Atlol (10).




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 137 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Mas avallando no o desempenho proprlamenLe dlLo, mas a percepo que os
uLlllzadores Llnham da compreenso dos conLeudos lldos, conclulu-se que a fonLe Atlol
10 e Llda como mals leglvel do que o 1lmes new 8oman (12).
Cs resulLados mosLram que h uma llgelra vanLagem do Atlol (10) face ao 1Nk
(12) a nlvel de prefernclas dos uLlllzadores, no enLanLo ressalve-se que a fonLe 1Nk
(12) fol a que nos LesLes permlLlu uma lelLura mals rplda.
Apesar do vetJooo e do Atlol serem mulLo populares na web, 1lmes New
komoo e uma boa soluo de compromlsso para documenLos que vo ser lmpressos e
lldos offlloe.
Lm ouLros publlcos, como as crlanas e os ldosos, as fonLes e Lamanhos
recomendados so dlferenLes. num esLudo com crlanas, verlflcou-se que a fonLe
comlc em Lamanho 14 e a mals consensual, enquanLo que com pessoas mals velhas
(medla de ldade - seLenLa anos) verlflcou-se que o Lamanho 14 numa fonLe soos setlf e
mals leglvel e promove uma lelLura mals rplda. noLe-se no enLanLo que o comlc no e
uma Jefoolt foot logo no e dlsponlblllzada por Lodos os compuLadores.

Cor, conforLo vlsual

A cor e mulLo lmporLanLe como elemenLo orlenLador do olhar do uLlllzador. Cs
olhos movem-se dos elemenLos malores para os menores, das cores escuras para as
mals claras, e da cor para a ausncla de cor. A escolha de cores na rede no e felLa
como se faz no papel. C papel recebe luz enquanLo que o ecran llumlna. LsLa e a
prlmelra de mulLas dlferenas. A cor deve gular, orlenLar a lelLura que na rede Lem




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 138 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
conLornos parLlculares, LraLa-se de uma lelLura no-llnear. L o uLlllzador que faz o seu
camlnho
As cores bslcas do slLe devem perLencer ao especLro das 236 cores. L claro que
em foLos e llusLraes no fundamenLals podemos alargar esLa paleLa mas Lemos que
assegurar que 100 de populao conslga aceder sem compllcaes ao slLe.
A malorla dos slLes usa LexLo negro sobre fundo branco, com os llnks a azul. no
enLanLo, Lendo em conLa que o branco" do monlLor e um branco brllhanLe, o
conLrasLe ldeal ser negro sobre um fundo pasLel. C conforLo vlsual no pode ser
descurado.
Cores complemenLares como amarelo/azul e vermelho/verde so
posslbllldades que oferecem um conLrasLe alLo. CuanLo mals prxlmas forem as cores,
menos leglvel e o LexLo e malor ser o Llpo de leLra necessrlo.
Cuando o fundo e mals escuro que o LexLo, as leLras devem ser malores de
forma a combaLer a lluso de que a Lamanho da leLra e menor do que aqullo que e de
facLo.
C esquema de cor da barra de navegao no preclsa de Ler um conLrasLe
grande, basLa um medlo-conLrasLe desde que o Lamanho da leLra no se[a demaslado
pequeno.
Cuando se escolhe a cor para um LexLo deve Ler-se em conLa a lumlnosldade.
Cores com uma lumlnosldade ldnLlca no so uma boa escolha para um LexLo. no
enLanLo essas cores prxlmas a nlvel de conLrasLe podem ser usadas numa barra de
navegao [ que al o Llpo de aLeno requerlda e dlferenLe do que a aLeno exlglda
na lelLura de um LexLo longo.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 139 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Lm mensagens de alerLa a melhor opo e o fundo vermelho com LexLo branco.
C amarelo e o negro so uma comblnao lgualmenLe chamaLlva mas mals esLLlca.
Alnda no que respelLa a cor, vale a pena volLar a falar das hlperllgaes. C azul
e unlversalmenLe reconhecldo como um llok no explorado e o vloleLa como um llok [
visto. Cualquer alLerao a esLe esquema pode levar a confuses. no vale a pena
mexer em convenes, pois se uma parte substancial dos utilizadores acha a Web
confusa, mudar uma das poucas certezas da rede pode ser comprometedor.
Cs espaos em branco melhoram a leglbllldade dos LexLos, evlLando um
aspecLo maudo e compacLo. LsLes espaos so no s uma mals-valla esLeLlca, como
uma mals-valla funclonal. nlnguem Lenha a veleldade de pensar que Loda a mancha
grflca da pglna val ser llda. LsLes espaos vazlos dlrlgem a aLeno do uLlllzador para
a lnformao realmenLe lmporLanLe, fazendo com que a composlo global da pglna
Lenha de facLo um senLldo.

LvlLar! erlgo de morLe!
lmporLncla dos llnks

LxlsLem dols erros crassos e desasLrosos no que dlz respelLo a usabllldade, um e
o alLerar da cor das hlperllgaes o ouLro e o esconder o boLo de reLrocesso.
no que concerne aos llnks, e especlalmenLe grave Lendo em conLa que as
hlperllgaes so um dos slmbolos da rede. Lsconder os llnks ou modlflcar as suas
cores convenclonals e lr conLra os prlnclplos fundamenLals da lnLerneL e condlclonar a
movlmenLao do uLlllzador.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 140 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
esqulsas mosLram que os uLlllzadores mulLas vez olham para a pglna a
procura de LlLulos ou hlperllgaes em vez de lerem efeLlvamenLe o LexLo. Se a cor for
dlferenLe do hablLual ou se a hlperllgao no esLlver subllnhada a compreenso/
apreenso global e serlamenLe pre[udlcada.
Lm relao as hlperllgaes, exlsLem erros de usabllldade relaLlvamenLe
comuns. C pr|me|ro e esLe:
ara saber mals sobre Alexandre Magno cllque aqul (cllck here") em vez de:
ara saber mals sobre Alexandre Magno
C segundo erro Lem a ver com llnks que quando cllcados redlreclonam-nos
para um conLacLo e no para uma pglna. Cuando esL a ler um LexLo e enconLra um
nome desLacado por uma hlperllgao, o uLlllzador quer saber mals lnformaes sobre
essa pessoa e no dese[a obrlgaLorlamenLe conLacL-la. or exemplo se esL a ver
quem e que consLrulu a pglna e enconLra o nome !ullo Sllva o esperado e que a
hlperllgao o leve para o currlculum do !ullo e no para o sua morada de e-mall.
no abandonando alnda quesLo dos
llnks, reflra-se que os llnks quebrados (llnkroL)
do uma pesslma lmagem do slLe,
demonsLrando uma enorme falLa de
proflsslonallsmo. ue nada adlanLa crlar llnks para
pglnas em consLruo (Lodos os bons slLes esLo sempre em consLruo) e quando se
crlam llnks para pglnas exLernas ao slLe vale a pena verlflcar regularmenLe se esses
llnks esLo caLlvos para que o uLlllzador no esbarre com a frusLranLe mensagem de
pglna no enconLrada.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 141 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
ara Lermlnar, noLe-se que em lo[as onllne a mudana de cor em llnks [
cllclados (nomeadamenLe na descrlo de produLos e nos preos) no se [usLlflca.

lmporLncla dos boLes de reLrocesso

C ouLro erro crasso e o esconder do boLo de
reLrocesso8. A web encora[a a llberdade de escolha.
Lsconder um boLo que permlLe ao uLlllzador recuar e
procurar ouLro camlnho e uma vlolao das regras que
crla uma enorme sensao de desconforLo.
no vale a pena LenLar.

uma das bandelras da usabllldade" e o aumenLo do senLldo de conLrolo e de
llberdade. L bom conLrolar a mqulna e saber que no esLamos a ser conLrolados e
enganados por ela. C esquema de navegao e
alavanca que faz com que o slLe resulLe ou no
resulLe. L ele que permlLe a sensao de
domlnlo, de poder, de llberdade de escolha. L
esLa a fllosofla da rede: llberdade e no
prender" o uLlllzador. rovavelmenLe lsLo s
far que ele, quando consegulr salr, evlLe o slLe.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 142 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

ueflnlo das Lecnologlas a lnLegrar
lLASP

C flash permlLe efelLos fanLsLlcos e d uma noo mals aproxlmada do que a
lnLeraLlvldade realmenLe e, no enLanLo s vale a pena ser usado quando e realmenLe
eflcaz e rpldo. C grande problema do flash e o Lempo e as barrelras que coloca a
recolha de lnformao rplda. usar o flash em algumas clrcunsLnclas equlvale a ler a
agenda Lelefnlca Loda para enconLrar um numero de Lelefone ou sublr do prlmelro
andar aLe ao Lrlgeslmo carregando em Lodos os andares!
Segundo nlelsen, os uLlllzadores evlLam Ludo quanLo lhes parea compllcado, a
soluo e slmples, mesmo que esLe[a a ser uLlllzada uma apllcao flash avanada, e
melhor no lnformar o uLlllzador. CuanLo mals comum parecer a apllcao, menos
reslsLnclas ele oferecer.
Lxlblr poderlo Lecnolglco no e boa pollLlca, sendo mulLo mals eflcaz um llnk
que lndlque claramenLe o que e que a apllcao faz do que dlzer ao uLlllzador que se
LraLa de uma apllcao lnLeraLlva em flash. A regra de ouro e comblnar o llash com
ouLras Lecnlcas e formaLos como o uP1ML, o M3, lmagens !C e Cll, pols o flash e
apenas e Lo-somenLe uma ferramenLa que pode ser uLll na melhorla do esquema de
navegao aLraves de pequenos pop-up ou com pequenas expllcaes (help funcLlons).
usabllldade e dar rplda e eflcazmenLe ao uLlllzador aqullo que ele procura e o flash
nem sempre permlLe lsso.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 143 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Cs boLes mals convenclonals, mesmo sendo pouco esLeLlcos, so
unlversalmenLe reconhecldos ao conLrrlo daqullo que se passa com mulLas solues
flash. A soluo passa por moldar os boLes em flash de forma que o esquema de
navegao se[a facllmenLe ldenLlflcado. C boLo de reLrocesso Lambem no e grande
a[uda no llash, uma forma de conLornar lsLo e lnLegrar um boLo de reLrocesso no
prprlo fllme de flash.
C flash no permlLe bookmarks (a bookmark, quando usada, marca o momenLo
lnlclal do fllme flash). ara faclllLar o bookmarklng de parLes especlflcas do llash e
necessrlo fragmenLar o fllme em vrlos segmenLos, o que alem de aglllzar o slLe,
faclllLa a aLuallzao de parLes do fllme.
uma das vanLagens (pouco explorada) do flash e a opo de lmpresso (rlnL
CpLlon) que permlLe envlar conLeudos especlflcos dlreLamenLe para a lmpressora,
evlLando a publlcldade.

!"#$%&'(')%)*"*"+",-."/,*0123"+4".35*$06*307"
8esumo: lmaglnem conhecer,
prevlamenLe, quanLo e que val cusLar o
desenvolvlmenLo de uma apllcao (prazos,
recursos, enLregas) e quals os beneflclos que se
podem obLer em Lroca, fazer conLas resulLa mulLo
complexo e mesmo os mals esperLos falham nos
numeros.
8ol ou 8eLorno do lnvesLlmenLo





Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 144 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
8ol ou 8eLurn of lnvesLmenLs so
os beneflclos que obLemos por cada
unldade lnvesLlda em Lecnologla, duranLe
um cerLo perlodo de Lempo. CosLuma
uLlllzar-se para anallsar a vlabllldade de
um pro[eLo e medlr a sua Laxa de sucesso.
Lm perlodos de crlse, e fundamenLal que
cada cnLlmo lnvesLldo em Lecnologla
regresse, se posslvel, acompanhado de mals.
8Cl=(8eneflclos/CusLos)x100
A sua medlda e um numero relaclonado com o rclo CusLo/8eneflclo. C cusLo e
slmples de medlr, sabemos sempre quanLo e que esLamos a gasLar. C compllcado e
calcular o beneflclo.
A prlorl, o 8Cl e compllcado de medlr pela lmpllcao de vrlos facLores como a
mudana Lecnolglca. C carcLer unlco de cada pro[eLo leva Lambem a dlferenLes
lnLerpreLaes do 8Cl. A desordem na hora de conLrolar e medlr as flnanas duranLe
um pro[eLo ou os facLores lnLanglvels como a saLlsfao dos uLlllzador, as melhoras e a
comunlcao.
" "




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 145 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
-"82+9*$$+"0:8'9+"8%2%")*4'3'2"+",-."316"82+;*0+"'68('9%<"
Antes:
Medlr a slLuao aLual. no caso de exlsLlr apllcao, ldenLlflcar os
processos bslcos suscepLlvels de melhora.
Compllao de dados para cada processo (Lempo, Larefas, cusLos, eLc.).
lazer uma esLlmaLlva dos cusLos do pro[eLo.
ConLrolo dos Lempos, cusLos e equlpa de desenvolvlmenLo.
Consegulr que o cllenLe Lrabalhe e Lome declses a Lempo e faa as
enLregas na daLa marcada.
Depo|s:
numeros resulLanLes aps a lnverso (cusLos flnals, beneflclos obLldos)
Converso dos dados em valores moneLrlos
Anallsar a sua lncldncla na poupana de cusLos, cresclmenLo de
vendas, aumenLos das margens em relao a slLuao anLerlor.

C reLorno medlo da lnverso em
usabllldade e de 8 euros por cada euro
lnvesLldo. Lm geral, a usabllldade e a
esLraLegla apllcada ao desenvolvlmenLo
de pro[eLos que mals 8Cl produz.





Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 146 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
C reLorno e grande porque a manuLeno das apllcaes lnformLlcas, devldo a
desvlos em relao a esLlmaLlvas lnlclals, cosLuma ser de uns 80 do LoLal dos cusLos
(MarLln & McClure, 1983, ressemen, 1992).
Clare-Marle karaL, da l8M demonsLrou como lnvesLlr 60,000 dlares em
usabllldade anLes e duranLe o processo de desenvolvlmenLo dum produLo de sofLware,
esLe gerou uma poupana posLerlor de 6,000,000 dlares duranLe o prlmelro ano de
vlda do produLo.
Cs LesLes de usabllldade podem dlmlnulr cusLos ldenLlflcando e resolvendo
quesLes de usabllldade anLes do seu lanamenLo.

Cs benef|c|os der|vados de ap||car a usab|||dade no desenvo|v|mento de
produtos so:
Menores cusLos de desenvolvlmenLo, se as necessldades e dese[os dos
uLlllzadores so adlclonados em fases lnlclals do clclo de desenvolvlmenLo do
produLo, podem evlLar se desvlos e problemas no fuLuro. C proLLlpo consLlLul
uma pea fundamenLal, por ser um ponLo de enconLro enLre o
cllenLe/uLlllzador e a equlpa de desenvolvlmenLo.

ueLeco lnlclal de falhas, os LesLes de usabllldade reallzados Larde, no clclo de
desenvolvlmenLo de um produLo, podem resulLar pre[udlclals numa
organlzao, a deLeco de falhas na usabllldade quando o cusLo de correo
em Lempo e pessoas e grande, pode arrulnar qualquer planlflcao e
renLabllldade de um produLo.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 147 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

1empos mals breves de desenvolvlmenLo, a usabllldade reduz os cusLos de
engenharla, desenvolvlmenLo e reduo dos Lempos de LesLe e conLrolo de
qualldade ao receber feedback dlreLo dos uLlllzadores. lsLo provoca uma
melhora do produLo flnal favorecendo uma salda mals rplda, dos produLos
para o mercado.
Malor rclo de aqulslo de cllenLes.
Menor roLao de cllenLes
Malor produLlvldade dos empregados, ao Ler em conLa a suas necessldades
reals.
Menores cusLos de manuLeno e suporLe, os produLos "usvels" so mals
fcels de lnsLalar e de aprender a uLlllzar. lsLo lmpllca uma poupana em cusLos
de aprendlzagem e de suporLe. or lsso, o valor do produLo e mals percepLlvel
quanLo malor a velocldade, o que lmpllca malor fldelldade ao produLo.
vanLagem compeLlLlva, a usabllldade reduz os cusLos de venda e dlmlnul os
clclos de comerclallzao dos produLos. C mals fcll de usar, e mals slmples de
vender e resulLa numa vanLagem na hora de comparar-se com produLos da
concorrncla, por serem eles mals fcels de conflgurar, aprender e uLlllzar.
Apesar de Ludo, a usabllldade e uma das prlmelras colsas a serem
"sacrlflcadas" em Lempos de crlse e despedlmenLos, senLo conslderada como
um luxo que unlcamenLe faz com que o produLo se[a mals caro, quer para as
empresas, quer para os cllenLes, praLlca-se enLo uma "seudo usabllldade"
por parLe das equlpas comerclals e Lecnlcos que cosLumam provocar desvlos de
expecLaLlvas e Lrabalhos de melhorla.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 148 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Segundo uon norman, "o uLlllzador no sabe realmenLe o que quer aLe que o
experlmenLa". Ao se desenharem produLos de sofLware, esLes baselam-se em
requerlmenLos e especlflcaes, casos de uso, desenvolvlmenLo e provas. LsLa
forma de Lrabalho leva a um afasLamenLo das necessldades reals das pessoas,
resulLando em produLos que defraudam as expecLaLlvas do uLlllzador.






Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 149 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
1esLes de usabllldade

um LesLe de usabllldade vlsa medlr, quanLlflcar a usabllldade do slLe. Lls
algumas colsas que so passlvels de medlr num LesLe de usabllldade:
1. 1empo que leva a complemenLar uma Larefa,
2. 1empo que leva a compleLar a Larefa dols dlas mals Larde,
3. numero de enganos por Larefa,
4. numero de enganos por mlnuLo,
3. numero de uLlllzadores a comeLer o mesmo erro.

LxlsLem dlversas formas de avallar a usabllldade. Cs LesLes de usabllldade
baselam-se na observao do uLlllzador em lnLerao com a lnLerface em causa. C
responsvel pelo LesLe pode apenas observar (exposLo ou no) como o uLlllzador usa o
produLo, sollclLando que expllque o que esL a pensar em voz alLa e reglsLando seu
comporLamenLo. ode Lambem preparar um roLelro de aes para o uLlllzador
execuLar. MeLodos h que, usando Lecnologla e equlpamenLo mals avanados,
reglsLam o movlmenLo dos olhos do uLlllzador, procurando asslm perceber se o uso do
slLe e felLo de acordo com as expecLaLlvas.
uma ouLra forma de Lrabalhar a usabllldade e aLraves do arLlclpaLory ueslgn
(deslgn parLlclpado) que e uma especle de bralnsLormlng onde parLlclpam os vrlos
lnLervenlenLes no processo (uLlllzadores, deslgners, programadores).




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 150 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Cs focus groups so uma das formas mals populares (e mals caras) de avallar a
usabllldade de um slLe. C amblenLe de um focus group e o ldeal (pelo menos
aparenLemenLe) para se perceber o que e que agrada ou desagrada aos uLlllzadores.
Cs focus groups podem ser uLels em deLermlnadas slLuaes, mas podem
Lambem gerar grandes malenLendldos. num famoso esLudo, Leve-se uma conversa
prevla com um focus group sobre como um slLe deve ser", Lendo-se concluldo que
elemenLos como o flash so mals vallas na medlda em que capLam a aLeno do
uLlllzador. CurlosamenLe, os elemenLos desLe focus group em conLexLo de uso
lgnoraram as anlmaes e evlLaram a Lodo o cusLo o flash!
um esLudo de nlelsen10 lndlca que com os focus groups" flcamos dlsLanclados
Lrs nlvels da realldade, porque:
1. Cs uLlllzadores em norma dlzem o que acham que o coordenador do LesLe
quer ouvlr ou aqullo que e soclalmenLe acelLe,
2. Cs uLlllzadores dlzem aqullo que acham que flzeram (mas a memrla e
fallvel),
3. Cuando os uLlllzadores dlzem o que flzeram [ esLo a raclonallzar o facLo e
omlLem, lnadverLldamenLe, dados.
A melhor manelra de avallar a usabllldade de um slLe e observando uLlllzadores
reals e acompanh-los na execuo das Larefas. L o meLodo mals baraLo, mals slmples
e mals fldedlgno. Clnco uLlllzadores, execuLando pequenos LesLes orlenLados, basLam.
Aps apllcar o LesLe para o prlmelro uLlllzador e reglsLar as avallaes, os
conheclmenLos sobre os problemas de usabllldade da apllcao aLlngem cerca de um
Lero (1/3) do LoLal.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 151 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

Um pro[eLo mulLlmedla deve ser um lerrar|:

lcll de usar
Lxcluslvo para o melo onllne
8elevanLe para as necessldades do uLlllzador
8pldo a carregar
ALuallzado
8lco em conLeudos
lnLeraLlvo







Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 152 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
1lpos de avallao

8esumo: LxlsLem dlferenLes meLodos de avallao de slLlos Web que mudam
segundo o seu rlgor, cusLos assoclados e conheclmenLos necessrlos para levar a cabo
a avallao. A esLraLegla de avallao mals aconselhvel e mlsLurar uma avallao
heurlsLlca com um LesLe de uLlllzadores posLerlor.

=> !5%('%?@+"A*12:$0'9%"8+2"*$8*20+$B"
Avalladores esperLos na heurlsLlca (prlnclplos) da usabllldade avallam o slLlo e
elaboram um relaLrlo segulndo esLes prlnclplos. L um dos meLodos mals lnformals,
mas, ao mesmo Lempo, e conslderado como um dos prlnclpals devldo a sua excelenLe
relao cusLo/qualldade. na malorla dos casos, deve se reallzar anLes de um LesLe de
uLlllzadores.

C> D*$0*")*"10'('E%)+2*$B""
ALraves da observao e reglsLo do comporLamenLo dos uLlllzadores em Larefas
prevlamenLe encomendadas, exLral-se lnformao sobre a usabllldade de uma pglna
web. L uma Lecnlca que complemenLa perfelLamenLe a avallao por crlLerlos.





Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 153 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara

F> !5%('%?@+"%02%5G$")*"$'61(%?@+"9+H3'0'5%""
/9+H3'0'5*"I%(J0A2+1HA7B""
ALraves da slmulao cognlLlva (cognlLlve walkLhrough) so slmulados ao
pormenor e passo a passo, Lodos os processos de uLlllzao de uma pglna Web
(Lomada de declses, resoluo de problemas, eLc.) por um uLlllzador. uma varlanLe
desLa e a slmulao por uma equlpa mulLldlsclpllnar (plurallsLlc walkLhrough), em que
cada grupo, composLo por uLlllzadores, programadores e proflsslonals da lC/PCl
dlscuLem cada um dos elemenLos do slLe
K> !5%('%?@+")%"1$%&'(')%)*"'30*291(012%(B""
Avalla a adequao dos conLeudos, slmbolos e esLruLuras de lnformao no
conLexLo culLural do uLlllzador alvo do slLlo web.

L> !5%('%?@+")%"%9*$$'&'(')%)*B""
nesLa avallao comprova-se a adequao do slLlo Web e do seu uso por parLe
da populao de lncapaclLados.
Cs meLodos de avallao menos adequados para avallar a usabllldade so os
esLudos de mercado e os esLudos auLomaLlzados. LsLes cosLumam Ler graves
lnconvenlenLes.




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 154 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
Se procura um meLodo de referncla na avallao, o prlmelro que surge e o
meLodo clenLlflco Lradlclonal, no enLanLo a sua apllcao no Lem valor no Web
deslgn.
no meLodo clenLlflco lnLroduzem-se varlaes nos elemenLos a esLudar e
posLerlormenLe so anallsados os resulLados desLas varlaes. lsLo lmpllcarla crlar
vrlas verses dlferenLes do slLlo e esLudar as dlferenas enLre elas nalgum aspecLo
concreLo, por exemplo, o Lempo de resoluo de uma Larefa de compra. lnfellzmenLe
esLe meLodo no e operaLlvo para o desenvolvlmenLo de uma pglna web. A Larefa de
crlar proLLlpos compleLos excluslvamenLe para avallao serla demaslado cara em
Lermos de Lempo e dlnhelro.
uma ouLra posslbllldade e reallzar
comparaes enLre a verso anLlga de uma pglna
Web e a nova ou aLuallzada para comprovar os
resulLados das mudanas lnLroduzldas. no enLanLo,
na malorla dos casos esLa opo e lnuLll. Lm poucos
casos ambas as verses so comparvels, pols a
nova verso cosLuma ser demaslado dlferenLe para
uma comparao genulna.
lrenLe a esLe Llpo de problemas de avallao e recomendvel apllcar a
"Lngenharla do Clclo vlLal da usabllldade". Lm prlmelro lugar requer-se uma adequada
planlflcao para o que, quer o enfoque "pessoa", quer a crlao de "cenrlos" de
uLlllzao de uma pglna Web so de grande uLllldade. Lm segundo lugar, e segulndo
os prlnclplos da usabllldade, devem ser elaborados proLLlpos mulLo elemenLares e
reallzar LesLes de uLlllzadores sobre os mesmos o mals rapldamenLe posslvel. A parLlr




Rua Soeiro Viegas n 21 3 B Esq 6300-758 Guarda | Tel./fax: 271 237 034 | geral@ensiguarda.pt | www.ensiguarda.pt 155 de 302
DISCILINA: ueslgn, Comunlcao e Audlovlsuals
rof. Sandrlna lsabel Clara
da anllse e avallao desLes proLLlpos, ser posslvel a crlao de uma verso unlca
da pglna web que por sua vez, ser novamenLe avallada e modlflcada.