16 Simpsio Nacional de Geometria Descritiva e Desenho Tcnico V International Conference on Graphics Engineering for Arts and Design Santa

Cruz do Sul, RS - Brasil - 08 - 11 Setembro de 2003

UM MTODO DE WEB DESIGN BASEADO EM USABILIDADE

Maria Laura Martinez1
Universidade de So Paulo, Brasil Departamento de Jornalismo e Editorao - Escola de Comunicaes e Artes Departamento de Sistemas Eletrnicos - Escola Politcnica

RESUMO Como atestam numerosos estudos de usabilidade, perde-se muito com web sites mal feitos. Pode parecer fcil desenvolver um web site: qualquer um com ferramentas modernas de edio HTML pode publicar informao. Contudo, fazer um site eficiente e profissional, que realmente atenda ao usurio, uma tarefa complexa. A Web introduziu uma complexidade nova para a usabilidade nunca vista antes no software tradicional. A usabilidade em web sites uma rea importante, em plena expanso, com caractersticas particulares que dificultam sua pesquisa. Este artigo apresenta um mtodo para desenvolvimento de web sites baseado em engenharia de usabilidade, tema central da tese da autora. O mtodo aborda o web design respeitando a percepo do usurio, otimizando a comunicao e atingindo o pblico de forma mais eficiente. Palavras Chaves: Web design; usabilidade; metodologia; engenharia de software. ABSTRACT As demonstrated by numerous usability studies, a lot is lost with poorly developed web sites. It seems to be easy to develop a web site: anyone with modern HTML edition tools can publish information. However to make an efficient and professional site is a complex task. The Web introduced a new complexity for the usability, never seen before in traditional software. Web site usability is an important growing research area with particular characteristics that make its study difficult. This paper presents a method for web sites development based on usability engineering, central subject of the author's thesis. The method approaches web design respecting the user's perception, optimizing the communication and reaching the public in a more efficient way. Key-words: Web design; usability; methodology; software engineering.

E-mail: martinez@lsi.usp.br

Introduo

A palavra design abrange mais do que a idia da representao pictrica ou de leiaute grfico. Engloba todo o processo no qual se insere a representao ou o desenvolvimento do leiaute, processo este que no pode ser dissociado do elemento humano que o concebe, que o produz ou que se relaciona com o seu resultado. 1.1 O problema A HTML uma linguagem de descrio de pginas e no de programao, o que a torna relativamente fcil de utilizar. Hoje existem ferramentas que permitem compor com facilidade pginas Web, sem necessidade de se conhecer o cdigo. Estas ferramentas, apesar de permitirem a produo de pginas simples, muitas vezes dificultam a implementao de um leiaute mais elaborado, impedindo ao designer, desconhecedor da HTML, ter um controle maior do visual da sua obra. Outras vezes inserem um grande volume de cdigo esprio, que aumenta o tamanho da pgina (em bytes) e torna sua visualizao mais lenta. Outras ainda, inserem cdigo das ltimas verses da linguagem HTML, somente interpretado pelos browsers mais novos, prejudicando uma parcela do pblico que ainda utiliza navegadores de verses mais antigas. Por outro lado, saber fazer uma pgina ou um site no garante o sucesso na comunicao da informao ou do uso da aplicao, como constataram diversos autores. Conforme ROCHA (2000): "Dados disponveis apontam que em 1998, cerca de trs bilhes de dlares deixaram de ser ganhos na Web norte-americana por causa de design mal feito de pginas, que dificultava a compra em vez de facilitar. [a IBM] ...constatou que o recurso mais popular em seu site era a funo de busca, porque as pessoas no conseguiam descobrir como navegar, e o segundo mais popular era o boto ajuda. A soluo foi um amplo processo de redesign, envolvendo centenas de pessoas e milhes de dlares. Resultado: na primeira semana depois do redesign, em fevereiro de 1999, o uso do boto de ajuda caiu 84% enquanto as vendas aumentaram 400%. Para NIELSEN (1999), nem sempre o meio est sendo usado para facilitar a vida do usurio e no raro ver pessoas frustradas ou perdidas em sites mal feitos. Sites mal projetados tm conseqncias de grande impacto que trazem perda de dinheiro e de credibilidade. Sites comerciais perdem seus clientes frustrados, antes que efetuem a compra. Leitores desnorteados em sites noticiosos o abandonam antes de encontrar a informao procurada. Alunos em sites educacionais mal projetados no conseguem atingir seus objetivos de aprendizagem. E pessoas frustradas migram com facilidade ao site do concorrente, que est apenas a um clique do mouse. A questo que surge : como fazer um web site eficiente que realmente atenda ao usurio? 1.2 A Usabilidade A norma ISO 9241-11, define a usabilidade como: a efetividade, a eficincia e a satisfao com que usurios especficos atingem objetivos especficos em ambientes particulares. Mesmo sendo um conceito conhecido desde a dcada de 80, somente nos ltimos anos a palavra 'usabilidade' comeou a ser melhor investigada e tornou-se crtica com o surgimento da Web. Conforme NIELSEN (1999), as conseqncias de uma interface grfica pobre em usabilidade so muito piores quando esta implementada na Web do que quando implementada em software tradicional. Curiosamente, apesar da Web ter popularizado a usabilidade, acrescentou-lhe novos e grandes desafios. A Web constitui um novo meio de comunicao e tem uma
2

linguagem prpria construda sobre um espao hipermdia complexo, com caractersticas particulares de acesso remoto a dados, publicao dinmica de informaes, interfaces grficas mutantes, velocidades de conexo variveis, rpida absoro de novidades tecnolgicas, entre outras (MARTINEZ 2000). Em projetos de software, a usabilidade mais eficiente quando aplicada logo no comeo do ciclo de desenvolvimento. Os primeiros 10% do processo de design determinam 90% do produto e quando so tomadas as decises-chave do projeto. Conforme GILB (1988), no corrigir um problema de usabilidade na fase de design custa 10 vezes mais se o sistema est em desenvolvimento e 100 vezes mais se o sistema j foi lanado. Entre as principais razes para adotar a usabilidade desde cedo em um projeto podese citar: reduo de erros e de procedimentos de correo; reduo do tempo de operao da interface; reduo de custos de treinamento, de manuteno e de suporte ao usurio e, como conseqncia, o aumento da eficincia e da efetividade da interface para o seu pblico. 1.3 procura de solues O processo genrico de desenvolvimento hipermdia, tem sido abordado por alguns mtodos como HDM: Hypertext Design Model (GARZOTTO, 1993), RMM: Relationship Management Methodology (ISAKOWITZ, 1995) y OOHDM: ObjectOriented Hypertext Design Model (SCHWABE, 1995). Estes mtodos requerem que o domnio a aplicao seja abstrado em forma de entidades (ou classes) e de relaes e, segundo LOWE (1999), tendem a ser mais prescritivos, no sentido em que guiam o processo mas no fornecem indicaes de como adapt-lo aos diferentes domnios de aplicao. Lowe et al. propem um modelo de referncia para o desenvolvimento hipermdia que pode ser instanciado tanto como prescritivo quanto descritivo, no sentido em que tambm descreve o processo. MAYHEW (1999), apresenta um modelo descritivo do processo genrico de desenvolvimento de software em Engenharia de usabilidade que consta de trs etapas: a anlise de requisitos, o design/testes/desenvolvimento e a instalao. Mayhew faz algumas breves observaes sobre as possibilidades de aplicao do mtodo para a Web, mas estas no so desenvolvidas nem especializadas. Por outro lado, os outros mtodos de desenvolvimento de aplicaes hipermdia, listados anteriormente, no so centrados em usabilidade nem levam em conta as particularidades do processo de desenvolvimento Web. A seguir, so apresentadas as principais caractersticas do mtodo de desenvolvimento de web sites baseado em usabilidade proposto como tese da autora que aperfeioa e enriquece o mtodo publicado em MARTINEZ (2001). O mtodo foi utilizado e avaliado com sucesso no projeto do web site da Agncia Universitria de Notcias do curso de Jornalismo da USP2. Os resultados deste estudo de caso (muito extensos para este artigo), esto documentados em MARTINEZ (2002). O mtodo estende e especializa para a Web o mtodo de MAYHEW (1999). Adota o ciclo estrela de HIX (1989), baseado em avaliao de usabilidade, pelo dinamismo e maior flexibilidade que propicia a todo o processo. Por fim, baseia-se na experincia da autora no desenvolvimento de web sites, rea na qual trabalha desde 1995.

O mtodo

O diagrama da figura 1, a seguir, apresenta o mtodo proposto. Os retngulos representam as tarefas, ou mdulos, do ciclo de Engenharia de Usabilidade. As setas representam a ordem mais provvel de realizao de tarefas. Algumas das seqncias de
2

http://www.lsi.usp.br/aun

