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 SF Muni, w/o whom we’d still be manually entering data from the Muni website.

17 Project Links SF Muni Map Project site: SF Muni Map Prototype: