Header image “Mockup” by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0. Text from the Wikipedia articles Andromeda Galaxy and Spiral Galaxy, CC BY-SA 3.0.
How many times have you visited Wikipedia to learn about one topic, only to find yourself 30 minutes later down a rabbit hole of semi-related subjects? This is one of the most popular user patterns on Wikipedia, and on April 17, the free online encyclopedia deployed page previews to improve this exact customer experience.
Page previews allow you to get a quick grasp of what’s behind a link without actually committing to a click-through. This feature has been around since the invention of Javascript, but the design team at Wikimedia Foundation took intense care to roll out this seemingly simple feature. Why? Because they knew that even changing the most basic interaction on Wikipedia could change the entire customer journey and flow.
Here’s what was at stake:
- Nearly 28 percent of Wikipedia’s traffic comes from clicking on internal blue links (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
Understanding your customer
Changing any behavior associated with these blue links carried inherent risk, so the design team began by using qualitative and quantitative insights to map out the interaction timeline for showing a preview.
Timeline shows events after a user hovers on a blue link. Graph by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0.
“Using evaluative research, we learned that some people read text online by hovering over sentences, making page previews potentially annoying for this audience,” said Nirzar Pangarkar, a design manager at Wikimedia Foundation, in a Medium post.
To address this potential pain point, the team built in artificial delays before the page previews appear, reducing the number of unwanted previews. They also made it easy to disable this feature.
Designing for every use case
The next challenge was to represent an article with information that is available and unavailable, accounting for unknown content.
“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,” said Nirzar. “Everything is an edge case, hence nothing is. Designing the preview was like playing Tetris without knowing what the next piece is going be.”
Graphic by Nirzar Pangarkar/Wikimedia Foundation, CC BY-SA 3.0. Text and images from the indicated Wikipedia articles in various languages.
The result was a diverse set of use cases to showcase different representations of content, ranging from landscape images, tall portrait previews, and right-to-left previews for links that lead to a list of articles.
The future of page previews
Just like every great feature addition, page previews opens up possibilities in multiple areas. It could be adapted for power editors by hosting useful actions and comprehensive information, or adopted by other publishers to provide quick context around topics.
See page previews in action on Wikipedia, and happy adventuring down the rabbit hole.
Emily has written for some of the top tech companies, covering everything from creative copywriting to UX design. When she's not writing, she's traveling the world (next stop: Japan!), brewing kombucha, and biking through the Pacific Northwest.
