How we designed page previews for Wikipedia — and what could be done with them in the future

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 percent of 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.


Read further in the pursuit of knowledge

A group of men celebrate with the World Cup trophy amidst a shower of confetti

Wikipedia’s most-popular articles of 2018 show that pop culture rules over us all

People visited Wikipedia over 190 billion times in 2018 alone, many motivated by the encyclopedia’s wealth of in-depth articles about topics you didn’t know enough about. But in looking at the English Wikipedia’s most-popular articles of 2018, it’s clear that one motivation reigned supreme. People wanted to keep up with the popular culture moments happening….

Read more

Five ways academics can contribute to Wikipedia

In recent weeks, the world learned about Dr. Donna Strickland, only the third woman to be awarded the Nobel Prize in Physics. It also learned that Wikipedia lacked an article on Strickland amongst its over five million articles. Wikipedia subsequently received justifiable criticism for its low percentage of female editors, its editing culture, and its….

Read more

WikibaseNYC conference explores the frontier of linked open data infrastructure

When you think about the work of art historians or genetics researchers, installing database software is not the first thing that comes to mind. Yet, from 19 to 21 September, Wikimedians, art curators, and scientists gathered at the New Museum in New York City’s Lower East Side for a three-day workshop to talk about an….

Read more

Help us unlock the world’s knowledge.

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

Donate now

Connect Связь

Stay up-to-date on our work.

Get email updates

Subscribe to news about ongoing projects and initiatives.

This mailing list is powered by MailChimp. The Wikimedia Foundation will handle your personal information in accordance with this site’s privacy policy.

Contact a human

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

Photo credits


Twitter previews

interaction timeline for showing a preview

preview variations

preview examples

Wikimedia preview possibilities



NYU library2 crop

Detroit Publishing Company/restored by Durova

Public domain