Implementation

The TopoNav prototype is implemented on iOS and runs on a standard Apple

iPhone 5 (iOS version 7.1). With a 13 GHz dual core A6 processor, the device

provides smooth operations over existing map applications. It has built in GPS

receiver to determine the latitude and longitude coordinates of one’s current position.

Also a digital compass has been integrated to the device to obtain the direction that

one is facing, which can be useful when used with a map application. A web-based

solution is adopted which uses Google Map API to obtain geographic data for

TopoNav. Conceptually, this application can be ported to other platforms which have

built in GPS receivers and digital compasses.

With the user requirements collected I take the next step. The goal of TopoNav is

to investigate the usage of topological map in mobile navigation. I implemented

TopoNav along with following design concepts.

 Quick access to the desired destination - in order to help travelers find the

destination they look for as soon as possible, I try to make the selection of the

destination in TopoNav intuitive. The destination can be searched via text-entry,

similar to traveler’s previous experience with existing map applications such as

Google Maps or Nokia Maps.

There are two rationales behind this design decision. First, the observed travelers

all have experience with existing map applications. Users often create mental

models before they start use software and these mental models come from their

previous experience with similar software. These mental models are later

referred by the users to predict what they should do with the software. Second,

instead of general areas, observed travelers often select specific business or

address as their destination. Therefore, I assume that travelers would prefer to

have text-entry search in the navigation system.

The screenshots in Figure 4.1 show the implementation of this design concept.

There is a textbox in the view. While typing the name of the business, the address

of the place, or the category that the user is looking for, a list of options matching

the text entered displays below the textbox. Tapping one of the options on the list

will select the POI as the destination, and then the system will launch route

preview from the user’s current location to the selected POI.

Figure 4.1 Screenshots of TopoNav.

 Simplify map to focus on the calculated route - in order to make the TopoNav

easy to use on mobile devices, I eliminate as many unnecessary information on

the map as possible. Instead of using a traditional 2D street map, I choose to

represent the calculated route on a topological map.

From the requirement studies, the observed travelers often only looked for

information along the calculated route to destination. If travelers would like to

know how to get to the destination, they only require a general overview along

the route as guidance. It is not necessary to precisely represent every detail in the

area; instead, providing a rough outline of the calculated route in the map is

mandatory. In addition to this, simplifying the map can help to overcome the

limitations of the small screen on mobile devices. The resulting map should be

easier and clearer to read.

The user interface of the navigation view (Figure 4.1) is implemented following

this concept. Once the user selected a destination, the system calculates the route

and displays it on the map. Only the route to destination is drawn on the map,

other details, such as streets in the area, are omitted. By default, the map is at the

zoom level that the complete route can be displayed at once on the mobile device.

Based on the positioning methods available on the device, such as GPS, a blue

dot is displayed on the map to indicate the user’s current location. A red pin is

displayed on the map to indicate the destination.

The route is composited by multiple line segments. Each line segment represents

a street or road along the route. Naively placing every street name label along the

route might be problematic - labels might overlap with each other excessively,

and the resulting map is difficult or even impossible to read. To overcome this

label placement problem, labels are placed in order of their importance. Major

roads and the coming up street in next step are assigned with higher priorities. If

needed, a street name label is rotated and resized before placing beside its

corresponding line segment.

 Identify turning points and destination for orientation - to provide orientation

support, keeping the users aware of the turning points and destination is critical

in a turn-by-turn navigation system. Therefore, the TopoNav prototype is

designed to help users effortlessly identify these special locations along the

route.

In order to reduce the cognitive load from users, I choose to use navigation aids

such as photographs and written instructions. On the top of the screen, there are

the navigation instructions that describe what the user should do at next turning

point (for example, turn right onto Robson Street). A street image towards the

traveler’s point of view at the next turning point is displayed underneath the

topological map. By tapping the toolbar at the bottom of the screen, the system

displays a list view of all written directions and street images, which lets the user

browse through the list for a quick summary of the route and faster switching

between the steps. In addition to this, landmarks near the turning points and

destination are displayed on the map.

Before the actual navigation starts, users can choose to preview the calculated

route. By default, the starting point is selected and the corresponding street

image and navigation instructions are displayed on the screen. As shown in

figure 4.2, gestures like swipe left and swipe right are used to select previous

step and next step on the route. As the selected step changes, the street image and

navigation instructions on screen change too. In order to differentiate the selected

line segment from the rest of lines along the route, the selected line segment is

highlighted in black color, and the rest of the route is in green color.

To minimize the downloading load required during the actual navigation, the

system pre-fetches all the street images in background after a destination has

been selected. The rationale behind this is the system’s user experience and

performance in the actual navigation can benefits from preloading images,

speeding up image load time.