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/01
Cemal Yilmaz
1
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
2
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
3
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/01
Cemal Yilmaz
4
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
5
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/01
Cemal Yilmaz
6
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
7
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
8
Example Screens
Trips Menu:
• two levels of menu; configurable
• use of light green to highlight text and
to indicate next default button selection
Large scale: throughout screen
10/22/01
Cemal Yilmaz
Small scale: icon
9
Example Screens cont...
selection screen
map
arrows
text
10/22/01
Cemal Yilmaz
10
Interaction
Cross-hair is off-center so that the
user can see accurately the
selector on the small details of the
map
dragging the zoom box
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
the map pans to the left
10/22/01
Cemal Yilmaz
11
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/01
Cemal Yilmaz
12
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
13
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 cognitivepreference differences, and appearance characteristic in designing
portable products and appliances
10/22/01
Cemal Yilmaz
14