Wikipedia — Time for a Redesign?
Wikipedia is a fantastic resource and I’m sure many of you use it all the time — and probably even contribute — but I think it’s lacking terribly in one area: design. I think Wikipedia is a badly designed website. Sure, it may have worked fine when it was just starting out, but for a site of its magnitude today the design and usability are really at a much lower level than they should be.
Here’s what a typical Wikipedia page looks like:
Let me highlight some of the things I dislike about the current design:
Languages more important than search on the front page.
I can’t speak for everyone, but my own experience is that I normally just need the search. Sure, you may need the ability to select your language, but at least put the search bar in the front seat, above the language selection list.
Tiny navigation tabs at the top of the page — that don’t even act as tabs.
Is that size 8 pixel font? There is a big difference between making an interface that doesn’t get in your way and making a navigation bar that’s just too small to read and uncomfortable to click on. Those tabs really should be two times larger and they should act like tabs with the active one connected to the body of the page.
Tiny search box hidden in the sidebar.
This one is really frustrating. Not only is the search bar tiny on Wikipedia pages, it is actually hidden in the sidebar between a bunch of links. It’s so bad that I use Google search instead and append “wiki” in front of my search terms in Safari (still waiting for Chrome on OS X). Search is important and should be placed at the top of the page, similar to Google.
Too many links in the sidebar, rendering it useless.
What are those links anyway? Featured content? Random article? Contact links? The sidebar needs cleaning up — all the utility links should be placed somewhere else (footer) to keep the number of remaining essential links scannable.
Confusing icons in the article editor.
Wikipedia really needs to get a simple GUI editor. But that’s not a huge issue, I can live with a plain text editor. What’s worse is the toolbar of icons at the top of the text edit box. There’s a big set of icons squashed together in one long line, and I can’t honestly tell you what most of them do without waiting for the little explanation to pop up when I hover over. They should break up the long line into related items and use better metaphors for the images.
No hierarchy of elements.
Perhaps the worst thing about Wikipedia’s design is just how basic it is, without a clear hierarchy to guide your attention to the more important elements. There needs to be better grouping of items and navigation should really be redone from scratch.
I really like Wikipedia, but I think today is definitely a good time to think about a redesign. What do you think? I’d love to hear your thoughts.
4 Nov, 2008
This is so true! The front page really does it’s best to keep people from searching.
4 Nov, 2008
I absolutely agree. I imagine a Wikipedia redesigned by a master of typography and usability
4 Nov, 2008
indeed! mostly the search bar. I often visit wikipedia from my phone, and it’s beyond terrible how I always have to scroll so far past every single language link in the world.
4 Nov, 2008
Yes it’s insane how bad it is considering it is the most successful nonprofit site on the web. I have been using a greasemonkey script with a custom stylesheet to cope.
http://userstyles.org/styles/1365
4 Nov, 2008
unfortunately, I can only agree to these comments. Wikipedia is user-unfriendly, which makes it difficult to edit. you only talk about the “outside”, but I find that the “inside” ie: the edit fields are even worse today. Which makes the slogan “the encyclopedia anyone can edit” a bit of a lie really.
Mediawiki (the software) probably needs a good code overhaul in order to provide the right structure and tools for Wikipedia to be usable. But most important, it needs a usability study across languages and cultures to see what really are the problems.
@Sean. There are a number of wikipedia customized versions for mobile out there. http://wikipedia.7val.com is one of them and I find it really good.
4 Nov, 2008
Thank you! God yes! Agree++;
4 Nov, 2008
Agree on its bad designs.
However, I think it’s one of those sites(e.g. google, craigslist etc), where at this point, it’s obtained the critical mass that a redesign is no longer needed. (as bad as that sounds). Its brand is already established by its bad interface, and people are accustomed to it.
4 Nov, 2008
Hi, just wanted to say that navigation tabs act like tabs in firefox 3 (connected to the body when active and hover).
Also as I am french i’m using both english and french wikipedia. You should take a look at the french main page as the little differences with the english one are quite interesting : http://fr.wikipedia.org/wiki/Accueil
You will notice the search box is just under the logo at the top of the column; thematic portals are emphasized in one when it’s news in the other.
It looks like each wikipedia (by language) has its own main page construction and a few differences in its layout.
Good article by the way, i’m just discovering this blog and it looks very good.
4 Nov, 2008
Thanks for the links Sean and notafish — haven’t seen those before and they look quite interesting.
Jin: I think Google has a pretty good UI :) But I agree about Wikipedia and Craigslist reaching critical mass — the usability or design won’t affect their success anymore. But I still think they could implement a new UI without too much fuss. There isn’t a lot of room to go wrong here.
Daniel: That’s interesting. Tabs still don’t connect to the body in my Firefox 3 (OS X) though — there is still a border under the active tab, cutting it off.
4 Nov, 2008
Such good points! Agreed on all counts.
Maybe I’m an idealist, but I feel like the critical mass-success issue shouldn’t hold a site back from putting out a good, aesthetically pleasing product. Both Wikipedia and Craigslist could use a little help in the design department!
4 Nov, 2008
Agree! More usability than graphic design, I’d say…
The question is ‘why they haven’t done yet?’. keep the spirit? it works, is enough? changes generate worries? …
Great blog!
4 Nov, 2008
[...] ¿Wikipedia necesita ser rediseñada? En Usability Post opinan que si, yo coincido, pero obviamente algo muy leve. 0 # [...]
4 Nov, 2008
I don’t really believe in redesigns. They are a total distraction.
I think they should continually improve the interface. The homepage just needs a tweak rather than a total redesign.
Test, tweak, test is better than redesign (but less fun for designers).
5 Nov, 2008
Wikipedia would need to be very careful it if were to think of a re-design. Its pages are accessed by millions of noobs and computer illiterates on a daily basis. They’ve grown accustomed to the current de facto wikipedia - and nobody wants to alienate this large user base.
5 Nov, 2008
“I think they should continually improve the interface. The homepage just needs a tweak rather than a total redesign.”
I agree with the statement above. I’ve seen countless of Google presentation videos on their YouTube channel. Marissa Mayer is one them and she has mentioned that Google runs hundreds of tests to see how user react. Some are noticeable some are not.
Here’s an example
5 Nov, 2008
I’m sorry I forgot to post the address.
http://googleblog.blogspot.com.....-fish.html
5 Nov, 2008
IMHO the complexity of the editor is helping Wikipedia from malicious users, so it may remain the same.
5 Nov, 2008
YES!
5 Nov, 2008
I agree. We need change.^^
5 Nov, 2008
[...] Usability Post: Wikipedia — Time for a Redesign? [...]
5 Nov, 2008
I always stumble upon their content when I search from google, and my response is always “great! that’s what I need!” but I never actually go there in the first place to search. Interesting…
5 Nov, 2008
Being both a user interface designer and a regular Wikipedia contributor i can only wholeheartedly agree with your post, Wikipedia is pretty terrible to edit for non-technical users. Unfortunately, it is very difficult to change much of the way the editor works because the articles hold ’state’ in themselves because of templates, which have become a pseudo-programming language that don’t really belong in the articles. The whole structure has been built up very organically, making it so difficult to do heavy redesigns without breaking big parts of the site. However, it really needs to happen sooner or later to make it easier for people to edit the site.
5 Nov, 2008
[...] termino de leer una interesante entrada de usability post, en donde lista varios aspectos en que la Wikipedia podría parecer deficiente en lo que usabilidad [...]
5 Nov, 2008
Perhaps I can outline some good reasons for the way things are. Some of these issues could certainly be fixed, but others, being fixed, might cause issues in being fixed.
“Languages more important than search on the front page.”
There are two “front pages” applicable for any language edition of Wikipedia: the multi-lingual home page at http://www.wikipedia.org, and the Main Page of any particular wiki. On the multi-lingual home page, languages *are* more important than search: The amount of content available in languages other than English is greater than the amount of content in English, and it is also impossible to flawlessly tell, without input, which language a user would prefer. Not only this, but articles in different languages often have the same title. Would you prefer a multi-lingual search that gave you the same result in multiple languages? You’ll have to choose a language at some point regardless, so it makes more sense to filter languages at the outer portal, where search is provided primarily as a convenience, using the browser’s language to guess the desired one if necessary (which is definitely less than ideal). Users who visit a particular language like en.wikipedia.org for English will then see a different home page where the search function is above all the language links.
“Tiny navigation tabs at the top of the page — that don’t even act as tabs.”
While it’s quite true that the tab text could be bigger, this can cause issues for users with low-resolution screens, as the number of tabs for registered users (and especially for administrators like me) can quickly make the tab bar wider than the available screen width.
I won’t comment on the “don’t even act as tabs” as this isn’t so much a usability issue: active tabs are already highlighted with different borders and text styling, and the appearance is consistent, if not to your particular liking. I, personally, prefer the tabs to hide “in back”, as it were.
“Tiny search box hidden in the sidebar.”
The sidebar is the most logical spot to put the search box. You might note that a typical Wikipedia page has this neat “box” of content front and centre, and that that content is not peppered with bits of GUI, excepting perhaps a few [edit] links for section editing (which can be disabled in user preferences, anyway). The search box’s place in the sidebar ensures that it is always readily available on the page, without disturbing the page content itself. While perhaps the size could be increased, this is unnecessary as a) most titles and search terms are short and b) text-boxes scroll.
“Too many links in the sidebar, rendering it useless.”
Many of the links you cite are definitely most appropriate for the sidebar. “Random article”, “Featured content”, and similar pages are there precisely because they’re relevant most of the time. True, a few like “Contact Wikipedia” might fairly be moved down, but many are either relevant or have pragmatic benefit with prominence, such as the “Donate to Wikipedia” link.
“Confusing icons in the article editor.”
This is the most basic one. The icons arose partly because they can be ported effortlessly across language editions: nevertheless it’s quite true that the icons could be improved. Donate (by creating) some replacements under an acceptable license, and I’m sure people would appreciate the eye candy. It’s also again an issue of screen space: break them up horizontally and you run into screen width issues. Break them up vertically and the page gets taller, with more material before the edit box.
I know that a WYSIWIG editor would be awesome (and several possibilities are being developed) but this runs into the issues of the organically-grown syntax, the inherent extensibility of the software, and other concerns which make it technically difficult to implement in practice.
I’m ignoring “No hierarchy of elements” because I’m unconvinced that this is a problem: the interface is designed to be simple and links have always been grouped according to function: a reasonable ontology. I also find your specific complaint unclear. What kind of hierarchy is preferable?
In any event, it’s possible to download the MediaWiki software and tinker for yourself: if, say, you developed a skin using the instructions on mediawiki.org, once it was stable enough for practical use the MediaWiki developers might consider implementing it among the other skins at Wikipedia. I’m trying to teach myself PHP so that I can try out creating a skin; if you have some experience with that and PHP it should be possible to design it yourself.
I know that the interface can be improved, but one suggesting problems might want to consider not only what might be a problem but whether a solution would be worse.
5 Nov, 2008
Thank you very much for the feedback Nihiltres — it’s nice to hear from somebody who helps run the site :)
I will however disagree that my suggestions will cause any more issues — or at least they won’t make things “worse”. After you’ve spent a lot of time on a site you become accustomed to where everything is — you know where things are because you’ve read everything and seen every button on the page.
New users enter a completely unknown land and they must figure out where the stuff they’re looking for is within a couple of seconds. Every second that rolls by on top of that just adds frustration — so the UI has to be very focused and should guide your attention to the key elements and help you read through them by removing everything that’s unnecessary. Wikipedia currently lacks both of those points because there are no clear focus points and there are just too many links.
The sidebar for example. I don’t use it at all because there are too many links to look through. There should be about 7 links max. If you want to keep all the links there, at least separate the most important links from the rest in a different looking box, because at the moment, 18 links + languages is too daunting a list of links to be in a navigation bar.
The search box should go at the top of the page, outside the article box. This should be something like dictionary.com. This gives it both, more space and a natural location.
Icons in the editor should be spaced into groups, e.g. text formatting, links/images, and um.. I don’t know what the rest of those icons do, sorry :)
The space availability is a non issue. Every site out there faces a limited amount of space to work with — how well you manage this space is the key. The easiest thing to do would be to put the less used items somewhere else and only keep a handful of controls in the front seat. These few controls should grab your attention from the moment you load the site using color and contrast. Because there are so few of them, the user will be able to glance over them and see what’s available. When there are too many links, users won’t bother reading them because it’s too daunting, and without design elements to grab and focus attention the key controls may get overlooked.
Anyways — I just disagree with your point about causing more issues and think Wikipedia can be redesigned or tweaked without problems. The current design is really not great and I think can be improved fairly easily.
I hope I don’t come across too negative here, just trying to add constructive criticism. I use Wikipedia all the time and really appreciate all your work. Thank you.
I’ll look into contributing design wise. Is there a chance to actually contribute a skin for Wikipedia itself?
5 Nov, 2008
Yes, I understand. I was playing devil’s advocate. :)
Designing Wikipedia is a challenge. There are a number of challenges, notably that we want to be as technically simple as possible: the entire interface is built to fail gracefully if things like JavaScript or Java aren’t available to the browser (CSS is a given, but CSS3 and parts of CSS2 fare differently across browsers, especially IE), and most pages should be able to scale to fit 800×600 screens. The pages also are highly standards-compliant: most Wikipedia pages are completely valid XHTML 1.0 Transitional, with the majority of failures for trivial things like duplicate id names (because of individual article content).
I can’t claim any particular expertise in regard to Wikipedia’s interface: the closest I’ve come to redefining the interface are those changes which can be made through the wiki itself, a list of which you can see at http://en.wikipedia.org/w/inde.....amespace=8 .
I certainly hope Wikipedia’s usability can be slowly improved; some parts of it simply requires tweaking, some of it is built strongly into the interface of its skin. Some of its functions are editor-oriented, and others are reader-oriented. It’s a mess that’ll take a while to sort out, in any event.
Specifically, the skin-building instructions are available at http://www.mediawiki.org/wiki/Manual:Skinning ; it involves a certain amount of basic PHP knowledge to modify skillfully (so I’m reading a book on the subject). If you design a skin, find a way to contact people in the developer group (I recommend the IRC #mediawiki channel on freenode) and give them your code. It will have to be donated under the right free license, of course, but your ideas could end up in a skin. (Naturally, the current default Monobook style would remain default unless the community liked your skin better, but registered users can make a personal choice of skins in their preferences.)
6 Nov, 2008
Thanks for the information Nihiltres. I think I’ll have a go at making a skin :)
6 Nov, 2008
Yo no creo que sea tan dificil de manejar para usuarios novatos. Estoy de acuerdo en que hay que rediseñar esa interfaz aburrida pero supongo que va con su caracter “académico”.
6 Nov, 2008
My first thought was - word up.
My second thought was - even though you’re right, still, what’s nice about Wikipedia is how simple it is, and how used to it we all are. It’s not that Wikipedia is not usable at all, these are just small tweaks. Still, I’m sure that if you were to present a new design for Wikipedia, many people will grind their teeth over it.
My third thought - show us sketches of a redesign of Wikipedia! Let’s see some constructive ideas and not just destructive.
My fourth thought - I’m hungry and I wrote too much :)
6 Nov, 2008
I’ll show you some sketches when I get my paycheck ;)
6 Nov, 2008
Hi!
As an interaction designer I really like your blog. About the remake of the Wikipedia I totaly agree.
7 Nov, 2008
Tiny search box hidden in the sidebar.
is very impotent to change
Thanks,
Dutt
http://msdotnetsupport.blogspot.com
7 Nov, 2008
It’s about time somebody write that article! :-)
7 Nov, 2008
Amen! Great Article! We use MediaWiki alot for internal sites as well as external sites and I have been skinning around the default css and have come up with some really nice designs. You would think that with the resources that Wikipedia has, they would do the same.
Great Article!
8 Nov, 2008
if it aint broken, dont fix it.
wikipedia is an instute. why need to redesign if everybody knows how to use it?
8 Nov, 2008
SOOOO TRUE!!! I wonder how I didn’t notice that so far
8 Nov, 2008
It works, so no need to change it.
Wikipedia’s main goal is information, not design.
8 Nov, 2008
I agree Dmitry - I always thought it lacked something, and design is obviously it!
Joe
9 Nov, 2008
“if it aint broken, dont fix it.”
“It works, so no need to change it.”
If everyone thought that way, we would still be riding horses.
“Wikipedia’s main goal is information, not design.”
And how do you think you access this information? Through an interface someone designed. Information is useless without a way to access it, that’s precisely the function of a good design.
Why do you want to settle for mediocrity when you can get something better?
9 Nov, 2008
Nice article! Honestly I have to agree with the “we’re used to it” points. When I went to wikipedia the first time, I found the search bar, and now that’s really the only feature I use. You don’t really “browse” the site. It’s an information database. So really, it could pretty much just be a search bar. Albeit, a very ugly search bar.
As a designer, would I love to see wikipedia reinvent? Totally. A revamped logo, a nice 3 column layout and some ‘real’ tabs would make my day, but if a redesign discredits the “encyclopedia”/”database” kind of feel, then why bother? Wikipedia doesn’t really seem like a “community” type of thing. It’s just a resource in the same way that google is just a resource. But they have a prettier search bar.
In response to Alexis’s quote: do you not like riding horses? Totally kidding. Advancement, I think, is more about curiosity than pure need. You need to eat? You can eat an apple. But what if you see a pear? You try it. Both fulfill the need, but you just want to be different.
10 Nov, 2008
It’s funny how they changed minor things on the dutch version ( http://nl.wikipedia.org/ )
The Searchbox for example is in the top left corner (most important content)
13 Nov, 2008
The “contact Wikipedia” link is prominently featured for good reason.
For most readers, it’s useless. Yet, it is most useful for people who wish to contact Wikipedia about libel, copyright infringement, and vandalism.
In order to help resolve quickly problems that can fester and end up in court, it is important that contact links are easily reached.
Normal people won’t scroll down the whole text and look for contact information in the footer.
Past experience has shown that if the link was more difficult to find:
* People complained that Wikipedia was irresponsible, “it’s impossible to reach those operating the site”.
* They posted their requests into articles or discussion pages. Understandably, these requests were they removed, and the complainers understood that “Wikipedia management” had decided to ignore their problem.
* They sometimes posted to mailing-lists.
15 Nov, 2008
I’m glad you called all this out — Wikipedia is definitely useful, but could stand to benefit a great deal from a usability refresh.
Lack of an easier GUI/WYSIWYG-ish editor has hurt Wikipedia/Mediawiki for a long time by discouraging potential contributors who are scared by HTML, yet who could type perfectly useful prose.
I wonder if anyone’s done a facelift-by-proxy that rides on top of Wikipedia. In spite of all its popularity, it still has the taste of an experimental beta site.
I’d also prefer Verdana as a font — I consider it more readable and know some Mediawiki-powered wikis like http://wiki.secondlife.com that do use it. :)
18 Nov, 2008
This is so true. Giants like wikipedia should act as an example for the rest of the web.
Great blog btw!
18 Nov, 2008
They did fix some things in the Dutch version:-) And they also fixed the “fake tabs” in the default version I think.
11 Dec, 2008
Being a semi retired visual brand designer, I can only agree with the general buzz here. Graphic user interfaces (GUI)are of paramount importance, and hardly anyone does them well!
I think it may be too hard for most people to put the effort into making the complex simple, it takes too much time to distill the essence of user ability and intention. Time and popularity just makes the ‘bad grow worse’.
Dropped into your site looking for some easy references on how to use the back end to Wikipedia and put my husbands tribophysics history on it, before history forgets him. He has saved lives and made lots of world first in his science field… looks like he will exit this world before I learn the back end of Wikipedia. Anyone game to help?
16 Dec, 2008
Totally agree. I made a userstyle for it a long time ago because I couldn’t stand how the paragraphs blended together because of how close together they are. I also hid all the stuff I never use (and I presume most read-only users don’t either). I made some improvements to it and finally uploaded it recently. Check it out if you’re interested: http://userstyles.org/styles/12239
16 Dec, 2008
@Auzzie designer
Installing and maintaining MediaWiki is a little complicated. You may wish to start with something simpler - TiddlyWiki is good for a simple personal wiki, and is very easy to use on your own computer.
If you think a larger public community wiki is required, why not look at getting one hosted for you by a wiki farm such as Wikia? They will create and maintain it, you can just add the content.
Wikia’s page to request a new wiki is here:
http://requests.wikia.com/wiki/Special:RequestWiki
18 Dec, 2008
Many thanks AKA and Eric,
A special thank you to you both, lovely to see ‘care’ in action. I will follow up ASAP.
Have a safe and happy Xmas.