USABILIDADE

E COMUNICAO NA INTERNET

No o que considera sobre o seu site que conta, mas sim o que os utilizadores pensam dele. Jakob Nielsen A regra menos (rudo) mais (informao) deveria ser praticada na Web em Portugal.

1. O QUE USABILIDADE?

Miguel Santinho

Simplificar, rentabilizar, optimizar, facilitar, melhorar, acelerar so verbos que gravitam em torno do conceito de usabilidade. Mais usabilidade sinnimo de maior flexibilidade e de maior interaco. Mas afinal o que a usabilidade? Usabilidade uma caracterstica daquilo que utilizvel, funcional. tornar bvio o bvio, tendo em conta as necessidades do utilizador e o contexto em que este est inserido.

A usabilidade est em todo lado e existe quase

sempre um pormenor que pode ser alterado para melhor, no entanto ressalve-se que mudar no obrigatoriamente sinnimo de melhorar. Em equipa vencedora no se mexe (ou no se deve mexer muito...).

Qualquer condutor avalizado conseguir, partida, conduzir qualquer carro europeu, pelo menos dominando as operaes mais bsicas. Mas nem todas as operaes se percebem numa primeira abordagem. Os controlos das luzes do limpa-vidros traseiro, da marcha-atrs podero ocupar lugares diferentes dependendo do modelo. Se em vez do automvel falarmos de telemveis, micro-ondas, fornos elctricos, mquinas-delavar, mquinas fotogrficas compreendemos que cada caso mesmo um caso. Se o

modo de usar no bvio, o problema no seu, do design, da usabilidade. Quem que no se sentiu j confundido com o funcionamento das torneiras numa casa de banho pblica ou com os menus de um telemvel ou com os comandos de um televisor? Botes e informaes nos devidos locais com sua hierarquia de importncia; cores e diagramao intuitivas e adequadas; comportamento adequado ao pblico. Isto usabilidade em aco. Quando um produto usvel, nem se pensa no conceito de usabilidade. O problema est quando o produto no se adequa ao utilizador (uma cadeira desconfortvel, uma jarra mal desenhada, um pacote difcil de abrir). A usabilidade um caminhar progressivo em direco ao utilizador e no o contrrio (user-centered design- UCD)

Na internet a usabilidade no basta, mas corresponde a uma boa parte do caminho. Por exemplo este boto loja online to simples quanto isto: se um internauta no encontra um produto, no o compra. Fazer com que o utilizador encontre o que procura usabilidade em aco. Um site tem, numa perspectiva optimista, entre 10 a 15 segundos para convencer, por isso todos os elementos da pgina precisam de ser avaliados, pesados, medidos em termos de impacto. As pginas precisam de carregar rapidamente (este factor um dos mais apontados como fulcrais no sucesso ou insucesso do site) e todos os elementos grficos precisam de ser optimizados (tamanho, qualidade, interesse). Ser que todas as imagens so necessrias? Ser que as animaes em flash se justificam sempre? Casos a pensar e a pesar.

muito mais clicvel do que este . Pegando no exemplo de uma

Uma imagem pode valer mil palavras, mas tambm mil interpretaes diferentes1 e uns tantos clicks de desistncia. O tempo um bem escasso e caro. Se a demora for muita, o utilizador vai procurar outro site, oferta o que no falta na rede. As preocupaes do utilizador comum prendem-se com dinheiro e tempo e estar online significa gastar impulsos telefnicos e tempo. Esteja em busca de informao ou de entretenimento as preocupaes do utilizador so se o site vai demorar a abrir; se vai abrir; se o browser vai funcionar naquele site. A par da importncia da rapidez, temos o factor previsibilidade. O previsvel reconfortante, um reconhecer de caminho. Se um texto sublinhado a azul representa para todos um link e um texto a rosa um link visitado para qu mudar? No h razes estticas que justifiquem por si s a alterao de esquemas mentais adquiridos, de prticas interiorizadas. Quer nos anos 80 e quer nos primrdios internet, a ateno estava centrada no utilizador especializado e na mquina. Hoje em dia, em virtude da estabilizao dos preos e da qualidade das mquinas, a ateno est centrada no utilizador muitas vezes pouco familiarizado com o universo informtico. Em regra o utilizador comum no est familiarizado com interfaces computacionais, tem pouqussimo tempo para aprender como funciona cada site e est conectado atravs de um sistema de baixssima velocidade. Se num utilizador quase profissional, pequenas alteraes no fazem a diferena, pois rapidamente se adapta, num internauta novato e ainda inseguro pequenas mudanas podem provocar muitas resistncias e muitas desistncias. Conversar com um utilizador "novato" facilita a percepo das dificuldades de navegao. As melhorias e os ajustes do esquema de navegao dependem (devem depender) do modo como o utilizador comum usa o site. O contacto com utilizadores reais atravs de conversas, questionrios, registo de acessos imprescindvel. Desta interaco, deste feedback nasce um site realmente amigvel. O utilizador tem a possibilidade de alterar alguns parmetros de visibilidade da pgina no seu browser. As caractersticas prprias das diferentes plataformas podem alterar a exibio de cor e a correco gama (brilho e contraste).

