GR2 - Designs

Scenario

Task 1- Post Status
Kiki is a freshman at Senior House, and just got out of her last class of the day-- it’s 1pm. It’s a bright and beautiful Friday and all she wants to do is start the weekend early by exploring the greater Boston area and doing something crazy.  Kiki places herself at Senior House on the map, indicates she is feeling adventurous, and says what she is interested in doing.

Task 2- Browsing the Map
Kiki’s friend Gigi is a sophomore at EC, and does not have class on Friday.  He is trying to figure out what he wants to do, and looks at his open Marauder’s Map.  At the moment, his website is populated with a lot of friends and he is having a hard time going through them all.

Task 3- Managing Friends
He decides that what he wants to do is focus on friends who are single, and who are girls. To optimize this process, he creates a group with all of these girls.

Task 4- Change Visibility
With his new group in place, aptly named “Single Ladies”, Gigi applies the tag to his Marauders Map so that his single female friends are the only ones visible on his map. When he sees Kiki and her status on the map, he  jumps at the idea to wander with her.

Task 5- Instant Messaging Friend
To communicate with Kiki, Gigi sends her an instant message.  They talk further about a plan, and then meet up shortly after.

Designs

DESIGN #1:

General Layout:

Storyboard: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Analysis:

This design uses a lot of buttons and tabs for navigation. All of these have intuitive text labels that tell the user what they do. This makes it easier for a user to understand website options than icons alone. Organizationally, the tabs separate different types of buttons, and therefore break up the functionality of the website into digestible segments for the user.  The site also draws from the ribbon design that is applied by many programs such as Microsoft Word and Maya.  Having a familiar design strategy will help the user intuit what to do.  However, this program does not support quite as many options as Microsoft Word or Maya, so implementing the ribbon design may be overkill. It may be easier to understand and efficiently navigate the site if more options were presented in the opening toolbar and spaced around the site. One successful user interface that does this is Gmail. The chat, tags, and mail creator are all in the same view space, and require only one click (not two) to access.

The map in this interface is the core component of its use. Because of this fact, the design provides the map with most of the page space and allows for easy viewing and perusing.  The statuses of the users on the map are indicated by the color dots that represent them, so searching by status can be done in a glance.  To avoid clutter, further information regarding the activities of people on the map is not shown; instead, the user must hover over user icons to see what they have written. Because this is less efficient than a feed style layout, the ability to tag groups of users and search by name with the visibility lists is made available. In addition, the chat window is only opened up into view once a conversation has been initiated, so that visibility of the map is only compromised once a user has found people to communicate with.

One thing that seems to stand out as an issue in navigating of the map is the Map Navigator. The Map Navigator operates by splitting up the maps into different pieces that can be added by the user. This breaks the flow the map and navigation is less advanced than most map-based sites like Google Maps.

The ability to use map segments and tags allows users to go through the site mostly through clicks. Common processes in posting can be saved as shortcuts as well, so common postings do not have to be redone. If a user makes a tag, map, or shortcut that they do not want, they can simply right click the button that represents the shortcut, and delete it. If the user accidentally deletes one of these items, the paths to recreate them are short and simple enough that it is not a problem to redo them.

DESIGN #2:

Storyboard:

The story starts when Gigi and Kiki opens the Marauder's Map website on their phones.

After some chatting, Kiki and Gigi decide to go to Muddy Charles together. They closed the webpage and disappeared from the map. 

Analysis: 

This design stresses the flexibility of the interface - it should be usable on both smartphones and laptops, so the design aims to be simple, compact and clear. 

The primary layout uses maximized screen space to display the map - which can be panned and zoomed using multitouch gestures, like Google Maps. Friends' detailed info is shown/hidden according to zooming level. Tapping on a pin would bring up an info window as well as possible operation buttons related to that person. Most customization functionalities are hidden in a drawer at the bottom of the screen. Both the settings menu and the chatting window use 'drawer' metaphor because when they slide out, they may occupy only part of the screen and be half transparent, in order to reduce the loss of visibility of the map. 

For those who use the website on a PC, this design can be easily scaled up by making the menu drawer a floating panel or sidebar: 

Since the viewport of the map on a phone is relatively small, the interface also tries to make map navigation as easy as possible. The user is automatically positioned on the map at his wifi/GPS coordinates. By default he sees the map centered at his own location. He can scroll to a certain location by searching the address or a friend's name. When he receives and views a new instant message, the map will be automatically panned to the other person's location. 

In this system it is essential to make various states visible to the user -  for example, his own status, his applied filters (so he does not think somebody's offline by mistake), his received messages, etc. Since there is no such thing as status bar, I use flashing icons on the corner of the map to make the user aware what's going on.  

Pros:

1. This design is flexible for different scales. It uses colors and icons to code as much information as possible in a compact display, so a large portion of the limited screen space can be dedicated to the primary interest of the user - the map, and friends. 

2. Simplicity. Menus and buttons are not visible until one needs them. This design keeps the interface simple and clear, with minimal distraction. When a user doesn't have time to do complex tasks like tagging and filtering friends, he doesn't need to be bothered by such buttons overlaying on his map. 

Cons:

Learnability. While using a lot of custom icons and colors the interface can become confusing to a novice. This can be compensated by adding text annotations and (probably) a help screen at first-time use. 

DESIGN #3: in pdf format