Thoughts on Wikipedia

If you didn’t notice Wikipedia is now flaunting a brand new design, well a least a bit of a refresh. A *small* aesthetic update is warranted every now and then. You’d never go and turn McDonald’s green now would you? Oh, yeah, they did that… bad example.

I just had a look at McDonald’s UK website they’ve certainly caught up with web 2.0! No Flash to be fair, lots of JavaScript – in fact there is Flash (SIFR) and one, two, three… FIFTEEN! external JS files? Has anyone actually every seriously visited this website? I guess it just has to be there anyway. Wow…

…where was I. Wikipedia. Here’s a great quote by Armin Vit:

“How I feel about the visual language of Wikipedia is similar to how I feel about unkempt public restrooms: I hold my breath as long as possible, do my business, get out and try not to get too nauseated.”

They’ve refreshed the design and I can’t pinpoint exactly what’s different so I’m not going to critique that. I am going to critique the design as it is now. Because it sucks. These points aren’t purely a case of “form over function”. That would be subjective, no – these things are criminal!

Disclaimer – I love you wikipedia! *

1. Wikipedia’s fluid width layout

Wikipedia uses a fluid width layout which means that when the browser is resized the the content flows to fit the available space. Now the average Wikipedia page is one long wall of text. We can safely assume that the average browser (full screen) is a lot wider than 1024 pixels. At this width the average line length of text is over 150 characters (including spaces). If I open Wikipedia on my 24″ iMac I can hit 300. I challenged you to walk into Waterstones (I’ll get to their new logo later) and find a novel that has anywhere near that line length. It’s common sense people!

When I get to the end of a Wikipedia line I’d be less bewildered if I found myself in Narnia.

2. Wikipedia’s visted links colour

Wikipedia links are #0645AD (blue, if you hadn’t guessed). Now get this – Wikipedia visited links are #0B0080 – yep, that’s blue. Here’s a side-by-side:

Wowey. I’m not a particular fan of “visited links” and I normally colour them identical in most of my web designs but I can understand their usefulness on Wikipedia. Either way if you choose to take advantage of this feature – at least make it obvious! The difference is impossible to notice on lone links. And what if you are even slightly colour blind?

3. Wikipedia has no style for quotations

Well that’s a lie but it is barely noticeable.  Here you can have my style:

“Format a long quote (more than four lines, or consisting of more than one paragraph, regardless of number of lines) as a block quotation, which Wikimedia’s software will indent from both margins. Do not enclose block quotations in quotation marks…”

No charge  (I’m going to change it anyway). My point is that Wikipedia could make it a hell of a lot easier to scan-read a page.

4. Wikipedia and grey boxes

Wrapping content in a box (a “boxout” as us pros call it) is a classic of graphic design. Wikipedia has taken this idea and ran with it. You have a piece of information that isn’t within the main copy? Whack that badboy in a grey box and float it left or right. Contents, statistics, images with captions, tables, Wikipedia quality standard notices, links  to Wikiquote…

5. The “Discussion” tab

Wikipedia has a discussion page for every article. This is where people with no life, I mean people passionate about Wikipedia, dicuss the details.

This is also the page where everything bad about Wikipedia design comes together in one giant charlie foxtrot of bad design. This is one situation a concept like Google Buzz could be useful.

 

Ah look at the time. I would finish writing this design review but I got lost in Wikipedia.

Before I leave for the night I did promise a review of Waterstones new logo. It’s a very generic  and forgettable sans-serif. The additional “creative” versions to suit different situations employs one of the biggest branding cliches in the past few years (see AOL). Not that the old logo was any better. But when you’re taking the “m” out of “hmv” and turning it upside down, it’s time to rethink.

 

* You wrote my dissertation. No I joke, half of it.