10/22/01Cemal Yilmaz1 User Interface Design for a Vehicle Navigation System Aaron Marcus Aaron Marcus and Associates, Inc. (AM+A) Presented by Cemal Yilmaz University of Maryland, College Park

10/22/01Cemal Yilmaz2 Project Description Motorola’s goal (89-92): To give drivers detailed, accurate, timely information about route guidance, traffic congestion, weather, and other information about points of interests. Team: project management and product designers, American Institute of Research (AIR) (mental model and navigation design documents), and AM+A. AM+A provides user interface design.

10/22/01Cemal Yilmaz3 Motorola’s Contribution Background research done by Motorola target price point: under $1000 user descriptions: car buyers, add-on device buyers scenarios: novice/expert users, daylight/nighttime driving required data and functions: street maps, climate/traffic info. desired features: restaurants, address editing, audio feedback Equipment characteristics CD-ROM device in the trunk: accessing database 5-inch LCD: 16 colors, limited font design, 320x240, staggered brick pattern, 5-10 electromechanical buttons

10/22/01Cemal Yilmaz4 AM+A Contribution Responsibilities: Designing detailed, interactive prototypes and simulations based on mental model and navigation design documents prepared by AIR with consultation and review by Motorola. Tool: AM+A designed and built prototypes using Macromedia Director Allow quick, visually accurate, detailed and compelling demonstrations, animation sequences, and interactive prototypes Outcome: Approximately 100 detailed screens prescribing and describing the metaphors, mental model, navigation, appearance, and interaction (based on detailed user, task, and functional specification documented by Motorola)

10/22/01Cemal Yilmaz5 User Interface Components Metaphors: Maps, with roads, scales, and north arrows Trips, with planners, destinations, and route preference Vehicle dashboard control panel, with buttons, and labels Typewriter keyboard and telephone keypad, with buttons, labels Rare: computer-like pop-up control panels, with labels and exit buttons Goal: Appearance as an extension of existing vehicle dashboard controls rather than a desktop computer device

10/22/01Cemal Yilmaz6 User Interface cont... Mental Model: Specifying trips Editing existing trips Consulting map/direction displays while driving Initial screen contents: 7±2 items on the initial screen - reconfiguring the mental model to achieve this level of simplicity Navigation: Simple dashboard controls Very limited usage of pop-up dialog boxes or controls (not like a desktop personal computer interaction with detailed hypertext-like navigation)

10/22/01Cemal Yilmaz7 User Interface cont... Appearance: Simple, straightforward, and appealing Typography, colors, and layout serve very complex functional requirements: legibility and readability even of small map symbols under varying light conditions Colors represent the levels of road capacity, levels of road traffic, levels of warning messages, and geographic sides Main Menu: 7±2 items on the initial screen Four colors act as visual cues to represent the main functional units

10/22/01Cemal Yilmaz8 User Interface cont... Interaction: Touch interaction for locating and selecting items, generally with a small number of selection points (%4 of the screen) on the screen Single-line scroll-down and scroll-up buttons: taps are easier than controlling a scrollbar at arm’s length Specially laid-out on screen keyboard to edit short texts Off-center zoom box: move the cursor while maintaining a view of the context and desired target Voice output and configurable acoustic cues: timed according to the complexity of the maneuver (single or multiple maneuvers) and speed of the vehicle

10/22/01Cemal Yilmaz9 Example Screens Trips Menu: two levels of menu; configurable use of light green to highlight text and to indicate next default button selection Small scale: iconLarge scale: throughout screen

10/22/01Cemal Yilmaz10 Example Screens cont... selection screen map arrowstext

10/22/01Cemal Yilmaz11 Interaction dragging the zoom box the map pans to the left Cross-hair is off-center so that the user can see accurately the selector on the small details of the map Animation of interaction scenarios that depict layout, highlighting, and interaction state sequences. Software developers are able to see concrete details of how all the parts relate to each other

10/22/01Cemal Yilmaz12 GUI Design Tool by AM+A Idea: Explore the design space of appearance: options for showing button outlines, text/icon labels and color palettes. Goal: To help clients/users reach conclusions by experimenting individually with different settings of the user interface

10/22/01Cemal Yilmaz13 Lessons Learned The product did NOT reach commercial production during the time AM+A was involved in UI design; most probably the reason was remaining cost of the usability testing. The value of multi disciplinary teams The usage of design space exploration tool The necessity of setting design goals for both ease of comprehension as well as speed of access The importance of accounting for different cognitive preferences for absorbing information

10/22/01Cemal Yilmaz14 Conclusions The approach to the user interface development, the specific user interface design results, and lessons learned are valuable The good user interface design is an integral part of system development Goals should be metaphor design, allowance for cognitive- preference differences, and appearance characteristic in designing portable products and appliances