Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

Wiki Markup
\[completed 1\]
Image Added
Mockup 2:
Wiki Markup
\[completed 2\]
Image Added
Mockup 3:
Wiki Markup
\[completed 3\]
Image Added

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 first iteration:second iteration:

Default screen:

Image Added

Change of title to "My Trip to Disneyland":

Image Added

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

After typing text into the text box:
Image Added

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

Image Added

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

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:
Image Added

The user also adds a new text box:
Image Added

The user also drags File_2.jpg, a larger image, from the left image tray to the edit pane:
Image Added
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

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.

...