WordPress Front-end Editor — Usability Test 1

I did a usability test on the WordPress Front-end Editor 0.8.4 plugin with the Twenty Twelve theme on WordPress r27162.

Summary

  • Misses the “Edit Post” link in the toolbar completely but finds the inline “Edit” link
  • Struggles to figure out how to save changes
  • Secondary editor functions are hard to find
  • Unable to find the tag icon in the toolbar
  • No trouble adding or modifying content and links

This is a great first look, so I would recommend watching the entire video through. (Length: 8:45)

You can download the full video: c41ea9a3.mp4.

Points of Confusion

First impression, finding the editor (Length: 0:35)

Struggles at figuring out how to save changes (Length: 2:50)

Inserting an image by URL doesn’t work because the URL isn’t a true image URL (Length: 1:15)

Fails to find tag icon in the toolbar (Length: 0:18)

Other Insights

Has to hunt a little for the bulleted list but finds it eventually (Length: 0:50)

Successes

No trouble adding or modifying content and links (Length: 0:55)

Survey Responses

  1. Have you used WordPress before?
    No
  2. Was it easy to find and open the front-end editor?
    Yes it was only problem was working out how to save changes. I knew thats what I needed to do, I just couldn’t locate it.
  3. What frustrated you most about the front-end editor?
    Not being able to find out how to share added pic via url and didn’t add similarly added media from site and didn’t add.
  4. What did you like about the front-end editor?
    Once got head round it, very easy to use loads of tools.

(For Reference) Tasks Used in the Test

  1. Sign in.
  2. Click the “home” icon in the gray 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 “Hello world!” post.
  3. If you didn’t figure out how to open the front-end editor in the last step, that’s okay 🙂 click on the post title and then click the “Edit Post” link that appears in the gray toolbar at the top of the site.
  4. Click on the Sample Page and change the title to something else using the front-end editor.
  5. Go back to the Hello world! post and add a new paragraph using the front-end editor (it can be short).
  6. Add a bulleted list.
  7. Add a link to Google.
  8. Add and 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 NT (unknown) 6.2
  • Browser: Windows Chrome 33.0.1750
  • Display: 1360

Testing Notes

  • It was a mistake to have broken image links in the media library. I didn’t realize those were there, and I will remove them before the next test.
  • Should I get rid of the inline “Edit” link just to see if users can find the toolbar “Edit Post” link if asked?
  • Possibly add a task to test featured images.

My Observations

  • The “More…” label under the left icon is very helpful.
  • The featured image area seems a bit confusing. The user clicked on it a couple times and didn’t seem to know what it was or why it was there.

My Suggestions

  • Add help pointers for the “Edit Post” link, the “Update” button, and the right-side icons until the editor demonstrates they’ve found each of those things.
  • If someone navigates away from updated content without saving, present an option to “Save” or “Exit without saving.” The default browser dialog in this context isn’t a good experience. (screenshot)
  • After saving, change “Update” to “Updated” and disable the button so there’s a clear indication that edited content has been saved.
  • Consider changing the button label from “Update” to “Save” — even though “Update” matches the wp-admin dashboard, it makes sense in the front-end editor context to say “Save” in my opinion.
  • Consider moving the kitchen sink icon to the right instead of the left.
  • Add better error handling for non-image links.
  • Add a label for the featured image area.

Would you like to see additional tests for this plugin? If so, are there any tasks you’d like to see added that are missing from above? Are there any specific themes you’d like to see tested?

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