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?