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?