WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

35
WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet Tara Matthews Seattle University April 5, 2001 Faculty Mentor: James Landay Graduate Mentor: Sarah Waterson Group for User Interface Research EECS Department University of California at Berkeley

description

WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet. Tara Matthews Seattle University April 5, 2001 Faculty Mentor: James Landay Graduate Mentor: Sarah Waterson Group for User Interface Research EECS Department - PowerPoint PPT Presentation

Transcript of WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

Page 1: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

WebQuilt and Mobile Devices:A Web Usability Testing and Analysis Tool for the Mobile Internet

Tara MatthewsSeattle University

April 5, 2001

Faculty Mentor: James LandayGraduate Mentor: Sarah Waterson

Group for User Interface ResearchEECS Department

University of California at Berkeley

Page 2: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 2

Outline

1. Introduction2. Motivation3. Usability Testing and WebQuilt4. My Research: WebQuilt for Mobile Devices

Page 3: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 3

Introduction

• Human Computer Interaction (HCI) Goal: human user and his/her behavior as the

motivating factor in software design “A powerful program with a poorly designed user

interface has little value.” (Webopedia)

• Usability How easily can a user succeed in their tasks?

• Web design deals with the UI for a website

Page 4: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 4

Motivation: Better Usability Testing

• Many websites have usability problems• Designers conduct usability testing to solve

these problems

Designers want a way to test that:• Is fast and easy to deploy on any website• Is compatible with range of OS and browsers• Includes better tools for analyzing the data

Page 5: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 5

WebQuilt Approach

• Fast and easy to deploy on any website• Compatible with range of OS and browsers• Better tools for analyzing the data

Client Browser Web Server

Request

Response

Page 6: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 6

WebQuilt Approach

• Fast and easy to deploy on any website• Compatible with range of OS and browsers• Better tools for analyzing the data

WebQuiltLog

ProxyClient Browser Web Server

Page 7: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 7

WebQuilt Approach

• Fast and easy to deploy on any website• Compatible with range of OS and browsers• Better tools for analyzing the data

Page 8: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 8

Outline

1. Introduction2. Motivation3. Usability Testing and WebQuilt4. My Research: WebQuilt for Mobile Devices

a. Overview

b. Web Design for Mobile Devices

c. Extending WebQuilt: PDAs

d. Extending WebQuilt: Phones

e. WebQuilt User Testing

Page 9: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 9

Overview of My Research

• Extend WebQuilt to work with PDAs and Internet phones1. Understand web design and usability issues

for mobile devices2. Research the technologies involved with

Internet access for PDAs and Internet phones3. Implement extensions to WebQuilt

infrastructure4. Conduct usability testing with WebQuilt

Page 10: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 10

Web Design for Mobile Devices

• Mobile devices introduce difficult usability problems Small screen size Traditional input mechanisms not available Slow Internet transfer rates Limited memory space

• WAP phone studies indicate poor usability 70% said they would not use within one year (Nielsen Norman)

• Investigated many varying industry solutions and found: Mobile devices sites should be designed for the PDAs or phones Web content should represent needs of mobile users We should deal with freely accessible sites

Page 11: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 11

Extending WebQuilt: PDAs

• Rendering PDA browser for visualization Compared desktop and PDA browser sizes

• Created framework for running tests- Designed the interface and functionality to

deploy tests- Enhanced proxy code to better support tests

• Add survey at end of each task WebQuilt logging and visualization is

quantitative Survey provides qualitative feedback

Page 12: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 12

Extending WebQuilt: Phones

Same changes as PDA plus more:1. New Proxy that deals with WML

• Original only proxies HTML pages• Phone sites are made with WML

(XML subset)

2. Integrate phone browser for visualization• Desktop browser does not look like

phone browser and cannot render WML

• Need source code for WML browser written in Java

Page 13: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 13

User Testing with WebQuilt

Designers: the real WebQuilt users• WebQuilt user testing vs. user (or

usability) testing with WebQuilt

Goals:• Find bugs with WebQuilt itself• See how well WebQuilt performs:

