← Return to home

Wikipedia Concepts

Nearly two years ago I attended the annual Wikimania conference in Buenos Aires which had an overall theme on participation. The conference inspired me to think about some of the problems that Wikipedia was facing, and how they could be approached from interaction design:

A common theme in Wikimania 2009 was concern that participation in Wikipedia is plateaued, or perhaps even decreasing. Andrew Lih gave a great talk that Wikipedia’s early phenomenal growth was probably a ‘catching up’ phase, and now growth will continue at a slower, but steady rate. But even so, it’s recognized that with only a small percentage of people contributing changes, that there could be improvements made to encourage people to edit.

Many people are not even aware that Wikipedia can be edited. I don’t think that these problems with participation are only interface problems, I think it lies deeper in the culture of how newbie editors are integrated into the Wikipedia community, and the policy and procedure that people encounter when they start to become involved with Wikipedia. In any case, I couldn’t help but quickly mock up some wireframes that demonstrate some alternative ideas to the Wikimania article page.

I made some quick wireframes and sent them around for discussion but didn't think much more about them after leaving Wikimania...

Wikipedia Redesign 2009

...until recently when I read about Wikimania 2011 and became interested in exploring my ideas further.

Instead of revisiting wireframes, I decided to explore changes in HTML by creating a Chrome Extension that overrides the default Wikipedia CSS and also uses jQuery to manipulate elements in the DOM.

Below are screenshots of the current Wikipedia design and screenshots of the same page with the Chrome Extension enabled.

Current design (August 2011) Proposed design (click for full size)
Wikipedia Current Default Wikipedia Redesign Default
Proposed changes:
  • Introduce a consistent header with cross links to Wikimedia sister projects (Wikipedia, WikiNews, WikiQuotes, Commons etc).
  • Extract article table of contents from the article body and place in the left-hand column that currently holds utility links (toolbox, languages) with the article contents.
  • Remove Discussion, Read, Edit, and History tabs with an 'Improve this page' panel with links to these special views.
  • Add styles for blockquote elements.
  • Fixed-width layout to prevent extra-long line lengths.
Wikipedia Current Mid Wikipedia Redesign Mid
Proposed changes:
  • Anchor the table of contents to the top of the browser when scrolling so it's always visible.
  • Use a more distinctive :visited state for table of content links to show a history of sections that have been previously viewed.
  • Alter section edit links to display only :onhover.
Wikipedia Current Footer Wikipedia Redesign Footer
Proposed changes:
  • Visually represent references in a way to separate from the main article content.
  • Restyle related-link navigation boxes with left-aligned text.
  • Style category cross link navigation boxes in a distinct way that separates from article content (and continue this approach to the category pages themselves).
Try it yourself

I created the extension initially to explore some ideas, and although it has some large chucks of functionality missing (for example: auto suggest on the search field does not work) I've become enjoy using it as my preferred way to read Wikipedia.

If you want to try it your self, download Google Chrome and install the extension yourself. Once installed you don't have to do anything extra - just start browsing Wikipedia.

Add to Chrome