Paper Prototyping
Prototype photos:
The photographs below show the first iteration of the paper prototype. The prototype aims to test the interface for the following:
From Arjun (a parent back home who want to get an immersive visual experience of his son's stories)'s perspective
- ability to understand the interface in order to use it for making/receiving calls
- intuitively switch between different modes of location exploration
- view/post comments
- view shared tweets/posts/images etc..
From Raj (a professional who wants to communicate his experience to his parents)'s perspective:
- ability to understand the interface in order to use it for making/receiving calls
- view/post comments
- ability to guide parents in exploring location
- ability to share tweets/posts/images
|
|
|
 |
 |
 |
Main Screen
- Raj sees all his contacts with photos
- Hovering/Arrow gives call/text options
- Clicking on the photo by default starts a new call
|
Screen showing an incoming call (for Arjun).
- Name/Profile Photo shown (Raj is calling)
- Ability to accept/decline
|
Conversation Starts (In conversation View):
- In conversation
- Raj starts talking about MIT Charles river
- Raj is sharing the location to Arjun
- Arjun gets this prompt
|
 |
 |
 |
Interface for viewing the location.
- Arjun has clicked OK and views this location
- This is interactive 3-D view (see Navigation Control below)
- Arjun starts navigating by changing camera angle, height etc.
- He also sees comments (if Raj has put any)
|
Interface for adding a comment to a location.
- Raj wants to describe some specific things
- He can put comments and point it (like Entrance to MIT).
- When Arjun views/explores/navigates the location, he sees it.
- Arjun too can add comments.
|
Interface for viewing the notes.
- Arjun sees all the notes whenever he navigates the location
- (realtime as well as offline)
|
 |
 |
 |
Interface with multiple notes.
- This is what Arjun sees if there are multiple comments
- '#' on a sticky note as an indicator of comments
- It can be expanded by clicking
|
Screen for viewing the tweets and links to the available
articles and maps.
- Raj has connect his twitter account with teleport
- Arjun can now see all Raj's tweets
- One of Raj's tweet is about Yosemite National Park
- Interface automatically suggests Arjun
- if he wants to see Yosemite National Park pictures
- or articles related to this location
|
Safety prompt window asking for a confirmation to change the viewing
mode.
- Arjun has clicked on pictures
- A prompt window to ensure that it wasn't an accidental click
- because it will change the mode
- user might get lost if we didn't ask the prompt.
|
 |
Image viewer.
- An efficient interface for picture navigation
- a preview below (thumbnail view)
- clicking on the preview shows the image in the actual window
|
Briefing:
A general briefing:
Thank you for participating and taking your time to test our prototype.
This is a very early prototype and the goal is to evaluate if our design is easy to use, and intuitive. We will ask you to do some basic tasks using our system and that would really help us understand usability/design
issues with our system. At any point of time, please feel free to tell us anything you see confusing or you found difficult to understand as that would really help us improve the design.
Please think aloud while performing the tasks so that we can understand any assumptions, issues, and inconsistencies with our design.
Thanks again for participating! :)
Briefing for 1st set of users (Arjun's perspective):
We are trying to design an application (similar to Skype) for parents living back home so that when they talk with their children, they can get an immersive visual experience of the the stories their loved ones tell.
- You will act as a 40 years old father named Arjun.
- Your son is Raj, a college student at MIT in Cambridge, MA.
- You are to talk to Raj and would really like to visually recreate the stories that Raj tells you.
- You will be using your home desktop computer to talk to Raj.
Briefing for 2nd set of users (Raj's perspective):
We are trying to design an application (similar to Skype) that allows people like us to share stories with our parents living back home in such a way that they get an immersive visual experience of the the stories we tell.
- You will act as a 20 years old student studying at MIT.
- Your father is Arjun living in India.
- You are to talk to Arjun and would really like to communicate your experience of living at MIT.
- You will be using your home desktop computer to talk to Arjun.
Scenario/Tasks:
1st set of users (Arjun's perspective)
Scenario
You are Arjun! Assume you have a son Raj who will call you in a moment. While talking he will tell you a story about what he did, will share with you some location, tweets and photos.
Tasks:
- Raj is calling -- receive the call from Raj
- Raj is sharing a location -- please accept
- Try navigating the share location
- walk ahead
- turn left
- change camera angle to top view
- lower the height of the camera to see more closely
- There are a bunch of notes Raj has put on the location
- open the note
- put a comment
- Check if Raj has put some tweets
- Read tweets
- Check if Raj jas put some images
- Browse the image gallery
User testing observations (Round 1):
User 1:
Observations
- User ignored panning and altitude controls.
- Navigate icon was mistaken for a button.
- When looking through tweets the user tried clicking on the text to view additional information rather than using the text input box.
- User ignored aggregation panels: map, articles.
Feedback
- Was not obvious how to exit a mode.
- Found the voice transcription natural in the context of application though generally the user does not like it.
- Got irritated with the pop up window.
- Suggested that direct manipulation with a mouse would seem more natural than using the provided controls.
User 2:
Observations
- Likes exploring the interface, testing different navigation controls.
- Had difficulty finding how to move from the image viewing mode to reading tweets mode.
- Does not move directly to address the task but takes extra steps to explore the interface. For instance instead of directly viewing the location, goes to the tweets tab first.
Feedback
- Suggested it would be easier if mode change buttons were located within the main active window, not only from the bar above.
- No option to decline an invitation to view a comment. Interface becomes overcrowded with small windows.
User 3:
Observations
- Confuses navigate symbol for a button (bad internal consistency).
- Likes navigating, using different control buttons.
- No feedback that message has been saved. When adding a comment is concerned if the comment was saved or not.
- Easily finds exit buttons.
Feedback
- Wished there were smoother transitions between high-level and low-level navigation.
For instance, when taking a street view low-level navigation seems more natural. However, our interface provides only high-level mode change controls.
- When hitting exit would like to see a confirmation that the comments added have been saved.
- Suggested that dragging with a mouse when exploring the street view would feel more natural than using some of the buttons we provided.
Feedback summary
Inconsistency with expectations:
- Users ignored panning and altitude controls.
- Some description elements mistaken for buttons.
- Modal navigation in top panel not clear.
- Users ignored aggregation panels: map, articles.
- No feedback that message has been saved.
Consistency with expectations:
- Users found it easy to receive and accept calls.
- Took the time to explore locations in the google earth mode.
- Gave positive feedback about being able to interactively view the location, while talking.
Prototype iteration:
When testing the first prototype which combines high and low-level navigation styles we found that once in a low-level navigation mode users found it difficult to switch back to high-level navigation style. Our second prototype aims to provide more accessible low-navigation control for the three exploration modes: google earth view, images and tweets. Additionally, the second prototype removes internal inconsitencies between labels and buttons; adds safety pop up windows to facilitate adding/saving messages and exiting modes; minimises the number of icons and controls. Although we did not encounter issues with the interface being overcrowded, knowing that our targeted user group is mainly elderly we want to maximise the easy of navigation by minimising cognitive load.
Changes for Round 2:
- Labels look significantly different from buttons.
- A high visibility save button added to the type comments window for saving input.
- A pop-up window asking "Would you like to save your comment?" appears when user attempts to exit the comments mode.
- Low-level controls for switching between modes are added to the main active window.
- The left panel showing contacts and history is collapsed when user enters an exploration mode. The panel can be expanded by clicking an icon in the top left corner. The motivation behind this addition is to reduce cognitive load and maximise exploration area.
User testing observations (Round 2):
User 1:
Observations
Feedback
User 2:
Observations
Feedback
User 3:
Observations
Feedback
Issues to consider/resolve before moving forward: