Navigation

Wikipedia Redesign: What’s in Store?

Design, Usability, Web Design | Dec 7, 2009

Wikipedia is currently undergoing a much needed redesign to improve the user experience.

Anyone can preview this redesign by creating an account, logging in and then clicking the “Try Beta” link at the top right of any page.

The “Wikipedia Usability Initiative” has been divided into two phases. Phase 1 was the prototype phase, and it ended in the summer of 2009.

The project team is currently in the second phase, which is the development and testing phase.

The project has also been separated into four releases; as of the writing of this article, the second release (Babaco) is currently in development.

In this article, we’ll discuss Wikipedia’s design changes and the reasons behind them.

The Wikipedia Usability Initiative is scheduled to be ready in the spring of 2010. More information about the project can be found here.

The redesign is focused on usability. Although no drastic changes have been made, the overall look and feel of the website is much cleaner and more modern. The revamped editing interface is a major upgrade that Wikipedia editors will surely get excited about.

Like many small-scale operations, Wikipedia does not have the budget to systematically test how visitors use the website. Instead, it relies on feedback from users to pinpoint and address issues.

 

Cleaned Up

Our first impression of the beta redesign is that it looks quite sharp and tidy. The layout is still fundamentally the same; this redesign likely won’t cause the same outrage that Facebook stirred with its redesign back in March 2009.

The most obvious change is that the various components on the page are no longer confined to their own box. The navigation and main content areas are not closed in, and they extend all the way to the edge of the browser window.

The other obvious change is that Wikipedia has retired the background image of the open book. This cleans up the design significantly and makes the logo look much sharper.

Old design:


New design:

 

Slight Change in Colors

On the whole, the new design looks softer. The navigation links in the left sidebar are now slightly bigger and easier to read. The link colors throughout have been altered slightly to make them less vibrant.

The old link color (left) compared to the new link color (right):


The old visited link color (left) compared to the new one (right):

Changing the visited link color from purple to dark blue goes a long way to making the website look more modern. It also simplifies the color scheme and makes the appearance more professional.

 

Search Bar Relocation

The one change that might trip up regular visitors is the relocation of the search bar.

It is no longer nestled in the middle of the navigation section. It has been moved to the top-right of the page. This placement has become standard on many websites and is where people look first when they want to perform a search.

The new location of the search bar:

 

Reorganized Tabs

The tabs have also been reorganized. They’ve been given a new look and are now easier to spot. Dividing them into two groups makes their structure more logical. The fading top of the tabs opens up the page, too.

Old design:


New design:

 

Page Editing

The new page-editing interface is wonderful. The mixture of textual and graphic icons and the grouping of editing options makes editing much easier.

To figure out what each button did before, the user had to hover over the unintuitive icon and wait for the tooltip to pop up; not anymore. And the new panel to the right of the text area helps users navigate the page.

Old editing interface:


New editing interface:


To turn on the new features, go to your “Preferences,” and then click on the “Editing” tab. At the bottom, you’ll find some checkboxes labeled “Experimental.”

Enabling the experimental features:


The latest release includes new dialog boxes for inserting links and tables. Because the text area can get a bit cluttered, these dialog boxes are handy for helping users focus on one task at a time.

The table dialog box could do with more functionality (such as allowing you to edit the contents of table cells), but this release is still in development, so I’ll wait to see if more comes before officially adding features to my wish list.

The dialog box for inserting a link:

The dialog box for inserting a table:

 

What’s Missing?

