1

The

SF Muni Map

Project

Maggie Law & Kaichi Sung SIMS 2003 Masters Project

2

Why the SF Muni Map?

2 Main Objectives

• Evaluate a variety of public transit websites for info access & presentation best practices.

• Apply our findings to the case study of the SF Muni transit system.

3

Research Motivations

Information Visualization

• Challenge common techniques currently employed in mass transit websites

• Explore the interactive and visual potential of the online medium -- alternatives to:

– Static versions of paper map designs

– Tiled map navigation

User Interface Design & Usability

• Design a user-centered system

4

Relevant Coursework

• IS 247 Information Visualization & Presentation (Hearst)

• IS 213 User Interface Design & Development (Hearst)

• IS 214 User Needs & Assessment (Van House)

• IS 257 Database Management (Larson)

• IS 255 Foundations of Software Design (Hearst)

5

Our 12 Design Guidelines

1. Don’t expect to replace the paper map.

2. Know your audience. Build for them exclusively.

3. Design for your users. If you, too, are a target user, you should want to use what you build.

4. There is an inverse relationship btw zoom altitude and level of detail.

5. Excessive functionality undermines usability.

6. Build for the future.

7. The user experience does not necessarily begin and end at the computer screen.

8. Strive for consistency: navigational orientation and map views.

9. The value of the combination of text and illustrations is often greater than the sum of each used individually.

10. Cool isn’t always usable.

11. If appropriate, use human-in-the-loop algorithms.

12. Reduce cognitive load: leverage computer’s power to remove irrelevant information, or emphasize highly relevant information.

6

Demo

• Site Tour

• Trip Planner Comparison

7

Methodology (Part 1): Needs Assessment

• Interviews (8)

• Online Survey (123 respondents)

• Personas (3)

• Tasks Analysis

• Comparative Analysis

– Berlin, Boston, Helsinki, London,

New York, Paris, San Francisco

8

Methodology (Part 2): Prototyping

• Iterative Design

• Lo-Fi (paper) & Hi-Fi Prototyping

• Participatory Design

• Usability Testing

9

Lo-Fi Prototype

• Too focused on “views” rather than “tasks”

• Too much functionality overwhelmed users

• People wanted a trip planner

10

Hi-Fi Static Prototypes (round 1)

We decided to build our own interface for the TakeTransit Trip Planner, for the “goal-oriented” user.

11

Hi-Fi Static Prototypes (round 1)

We combined textual itinerary results with visual aids.

12

Hi-Fi Static Prototypes (round 2)

• No use of focus + context.

• Legend too prominent.

13

Hi-Fi Static Prototypes (round 2)

• Terminology issues: “turn stops” confused users.

• Highlight frequency chart over full timetable.

14

Implementation

• HTML & JavaScript

• Macromedia Flash MX

– Interactive maps

• Macromedia ColdFusion 5

– Retrieve & parse results from TakeTransit Trip Planner

– Dynamic database queries

• Microsoft Access Database

15

Future Directions

• Apply design ideas and model for larger scope MTC/TakeTransit Trip Planner prototype.

• Direct connection to Regional Transit Database for global system updates.

• Enhanced performance via maps optimized for the digital medium.

• GIS-based services (NextBus tracking, etc.).

• Improve accessibility, where possible.– SF Muni web team are accessibility experts!

• Web-based vs. kiosk delivery.

16

Thanks to…

• Professor Marti Hearst, faculty advisor & champion of usability.

• Professor Nancy Van House, needs assessment guru.

• User test participants for all the great feedback and reality checks.

• Robert Falconer & Ed Valdivia for their left brains in logic-defying mapping calculations.

• Marc Caposino & Chas Belov @ SF Muni, w/o whom we’d still be manually entering data from the Muni website.

17

Project Links

• SF Muni Map Project site:

http://dream.berkeley.edu/MuniMap/

• SF Muni Map Prototype:

http://fusion.sims.berkeley.edu/MuniMap/prototype/