Reading/Multimedia/Media Viewer/Usability testing

Testing round on May 2014

Summary

What worked well

Experiment with light background. This set of tests were done with a light background. We didn't observed any negative impact on user experience by using a white background. Thus, the decision on whether to use a light or dark background becomes a decision on whether to be consistent with Wikimedia projects predominant background (white) or media viewing experiences users are used to on the Internet (normally using a dark background).
Users were able to add images to the slides. Using several means (download panel or "save as..."), users were able to get the images and use them in the slides. Less users fail since we introduced the "download" panel, but insert by URL is still an issue (see below).
- The main issue was when the Slide software asked for a URL to add images. Providing a direct link to the file could also help in this case to make the experience more fluent.

What didn't worked so well

Lack of clarity on license and attribution. Users have problems to identify the license information, and even when they do it is not clear how the should attribute the image.
Users don't access Commons for getting advanced details. When users are asked about advanced details such as the camera model, they look for them at the right column from the metadata panel, but when those are not found there, they just skip the "Learn more on Wikimedia Commons".
- The call to action should be more specific: "More details about this file on Wikimedia Commons". The current style could be also adjusted to avoid some banner blindness.
Initial discoverability of metadata. Although most users are able to find the metadata panel, it gets unnoticed on the first time for some. Since it provides relevant information about images, we need to make sure that users are aware of it (so that they can make the choice of viewing the image or the metadata).
- We can tweak different aspects to highlight more the panel on first access: the timing of the invite animation, the colour and size of the chevron and even an initial tooltip if necessary (once the survey tooltip is removed).

Detailed observations

User 1

View recording

The user access the image by clicking on the thumbnail.
The image selected does not display the author, and the user does not find additional info.
The user clicks outside the image to try to close, but recovers by clicking "back" button
When opening another image (with author) the user is able to access more information by scrolling.
The user looks for a specific sharing option, and does not associate the "use this file" option with this purpose.
The user decides to try the "use this file" option and discovers the share functionality.
The user makes use of "save as" to download the image.
The user tries to copy the browser URL to add an image to the presentation.
The user uses copy&paste to use the image in the presentation.
The user does not find how to attribute the author (apart from copying the author name)
When asked about the camera model, the user identifies the right column as the technical information area,but does not access the Commons page.
The user tries to click on the image to zoom.
The user tries to open in new tab as a way to zoom.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- I would have liked to see sharing made easier by having the media buttons right under the picture to share.
Do you find information about the image easy to access when you needed it? How could we make it easier?
- i could not find any information on the licensing and i would have liked to see more information provided
How easy would it be for you to use this tool for improving your own slides or web pages?
- I am not sure i would have to play around with it in order to see how it works and how i can use it to my advantage.

User 2

View recording

The user access images by clicking on them and identifies the author.
The user recognises the Creative Commons license.
The user makes use of next/prev controls to move through images.
The user access "use this file" panel to share the link
The user identifies "Download" as the way to get the image.
The user tries to insert into the slides by using the "share" link.
The user mentions that since the link didn't work, she would download and upload it again as a workaround.
The user identifies and access the Creative commons information.
The user is not able to access the metadata panel.
The user identifies the purpose of "embed" but initially assumes it is HTML
The user makes use of fullscreen as a substitute for zoom but realises it is a different feature.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- Wouldn't say that anything was really surprising or confusing. I don't know if it would be completely obvious to someone how to enlarge and view the photos if they were just browsing the article. Had never thought about Wikipeida as a place to find photos that I could use in other ways.

Do you find information about the image easy to access when you needed it? How could we make it easier?
- I don't think I could find all of the information that I was directed to find. Could not find the properties of the photos which would have given me more info like when it was taken, type of camera, etc. Adding a properties link in the lower left corner where the other info was would be the most obvious way to improve it.

How easy would it be for you to use this tool for improving your own slides or web pages?
- Looks like it would be pretty easy. Could use embed codes for websites. Could download images for other purposes.

User 3

View Recording

The user clicks to view the image. Loading bar shows and makes invite animation too subtle.
The user uses full-screen and next controls.
The user identifies the X to close the media viewer and go back to the article.
The user finds additional information by scrolling and identifies the basic information.
The user finds the share options.
The user will download the image through "save image as.."
The user finds the multiple sizes for downloading.
The user adds the image to the slides using copy&paste.
When trying to insert by URL, the user tries to use the share URL
The user gets the impression that the image is copyrighted.
When looking for the camera info, the user goes to the right column where technical info is, but skips the Commons link.
The user tries to use embed as a last try to use the picture in the slides, and by pasting the code in the search field she founds the image.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- Yes I was suprised that I could embed the photo that I could not copy or upload. I don't know that improving is an option.
Do you find information about the image easy to access when you needed it? How could we make it easier?
- I did, had I know what embed was it would have all been easy.
How easy would it be for you to use this tool for improving your own slides or web pages?
- Pretty easy

