Media Viewer Research Round 4 (November 2014)

Introduction

Media Viewer is a new feature developed by the Wikimedia Foundation, which aims to provide a better viewing experience for readers and casual editors on Wikipedia and Wikimedia sites. This report is about user experience research that was done in November 2014 to contribute to the development of Media Viewer and evaluate the usability of the tasks tested. Previous Media Viewer studies are listed below and on the Design Research page.

Goals for This Research

We are validating weather or not the iterations we have done address the issues we found in previous media viewer research. Specifically we needed to test this set of tasks:

• View images in Media Viewer
• Discover the drawer
• Identify the author
• Read description
• Read a long truncated description
• Understand the difference between the two descriptions
• Identify details about an image with an unusual description
• Discover date image was uploaded
• Download the image
• Download smaller size of the image
• Zoom in to see a detail in a picture
• Share image with a friend
• Navigate to next / previous picture
• View image in full screen
• View image in file page view (get more details)
• Disable media viewer and confirm disabled
• View an image in media viewer even though it is disabled.
• Re-enable media viewer

Methodology

We did usability testing with these participants:

• 5 readers (people who have never edited, but do read Wikipedia)
• 3 casual editors (people who have some minimal experience editing)

Four of the usability tests were moderated, and done via Google Hangouts OnAir. During moderated testing, researchers can have conversation with participants and ask follow up questions. For the other four usability tests were done using usertesting.com, so they were unmoderated. We had to speed things up, so decided to use usertesting.com because recruiting takes a lot less time, and the studies are shorter and completed more quickly than with moderated testing. The drawback to unmoderated testing is that researchers can not have conversation and ask follow up questions to participants. Since we had already done moderated sessions, we felt fine about doing some unmoderated sessions to gather some more data quickly.

Please see the links to research sessions below.

Findings and Recommendations

Users were able to complete all of the tasks above.  

What worked well:

We observed that readers were able to accomplish these key tasks with no problems:

View images in Media Viewer

No one had problems getting to media viewer.

Read a long truncated description

No one had trouble reading a long, truncated description by  clicking on the ellipsis to see more.

Identify details about an image with an unusual description

No one had trouble learning about the image with the information that was provided within Media Viewer.

Discover date image was uploaded

Only one person had difficulty finding the date the image was uploaded. Everyone else was able to find it easily. The reason the one person couldn't find it is because she hadn't discovered the drawer or how to operate it yet.

Zoom in to see a detail in a picture

Everyone was able to zoom into an image with no problem.

Share image with a friend

No one had a problem sharing with a friend. Most people first think to right click to copy and paste the image, or to copy-paste the link to the image from the browser window to share :that way. When we asked them to find another way after they did what first came to mind, they then found the icon.

Navigate to next / previous picture

No one had trouble navigating to next or previous pictures using the arrows.

View image in full screen

No problems clicking on the full screen button for this task.

View image in file page view (get more details)

No one had difficulty getting more details about an image on the file page view. They all found the “more details” button and navigated to the file page view without difficulty.

Disable media viewer and confirm disabled

No one had trouble figuring out how to disable media viewer, and confirm that it was disabled.

View an image in media viewer even though it is disabled.

No one had trouble viewing the image in media viewer even though it was disabled.

Re enable media viewer

No one had trouble figuring out how to re enable media viewer.

Interesting Observations and a Few Recommendations.

Users were able to accomplish the tasks in this section, and we observed some informative findings.

Discover the drawer

Though some people had trouble discovering the drawer, and some people (once they discovered the drawer) had difficulty figuring out how to open and close the drawer, everyone eventually discovered it and then learned how to use it during their time in this research session.

Some users figured out how to open the drawer by scrolling down or using the arrow keys, and some users discovered the drawer by clicking on the ellipsis (if they are present) of a truncated description and observing the drawer opening as a result. People without mice that scroll, or the ability to scroll, may have the most trouble discovering and operating the drawer.

Recommendation:

Make sure people can see the scrollbar more clearly. Those with no scrolling mouse are less likely to discover the drawer (and how to operate it).

Identify the author

Still some confusion about who is the author. Generally, the smiley face icon is confusing. People are able to more confidently know who the "author" is, only after they see the name of :the "file uploaded by" The smiley face with an arrow next to it, probably would be just as confusing as the “author” icon if the word "uploaded" wasn't right next to it.

Recommendation:

Put the word "Author" “Photographer" or “By” next to the name of the person who created the picture.

Read description

People are not clear on the difference between the caption and the description. They don’t necessarily understand the groupings of information below the fold and under the caption. There is confusion about which information is which, and why it is relevant to the image in the article. The caption above the fold is useful and easy to understand. The information below the fold (particularly on the left side) causes some confusion about what the information is, and why is it there. Sometimes there are licensing details (with an scroll bar inside a box), the author (with square smiley face) is listed, the other places (projects and wikis) the image has been used, etc. Users look at one of the descriptions and choose the one that makes most sense. This is not a show stopper, and didn’t stop anyone from accomplishing tasks, but there are things we can do to reduce the users’ confusion here.

Recommendation:

More clearly outline what the content below the fold is, and why it is there, if possible. The description below the fold gets lost among the various other possible types of information shown. Labeling this information would make it easier for people to make use of the content below the fold and understand how it is relevant to the image. Be direct about the caption above the fold being what the editor who added it to this page provided. The description below the fold is what the uploader provided, label author more clearly, and the other places this image has been used. This could possibly be accomplished by simple labels. However it is clear that there is little control about what is added to the description and what will show up :below the fold.

Download the image

Everyone was able to download the image. A few people did not see the download icon. One was on a very light background image, and the icons faded into the background. The other person had the drawer open and did not see the icons. They were both able to download by right clicking though.

Recommendation:

When the drawer is open, it covers the bottom two icons. Can we move those icons up to avoid the icons being obscured by the open drawer? (This problem is not preventing people from downloading, as almost everyone thought of right clicking and downloading that way first.)

Also, on a zoomed in image with light backgrounds, the icons fade, people are less likely to see them this way. Probably not a lot we can do about that, but something to think about.

Download smaller size of the image

Everyone was able to download a smaller size of the image. A few people who did not see the download icon (because they were zoomed into an image, or were on the page view) were :still able to download the smaller version via work-arounds (right click and save to their machine). Also, on a zoomed in image with light backgrounds, the icons don’t stand out very much, people are less likely to see them this way.

Videos of Research Sessions

Here are links to moderated research sessions we did using Google Hangouts OnAir

Elias (Reader with minimal experience editing)

Dee (Reader only)

Rafael (Reader only - requested we do not share his video)

Jan (Casual editor, "not so much anymore")

Here are links to shorter, unmoderated research sessions using Usertesting.com:

ToughDolphin (Reader only - requested we do not share his video)

Andrii (Reader / casual editor)

adrian.harabula (Reader only)

zarvata (Reader only)

Previous Studies

Here are links to previous user research studies about Media Viewer:

July 2014

August 2014

September 2014 (round 3)