Because the project is still in beta, now is the best time to suggest what else can be done to improve Wikipedia’s user interface. Here are my ideas:

  • AJAX BeautyTip preview on link hover
    It would be neat if a tooltip appeared, via the BeautyTip jQuery plug-in, whenever you hovered over an internal link. The tooltip would contain the first paragraph of the linked article. The increase in bandwidth from this feature might be too big, but I’d still like to see it tested.
  • Syntax coloring in the editing text area
    Working with code all in the same color is very difficult. The human eye has to scan the text linearly to find it wants. Visual hints would be a huge help. While we’re at it, the text area should also have a horizontal scroll bar so that things like tables look nicer in the code.
  • Option to have fixed-width body text
    When I’m reading a long passage of text, I like to maximize my window to minimize distractions. As it is, I can’t do this because the lines of text become wider than my widescreen monitor. I would love to be able to fix the width of paragraphs to around 600 pixels to make reading easier.
  • Increase visual weight of “Go” button
    The one change I’m against is making the “Go” button the same weight as the “Search” button. The old design weighted the “Go” button text a little heavier, making it obvious that hitting the “Enter” key was the same as clicking the “Go” button. The difference in weight was small enough that users could see the difference only by looking right at it. This should be brought back.

 

Try It Out!

The new design looks pretty good, but it’s not finished yet. I’m sure that the Wikipedia Usability Initiative team would appreciate everyone trying out the beta and sending feedback.

Wikipedia depends on its users to figure out how to improve the website, and I’m certain the Webdesigner Depot community can come up with some great ideas.

Lastly, consider donating to Wikipedia. Because being able to read about old Nintendo games without Evony ads littering the page is rather nice.


Written exclusively for WDD by Eli Penner.

What do you think of Wikipedia’s upcoming design? How would you improve the design?


