WAUTT: Uma Ferramenta para o Rastreamento da Interao do Usurio com Aplicaes Interativas Web

Adriano Rivolli
Centro Federal de Educao Tecnolgica de So Paulo CEFET-SP, Salto-SP, Brazil 55 11 4602-9191

Diogo A. Marinho
ForLogic Software Ltda UTFPR, Incubadora de Inovaes Cornlio Procpio-PR, Brazil 55 43 3523-9056

Luciano T. E. Pansanato
Univ. Tecnolgica Federal do Paran UTFPR, Av. Alberto Carazzai, 1640 Cornlio Procpio-PR, Brazil 55 43 3520-4000

rivolli@gmail.com

diogo@forlogic.net

luciano@utfpr.edu.br

RESUMO
Novas tecnologias, linguagens e metodologias tornam possvel a criao de aplicaes interativas que representam um novo modelo, freqentemente chamado de aplicaes Web 2.0. Neste artigo descrita uma ferramenta, denominada Web Application Usage Tracking Tool (WAUTT), para o rastreamento da interao do usurio com essas aplicaes. A principal motivao auxiliar os desenvolvedores a realizar testes remotos de usabilidade com uma aplicao web 2.0 e analisar os dados coletados. O rastreamento realizado por meio de tcnicas AJAX, de maneira no intrusiva para o usurio. A ferramenta WAUTT foi avaliada em um teste de usabilidade real para mostrar a sua utilidade.

permite ao navegador fornecer operaes mais responsivas ao usurio utilizando um protocolo assncrono para a comunicao cliente-servidor, ao contrrio da comunicao sncrona do HTTP original. O navegador registra um conjunto de retornos de chamada (callbacks) para o servidor usar para atualizar os dados do navegador em segundo plano, usando Document Object Model (DOM) [2]. Essa tcnica tem permitido s aplicaes fornecer servios altamente interativos e so consideradas como parte da base da Web 2.0 [3]. Uma aplicao para a Web 2.0, ou simplesmente aplicao web2, apresenta um problema quando necessrio obter informaes sobre como seus usurios a utilizam realmente. Os dados que podem ser armazenados no servidor sobre a interao do usurio no so suficientes para extrair informao detalhada sobre o uso real da aplicao. Portanto, necessria a instalao de um software adicional no cliente para rastrear toda a interao do usurio. No caso de um estudo de usabilidade remoto, por exemplo, um usurio pode no estar disposto a instalar um software dessa natureza no seu equipamento por questes de segurana. Neste artigo apresentada uma ferramenta, denominada Web Application Usage Tracking Tool (WAUTT), utilizada para fazer o rastreamento da interao do usurio com uma aplicao web2 e para auxiliar a anlise dos dados coletados. O objetivo facilitar a coleta de dados remota, ao longo de um perodo de tempo, para serem utilizados em estudos de usabilidade. Na Seo 2 a ferramenta WAUTT apresentada, assim como um cenrio de uso da ferramenta para testes de usabilidade. Na Seo 3 a avaliao da ferramenta WAUTT em um contexto real de aplicao descrita. Na Seo 4 so apresentadas as concluses.

ABSTRACT
New Web technologies, languages, and methodologies make it possible to create interactive applications that represent a new model frequently called Web 2.0 applications. This paper describes a tool, named Web Application Usage Tracking Tool (WAUTT), to tracking user interaction with these applications. Our main motivation is to help developers run remote usability tests with a web 2.0 application and analyze the collected data. Tracking is done through AJAX techniques, in a non intrusive manner regarding the user. WAUTT was evaluated in a real usability test to show its usefulness.

Categories and Subject Descriptors

H.3.5 [Information Storage and Retrieval]: Online Information Services Web-based services; H.5.2 [Information Interfaces and Presentation]: User Interfaces Evaluation/methodology; H.5.4 [Information Interfaces and Presentation]: Hypertext/Hypermedia User issues.

General Terms
Experimentation, Human Factors.

