10/22/01 Cemal Yilmaz 1

User Interface Design for a Vehicle Navigation System

Aaron MarcusAaron Marcus and Associates, Inc. (AM+A)

Presented by Cemal YilmazUniversity of Maryland, College Park

10/22/01 Cemal Yilmaz 2

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/01 Cemal Yilmaz 3

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/01 Cemal Yilmaz 4

AM+A ContributionResponsibilities: 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 DirectorAllow 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/01 Cemal Yilmaz 5

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/01 Cemal Yilmaz 6

User Interface cont...Mental Model: Specifying trips Editing existing trips Consulting map/direction displays while drivingInitial 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/01 Cemal Yilmaz 7

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/01 Cemal Yilmaz 8

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/01 Cemal Yilmaz 9

Example ScreensTrips 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/01 Cemal Yilmaz 10

Example Screens cont...selection screen map

arrows text

10/22/01 Cemal Yilmaz 11

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/01 Cemal Yilmaz 12

GUI Design Tool by AM+AIdea: 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/01 Cemal Yilmaz 13

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/01 Cemal Yilmaz 14

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