Here’s the start of another discovery cycle #2…

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 pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example., 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 categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.” 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 customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.!) – “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.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party shipped with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. 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 “metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.” widgets from your websites main sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..
  • 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” widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. 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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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?

#discovery-cycle-2, #user-testing