Harry Potter - Marauder Map Application - UI Design
Introduction:
The Marauder Map is a magical map in Harry Potter series. At any given time, the map shows the location of the person in the castle. This quick design proposal captures the idea of porting the Marauder Map into a software application with the following primary and secondary goals.
Primary Goals:
- Ability to locate a person
- Ability to track the location history of the person in a time line
Secondary Goals:
- Ability to see the location history across various calendar dates.
- Ability to load / choose different maps
Description of Idea:
The Marauder Map application uses Search functionality as the main function, along with Time Line scroll. Like a typical map application (Google Maps) this app has the ability to zoom-in, zoom-out, drag-across-navigation. By default the user must Sign-in, to access the app. The sign-in is a security measure, to show only the user's friends' locations and time-line history.
The Screens
(The background pencil sketch art courtesy - Google Image Search)
The Major Components:
The Search Box
This is a versatile search box. As the user starts typing the name, the map will populate the pics of people (from the user's friends list) and their location in the current time. The below shown example shows the suggestion as the name is being typed, and the location of people found in the search result.
After the person is located, it shows the path he/she travelled across the castle.
The Time Drag slider has a marking to it's right, in terms of icons.
The time ranges from midnight (top moon icon) to Noon (mid sun icon) to midnight (bottom moon icon).
The time drag has two pearl shaped markers on top and bottom.
The bottom marker's position denotes the current time.
There is a slider on top which can be used to drag vertically across the time line. According to the handle's time position, the selected user / searched user's location will be shown in the map.
The Calendar (pop-open component) can be used to select a different date. Ideally the calendar should not allow the user to select a future date, or a day on which the recording / tracking was not performed.The UI shown above does not capture this consideration.
Other components:
The major other component is the SETTINGS UI for this app. This is where, the user can add / manage his friends list. Also changing the default map, the duration of time-tracking-to-be-done etc can be set here.
Human-Computer Interaction:
Mouse is the primary tool for interaction. Clicks and drags form the majority of action-metaphors here.
Possible Development Media:
1. Native Desktop application (Windows / Linux / OSX)
2. Rich Client Application (Flash)\
3. Web-only Application (HTML, CSS, Javascript) Note : Due to technical limitations with HTML and Javascript and browser issues, some UI changes may be required for proper implementation.
Comments