WordPress Front-end Editor — Usability Test 2

I did a usability test on the WordPress Front-end Editor 0.8.5 plugin with the Twenty Thirteen theme on WordPress r27243.

Summary

  • No trouble finding the Edit link inline, editing a title, or adding a paragraph
  • Lots of difficulty saving
  • Difficulty adding a new post
  • Featured image area is not clear
  • Back button results in lost edits
  • Difficulty adding a link (back-end editor)
  • Difficulty adding an image (back-end editor)

You can download the full video here: deaea9a3.mp4.

Points of Confusion

Difficulty saving (Length: 1:56)

Difficulty adding a new post on the front end (Length: 0:42)

Featured image area looks like a place you can “write something” (Length: 0:07)

Back button exits the editor without saving and without a prompt (Length: 0:06)

Other Insights

Clicks the pencil image in the featured image area to add a paragraph (Length: 0:49)

She gets stuck in the wrong editor for the duration of the test, however, she has trouble adding a link as well as adding an image (which she completely misses) and these are still good examples of a beginner having trouble with editing.

Difficulty adding a link in the back-end editor (Length: 2:11)

Difficulty adding an image in the back-end editor (Length: 1:21)

Successes

No trouble finding the inline Edit link to open the editor (Length: 0:30)

No trouble editing a page title (Length: 0:33)

Survey Responses

  1. How hard was it to find and open the front-end editor at the beginning?
    It was easy to find the front-end editor. Since edit link was there for the page and post, I was able to find it easily.
  2. Was it easy or hard to find all of the editing functions you needed? (such as bulleted lists and adding an image)
    It was easy to find the features listed. Everything was given above the new page.
  3. Did anything about the front-end editor frustrate you?
    Yes, First time I deleted a line in the post and I was looking for save link, but it was not given there. If save link was there then it would be better.
  4. What did you like most about the front-end editor?
    It’s really easy to add and edit. New users will definitely understand the editor easily.

(For Reference) Tasks Used in the Test

  1. Sign in.
  2. Click the “home” icon in the top toolbar to visit the site.
    This site has been equipped with a front-end editor. See if you can figure out how to use it to delete the first sentence from the latest post.
  3. Just in case you didn’t figure out how to open the front-end editor in the last step, I wanted to explain how because you’ll need to know for the next several steps. To reach the front-end-editor, you can either click the “Edit Post” in the toolbar at the top of a post or page or you can click the “Edit” link on the post or page itself if the theme provides one.
    Click on the Lorem Ipsum page and change the title to something else using the front-end editor.
  4. Go back to the first post you edited, add a new paragraph using the front-end editor, and save the changes.
  5. Figure out how to create a new post using the front-end editor.
  6. Add a bulleted list.
  7. Add a link.
  8. Add an image.
  9. Tag the post with “example” as the tag.
  10. Save changes and exit the front-end editor.

User’s Computer Info

  • Operating System: Windows 7 6.1
  • Browser: Windows Chrome 33.0.1750
  • Display: 1280

Testing Notes

  • It’s unfortunate that the task window is placed at the top right. However, in the first usability test, the person had already moved the task window and still couldn’t find the Update button at top right (see video below, length: 2:50). To get around the problem, we could ask the tester to move the task window to the bottom left at the beginning of the test and hope that it doesn’t tip them off that we’re trying to see if they can find the Update button at the top right. /hat tip Sam and Hugo for the suggestion

My Observations

  • She didn’t say anything about it, but I think seeing revisions after clicking autosave seemed fairly confusing to this person.
  • I still really think “Save” makes more sense for users than “Update” in the front end editor context. I think it would make it easier for them to find.

My Suggestions

The following suggestions are based on this test only.

  • Once the inline Edit link is clicked, replace it with links for Cancel and Save
  • Change the color of the Update button to make it more prominent
  • Add a pointer for new users for the New and Save actions
  • Change the icon for the featured image area and label it
  • Prompt the user to save or cancel if the back button is clicked

I plan to continue testing but will wait for the next plugin update before doing another. Let me know about any ideas you have for things you’d like to see in future front-end editor usability tests.

#front-end-editor, #usability-testing-2