Wikipedia Redefined: some thoughts

(I opened the Add New Post form to start writing this post just before the men’s 10m platform dive final last night. I managed three words during the whole event. Oops ;o)

So, I saw @tomcoates tweet about Wikipedia Redefined last week — a great piece of work by the Lithuanian creative agency New! looking at an alternative look-and-feel for Wikipedia. 

I was less interested about the stuff about logo designs but — as someone who spends a substantial amount of my free time editing Wikipedia and uses the site as my primary source of reference for most subjects (I’m as likely to use the search shortcuts for Wikipedias as I am to search Google, if not more so) — I was very interested to read a new perspective on the UI for a site with which I’m intensely familiar (and which I’ve customised a little myself with my user CSS and user JavaScript).

Tom was most interested by the homepage redesign suggestion (or, at least, that was the one thing he mentioned in the 140 characters he had available). New! suggest a cleaner homepage, modelled on the copious whitespace and clear purpose of Google’s homepage, with the range of languages available to users being indicated by coloured bars across the top. Nice and simple, though I dislike their logo suggestions, so the footer doesn’t appeal to me, though conceptually it certainly could work, I guess. I quite like the way they expand the header to get to further languages, though.

What I really liked, however, was their designs for reading and editing. They’ve retitled “Read” to “Research” and are suggesting a vaguely interesting spider-diagram of article connections (though I’m wondering how practical that is, given the number of links in every article) and a really-quite-cool highlighting / clipping function. The nice, clean reading interface has the table of contents on the, with the current utilities toolboxes reduced to a set of header navigation, which I quite like, though the popularity of the current left-hand navigation suggests this might be a poor UX choice. Having the ToC stay anchored to the viewport (which I assume is their intention) would be pretty groovy, but wouldn’t work well with some pages with long ToCs or the articles where we have wider contents tables, rather than tall ones — be they alphabetic or more bespoke.

They also suggest quite a nice drag-and-drop wysiwyg editing view, which I think would be very popular with many editors and would lower the barrier to contribution for new editors; we should definitely work on something like this. I would very much like to have seen a treatment for how editors might add images — both a search interface for looking through pre-existing uploads on en.wiki and the Commons and an upload interface. The Commons have spent a fair amount of time on the upload interface there, with a new Upload Wizard designed to lower the barrier to entry, the previous version being a rather unpleasant list of source options and, before that, a geek-friendly Big Form™. (The upload interface I use most often, as it happens, is DerivativeFX, which makes it easier to tag metadata on uploads derived from other Commons files; most of my contributions of late being heraldry, based on pre-existing shields. It’s relatively easy to use, but it’s hosted on Toolserver and makes heavy use of Ajax.)

If I had to pick one thing I personally would find useful, though, it would be a syntax highlighting lexer for wikitext view. This would not be something most editors would ever see, I would hope, given the elegant simplicity of the drag-and-drop wysiwyg design, but a view I can imagine many hardcore editors (I’m the 2378th editor by edit-count, apparently) spend a lot of time in front of. I can imagine it would be relatively difficult to write a good lexer for wikitext — I have no experience in lexer design, but things like images with links and templates with embedded templates are going to end up being awkward, I would imagine. This block of code, from an article I’ve been working on recently, showing a map with a colour key in the caption underneath, is by no means the most complex piece of lexing involved.

[[File:MORLACCHI.QUARNARO.jpg|thumb|
Ethnic distribution in [[Istria]] and Trieste in 1910/11:
 {{legend|#d69c17|[[Italians]]}}
 {{legend|#ddc758|[[Croats]]}}
 {{legend|#b59b13|[[Slovenes]]}}
 {{legend|#ab9a55|[[Istro-Romanians]]}}
]]

The English Wikipedia’s Main Page is the primary point of entry for most readers (ignoring that more people hit the site from search than by entering the URL directly). (If you want to compare the Main Page mockup directly with the snapshot it was based on, you can see the Main Page from 8 May 2012 in the Main Page history archive.) Personally, I find the design of the current Main Page quite gaudy; I’m not a fan of all the coloured divs. The clear demarcation of content with rules and whitespace in the mockup, however, is much easier on the eye.

Disappointingly, one of the things New! did not suggest, however is a typeface mix. Particularly since webfonts are now so widely supported, it’s a shame not to see the use of this technology to bring clean typography to a clean design (and I am emphatically not a fan of Arial and Helfuckingvetica). You might have noticed that my Wikipedia skin has replaced all the fonts, using Gentium Basic for headings, Calibri for body text, Consolas for fixed-pitch text and Segoe UI for infoboxes, and that I zoom the text a couple of levels. I find the combination easier on the eye (with a strong astigmatism, eyestrain becomes a problem and I’m a big fan of Microsoft Typography’s work in this area), but I also like the typographic distinction between headings and content.

New! proposed a visualisation of “Disciplines”, which seem to correspond to the Portals listed at top of Main Page. I like the idea of encouraging browsing in this manner, but I’m fearful that not enough content would be accessible through such a hierarchy; I think using Categorisation (which does have its own Portal) might work better here. As I rarely browse Wikipedia in this manner, however, I don’t have a huge amount to add here.

Cartographic browsing is something I’d not really considered before. The world map that is shown first doesn’t strike me as all that pretty (albeit useful); the nation-state–specific map of the USA, however, last in the set of images I’ve added to this post, works wonderfully and I would very much like to see us creating some mouseover-, click- and zoom-using form of map-based navigation for geographical topic trees. The main area I edit in is mediæval European history, so maps of the Holy Roman Empire could use this kind of interface to great effect — particularly with switches to highlight Imperial Circles and ecclesiastical territories or Imperial cities — as could timeline-based maps of the territorial evolution of France or North America, say.

Overall, I think this is a really impressive piece of work from the Lithuanians and I’m sure the guys at the Wikimedia Foundation will be giving it much thought. Whilst I’m not convinced by all of the proposals, I’d certainly like to see some of these implemented on the English Wikipedia and for more IAs, UXDs and creatives to build upon this work and see what we can end up with. I doubt that look-and-feel is likely to be the primary problem with the biggest problems we see on the English Wikipedia — editor retention, gender bias and cultural diversity, in particular. But they certainly can’t be a bad thing and surely they must help with barriers to entry

All redesign mockups are copyright © 2012 New! and are used without permission for the purpose of criticism and review under section 30(1) of the Copyright, Designs and Patents Act 1988.

Ymatebwch

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s