Hey everyone, my name is Dave Martin.

I thought I’d introduce myself, as I hope to start spending some time contributing to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

I’ve been designer at Automattic for close to 2 years (working on Akismet, VideoPress, and CodePoet). Before Automattic, I was the lead UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. designer at Campaign Monitor for 2 years. I look forward to meeting you.

I’m just getting my feet wet, and quite honestly haven’t a clue where to get started ;-), so I thought I’d set up a quick user test (I’m a big fan of user testing). I set up a temporary WP install, and ran a user from usertesting.com through a couple scenarios.

You can download the video here if you’re interested.

Here are my notes (sorry, they’re kind of long):

Intro

Instructions

Imagine you’re starting a new blog (like an online journal), to record your thoughts/passions.
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: testpass345
Once you’ve logged in, please click next.

Notes (time to complete: 0:10)

No problems logging in

Step two – Explain what you see

Instructions

Please take a minute to explain what you see on this screen.
Once you’ve done that, please click next.

Notes (time to complete: 2:09)

0:18 – On dashboard
1:54 – Referring to “Right Now” panel “This is my blog – this is all my stuff – I don’t know who see it and how they find it?”
2:27 – “I’m not sure what this Quick Press is”

Possible Improvements

When you’ve just started a new blog, and you look at the “Right Now” panel on the dashboard, there is no indication where those “1 post”, “1 page” etc… came from. Could we add a bit of descriptive text there.
Could we add a short description to the “Quick Press” panel explaining what it does.

Step Three – Preview your blog

Instructions

Okay, let’s preview what your new blog looks like (before we make any changes).
Please find a link to view your site and click it.
Once you’ve previewed what your blog looks like, please click next.

Notes (time to complete: 2:12)

2:49 – Starts trying to find link to view her blog – Looks to left nav
3:03 – Scrolls down page – doesn’t find it
3:22 – “Okay, I don’t know – so I’m going to try and click ‘posts’, and see what happens. Nothing – clicks back button.
3:29 – Scrolls down page again – scrolls back up
3:44 – Goes back through left nav links one-by-one – doesn’t find it
4:02 – Looks through each of the dashboard welcome screen links
4:25 – Looking all over – “I can’t find it” – scrolls down page again
4:54 – Finally noticed “My Blog” in admin bar – “I didn’t even see it there – if they are greyed out to me I think they are disabled”
5:01 – Clicks the link and makes it to her blog

Possible Improvements

She thought the admin links were disabled because they’re greyed out. It might be nice to have a dismissible intro bubble to explain what the admin bar is, and point out that it provides quick links to certain functionality.
She spent a lot of time looking for a link in the left nav, could we add a “View Site” link under the “Dashboard” section of the left nav?

Step Four – Change your background color

Instructions

You don’t really like the design of your blog.
Please change the background color of your blog to blue.
Once you’ve changed your blogs background color, please click next.

Notes (time to complete: 2:02)

5:40 – Clicks back button to dashboard
5:46 – Clicks “Set a background color” in third column of welcome screen links
5:57 – “I don’t know what #f1f1f1 means”
6:26 – having trouble figuring out how to select the color (she’s clicking the outside ring only) – “How do I click enter here?”
6:33 – “I’m double clicking the color – it should respond to that” – She’s still only clicking the outside circle of color.
6:36 – clicks out of color selector and clicks “Select a color” link again – “It’s not working”
6:55 – She figured out she could click the inner color box – moved the outer selection to red
7:02 – “There is no blue in the inner box now” – doesn’t get that the outside color selection affects the inner color box
7:26 – “I guess I’ll just select this grayish color”
7:42 – Wanted to preview her blog again to see the change.

Possible Improvements

She had a lot of trouble making the connection between the outside color ring, and the inner color box. When it comes down to it, this color selector isn’t super intuitive. How could we improve that?

Step Five – Change your site title

Instructions

You’re now happy with the design, but you want to change the title of your blog.
Please change the title of your blog from “My Blog” to “A day in the life”.
Once you’ve changed your title, please click next.

Notes (never completed – 2:03 spent trying to complete task)

8:03 – Clicked dashboard link from admin bar
8:08 – Looked through each of the 3 columns of links under the welcome message
8:21 – Moved over to look at left nav
8:27 – Moved back to look at links in welcome message
8:33 – Clicked “choose light or dark” from third column of links in welcome message
8:40 – Looking at left nav options
8:48 – Clicked “Widgets” link in left nav
8:50 – Clicked “Menus” link in left nav
8:56 – Clicked “Theme options” in left nav
9:00 – Clicked “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.” in left nav
9:07 – Scrolled down header options page – didn’t find it – scrolls back up
9:12 – Tries to select title text in preview pane – “How do I change it?”
9:23 – Scrolls down page – sees header text section – It’s not here
9:30 – Clicks “Background” link in left nav
9:33 – Clicks “Editor” in left nav
9:48 – Clicks back into “Header” link from left nav
10:06 – Can’t figure it out – gives up “I’ll try to come back to that one”