tarefas so iterativas e os lugares onde estas iteraes normalmente ocorrem so representados por setas pontilhadas retornando a pontos anteriores do ciclo de vida. No mtodo proposto, os principais grupos foram rotulados por um retngulo deformado em onda (e.g. 'Anlise de Requisitos', 'Especificao de Contedo', 'Especificao de Layout', e assim por diante). A seta pontilhada na horizontal, entre as etapas de Especificao de Contedo e de Implementao indica um atalho para o projeto de web sites simples. O mtodo proposto distingue trs etapas principais: o Planejamento (que contm a anlise de requisitos, as especificaes de contedo, de leiaute grfico, de implementao e de distribuio); a Implementao (que formada pelo 'dadoduto' de implementao) a Distribuio. (que formada pela publicao e pela divulgao) Todas as etapas so permeadas e intermediadas por avaliao de usabilidade3.
[MARTINEZ,01]

Anlise de Requisitos Anlise de Plataforma Cliente

Distribuio Planejamento
Guidelines e Princpios de Webdesign Publicao Instalao e configurao server-side Anlise de Sites similares Anlise funcional Anlise de necessidades Especific. distribuio Restries acesso/ segu. Estimativa de Demanda e de Plataforma servidora Especifica manuteno Especifica atendimento Estratgias divulgao Avaliao
tudo resolvido? atende a todas as funcionalidades?

melhorias Divulgao

Anlise de Tarefas Perfil do Usurio

Estratgias Estatsticas Feedback

tudo resolvido? FEITO

Metas de Usabilidade Guia de Estilo

Manuteno Atend. pblico

Especific. de contedo Planejamento de Tarefas Definio de Metforas Arquitetura Informao Maquete Avaliao Iterativa
elimina os principais defeitos?

Especific. implement Especific. de layout Anlise client side e server side

Implementao
Prototipao HTML Coleta e criao de contedo Preparao dos dados Mapeam.Arquitet. de Informao Lapidao Avaliao Iterativa
atende s metas de usabilidade?
Guia de Estilo

Padres de Design Restries implement. da Tela Prottipo Guia ArmazenaGrfico de mento Estilo Guia Avaliao lgico de Iterativa Estilo
atende s metas de usabilidade? Guia de Estilo

Figura 1: As etapas do mtodo proposto.

Breve descrio das etapas do mtodo4

3.1 Anlise de Requisitos O objetivo da Anlise de Requisitos fazer o modelamento das metas de usabilidade do web site, em funo das anlises do usurio, da aplicao e de princpios gerais de web design.
3

Para uma descrio de tcnicas de avaliao de usabilidade consultar (WINCKLER,1999), (NIELSEN,1993), (RUBIN,1994), (IVORY,2001), (MAYHEW,1999) e (RAVDEN,1989). 4 Para informaes mais detalhadas aconselha-se a consulta de MARTINEZ(2002).

A realizao de cada mdulo do mtodo intermediada por algum tipo de avaliao, muitas vezes embutida na prpria tcnica de execuo. Assim, a anlise de perfil e de tarefas do usurio pode ser realizada atravs de entrevistas, questionrios, avaliaes remotas ou testes em laboratrio. A anlise de plataforma cliente baseada no feedback do usurio fornecido em resposta a questionrios. O mesmo ocorre com a anlise funcional e de necessidades da aplicao, baseadas no conhecimento de especialistas e na anlise de sites similares, baseada em avaliao heurstica e emprica dos mesmos. Recomendaes e princpios de web design, como as 10 heursticas de NIELSEN (1994), so incorporados ao projeto e tambm guiam a inspeo de usabilidade de sites similares. No fim desta etapa so estabelecidas metas de usabilidade baseadas nos cinco atributos de NIELSEN (1993)5, que guiam o restante do desenvolvimento. Em projetos de web sites de grande porte, todas as decises e resultados de cada etapa do mtodo devem ser incorporadas documentao de um Guia de Estilo que dar homogeneidade e consistncia ao trabalho da equipe. 3.2 Especificao de contedo A etapa de especificao de contedo preocupa-se em melhorar o modelo de tarefas do usurio, incorporando as funcionalidades definidas anteriormente e tornando mais eficientes suas prticas de trabalho. Preocupa-se tambm em aproximar ao seu modelo mental (sobre como realizar tarefas), o modelo conceitual da aplicao que ser definido em termos da reengenharia de tarefas, da especificao de metforas e de arquitetura de informao. No fim desta etapa obtm-se recomendaes de alto nvel sobre as funcionalidades da aplicao, sobre a escolha de metforas e sobre as informaes das principais telas da aplicao. Tambm obtm-se um esboo da rede de ns e links que forma o esqueleto hipermdia do site. Toda a Especificao de contedo independente de plataforma cliente. As metforas so regras genricas de apresentao, que consideram somente o nvel mais alto do design da interface. Somente na prxima etapa de Especificao de layout grfico, a interface receber um design detalhado em sintonia com a anlise de plataforma cliente e com as metas de usabilidade. A avaliao de usabilidade nesta etapa feita sobre os esboos das telas e do esqueleto hipermdia, procurando determinar se esto de acordo com as especificaes do guia de estilo e se os principais problemas conceituais foram eliminados. As tcnicas (e os critrios de avaliao) devem ser escolhidos em conformidade com o tipo de projeto e suas necessidades. 3.3 Especificao de layout A Web introduziu uma necessidade maior de imagem, diferenciao de mercado e marcas corporativas do que no software tradicional. Alguns autores (como BLACK,1997), apontam que uma pgina na Web deve se parecer a um outdoor de estrada no sentido em que deve conseguir brevemente comunicar sua mensagem e deixar sua marca ('a apenas um olhar') quando o usurio est de passagem. Isto porque usurios so infrequentes, tm muitas opes e, normalmente, pouco tempo para explor-las. A habilidade de se trabalhar a imagem desta forma no comumente encontrada em Designers de Interface de Usurio, nem em Engenheiros de Usabilidade. Designers
5

So eles: facilidade de aprendizagem, eficincia de uso, facilidade de memorizao, baixa taxa de erros e satisfao subjetiva.

grficos so mais qualificados para trabalhar a comunicao atravs da imagem e definir a apresentao visual dos modelos de trabalho, o que torna sua participao fundamental nesta etapa do projeto. Esta etapa basicamente se preocupa em definir como ser a apresentao grfica da aplicao, em sintonia com os resultados da anlise de plataforma cliente (e.g. resoluo da tela em pixels, resoluo de cor, fator gama das plataformas, entre outros), de acordo com as metforas escolhidas e com os tipos de telas definidos durante a arquitetura de informao. O resultado um conjunto de prottipos grficos dos principais tipos de pginas do site, que podem ser desenhados com editores de imagens. Somente na atividade de 'Implementao', as pginas sero prototipadas em HTML e os prottipos grficos, desenvolvidos nesta etapa, sero utilizados posteriormente para gerar as imagens (geralmente GIFs), que comporo as telas. Para interfaces simples e que no precisam de um tratamento grfico diferenciado, no h necessidade da prototipao grfica utilizando um editor de imagens, pode-se passar diretamente para a prototipao HTML que caracteriza a atividade de Implementao. A definio de padres de design de tela, refinada iterativamente a partir de avaliao de usabilidade. 3.4 Especificao de implementao Antes da implementao do site planejado nas etapas anteriores, necessrio tomar decises que fazem grande diferena para o sucesso do desenvolvimento. Elas so relacionadas lgica do armazenamento dos arquivos em disco (a organizao dos mesmos em diretrios e subdiretrios e a definio de regras para seus nomes), s restries de implementao e s solues do lado do cliente e do lado do servidor (client-side e server-side), a ser adotadas. As restries de implementao, so muito importantes para garantir o bom funcionamento do sistema em diferentes plataformas cliente, atendendo s diversas demandas de desempenho. Estas podem ser elaboradas com a ajuda de um especialista em web design e conhecedor das tecnologias online. So algumas delas: restries ao formato e tamanho dos arquivos, ao armazenamento em cache (definidas pela data de validade do contedo), e forma de referenciar os links (de forma absoluta ou relativa). Solues do lado do cliente e do lado do servidor (client-side e server-side), devem ser escolhidas cuidadosamente para garantir o bom funcionamento da aplicao online. Programas JavaScript ou Applets so essencialmente executados do lado do cliente, assim como plug-ins; enquanto programas CGI, API's, middlewares (como PHP ou ASP) e Sistemas Gerenciadores de Banco de Gados so executados do lado do servidor. Quando um programa muito solicitado executado do lado do servidor pode sobrecarregar o processamento da mquina ou ainda comprometer a segurana do sistema. Por outro lado, um programa projetado para rodar do lado do cliente pode no encontrar as condies adequadas para ser processado naquela plataforma. 3.5 Especificao de distribuio Nesta etapa devem ser definidas: as restries de acesso e segurana, como ser feita a manuteno, o atendimento ao usurio e as estratgias de divulgao que devero ser adotadas. Em web sites nos quais se espera grande trfego, tambm deve ser feita uma estimativa de demanda do sistema no lado do servidor. Isto permite fazer uma seleo adequada da plataforma servidora a partir da qual ser distribudo o web site e adotar estratgias que diminuam a sobrecarga de processamento. Na estimativa de demanda
6

