Matthew Stanford Master of Fine Arts Project Documentation
Title
“Analysis + Application of Presenting Visual Wayfinding Information on Handheld Devices.�
Advisor
Dr. Noel Mayo
Committee
Dr. Liz Sanders, R. Brian Stone
Specialization
Design Development
Option
Non-Thesis
stanford.148@osu.edu
Website
MFAdesignThesis.com
Acknowledgments I was blessed to come from a family made of many different examples of talent, intelligence, and perseverance to model myself after. This enabled me to obtain an education from renown experts who were willing to share their knowledge. My deepest gratitude is extended to my mother and first teacher, to whom I owe dearly for her unwavering support, patience, and strength throughout my lifetime. Many people believe that once a child becomes an adult, their job as a parent ends. Through her actions, my mother exemplifies the principle that a parent’s job is never complete. The level of skill, effort, and sophistication needed to raise a child is much more difficult to obtain than any type of degree; I am honored to serve as her third manifestation of parental accomplishment. To my older brothers, who I have looked upon with sincere admiration ever since I was a baby. There are times when I find myself displaying characteristics that remind me of you—this is only because I have patterned myself after both of you. Very special thanks to my extended family for encouragement and serving as role models. To my advisor, Dr. Noel Mayo, who readily shared his invaluable wisdom, guidance, and experiences. I was unaware that my graduate education would entail so much in such a short period of time and for this I am forever grateful. Also to my committee members, Dr. Liz Sanders and R. Brian Stone, for their feedback, honesty, and genuine interest in my education and professional development. To the Department of Design faculty, especially Dr. Wayne Carlson, Cory Daughton, Tina Federico, and Tamara Dunaeff for providing administrative support that exceeded requirements. To my mentor, Kurt Shade, who I never needed to ask for help as you avidly provided guidance and professional referrals. Sincere thanks to my colleagues: Sandra Wan, Andrew Kerr, Meihui Lin, Brandan Craft and all the other OSU students with whom I have shared experiences.
PAG E
2
Vita
Education The Ohio State University, Design Development Master of Fine Art, 2010 Columbus College of Art & Design, Advertising & Graphic Design Bachelor of Fine Art, 2005 Employment • Noel Mayo Associates
Freelance Designer
Sep05–present
Various projects including package, identity, and web design. • OSU Dept of Design
Graduate Teaching Associate Jan06–June08
“Design 552: Communication Practices” provided Product Design majors an introduction to basic visual communication design. Students developed their own visual identity including a logo, letterhead, business card, digital slide presentation layout, portfolio, and web site. Evaluation of students’ overall performance based on expectations specified in the course’s syllabus. Developed syllabus, graded homework, and held individual office meetings with students. • The WOSU Stations
Graphic Designer
Oct04–Apr06
Design of signage and EffectTV displayed at COSI, promotional material for Ohioana Authors, logo design for ArtZine, and the annual staff calendar. • OxyVinyls
Graphic Designer
Oct03–Feb04
Created hardcopy forms and checklists for machine maintenance. Created logo and identity for RPAC, OxyVinyls’ community information hotline.
PAG E
3
Outline 1
Overview
2
The Current State of Affairs
3
Inspiration
4
Shortcomings of Existing Systems
5
Guidelines for Creating Interactive Maps for Handheld Devices
6
The Proposed Solution
7
Conclusion
8
References
1
Overview
What Was Done The primary objective of this project is to define an appropriate process of creating a visual wayfinding application on handheld devices. The deliverable includes guidelines for how to recreate such a system for a different geographic area. This project develops a solution for a local area; ultimately, the intention is to apply this system on a larger scale, allowing a seamless integration of each city’s wayfinding system. Ultimately, this research is being conducted in order to provide interactive designers with guidelines for how to recreate a solution for interactive maps in the context of mobile devices. This research is inspired primarily by the future recommendations from Susan Zolads’ MFA Project (The Ohio State University, 2005—advisee of Dr. Noel Mayo) titled “Columbus… Identified” which suggested there are further possibilities in which wayfinding design may benefit its users if applications of handheld technology are explored. In the beginning stages of this research, many different aspects of wayfinding information delivered on handheld devices were explored. One particular topic involved the development and implementation of a directory of African-American businesses in Central Ohio. Another area researched was the development of wayfinding signage which transmitted frequencies providing information regarding the user’s immediate surroundings. Wayfinding applications for handheld devices were then reviewed. It was then that the key discovery was made: most existing wayfinding applications suffer from similar issues: limited visual information as well as a lack of visual hierarchy (in the context of typography, color, and graphics), lack of consistency, and minimal attention to aesthetics. The initial proposals of interactive map solutions were presented in overhead view only until another key discovery was made: this visual wayfinding information should more appropriately correspond with the view of the user—pedestrians and automobile drivers never see the space in which they are navigating from an overhead view. The perspective view became popular in cellular phones just after my research of perspective PAG E
6
views commenced. I began to study three-dimensional virtual environments (including the height/width/depth of buildings as well as the inclusion of surrounding landmarks). This direction was thwarted due to visual limitations (lack of extended views of the users path/destination) caused by these virtual three-dimensional buildings. I then discovered that those existing and newly popular perspective views continued to (and still do) suffer from the same issues in which the previously popular overhead view maps suffered: limited visual information as well as a lack of visual hierarchy (in the context of typography, color, and graphics), lack of consistency, and little attention to aesthetics. This concluded: interactive map design will benefit from research regarding the said issues. I began collecting more data. Data was retrieved from various resources including (but not limited to) Internet map applications, personal use of handheld devices with interactive maps (owned an HTC Mobile Digital Assistant (MDA) Vario equipped with Google Maps Mobile, Zagat To Go, Microsoft Pocket Streets, and other mobile navigation software). Frequently the argument is made against the importance of visual wayfinding information on handheld devices, citing voice-guided instructions as the only necessary component in mobile navigation. However, during the course of this research, I conducted field research while driving to Chicago, Illinois using a Garmin nüvi® 370; I was attempting to reach a Best Western Hotel from Interstate 90 (Kennedy Expressway). When I approached a 5-way intersection, the voice-guided directions instructed me to “turn left at [street name].” In an unfamiliar city, during heavy traffic, while passing through an unfamiliar type of intersection which displayed illegible street signs (due to the surrounding visual noise and small size of the street sign’s type) I was left no other option but to use the visual map to successfully guide me through this intersection. Chances are, without this visual assistance I would have either made an incorrect turn, been forced to slow down (blocking traffic), or—worse yet—caused an accident. While one might make the argument that this is an isolated incident, if the potential for a car accident exists, this is certainly an issue requiring attention and consideration.
PAG E
7
To obtain an understanding of the target audience’s perceived value of the current applications on their handheld devices, I conducted a qualitative survey of 35 participants. This survey was conducted via the Internet at the following URL: http://mtstanford.com/673survey.html The survey’s participants were collected through friends, colleagues, classmates, and family. As indicated by the survey’s summary, the survey yielded results indicating that there is room for improvement in the perception of mobile navigation. I concluded: members of the target audience for this research are not satisfied with existing commercial mapping software. After obtaining the results from the survey, I categorized and evaluated existing systems based loosely upon Jakob Nielsen’s 10 Usability Heuristics. Though a well-established expert in the field of interactive design, Jakob Nielsen’s usability heuristics could not be used as a blanket application because they are not specific to interactive map design for handheld devices. Therefore, the evaluation criteria (shown on pages 25–38) have been adapted based on the knowledge obtained throughout the course of this research. Once the evaluation of existing systems was completed, I began developing prototypes of the proposed solution as shown on the subsequent pages.
PAG E
8
What Was Used to Guide the Process
11:00am 17mph 0.7 miles: Hopkins Hall
» Right on Woodruff Ave Left on College Ave
The primary source of my decisions were based on general design principles where minimalism is applied in many different contexts. This includes the typeface selection (decorative and/or illegible fonts should be avoided to optimize legibility), color palette (assigning specific colors to elements in the map without using unnecessary or unassigned colors), consistency (maintaining a visual language across the program by only using elements which are graphically similar to each other). I incorporated some of Jakob Neilsen’s 10 Usability Heuristics for Interactive Design. While some of these guidelines are not applicable, the served as a general basis to create the guidelines provided in this documentation
Help
Home
Fig 1.1 Screen shot of proposed solution.
which are developed specifically for creating interactive maps on handheld devices. Typographic standards were developed from Monotype Studios’ on-screen fonts and organization recommendations from John Kane’s “A Type Primer” and Dr. Mayo, my advisor for this project. The technical specifications are based on the standard size and colors for handheld devices (240px x 320px (4:3), 16-bit RGB color).
PAG E
9
What I learned Minimalism is essential in designing for handheld devices. As previously stated, minimalism is a key principle of design in general; no element should be used arbitrarily. Since screen real estate is limited (typically to 240px x 320px) this is especially true when designing for handheld devices. This means, all irrelevant information should be avoided. This was a huge factor in decision making when designing the map (outlines around buildings and streets are unnecessary, the colors were reduced to only show buildings, streets, and walkways). While voice-guided instructions must supplement the solution, the visual characteristics are the primary focus of this study. The demonstration provided displays a vertical application of an interactive map but may be applied horizontally. There are typefaces that were designed specifically for use on screen. Of those typefaces, a few of the most popular are Verdana, Georgia, and Trebuchet. These typefaces are ideal for use on screen because of their large counterforms and the similar characters (e.g. lowercase letters “i,” “j,” and “l”) are easily distinguished at small sizes. As previously mentioned, Monotype Studios developed a series of typefaces specifically for handheld devices. This prevented me from selecting typefaces I might use for print (e.g. the typeface used in this document is Futura which cannot be used for mobile devices because the lowercase letters “i,” “j,” and “l” are all too similar visually). Moore’s Law (see page 15) is now an underestimation. It is extremely difficult to stay abreast of existing design projects involving technology; especially when one of the leading companies in this field (Google, Inc.) is, by far, the largest company on the U.S. Stock Market. It is impossible for one graduate student to compete with any of the Research & Development teams of companies such as Google, TomTom, Garmin, etc. Therefore, instead of trying to ‘outsmart’ these companies and attempt to stay ahead of their research, I could only make improvements on what was publicly available during the course of my graduate studies. The prototype, designed in 2007, represents a snapshot in time and should be compared to what was available at that time (most are displayed in this documentation). PAG E
10
2
Current State of Affairs
Introduction As the cost of oil continues to climb while the economy declines, major airline companies are responding by raising the cost of airfare and reducing customer service employees. Although the customer service travelers used to enjoy is being reduced, travelers are becoming more familiar with interactive technology that facilitates quick responses if a trip goes awry. Many mobile navigation companies have improved their systems’ human-computer interactivity by including voice activation technology, voice guided instructions, automatic rerouting due to traffic or weather conditions, and the ability of users to modify and update preloaded maps. However, significant improvements to the design of the interactive map based on design principles and usability guidelines are not commercially available. This may indicate an opportunity to provide a more useful, usable, and desirable interactive map for handheld devices.
PAG E
12
The Information Age has facilitated the development of many dual-use technologies, which are used extensively both in military and civilian situations. This section focuses on both traditional and non-traditional uses of mobile mapping technology in the context of Global Positioning Systems (GPS). Topics include how GPS navigation is used in the military, the influx of GPS navigation systems on handheld devices, and non-traditional uses including mobile mapping software for the purpose of social networking. Specifically, this section examines non-traditional applications of GPS technology such as PacManhattan (a large-scale urban game that utilizes the New York City grid to recreate the 1980’s video game sensation PacMan), Helio’s Buddy Beacon (a GPS-powered feature offered by the wireless carrier Helio which enables users to share their location with friends as well as on popular social networking sites), and Socialight (an Internet-based application which enables members to share places and experiences with friends via handheld devices). The objective is to compare and contrast the technology and its purposes which now exceed reaching physical destinations. Assigning the terms “traditional” and “non-traditional” in the context of uses of technology which are not yet even forty years old may seem questionable. Compared to other technologies — including radio, television, telephones, automobiles, photography, and so forth — GPS can be considered very new. However, modern technology matures at much higher rates than that of twenty or more years ago. For example, consider the advancements of portable media players over the past ten years compared to portable media players ten years after their inception. The original Walkman, created by Sony and introduced in 1979, played audio cassettes only. While the Walkman is undoubtedly considered a breakthrough in the personal stereo industry, the portable media player industry made relatively very few improvements until Apple introduced the iPod in 2001. The iPod is a breakthrough due to its minimalist design, the amount/method of storage, and how users interact with the device itself. Continue less than ten years beyond the birth of the iPod and today’s models of portable media players can play videos, download new music directly to the device without the hardware support of a personal computer, and are even incorporated into cellular phones (eg: the iPhone).
PAG E
13
Moore’s Law (as articulated by Gordon E. Moore, co-founder of Intel Corporation) states “the number of components the industry will be able to place on a computer chip will double every year” — meaning computers will double in speed annually and, therefore, facilitate the utilization of greater activities by way of the technology in question (in this case, Moore is referring to personal computers). This statement has consistently proven itself true for technology beyond home computers and by these standards, the development of GPS technology is on schedule. Since the rate of advancement in technology is much greater than that of fifty, or even twenty years ago, the terms “traditional” and “non-traditional” can be used in the context of GPS. Just as the term “our children are growing up so fast” is used to describe newer generations in society, so is our technology.
PAG E
14
Validation of Research Why this research is Important Nielsen Mobile reported in a press release published 10 October 2007: “With GPS available on more new mobile devices, consumer demand for location-based services (LBS) such as navigation is growing, according to Telephia, a service of The Nielsen Company, and the world’s largest provider of syndicated consumer research to the telecom and mobile media markets… “While location-based services deliver highly personalized offerings such as friend-finding and other location-aware features, navigation represents the lion’s share of revenue.” The findings by Nielsen Mobile clearly indicate that the field of navigation on handheld devices is growing rapidly due to increased popularity. Results from an April 2008 Windows Mobile Survey report similar statistical Figure 1.2 Results from an April 2008 Windows Mobile Survey.
data. However, in the qualitative survey conducted for this project (see appendix), the results show that users in the Baby Boomer generation are dissatisfied with the overall functionality of navigation on handheld devices. This concludes: while popularity amongst the general public for handheld mapping has increased, members of the target audience for this research are not satisfied with existing commercial mapping software. This deficiency between the demand of the mobile navigation software and satisfaction may be compensated by applying fundamental design principles and improving the usability of existing portable navigation systems.
PAG E
15
Evolution of the Use of Global Positioning System (GPS) Technology
1970
1980
1990
2000
2010
2020
Total number of GPS devices in use in millions .6 2.7 4 24 143
1,000 projected
GPS will be standard in all new automobiles source:
and cellular phones
ABI Research
‚2013
source:
Utilization of GPS for social networking
Global Sources
2006 Pedestrian and
source:
automobile use
GPS World
1996
Pervasive use by US Military begins
source:
1994
Ivan Getting GPS approved source: US Navy
for public use
1983
First used by US Air Force
1972
PAG E
16
3
Inspiration This section provides a description, overview and survey of a proposed target audience and how the system may address the needs of this audience.
Figure 3.1 Source: US Census, Middle Series Projections This chart shows the increase of population of the Baby Boomer generation in the United States of America (it is increasing at an average rate of 20.2 million people per decade). Population Increase 1960–1980
+9mil
1980–2000
+9.8mil
2000–2020
+18mil
2020–2040
+24.3mil
PAG E
18
User Description The target audience member is 45–65 years of age, a frequent traveler [three times per year or more] who visits places of interest during travel. As much as possible, the user avoids 800-numbers, travel agents and airport employees, and instead relies on the modern tools of mobility: his/her trusted smartphone, laptop, airport kiosks and a GPS system. The Baby Boomer generation is the fastest growing percentage of the United States population (source: US Census). Interactive mapping software designed specifically for this audience does not exist. The target audience may find this software useful because of an increased call to action for unfamiliar duties. As the Baby Boomer generation approaches retirement, obligations arise regarding their declining health as well as their parents’ declining health. Wayfinding assistance for transportation (i.e. from assisted living facilities to doctors offices for routine evaluations or to hospitals for surgical procedures) requires effort and attention. Improved designs of interactive maps for handheld devices can provide wayfinding assistance by helping the user navigate unfamiliar territories. This can be achieved by providing visual information specifying the names, positions, shapes, and sizes of (surrounding/destination) buildings, pedestrian walkways, street/traffic signs, user controls (zoom in/out, toggle overhead/perspective view, clearly labeled Exit/Help buttons), as well as the visibility of the system’s status (including time/date, current/next action, route/progress/location indicator). A 1999 article titled “Technology Needs of Baby Boomers” published in Issues in Science and Technology states the following: “Although people are living longer, the natural aging process does affect vision; physical strength and flexibility; cognitive ability; and, for many, susceptibility to illness and injury. These changes greatly affect an individual’s capacity to interact with and manipulate the physical environment. The very things that we cherished when younger, such as a home and a car, may now threaten our independence and well-being as older adults.”
PAG E
19
Qualitative Survey
Which of the following handheld devices do you own? Cell Phone
PDA
Mobile GPS
How often do you use your mobile device(s)? Rarely
Sometimes
Often
Frequently
What features do you utilize on your mobile device? (please select all that apply) phone [voicemail, voice dial, ring tones] email [email, SMS/EMS/MMS text messaging] connectivity [web browsing, webmail, instant messaging] multimedia [audio & video playback, recording & streaming; camera; photos] office [personal info manager, contacts, calendar, to-do list, MS Office documents, calculator] games navigation [maps or directions] downloaded 3rd party applications other (please specify) Which features does your device perform well? phone [voicemail, voice dial, ring tones] email [email, SMS/EMS/MMS text messaging] connectivity [web browsing, webmail, instant messaging] multimedia [audio & video playback, recording & streaming; camera; photos] office [personal info manager, contacts, calendar, to-do list, MS Office documents, calculator] games navigation [maps or directions] downloaded 3rd party applications other (please specify)
PAG E
20
Qualitative Survey
What features do you desire most from your mobile device? email [email, SMS/EMS/MMS text messaging] connectivity [web browsing, webmail, instant messaging] multimedia [audio & video, recording & streaming; camera; photos] office [personal info manager, contacts, calendar, Office documents] games navigation [maps or directions] downloaded 3rd party applications other (please specify) Please rate the ease of use for the following features (if applicable): email n/a
poor
fair
average good
excellent
fair
average good
excellent
fair
average good
excellent
poor
fair
average good
excellent
poor
fair
average good
excellent
fair
average good
excellent
connectivity n/a
poor
multimedia n/a
poor
office applications n/a games n/a
navigation n/a
poor
downloaded 3rd party applications n/a
poor
fair
average good
excellent
average good
excellent
other (please specify) n/a
poor
fair
Please briefly describe an occurrence when one of these features did not work correctly. (be sure to specify the feature) PAG E
21
Qualitative Survey Results This survey of 35 participants within the target audience was conducted to learn what mobile applications are most valuable to the audience. As shown in the results below, the participants are generally satisfied with every application except navigation. This indicates that there is room for
Navigation
3rd Party
Games
Office
Multimedia
Connectivity
improvement in the perception of mobile navigation.
Extremely Satisfied
Somewhat Satisfied
Average Response Satisfied
Dissatisfied
Extremely Dissatisfied
PAG E
22
Addressing the Needs of the Baby Boomer Generation From early discussions with my advisor, I learned of both the rapidly growing market for designing interfaces delivered on handheld devices and the rapidly growing Baby Boomer population. In 2005, the Travel Industry Association reported that the average age of a traveler was 46 years (U.S. Travel Industry Association, Domestic Travel Market Report, 2006 Edition). While the Baby Boomer generation is the fastest growing percentage of the U.S. population and, moreover, the percentage of the U.S. population with the highest income, interfaces for handheld devices designed specifically for this market are virtually non-existent. The intention of my initial survey was to determine an area of emphasis between the following categories of software for handheld devices: Email, Connectivity, Multimedia, Office, Games, 3rd Party, and Navigation. Each survey participant was a member of the Baby Boomer generation. The results indicated that the subjects were generally satisfied with all other software for handheld devices except navigation/mapping (if I could conduct this research again, I would ask this same audience “why are you dissatisfied?”). Upon reviewing existing models, I discovered there was a lack of attention to aesthetic and design principles. In the book “Mobility and Transportation in the Elderly” (p1), Klaus Warner states the following: “…at older ages, speed of behavior becomes slower; the slowness affects sensory function, mental activities, and motor activities such as walking, controlling a vehicle, and making other skilled manual movements.” While the above statement is applied to the elderly rather than this research’s target audience of Baby Boomers, much can be learned from the provided implications. To summarize Warner’s statements: as ages increase, physical and cognitive performances decrease which require additional assistance from available resources. In two of the aforementioned cases (“walking, controlling a vehicle…”) this additional assistance can be provided through interactive maps on handheld devices.
PAG E
23
4
Existing Systems This section describes the Pros and Cons of existing systems. While problems with interactive maps including connectivity and accuracy are mentioned in this document, these are system problems which exceed the scope of this study. Instead, this project focuses on communication problems including legibility and visual hierarchy.
Internet Map Applications Pros
Easily Accessible to Internet users. Free or inexpensive solutions to navigation. Highlights points of interest.
Cons
Visual information does not address parking, construction, or indicate the location or size of most buildings. Accuracy of Internet maps is uncertain (this is a system problem and exceeds the scope of this research).
PAG E
25
MapQuest.com Pros
This web-based navigation application, like many others, is a free service to anyone with Internet access. It allows users to quickly plan a route and, over the years, its users have become familiar with the software.
Cons
Representations of buildings and parking are not present. The strokes used to represent streets can be simplified by using smoother lines; this will facilitate quicker recognition. More attention can be given to the alignment of street names.
Figure 4.1 http://www.mapquest.com Š2006
PAG E
26
Maps.Yahoo.com Pros
Yahoo! Maps was the first to utilize points of interest which help travellers locate nearby destinations. The strokes are simplified so as to minimize a user’s distraction and confusion.
Cons
The address entered was “128 N Oval Mall Columbus, Ohio 43210.” The star with outlines represents YahooMaps’ location (incorrect). The orange circle represents the correct location. Errors in location determination are not a design problem, but a system problem. As a designer, recovery and orientation may be built into the system through location/destination verification and/or easily accessible rerouting capabilities. Correct location of the input address: 128 North Oval Mall, Columbus, OH 43210
Figure 4.2 http://www.maps.yahoo.com ©2006
PAG E
27
GoogleMaps Pros
GoogleMaps was the first to provide a photo-realistic representation on a web-based mapping service. GoogleMaps is perhaps the most popular because the images provide a better sense of spatial orientation than any other Internet mapping services.
Cons
The address entered was “128 N Oval Mall Columbus, Ohio 43210.” The red pointer represents GoogleMaps’ calculation (incorrect). The orange circle indicates the correct location. The photograph displays information (shaded areas, trees, etc.) which may cause data overload.
Correct location of the input address: 128 North Oval Mall, Columbus, OH 43210
Figure 4.3 http://www.maps.google.com ©2006
PAG E
28
Mobile Navigation Pros
Inexpensive mobile mapping solutions. Indicates points of interest with reviews.
Cons
Ambiguous graphic representation of space. Connectivity affects usability (which is not a design issue, but a system difficulty).
PAG E
29
Microsoft Pocket Streets Pros
Microsoft Pocket Streets is a cost-efficient solution to mobile mapping. Furthermore, the software does not require high bandwidth speeds.
Cons
This ambiguous graphic representation of the space does not indicate the user’s position, a route path, or destination. The concentration of strokes appears to prevent users from obtaining a sense of spatial orientation. The high contrast of the blue and white squares (though the purpose of the squares is unclear) may be considered unnecessary and distracting.
Figure 4.4 Š2006 Microsoft Pocket Streets
PAG E
30
Zagat To Go Pros
Zagat To Go features the famous Zagat reviews of fine dining in various cities. The application also incorporates an interactive map, providing assistance for users in reaching their destinations. The interactive map approaches a minimalist design, supporting visual organization.
Cons
The software provides only an overhead view of the space, which is not a familiar view to most pedestrians and automobile drivers. Varying placement of text may cause distractions.
Figure 4.5 Š2006 Zagat To Go
PAG E
31
Google Maps Mobile Pros
Google Maps Mobile is a free service which is compatible with more handheld devices than any other mobile mapping software (source: Google). The full version, Google Maps, is the most popular due to its frequent updates and advancements. This mobile interface closely resembles the desktop version with which most people are familiar.
Cons
Currently, the coverage area for Google Maps Mobile is contingent upon the coverage area of the cellular phone service provider and will not operate if a data connection is unavailable.
Figure 4.6 Š2006 Microsoft Pocket Streets
PAG E
32
GPS Navigation Systems Pros
Realtime location indicator. Perspective view of current location. Points of interest are preloaded into software. Rerouting for pedestrian or low traffic travel. Strong connectivity in rural areas.
Cons
Visual information does not address parking, construction, or indicate the name, location, and size of most buildings.
PAG E
33
Magellan Pros
Points of interest are preloaded into software. Rerouting for pedestrian or low traffic travel. Strong connectivity in rural areas.
Cons
The wide color palette of the interactive map may not provide a sense of organization; overlapping symbols and text could detract from legibility and readability. The visual information does not address parking, construction, or indicate the location, size, or name of surrounding buildings.
Figure 4.7 Š2006 Magellan
PAG E
34
TomTom Pros
TomTom offers mapping software that can be purchased and downloaded from their website and used on most GPS-enabled smart phones.
Cons
The strokes around many of the graphic elements may contribute to subtle yet unnecessary distractions. Furthermore, the varying alignment and text sizes may not support visual uniformity.
Figure 4.8 Š2006 TomTom
PAG E
35
Research
TomTom
The photograph below was taken by a user of the TomTom software while visiting The Colosseum in Rome. Here the user displays a view of the software interface in relation to his current location. As shown, The Colosseum, a world renown landmark, is not represented on the user’s map.
Figure 4.8.1 Š2006 TomTom
PAG E
36
Garmin Pros
The condensed color palette may provide the user with a better sense of priority, allowing the user to quickly differentiate between the route path and background.
Cons
The visual information does not address parking, construction, or indicate the location, size, or name of surrounding buildings.
Figure 4.9 Š2006 Garmin
PAG E
37
MapQuest GPS Pros
MapQuest was the first to introduce inexpensive subscription-based GPS navigation software use (currently for as low as $4.17/month). Similar to Garmin, the interactive maps utilize a condensed color pallete which may provide the user with a better sense of priority and visual organization.
Cons
The visual information does not address parking, construction, or indicate the location, name, or size of most buildings.
Figure 4.10 Š2006 MapQuest
PAG E
38
5
Guidelines This section contains guidelines for creating an interactive map for handheld devices. Although many of Jakob Nielsen’s 10 Usability Heuristics for Interactive Design are included, every guideline can not be used as some are inapplicable to this specific context. Nielsen’s Heuristics are intended to be quite general, which allows opportunities to provide specific guidelines for creating interactive maps for handheld devices, which are shown on the subsequent pages as well.
Ten Usability Heuristics
1
by Jakob Nielsen
Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2
Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3
User control and freedom Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue.
4
Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
This heuristic addresses
5
Error prevention (removed from evaluation)
system problems that can not
Even better than good error messages is a careful design which prevents
be solved through design.
a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 6
Recognition rather than recall Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
This usability heuristic is more
7
Flexibility and efficiency of use (removed from evaluation)
appropriate for the interface
Accelerators -- unseen by the novice user -- may often speed up the
design of desktop software.
interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8
Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. PAG E
40
9
Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10
Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
PAG E
41
1 Ten Usability Heuristics
Visibility of system status
by Jakob Nielsen
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Status bar indicates remaining duration of route.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
42
2 Ten Usability Heuristics
Match between system and the real world
by Jakob Nielsen
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow realworld conventions, making information appear in a natural and logical order.
Terminology from daily conversation.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
43
3 Ten Usability Heuristics
User control and freedom
by Jakob Nielsen
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue.
Graphic icons allow the user to easily change the map’s view settings and return to the previous state if necessary.
11:00am 17mph 0.7 miles: Hopkins Hall
» Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
44
4 Ten Usability Heuristics
Consistency and standards
by Jakob Nielsen
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Consistent indicators provide feedback of current location.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
45
6 Ten Usability Heuristics
Recognition rather than recall
by Jakob Nielsen
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Non-intrusive graphic icons facilitate user control.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
46
8 Ten Usability Heuristics
Aesthetic and minimalist design
by Jakob Nielsen
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Map design reduced to buildings and walkways providing a hierarchy of information.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
47
9 Ten Usability Heuristics
Help users recognize, diagnose, and recover from errors
by Jakob Nielsen
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Clear and succinct error message provided if/when a deviation from route is detected.
11:00am 17mph 0.7 miles: Hopkins Hall
Âť Right on Woodruff Ave Left on College Ave
Auto Reroute? Yes
Help
No
Home
PAG E
48
10 Ten Usability Heuristics
Help and documentation
by Jakob Nielsen
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Clearly marked access to the “Help” menu.
11:00am 17mph 0.7 miles: Hopkins Hall
» Right on Woodruff Ave Left on College Ave
Help
Home
PAG E
49
While many of the existing heuristics for interactive design are applicable to this project, there are areas regarding the design of interactive maps which can not be addressed from general concepts. The following pages are standards that I have developed which apply strictly to interactive maps for handheld devices; they are derived from technical specifications, studies of typography on mobile devices, and design principles for legibility and information organization.
PAG E
50
Original Map Campus Area Bus Systems OSU’s Campus Map used for Campus Area Bus Systems (CABS) orientation directories. While this map was intended to be used in print, the simplified geometric shapes and visual indication of walkways make this map an ideal starting point for an interactive map.
PAG E
51
Revised Map for Interactive Context Revised map using web-safe colors and simplified graphics to optimize bandwidth speed and visual clarity when viewed on handheld devices. The outlines were removed because the color contrast between the buildings and background is now increased.
PAG E
52
WorldType® Font Suites for Mobile Devices Monotype Studios has developed typefaces designed specifically for use on handheld devices. Below are some of the typefaces availabe at the following URL: www.monotypeimaging.com/ProductsServices/catalogresults.aspx?style=UI&usagecategory=Mobile In the solution provided for this research the typeface used is “Univers MT Mobile Condensed”
PAG E
53
WorldType速 Font Suites for Mobile Devices For the solution developed from this research, Univers Mobile Condensed was selected; other ideal typeface selections can be found at the following URL: http://www.monotypeimaging.com/ProductsServices/ESQMobile.aspx
PAG E
54
Guidelines An interactive map designed for handheld devices must possess the following characteristics: Minimalist Design To eliminate confusion due to unnecessary visual elements or effects, minimalist design must be utilized when creating graphic elements for the interactive map. Visual effects (such as drop shadows, bevel/emboss, and outlines) should be eliminated to avoid diverting the user’s attention from the primary and most important information: wayfinding assistance via an interactive map. Most interactive maps fail to indicate a building’s size, location, position, or shape. Thus, one may argue: drawing buildings onto an interactive map refutes the idea of minimalist design. However, displaying buildings does not refute the idea of minimalist design because this visual information provides an increased sense of the user’s space. When creating graphic representations of buildings, only the shape and area are displayed creating a flat, two-dimensional representation allowing the user to see behind the building and beyond. The map may also offer a threedimensional building option (indicating the building’s height) as well as color and possibly even the building’s texture to provide the option of further understanding the space based on their preference. figure 5.1 example of minimalist
The graphics selected for the location/route indicator must also adhere to
design for map.
the idea of minimalist design and refrain from using distracting visual effects which may divert the user’s attention. Complex graphics—specifically for the location indicator—are discouraged while simple arrows are ideal because of their ability to accurately identify the users location without ambiguity. Conformity to Technical Specifications The design must conform to any and all technical specifications as provided by the manufacturing/engineering/production team(s). In the context of handheld devices, these specifications include • size (typically 240px x 320px, 3:4 aspect ratio) • colors (typically web-safe, RGB, 16 bit) • software (the application must be compatible with the device’s operating system) PAG E
55
the device’s hardware (the solution used in this research requires a fully functioning QWERTY keyboard built into the device’s hardware) Typography Verdana
1ijl
Futura
1ijl
In general, any typeface selected for interactive design must be legible at small scales (as small as 8pt) and the characters must have clear distinctions from other similar characters. As shown in the diagram on the left, the
1ijl
Copperplate
similar characters from the typefaces in the left column are able to be
1ijl
distinguished while the characters from the typefaces in the right column
Helvetica
LipoD
Georgia
1ijl Univers
1ijl
1ijl Orator
1 i j l
figure 5.2 Examples of
are not easily distinguished (particularly Futura). Furthermore, monospaced typefaced are not ideal because of the amount of screen real-estate needed to display text. The typefaces Georgia and Verdana were designed for use on screen (specifically, computer monitors) and are ideal choices because of their wide counterforms which facilitate legibility on screen.
typefaces. The column on the
As outlined on page 53 of this documentation, Monotype Studios has
left shows typefaces which are
developed typefaces specifically for use on handheld devices. For the
ideal for use on screen while
solution developed from this research, Univers Mobile Condensed was
the column on the right shows
selected; other ideal typeface selections can be found at the following URL:
typefaces which are not.
http://www.monotypeimaging.com/ProductsServices/ESQMobile.aspx Information Hierarchy The interactive map must give attention to visibility of system status (time/ date, current/next action, location/route indicator), color palette (utilizing system compliant colors for coding of buildings, pedestrian walkways, streets/buildings names, street/traffic signs, water bodies, origin/destination (dominant color, high contrast from other colors) Hierarchy Distinctions During Pedestrian/Automobile Versions of Map During Pedestrian mode, the location/route indicator and origin/destination dominate visually followed by the buildings names. During Automobile mode, the location/route indicator and origin/ destination dominate visually followed by the streets names then the
figure 5.3 Examples of hierarchy distinctions between pedestrian
buildings names (the names of buildings should not compete with the names of the streets).
[R] and automobile versions [L]. PAG E
56
Required User Controls • Zoom (in/out) • Exit button (allowing the user to exit the program from any screen) • Toggle between overhead/perspective views • Help menu • Menu button (allowing the user to return to the Main Menu from any screen) Orientation/Position Consistency The virtual orientation of map view must change to seamlessly match the orientation and position of the user in the physical world as well as the vertical or horizontal orientation of the handheld device. That is: if the user turns to face a building on his/her left, the map must quickly and smoothly reorient in accordance with the users orientation change. Also, if the user turns the handheld device from a vertical position to a horizontal position (or vice versa), the map must quickly and smoothly reorient from a vertical application to a horizontal application (or vice versa) accordingly.
PAG E
57
Pedestrian vs Vehicular Navigation When a user is traveling in a car compared to walking, the user’s conditions change which affect the way the application is used. The major differences between pedestrian and vehicular navigation are: • Route Since an automobile travels on a street, it is important that the names of the streets are clear and visible at all times to the driver. Furthermore, since a pedestrian travels on walkways, it is important that the walkways are clear and visible at all times to the pedestrian. • Speed Another major difference between automobile travel and walking is speed. Minimalist design for the interactive map (including restricted color palette, simplified shapes for buildings and streets, etc) facilitates readability while the user is moving at both high and low-speeds. • Destination Unlike a pedestrian, a user travelling in an automobile has two destinations: an immediate destination (where to park) and a final destination (actual location of building, etc). This means the automobile traveller must focus more on the streets leading to a place for parking during travel while the pedestrian’s attention will be focused on both streets and buildings while searching for the final destination. This is why, while in pedestrian mode, the building’s names are more legible than while in automobile mode and, adversely, while in automobile mode, the street’s names are more legible than while in pedestrian mode.
PAG E
58
Addressing Shortcomings of Existing Systems Since the field of designing interactive visual wayfinding systems for handheld devices is relatively new, an extensive knowledge-base for creating such content does not yet exist. Some of the primary issues concerning the design of interactive maps are shared with mobile web usability such as scalability, effects of natural or artificial lighting, bandwidth efficiency, and using a web-safe color palette. The usability guidelines provided by Rolf Molich and Jakob Nielsen for human-computer interaction (using natural dialogue, speaking the user’s language, minimizing the user’s memory load, consistency, error prevention, and providing feedback, appropriate error messages and exits) definitely apply as well. Although fundamental design principals and usability guidelines for interactive web-based experiences provide a valuable basis for reaching any design solution, when creating wayfinding information for handheld devices, unique issues which are specific to the design of interactive maps arise. Those issues include [but are not limited to] the following: • Legibility and Readability While in Motion Visual performance suffers from increasing walking speed (Mustonen, Olkkonen, Häkkinen, p.1243) and mobile device software is intended to be used while a person is stationary or en route. Interactive mapping software is typically used while the user is in motion, therefore, strict attention should be given to the software engineering involved. Although mobile devices operate on lower rates of data transfer (than personal computers, for example), advanced engineering is needed to enable the system to run smoothly while in motion. If Global Position System technology locates the longitude, latitude, and altitude of a subject, the technology should also be capable of keeping the map’s position constant while the user is in motion, thus displaying a continuous and smooth animation regardless of external movement (as shown in the project demonstration). This continuous and smooth animation will help to optimize legibility and readability while the user is in motion. • Spatial Orientation Awareness While viewing a perspective version of an interactive map, the content must shift in accordance with the users position as well as the direction PAG E
59
in which the user is facing. In the ideal, this adjustment will occur without any delay. Many of the shortcomings discovered are problems that are not able to be solved by design alone and require engineering support. Specifically, this includes the problem of many of the web-based mapping service’s inaccuracies. The difference between the proposed and existing solutions are as follows: The proposed map utilizes simplified graphics which may provide the user with a better sense of spatial orientation by indicating walkways and the figure 5.1 pedestrian map
name and location of buildings. The familiar parking symbol used in most physical wayfinding programs is utilized so that the user is not forced to become familiar with a new set of symbols. All strokes (particularly strokes that enclose the shapes) within the map were removed with the exception of the path indicating the user’s route. The intention is to prevent unnecessary visual information from competing with relevant information. This technique may also support an overall positive visual experience through the use of minimalist graphic elements. Furthermore, the screen resolution of handheld devices varies depending on the model. While iPhone and PalmTreo are popular due to their high screen
figure 5.2 pedestrian map
resolution, all handheld devices do not support the same output resolution. Since the proposed system is not device-specific, it is necessary to take into consideration the platform of all handheld devices. Reducing strokes (as well as other visual information) reduces the requirements for a device’s screen resolution.
figure 5.3 automobile map PAG E
60
6
Walkthrough The following pages are screen shots from the solution developed from this research. Each stage is a progressive walkthrough of the user (in pedestrian mode) travelling from The Ohio State University’s Union Parking Garage to Hopkins Hall. The interactive map provides organization of visual elements along the route; while the path of the user is always the most important, the surrounding buildings and walkways are the next most distinct visual elements in the following screen shots.
PAG E
62
PAG E
63
PAG E
64
Prototype
How to Launch the Demonstration 1 Visit the following website: www.MFAdesignThesis.com
2 Turn the handheld device on by clicking the power button.
3 Click the icon next to the word uMove near the center of the screen.
4 Click the “Get Directions” button from the Main Menu screen.
5 Click the “Next” button from the Directions To: screen.
6 Click the “Next” button from the Directions From: screen.
7 Click the “Start” button from the Summary screen.
8 Enjoy the demonstration!
PAG E
65
7
Conclusion
Results From this project, I have developed a solution based on guidelines of creating an interactive map for handheld devices. The results can be summarized by the following: • If design principles and usability heuristics are incorporated into interactive maps for handheld devices, it is reasonable to presume that the application will be more useful, usable, and desirable than the existing models and ensure better responses to communication, quicker comprehension, and longer retention. If more time is allocated, primary research and user testing can be conducted to more accurately measure the solution’s effectiveness. • Reducing visual information (including outlines, color palette, and contrast) is beneficial to the visual hierarchy of interactive maps for handheld devices. This reduction contributes to both the principal of minimalist design and also to guiding a user’s attention to the important visual elements during travel. The importance of visual elements is contingent upon whether the user is traveling as a pedestrian or in an automobile (see page 45). • Typography on interactive maps for handheld devices is unique; while basic legibility issues are still applicable (including alignment and hierarchy), typeface selection should be limited to typefaces which were designed specifically for use on screen. While there are many typefaces designed specifically for use on handheld devices, for the solution provided in this research, Univers Mobile Condensed was chosen.
PAG E
67
Contribution This project is a design for an interactive map to be used while moving that demonstrates the differences between pedestrian and automobile travel (see page 58). This project also provides guidelines on how to create an interactive map for handheld devices which are intended to support ease of use in the end product. Page 15 of this document describes the value of this research. Since GPS navigation – which has so much to do with visual communication design – is becoming more and more popular, it is beneficial to describe how visual communication design can improve the system. Currently, the standards for designing such a system are either non-existent or inaccessible. While an interactive designer will benefit primarily from the design recommendations provided in this document, a general reader will understand both the context of navigation via handheld devices and the importance of visual communication design as applied to interactive maps for handheld devices.
PAG E
68
The Future Mobile mapping technology has extended beyond merely reaching destinations. Furthermore, advancements in technology no longer require the complex structure of GPS for calculating one’s position as Wi-Fi Positioning System (WPS), General Packet Radio Service (GPRS), and simply cellular phone signals will provide cost-effective solutions to location-based software applications. With the appropriate amount of time and financial resources, future research on this subject may include direct comparisons of this solution to existing Portable Navigation Systems in realtime to obtain responses from the target audiences. After these results are collected, further design recommendations can be applied. These design recommendations can then be compared to the solution provided in this documentation as well as existing Portable Navigation Systems. A future area for possible development may be an interactive map for handheld devices that incorporates a digital calendar; that is: task oriented reminders would be location based. Since so much of what we do is based on time and location, maybe there is a way to better converge these two popular smart phone applications. For example: this interactive map and calendar could assist students in finding classes on a university’s campus based on the current location and time of day.
PAG E
69
8
References
Bibliography
Books Beckman, John. The Virtual Dimension: Architecture, Representation, and Crash Culture. New York: Princeton Architectural, 1998. Print. Brauer, Wilfried; Freksa, Christian; Habel, Christopher; Wender, Karl F. Spatial Cognition II: Integrating Abstract Theories, Empirical Studies, Formal Methods, and Practical Applications. Berlin: Springer, 2000. Print. Cevik, Helsin. Map Usage in Virtual Environments. North Mankato: Storming Media, 1998. Print. Kane, John. A Type Primer. Upper Saddle River: Prentice Hall, 2002. Print. Lynch, Kevin. The Image of the City. New York: Triliteral, 1960. Print. Paul, Arthur. Wayfinding People, Signs, and Architecture. New York: McGraw-Hill Book Co., 1992. Print. Tufte, Edward R. Envisioning Information. Cheshire, Conn: Graphics, 2001. Wurman, Richard Saul. Follow The Yellow Brick Road: Learning To Give, Take, And Use Instructions. New York: Bantam Books, 1992. Print. Eason, K. Information Technology and Organisational Change Bristol, PA: Taylor & Francis Inc, 1988. Print. Conference Proceedings Bradley, A. Dunlap, M. A Pathway to Independence: wayfinding systems which adapt to a visually impaired personâ&#x20AC;&#x2122;s context. Proc. of IEE Symposium on Assistive Technologies, Glasgow. (2007) Strathprints. <http://www.cis. strath.ac.uk/~mdd/research/publications/03bradleydunlop.pdf>. Getting, I. The Global Positioning System. Proc. of IEEE SPECTRUM 30.12 (1993): 36. Baijal, R. Arora, M. GPS: A Military Perspective Proc. of Asian GPS Conference (2003) <www.gisdevelopment.net/technology/gps/ techgp0048.htm> Mustonen, T. Examining Mobile Phone Text Legibility While Walking. Proc. of Conference on Human Factors in Computing Systems, Austria, Vienna. Special Interest Group on Computer-Human Interaction, 2004. Web. PAG E
71
Bibliography
Articles Carey, T. “User Differences in Interface Design,” Computer, vol. 15, no. 11, pp. 14-20, Nov. 1982. Print. Coughlin, Joseph. “Technology Needs of Aging Boomers.” Issues in Science and Technology, 22 Sept. 1999. Print. Darken, R.P., “Wayfinding in Large-Scale Virtual Worlds” Special Interest Group on Computer-Human Interaction, Denver, CO: 1995
PAG E
72