WordPress.org

Here’s the start of another discovery cycle (#2). This one is focused around WordPress as a CMS (using it to build a website vs. for a blog). I’ll need to make some edits to this script before I run any other users through it.

You can download the video and follow along if you’d like (however, this one is super painful to watch – you’ve been warned!)

Intro

Instructions

• Please imagine you’re building a website for your business “Acme Carwash”.
• Please TALK me through each task to the best of your ability (what are you thinking? What is difficult to understand?).
• Please make sure you speak clearly into your microphone (whether it’s external or build into your computer).
• Thanks so much for your help!

Step One – Log in

Instructions

• First, please log in:
• USERNAME: tester
• PASSWORD: xxxxxx
• Once you’ve logged in, please click next.

Notes

• No problems logging in

Step two – Static page

Instructions

• This is your websites dashboard.
• Instead of using WordPress for a blog (where you show new posts on your homepage), you want to use for a website (with a static homepage that doesn’t change).
• Under Settings->Reading please change your front page to display a “static page”.
• Once you’ve created a static front page, please click next.

Notes (time to complete: 1:56)

• 1:15 – starts step
• 1:20 – clicks “screen settings” – then closes it
• 1:36 – See’s “basic settings” column on welcome screen
• 1:43 – Found settings link in left nav
• 2:06 – Finally clicks “reading” link – wanted to make sure he was going into the right place
• 2:12 – Clicked “static page” option under “Front page displays”
• 2:20 – He assumed he had completed the task at this point, and clicked next, but before going on…
• 2:30 – Said, “You never told him to save his setting changes, but I’ll do that anyway”
• 2:47 – Clicked “Save Changes” button
• 2:50 – Notification reads “Setting changed”, but they weren’t – “Front page displays” option reverted to “Your latest posts” – “Why didn’t it change?”
• 2:55 – “Maybe I have to do this” – Selects “Sample page” from “front page” dropdown, and “Sample page” from “Posts page” dropdown – Clicks “Save Changes” button
• 3:02 – Gets red warning under “front page displays” radio options “Warning: these pages should not be the same!”
• 3:07 – Unselects “posts page” dropdown option – Clicks “Save Changes” button again.
• 3:11 – “Did that make it happy? – That made it happy”

Observations

• He found a bug! If you click “static page” option under “Front page displays”, and then immediately click the “Save Changes” button, it comes back with a status of “Settings Changed”, but the radio option has reverted to “Your latest posts”
• This setting needs some love. I hate to imagine what would have happened had I asked him to also set a “Posts page” option.

Step Three – Preview your blog

Instructions

• Okay, let’s preview what your new site looks like.
• Please click the “Acme Carwash” link in the toolbar (the black bar at the top)
• Once you’ve previewed what your blog looks like, please click next.

Notes (time to complete: 0:35)

• 3:10 – Already started this step in previous step
• 3:14 – Clicks “Acme Carwash” link in toolbar
• 3:45 – Scrolls down page and checks everything out

Step Four – Add contact page

Instructions

• You decide you want a contact page on your new website.
• Please add a new page called “Contact us”.
• Once you’ve added the “Contact us” page, please click next.

Notes (time to complete: 6:52)

• 4:00 – Starts step
• 4:07 – Hovers over “+ New” menu – doesn’t see “page” link – moves on
• 4:21 – Mouses over “blog” toolbar menu – doesn’t click any link
• 4:30 – Mouses over “+ New” menu – clicks “link” link
• 4:43 – “Okay, that’s not the right one” – Clicks back button
• 4:45 – Mouses over “+ New” Menu – mouses over “page” link – Clicks “Edit page” link in toolbar
• 5:03 – Scrolls down page (“Sample page” page edit screen) – Mouses over “settings” left nav link – Clicks “General” link
• 5:20 – Clicks “Writing” link under “settings” left nav menu – looks around
• 5:30 – Clicks “Discussion” link under “settings” left nav menu – looks around
• 5:38 – Clicks “Media” link under “settings” left nav menu
• 5:48 – Clicks “Permalinks” link under “settings” left nav menu
• 5:55 – “Alright, so it’s not down there” – Mouses right over the pages menu, then mouses over links menu in left nav and clicks “link category” link
• 6:15 – Clicks “All links” link in left nav under links menu
• 6:40 – Clicked “Screen options” – closed it
• 6:49 – “I see the help up there, I don’t want to go to the help yet…”
• 6:51 – Moused over “Dashboard” in left name and clicked “Home” link
• 7:03 – Clicked “Acme carwash” link in toolbar
• 7:12 – Hovered over “Acme Carwash” dropdown in toolbar, and clicked “Customize”
• 7:32 – (Found the customizer!) – “Look, I could have even changed the static page right there”
• 7:40 – Clicked around – “Alright, so it’s not there” – clicked “Close” button at top
• 7:52 – Hovered over “Acme Carwash” dropdown in toolbar, and clicked “Dashboard”
• 8:00 – Hovers slowly over each section of left nav (goes right past pages)
• 8:18 – Overs over “Tools” and clicks “Available Tools” link
• 8:27 – “Alright, I’m not doing well here” – Clicks “Acme carwash” link in toolbar
• 8:40 – He remembered the “Help” tab in the dashboard, problem was he was on his site, so he clicked the “Search” icon and searched for “contact us” – which returned “Nothing found”
• 8:59 – Hovered over “Acme Carwash” dropdown in toolbar, and clicked “Dashboard”
• 9:06 – Repeatedly tried to mouse over to help tab, but he moved the mouse too high causing the user dropdown to cover the help tab – He commented about how he didn’t like that
• 9:11 – Clicks “Help” tab
• 9:19 – Clicks “Content” in the help menu
• 9:32 – Scans – Clicks “Layout” then “Navigation” then “Overview” links in help menu
• 9:38 – “Alright, well that didn’t help at all did it?” – Closes help tab
• 9:49 – Mouses over “+ New” menu – clicks “page” link – “I don’t think this is it. No, this is not it.”
• 10:00 – Clicks “pages” link in left nav
• 10:05 – Clicked “Acme carwash” link in toolbar
• 10:20 – Rereads instructions – Mouses over “+ New” menu – clicks “page” link
• 10:30 – Types “Contact us” as title
• 10:37 – Clicks “Save Draft”
• 10:52 – “Maybe it was that simple, I was trying to make it more complicated. I was trying to add a link”

Observations

• Interesting to note that since “settings” was the first thing he did, he came back to that section when he was asked to add a page and searched each link thoroughly. This is interesting because with the first discovery test all 3 users were shown the dashboard first (Specifically the welcome screen), and all three came back to it frequently (sort of like a home base for them).
• Interesting that he was trying to avoid having to use help
• Once he did use help, it was rather useless to him. Instead of having a bunch of text to read there, what if we just had a single field that said “What are you trying to do”, which then brought in help results from WordPress.org…
• Accidentally mouses over user dropdown menu when trying to click help tab – which covers the help tab – this seemed to annoy him quite a bit

Step Five – Add contact form

Instructions

• You’d like to add a contact form to your new “contact us” page.
• Edit your “Contact us” page and add a simple contact form (you can just stick with the default fields).
• After you’ve added a contact form, please click next.

Notes

Ah, crap… I’m an idiot. So, I unintentionally messed with this guy. For whatever reason, I assumed that the Grunion contact form plugin shipped with core. Oops… That was really painful to watch since the functionality doesn’t exist!

Step Six – Remove widgets

Instructions

• You’d like to remove the “search”, “recent post”, “recent comments”, “archives”, “categories”, and “meta” widgets from your websites main sidebar.
• Find a way to remove these widgets through your dashboard.
• Once you’ve removed these widgets, please click next.

Notes (time to complete: 2:56)

• 16:30 – Starts next step
• 16:40 – Clicks “Acme Carwash” link in toolbar
• 16:50 – Moused over user dropdown again in top right corner – “I hate that! I hate that if I mouse over that it pops up and won’t go away”
• 16:58 – Hovers over “Acme Carwash” dropdown – Clicks “Widgets”
• 17:15 – Clicks “Search” widget dropdown – clicks delete
• 17:36 – Points out that he should be able to click anywhere on the menu item for the widget on the right to expand – instead it gives hime the move (drag and drop) cursor
• 18:52 – Was confused about my directions whether I wanted him to delete the widgets, or the settings within the widgets (I’ll change the wording here for future tests)
• 19:26 – Finished removing all of the widgets

Observations

• For widgets on the right, you have to click right on the little down arrow icon for the details to slide down – this user pointed out that you should just be able to click anywhere on the tab for it to slide down – I agree.
• What if we had a “Remove all widgets” link?

Step Seven – Add a widget

Instructions

• You want to add your companies phone number to your websites main sidebar.
• Please add a new “text” widget to your websites main sidebar with the title of “Call us”, and the description of “919-555-1212″.
• Once you’ve added this new text widget, please click next.

Notes (time to complete: 2:18)

• 19:36 – Starts step
• 19:40 – Scrolls down page – scrolls back up
• 20:15 – “I’ve never build a website, and I’m finding this to be way more complicated. I would have stopped by now”
• 20:25 – Experiments with dragging “Categories” widget over – misses drop zone
• 20:31 – Tries again – this time he successfully drops the categories widget
• 20:45 – Deletes “Categories” widget – “It’s far more complicated than what it should be”
• 21:20 – Rereads instructions – Grabs text widget – Starts dragging it up the page – “I never like this either”, speaking about how awkward it is to drag a widget up the page, when the dropzone is not in the current screen
• 21:34 – Drops it successfully
• 21:39 – Adds “Call us” as the title – and phone number in description
• 21:54 – Clicks “save” button

Observations

• Adding a new widget, when the dropzone is further up the screen is a pain. We’ve got to figure out something else to make adding widgets easier in this scenario.

Step Eight – Remove header image

Instructions

• Last task! You decide that you don’t want the rotating header image to show up on your site.
• Please find a way to “remove the header image” from your website.
• Once you’ve removed the header image, please click next.

Notes (time to complete: 1:46)

• 22:20 – Starts step
• 22:29 – Clicks “Menus” link under appearance in left nav
• 22:44 – Clicks “Theme Options” link in left nav
• 22:59 – Clicks “Themes” link in left nav
• 23:14 – Rereads instructions
• 23:29 – Clicks theme thumbnail – takes him to customizer
• 23:35 – Clicks “Header image” dropdown
• 23:41 – Clicks dropdown under “header image” – clicks “Remove image” link
• 24:06 – “I try to keep these to 15 min – this one took 24. I would have left this site long ago, and said I just won’t be able to have a website, because this is too complicated.”

That’s it

I felt really bad for this poor fellow. I think I ruined any chance of him ever wanting to use WordPress.

Thoughts?