Will it help mobile site designers? Does it find usability problems?

Page 14: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 14

Steps for User Testing

• Setup several tasks, recruit 20–100 people• Email users URL to the WebQuilt start page• Ask them to complete the predefined tasks• Collect remote (or local) data• Aggregate, view, and interact with data• Find problems, fix, repeat

Evaluate

Design

Prototype

Page 15: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 15

Preliminary Results of Testing

Let’s look at a MapQuest example… Task: find if there were any traffic delays on I-

490 East in Rochester, NY 30 people tried the task and filled out a survey Used survey, logfile, visualizations

Page 16: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 16

Page 17: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 17

Page 18: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 18

Page 19: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 19

Page 20: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 20

Conclusion

• I was able to extend WebQuilt’s remote usability testing capabilities to PDAs and began work for Internet phones

• The preliminary results of our testing showed that WebQuilt has potential for helping us find usability problems

• My contribution will hopefully lead to more usable mobile sites that open mobile connectivity to a wider range of people

Page 21: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 21

Future Work

• Work with designers: the real users of WebQuilt What functionality they need/do not want Improvements Real-life performance: is it useful?

• Finish phone proxy and visualization and conduct user testing

Page 22: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 22

Reflections

• What is the impact of my work on others?• Does it benefit people/society?• Do I enjoy what I am doing?

Page 23: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 23

Acknowlegements

• Special thanks to Sarah Waterson, Jason Hong, James Landay, and the GUIR folk

Group for User Interface ResearchEECS Department

University of California at Berkeley

Download WebQuilt at:http://guir.berkeley.edu/webquilt

Page 24: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 24

Thank You!

WebQuilt and Mobile Devices:A Web Usability Testing Analysis Tool for the Mobile Internet

Tara MatthewsSeattle University

August 2, 2001

Faculty Mentor: James LandayGraduate Mentor: Sarah Waterson

Group for User Interface ResearchEECS Department

University of California at Berkeley

Page 25: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 25

Extra Slides

Page 26: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 26

Usability Testing Before WebQuilt

• Traditional usability testsExtremely useful qualitative informationLots of time, small websites, few people, local

• Server-side loggingEasy to collect, remote testing, lots of toolsRestricted access, little on tasks and problems

• Client-side loggingCan track everything, remote testing Installation, platform-dependent, analysis tools

Page 27: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 27

Implementing a WML Proxy

• What does the proxy do? Sits between user’s browser and web server Intercepts requests to log user’s actions on a

site

• How does the proxy work?• How to change proxy to work for WML?

Page 28: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 28

Implementing a WML Proxy

• What does the proxy do?• How does the proxy work?• How to change proxy to work for WML?

Page 29: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 29

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Store

The Proxy at Runtime

Page 30: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 30

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

1. Process Client Request

Store

The Proxy at Runtime

Page 31: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 31

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

2. Retrieve Requested Document

Store

The Proxy at Runtime

Page 32: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 32

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

3. Process and return the page

Store

The Proxy at Runtime

Page 33: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 33

Start with:<A HREF="computers.html">

End up with:<A HREF="http://tasmania.cs.berkeley.edu/webquilt?replace=http://www.yahoo.com/computers.html&tid=1&linkid=12">

The Proxy at Runtime

Page 34: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 34

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

Client Browser Web Server WebQuilt Proxy

Proxy Editor

Cached Pages WebQuilt Logs

WebProxy Servlet 1 2

3 4 5 HTTPClient

Package

4. Store the page 5. Log the transaction

Store

The Proxy at Runtime

Page 35: WebQuilt and Mobile Devices: A Web Usability Testing and Analysis Tool for the Mobile Internet

April 5, 2002 35

Implementing a WML Proxy

• What does the proxy do?• How does the proxy work?• How to change proxy to work for WML?

Main classes: WebProxy and ProxyEdit Made ProxyEdit an interface HTMLProxyEdit and WMLProxyEdit extend Moved HTML proxy code into HTMLProxyEdit Wrote WML proxy code in WMLProxyEdit

+ Required writing WML Tolkenizer