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.

Sample Scenario

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.

Observations

General Tasks:

Task 1: Change or remove 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.

Iteration 1 Observations:

Tasks	User 1	User 2
Task 1	- User had no trouble figuring out how to change text in a title box - Due to the limitations of a paper prototype, user did not immediately know how to delete a box - user 1 pointed to a box and asked how to delete it; we told the user that a small (x) delete button will appear in the corner upon selection. - User mentioned that dragging a box into a non-editable space should also be able to delete the box (much like when an icon on the Mac dock is dragged onto the desktop)	- User had no trouble figuring out how to change text in a title box. - User 2 also asked how to delete the box; we told him that a (x) would appear in a corner of the box.
Task 2	- User had no trouble figuring out how to change text in a body text box	- User had no trouble figuring out how to change text in a body text box
Task 3	- User had no trouble figuring out how to select and upload media from computer	- User had no trouble figuring out how to select and upload media from computer
Task 4	- User had no trouble figuring out how to move media from pane to document - User dragged media from pane to document (our final version will support both clicking and dragging) - User commented that media thumbnails should be visually deleted from the side pane once it is placed in the document, since users rarely need to place the same image or video multiple times in one document.	- User clicked on a picture thumbnail in the side pane and asked what would happen - whether it would appear in the center of the page, the bottom of the page, or hover in a sort of “staging area” above the entire document before it was finally placed in a location that the user has specified. We told the user that he could either drag it to a specific location, or click the thumbnail to have the image appear at the bottom of the document. - User prefers to click rather than to drag items/media into document
Task 5	- User had no trouble distinguishing between the new title and new section options. - User dragged the “new title” and “new section” button to the screen rather than clicking on them. (our final version will support both clicking and dragging)	- User had no trouble distinguishing between the new title and new section options. - User clicked the “new title” and “new section” buttons to make new boxes appear at the bottom of the document, and moved it around after initial placement
Task 6	- User had no trouble figuring out how to change text in new sections.	- User had no trouble figuring out how to change text in new sections.

Iteration 2 Observations:

Tasks	User 1	User 2
Task 1	Needed to explain that it was possible to delete the default title box. (We explained that an 'x' would appear in the corner.) Didn't have trouble finding where to enter the section title.	Had no trouble manipulating or deleting box - assumed it was possible to delete. Easily found the box to manipulate
Task 2	Easily figured out they just had to click on the box. Had no problem figuring out how to enter text or do formatting.	Clicked the box without trouble. Figured out formatting and entering text intuitively once in edit mode.
Task 3	After clicking on the '+(media)' button, it pops up a standard file browser dialog, so user had no trouble.	Already familiar with standard upload dialog, so had no problems.
Task 4	After repositioning where media appears, users had an easier time understanding they would drag it. (would possibly be even better to gray out the page behind the newly uploaded image.) Was a bit unsure how resizing the text would work because there was no instant feedback with text boxes resizing - will be more intuitive with computer prototype.	Needed a little help figuring out how to reposition images into the locations we gave on the specifications. (Maybe we should have some kind of texture around the image that would afford dragging.) Didn't have any trouble figuring out how to resize text - assumed that it would work automatically as it does.
Task 5	New section and new title were rather intuitive. Here we allowed them to click or drag, since that seemed to be more intuitive to some users the first time around. This user dragged the box in anyways.	New section and new title were again intuitive. This user just clicked them instead of dragging. We allowed that, and had the new area appear below the box that was most recently edited.
Task 6	Same as first task, more or less. Did not have any trouble.	Same as User 1.

Summarized Observation Analyses

Iteration 1:

Iteration 2:

General:

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.

Child pages

GR3 - Paper Prototype (Multimedia Document Editor)