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):
- 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
- First, please log in: USERNAME: tester PASSWORD: testpass345
- Once you’ve logged in, please click next.
Notes (time to complete: 0:10)
Step two – Explain what you see
- 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”
- 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
- 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
- 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
- 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.
- 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
- 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”
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
- 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
- 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
- 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”
- 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
- 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”
- 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
- 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
I hope to do more of these. I’d love to hear what you think.