You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

Paper Prototypes for SETENTS

For our paper prototypes, we initially made prototypes for all three of our designs from GR 2: the smartphone photo design, the webcam video design, and the smartphone drawing design.  After testing all of these designs on users, we decided to narrow our focus to the webcam video design, and iterated on that design for our next sequence of testing.

Prototype Photos

Original Designs:

1) Smartphone Photo Integration

Main editing interface, with a popup
showing how to install the mobile app

Smartphone image capture screen,
with an adjustable crop rectangle.

Main interface after snapping a photo
with the phone.  A thumbnail shows up
in the camera roll along the right side,
and the user has inserted this into the
document.

2) Webcam Video Capture/Sync

3) Smartphone Drawing

Revised Design:

Briefing

We gave similar briefings for each design, with changes to describe the unique capabilities of each one.

Smartphone Photo Briefing

You’re a student at MIT, and you were annoyed with taking notes on paper, so you’re trying out a new web-app instead (for the first time).

The web-app primarily advertises the ability to snap photos on your smartphone and seamlessly insert them into your notes.

As a good student, it’s very important that you take good notes - including all diagrams that the professor draws on the board - and then take time to review those notes later (before the test).

Smartphone Drawing Briefing

You’re a student at MIT, and you were annoyed with taking notes on paper, so you’re trying out a new web-app instead (for the first time).

The web-app primarily advertises the ability to use your smartphone to draw diagrams that instantly show up within the web-app. It also promotes the ability to annotate the diagrams from the web-app using your keyboard instead of drawing text on the screen.

As a good student, it’s very important that you take good notes - including all diagrams that the professor draws on the board - and then take time to review those notes later (before the test).

Webcam Video Briefing

You’re a student at MIT, and you were annoyed with taking notes on paper, so you’re trying out a application (for the first time).

The app primarily advertises the ability to record video with your webcam that’s synced up with the notes as you type them. It also should let you take snapshots from the video to insert into your notes.

As a good student, it’s very important that you take good notes - including all diagrams that the professor draws on the board - and then take time to review those notes later (before the test).

Scenario Tasks

For the smartphone app designs, we had one set of tasks.  For the webcam video design, we had a different one.  The sets of tasks mostly overlap. 

Smartphone Tasks

1. Prepare to take notes for 6.813. The lecture title is “Usability”
2. Take the following notes:

  • notes
  • notes
  • notes [important keyword] notes
    3. The professor drew a diagram on the board. Make sure you can remember it later!
    4. Take more notes about whatever you want
    5. Review the topic of “Learnability” which was covered in multiple lectures

Webcam Tasks

1. Prepare to take notes for 6.813. The lecture title is “Usability.” Make sure you have video to review later
2. Take the following notes:

  • notes
  • notes
  • notes [important keyword] notes
    3. The professor drew a diagram on the board. Make sure you can remember it later!
    4. Take more notes about whatever you want
    5. After a few weeks, you want to review the learnability lecture.
    6. When reviewing the lecture, you realize you didn’t quite catch the definition of “safety”. You should figure out the definition and revise your notes.

When we iterated the design, we changed the missing definition to "affordances", which is more relevant to the review topic of learnability. Otherwise we did not change the webcam tasks when we iterated our design.

Observations

Prototype Iteration

Based on the fact that our webcam design got the most enthusiastic response from our first round of users (enthusiasm for the concept, rather than better usability than the other designs), as well as the fact that in our opinion that design has more opportunities for UI innovation, we only iterated on the webcam design. 

The most negative user feedback we received on our original webcam design was on the separate review and edit modes. 

  • No labels