2. WAUTT WEB APPLICATION USAGE TRACKING TOOL

Nesta seo apresentada a ferramenta WAUTT. A abordagem subjacente ferramenta usar as prprias tcnicas AJAX como base para construir um cdigo JavaScript capaz de realizar a tarefa de rastrear a interao do usurio no cliente e registrar os dados coletados em um servidor para posterior anlise e interpretao.

Keywords
Usability evaluation, interactive web application, user interaction tracking, log file analysis.

1. INTRODUO
Uma tendncia em aplicaes web colocar parte da comunicao cliente-servidor em segundo plano enquanto o navegador ainda fornece interatividade ao usurio. O conjunto de tcnicas conhecida como Asynchronous JavaScript and XML (AJAX) [1]

2.1 Arquitetura
Na Figura 1 mostrada a organizao da arquitetura da ferramenta WAUTT. O Cliente corresponde pgina da aplicao web2 aberta no navegador, a qual possui um cdigo

179
2008 Brazilian Computer Society

WAUTT (wautt.js) incorporado que faz o rastreamento (captura) da interao do usurio e envia uma requisio com os dados coletados para registro.

para resolver essa questo usar o prprio Servidor de Aplicao Web2, atravs do Cliente WAUTT (wautt.php), para redirecionar as requisies de registro recebidas do Cliente para o Servidor WAUTT. Outra maneira de resolver essa questo utilizar uma biblioteca especfica para realizar esse tipo de requisio, por exemplo, a biblioteca AJAX Cross Domain (ACD, http://www.ajax-cross-domain.com)

2.3 Formato dos Dados Coletados

O registro (log) da interao do usurio com uma aplicao muito utilizado como uma maneira de coletar dados para estudos de usabilidade. Os dados coletados tambm podem ser utilizados, por exemplo, para justificar a realizao de alguma manuteno e/ou alterao na aplicao. Por exemplo, uma anlise criteriosa dos dados pode identificar quais reas so mais ou menos visitadas ou quais funcionalidades so utilizadas com maior ou menor freqncia. A ferramenta WAUTT foi projetada para coletar dados detalhados sobre a interao do usurio com uma aplicao web2. Os dados coletados so gravados em um arquivo de log e tambm armazenados em um banco de dados para facilitar a gerao de relatrios (por exemplo, relatrios com as freqncias de uso). O formato bsico de cada registro (linha) do arquivo de log o seguinte: data, hora, ip, sistema operacional, navegador, url, <...> A parte do registro referenciada como <...> corresponde aos detalhes especficos da interao rastreada, que variam de acordo com os seguintes eventos: Clique do mouse:

Figura 1: Arquitetura da ferramenta WAUTT. O Servidor de Aplicao Web2 hospeda a aplicao web2 sendo rastreada e possui um cdigo WAUTT, denominado Cliente WAUTT (wautt.php), para redirecionar a requisio do cliente para o Servidor WAUTT. O Servidor WAUTT, por sua vez, fornece os cdigos WAUTT para o Cliente e para o Servidor de Aplicao Web2, e tambm registra os dados coletados enviados com as requisies redirecionadas. Adicionalmente, o Servidor WAUTT tambm fornece ferramentas, para auxiliar a anlise, interpretao e apresentao dos dados registrados.

2.2 Uso da Ferramenta WAUTT

Para utilizar a ferramenta, o desenvolvedor deve realizar o cadastro no Servidor WAUTT (http://ead.cp.utfpr.edu.br/wautt) e fazer o download do cdigo do Cliente WAUTT que deve ser incorporado em todas as pginas da aplicao web2 hospedada em um servidor (o Servidor de Aplicao Web2 mostrado na Figura 1). O cadastro necessrio para o desenvolvedor ter acesso posteriormente aos dados armazenados e s demais funcionalidades da ferramenta. Na verso atual, o arquivo Cliente WAUTT fornecido somente para as linguagens PHP, ASP, JSP e Python. No entanto, esse cdigo pode ser facilmente portado para outras linguagens de programao para a Web, pois composto pelo mnimo necessrio para o funcionamento da ferramenta. O Cliente WAUTT um cdigo PHP (ou outra linguagem de programao para a Web) que inclui o cdigo JavaScript (wautt.js) no contedo da pgina que enviada ao Cliente. O cdigo JavaScript faz o rastreamento da interao do usurio e envia uma requisio com os dados coletados para registro. Esse cdigo implementado com base na biblioteca JavaScript de cdigo aberto chamada jQuery (http://jquery.com) e no interfere no cdigo JavaScript usado na aplicao web2 do desenvolvedor, pois utiliza os modelos avanados de registro de eventos [4] que permitem adicionar diversas funes de tratamento de eventos aos elementos. Aps a incluso do arquivo wautt.php na aplicao web2, assim que um usurio carrega uma pgina no navegador, o cdigo JavaScript do arquivo wautt.js inicia o rastreamento da interao do usurio e o registro dos dados coletados. O uso do Cliente WAUTT, responsvel tambm pelo redirecionamento das requisies do Servidor da Aplicao Web2 para o Servidor WAUTT, uma deciso de projeto devido questo das requisies AJAX cross-domain, uma restrio de segurana dos navegadores que impede a comunicao com outro domnio que no seja o de origem da pgina. A maneira adotada

event:click, x:28, y:415, element:a, class:aba, id:lnk2, value:Todos Movimento do mouse:

event:mousemove, x:169, y:130 Rolagem da pgina:

event:scroll, y:55 Pressionamento de teclas:

event:keypress, key:p Mudana de foco:

event:focus, element:textarea, class:msg, id:msg01, value: Ol a todos! Redimensionamento da janela:

event:resize, width:620, height:440 Carregamento de pgina:

event:load, title:Entrar, width:800, height:600 Uma vantagem de fazer o registro da interao do usurio a possibilidade de coletar grandes volumes de dados automaticamente. Depois de usar a ferramenta WAUTT para realizar algum rastreamento de interao do usurio em uma aplicao web2, os dados coletados so disponibilizados no Servidor WAUTT. A ferramenta WAUTT permite aos usurios

180

(desenvolvedores) cadastrados filtrar os dados coletados e gerar relatrios que mostram as freqncias das interaes do usurio. A ferramenta WAUTT torna vivel a realizao de testes de usabilidade com o usurio interagindo com a aplicao web2 remotamente pela Internet. Alm disso, o pblico que pode ser alcanado com essa abordagem maior do que com os testes tradicionais. Nos casos em que os testes remotos no so suficientes freqentemente possvel convidar alguns usurios para as sesses de laboratrio. A abordagem adotada na ferramenta WAUTT tambm pode ser utilizada para outras finalidades, por exemplo: auxiliar na identificao do perfil do usurio, considerando que este pode ser determinado a partir da anlise de como um usurio interage com uma aplicao; apoiar a fase de desenvolvimento ou depurao de aplicaes web2, uma vez que os detalhes da interao com o objeto da pgina armazenado; auxiliar atividades de suporte ao usurio, considerando que o comportamento (aes) de um determinado usurio pode ser monitorado de maneira online pelo desenvolvedor para compreender melhor o problema e orientar a resoluo.

facilitar a coleta de dados, ao longo de um perodo de tempo, para serem utilizados em estudos de usabilidade. A idia por trs da abordagem adotada usar as tcnicas AJAX como base para construir um cdigo JavaScript capaz de realizar a tarefa de rastrear a interao do usurio no cliente e registrar os dados coletados em um servidor para posterior anlise e interpretao. A ferramenta WAUTT utilizada principalmente para apoiar testes de usabilidade com aplicaes nas quais a interao ocorre principalmente no lado do cliente, isto , aplicaes que usam intensamente JavaScript e tcnicas AJAX. Do ponto de vista do usurio, a ferramenta WAUTT no intrusiva, uma vez que no necessrio qualquer tipo de instalao ou configurao no navegador. Do ponto de vista do desenvolvedor, responsvel pela avaliao da usabilidade de uma aplicao web2, a ferramenta WAUTT precisa da instalao de um arquivo no servidor da aplicao web2 e a incluso desse arquivo nas suas pginas. Essa necessidade pode parecer custosa primeira vista, mas o trabalho pode ser extremamente fcil se o desenvolvedor utiliza o conceito de templates [5] no desenvolvimento de aplicaes web2. Atualmente, a ferramenta WAUTT est sendo estendida para incorporar a visualizao grfica dos dados coletados ao invs de somente a freqncia de cada ao do usurio rastreada. Um aperfeioamento possvel permitir a realizao de testes estatsticos simples, como o teste-T para a comparao de mdias. Deve ser possvel selecionar variveis a partir de diferentes aplicaes avaliadas pelo mesmo desenvolvedor. No entanto, apesar de dados quantitativos serem apreciados por alguns especialistas em avaliao, o seu valor depende muito do tipo do estudo conduzido e de seus objetivos.

3. AVALIAO
Nesta seo descrito um teste de usabilidade conduzido com o apoio da ferramenta WAUTT para avaliar a abordagem proposta em um contexto real de aplicao. A aplicao web2 avaliada similar a um comunicador instantneo, denominada HelloChat, desenvolvida na linguagem PHP e que faz uso intenso de AJAX. A aplicao HelloChat foi desenvolvida utilizando o framework JavaScript Prototype (http://prototypejs.org). Dessa maneira, alm de avaliar o funcionamento do rastreamento da ferramenta WAUTT, tambm foi analisado se esta no interfere no funcionamento da aplicao em questo. O objetivo do teste de usabilidade com relao aplicao foi verificar se os usurios conseguem iniciar e manter uma conversao com outros usurios. A aplicao foi avaliada com 10 alunos estagirios do curso de Tecnologia em Anlise e Desenvolvimento de Sistemas da Universidade Tecnolgica Federal do Paran (UTFPR). Os participantes no tiveram dificuldades para iniciar e manter conversaes com outros usurios (pares) e com todos os usurios simultaneamente. Entretanto, um dos problemas de usabilidade identificados na interface da aplicao HelloChat a proximidade dos botes Enviar e Sair: alguns usurios clicaram sem querer no boto errado e precisaram carregar novamente a pgina de autenticao. Isso foi identificado atravs da observao da freqncia elevada de novas chamadas para a pgina de autenticao e tambm do uso excessivo do boto sair antes do final da sesso.

5. AGRADECIMENTOS
Agradecemos ao CNPq e UTFPR pelo apoio financeiro para o desenvolvimento deste trabalho.

6. REFERNCIAS
[1] Garrett, J. J. 2005. Ajax: A New Approach to Web Applications. Disponvel em: http://www.adaptivepath.com/ideas/essays/archives/000385.p hp [2] W3C. 2004. Document Object Model (DOM) Level 3 Core Specification. Version 1.0. W3C Recommendation 07 April 2004. Disponvel em: http://www.w3.org/TR/DOM-Level-3Core [3] Jazayeri, M. 2007. Some Trends in Web Application Development. International Conference on Software Engineering, Future of Software Engineering. IEEE Computer Society, 199-213. DOI= http://dx.doi.org/10.1109/FOSE.2007.26 [4] Flanagan, D. 2006. JavaScript: The Definitive Guide. O'Reilly, 5th Edition. [5] Zervaas, Q. 2007. Practical Web 2.0 Applications with PHP. New York: Springer, 1st Edition.

4. CONSIDERAES FINAIS
Neste artigo foi apresentada uma ferramenta, denominada Web Application Usage Tracking Tool (WAUTT), para o rastreamento da interao do usurio com uma aplicao web2 e para facilitar a anlise dos dados coletados. A principal motivao deste trabalho

181