I put another user through the media scenarios…

I put another user through the media scenarios this morning. This time I asked that they adjust alignment and size.

You can download the video here.

My observations:

Step 1: Login

No problems.

Step 2: Publish already uploaded image

No problems.

Step 3: Preview post

No problems.

Step 4: Publish 2 images to a single post

4:00 – Even though the 2 images she added were not set to align right, they appeared to be aligned right when inserted into the post. Is this a side affect of the user aligning the first image right in Step 2?

Step 5: Download additional images

No problems.

Step 6: Upload new images & publish gallery

7:40 – User gets confused that she doesn’t see the gallery images she just added, and says, “What just happened here?”.
7:50 – User tries to click back button to get back to media modal (cancels it). User is looking for a way to get back to the gallery settings page.
8:05 – “What just happened here? I’m not even sure if I added them to the gallery or not. I’m confused…”.
8:50 – She gets frustrated and decides to start over with this step.
10:38 – She decides to add the images with “Insert into post”, instead of using “Create a new gallery”. She thinks this (the media library) is her gallery.
12:17 – One of the descriptions that she entered did not show up in the editor.

Summary

  • She did great, until she got to the gallery step. There appears to be a general confusion around how adding images to a gallery is different from just selecting images and adding them to the editor. The generic gallery div that shows up in the editor after you add a gallery to the post seems very confusing for users.
  • Once you set one of the images to align right, each subsequent image you add is aligned right when inserted into the editor (even though you don’t specifically set the new image to align right).
  • The generic gallery div (with the camera icon in it) appears to be confusing users. We should definitely add a description to that div – something like “Your gallery images will be displayed here”. I think we should also display the “edit gallery” button in that div at all times (not just on click). The user was searching around for a way to edit the gallery she just added, but gave up after a while and decided to start all over instead. 🙁
  • One of the captions she entered didn’t make it to the editor.

Coming soon: Weekly updates

Part of the duties of a team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. for each area of contributors is to be responsible for a weekly update on the group. At this moment, there is not an established 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. team rep, but as a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team representative, I’m happy to step in until new elections are done sometime in the near-ish future.

Part of our UI group discussion at the Community Summit was about how we can make these weekly updates both informational and effective, especially when it comes to attracting and retaining contributors. Here’s what we’re thinking:

  • A breakdown of what we did this week, such as discussions held (with links to IRC as applicable), patches uploaded/worked on, and what’s changed in core in a more prose-y manner.
  • Links to ideas from the community at large, which would likely be blog posts on other sites, including your own. Discussion would be encouraged over on those posts rather than here – the creator should be able to really take ownership and pride in their idea and be centrally involved in the discussion. The idea is to both expose some of the great ideas that are happening and open up a platform for idea generation that isn’t “from the top” or carrying the official weight that gets associated with a post on the Make P2s, which are largely status-driven rather than hypothetical.
  • Weekly IRC chat summary with anything not covered above.
  • What needs to get done this week, including any assignments that have been made and ones that need volunteers. We’re thinking this will be a great step toward exposing more ways to get involved in case you’re still figuring things out.

Thoughts? Love it, hate it?

A summary of the Community Summit discussion on…

A summary of the Community Summit discussion on 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. group has been published. Thanks to @sabreuse for her wonderful note-taking! Feel free to discuss the notes, and do hold us accountable for our action item. Weekly summaries will also begin very soon.

Summary: Core UI team discussion

To change things up I tested a different…

To change things up, I tested a different set of scenarios this morning. I asked the user to add:

  • A regular post
  • A post with a gallery
  • An audio MP3
  • A video from Vimeo

You can download the video here.

My observations:

Step 1: Login

No problems.

Step 2: Preview your blog

No problems.

Step 3: Add text post

1:25 – I said “enter the description of “welcome to my blog” – and she didn’t make the connection that I wanted her to add it to the editor (that’s my bad).

Step 4: Where would you click