Possible Improvements

Granted, had this lady set up this WordPress install herself, she would have initially been able to set the site title to whatever she wanted. However, if she felt like changing it, she would have been lost. A couple of suggestions:

Could we add “Change my site title” as a link to the welcome screen?
This lady either didn’t see the “Settings” link in the left nav, or saw it, and never made the connection that that’s where she would make this change. I’ll be interested to see how other users perform in future tests. Perhaps we could look at testing a different link text there.
She made it into the header section (which to me seem logical). What if we adding a link “Want to change your site title” somewhere on that page?

Step Six – Add your first post

Instructions

It’s time to add your first post.
Please publish a new post with the title of “My first post”, and the the description of: “Yay, I’ve got a blog!”.
After you’ve published your new post, please click next.

Notes (time to complete: 1:25)

10:10 – Clicks “dashboard” link in left nav
10:20 – Clicks view the “post” link in second column of links on welcome screen – takes her to her blog
10:30 – Scrolls down page (still on her blog) – Can’t find it
10:50 – Clicks “Edit post” in admin bar
10:58 – “Nevermind, I’m not going to do that” – clicks back button
11:06 – Finds “+new” drop down – clicks “post” link
11:14 – Adds title “My first post”
11:20 – Adds content “Yay, I’ve got a blog!”
11:35 – Clicks “Publish” button

Possible Improvements

This step went pretty smoothly. The only thing I’d mention would be trying “Add New” as the admin link vs: “+ New” – seems like it might stand out better

Step Seven – Preview your new post

Instructions

Now preview what your new post looks like by visiting your blog once again.
Once you’ve previewed your new post, please click next.

Notes (time to complete: 0:20)

11:50 – Clicks “View site” link in admin bar
12:00 – While looking at her first post says “Okay neat. So that’s my first post there”
12:10 – Referring to header image “I’m just curious why this image keeps changing”

Possible Improvements

In watching people use WP for the first time, I’ve heard this from multiple people. I’m not sure what the benefit of rotating the header images is out of the box.

Step Eight – Publish an image

Instructions

Last task! You want to publish an image (of a sunset) from your recent vacation.
Please add a new post that includes the following image: http://bit.ly/w7xFeY
Once you’ve published this picture, please click next.

Notes (time to complete: 4:18)

12:30 – copied link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, opened new tab, and visited image
12:56 – Looking at her blog “Okay where would I post it?”
13:09 – selected “My first post” link from “Recent Posts” on right
13:20 – Clicked “Dashboard” from admin bar
13:47 – Clicked “Add New” under posts from left nav
13:54 – Adds title “Vacation”
14:00 – Clicks “Upload/insert” media link
14:06 – Clicks “Select files” button
14:28 – Closes upload dialog
14:43 – Goes back to tab – saves image to “pictures” on her computer
14:58 – Clicks “Select files” button
15:13 – Successfully uploads image
15:18 – Scrolls down in media modal and clicks “Save Changes” button at bottom
15:31 – Clicks “view site” link in admin bar – takes her away from add post screen – loses everything she’s entered
15:36 – Clicks “Dashboard” link in admin bar – “I wonder what happened to that”
15:42 – Clicks “All posts” link from left nav
16:00 – Clicked “New post” from left nav
16:08 – Entered title a second time
16:15 – Clicks “Upload/insert” media link – Clicks “Select files” button – selects picture – re-uploads it
16:28 – Finally sees and clicks “Insert into post”
16:41 – Clicks publish
16:48 – Isn’t instructed to, but chooses to preview it in her blog “It looks good – all my posts are there”

Possible Improvements

After entering some details and uploading an image, she clicks the “View Site” link in the admin bar, and she loses all of her changes. Can we have a “Are you sure you want to leave – you’ve not saved/published this post” notification if a user starts entering info, and then tries to click away to another page?
She had a really hard time seeing the “Insert into post” button. Can we make that a primary button (blue) to make it stand out?

Goes back to try step five again

Notes

17:12 – Tries to right click on “My blog” title on her blog to change it through a right click menu
17:21 – Clicks “Dashboard” link from admin bar
17:38 – Clicks “Help” tab from dashboard
17:48 – Looks at left nav options (doesn’t see settings)
18:03 – Gives up – ends test

That’s it

I hope to do more of these. I’d love to hear what you think.

#discovery-cycle-1, #user-testing

Jane Wells 10:13 pm on June 22, 2012

We should revisit the welcome box in every release, really. We totally failed to take 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. into consideration with that, or to look at revising any of the content there in 3.4.
- lessbloat 3:14 pm on June 25, 2012
  
  Agreed. Good call.
scribu 12:34 am on June 23, 2012

Hello Dave,

I’m a developer, not a designer, but I found this post very informative. Moar please! 😀
- lessbloat 2:55 pm on June 25, 2012
  
  Excellent. More on the way…
Helen Hou-Sandi 5:14 am on June 23, 2012

I need to make time to actually watch the video soon, although your transcription probably about covers it, but THANK YOU for doing this! We definitely have plenty of things to think about and work on, and I hope we can do more of this testing 🙂

Wanted to note that I did look at the video to see which version the test was done on, since she never discovered the theme 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., and it is trunk. So, there’s that. A little sad – we need to fix that for sure.
- lessbloat 3:10 pm on June 25, 2012
  Howdy Helen,
  
  I hope we can do more of this testing
  
  I hope so too! 😉
  
  Next steps:
  - 2 more rounds of people going through these same 8 scenarios (I’ll recap what I see with each one, like I did with this first one).
  - I’ll summarize everything that we discovered across all 3 tests.
  - Then, I’d love y’alls helps to 1) prioritize tasks, 2) create TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets, and 3) write patches for the quick wins.
  - I’ll run 2 more people through the same scenarios after the patches have been applied to see what impact they’ve made.
  All of these steps together form one “discovery cycle”. The goal being to find/fix reoccurring patterns of complexity, difficulty or confusion.
  - lessbloat 3:57 pm on June 25, 2012
    I felt the need to clarify that with all of this, I’d love to hear your thoughts, feedback, and even criticisms! 😉
    
    I’m very much aware that I’m a new fish in this very big pond (which to be quite honest is pretty intimidating) 🙂
    
    I’m the “awkward new kid that just moved to a new school”. So, If I’m doing something wrong, or out of order, please let me know, and help me get on track.
    
    My hope with doing this “Discovery cycle” is:
    
    That we can expose some quick wins by just observing users.
    
    That I can get to know you guys, and see how things get done around here.
    
    That I can get my feet wet – create my first ticket, and write my first patch.
    
    That these discovery cycles can become a regular practice, and those of you who are interested can take ownership of one in future releases (which could include testing broad areas within wp-admin (as I’ve done), or focusing in on very specific functionality – like media uploads).
arena 9:47 am on June 23, 2012
Hi Dave

And what if the admin bar was really about administration of site including items such as
- Appearance
- Plugins
- Tools
- Settings
- lessbloat 3:13 pm on June 25, 2012
  
  Yep, I’m sure the Toolbar could use for some testing/tweaking as well.
Thomas Scholz 11:18 pm on June 23, 2012

Thanks, very interesting. We have way too many distractions in the interface. Especially the initial dashboard widgets are rather confusing (Quickpress, Feeds). And the first visible help text doesn’t say anything useful.

It almost hurt to watch her struggle. 🙂
- lessbloat 3:12 pm on June 25, 2012
  
  It almost hurt to watch her struggle
  
  Ha ha. Yep. That’s why these are so valuable/worthwhile…
krembo99 3:34 am on June 24, 2012

This is a great .. If only you had time to watch all the videos of all the users 🙂 but is sure can produce good results to tackle some of the notorious UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. flows that were inherited from older versions (mainly – media / attachments handling ..)
- lessbloat 3:15 pm on June 25, 2012
  
  Let’s start with just a couple. 😉
  
  It’s funny, you’d be surprised how much you can catch by just observing a hand full of people.
Matt Mullenweg 4:47 pm on June 25, 2012

Thank you very much for this, I think more frequent and more transparent testing will allow us to make much better informed product and UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. decisions. If we do this right we should see the videos get better and better (shorter and less confusion) from release to release. 🙂
Jannis Gundermann 11:19 pm on June 27, 2012

This was fascinating to watch, thanks for uploading this.

I found that most of her struggles were quite logical from a user point of view.
“Settings” for example does not really speak “Change the title of my blog” to a user.

I would assume most non-technical users will file it under:

It’s something I can see on my page…
Oh there is an “Appearance” tab, click…
Hmm… well I can see it here so I must be in the right tab but I can’t change it here…
Doesn’t work, I will come back to this (aka I won’t change the title or ask someone else for help).

The other issue that was really great to observe was the image uploading option that with all the options in the popup/modal didn’t even show her the “Save all changes” button on her initial view.

Really great stuff, thanks again.