Escolar Documentos
Profissional Documentos
Cultura Documentos
Usabilidade2 PDF
Usabilidade2 PDF
Abstract
This paper presents a discussion about the problems and challenges posed by the design
and development of web sites from the viewpoint of usability. The analysis presented use
some web sites developed by the author as example cases. Although usability has been
applied in software testing since the early 1980's, its use in the web is very recent and
presents particular, complex characteristics. Different from traditional software, the web is a
new communication medium which has specific features for remote data access, dynamic
information publishing, a graphical user interface which change according to where it is
displayed, fast adoption of new technologies, among others. In this scenario, it is difficult to
define the format for a graphical interface and find out how to best use this new medium,
aside from previewing how this new language will evolve in the future so that it is not
underused. The web usability has brought new questions. Its importance is growing lately
because a bad web interface can be much more expensive than a bad software interface.
Key Words
Usability, Design, Web
Resumo
Este artigo apresenta uma discusso sobre os problemas e desafios para o projeto e
produo de sites na web sob a tica da usabilidade. A anlise toma como exemplo alguns
web sites desenvolvidos pela autora. Apesar da usabilidade ser aplicada desde o incio da
dcada de 80 em testes de software, a sua aplicao web bastante recente e apresenta
caractersticas prprias e complexas. diferena dos software tradicionais, a web constitui
uma nova mdia de comunicao e tem caractersticas particulares de acesso remoto a
dados, publicao dinmica de informaes, interfaces grficas que mudam com o lugar
exibido, rpida absoro de novidades tecnolgicas, entre outras. Neste cenrio, muito
difcil definir o formato de uma interface grfica e descobrir como utilizar a nova mdia da
forma mais adequada, quanto mais prever como ser a evoluo desta nova linguagem para
poder utiliz-la em toda sua potencialidade. A usabilidade aplicada `a web trouxe novos
questionamentos e a sua importncia vem crescendo. Uma interface grfica na web, pobre
em usabilidade, pode custar muito mais caro do que se mal feita em software tradicional.
Palavras Chave
Usabilidade, Design, Web.
1
Introduo
A web foi criada em 1990, com a inveno da linguagem HTML por Tim Berners Lee,
no Laboratrio CERN, na Sua. Em 1993 surgiu o primeiro browser multimdia: o Mosaic. A
partir de ento, muitas novidades tem surgido na web em um ritmo frentico. Em poucos
anos, o nmero de servidores web cresceu exponencialmente chegando `a casa do milho.
A web tornou-se rapidamente um poderoso meio de divulgao de informao. Uma
informao publicada em HTML pode ser acessada em poucos minutos por pessoas em
qualquer parte do mundo, em diferentes plataformas (PC, Mac, Sun, Silicon Graphics,...).
Conforme [NIELSEN,ww], alm dos testes com usurios, existe outra forma
(complementar) de avaliao da usabilidade de um site: a anlise heurstica do mesmo. Na
anlise heurstica, um grupo de especialistas procura os pontos em que a interface vai
contra os princpios aceitos de usabilidade (as heursticas). O resultado da avaliao
heurstica dever ser uma lista dos problemas de usabilidade na interface, com referncia a
algum princpio de usabilidade desobedecido por algum aspecto dela. A avaliao heurstica
serve numa primeira aproximao, para testar a usabilidade do site. particularmente til
em casos em que testes com usurios no so possveis de realizar (por exemplo, em web
sites pessoais, onde o indivduo no tem recursos econmicos ou de outra natureza, para os
2
testes). Segundo Nielsen, mais rpido, barato e fcil de realizar. Princpios de usabilidade
podem ser encontrados reunidos em guias de web design (h bons guias na web, como
http://www.sun.com/styleguide/ ).
Existem muitos desafios para o projeto e produo de sites. Por este motivo, difcil
gerar testes de usabilidade na web. Testes e mtodos de usabilidade normalmente
aplicados a software, podem no se aplicar web, como mostra a experincia em
[SPOOL,99].
Tudo isto faz com que a exibio de uma pgina possa mudar muito de uma
plataforma a outra, de modo um tanto aleatrio. Os prximos sub-itens abordam estes
fatores com mais detalhe.
A figura 1 exibe uma pgina web que ser utilizada como pgina de controle para
poder comparar os exemplos ilustrados pelas figuras a seguir. Nela, o browser tem
configurada a fonte padro em 12 pontos e a tela do computador est configurada em
800x600 pixels . Esta pgina est em www.lsi.usp.br/~martinez/, porm, a verso online
pode ser modificada com o tempo.
O tamanho da letra, do texto digitado diretamente no cdigo HTML, pode ser exibido
diferente de um browser para outro. Os browsers permitem que o usurio altere o seu
padro de exibio do tamanho da fonte de texto (no Netscape, baixo o menu
Edit=>Preferences; para o I.Explorer, baixo o menu View=>Options). Por exemplo: a figura 2
ilustra a mesma pgina da figura 1, aps configurar o browser Netscape para exibir a fonte
em 20 pontos (o padro era 12 pontos). Percebe-se que ao aumentar o tamanho da fonte, o
menu de links direita da pgina, fica mais "baixo". O item "web authoring" se sobrepe
3
faixa azul mais clara do fundo e praticamente perde a legibilidade. Pode se observar que o
projeto original prev o contraste das letras azul-claro do menu de links com o fundo azul
escuro da pgina. Este projeto alterado atravs da mudana da exibio do tamanho de
letra no browser.
FIG. 1 Pgina de controle. Fonte padro FIG. 2 Mesma pgina exibida por um
tamanho 12 e resoluo de tela 800x600. browser configurado com tamanho de fonte
20.
O uso de imagens (gif ou png) para inserir texto permite ter um controle maior do
layout grfico de uma pgina, mas traz outros problemas. Muitas imagens podem
sobrecarregar uma pgina em termos de tamanho de arquivo e comprometer assim, a
velocidade de transmisso. Tambm existem problemas semnticos ao criar links em textos
formados por imagens, devido dificuldade de fornecer feedback ao ato de clicar em uma
destas ncoras. Esta dificuldade est sendo superada atravs do uso de implementaes
em linguagens como Java Script ou com o uso de applets Java.
FIG. 3 Mesma pgina exibida por um FIG. 4 Mesma pgina exibida por um
browser configurado para no sublinhar os browser configurado com a cor de fundo
links. cinza.
Por outro lado, em geral, os browsers exibem as ncoras textuais sublinhadas. Este
padro pode ser modificado pelo usurio de modo a que o browser passe a no sublinhar
mais o texto ncora de um link. A figura 3, mostra a pgina de controle aps ter alterado a
configurao do browser para no sublinhar os links. Na falta de ncoras sublinhadas, o
usurio somente pode reconhece-las atravs do contraste de cor ou atravs do feedback do
mouse (na maioria dos browsers, o cursos muda de formato sobre as ncoras, dando uma
pista certeira da existncia do link).
4
No se pode esperar que o usurio descubra links em textos compridos atravs do
feedback do mouse (ele teria que passar o mouse sobre todas as palavras para descobrir
onde se encontram os links !). Por outro lado, pginas que utilizam a cor das ncoras e texto
de modo inconsistente (i.e. distintas cores para as ncoras ou, a mesma cor das ncoras
para ressaltar palavras de um texto), podem trazer ao usurio srios problemas para
identificar a localizao dos elos hipermdia. Por exemplo, na pgina da figura 3 o link
M.L.Martinez (que aparece depois do smbolo de copyright e da data), no facilmente
identificvel. Ele tem uma cor igual ao do texto e diferente cor utilizada pelos outros links
da pgina. Isto constitui um claro problema de inconsistncia no projeto desta interface.
Browsers tambm permitem alterar a exibio da cor de fundo ou substituir por uma
cor, a textura de fundo (formada pela repetio de uma imagem). A figura 4 mostra como
resulta a visibilidade da pgina exemplo, aps configurar o Netscape para mostrar a cor
cinza no background, sobrepondo-se imagem de fundo da pgina. Este tipo de alterao
pode afetar a legibilidade de uma pgina, principalmente se a cor do texto apresenta pouco
contraste com a cor de fundo imposta pelo browser. Tambm pode alterar significativamente
o design grfico (muitas vezes feito por um designer profissional) e, com isto, os objetivos de
marketing ou a identidade visual de uma empresa tambm podem ser prejudicados.
5
FIG. 6 Mesma
pgina em duas
diferentes
resolues espaciais
do monitor.
A figura 7 mostra uma outra pgina criada pela autora, sendo exibida em duas
diferentes resolues de cor do monitor. O desenho da pgina (hoje em
http://www.eca.usp.br), foi criado utilizando mais de 256 cores. Ao ser exibido num monitor
configurado para 256 cores, o browser ajusta as cores do desenho para se encaixarem no
limite de 256. Percebe-se que, nesta resoluo, cores prximas so transformadas na
mesma cor. Isto pode ser observado na faixa horizontal transparente que atravessa todo o
desenho da figura esquerda. A cor desta faixa sobre a paleta e sobre o fundo branco
muda muito pouco. Quando o monitor est em 256 cores (figura direita), estas diferenas
desaparecem e as cores da paleta, da faixa sobre a paleta e, da faixa sobre o fundo branco,
so aproximadas para a mesma cor.
Este fenmeno pode trazer problemas de visibilidade ao modificar certas cores, alm
de alterar o efeito visual do projeto original. Texto sobre uma cor de fundo modificada pode
apresentar pouco contraste, dificultando a leitura. Por outro lado, a reduo de palette
normalmente feita pelo browser segundo o processo de dithering, o que pode introduzir
rudo na visibilidade da interface.
Para evitar estes problemas melhor projetar pginas com at no mximo 256
cores. Ou melhor, utilizando uma das 216 cores que formam a paleta segura para browsers
[WEINMAN,96]; somente com ela evita-se o efeito de dithering no ajuste da palette feita pelo
browser. Certamente isto difcil em sites que utilizem imagens fotogrficas, efeitos de
sombreado, degrads ou efeitos de transparncia. No podendo evitar estes efeitos ou o
uso de imagens fotogrficas, uma boa prtica alertar o usurio com relao s condies
de melhor visibilidade daquela pgina, em particular, o uso de monitores configurados com
profundidade de bit (resoluo de cor) maior ou igual a 16 bits (65 mil cores).
6
Para finalizar, deve-se observar que usurios espalhados no mundo inteiro podem
ter seus browsers configurados de forma diferente. Isto faz com que seja muito difcil para
um designer ter controle sobre como ser exibida uma pgina. A impresso que d que a
interface muda aleatoriamente de usurio para usurio.
Por outro lado, numa mesma plataforma de hardware no h uma calibrao precisa
entre monitores. Existem variaes de cor entre sistemas mesmo que tenham idnticos
sistemas operacionais e hardware. O problema de falta de calibrao piorado, entre
plataformas, pelas diferenas de fator gama. O fator gama define o brilho e o contraste da
tela do computador. Computadores PC apresentam as imagens tipicamente mais escuras
do que os computadores Macintosh ou Silicon Graphics, devido s diferenas dos fatores
gama nativos a cada plataforma [WEINMAN,96]. Pginas web tambm podem ser vistas
atravs de monitores de televiso que so calibrados de modo diferente aos computadores.
7
plataformas. A adoo desta paleta garante ao designer um controle maior sobre o layout
grfico da pgina que ser exibida ao usurio. Sempre bom checar uma mesma pgina
em outras plataformas para verificar se to legvel quanto o esperado.
A fonte de texto exibida por uma pgina HTML tem que estar instalada na plataforma
de hardware que a exibe. Se uma pgina HTML projetada para exibir uma fonte do tipo
Arial ou Ottawa, o computador que a exibe tem que ter estas fontes instaladas nele.
Fontes incomuns so utilizadas por designers para chamar a ateno do leitor para
um determinado ttulo ou passagem, obtendo efeitos de contraste. Para que o usurio
observe o efeito desejado pelo escritor, estes textos podem ser implementados atravs de
imagens, lembrando que muitas imagens podem sobrecarregar a pgina e comprometer a
velocidade, alm do problema de feedback apontado anteriormente.
O HTML surgiu em 1990 e tem evoludo desde ento. Novos browsers e verses de
browsers foram lanados para acompanhar a evoluo da linguagem HTML. Por exemplo, o
Netscape 2.0 no implementa a cor de fundo em tabelas ( <TD BGCOLOR="#RRGGBB"> ).
Pginas que utilizem este layout, no sero exibidas nesta verso antiga do Netscape. Por
outro lado, as verses mais recentes dos browsers Netscape e Internet Explorer,
implementam as caractersticas dinmicas da linguagem HTML 4.0 e as estruturas de folhas
de estilo em cascata (CSS). Contudo, pginas com estes efeitos no podem ser
visualizadas por verses mais antigas dos browsers.
8
O espao de informao complexo.
Um site comercial que procure atrair o usurio para um determinado produto precisa
adotar estratgias que tentem responder no somente incerteza dos movimentos do
usurio, mas tambm incerteza sobre o que ele pensa. Trata-se de uma problemtica
complexa que lembra [MORIN,90] quando afirma que "A complexidade atrai a estratgia.
S a estratgia permite avanar no incerto e no aleatrio. A arte da guerra estratgica
porque uma arte difcil que deve responder no s incerteza dos movimentos do inimigo,
mas tambm incerteza sobre o que o inimigo pensa, incluindo o que ele pensa que ns
pensamos. A estratgia a arte de utilizar as informaes que aparecem na ao e de estar
apto para reunir o mximo de certezas para enfrentar a incerteza." ( Op.Cit. pag. 191).
A linguagem da nova mdia est sendo descoberta e, para complicar, mutvel (vai
evoluindo com a tecnologia e a experincia).
9
Concluso.
Existem muitos desafios para o projeto e produo de sites, nunca vistos antes na
produo de software. Nas linhas acima, procurou-se mostrar a complexidade da aplicao
da usabilidade na web. Por falta de espao, optou-se por no abordar mais um aspecto
deste problema que o tamanho dos arquivos, a largura de banda das conexes e como
influenciam a velocidade de transmisso. Contudo, percebe-se que um mesmo site pode se
apresentar de formas totalmente diferentes a distintos usurios. Existem heursticas e
orientaes para melhorar este problema, mas nenhuma o resolve definitivamente.
Uma interface web tem muitos parmetros que podem ser levados em conta em
testes de usabilidade: legibilidade, facilidade de encontrar a informao, atrativo visual, entre
outros. Testes de usabilidade [SPOOL,99] [NIELSEN,97a] tem procurado checar um ou
outro parmetro, numa mesma plataforma, utilizando um mesmo browser (para evitar as
variaes de exibio da interface entre plataformas). Porm, as possibilidades de variao
na exibio de uma mesma pgina e suas consequncias nos resultados dos testes no
foram levantados.
Este trabalho procurou trazer alguma luz sobre estes pontos e alertar para esta
problemtica. A usabilidade na web um campo em plena expanso devendo reservar
muitas novidades para o futuro prximo.
Bibliografia
[MORIN,90] MORIN, Edgar. Cincia com conscincia. Editora Bertrand Brasil, 1998.
[Tt. original: Science avec Conscience - Libraririe Arthme Fayard 1982]
[NIELSEN,97a] NIELSEN, Jacob. How users read on the web. Coluna Alterbox, 1/Out/97.
Texto online: http://www.useit.com/alterbox/9710a.html
[NIELSEN,97b] NIELSEN, Jacob. Changes in web usability since 1994. Coluna Alterbox,
1/Dez/97. Texto online: http://www.useit.com/alterbox/9712a.html
[NIELSEN,99] NIELSEN, Jacob. Web usability: past, present and future. 8/Ago/99. Texto
online: http://webword.com/interviews/nielsen.html
[RUBIN,94] RUBIN, Jeffrey. Handbookof Usability Testing: how to plan, design and
conduct effective tests. John Wiley & Sons, Inc. 1994.
[SPOOL,99] SPOOL, Jared. et al. Web site usability: a designers guide. Morgan
Kaufmann Publishers, Inc. So Francisco, California. 1999. [web site: www.mkp.com]
[WEINMAN,96] WEINMAN, Lynda. Designing web graphics (2) : how to prepare images
and media for the web. News Riders Publishing, Indianapolis, IN, USA. 1996.
10