Diferentes browsers podem exibir a mesma pgina de forma diferente. Todas estas variantes/condicionantes fazem com que uma mesma pgina possa mudar e muito de uma plataforma para outra. O tamanho e o tipo de letra podem ser apresentado diferentemente de um browser para o outro. O Netscape (no menu: editar preferncias) e o Internet Explorer (no menu: ver opes) permitem alterar o modo como a fonte exibida. bvio que o aumento ou a diminuio da fonte alteram a disposio dos menus. Estes aspectos no podem ser negligenciados aquando da feitura do site. REGRAS BSICAS DE USABILIDADE NA REDE

2. ENTRAVES USABILIDADE

Jacob Nielsen2, o grande especialista da usabilidade, aponta sete entraves usabilidade na rede. O primeiro entrave apontado irrelevncia. Irrelevncia no uso de termos

Jakob Nielsen

Clareza na arquitectura da informao Facilidade de navegao Simplicidade A relevncia do contedo Coerncia Rapidez Ateno nos utilizadores

como website, 'online' e 'homepage' no ttulo da homepage quando o utilizador obviamente sabe que est em todos esses contextos. O mesmo se passa com ttulos de pgina iniciados por artigo (exemplo: os nossos produtos, o carrinho de compras, as suas dvidas em vez de produtos, carrinho de compras, dvidas) o que no permite criar marcadores (bookmarks) na ordem alfabtica mais lgica para o utilizador. Irrelevncia ainda em links iniciados por termos repetidos, em geral o nome da prpria empresa em cujo website o internauta j se encontra. www.empresa.com/moradas em vez de moradas. O segundo entrave a redundncia, isto vrias ocorrncias de um mesmo elemento em reas diferentes, principalmente opes de navegao e at links activos para a homepage na prpria homepage. A informao sobre assuntos similares deve estar toda junta e os nomes nos menus no devem levar a mal-entendidos. O terceiro entrave a ausncia de contedos informativos vlidos e realmente importantes. A informao no se pode misturar com o marketing de uma forma pouco ortodoxa. Ttulos e cabealhos demasiado vagos, pouco especficos devem ser evitados. O quarto entrave a inadequao discursiva que se pode verificar em cabealhos de notcia muito longos e difceis de ler online; opes de menu com termos demasiado tcnicos para o grande pblico, nomes fantasia que nada informam usados como itens de menu (exemplo grande casa em vez de homepage), abreviaturas usadas sem prvia apresentao do termo completo. O quinto entrave a inconsistncia, a falta de coeso como por exemplo o uso aleatrio de letras maisculas e minsculas entre as opes de um mesmo menu de navegao ou uso aleatrio de sinais de pontuao. A posio, a ordem, o espaamento deve ser consistente na interface de forma a ajudar o utilizador a dominar o processo. O sexto entrave prende-se com o mau posicionamento e m organizao de elementos-chave e com a categorizao e sub-categorizao de menus. importantssimo encontrar os hipernimos e os hipnimos., de forma a sub categorizar consistentemente os assuntos.

Por fim, o stimo erro a violao de convenes da web tacitamente aceites por todos como a alterao cor padro dos links ou a ocultao do boto de retrocesso. Estes entraves fazem com que por vezes o utilizador se sinta confuso com uma multiplicidade de opes de navegao.

7 Entraves usabilidade 1. 2. 3. 4. 5. 6. 7. Irrelevncia Redundncia Pouca informao Inadequao discursiva Inconsistncia Mau posicionamento e m organizao Violao das convenes da rede

3. ALGUMAS QUESTES PRTICAS 3.1 LAYOUT

O layout deve mostrar a filosofia, as mais valias da empresa, valorizando-a. Cada empresa tem uma linguagem, uma imagem que o layout do site necessita de sublinhar. O layout dever ser concebido a partir do lugar onde se pretende que o utilizador inicie a movimentao do olhar. A distribuio dos elementos e as cores escolhidas so importantssimas, normalmente os olhos movimentam-se da esquerda para a direita, e de cima para baixo (em z), o que sugere que o layout ideal aquele que leva o utilizador a ver primeiro os elementos superiores esquerdos (normalmente o logtipo), e a partir da, descer em forma diagonal. Os olhos procuram normalmente primeiro os elementos maiores e s depois os mais pequenos e primeiro olham para os elementos mais escuros e d depois para os mais claros.

Aqui est um bom exemplo de conduo do olhar:

Um outro bom exemplo o do www.portugalfashion.com:

E aqui (www.multiopticas.com) um mau exemplo, pois o olhar da jovem dirige--nos para lugar nenhum.

Repare-se como o menu do lado esquerdo aumentaria a legibilidade do site:

O fim da pgina normalmente pouco explorado pelos utilizadores, j que a sua experincia de uso lhes diz que a informao que l consta no normalmente relevante. Da a m aposta dos www.ctt.pt que guardaram o fim da pgina para a pesquisa.

Coerncia e equilbrio so palavras-chave quando se fala do layout. A tela deve ter aproximadamente a mesma quantidade de texto e caracteres grficas em cada metade da tela. Uma maneira de avaliar o equilbrio da tela pode ser feito traando uma linha imaginria vertical ou horizontalmente em metade da tela. As medidas devem conter aproximadamente a mesma quantidade de texto.

Assim como num jornal os ttulos da 1 pgina destacam as notcias mais importantes, numa pgina web a hierarquia visual deve ser preservada, seguindo o esquema da pirmide invertida: Mais importante