No problems. She correctly chose “Media Library”.

Step 5: Add gallery post

4:25 – User was confused – thought she’d see the images she just added in the editor (instead the generic gallery camera blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. was there). So, she tried to go through the process again.
5:18 – “Okay, so I don’t feel like it inserted it, cause it doesn’t show the media”.
5:50 – She click away to the media library, and tries to add the images in the media library to a gallery (we’ve seen this before with one of the other users).
6:45 – She decides to publish it anyway, and view what it looks like.

Step 6: Add Audio post

7:10 – When asked to add a MP3 file to a post (from a URL I gave her), she clicked the “Add Media” button, then clicked “Embed From URL”, and pasted in the URL. When she pasted in the URL, it said http://http://URL.mp3 (with 2 http://’s).

Step 7: Add Video post

8:04 – When asked to embed a video 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, she clicked the “Add Media” button and used “Embed From URL” to paste the link.

Step 8: Preview your blog

No problems.

Summary

  • This user was confused that she didn’t visually see the gallery images that she had added to the post. If we can’t show a preview of the actual images, could we add a one line description like, “Your gallery images will be shown here”, either just above or just below the camera icon?
  • Are we confusing users by having a top level link called “Media Library” in addition to the new media modal “Media Library” link? This is the second time I’ve seen a user resort to clicking on the main left nav “Media Library” link when trying to figure out an issue within a specific post.
  • If the user pastes a full URL into the “Embed From URL” box, and “http://http://” results, can we just auto-remove the extra http:// with JS?
  • When I asked her to embed a video from a URL, she clicked the “Add Media” button, and tried to embed the Vimeo video URL through “Embed From URL”. I think that’s pretty logical seeing as a video is “media”. How difficult would it be to parse “Embed From URL” for the video embed URL’s, and then treat them different (so that instead of a link being added, the video embed magically happens for them)?

One more for your viewing pleasure This time…

One more for your viewing pleasure. This time I made sure to update my local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. to trunk. 🙂

You can download the video here.

My observations:

Step 1: Login

No problems.

Step 2: Publish already uploaded image

No problems.

Step 3: Preview post

No problems.

Step 4: Publish 2 images to a single post

No problems.

Step 5: Download additional images

No problems.

Step 6: Upload new images & publish gallery

7:12 – “Upload more files” button FTW! Adding that button made a huge improvement. Nice job Koop!
7:40 – In the gallery view, she didn’t see the “Describe this image…” boxes below each image.
8:10 – There may be a bug here. Select an image. Add a caption in the right column. Click “Insert into post”. You’ll get an image inside of a caption short code (which doesn’t look right).

Summary

  • This test was a huge success in my book.
  • She didn’t see the “Describe this image…” textboxes below each image. Should we focus() on the first “describe this image…” box when you land on the gallery screen?
  • A possible bug at 8:10 when adding a caption.

Here’s one more user through the media scenarios…

Here’s one more user through the media scenarios.

You can download the video here.

My observations:

Step 1: Login

No problems.

Step 2: Publish already uploaded image

No problems.

Step 3: Preview post

No problems.

Step 4: Publish 2 images to a single post

4:45-5:05 – She got stuck because she couldn’t find (or remember where) the link was to add the two selected images into her post (since both actions are gray).
5:35-6:30 – She recommends changing the “Batch import” button so that it’s blue.
6:40 – Immediately after clicking “Batch insert” she says, “Huh… Wait a second, hmm… Okay. Mmm…. Why? Why are there two steps now?”

Step 5: Download additional images

No problems.

Step 6: Upload new images & publish gallery

10:30 – User doesn’t appear to see “Select files” button (it’s gray and kind of blends in), when instructed to upload files, and attempts to click the “Upload files” link on the left.
11:20 – Oops… I didn’t grab the latests version of trunk (with Koops patch to add a “upload more images” button). This likely would not have been an issue. I’ll update trunk for future tests.
13:20 – now we’re back on track. No additional problems
15:00 – Until she views her post after adding a gallery (2 images, both with descriptions), and her descriptions are missing. Not sure what happened here.

Summary

  • It seems like each step of the flow should have a blue primary button. This user experienced difficulty both when multiple images were selected (and “Create a gallery” & “Batch insert” are both gray), and when she was told to upload an image (She didn’t notice the gray “Select files” button).
  • She didn’t seem to understand why there was a second step after clicking “Batch import”. From memory, another user we tested experienced the same confusion. She just expected the images to be added to the post.
  • The two descriptions she added when in gallery mode were not there when she viewed her post.

I put another new user through the media…

I put another new user through the media scenarios. This time I pushed her through the regular “add post” flow instead of using QuickPress.

You can download the video here.

I’m not going to summarize this one. This lady was unable to complete a single step. It’s frightening to watch, but I’d encourage you to do so anyway. The sad truth is that this is what some of our users go through (what percentage – I don’t know) when trying to use WordPress for the first time.

While this test won’t be particularly helpful in testing media, it is eye opening, so I thought I’d post it anyway.

I’ll re-word some of my instructions, and try another new user this afternoon.

This morning I ran another user through the…

This morning I ran another user through the same media scenarios that I had tested previously.

You can download the video here (warning, it’s 27 min long – 69MB).

My observations:

Step 1: Login

No problems.

Step 2: Publish already uploaded image

2:44-5:19 – I copied over the instructions from the last test, as such didn’t specifically tell him to go to the media library – so he had issues finding the “two cows” picture I had mentioned.

Step 3: Preview post

No problems.

Step 4: Publish 2 images to a single post

8:14-10:00 – Found his way to the “media library” instead of using “QuickPress” as instructed.
10:20 – Got back on track.
10:48 – He was unsure as to whether he should click “Create a new gallery” or “Batch insert”
11:15 – After he clicked the “Batch insert” button, he was unsure what he should do next – “Now am I waiting for this to be done?”
11:42-14:40 – Tried multiple times previewing his post in QuickPress before publishing it (and lost his work each time).
14:50 – Finally figured it out.

Step 5: Download additional images

No problems

Step 6: Upload new images & publish gallery

19:50-22:10 – When asked to upload multiple images, he uploaded one at a time, and after adding one, couldn’t figure out how to add the other image.
22:14 – Let’s try it again. He again has issues figuring out what to do after adding one image. “I don’t think I could have added them both at the same time, I don’t know”
22:48 – He repeatedly tries to click “Upload Files” after already uploading one image, but it does nothing.
23:10 – Again forgets to hit “Publish” before trying to preview his image 🙁
23:37 – Starts over again. And get’s it after attempting to upload both images at the same time.
24:55 – He added a description to both images from the “upload” screen, and immediately clicked the “Create a new gallery” button – his second description did not save.
25:25 – Again forgot to click publish, before trying to preview, but quickly recognized his error, and was able to salvage it by clicking the back button.

Summary

  • Some uncertainty as to whether he should click “Create a new gallery” or “Batch insert”
  • Some uncertainty after he clicked “Batch insert”, as to what he should do next.
  • Tried half a dozen times to preview his post (by clicking the “View my site” link in the welcome area) before clicking “Publish” (in QuickPress). Can we add a “Are you sure you want to leave this page” warning?
  • He didn’t realize that he could upload multiple images. Is there something we could add (description, or illustration) indicating that this can be done?
  • When he wanted to upload multiple images, he did so one at a time, and got stuck after adding the first one (not being able to go back and add another).
  • Adding a description, and then immediately clicking “Create a new gallery” results in the description not being saved.
  • There were enough things that popped up in this one, that I’m going to run another user through this evening.

Ran another user through to specifically test @mattwiebe’s…

Ran another user through to specifically test @mattwiebe’s new color picker patch.

Here’s the video.

6:14 – she immediately clicked the blue color swatch and was off to the races…