Share this post
Comments (no login required)
  • http://tr.im/mewC Rahul – Web Guru

    The new wikipedia design does look better eye-catchy than the old one. I’m quite much awaiting the new design in live site.

  • http://www.tp-smith.co.uk Tom Smith

    It still doesn’t let the user know what the difference is between Go and Search, as far as I can see. Not an obvious difference.

  • http://www.thecomplexmedia.com theComplex

    Much needed changes! Thanks for the heads-up.

  • http://www.squiders.com Web Design Maidstone

    It needed doing

  • http://john.onolan.org JohnONolan

    Bit of a misleading title – I’m really not sure if this can be called a “redesign” – maybe a design or UI “refresh” or “update” would be more appropriate.
    That being said, the changes look good, and are definitely a step in the right direction for Wikipedia!

  • http://www.twitter.com/lauriette91 Lauriette

    Nice Redesign.

  • http://nihiltres.blogspot.com Nihiltres

    One of your wishlist items, the link previewer, exists. Go to “Gadgets” in your user preferences and enable “Navigation popups”. I personally find it disruptive; it would be nice if it were more visible as an available feature but I don’t think it should be default.

    Another, syntax highlighting, is planned. (That will be interesting!)

    What I’m really looking forward to is the template forms update, which will make it easier to use the complex templates that help format and standardize Wikipedia. As an expert on such templates, I’m looking forward to the opportunity to start building the forms that will make it easy for newbies to use templates—they’ve historically been a major stumbling block, especially the ones that help process citations.

    • http://www.sleepyhero.com Eli Penner

      Ah excellent! Thank you for your comment. I’m pretty surprised that the feature I described actually exists.

  • http://www.whitezine.Com/ RaDe

    So much better :)

  • http://www.gonzoblog.nl Gonzo the Great

    Hmmm, don’t see to much difference .. except a bit more polished buttons and a first glimps of something what you could call a layout.

  • RoaldA

    Looking good. :)

  • http://www.integralwebsolutions.co.za/Blog.aspx Robert Bravery

    Don’t see much difference. A lot seems to be very subtle. But then if they did a major change it might backfire. The current design has worked for a long time Why change a good thing.
    Tweaking it to make it better is entirely different. Perhaps the post should read Wikipedia design tweaks.

  • YorkshireSteve

    @Tom Smith

    I agree entirely… ‘Go’ is often used for the submit button on search forms and it’s not obvious which action to take or why.

  • http://www.edgarleijs.nl Edgar Leijs

    great so far but the colors are still really ‘nineties’ … :)

  • http://samuelvizdiz.biz Samdman

    I must agree with John O’Nolan.

    It slightly misconception, but still made me look.

    Changes all the way.

  • http://www.cowlor.net Cowlor Magazine

    I like this redesign

  • http://philwhitehouse.blogspot.com Phil Whitehouse

    I’ve had a brief look through the links on this post, but am still not sure > will these improvements be rolled into the MediaWiki core, and therefore made available as part of the standard release? Or at least will they be publicly available?

  • Michael

    The design is already shipped via the Vector skin. The new edit bar is some extension which is also in MediaWiki’s SVN.
    To say it in general: Almost all Wikipedia extensions and configuration is open to public.

  • http://www.tedgoas.com Ted Goas

    When I saw the word ‘redesign’ in the title I got a little worried. But after reading the post above I’m glad to see that it’s more of a ‘realign.’ I don’t think Wikipedia is going to alienate too many people when these changes are rolled. I’m sure they know and planned this.

    Starcraft page screenshot = I love it!

  • Shaunyk

    I’m gonna get shot down for this but it looks the same. If you need to redecorate, why paint over your stale magnolia walls with more magnolia?

    Come on guys if you’re gonna do a re-design, do it properly and don’t be so bloomin’ timid! Changing the link colour in the css to a half-tone lighter doesn’t count. If it weren’t for this blog (and others of course) then nobody would even notice.

    I hope they haven’t paid London Soho prices for that cos if so I want my £2 back!

  • http://www.html-assets.com Chris

    I second the vote for fixed-width body text

  • http://www.crearedesign.co.uk James

    I actually think it’s a step in the right direction. It’s nice to see that they are keeping with times, but not over doing it.

    A few of the changes are good ideas, the new functionality should be very good.

  • http://cloggie.org/wissewords2/ Martin Wisse

    I disagree. If you change Wikipedia’s web design too much you’ll confuse users and lose trust. Wikipedia doesn’t need a radical new design, just some freshing up of its old one.

    BTW: “AJAX BeautyTip preview on link hover” — please dear god know. I hate those things, they do not but clog up a website with pointless slabs of text hovering over what you actually want to read.

  • http://en.wikipedia.org/wiki/User:The_wub the wub

    @Shaunyk: The redesign is being funded by a grant from the Stanton Foundation, not community donations, and almost all of the work is being done by in-house staff and volunteers

    • Shaunyk

      Yes fair enough – it was said with tongue-in-cheek. If the only change made is to move the search box to the top-right it would be worth whatever it’s costing them. Point taken.

  • Kevin Quillen

    I had to stare at both new and old images like a Highlights puzzle to even see whats so radically different to be requesting donations.

    More or less its the exact same.

    A redesign would be a radically new look for them, most people won’t even notice a change.

  • Emanuel Fernandes

    The new color used for visited links is not the best one. Visited links have a pretty clear purpose for the user: what have they been browsing, so that they don’t repeat.

    That the new color may be more consistent and pretty as goes well along with a bunch of other blue links is one thing. Considering this is useful is another. By making it more difficult to distinguish visited from “fresh” links, our job, when looking for a certain piece of content, is more difficult.

    No, this new darker blue for visited links is not a great choice, considering that they will only confuse users.

  • andilukas

    what wikipedia need is a change in structure/architecture not altering colors and menu-position (it’s not even a “redesign”.. come on!)..
    altough i have to say, that page editing appears much more usable now.

  • http://www.ngagelive.com Lawyer Leads

    A fresh layout has been needed for awhile. Despite feeling the new changes look great and are needed it will be a bummer to change Wiki after growing so accustom to it for so many years. Changes is always difficult to deal with but needed in the end.

  • http://www.sjlwebdesign.co.uk Sam Logan

    In total agreement that a redesign was long over due, it seems most of the changes although the majority are small will improve upon their currently mediocre usability.

  • http://www.cygnismedia.com/ Facebook Apps Development

    This post is different from what I read on most blog. And it have so many valuable things to learn.