Reading/Multimedia/Media Viewer/Usability testing

User 1

 * The user access the media viewer to view the image with more detail by clicking on the image
 * The user finds the basic image info:  title, author and uploader.
 * The user is able to access the metadata panel by clicking on the chevron.
 * The user starts using scroll to close the metadata panel instead of the chevron, and from this point uses scroll to manipulate the metadata panel.
 * The "next" control is shown on top of the metadata panel which makes the user wrongly believe that the "next" arrow is associated with the panel.
 * The user identifies the "use this file" action as an entry point to use the image in some slides.
 * The user tries to open the "use this file" panel while the metadata panel is open, which leaves the "use" panel outside the current viewport.

Testing round on February 2014
A round of usability testing was performed with 4 users. three of them using usertesting.com.

What worked well:

 * Users are able to access metadata. During the tests they used different affordances (scroll with mouse wheel, scroll bars or clicking the chevron) and no user had problems finding information such as the description that was below the fold. One user (#3) that initially did not discovered it, was able to do so once she was looking for more details thanks to the initial panel animation (which suggests that we should at least preserve for first-time users until they open the panel).
 * Users are able to operate the display controls: next/prev, close and full-screen without problems. They were able to operate the next/prev with the panel open when interested on the metadata.
 * Users were able to identify the title, author, and basic metadata. Users were able to recognize that the text below the title was referring to the author without further clues.
 * Users are able to find the “share and use” panel. the panel was still in-development, but even the users for which the icon was not initially clear were able to access it. Some additional guidance could help on using the “embed” panel (see below).

What didn’t work so well:

 * Access to Commons. It is not clear how to get more metadata. Even for users that appreciate detailed EXIF metadata, “Learn more on commons” link was not communicating that they could get this information. Some users figured out that the license link was leading to the details page, but that was a confusing experience.
 * A more clear call to action to view more details is needed (example). The details page and the media viewer overlap in content needs to be clarified for the user (we can even label this as “more technical details” to reinforce the different purpose of both).
 * Not clear if API has the subtext for "The free media repository" --mtraceur
 * License clarity. Getting license info is hard. Some users don’t understand the copyright indicator, and even if they access the terms it is not clear what do these terms mean for them.
 * The download and attribution info will help, but we need to think on more clear way to present this info in terms of the end user: state that “the image can be freely used as long as you give credit to the author”.
 * Going back from description page. Once getting to the description page, it is hard to go back to the media viewer. Users tried to do so by clicking on the image.
 * Clicking on the image to open the media viewer (or going back if you were there) makes sense, but we need to keep a way to access the file. We can achieve that with a call to action on hover (example).
 * Using the image. When asked to use the image for some slides, there was some confusion (partially because the “download” panel was not there). Some users considered using the embed.
 * I would like to see how they behave when “Download” is available, but it may be worth considering if we need more use instructions on the “embed” panel.
 * Some UI details that may be problematic:
 * User unable to exit the share panel by clicking outside of it.
 * “Share” icon may not be clear without additional text (just one user had problems with that, but is worth keep observing).
 * A couple of technical issues happened during the tests:
 * usertesting.com instructions were obscuring the top-right area of the UI for the first user (that was corrected by adjusting test instructions for the rest of the users).
 * This was useful to check that the user was able to figure out the use of escape key to closing the media viewer.
 * The image that users were asked to display was not showing for some participants due to some technical reason.
 * This was just bad luck.

User 1
View recording

Observations:
 * 01:35: The user gets confused because the sunrise picture is not appearing due to technical issues. Finally, the user decides to try a different image.
 * 03:13: The user tries to go back using the full-screen option, probably due to the fact that the test instructions obscure the close button.
 * 04:15: The user discovers the next arrow and uses it without problem.
 * 05:07: The user finds an image lacking the author and she is able to distinguish between the notion of author and uploader. Other information she considers lacking is: time at which the picture was taken (not uploaded), description, and with less emphasis the type of camera.
 * 06:26: The user discovers the "uses" section.
 * 06:54: The user finds the sharing option after initially exploring the controls.
 * 07:57: The user expects to se “embed” to be used for adding the image to the slides. This is not the optimal way to do it and the option for the image link is lacking. We may want to add such option to the embed panel instead of the share one?
 * 08:53: The user is not able to found license terms initially, later figures out the CC link leads to the license info, but wishes his was available earlier.
 * 11:34: The user tries to go back to the media viewer by clicking on the image from the description page.
 * 13:13: The user figures out that needs to press escape to go back to the article since the close button was hidden.
 * 13:38: The user is able to move through the gallery and make it full-screen.

Written questions:


 * Was there anything surprising or confusing for this media viewing experience? How would you improve it?
 * I was wondering how one would know to click on the 'cc' link near the photo title, to be able to go to the page, showing more details such as licensing rights.
 * Do you find information about the image easy to access when you needed it? How could we make it easier?
 * It was easy enough. Only thing is I feel it should be more explictly stated, where one has to click to find information such as the licensing rights. Might help to incorporate a link that says 'More details' on the image information that appears as soon as you click on the wikipedia page. This way one would know that there is more information available and would be routed to the page with licensing details.
 * Do you often view images or videos on Wikipedia? Do you use those images on different places (such as your blog, slides for presentations…)?
 * Yes, I often view images on Wikipedia. Rarely, view videos. To be honest, I haven't yet used images from Wikipedia on presentations/blogs; I normally use the images from photo sharing sites.
 * How easy would it be for you to use this tool for improving your own slides or web pages?
 * I do feel it would be pretty easy. Using the tool is relatively hassle-free.

User 2
View recording

Observations:
 * The user faces the same problem where the image is not available due to technical problems. The user only gets to the Multimedia Viewer once is asked to access the images from the gallery at the bottom of the article (minute 8:00)
 * 08:15: The user identifies the title and author of the image. It is not completely clear that the CC indicator is understood.
 * The user is able to use controls to close, access full-screen mode and move next/back for going through the gallery.

Written answers
 * Was there anything surprising or confusing for this media viewing experience? How would you improve it?
 * I couldnt see the sunrise picture it wasnt showing the jpg file Icouldnt see author details like i could when i clcicked on one of the photos in the gallery
 * Do you find information about the image easy to access when you needed it? How could we make it easier?
 * No I could only find useful info from the images in the gallery I ould like the other pictures to work like the ones in the gallery, with author info in the caption and it opening up when you click ont he image in a better viewer
 * Do you often view images or videos on Wikipedia? Do you use those images on different places (such as your blog, slides for presentations…)?
 * Yes No
 * How easy would it be for you to use this tool for improving your own slides or web pages?
 * I liked the gallery pictures I would like to use these

User 3
View recording

Observations
 * 0:52: The user is able to access the media viewer. The "expand" icon on the thumbnail seems to call her attention, but she clicks on the thumbnail image to expand it.
 * 01:00: The user identifies title, author, and license (mentions "Creative Commons" since she seems to be familiar wit it). Makes use of the "expand" control to access the full-screen mode.
 * 01:45: When looking for metadata, the user notices the animation at the bottom panel and opens it using the chevron.
 * 02:08: The user is able to locate the date info. She notices the "Wikimedia Commons" but seems not to be aware of what it is about.
 * 02:28: When asked about lacking info, the user mentions image resolution, and camera used.
 * 02:42: The user finds and understands the purpose of the "used in 2 pages" list.
 * 02:55: The user access the description page from the CC link, and it is confusing to distinguish which is the purpose of it. Initially thinks it is for sharing (since sharing options are prominent there).
 * 03:43: Even after visiting the details page, the user wonders: "I want to know if I can use it for my blog"
 * 03:51: The user discovers the "share" icon, and it is unable to close the panel. She tries to click outside it, but it is not closing.
 * 04:14: The user identified initially the "share" icon as "open in new window".
 * 05:40: The user is able to find the link. On the share panel, the user expects options to share via Facebook, twitter…
 * 06:11: It is not clear what to do to use the image in some slides (probably due to the lack of download option). Finally indicates that she uses to right-click and “Save image”, but she could try to use the “embed” code in the slides.
 * 07:26: The user expects a better way to access detailed license info from the media viewer.
 * 09:26: Although initially used close to go back. The user was able to use prev/next controls to move through images.
 * 10:59: The user is able to move through the gallery (wishes there is a "self timer").

Written answers
 * Was there anything surprising or confusing for this media viewing experience? How would you improve it?
 * it wasn't intuitive to pull up the bottom bar of details. it took awhile for me to find the up arrow to bring it up- i would highlight it by placing a button there or a THICK border upwards arrow in a bold color. the media viewing experience had too many clicks for me....i was content with the bottom bar but then i realized i had to click on CC, and then click downwards, or scroll down to find more info. i would rather have it all on the bottom bar. less scrolling & less clicking.
 * Do you find information about the image easy to access when you needed it? How could we make it easier?
 * yes and no. i was thinking all the metadata & all the sharing/downloading info would be on the bottom bar but i didn't realize i had to click on it to be taken to another page. but once i was on the full page, then it made sense. maybe give a snapshot of the major info & then maybe have a 'click here for more details'....b/c i didn't know i was supposed to click.
 * Do you often view images or videos on Wikipedia? Do you use those images on different places (such as your blog, slides for presentations…)?
 * yes, although more images than video - i use a lot of 'em in powerpoint presentations and my friends' websites & our blogs. i quote the source in the way wiki has it laid out.
 * How easy would it be for you to use this tool for improving your own slides or web pages?
 * it feels a bit more cumbersome - which is why a lot of times i go to bing or google images. i wish images/videos were clearly marked if it could be shared or re-used or not. maybe a stamp of approval or something like that...so that way when i pull up wiki images in bing/google/etc. then i could click on it after seeing the stamp to see who the source is...

User 4
This user was not able to connect with Hangout, so text-only based test was done.

Summary
 * User was able to access the media viewer.
 * User was able to access the metadata panel by scrolling.
 * User was able to find the link to be shared with a friend.
 * The user considers right-clicking + saving or copy & paste as the way to add the image to his slides.
 * The user knows how to attribute, but would like to see more clarity for the license terms.
 * The user is able to use next/prev but would like to have some slideshow feature.
 * It may be a good idea to emphasize the slideshow function a bit in a subtle way when we find that the user is going next several times.
 * The user found the fact that the panel moves over the image a bit strange but not confusing. The user considers easy to access the info about the image (“just need to scroll down”).
 * The user also tested the zoom prototype without any problem.