iMap

iMap Boston is an iPhone application that allows users to explore the city’s development over the last 400 years using an interactive map.

iMap connects places, time, and multimedia to give users a casual and informative overview of the history of Boston, in a fun way.

Centered around a google map theme, it is a great visual tool for browsing. The timeline allows users to see changes in the city’s landscape and landmarks. Photos and drawings are pulled from historical archives to provide a more accurate depiction.

iMap is great for residents/visitors to Boston who are interested in getting a glimpse of its rich history. It can be used as an educational app or self guided tour app.

iMap is a concept app and not developed on the iPhone.

Objectives

1. Facilitate map browsing by allowing users to easily zoom in and out.
2. Allow users to change between different views in time so that they can see the changes in the land, buildings, or neighbourhood.
3. Provide location specific information as users zoom in for more detail.

App Organization

(http://www NULL.theyinhe NULL.com/2011/imap/organization/)

This presentation describes the app according to levels from less specific to more specific, starting with the Main page.

Main Page

(http://www NULL.theyinhe NULL.com/2011/imap/description/)

This map shows Boston in late 1640’s with the downtown core exaggerated. The surrounding areas are not considered part of Boston during this time, thus the regions are greyed out. As time goes on, the city of Boston expands, decreasing the size of Mill Pond and increasing the landmass of Boston Common out to sea. These changes can be easily seen as the user presses the Forward navigation button.

The map is the primary goal of the app and so takes up the largest area of the screen. This size also facilitates zooming in and out behaviours.

Main Navigation

Forward and Backward navigation arrows change the time frame by 50 years (results of user study). The time frame display at the top will update accordingly. This method of changing between time views was incorporated because it promotes browsing behaviour by allowing users to quickly compare the development between two different time frames. To further facilitate comparison, the transition between the new map and old map will be as follows: the new map will appear above the old map with the differences highlighted while the old map disappears leaving just the new map. This transition will allow users to see the changes more effectively.
* This navigation style was chosen after conducting user studies and asking a few potential users their browsing style. Using low fidelity prototypes, it is possible to determine whether 50 years is an appropriate time range.
The Events button gives users more information about the events of the 50 years.
The Search button allows users to search for events or location of the 50 years.
The Settings button switches between different views, map, satellite, or hybrid .

Events Page

(http://www NULL.theyinhe NULL.com/2011/imap/descriptionevents/)

After Forward button is pressed, Events button displays the number of events (or developments) within the new time frame.

Events give users a short description of the development of the city within the time frame. Event pointers correlate the map location with the word description. Users can scroll down the list of events. If they want to see it on a map, they can click on the description (which will darken, like in 1. Development of North End) and the corresponding event pointer will be centred on the screen, ready for further browsing. For more information, the user can click on the blue arrow button to see the Detailed Events page.

Interaction: When the Events button is clicked, the Events tab will slide up covering half the screen. The map will zoom in until the event pointers are visible. Then the map will centre itself with event pointer number one in the middle. Similarly, after user clicks the close button, the Events tab will slide back down. The event pointers will remain on the map.

The popup on the Events button displays the number of events or developments within the new time frame.
There are two methods to view events: 1. zoom in until the event pointers are visible. Clicking on an event pointer will slide the Event bar upward; 2. clicking on the Events button will open the Event bar and cause the map to zoom in until event pointers are visible.

Settings Page

(http://www NULL.theyinhe NULL.com/2011/imap/settings/)

The settings button changes the main map views: map, satellite, or hybrid.

Search Page

(http://www NULL.theyinhe NULL.com/2011/imap/search/)

Searches will show up in chronological order. Therefore, the database that stores the historical information should include time, location, and event values

Interation: Like all of the buttons on the navigation bar, the search tab will slide upwards when the search button is pressed. Pressing the cancel button will cause the search tab to slide downwards.

Detailed Event View

(http://www NULL.theyinhe NULL.com/2011/imap/descritionevents2/)

The functions of the menu bar in the Detailed Event View.

Detailed Events Navigation

The navigation bar in the Detailed Event View is different from the one in Map view.
The Forward and Back button changes the number of years by 20, instead of 50 on the Main page to give users a more in depth view. The Forward button increases the number of years until the present year. The Back button decreases the number of years until the first instance of the Event. In either case, the year in the time frame at the top changes accordingly.
The Description button slides up the description tab, which gives a more detailed explanation of the event throughout the years. Small pictures are also included, where available. Clicking on the picture brings the view to the Media section where a larger version of the picture can be seen.
The Media section also includes videos, augmented reality, etc. and can be browsed by swiping left to right.
The Settings button brings up the settings tab, similar to the settings tab in the Main page.
The Back button at the top goes back to the main Map page.
Detailed location view is the same format as the Detailed Event View

Conclusion

This app meets all of the goals:

1. Having the map as the main screen that takes up the largest area facilitates user browsing behaviours such as zooming in and out.
2. The Forward and Back navigation buttons allow users to change between different views in time easily. The time frame at the top of the screen gives users the visual cue.
3. The app is arranged to give high level information at the beginning and more details as users zoom in.

Next step: make low fidelity prototypes and test with users