View
222
Download
0
Category
Tags:
Preview:
Citation preview
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
Recommended