Media Viewer Research Round 3 Enable Disable(September 2014)

Introduction

Media Viewer is a new feature under development by the Wikimedia Foundation, which aims to provide a better viewing experience for readers and casual editors on Wikipedia and Wikimedia sites. This page is about user experience research that has been done recently to contribute to the development of Media Viewer.

Previous research

Previous research, done in August 2014, revealed usability issues with the enable / disable flow for Media Viewer.

Disable / enable flow:

These are the findings from previous research that indicated we needed to iterate on the enable / disable flow of Media Viewer:

Everyone found the settings icon eventually, though one person went to preferences first, and one person went to the “edit” tab first.
Language inconsistencies: “previews” AND “media preview feature” AND “file previews” exist in the prototype. We call Media Viewer several different things within the UI, introducing some confusion and lack of clarity in the messaging. These inconsistencies exist both in the disable dialogue and the enable dialogue.
People understood they could press “disable file previews” to disable the feature.
It was confusing to land on the image file page after disabling the feature.
It was confusing to be asked if you want to enable when you just intentionally disabled.

Recommendations for disable / enable flow:

These are the recommendations from the previous research:

Make language more consistent. Decide on one name for the functionality and stick to it any where in the UI it needs to be referred to.
Provide a small confirmation that the feature has been disabled, and notification that to re-enable, you go back to the settings icon, rather than the enable call to action. (“Media Viewer is disabled, to re-enable, go to settings icon”)
If possible, once Media Viewer is disabled, land user back on the article page instead of on the file page. (How will they get back to the article page from the image file page view?) This will help with any potential contextual confusion.
How will users re enable Media Viewer (or whatever we decide to call it) from the article page, once it is disabled? This needs to be just as easy to find as disabling. Where will the settings icon be for them to re enable the feature?

Goals of this research

The goal of this round of research, done in September, 2014, was to usability test the enable / disable flow with readers, to understand if the revised flow is more usable and intuitive than the first iteration, and to inform any further iteration needed.

Specifically, we wanted to discover:

Is Media Viewer easy to disable?
Is it possible for users to re-enable Media Viewer?
Do users understand the above the fold info (especially whether the author icon helps)
Can users find additional information by clicking on the ellipsis? (do several ellipsis cause confusion?)

Findings

Is Media Viewer easy to disable?

Yes it was easy to disable.

4 of 6 participants were easily able to discover where to go and how to disable Media Viewer.
5 of 6 participants were able to clearly describe the difference between Media Viewer being enabled, and it being disabled.
3 of 6 participants had some contextual confusion about the difference between Media Viewer and the Page view, but 2 of those participants demonstrated that the distinction is learnable as they progressed through the study.

Is it possible for users to re-enable Media Viewer?

Yes, people were able to re-enable. However, a few had contextual confusion. That being said, everyone was able to accomplish the task, so most likely any confusion would be ironed out after time, as it seems learnable.

4 out of 6 were able to view and image in Media Viewer, even though MV was disabled, by using the [view in Media Viewer] button below the image on the File: Page View. One of the 2 who didn't use the [view in media viewer] button, re enabled by pressing the cog icon (settings) and did view in media viewer.
3 of 6 participants were able to re enable Media Viewer by using the cog icon (settings) under the image in the file page view. The other two re- enabled Media Viewer by pressing the [view in media viewer] button and then went to the cog (settings) icon within Media Viewer to re-enable.
1 participant went through all the correct steps to re enable Media Viewer (through the [cog] icon, and then saw the enable dialogue, but she pressed [cancel] instead of enable. She clearly understood where to go to enable, but in the end was not successful.
3 of the 6 had some confusion about where to go to re- enable, but were able to do it with a little looking around, so it is discoverable.
5 of 6 participants stated that it was easy to disable and re enable Media Viewer after they experienced disabling and then re enabling.

Do users understand the information above the fold? (especially whether the author icon helps)

There is not a clear distinction between several descriptions (one above the fold that expands along with the info panel, and one below the fold that is revealed with the panel expansion). It is not clear if people knew who the author was because the author's name was the only name. The smiley face icon wasn't necessarily confirming that the information to its right is the author. People used other kinds of information to confirm their guess about who the author is.

3 of 6 participants were confused about the various types of descriptions (above and below the fold). There was a description above the fold that had an elipses. When people pressed the ellipses, it opened the info panel and it expanded the top description to reveal the rest of its content. However, another different description (of the place the picture was taken) was also revealed below the fold. There was not a clear way to understand what is a description of the image for the article, and what is a description of the place the image was taken. There was also some confusion between the author's describing where they took the picture, and the two descriptions.
5 of 6 participants were able to correctly identify the "author" of the image. It is not clear if they were guessing (there was no other name besides the author's name in view) though. The smile icon that was designed to indicate the author did not seem to provide feedback that the name next to it was the author, because people looked for other ways to confirm the author's name.

Can users find additional information by clicking on the ellipsis? (do several ellipsis cause confusion?)

The ellipses was confirmed in our last research as usable for expanding a long and truncated description. This time, the ellipses not only expanded the description, but the info panel too. This revealed another description which introduced some confusion about which description was the one for the picture.

3 of 6 participants clicked the ellipses to read the rest of a truncated description. The other 3 users scrolled to open the info panel. The usability of using the ellipses to reveal the rest of the description was proven to be good in our previous study. However, this time around, the ellipses opened the info panel to reveal two descriptions. There was some confusion about which set of content was the description for the image on the page and what the other content was.

Recommendations for Enable / Disable Flow

The messaging and feedback for the entire enable / disable flow is much improved and worked well for this set of users.
The smiley face icon is not necessarily indicative of "author". Let's look for another icon that says "author' more clearly, or find another way to indicate "author"
Create more clarity between the description of the image and the description of the image location. We probably don't even need the description of the image location below the fold. It might be best to just have the ellipses expand enough to reveal the rest of the image description and that's it, rather than it being a mechanism to open the info panel.
Use the ellipses to expand a long and truncated description only. Don't use it to also expand the info panel. The ellipses indicates giving more information about what it is connected to, not necessarily providing more information that the rest of a sentence. Expanding the panel via the ellipses reveals more than people expect, and makes two system actions (reveal rest of the description and open the info panel) from one user action. I think we need to separate these two actions.
Also, for this iteration, I again suggest we do not have info below the fold (a static page with no info panel). Let's do more specific testing on the interaction with the info panel before implementing it.

Methodology

We used usertesting.com and had 6 participants. Here is the etherpad where we designed the study. Here is the prototype we used.

Recordings and Other Information

If you have doubts about the validity of doing usability testing with 5 people, please read this article on why there is no need to do usability testing with more than 5 people.

Links to research session recordings. Please check out how the research sessions went by viewing these videos. If there is a link here, the participants chose to make their research sessions open to the public. You may want to fast forward as the researchers were waiting for participants to get on the call sometimes for 10 minutes, and that part is boring.