Who doesn't love going down the rabbit-hole on Wikipedia? Easily one of the most beloved treasure troves of information.
Well, a couple of days ago, Nirvar Pangarkar (@nirzardp), Designer at the Wikimedia Foundation documented his process for rolling out a new feature at Wikipedia. This new feature, isn't particularly groundbreaking. But, I do suspect it will become the norm for Card UI components on the web.
It's called, Page Previews. Something of a marriage between alt-text and a card. Check it out:
This looks pretty cool. It's also live by the way! This was literally rolled out 48 hours ago. Visit any random Wikipedia article to see it for yourself.
It's definitely not a new idea, but it's an effective use of card UIs nonetheless. It's an even better example of design solving a problem. To be brief, Wikipedia was having a problem with users rabbit-holing maybe a little too much or in other words, a lot of random pageviews ≠ learning:
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.
Nirzar goes on saying that it's possible this preview card UI language could be extended to the wikipedia editor tools and other content types (think audio playback, pronunciations, or quotations). Neat!
While we're on the subject of context, I want to share this tid-bit from Dave Rupert's, Pitfalls of Card UIs:
I’m of the opinion that all cards in a Card UI are destined to become baby webpages. Just like modals. Baby hero units with baby titles and baby body text and baby dropdown menu of actions and baby call to action bars, etc.
…
The desire to reduce clicks increases complexity and raises the cognitive load. Depends on your situation, but I honestly think the workaround here is to go back to having a strong detail view pages. Scope cards in your UI to truly being previews or –to borrow a term from the watchOS Human Interface Guidelines– a “glance”.
Dave's note about cognitive load is important for Wikipedia. A page preview card potentially disrupts a users desire to bounce. Allowing Wiki-users to consume as much contextually relevant content possible before bouncing. Looks like a win for Wikipedia, and a win for staying on topic the next time you're researching anything on Wikipedia.
I guess cards are destined to become little baby webpages! 👶
Note: if you don't see page previews while on Wikipedia, you may need to login first and enable it under Preferences > Appearance.
