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 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.
...
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: