Hey everyone, my name is Dave Martin.
I thought I’d introduce myself, as I hope to start spending some time contributing to core.
I’ve been designer at Automattic for close to 2 years (working on Akismet, VideoPress, and CodePoet). Before Automattic, I was the lead UI 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 “Header” 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 URL, 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.
Jane Wells 10:13 pm on June 22, 2012 Permalink
We should revisit the welcome box in every release, really. We totally failed to take the customizer 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 Permalink
Agreed. Good call.
scribu 12:34 am on June 23, 2012 Permalink
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 Permalink
Excellent. More on the way…
Helen Hou-Sandi 5:14 am on June 23, 2012 Permalink
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 customizer, 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 Permalink
Howdy Helen,
I hope so too!
Next steps:
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 Permalink
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:
arena 9:47 am on June 23, 2012 Permalink
Hi Dave
And what if the admin bar was really about administration of site including items such as
lessbloat 3:13 pm on June 25, 2012 Permalink
Yep, I’m sure the Toolbar could use for some testing/tweaking as well.
Thomas Scholz 11:18 pm on June 23, 2012 Permalink
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 Permalink
Ha ha. Yep. That’s why these are so valuable/worthwhile…
krembo99 3:34 am on June 24, 2012 Permalink
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 UI flows that were inherited from older versions (mainly – media / attachments handling ..)
lessbloat 3:15 pm on June 25, 2012 Permalink
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 Permalink
Thank you very much for this, I think more frequent and more transparent testing will allow us to make much better informed product and UX 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 Permalink
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.