Prototype Photos

Briefing

We are working on a document editor.  We’re focusing primarily on making it easy to create layouts and place content where you want it on the page.  Our test implementation is going to be for a blogging platform.
Here is a paper prototype of our user interface.  I’m going to give you pictures of layouts, and your goal is going to be to use the interface to create these layouts.  Just point or tell us where you would click or type, and we’ll handle updating the paper interface to reflect what would happen.

Scenario Tasks

We gave the users the following mockups of completed posts, and asked them to reproduce each one using the functionality available with our document editor.  
Mockup 1:

Mockup 2:

Mockup 3:

The three mockups were all designed to see how users would interact with the different features on our editor, with slight twists to see different tasks.  We decided to keep the tasks more open ended so that we could see the order in which people did things.
The first one emphasized uploading and adding multiple pictures side-by-side, and separately how users would react if they didn’t want the default sections (having no main title and having pictures first before text). The second one emphasized reshaping text boxes around pictures (or putting a picture in, causing the text box to reshape itself).  The third one emphasized putting in videos.

Below is a walkthrough of Mockup 2 in its second iteration:

Default screen:

Change of title to "My Trip to Disneyland":

Clicking on the text box, which brings up the text editing toolbar (attached the the text box being edited):

After typing text into the text box:

File upload dialog which appears after clicking on "+ Picture":

After 2 images are selected and uploaded, they appear on a pull-out tray to the right (under "+ Picture"):

The user drags File_1.jpg into the edit pane, and the text box filled with text will resize.

After the user drags "+ Section Title" onto the edit pane, it looks like this:

The user also adds a new text box:

The user also drags File_2.jpg, a larger image, from the left image tray to the edit pane:

All content in the document is displayed in this image, rather than just the content visible in the edit pane. In the final product, all content will only be visible through scrolling or a preview function.

General Tasks:

Task 1:  Change default title.

Task 2: Change or remove default body section.

Task 3: Select media from computer.

Task 4: Position media in document.

Task 5: Add additional sections and titles.

Task 6: Enter text in additional text/title sections.

Observations

Iteration 1 Observations:

Iteration 2 Observations:

Users had no trouble with the general layout and intent of the application - most of the useful feedback we got was about details of how individual parts should work and affordances that certain elements should have.  Things like affordances rely heavily on the appearance of elements and their responses to being clicked, dragged, or hovered over, so these will be more thoroughly tested in the computer prototyping stage.

Some Observations and Concerns:

• What happens when you click the button to insert an image - initially we had images appear at the bottom of the document, but it seems like users preferred having the image appear in a staging area where it could be dragged from instead of being placed directly on the page.
• Deleting sections/boxes - this is more of an affordance issue, but for our second mockup users weren’t sure how to get rid of the title box.  In computer prototyping we will have to decide whether to have a delete button appear on selection or hover.

We were pleasantly surprised at the results of our testing, and  we think we are on the right track with our design choices.

Prototype Iteration

There were a few details we changed on our second iteration.

• Multiple file upload - initially every file had to be uploaded separately.  One user commented that it was tedious to have to do this, and he should be able to upload lots of images at once and then drag them into the document to place them.  We adopted this new UI element in subsequent tests.
• Changing where items appear when inserted - they used to appear at the bottom of the document, now they appear in a special area where they are dragged from to position in the document
• Title position/appearance - the title will now be fixed to the user interface rather than being part of the document area - that way its role as the title of the post will be more obvious.