deve-se analisar que programas rodam simultaneamente, quantos usurios simultneos se espera na pior situao de uso e quais as exigncias de desempenho impostas por este processamento, estabelecendo o quanto de degradao de performance poder ser admitida. As restries de acesso e segurana permitiro garantir a correta distribuio do contedo. Podem ser elaboradas com a ajuda de especialistas em segurana na Internet e devem atender s outras especificaes do projeto. A especificao destas restries utilizada na configurao do servidor Web, na implementao de programas de bloqueio de acesso, de encriptao de dados ou de filtros para robots (i.e. programas indexadores dos mecanismos de busca). Normalmente ao se publicar um site se esquece da importncia de manter as informaes atualizadas e do atendimento ao pblico... e muitos sites que tm potencial para sucesso acabam falindo. Por isto importante de antemo definir estratgias para abordar estas duas questes. Na Internet existem milhes de web sites e esse nmero cresce com o tempo. Um site a mais no ter visibilidade a no ser que adote algumas estratgias simples de divulgao para sua distribuio. So alguns exemplos: solicitar a catalogao por mecanismos de busca, divulgar sua existncia atravs de listas de e-mail, colocar links em outros sites visveis (conhecidos) para o web site em questo, inserir meta-tags de palavras chave e descrio de contedo nas pginas HTML, participar de concursos de web sites conhecidos pelo pblico e divulgados pela mdia, ou ainda, utilizar os mtodos tradicionais de divulgao como TV, radio, outdoors. 3.6 Implementao Esta atividade depende das decises de projeto tomadas na etapa anterior. Pode ocorrer que, durante a implementao, se encontrem falhas no projeto inicial e este tenha que ser modificado novamente, seguindo a liberdade de se movimentar no ciclo estrela. Quanto melhor seja feito o projeto inicial, menor o tempo que dever ser gasto durante esta etapa.
Implementao
Coleta e criao de contedo Preparao dos dados Mapeamento da Arquitetura de Informao
Dados Derivados WSA / Prottipo HTML

Dados Iniciais

Lapidao
Prottipo HTML

Avaliao Iterativa

Avaliao Iterativa

Figura 2: O dadoduto para a atividade de Implementao. Uma vez coletado ou criado um dado, ele passar por uma seqncia de etapas, de transformaes e relacionamentos, que o prepara para sua publicao. Observa-se a formao de um duto de dados (que ser chamado de 'dadoduto'6) que se inicia com sua coleta e termina com a implementao do prottipo HTML, conforme esquematizado pela figura 2, anterior. A identificao do dadoduto permite um melhor gerenciamento dos recursos do projeto e da equipe, conforme explicado adiante.

Termo 'emprestado' da rea de visualizao cientfica: 'pipeline' ou 'dadoduto'.

As funcionalidades so implementadas em camadas (primeiro as mais prioritrias) e cada funcionalidade pode ser refinada passando mais de uma vez atravs do dadoduto. Na implementao de web sites podem ser identificados alguns nveis caractersticos de passagem pelo dadoduto, que foram representados na figura 3, a seguir. No nvel (a) so criados os templates HTML das pginas que so baseados nos templates grficos identificados na Especificao de contedo e desenhados na Especificao de layout. Estes templates sero linkados conforme o esqueleto hipermdia definido na etapa de Arquitetura de Informao. Obtm-se finalmente um Web site Abstrato (WSA), ainda sem nenhum contedo de informao, formado pelos templates das principais categorias de pginas que sero relacionados pela estrutura de navegao definida pela Especificao de contedo. O nvel (b) seguido somente por sites que integram a publicao Web com servidores de Banco de Dados (BD). Nele implementado o modelo fsico do BD projetado durante a Especificao de implementao. Os programas middleware (que fazem a 'ponte' entre o servidor Web e o de BD), so codificados e otimizados, e ento so relacionados ao esqueleto de templates HTML, desenvolvido no nvel (a), anterior. No fim obtm-se um WSA relacionado ao banco de dados, mas ainda sem contedo de informao. Durante a avaliao iterativa, verificado se os programas middleware esto funcionando corretamente, introduzindo dados para teste.
nvel (a)
Coleta e criao de contedo
Dados Iniciais

nvel (b)
Implementa: BD middleware
BD e programas

nvel (c)
Coleta / Cria contedo de informao
Contedo

Templates Grficos. Recorta GIFs Codifica

Template HTML

Preparao dos dados

Dados Derivados

Otimiza imagens e HTML

Otimiza cdigo middleware

programas otimizados

Otimiza / Trata Contedo

Transforma Otimiza / Trata Contedo

Template HTML Otimizado

Mapeamento da Arquitetura Informao

WSA / Prottipo HTML

Linka Templates HTML

WSA

Associa cdigo middleware aos templates HTML

WSA

Contedo Otimizado

Cadastra no BD
Prottipo HTML

Embute em template HTML

Lapidao
Prottipo HTML

Transformaes de comunicao Ajuste fino

Prottipo HTML

Templates linkados

Integrao com BD

Contedo

Figura 3: O dadoduto sendo aplicado em diferentes nveis. No nvel (c) o contedo de informao do web site coletado, tratado e anexado aos templates HTML. Este relacionamento entre contedo e pginas HTML pode ser feito de forma direta (embutindo o contedo diretamente no cdigo HTML dos templates) ou de forma indireta (cadastrando o contedo no Banco de Dados, que far a publicao automtica). No fim deste processo o web site passa pela lapidao onde so aplicadas tcnicas de visualizao ou de design de informao 7 para melhor representar o contedo e feito o ajuste fino da diagramao (e.g. alinhamentos, espaamentos, etc). Finalmente obtm-se o prottipo HTML. Durante a avaliao iterativa, so verificados os padres de design de tela, se a funcionalidade implementada nessa passagem pelo dadoduto est completa e operando, se os links esto corretamente conectados, se foram utilizadas as restries de
7

Tcnicas de visualizao ou design de informao podem ser encontradas em (BERTIN,1983) (MACKINLAY,1986) (TUFT,1990) (ZIMMERMAN,1997) ou (JACOBSON,1999).

implementao definidas anteriormente e se o armazenamento lgico dos arquivos em disco foi feito conforme especificado. No caso de integrao com Banco de dados, deve ser feito um teste de como um determinado template gerencia diferentes contedos (e.g. como fica a aparncia da pgina quando um campo textual inclui seu maior e seu menor texto). 3.6.1 A gerncia dos recursos do projeto A observao dos trs nveis de passagem pelo dadoduto, permite gerenciar melhor os recursos do projeto e da equipe. Conforme mostra a figura 4, a seguir, pode ocorrer de se ter mais de um nvel, sendo implementado em paralelo. O eixo horizontal da figura representa as etapas do dadoduto (tarefas) distribudas no tempo. O eixo vertical esquerda representa os trs nveis descritos anteriormente (a, b e c).
(tarefas no/ tempo)
/ eta col o cria
templates linkados (a) integrao BD (b) contedo (c)

o ra o pa ent pre tam tra

am pe ma

to en

tempo
designer grfico & programador programador & administrador conteudista & programador

nveis

equipe

Figura 4: Distribuio no tempo de tarefas, nveis e equipe, permitida pelo dadoduto. Percebe-se que no nvel a tem-se basicamente tarefas de design grfico e codificao HTML e o mesmo pode ser executada por um designer grfico e um programador. Para desenvolver o nvel b (i.e. implementar os bancos de dados e os programas de integrao) bastam as habilidades do programador e do administrador de rede. No nvel c, importante o papel do conteudista (i.e. um especialista na aplicao) que pode ser ajudado por um programador e um especialista em design de informao. Os trs nveis podem ser executados no tempo em paralelo, tomando o cuidado de sincronizar as atividades. Por exemplo: os templates HTML do nvel a j devem ter sido finalizados quando os programas middleware do nvel b estiverem sendo concludos (para que possam ser integrados). Pode-se tirar vantagem das caractersticas do dadoduto principalmente ao se desenvolver web sites que envolvem uma equipe de produo (i.e web sites mdios e grandes), de forma a gerenciar melhor a alocao dos recursos computacionais e de equipe. Esta qualidade do dadoduto, no deve ser notada na produo de web sites muito simples com um nico desenvolvedor. 3.7 Distribuio A distribuio a terceira atividade do mtodo e compreende a publicao (a implantao do sistema) e a divulgao do site. Durante a etapa de publicao o prottipo HTML final colocado online. Para isto, os arquivos so copiados para um diretrio reconhecido pelo servidor Web, feita a configurao da plataforma servidora e so instalados e configurados os outros programas server-side, como servidor FTP, programas que executam as restries de acesso e segurana (e.g. senhas), servidor Banco de Dados e programas middleware. Ao se copiar os arquivos para baixo do servidor Web, podem ser introduzidos novos

problemas no detectados durante as avaliaes de usabilidade feitas no fim da implementao (sobre o prottipo rodando nas mquinas locais). Assim, necessrio fazer uma nova avaliao local (checando se todos os links e as funcionalidades implementadas esto operando corretamente e se as imagens e demais mdias esto sendo carregadas) e outra remota (checando a velocidade de transmisso das pginas). Durante a etapa de divulgao so executadas as estratgias definidas anteriormente durante a Especificao de distribuio. Algum tempo aps executar as estratgias de divulgao do site til gerar estatsticas de acesso para saber qual o retorno obtido, confirmando se as metas definidas para a divulgao do site foram atingidas. Caso contrrio, novas medidas de publicidade devem ser adotadas. Existem muitos programas de domnio pblico que fazem a anlise estatstica. Entre as medidas mais importantes das estatsticas de acesso, esto os hits, pageviews sesses e usurios nicos8, mas tambm podem ser extradas outras informaes como nmero mdio de pedidos atendidos (e no atendidos) em um dado perodo e o trfego mdio em bytes por perodo. Existem alguns problemas que podem comprometer as estatsticas de acesso, em especial, o uso de cache pelo browser e/ou pelo servidor de proxy. Uma vez que esteja tudo resolvido, o web site est pronto para ser submetido aos processos de manuteno e de atendimento ao usurio definidos anteriormente e que sero repetidos durante toda a sua vida til. O contato com o usurio tem que ser incentivado. Um canal de comunicao bem atendido d credibilidade ao web site e permite identificar problemas novos ou que no tenham sido detectados anteriormente. No fim, o web site implementa uma verso da aplicao ou um "prottipo pronto" ou ainda uma camada de funcionalidades. Novas camadas do projeto anterior podem ser implementadas em sucessivos ciclos de implementao / distribuio.

Concluses

O mtodo proposto se baseia e modifica aquele de usabilidade de [MAYHEW,00]. Introduz as anlises funcional, de necessidades e de web sites similares, que fornecem indicaes de como adapt-lo aos diferentes domnios de aplicao. Introduz a definio de metforas e a especificao da arquitetura de informao, que procuram definir e organizar o contedo do site de forma consistente com o modelo mental do usurio. Introduz o planejamento da implementao e da distribuio, fundamentais para prever e evitar muitos dos problemas do desenvolvimento de web sites. Contribui com a idia de 'dadoduto' que estabelece etapas claras para o processo de implementao Web permitindo a otimizao da gerncia do projeto. Tambm identifica processos importantes no ciclo de publicao e introduz a etapa de divulgao, necessrios para a existncia e a sobrevivncia de um web site. Muitos exemplos podem ser extrados do estudo de caso em MARTINEZ(2002) e fazem acreditar que o mtodo tornou-se realmente um diferencial durante o ciclo de desenvolvimento, conseguindo-se resultados que dificilmente teriam sido atingidos sem ele. As reflexes levantadas durante este trabalho fazem acreditar que o mtodo se revela til tanto para web sites complexos quanto simples. No entanto, para web sites muito simples necessrio que se escolham atalhos e tcnicas simplificadas, para no se correr o risco de transformar o desenvolvimento em algo demorado e complicado alm do necessrio. Tcnicas como anlise heurstica e pequenos testes com usurios podem ser muito reveladores para qualquer desenvolvedor, principalmente em projetos de pequeno porte.

unique users

10

Agradecimentos
Ao LSI-Poli-USP e ao CJE-ECA-USP por todo o apoio. Em especial, ao Prof. Joo Antnio Zuffo pela confiana, incentivo e orientao. Ao Prof. Proena, pela essencial cooperao e pelo entusiasmo com que estimulou o estudo de caso. Profa. Roseli de Deus Lopes, ao Prof. Srgio Leal e Profa. Ana Magda pelo importante encorajamento e colaborao. Profa. Lcia Filgueiras e aos colegas e mentores do ILCE (Instituto Latinoamericano de la Comunicacin Educativa) pelos valiosos ensinamentos. OEA pela bolsa que permitiu que fosse ao Mxico realizar o curso no ILCE. Ao Prof. Romero Tori e ao Prof. Eduardo Toledo Santos, pelas sugestes.

Referncias
[1] BERTIN,J. Semiology of graphics. The University of Wisconsin Press, Madison, Wisconsin, 1983. [2] GARZOTTO,F.; PAOLINI,P.; SCHWABE,D. HDM: a model based approach to hypermedia application design. ACM Transactions on Information Systems, 11(1): pg.1-26. 1993. [3] HIX,D; HARTSON,R. Human-computer interface development: concepts and systems for Its management. ACM Computing Surveys 21(1): 5-92. 1989. [4] ISAKOWITZ,T.; STOHR,E., BALASUBRAMANIAN,P. RMM: a methodology for structured hypermedia design. Comm.of the ACM, V.38, N.8, pg.34-44. August, 1995. [5] IVORY,M.Y.; HEARST,M.A. The state of the art in automating usability evaluation of user interfaces. ACM Computing Surveys, V.33, N.4, pg.470-516. December, 2001. [6] JACOBSON,R. editor. Information Design. The MIT Press, London, England. 1999. 357p. [7] LOWE,D.B.; BUCKNELL,A.J.; WEBBY,R. Improving hypermidia development: a reference model-based process assessment method. In: 10th. ACM Conference on Hypertext and Hypermedia, Proceedings. Darmstat, Germany, pg.139-146. 1999. [8] MACKINLAY,J. Automating the design of graphical presentations of relational information, ACM Transactions on Graphics, v.5, n.2, pg.110-1, 1986. [9] MARTINEZ,M.L. Usabilidade no design grfico de Web sites. In: GRAPHICA'2000 III International Conference on Graphics Engineering for Arts and Design & 14o Simpsio Nacional de Geometria Descritiva e Desenho Tcnico. Anais em CD-ROM, Ouro Preto MG - Brasil. Jun./2000. [10] MARTINEZ,M.L. Un mtodo de diseo Web basado en usabilidad para la comunicacin efectiva de la informacin. In: GRAPHICA'2001 IV International Conference on Graphics Engineering for Arts and Design & 15o Simpsio Nacional de Geometria Descritiva e Desenho Tcnico. Anais em CD-ROM. So Paulo, SP, Brasil. Nov./2001. [11] MARTINEZ,M.L. Um mtodo de webdesign baseado em usabilidade. So Paulo, 2002. 301p. Tese (Doutorado) - Escola Politcnica. Universidade de So Paulo, Brasil. [12] MAYHEW,D.J. The usability engineering lifecycle (formerly managing the design of the user interface). In: ACM CHI98, Proceedings, 18-23, pg. 127-128. April, 1998. [13] MAYHEW,D.J. The usability engineering lifecycle: a practitioners handbook for user interface design. Morgan Kaufmann Publishers. Maro, 1999. [14] NIELSEN, J. Usability engineering. Academic Press Inc., Boston, USA. 1993. [15] NIELSEN,J. Ten usability heuristics. In. NIELSEN,J.;MACK,R. (eds) Usability inspection methods. New York, John Wiley & Sons, 1994. http://www.useit.com/papers/heuristic/heuristic_list.htm. [16] NIELSEN, Jacob. Web usability: past, present and future. 8/Ago. 1999. http://webword.com/interviews/nielsen.html. [17] RAVDEN,S.; JOHNSON,G. Evaluating usability of human-computer interfaces: a practical method. Ellis Horwood Ltd., UK. 1989.

11

[18] ROCHA, H.V.; BARANAUSKAS,M.C.C. Design e avaliao das interfaces humano-computador. 12 Escola de Computao, So Paulo, IME-USP, 2000. [19] RUBIN,J. Handbook of usability testing: how to plan, design and conduct effective tests. John Wiley & Sons, Inc. 1994. [20] SCHWABE,D.; ROSSI,G. The object-oriented hypermedia design model. . Comm.of the ACM, V.38, N.8, pg. 45-46. August, 1995. [21] TUFTE,E.R. Envisioning information. Graphics Press. May, 1990. [22] WINCKLER,M.A.A. Proposta de uma metodologia para avaliao de usabilidade de interfaces www. Porto Alegre, maro de 1999. Dissertao (Mestrado) - Instituto de Informtica. Universidade Federal do Rio Grande do Sul. [23] ZIMMERMAN,B.B. Applying Tuftes principles of information design to creatin effective Web sites. In: The 15th Annual International Conference on Computer Documentation, Proceedings, pg.309-317. 1997.

12