Totally Loaded: How to Keep Your Users Waiting
Brainstorming in Parallel

Redesigning Wikipedia

David Sherwin tackles the Wikipedia page

This weekend, I found myself—through the execution of what seemed like an easy challenge for my book—thrust into redesigning a Wikipedia page. In the process, I was dumbfounded by how many usability and visual consistency issues there are in the Wikipedia interface.

We spend a ton of time querying the Internet for details about everything from where President Obama was born to who directed the third episode of the fourth season of Buffy the Vampire Slayer. And more often than not, we're interested in the facts we're uncovering, not how the facts are presented to us. This is a shame, because there are major improvements that can be made by designers to how we present factual content that's meant to be consumed through the Internet.

Other sites, such as Usability Post, have done a thorough job of documenting a number of the major issues with the old interface, so I spent an hour correcting some of them in a visually pleasing fashion to show how, with a minimum of effort, a coalition of designers could rethink some of the key interactions on Wikipedia.

Lighten up the page. An encyclopedia of the past has an authoritative voice, creates a focus on legibility and long-form readability first, and so forth. But many of those attributes are also sacrificed to make producing each printed volume cost-effective. In the process of creating such a collection of tomes, you're like to find major compression of content in order to fit more and more data on the page: through font selection, leading, lighter page margins, and so forth.

 

Enyclopedia Britannica 9th edition

 

Now that we're online, it's about time that we added in a bit more white space, reinforced the page grid, and got rid of those silly square aqua bullets. In doing so, things feel much cleaner on the page and lines and boxes aren't necessary to hold the layout together. (Depicted above, click to enlarge.)

Focus on the article lead. The abstract for each article is the most important element on the page to orient users to the topic at hand if they have no familiarity with it. So why is it the same size as the body content? It may have been that way in print encyclopedias, but we need to think of Wikipedia as more like a magazine.

 

Wikipedia Redesign - Larger Abstract

 

Get search out of the sidebar. Since Wikipedia has an information architecture that could never conform to a hierarchical navigation scheme—meaning that you can't click on a piece of navigation to see a list of content or even categories of what exists within Wikipedia in a usable fashion. (Though you can find pages and pages of lists with a single click, if that helps you find something quicker than search.) Since Search is the primary navigation behavior, you'd think that the search box would migrate up to pole position next to the logo. Though it's much more likely that people simply enter and exit the site from their search engine of choice...

 

Wikipedia Redesign - Search and Logo

 

Rethink the Wikipedia mark and typography as part of its identity. I did a two-minute surgical manuever on the Wikipedia logo to show how it could be freshened up. I know I may polarize the design community by selecting our much-abused friend Helvetica as the Wikipedia typeface du jour, but considering the homogenous voice of this site's content, it does make sense.

Emphasize the tabs for article editing. I've always hated how the tabs at the top vanish into the page. It would be easy to have only the selected area that you're on be a visible, active tab—and clean up the page a bit in the process.

Promote the article summary to primary navigation—and move it out of the content well. The page contents listing exist as a way for users to jump to a key point of content within the article. Why not create more focus on the page for them? It's highly likely that people didn't come to the page to interact with the overall Wikipedia navigation. (Which just takes you to summary pages full of lists that you're likely to become buried in.)

 

Wikipedia Redesign - Contents as Navigation

 

Make all sidebar navigation collapsable. Let's use some nice Javascript—if you have a Javascript-enabled browser, of course—to give the user control over collapsing and expanding the lists of links in the lefthand column. Use cookies to remember a user so whenever they return to Wikipedia, their page renders with the same display settings.

 

Wikipedia Redesign - Collapsable Navigation

 

Simplify and remove lines and ugly bullets from the righthand sidebar. Just by using subtle grey boxes, clutter reduces. Stripping out extraneous bullets really helps as well.

 

Wikipedia Redesign - Sidebar Content

 

This polishing exercise could have gone forever, so I gave myself a strict time limit. But I think this quick study shows that just because you're trying to design a site as a representation of knowledge doesn't mean you need to conform to common encyclopedia-design layout principles to create gains in legibility and navigability.

Next up... someone redesign Encyclopedia Brittanica.

 

Radiohead entry on EncyclopediaBrittanica.com

 

Comments

Michael Kozakewich

"...it's about time that we...reinforced the page grid..."

As long as you aren't suggesting a fixed-width grid, like is found on most sites. Wikipedia is one of the few fluid-width sites out there.

A fluid grid would be nice, though.

David Sherwin

Hi Michael--

You're bang on about what I'm seeking -- a fluid-width site that would hold to a stable baseline grid.

Best, David

Mathew Sanders

Hey David,

I've just spent last week at Wikimania 2009 (annual Wikipedia conference) where there were some interesting talks about usability initiatives for all the Wikimedia projects. You can read a bit about them here if you're interested: http://usability.wikimedia.org

Also, like yourself, I couldn't help myself, and spent a few hours one afternoon thinking about some changes that I would suggest to the article page, which I've posted here: http://www.mathewsanders.com/touchpoints/redesigning-wikipedia-1-208.html

There are some similar themes as your suggestions, including moving article navigation out of the main article text, and collapsing some of the navigation to make a less cluttered page. Any feedback would be appreciated!

The comments to this entry are closed.