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.
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.
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...
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.)
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.
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.