Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0.

The rabbit hole

People love Wikipedia. People love Wikipedia for specific reasons. One of the popular ones, as explained by XKCD, is the author’s three-hour journey from the article on Tacoma Narrows Bridge to others like “Fatal Hilarity” or 24-hour analog dial.

We call this the “rabbit-hole” around the halls of the Wikimedia Foundation’s office. (Shameless plug for the Wikipedia Rabbit-hole t-shirt.)

This is one of the most iconic and popular user patterns we see on Wikipedia. People start on one article, and then head somewhere else, and then somewhere else, learning about lots of different topics along the way.

We design for these readers, optimizing not for page views or engagement — but for learning. And it turns out that context is a key part of learning.

Context matters, but context switching is costly

Page previews, as a feature, is a utilitarian interaction pattern that has been around since the invention of JavaScript.

Here’s how Twitter, for example, uses previews to get context about a user. Screenshot/GIF via Twitter, fair use.

It is not a groundbreaking solution for providing context without losing the thread. Yet, even the most basic interaction changes on Wikipedia come with their own unique challenges. Let’s shed some light on why this is a big deal:

A few numbers to grok at

  • Nearly ~28 percentof Wikipedia’s traffic comes from clicking on internal blue links. a.k.a going down the rabbit hole
  • Blue links account for ~230 million page views per month
  • ~2 million links get hovered per minute across all Wikipedias

In other words, blue links are the most frequently-used interactive elements on Wikipedia. This makes messing with or changing any feature related to blue links a bit more… delicate and challenging.

Add value not pain

Modifying such frequent behavior is difficult. We began by using qualitative and quantitative insights to conclude the interaction timeline for showing a preview:

Timeline shows events after a user hovers on a blue link.  Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0.

Given Wikipedia’s scale, a minor change in any of these variables could always result in a massive impact on the experiences of the end user as well as on our infrastructure. Using evaluative research, we learned that some people read text online by hovering over sentences making page previews potentially annoying for this audience.

Building in artificial delays before the page preview appears — about 650 milliseconds — allowed us to reduce the number of unwanted previews. We also made it simple to disable this feature without having to jump through hoops.

Representing the context

The next challenge was to represent an article with information that is available and information that is not available. How do you account for unknown content? Well, you design for all the possibilities.

Edge cases, edge cases, and edge cases

I don’t like the term, personally. Mostly because it gets misused to make design decisions. It is even more inaccurate when it comes to designing for Wikipedia.

Wikipedia’s content is written by more than 500,000 humans and bots across 300 languages. It differs in tone, format, availability, level of detail, and subject matter. Everything is an edge case, hence nothing is.

Designing the preview was like playing Tetris without knowing what the next piece is going to be. Here are different variations of previews laid out:

Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0.

This diverse set of use-cases results in different representations of an article ranging from landscape images, tall portrait previews, right to left previews for links that lead to list of articles. Adjusting line-height for math-related pages on Tamil page previews so the sentence clipping works properly is part of designing page previews.

Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0. Text from the indicated Wikipedia articles in various languages, CC BY-SA 3.0. Enclosed images may be under different licenses.

Future of page previews

This is just a beginning — page previews open possibilities in multiple areas, as context is becoming more and more important not only on Wikipedia but on the internet in general. (Note that these are just ideas, and are not in active development.)

Support for more types of contents

Currently, previews are meant only for articles but we have built them in a way such that they could be used for different types of content and formats.

Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0.

Power previews for editors

As of now, page previews are designed for readers — but they could be adapted for power editors by hosting comprehensive information and useful actions that are more relevant to editors.

Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0. Text from Wikipedia’s article on the Mona Lisa, CC BY-SA 3.0. Enclosed image, public domain.

Wikipedia outside Wikipedia

We call on Wikipedia as second source material. Just like a dictionary is used to explain the meaning of a word while you are reading a book, Wikipedia is often used as a second source to know context for reading even outside of Wikipedia.

Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0. The preview includes Wikipedia text from hairy-nosed otter, and the underlying article is from Jeremy Coles, “Conservation success for otters on the brink,” BBC Earth, 20 June 2017, used here under fair use.

Wikipedia previews could be adopted by other publishers as a means to provide quick context around topics.

Wrapping it up

Page previews pave a path for another way to interact with Wikipedia. The reading experience of Wikipedia can be broken down into smaller pieces. We’re looking forward to more ways of moving away from the traditional notion of single monolithic articles towards more modular and contextual learning.

Feel free to provide feedback on our project page.

Thank you!

Nirzar Pangarkar, Design Manager, Audiences Design
Wikimedia Foundation

Want to learn more? See the original announcement and why it took us so long to build this.

This post originally appeared in “Down the rabbit hole,” our Medium publication. It has been modified for re-publication on the Wikimedia blog.

Related

Read further in the pursuit of knowledge

Community From the archives Offline access Wikipedia

Offline-Pedia converts old televisions into Wikipedia readers

There are villages in the Ecuadorian Andes that are so small you cannot find them on a map. Cajas Juridica is one such place, located just 13km north of the equator. But two engineering students, Joshua Salazar and Jorge Vega, and the staff of Yachay Tech University have figured out a way to give discarded….

Community From the archives Interview Profiles Wikipedia

Meet the scientist working to increase the number of underrepresented scientists and engineers on Wikipedia

By day, Dr. Jess Wade is a physicist best known for her work on “polymer-based, circularly polarising, light-emitting diodes.” But in the evenings (and on the weekends, and as other time permits) Dr. Wade is a strong advocate for increasing diversity and inclusion in STEM subjects, speaking at conferences and starting a campaign on Wikipedia to promote more early-career women….

Community Foundation From the archives Wikipedia

New interaction timeline improves investigation of harassment cases

The new interaction timeline tool is a way to look at two contributors’ editing history—where they have interacted, when, and how often. This can help add clarity when reviewing reports of harassment and abuse, and takes some of the burden off both the people reviewing problems, and the people reporting them.

Help us unlock the world’s knowledge.

As a nonprofit, Wikipedia and our related free knowledge projects are powered primarily through donations.

Donate

Connect —

Stay up-to-date about the Wikimedia Foundation

Get email updates

Subscribe to news about ongoing projects and initiatives.

Contact a human

Questions about the Wikimedia Foundation or our projects? Get in touch with our team.

Photo credits

design-of-page-previews

Twitter previews

interaction timeline for showing a preview

preview variations

preview examples

Wikimedia preview possibilities

Offline-Pedia-screenshot

University Yachay Tech

CC BY-SA 4.0

17_350-icl-jwade-024

Jess Wade

CC BY-SA 4.0

matthew-henry-86779-unsplash