Human Computer Interaction
Exercise - Design Rationale
As part of Week 5, you were provided with a paper wireframing exercise on a hypothetical mobile application called MoodLog. As part of this homework exercise, attempt to write out the Design Rationale for how you have designed the wireframes in Exercise 1 and 3 from Tutorial Week 5. Skip Exercise 2 (the Web version).
Paper Wireframing.
You will be given an example scenario, after which you will attempt to draw/sketch paper wireframes for the scenario (in total three exercises).
Scenario:
A company has approached you to design a mobile and web version of a product called "MoodLog." MoodLog lets the user monitor how much time they spend at different places throughout the day and monitors their mood at those locations. The idea is that MoodLog will help people better understand how their life is affected by where they spend their time. The company does not specify how they want the application to determine the user's location. It could be based on manual tagging of location via text and/or via the upload of a picture, or it could be a mobile application that detects the user's location throughout the day with the GPS on their phone. However, the users will need to be able to enter in additional information about their locations. This should include the name of the location and where they are: work, school, a restaurant, cafe, gym, etc.MoodLog will also allow the user to rate themselves for a series of five lifestyle metrics including: mood, productivity, wellness, creativity, and intellectual stimulation. Finally, how the information about the user's mood is entered (e.g., is it a Likert rating scale? emoticons? a sliding scale?) is also flexible.
The following exercises must be attempted for this tutorial:
1. Exercise 1 (mobile version)
a. Screenshot 1: homepage, i.e. login and/or register. After login, assume that the application runs in the background.
b. Screenshot 2:The application detects that the user's location has been constant for a while so it prompts the user to add information about his/her current location. It may also automatically fill in some of the fields about the current location, which the user can still edit. You do not have show the keyboard in this screenshot. When the user would tap a text field the keyboard will pop up.
c. Screenshot 3: The application requests the user to enter a rating about their current mood across the five metrics.
2. Exercise 2 (web version of the interface)
a. Screenshot 1: Assume that the user has logged in on his/her home computer. In this screenshot showcase a scenario where the user can upload a picture from earlier in the day that he/she has already transferred from his/her mobile device. Also within the same interface the user can add information about the where the picture was taken (location).
b. Screenshot 2:The web interface then requests the user to enter a rating of their mood across the five metrics when they took the picture earlier in the day.
3. Exercise 3 (iPad version of the interface)
a. Screenshot 1: In this mobile interface showcase a scenario in which the user can track their five metrics over time. The application first requests for a date and then displays a graphical representation of mood change against time. You may also want to represent location information in this graph.
In the Design Rationale section you will need to justify your interface look and feel, design choices, layout, content, information visualization and organization.