A informao mais importante deve estar logo no princpio. Na internet no se l com o mesmo tipo de ateno que se l no papel, l-se na diagonal procurando informao relevante e buscando o prximo link de interesse. Para se ter uma ideia, note-se que no papel a rapidez mdia de leitura oscila entre as 240-400 palavras por minuto, enquanto que no monitor a mdia baixa para 100 a 200 palavras por minuto. S este dado prova suficiente que a internet exige uma forma de escrita diferente. A este propsito, abrimos um parntesis para falar da importncia das verses de impresso. Apesar das previses o consumo de papel no diminui com o advento da internet. Os computadores so bons para guardar informao, mas geralmente maus

q I eI P6@ B q R 4 q6 h I B Y Rq q k P6 4 8 R q6 )v@Ay8s9vAx80b7t9)va@xGHBf%t)h97ybV9ji qbhWWQId8VC)7gdQVQ9%d7t)xICAQVQfhQc 6 G q IP@ q I 4 I 8 IP e g6q 6 4 q B@ 8 IP I g P I R@ e 4 RP R 4 q 86 g I B P IP@q R vAfbVe7tdiUShQVC R I SP RD B Y S I P 6 G 6 8P R )WQUsir8IAQh9Wysb q R@ e 4 RP q R P I Y e B bvAVhQfHgAfa`dc q@ I G q 8 eP D qP 6@@ Yq 6 8 P BP v1%QybFR%vrWH6syhQxIsw R@G I@ 8 R G 6 4 q I SP RD q IP@ e R P I Y e B vV)vAbWu7t)UsirhQ%pAihQfHgAfa`dc R YI R 4 IGP6 S R P I B@ 86 4 ba`9X7QWV9UT0QHGFBEDCA9753 2 2 2 2 2 2 2
Mais especfico 10

& (  (&        #10)'%$#"! 2

para us-la pois mesmo quando um computador tem uma resoluo alta, a dificuldade de leitura grande e, alm disso, na web uma pgina compete com milhares de outras que esperam um click o que faz com que a ateno do utilizador diminua. estes utilizadores uma verso print-friendly o ideal. Uma verso amigvel de impresso faz com que, ao remover a barra de navegao, os banners, imagens, fundos, o nmero de pginas a imprimir seja menor e que tambm exista uma poupana considervel no tinteiro. O copy e paste tambm mais simples a partir de uma verso print-friendly. Outro ponto importante hierarquia da informao. Quando olhamos pela primeira vez para algo procuramos as semelhanas e as diferenas. Estas associaes visuais permitem-nos separar objectos, esta seleco feita a partir das cores, texturas, tamanho importante ter em ateno muita gente imprime informao a partir da web. Para

Quanto mais contraste visual existir entre dois objectos, mais facilmente eles so percebidos como distintos:

nm o!l

11

A hierarquia consiste no uso das relaes visuais para contar uma histria. Elementos que mantm entre si uma ligao devem ser coerentemente agrupados. Sem hierarquia visual o utilizador fica perdido, pois todos os elementos da pgina clamam por ateno

Neste sentido necessrio subcategorizar correctamente produtos ou aces, no esquecendo de dar tratamento grfico idntico a itens semelhantes. Livros de Arte Msica DVD Informtica Desporto Viagens
Este menu pode induzir em erro: Livros de Arte sobre msica ou ser que h uma seco especfica sobre msica?

Livros Msica DVD Informtica Desporto Viagens

Arte Poesia Fico Ensaio Esta hierarquia visual muito mais clara.

12

Um bom exemplo de hierarquizao de informao o dado em www.consumiveis.com . No preciso entrar em nenhuma pgina para saber quantos tipos de tinteiros so disponibilizados e para que marcas. Num s olhar o utilizador poder escolher a soluo que mais lhe convm, poupando tempo e clicks. As pginas devem estar divididas em rea bem definidas e os contedos nos

Logtipo/Back

Search

Produtos

Login

Conta

Carrinho

Ajuda

locais onde o utilizador espera que eles estejam. No quadro abaixo, mostramos o resultado de um estudo levado a cabo pelo Departamento de Psicologia da Wichita State University3. Neste estudo procurou-se saber quais as expectativas de localizao de funcionalidades por parte dos utilizadores comuns, tendo-se chegado tabela aqui apresentada.

O exemplo da www.landsend.com serve para ilustrar o posicionamento pouco bvio do carrinho de compras, que para alm do mais no est identificado nem com um smbolo icnico.
Michael Bernard, Examining User Expectations for the Location of Common E-Commerce Web Objects
3

| ~ p ~ | v { y x p w vu r t s rqq hytsq ofw}!ydzxyfoAEtjW57p

13

Num outro estudo desta mesma universidade sobre as expectativas dos utilizadores conclui-se o seguinte:

Os links internos devem estar no canto esquerdo da janela; Os links externos devem estar do lado direito ou no canto esquerdo inferior; O boto de retrocesso deve estar no topo esquerdo da janela;

O login e o registo devem estar do lado esquerdo da pgina; O boto de ajuda no lado direito; Os links para produtos especficos no centro do lado esquerdo; O boto de adicionar ao carrinho do lado direito.

Estes esquemas mentais dos utilizadores no devem ser contrariados, sob pena de eles simplesmente no perceberem o site. Os utilizadores perdem por vezes muita informao s porque no a vem. A verdade que inovar muito no soluo, a roda s foi inventada uma vez.... O utilizador est acostumada a uma determinada interface, por isso no aconselhvel mudar o layout frequentemente. Quanto s dimenses da pgina, seguimos de perto Miguel Santinho que refere que o layout pode ter a largura e a altura que se quiser. No entanto existem vantagens e desvantagens que devero ser tomadas em considerao. Um layout com 753pt de largura no 'cabe' em resolues com, por exemplo, 640x480pt. "OK!", diz-se, "j ningum usa monitores com essas resolues. O mnimo os 800x600". Para quem tem tanta certeza aconselhvel consultar os 'logs' de acesso ao site e verificar as diferentes resolues utilizadas. Por outro lado, como se imprime em A4 uma pgina cuja largura est definida para mais de 595px (aprox. 21cm - largura da pgina A4)?

14

3.2 HOMEPAGE

Apesar de ser um lugar comum dizer que a homepage a cara do site, no demais repeti-lo. A pgina de abertura espelha (ou melhor, deve espelhar) a filosofia subjacente ao site. Trata-se no s da pgina mais importante como tambm da pgina mais vista. A esttica no pode ser descurada. Se o site for muito funcional, muito bem estruturado, mas no for acolhedor, os utilizadores sentir-se-o pouco tentados a visit-los. O que no pode acontecer que o processo de embelezamento dificulte o acesso ao site4. Note-se como uma boa organizao da homepage ajuda a ler a pgina.

Ao

falar em dificuldades de acesso ao site, no podemos deixar de referir a inutilidade das pginas de entrada (Splash-pages, splash4

Vide Miguel Santinho em simplicidade.com sobre a Navegabilidade: o caso do Pblico

15

screen) que, alm de um link a dizer entrar ou de possibilitar a verso do site em outros idiomas, no tem mais nada de relevante para a estrutura do site. Miguel Santinho, num estudo sobre a inutilidade das pginas iniciais5, analisou 35 pginas de entrada de sites portugueses concluindo que:

Conclui-se ento que se as funcionalidades que as pginas de entrada oferecem so inteis ou se podem ser oferecidas de um modo mais simples e eficaz, elas devem ser eliminadas. A relao entre a apresentao visual e a funcionalidade difcil mas no impossvel. O momento principal o da planificao do site. preciso saber para que serve aquele site e qual o seu pblico-alvo. Uma boa planificao obriga os diversos intervenientes a pensar, a encontrar solues e evita remendos e remodelaes a posteriori.

oWEVoTfx01dozfzaoEffEjW57

2 2 2 2

As pginas de entrada consome, em mdia, 14 segundos para completar uma animao ou carregar as imagens e redireccionar para a pgina principal. O que em mil utilizadores significa quase 4 horas de tempo desperdiado! 46% utilizam Flash e 64% apenas HTML, 14% utiliza as duas tecnologias. 17% dos sites possibilitam saltar a animao e entrar imediatamente no site. Dos 20% de sites que utilizam som na pgina de entrada nenhum possibilita deslig-lo.

16

3.3
AS LEIS DE NIELSEN 1. Incluir uma frase sntese sobre o site (tagline) 2. Escolher um ttulo com boa visibilidade nos motores de busca 3. Dar informao sobre a empresa numa rea aparte 4. Enfatizar os principais servios do site 5. Incluir um motor de busca caso a dimenso do site o justifique 6. Evitar descrever os contedos do site, prefervel mostrar excertos recentes 7. Comear os links com palavras-chave 8. Criar um link para os arquivos do site 9. Evitar rudo visual (demasiados grficos e imagens despropositadas) 10. Utilizar imagens relevantes
in www.useit.com Homepage guidelines de Jacob Nielsen

Esquema de navegao

No basta desenvolver um site com design atraente para atrair e fidelizar os utilizadores. Os recursos visuais at podem atrair o utilizador num primeiro momento, mas no so razo bastante para mant-lo ou faz-lo retornar ao site. Os argumentos so os contedos, mas para chegar aos contedos necessrio um esquema de navegao funcional, bvio, simples para que nenhum utilizador pense sequer que outro esquema seria vivel. A barra de navegao o veculo que leva o utilizador a viajar pelo site. Em baixo temos trs exemplos de barras de navegao. O primeiro exemplo o www.exit.pt uma barra pouco convencional mas funcional, joga com smbolos icnicos e com texto.

Os separadores so um smbolo fsico que resulta muito bem na web. Os separadores, como nota Steve Krug em No me faa pensar, so evidentes, difceis de ignorar, agradveis e sugerem um espao fsico. Os melhores separadores so aqueles que, como

17

no

www.hotmail.com, em www.chip7.com e na www.loja21.com,

indicam onde

estamos, pois criam a iluso que o separador activo se move para a frente do cran.

Os seguintes exemplos (www.800.com e www.outpost.com ) so exemplos de guias menos bem conseguidas pois a iluso de que estamos mesmo no separador activo no totalmente conseguida.

Quando um arquitecto desenha um prdio de raiz, a primeira coisa a fazer esboar um plano onde se perceba a forma como as pessoas interagem com as reas funcionais. Num site dever-se-ia fazer a mesma coisa. A componente pragmtica fundamental, parafraseando Wittgenstein: no perguntes como o site, pergunta para que serve. A tnica tem de estar no uso. E se muitas pessoas encontram dificuldades em orientarse, se no encontram o que pretendem, se desistem, a culpa no , seguramente, delas. Um exemplo de mau uso da barra de navegao o da figura ao lado. No h uma hierarquia na informao.

18

A pesquisa e o carrinho de compras esto escondidos no meio de outras funcionalidades, sem qualquer destaque nem sem nada que o justifique. O modo como a informao estruturada crucial. A navegao a forma natural de incorporar contedos de modo coerente e consistente. As opes dos menus devem ser apresentadas por ordem de importncia e por ordem de frequncia de seleco. As funcionalidades oferecidas devem ser disponibilizadas hierarquicamente (informao por camadas) e o nmero de opes por nvel e o nmero de nveis (profundidade) deve ser tal que no oferea nem opes em demasia, nem obrigue os usurios a clicar um nmero excessivo de vezes para chegar informao desejada. Os especialistas indicam que sete o nmero mais razovel de links na barra de navegao. Uma barra pouco habitual, mas funcional www.arrowportugal.com :

O percurso do utilizador deve ser o menor possvel. Os utilizadores que tiverem que clicar mais de 4 nveis para encontrar o que desejam, podem simplesmente desistir do site. A informao deve estar no mximo a trs clicks de distncia. Mais do que isso perca de tempo e sinal de m estruturao do site. De evitar barras de navegao maiores do que a tela para evitar que o utilizador tenha que andar com o browser para cima e para baixo. igualmente importante contextualizar o visitante, oferecendo-lhe sempre a hiptese de voltar para o ponto de partida e oferecendo-lhe tambm a possibilidade de atalhar caminho atravs de links. Botes de navegao consistentes que permitam, por exemplo avanar ou retroceder, permitem uma utilizao lgica e intuitiva. Quanto aos botes, uma meno positiva para a www.cenoura.com. Os botes do mesmo a iluso que foram carregados.

19

Ter uma barra de navegao em todo o site faz com que o utilizador descubra para onde quer ir sem precisar de voltar sempre ao ponto de partida. Esta barra (barra de navegao global ou de navegao persistente) ainda uma interface de aprendizagem rpida para o utilizador. A barra de navegao persistente deve ser igual em todo o site, excepto na homepage e numa pgina de formulrios. (na homepage porque se trata de uma pgina especial, a cara do site que merece um tratamento distinto; numa pgina de formulrios uma barra de navegao pode ser distractiva). A barra de navegao persistente ganha ainda mais importncia se pensarmos que uma boa parte do fluxo de um site advm de pesquisa. Ora quando se faz uma pesquisa no somos redireccionados obrigatoriamente para a uma homepage mas para uma pgina interior. Um utilizador pouco familiarizado como a internet pode no saber como ir para a pgina inicial caso no tenha uma barra de navegao ou uma indicao de que caminho seguir. Para atravessar um campo relvado provvel que 20 pessoas trilhem 20 caminhos diferentes. Ao fim de uns tempos verifica-se que alguns caminhos foram repetidos e outros no. A lgica implcita construo dos caminhos virtuais semelhante, ao construir links, percursos preciso antecipar os esquemas dos utilizadores, prever caminhos e acompanhar o uso que feito do site para assim ser possvel optimiz-lo. Uma vez que o esquema de navegao esteja interiorizado importante mant-lo. Coerncia e consistncia: o mesmo texto, a mesma cor no mesmo stio. Num bom esquema de navegao indispensvel um bom mapa do site, pois a esto disponveis todas as pginas do site e as relaes entre elas. O mapa do site uma espcie de ndice que pode ser optimizado com um sistema de pesquisa mas nem tudo so boas notcias... Os mapas do site so muitas vezes confusos e difceis de encontrar. O mapa do site deve contextualizar o utilizador, permitindo-lhe num simples olhar saber onde est, de onde veio e para onde pode ir.

20

3.4 FONTES
As fontes e cores apresentadas dependem do computador e do browser que est a ser utilizado. No vale a pena escolher um tipo de letra aparentemente fantstico se depois o utilizador no o consegue visualizar correctamente. Se o utilizador no tem a fonte que escolhemos disponvel, automaticamente o computador apresentar-lhe- o texto na default font. As fontes abaixo indicadas so as mais utilizadas na rede:

Tahoma

Times New Roman

Quanto opo por fontes serif ou sans serif, sabido que as fonts serif so mais legveis no papel, enquanto que em crans com pouca definio as fontes sans serif parecem preferveis, j que se evita o efeito de esbatimento. As fontes serif no cran, devido aos seus ornamentos, quando em tamanhos pequenos (10, por exemplo) funcionam como rudo visual. Num estudo realizado6 concluiu-se que no h diferenas significativas na eficincia de leitura das diferentes fontes (apresentadas no quadro acima), a diferena est na rapidez de leitura.

http://psychology.wichita.edu/surl/usability_news.html

Tg 70xh
21

Century Schoolbook Courier New

9hdyQjt
Arial

9hddxj Cd97

O Times New Roman e Arial, ambas em tamanho 12, uma serif e outra sans serif, foram as fontes que permitiram uma leitura mais rpida. No entanto, a fonte Verdana (que foi, semelhana da Georgia, desenvolvida para computador) que se apresenta como a mais consensual, permitindo um desempenho bastante razovel ao nvel da leitura e satisfazendo a nvel esttico. Quando dizemos consensual, reportamo-nos relao entre a rapidez de leitura efectiva e a percepo que os utilizadores tm dessa mesma rapidez. De facto, o Verdana uma boa alternativa porque legvel em tamanhos pequenos e em crans de pouca resuluo. Num outro estudo, levado a cabo pela mesma equipa, no qual se pretendia averiguar sobre a performance do Times New Roman e do Arial verificou-se que os utilizadores tm melhor desempenho de leitura com textos em TNR (12) e Arial (10). Mas avaliando no o desempenho propriamente dito, mas a percepo que os utilizadores tinham da compreenso dos contedos lidos, concluiu-se que a fonte Arial 10 tida como mais legvel do que o Times New Roman (12). Os resultados mostram que h uma ligeira vantagem do Arial (10) face ao TNR (12) a nvel de preferncias dos utilizadores, no entanto ressalve-se que a fonte TNR (12) foi a que nos testes permitiu uma leitura mais rpida. Apesar do Verdana e do Arial serem muito populares na web, Times New Roman uma boa soluo de compromisso para documentos que vo ser impressos e lidos offline. Em outros pblicos, como as crianas e os idosos, as fontes e tamanhos recomendados so diferentes. Num estudo com crianas, verificou-se que a fonte comic em tamanho 14 a mais consensual; enquanto que com pessoas mais velhas (mdia de idade setenta anos) verificou-se que o tamanho 14 numa fonte sans serif mais legvel e promove uma leitura mais rpida. Note-se no entanto que o comic no uma default font logo no disponibilizada por todos os computadores.

22

3.5 Cor, conforto visual

A cor muito importante como elemento orientador do olhar do utilizador. Os olhos movem-se dos elementos maiores para os menores, das cores escuras para as mais claras, e da cor para a ausncia de cor. A escolha de cores na rede no feita como se faz no papel. O papel recebe luz enquanto que o cran ilumina. Esta a primeira de muitas diferenas. A cor deve guiar, orientar a leitura que na rede tem contornos particulares, trata-se de uma leitura no-linear. o utilizador que faz o seu caminho As cores bsicas do site devem pertencer ao espectro das 256 cores. claro que em fotos e ilustraes no fundamentais podemos alargar esta paleta mas temos que assegurar que 100% de populao consiga aceder sem complicaes ao site. A maioria dos sites usa texto negro sobre fundo branco, com os links a azul. No entanto, tendo em conta que o branco do monitor um branco brilhante, o contraste ideal ser negro sobre um fundo pastel. O conforto visual no pode ser descurado. Cores complementares como amarelo/azul e vermelho/verde so possibilidades que oferecem um contraste alto. Quanto mais prximas forem as cores, menos legvel o texto e maior ser o tipo de letra necessrio. Quando o fundo mais escuro que o texto, as letras devem ser maiores de forma a combater a iluso de que a tamanho da letra menor do que aquilo que de facto.

23

Exemplo.com Legibilidade Contraste Contacto

O esquema de cor da barra de navegao no precisa de ter um contraste grande, basta um mdio-contraste desde que o tamanho da letra no seja demasiado pequeno. Quando se escolhe a cor para um texto deve ter-se em conta a luminosidade. Cores com uma luminosidade idntica no so uma boa escolha para um texto. No entanto essas cores prximas a nvel de contraste podem ser usadas numa barra de navegao j que a o tipo de ateno requerida diferente do que a ateno exigida na leitura de um texto longo. Em mensagens de alerta a melhor opo o fundo vermelho com texto branco. O amarelo e o negro so uma combinao igualmente chamativa mas mais esttica. ALERTA ALERTA

COR

Ainda no que respeita cor, vale a pena voltar a falar das hiperligaes. O azul universalmente reconhecido como um link no explorado e o violeta como um link j visto. Qualquer alterao a este esquema pode levar a confuses7. 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.
7

O azul tpico das hiperligaes no resulta nem com o castanho, nem com o verde. Neste caso usado um azul menos brilhante.

No usar muitas cores na mesma pgina ou at no mesmo site. Contrastar o texto e o fundo (alto contraste para textos longos) Alertas texto branco sobre fundo vermelho

24

RECOMENDAES

Os espaos em branco melhoram a legibilidade dos textos, evitando um aspecto maudo e compacto. Estes espaos so no s uma mais-valia esttica, como uma mais-valia funcional. Ningum tenha a veleidade de pensar que toda a mancha grfica da pgina vai ser lida. Estes espaos vazios dirigem a ateno do utilizador para a informao realmente importante, fazendo com que a composio global da pgina tenha de facto um sentido.

No remover o sublinhado da hiperligao Utilizar as cores convencionais para assinalar os links e os a links visitados Se for mesmo imprescindvel alterar o esquema de cores, manter uma cor brilhante para links no visitados e uma cor apagada para links j visitados Evitar links quebrados (linkrot)

25

3.6 EVITAR! PERIGO DE MORTE! IMPORTNCIA DOS LINKS

Existem dois erros crassos e desastrosos no que diz respeito usabilidade, um o alterar da cor das hiperligaes o outro o esconder o boto de retrocesso. No que concerne aos links, especialmente grave tendo em conta que as hiperligaes so um dos smbolos da rede. Esconder os links ou modificar as suas cores convencionais ir contra os princpios fundamentais da internet e condicionar movimentao do utilizador. Pesquisas mostram que os utilizadores muitas vez olham para a pgina procura de ttulos ou hiperligaes em vez de lerem efectivamente o texto. Se a cor for diferente do habitual ou se a hiperligao no estiver sublinhada a compreenso/ apreenso global seriamente prejudicada. Em relao s hiperligaes, existem erros de usabilidade relativamente comuns. O primeiro este: Para saber mais sobre Alexandre Magno clique aqui (click here) em vez de: Para saber mais sobre Alexandre Magno O segundo erro tem a ver com links que quando clicados redireccionam-nos para um contacto e no para uma pgina. Quando est a ler um texto e encontra um nome destacado por uma hiperligao, o utilizador quer saber mais informaes sobre essa pessoa e no deseja obrigatoriamente contact-la. Por exemplo se est a ver quem que construiu a pgina e encontra o nome Jlio Silva o esperado que a hiperligao o leve para o curriculum do Jlio e no para o sua morada de e-mail. a

26

No abandonando ainda questo dos links, refira-se que os links quebrados (linkrot) do uma pssima imagem do site, demonstrando uma enorme falta de profissionalismo. De nada adianta criar links para pginas em construo (todos os bons sites esto sempre em construo) e quando se criam links para pginas externas ao site vale a pena verificar regularmente se esses links esto activos para que o utilizador no esbarre com a frustrante mensagem de pgina no encontrada. Para terminar, note-se que em lojas online a mudana de cor em links j cliclados (nomeadamente na descrio de produtos e nos preos) no se justifica.

IMPORTNCIA DOS BOTES DE RETROCESSO

O outro erro crasso o esconder do boto de retrocesso8. A web encoraja a liberdade de escolha. Esconder um boto que permite ao utilizador recuar e procurar outro caminho uma violao das regras que cria uma enorme sensao de desconforto. No vale a pena tentar. Uma das bandeiras da usabilidade o aumento do sentido de controlo e de liberdade. bom controlar a mquina e saber que no estamos a ser controlados e enganados por ela. O esquema de navegao alavanca que faz com que o site resulte ou no resulte. ele que permite a sensao de domnio, de poder, de liberdade de escolha. esta a filosofia da rede: liberdade e no prender o utilizador. Provavelmente isto s far que ele, quando conseguir sair, evite o site.

O boto retrocesso o segundo recurso mais utilizado da rede, s ultrapassado pelas hiperligaes.

27

3.7 FLASH

O flash permite efeitos fantsticos e d uma noo mais aproximada do que a interactividade realmente , no entanto s vale a pena ser usado quando realmente eficaz e rpido. O grande problema do flash o tempo e as barreiras que coloca recolha de informao rpida. Usar o flash em algumas circunstncias equivale a ler a agenda telefnica toda para encontrar um nmero de telefone ou subir do primeiro andar at ao trigsimo carregando em todos os andares! Segundo Nielsen, os utilizadores evitam tudo quanto lhes parea complicado, a soluo simples, mesmo que esteja a ser utilizada uma aplicao flash avanada, melhor no informar o utilizador. Quanto mais comum parecer a aplicao, menos resistncias ele oferecer. Exibir poderio tecnolgico no boa poltica, sendo muito mais eficaz um link que indique claramente o que que a aplicao faz do que dizer ao utilizador que se trata de uma aplicao interactiva em flash. A regra de ouro combinar o Flash com outras tcnicas e formatos como o DHTML, o MP3, imagens JPG e GIF, pois o flash apenas e to-somente uma ferramenta que pode ser til na melhoria do esquema de navegao atravs de pequenos pop-up ou com pequenas explicaes (help functions). Usabilidade dar rpida e eficazmente ao utilizador aquilo que ele procura e o flash nem sempre permite isso. Os botes mais convencionais, mesmo sendo pouco estticos, so universalmente reconhecidos ao contrrio daquilo que se passa com muitas solues flash. A soluo passa por moldar os botes em flash de forma que o esquema de navegao seja facilmente identificado. O boto de retrocesso tambm no grande ajuda no Flash, uma forma de contornar isto integrar um boto de retrocesso no prprio filme de flash. O flash no permite bookmarks (a bookmark, quando usada, marca o momento inicial do filme flash). Para facilitar o bookmarking de partes especficas do Flash necessrio

28

fragmentar o filme em vrios segmentos, o que alm de agilizar o site, facilita a actualizao de partes do filme. Uma das vantagens (pouco explorada) do flash a opo de impresso (Print Option) que permite enviar contedos especficos directamente para a impressora, evitando a publicidade.

Flash, modo de usar

sequncias rpidas

TESTES DE USABILIDADE9 Um teste de usabilidade visa medir, quantificar a usabilidade do site. Eis algumas coisas que so passveis de medir num teste de usabilidade: 1. Tempo que leva a complementar uma tarefa; 2. Tempo que leva a completar a tarefa dois dias mais tarde; 3. Nmero de enganos por tarefa;

Em www.userdesign.com est disponvel uma quadro-sinptico onde so analisadas as vantagens e as desvantagens dos diferentes modos de medir a usabilidade.

mostrar como sair da aplicao ou como avanar manter o menu bem visvel mostrar claramente qual a funo de cada boto evitar introdues animadas em flash mas se forem usadas dar destaque ao boto skip intro

29

4. Nmero de enganos por minuto; 5. Nmero de utilizadores a cometer o mesmo erro.

Existem diversas formas de avaliar a usabilidade. Os testes de usabilidade baseiam-se na observao do utilizador em interaco com a interface em causa. O responsvel pelo teste pode apenas observar (exposto ou no) como o utilizador usa o produto, solicitando que explique o que est a pensar em voz alta e registando seu comportamento. Pode tambm preparar um roteiro de aces para o utilizador executar. Mtodos h que, usando tecnologia e equipamento mais avanados, registam o movimento dos olhos do utilizador, procurando assim perceber se o uso do site feito de acordo com as expectativas. Uma outra forma de trabalhar a usabilidade atravs do Participatory Design (design participado) que uma espcie de brainstorming onde participam os vrios intervenientes no processo (utilizadores, designers, programadores). Os focus groups so uma das formas mais populares (e mais caras) de avaliar a usabilidade de um site. O ambiente de um focus group o ideal (pelo menos aparentemente) para se perceber o que que agrada ou desagrada aos utilizadores. Os focus groups podem ser teis em determinadas situaes, mas podem tambm gerar grandes malentendidos. Num famoso estudo, teve-se uma conversa prvia com um focus group sobre como um site deve ser, tendo-se concludo que elementos como o flash so mais valias na medida em que captam a ateno do utilizador. Curiosamente, os elementos deste focus group em contexto de uso ignoraram as animaes e evitaram a todo o custo o flash! Um estudo de Nielsen10 indica que com os focus groups ficamos distanciados trs nveis da realidade, porque: 1. os utilizadores em norma dizem o que acham que o coordenador do teste quer ouvir ou aquilo que socialmente aceite; 2. os utilizadores dizem aquilo que acham que fizeram (mas a memria falvel);
10

www.useit.com

30

3. quando os utilizadores dizem o que fizeram j esto a racionalizar o facto e omitem, inadvertidamente, dados. A melhor maneira de avaliar a usabilidade de um site observando utilizadores reais e acompanh-los na execuo das tarefas. o mtodo mais barato, mais simples e mais fidedigno. Cinco utilizadores, executando pequenos testes orientados, bastam. Aps aplicar o teste para o primeiro utilizador e registar as avaliaes, os conhecimentos sobre os problemas de usabilidade da aplicao atingem cerca de um tero (1/3) do total.

CONCLUSO Quando se escreve sobre usabilidade, a sensao de que os assuntos so sempre abordados pela rama uma constante. Muitos outros assuntos poderiam ser tratados como a importncia do cancelamento fcil das newsletters ou a importncia de facilitar a impresso de informao. O ideal e tambm o mais complicado o compromisso entre a simplicidade extrema proposta por Jacob Nielsen e a originalidade e criatividade essenciais para compor um projecto de site considerado ptimo. Certamente sites mais simples possuem usabilidade superior, mas perdem no quesito visual (exemplo www.google.com) mas um visual carregado, retira objectividade e afasta o utilizador. imprescindvel testar a usabilidade do site. S sabendo o que leva um visitante a ficar ou a abandonar o site, este poder ser melhorado. 31

Para finalizar deixamos uma lista com algumas regras que o podero ajudar a agilizar o seu site.

Colocar o nome e/ou logtipo em todas pginas; Incluir um motor de procura nos sites com mais de 100 pginas; Cabealhos e ttulos de pgina simples e sugestivos que traduzam claramente o seu contedo; Muita informao e pouco texto (conciso); Pr a informao menos relevante em pginas secundrias com a tcnica do hipertexto; Utilizar, nas pginas principais, fotografias de produtos em tamanho reduzido (thumbnail), associando-lhe depois, um link para uma pgina secundria onde o utilizador possa ver, com mais pormenor, o produto desejado e outras caractersticas;

Associar a cada link um ttulo (link title) para que os utilizadores saibam para onde vo ser encaminhados; Garantir a acessibilidade de todas as pginas importantes a utilizadores com inaptides, especialmente aqueles com deficincias de acuidade visual; Actualizar contedos e servios teis constantemente; Destacar as novidades; Agilizar o carregamento pgina (pginas que demoram a carregar podem ser abandonadas antes de exibidas); Utilizar tecnologia compatvel com a maioria dos computadores (evitar utilizar tecnologias muito recentes e ainda pouco difundidas.); Manter informao antiga quando relevante; Evitar abuso no uso de propaganda, links e cores;

O SITE DEVE SER UM FERRARI:

Fcil de usar
32

Exclusivo para o meio online Relevante para as necessidades do utilizador Rpido a carregar Actualizado Rico em contedos Interactivo
Alguns sites de referncia:

http://www.usabilidade.com/ http://www.usabilidade.net http://www.simplicidade.com http://www.usability.serco.com/ http://www.useit.com/ http://usableweb.com/ http://budugllydesign.com/ http://www.webpagesthatsuck.com http://www.users.nac.net/falken/annoying/main.html http://www.webreference.com/authoring/design/usability/interview/ http://www.pantos.org/atw/speed.html http://www.mundocor.com.br/ http://www.internetworld.com/ http://www.emarketnewsletter.com/ http://www.websitetips.com/design/ http://psychology.wichita.edu/ http://www.humanfactors.com/ http://www.grito.com.br/artigos/simonson001.asp http://www.nacse.org/NEESweb/usability/page_design.html http://www.humanfactors.com/downloads/feb99.asp

33