lessbloat 2:13 pm on April 9, 2013

Post formats Usability test – round 4

Here’s another round of post formats usability tests (testing against the 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. currently in trunk).

Tasks:

1. Login
2. Look at the Dashboard and get to add post from toolbar
3. Add a (standard) blog post with title and text
4. Preview your blog
5. Add an image blog post, with image from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org
6. Add a video post, with YouTube video URL provided
7. Add a link blog post
8. Add a quote blog post
9. Add a gallery post
10. Preview your blog again to see all the posts

Test 7: http://wpusertesting.com/videos/DC7-7.mp4

1. Fine
2. Fine
3. Fine
4. Fine
5. She uses “Add Media” to add her image – didn’t really see the post formats options
6. Since it worked once, she used “Add Media” again. Unfortunately the media modal still doesn’t embed videos from URL’s. This lead to a very confusing user experience.
7. She still doesn’t see the post formats bar. She is actively looking on the page for something, but doesn’t see the post format icons and opts to add the link via the editor. In the end, the only way she can figure out how to add a link is through the media modals “Add from URL” option.
8. She uses the editor to add the quote. She’s a little unsure how it works… But she figured it out via the editor.
9. She adds the 3 images via “Add Media”, but didn’t actually add a gallery (though she thought she had). She just selected multiple images and inserted them.
10. Fine

Observations:

She didn’t use the post formats selector once. She didn’t even appear to see it.
Apart from the video post, she was able to perform all of the tasks successfully with just the media modal and the editor.
We really need to make sure that the “Insert from URL” feature inside the media modal embeds video URLS. We’ve seen users attempt to add videos this way in every single round of testing, and they are all very confused when a link is published, instead of the embedded video.
The user uses selects multiple images and inserts them thinking she’s added a gallery. I wonder how many users do this very same thing…

Test 8: http://wpusertesting.com/videos/DC7-8.mp4

1. Fine
2. Fine
3. Fine
4. Fine
5. She uses “Add Media” to add the image. Doesn’t see the post formats bar.
6. She also attempts to add the video from the “Insert from URL” link inside of the media modal. It only adds a link. 6:20, she discovers the post formats bar. She selects the video format, and pastes the video URL into the title, and then the “Video embed code or URL” box. “Maybe I better not mess with it”, she says, unsure of if she should save her changes.
7. She uses the link format, but ends up using the editor because there was no way to edit the link text via the link post format option.
8. She goes back to using the editor to add the quote. Struggles a bit to know if it’s doing what she wants. After moving on to the next task, she discovers the quote post format, and tries it out. After she publishes it, and click the “View post” link, she gets a 404 error, and the quote is never really published.
9. She uses the gallery post format option. Unfortunately that doesn’t take her to the gallery section within the media modal. She ends up just multi-selecting and inserting multiple images (again, thinking she added a gallery).
10. 15:20 She takes a closer look at the post formats bar.

Observations:

She didn’t see the post formats bar until half way through her test. After she noticed it, she thought it was handy, and mentioned that for the quote format, she preferred to use it.
She also attempts to embed a video via the “Insert from URL” option in the media modal, which only adds a link. I’m guessing this happens a lot.
There is no “link text” field in the link post format, so even though initially she selected the link post format, she opted to add the link via the editor.
She got a 404 error when she tried to publish a quote through the quote post format.
When on the gallery post format option, can we link directly to the “gallery” section from the “Add media” button?

Thoughts?

lessbloat 5:06 pm on March 12, 2013
Tags: menus ux ( 8 )

We decided to test bringing the theme locations…

We decided to test bringing the theme locations back out as a meta box (instead of using checkboxes) to figure out if the old layout would work for users.

For this test, I removed theme locations as checkboxes, and added the theme locations metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. back in. I also moved the “Automatically add new top-level pages to this menu” option back to it’s old spot, because it looked odd by itself.

Here are the results:

User #17

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

2:30 – She doesn’t see the “create a new menu” link. She starts typing in the existing menus name field, thinking she’s creating a new menu.
3:20 – After saving her changes, she realizes that she made a mistake, and changes the menu name back to “Menu 1”.
3:30 – She see’s the “create new menu” link, and is on her way

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

This user was sharp. With that said, having the theme locations 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. box back in the top left corner, revealed two undesirable behaviors. 1) She assumed that the theme location metabox was where she managed her menus. 2) She thought she could create a new menu by editing the existing menus name field, and saving it. We’ve seen both of these behaviors before the last time we tested having the theme locations meta box in the top left corner.
For the next test, I’m going to try moving the theme locations box below the menu item options.

User #18

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

Overall, the second user succeeded with all of the tasks. She had to look for the “add new” link and the “delete menu” link, but she found them without too much trouble.

Thoughts?

#menus-ux

lessbloat 2:09 pm on March 7, 2013
Tags: menus ux ( 8 )

Here’s the last round of menus usability tests…

Here’s the last round of menus usability tests with 23450.6.diff applied.

User #15

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

User #16

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

4:35 – When she expanded the menu item, the remove link was below the fold, so she did not see it. This caused confusion.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

Overall, everything worked great. We added a task to delete a menu in there, to double check that users were able to spot it at the bottom, and they both seemed to find the link easily enough.

The second user found a bug. The extra description items (CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., XFN, Description) were unchecked in screen options, and should not have been showing in the menu item edit screen. Since they were there, the “remove” link was pushed below the fold, which caused her confusion. We’ll need to fix this.

#menus-ux

lessbloat 6:52 pm on February 26, 2013

Icon feedback

I’d like to kick off another round of icon feedback, this time with several constraints. If you have any concerns with the flat icons currently in trunk, now is your time to speak up.

A few rules for this exercise:

DO’s:

Please be constructive. Each icon has a letter assigned to it, if you’ve got feedback for 2 out of the 13 icons, tell us what you don’t like about each one individually (or even better, mock something up for each one).
Please leave admin 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. out of all mockups for this exercise (just icons on a white background for now).

DON’Ts:

Don’t make broad declarations (i.e. “I don’t like them”, or “I like the old icons better”).
Don’t comment on the color/contrast (we’ll save that for another discussion).

Thoughts:

Source File

lessbloat 8:24 pm on February 7, 2013
Tags: menus ux ( 8 )

Here’s round 7 of our menus usability tests…

Here’s round 7 of our menus usability tests with 23119.25.diff applied.

User #13

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

3:50 – He struggled to notice the “Add Menu” link. He finds it at 4:10.

Step 7: Add links

No issues.

User #14

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Observations/Thoughts

I feel like these speak for themselves. 😉
The first user had a bit of trouble finding the “Add Menu” link, but I’m okay with that seeing as a) it conforms to the way other “add new” links are done in the admin, and is likely much easier for users who have used WP before to any degree, b) as we’ve discussed adding more than one menu is somewhat of an edge case for the majority of users.

Thoughts?

#menus-ux

lessbloat 7:10 pm on February 5, 2013
Tags: menus ux ( 8 )

I tested two more users on our menus…

I tested two more users on our menus scenarios with 23119.23.diff applied. With the addition of the zero menus state, I had to modify the script a bit, as it eliminated the need to 1) create a menu, 2) add menu items, and 3) assign your first menu to a theme location for first time users.

Continue reading →

#menus-ux

lessbloat 7:44 pm on January 21, 2013
Tags: menus ux ( 8 )

I thought I’d run one more user through…

I thought I’d run one more user through testing our current concept of having both a “manage” screen and a “add/edit” screen for menus.

For this test I added a quick little JS hack to visually highlight the “Menus in your theme” 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. box when a user clicks there from the “add/edit” screen success message. You’ll see in the video that my implementation is ugly as sin. 😉 I just wanted to test the concept with the knowledge that if it worked, we could always improve the design.

I also pulled the last step, which asked users to add a custom menu 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.. While adding a custom menu widget is somewhat related, we likely won’t be addressing anything in widgets for this release.

Here’s the video for user 9 (in our series of menus user tests).

Continue reading →

#menus-ux