Testing round on April 2014

Summary

What worked well

General viewing experience. Users were able to enter and exit media viewer, moving through images, displaying them in full screen and accessing image information without major problems.

The user was able to operate the "use panel". The "use this file" panel was easy to discover for users, navigate and operate the controls provided. while the "share" functionality was obvious for users the "embed" functionality will require some more detail (as described below).

Clicking outside to close the Media viewer worked but need some details to be taken into account. Clicking outside the media viewer is expected by the users (some made use of this feature with that intention) especially on small images (that make the black border more visible). The following issues were detected that need to be taken care of in the implementation:
- When the "use" panel is open, clicking outside should close only that panel and not the whole media viewer.
- When users are cycling through all the images and they reach the end, the "next" control disappears, and users are likely to do an additional click in the same location due to their "next" inertia. In that context, closing the Media Viewer becomes unexpected. That is, the area used to go to next should not allow to close the media viewer (at least, unless the user moves the mouse outside of it).
- When the metadata panel is open we can consider making the click outside to close the panel.

What didn't worked so well

Lack of clarity on license and attribution. Users have problems to identify the license information, and even when they do it is not clear how the should attribute the image. As described by an user "The policy told me that I had to cite the source, but I still wasn't sure exactly what that would look like. Seeing an example would help to alleviate that confusion."
Embed may be misleading for some reuse usecases. when asked to add an image to some slides, users tried to use the embed feature. Part of the issues may be that we are leading the users towards the use of the "use" panel in a way that prevents them to behave as they would regularly do, and the lack of the "download" section in the version we are testing. However, it would make sense to provide additional clarifications. Since many sites allow nowadays to just copy&paste or drag& drop, the embed panel could be a good place to inform of that and cover this usecase.
Image controls overlap other panels in Firefox. Image controls such as "next" overlap with the metadata and "use" panels causing unintended clicks from the user.
Interference between metadata and "use" panels. When the metadata panel is open, and the user clicks on "use this file", the "use" panel appears outside of the viewport. It would be preferred for the metadata panel to become closed to leave room for the new panel.
Users don't know what is wikitext. Providing more clarity could help. In addition, making HTML the default for anonymous users could make sense since it is more likely to be what they are looking for.
First time loading issues. Maybe just a temporary glitch but some users (users 2 and 3) had problems when opening the image for the first time. The image appears blurred and the metadata panel or the progress bar are not visible. The password reminder bar that Chrome shows may or may not be related with the issue (since users are opening the image shortly after logging-in. the next time the image is open, everything shows as expected.
Non-article images Images unrelated to the article that are introduced as UI artefacts by templates may generate confusion to users and perceive them as unrelated and low-quality.
Direct link to image is hard to get. Users tying to use the share link to add an image on the slides found that the link was not valid and the had no clue on what was wrong. Facilitating the "inset image" scenario could help to solve this, but it may be worth it to provide a way to obtain a direct link if no additional confusion is added.

Detailed observations

View recording

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.
When looking for when was the picture taken, the user has a doubt about whether the "Created on" refers to the image or "the post" (probably referring to when was uploaded with all the other info)
The user tries to select the text but moves to the next image by accident (since "next" control is overlapping the "use" panel).
The user identifies the CC link to the license and mentions she would copy it to attribute the author.
The user discovers the link icon, but gets a bit confused because this leads to the file info page which the difference with Media Viewer is not clear.
The "next" control interferes with the Embed drop-down.
The user understands the embed concept.
The user understands "HTML" but not the "Wikitext" concept.
The user clicks outside to close
The user is a bit confused when non-article images (used for categories) appear.
When exploring the whole sequence, the user hits next automatically, which makes the click on the last one to close the Media Viewer (the user clicks on the empty space where the "next" arrow used to be) which may not be the desired behaviour.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- just the last thing, I could not find the information about what photo is the last one to appear.
Do you find information about the image easy to access when you needed it? How could we make it easier?
- yes, the information about the image was easy to access and see. I am not sure if you could make the access to it any easier, you did a good job already.
How easy would it be for you to use this tool for improving your own slides or web pages?
- quite easy.

User 2

View recording

The user clicks on the thumbnail to view the image with more detail.
The image takes some time to load and the metadata panel nor the progress bar are shown to communicate that the image is loading.
The metadata panel does not appear even after loading the image.
When the user opens the image again, metadata appears and he is able to identify "very clearly" the title and the author, but when exploring for the date, he follows a link to flickr from the image source info.
The user would like to see more information about where the picture was taken.
The user takes a time to notice the metadata chevron. It seems that the initial animation was not happening for him (maybe because of the use of a shared testing account)
The user identifies the "use this file" menu as a way to share. He has to manually close the metadata panel for the "use" panel t become visible.
The user identifies the share URL to send to his friends.
The user try to reuse the image on the slides using embed which is not an appropriate mechanism.
The user clicks outside the "use" panel expecting it to close, but the whole media viewer is closed instead.
The user finally uses copy&paste to add the image to the slides.
The CC indication is not clear enough for the user to indicate license and attribution info.
After exploring metadata, the user looks for licensing info through "More on Wikimedia Commons" link.
For attribution, the user considers copying the author, but it is not clear what else to add to attribute him.
The user goes back to media viewer and copies the authorship information to the slides.
The user is able to figure out the purpose of wikitext and HTML embedding, but it was not totally obvious the first time.
The user tries again to close the "use" panel by clicking outside and the whole media viewer gets closed to his surprise.
The user uses "next" to explore the sequence of images.
The user identifies the full-screen control and uses it to show images with the best possible detail.
When the user reaches non-article images (those from templates used as UI assets), the user perceives the lower quality ("some of these image quality are not the best") and those being unrelated to the topic ("is this all on the Wikipedia page?").
When the user goes back to the article to check why the image appeared as the last one,he cannot figure out the criteria since he got confused by the fact of non-article images appearing.
The user clicks "next" automatically and closes the media viewer by mistake.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- I was pleasantly surprised at how much information was available once I expanded the image details at the bottom of the page by clicking on the Up arrow. It told me a lot about the picture, including other places it had been used. I also appreciated the clear policy on how I could use the picture freely, as long as I cited the source.

Do you find information about the image easy to access when you needed it? How could we make it easier?
- It was very easy to access the information; I just needed to realize that there was a clickable arrow there. Perhaps you could make the arrow a brighter color, or make it glow, or something to catch the eye (without distracting from the image itself). Alternatively, you could add subtle text like "image / use information" near the arrow, so I know what I will find if I click the arrow. Finally, one thing that would be helpful would be an example of how cite the image. The policy told me that I had to cite the source, but I still wasn't sure exactly what that would look like. Seeing an example would help to alleviate that confusion.
How easy would it be for you to use this tool for improving your own slides or web pages?
- If I use Wikipedia for research on a topic that I am developing into a presentation or webpage, it makes it very easy knowing that I am free to use the images I find there - because I'm not only going to have access high-quality images that I'm allowed to use, but chances are I'm also going to get contextual information about the images that can help inform the way I use them.

User 3

View recording

The user clicks on the image to view it, but there are issues for it to properly load. The image keeps blurred and the metadata panel nor the progress bar are shown.
The second time the user access the image, the metadata panel is displayed (the user seems happily surprised) and is able to open it by scrolling.
The user is able to identify the basic information about the picture.
The user is confused about the author since the uploader picture appears twice and inconsistently for the current picture.
The user explores the "use this file" option while the panel is open. This makes her scroll to see the "use" panel and click on the "X" to close it (which results on the whole media viewer to be closed)
The user comments that would use the link from the "Share" view to share in Facebook
The user mentions that she doesn't know if the image is copyrighted, and thinks that it is due to the CC indicator. The user is familiar with right click + copy image.
The user tries to insert the image by URL, but the URL provided for sharing is not working.
Once the share link failed, user tries to use the embed code even she seems to think it is unlikely but there seems to be no other option.
The user does not see how to attribute the author or lean about the license.
The user thinks of embed as "putting it on an actual website"
The user initially thinks on "share with detail" referring to the share action, probably biased by previous tasks.
When scanning all images the user makes an additional "next" click when the "next" control already disappeared.
The user would like to be able to see the images in a gallery.

Questions

Was there anything surprising or confusing for this media viewing experience? How would you improve it?
- I wasn't aware that I could click on the images to find more information. I would love to be able to view all images in this article in a gallery view.
Do you find information about the image easy to access when you needed it? How could we make it easier?
- Yes, it was easy to access. I wasn't clear on how the actual author was or who to credit the photo to...I would make that a little more clear as it's very important. :)
How easy would it be for you to use this tool for improving your own slides or web pages?
- It seemed to be very easy, however, I'm not sure why I couldn't get the link to work when I tried to insert it.

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.

Detailed Observations

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.