Wikipedia Redesign Concept
wikipedia.gkvasnikov.comI'm stuggling to put into words how much I dislike designs like this - superheavy javascript sites that work like ass on my netbook, full of empty space and icons instead of text (so I have to hover over the icons to find out what they do - where's the sense in this??) and customized "UI" functionality that make me forever unsure what my clicks will produce.
Wikipedia has a plain but very pleasant interface and this would totally ruin it for me.
I'm guessing that this is just portfolio fodder for the designer. For better or worse, recruiters (and hell, even managers) are looking for UX designers that have the capacity to design trendy looking stuff and have a grasp of what's somewhat relevant. Hence, redesigning a hugely-popular site like Wikipedia to look like a recently-redesigned mobile first news site.
Just wanted to point that out before people rail on this redesign too much. There are a lot of design anti-patterns in this redesign, but, again, it's the result of having to market yourself to people who really don't know what design is.
As a developer with a blind spot for design anti-patterns, can you elaborate on those?
I'm not a designer and I don't know anything about anti-patterns, but here's what grinds my gears about it:
-The layout switches between using icons and text as buttons/menu items on the same page
-The homepage looks like aol/yahoo's landing page - too busy and no sense of direction
-theres like 3 different bar selection menus on the front page, all in different places that do dramatically different things. I don't have any kind of visual cues into what the bar menu on the top or right do.
-gigantic images and padding reduce information density
As an employer, high on my list would be appropriateness and this fails miserably.
Could not agree more
The heavily-graphical "grid" front page assumes that the best Wikipedia articles have curated, attractive graphics to place in the grid. As a rule, they do not. Wikipedia is a volunteer project, and there are no editors or in-house designers to keep articles fashionably decked out. Not only that, but Wikipedia is at a disadvantage w/r/t/ graphics: the site tries to be scrupulous about copyrights, and can't appropriate random images or, for that matter, pay licensing fees for them.
Similarly, some of the layouts of the tiles in the front-page grid appear to have carefully chosen typography. Who's doing that work?
They may not, but I fail to see how that is "as a rule". One of the requirements of featured articles is that they contain media.[1] The review process and competition for main page nomination seems likely to ensure they are at least decent quality.
If you dig around, I also think you'd be surprised how many high quality images Wikipedia and Wikimedia have. There is a Featured Picture[2] process that encourages and curates great images.
Wikipedia basically invented crowd sourcing -- I'm sure editors could handle custom placement, even if it doesn't turn out as perfect as a hired designer would do it.
Overall I can't imagine this is a major problem with this design, even if it doesn't always look as flashy as the mockups.
[1]: http://en.wikipedia.org/wiki/Wikipedia:Featured_article_crit...
[2]: http://en.wikipedia.org/wiki/Wikipedia:Featured_pictures
And yet, moving to a design that highlights a 'main graphic', or bit of hand-crafted typography, could actually prompt that volunteer work when people notice it's missing.
Do you design for the worst-case, where you're lucky to get a little attention from overworked volunteers working outside their areas of competence? Or for a more hopeful case, where any gaps in the design will signal an opportunity for eager, precocious volunteers to do more?
I believe Wikipedia has had good success in the past with campaigns to fill in CC-licensed rich media, especially volunteer photographs, where they've been missing.
This misses some of the point of the front page. "Featured Article" (FA) status is one of the most important incentive schemes on the site. It's a case where what's good for the front page is also good for the community. There's nothing intrinsically good about having a nifty icon for a story, and not every contributor working to lift some obscure article to FA status is going to have that resource available.
You raise a really good point. Any design has costs: resource costs, labor costs, technology costs. Like most redesigns, this one focuses on the visuals without any consideration of costs. For volunteer-based organization like Wikipedia, costs are particularly important. Granted, cost estimation is a notoriously difficult problem, but it at least needs to be considered.
The whole redesign seems to deeply misunderstand how Wikipedia is put together and how it is used. I don't love the current design but, like Craigslist, it better suits the asset. Many think Wikipedia, Craigslist, et al, are successful despite the "lousy" design. I would say "because".
There's also something to be said for timelessness. Not everything in this redesign is on-trend or dates itself, but the front-page grid design would be just as at home on Slate or Vox. Wikipedia is going to exist 50 years from now. It's likely that gridded-out magazine cover pages won't.
Wikipedia is one of the most visited websites in the world. It hasn’t been changed or redefined during the last 10 years. The web and its technologies has developed further and so have its users.
And why should it be changed? Wikipedia's design is one of the prime examples of "simple, clean, effective", in my mind.
Frankly, the only good idea I see here is an integrated WYSIWYG wiki markup editor. That might work, although MediaWiki markup isn't that hard to get acquainted to, and it's probably a good thing that someone should spend a bit of time to do so before making major edits.
Otherwise, this looks like some misguided attempt to make Wikipedia look more like Medium, as ostensibly Medium is the future of UX. Magpies hopping on to the newest trend, as always. Web design is notorious for this.
The front page is an overly cluttered dashboard that makes Wikipedia look like a blog, more than anything else. Unnecessary, and quite constrained.
Article pages have been turned into trailing, centered sprawls of text. Works for blogs, but not for an online encyclopedia. The present design is more suited to Wikipedia's features as a web project.
Also, correct me if I'm wrong, but isn't Wikipedia's font responsive and dynamic? It adapts to whatever typeface is the default on your browser.
>Wikipedia is one of the most visited websites in the world. It hasn’t been changed or redefined during the last 10 years.
Actually, Wikipedia switched to a new theme a few years ago.
The problem of re-designing something as popular Wikipedia (especially something useful that has not changed in 10 years!) is that regardless of the result (i.e. better or worse), you will face _fierce_ opposition. Humans are very sensitive to anything that changes their mental model of how they think something should work.
Think about radically updating some of these to see what I mean:
- Facebook Newsfeed
- HNs homepage
- Vim interface
- Google Search Page
- Craigslist homepage
- Your favorite web mail client
- Your favorite Smartphone main screen
- Reddit homepage
You can come up with the most amazing forward-thinking improvement, and somebody without a doubt will send you so much hate that you'll think it is that person's only goal to wipe out your family line.
This doesn't mean we shouldn't do it, it just means that we have to be aware of that section of the population and come up with a strategy that either does 1) a slow migration for the people with old mental model, 2) provides an alternative "classic" view, or 3) completely ignores that section of the population since they may represent a very small minority. I tend to go for 1,2,3 in that order, but of course this can vary differently depending on the project.
Nice job with the re-design by the way :)
Something really interesting (and relevant) is that in cases where a redesign makes an interface markedly easier, it can still perform less favorably simply because people liked knowing how to do something that most people couldn't (i.e. using said interface). Take Ideo's redesign of the Bloomberg example, for example.
What's the point of the virtual post-it note? Why not use a regular post-it note?
You know, not too sure. The micro-terminals make sense, but the virtual post-its seem a bit odd.
I think this is not a general problem, it’s just that it’s very easy to make mistakes when changing a running system. You probably overgeneralize based on the fact that there were so many bad re-design decisions in massively used products lately. Just to name a few:
- YouTube’s failed attempt at improving the comment section
- The new mobile YouTube app entirely covers the video with supersized play/pause button.
- The odd merge of touch and desktop UI elements in Windows 8
I think a huge factor for hate is also whether the re-design was preannounced. I think, ideally the user would have the option to upgrade the page, just as they can decide whether to upgrade their phone or not.
We might consider that the existing, originally successful designs are products of competition and natural selection of early alternatives, both within and outside of the company. In other words, it's plausible that good design is evolutionary. The rest of my comment explores this idea.
If so, these existing designs are really the best-of-the-bunch, beating out the competition, and perhaps this is because they are better on criteria that have been overlooked or not fully understood.
Now that Facebook, Google, Wikipedia have "won" the competitions in their original space, we might believe they are no longer under strong selective pressure of competitive evolution.
Facebook and Google might therefore be inclined towards major redesign which benefit them more for commercial reasons. This alienates some people, yes, but since the companies no longer have to fear immediate challenges from competitors, they can afford to provide users with a less optimised and more profitable design.
Wikipedia has no real motivation to change the design away from one which is known to be good: nobody strongly benefits from a major redesign.
What if your "forward-thinking improvement" doesn't capture the reasons the original worked. Then actually you are proposing worse over better, just because it is newer.
But you made it, so you won't say that your own baby is ugly ever no matter how many people provide reasoned arguments
You also have to justify that it's necessary, which this page did not.
Rather, it seemed like they were doing a redesign for the hell of it. Out of some belief that if something hasn't changed in X time, it should. It tries to justify itself using itself.
We've been using the Harvard architecture for decades now. Should we change it? It's been some time, after all.
Wikipedia just redesigned, actually, but it was a mere refonting which most users barely even noticed (the most noticeable change was that the headers were converted from sans-serif to serif). There was a slightly-more-ambitious redesign that emphasized white space (like this one), but the foundation threw out nearly all of the changes because users didn't like them.
http://www.fastcodesign.com/3028615/the-beautiful-wikipedia-...
http://associationsnow.com/2014/04/wikipedia-redesign-barely...
I'm not saying unsolicited redesigns like this don't have value, but there's a decent reason why an unsolicited redesign like this will never go over with its audience: Wikipedia is the ultimate design-by-committee product, and the users have a lot of say as a result.
Also, Wikipedia has to hit a wider body of users, from dumbphones to outdated browsers. That's a problem with redesigns like this in general: They're not thinking in these terms because they're designing for the high end. Wikipedia is a site that needs to prioritize the low end because it's run by a nonprofit foundation whose goal is to spread information, not just create a snazzy user experience.
It goes against everything we know about product design, and I agree it could look nicer, but the current design approach works for the Wikimedia Foundation.
For those who get 503, you can also check out the concept on behance: https://www.behance.net/gallery/16219877/Wikipedia-Redesign-...
Why is lowering the information density of everything now considered good design? Wikipedia's typography update a couple weeks ago brought increased line spacing and it really sucks. Facebook used to have a great information-rich design but went to 'cards' earlier this year and now I can see about 2.5 posts at a time (at 1200 lines). Medium and all the rest with their giant, bold fonts, 90+ chars per line etc. tell us that the computing audience today is expected to be mentally challenged, using some kind of handheld casino gaming device, or both. It's a sad world to wake up in for those of us who love computing.
Then there's OkCupid's question interface. The gateway to the greatest survey of all time is now more low-density crap. And somebody thought a pulldown (a custom one with its own quirky behavior, at that) was a good substitute for radio buttons.
I guess it's not surprising when you consider what the design community talks about. They don't measure anything that would let them detect a loss of computing power. They don't think about cybernetics or cognitive psychology. It's all "affordances" and other stuff that sounds like it was overheard in a 60s-era art gallery.
I can imagine a satirical redesign of the violin. They're so hard to use... Except it's too late. Only a tiny fraction of people appreciate violin music now. Such redesigns have been proposed in earnest! Shelves at electronic music departments are filled with the prototypes. Only problem: the music people made with them sucks.
I don't understand why designers refuse to pay attention to typographic guidelines. 95 characters per line is not very readable. To be fair, Wikipedia already suffers from this problem. Between 100-character lines and sans-serif body copy, Wikipedia's current typography is abysmal.
Otherwise this concept is fine. I'd love to see Wikipedia reset in Meta Serif or Tisa at 66-72 characters-per-line.
Reducing the number of characters per line on Wikipedia is as easy as making your web browser narrower.
I hate resizing my web browser (it's always full screen), but I abuse the sidebar [1] precisely for that.
[1] https://addons.mozilla.org/en-US/firefox/addon/all-in-one-si...
You'd be surprised how many times I have to fire up the Dev Tools on websites just to have a sane line-length.
You may want to install Stylish, create an empty stylesheet with sth like
and enable it when needed - that's what I do from time to time; I also have one withhtml * {line-height:170%;}
and one withhtml * {color:black !important;}
With this, tightly packed gray-on-gray websites with unreadable typeface no longer bother me.html body, html div, html span, html p {font-family:Georgia !important;}
For the goal of processing information quickly presenting the main articles as a single column I felt would be less effective in the state the articles are in currently, especially when there is enough room on widescreens, and where graphics are used. The front page designs utilize the space better, and it would be interesting to see how such a layout might be adapted for the articles.
Another relevant point as someone mentioned earlier is Wikipedia isn't known for beautifully curated professional photographs and design for every subject, which comprises a significant focus of the concepts. Commercial sites with similar grid designs, such as the Verge and other blogs often have a team of photographers and/or designers to maintain the aesthetic, and are more liberal with their use of copyrighted media.
Still love such new takes on established designs. Kudos to the designer for stimulating discussion and bringing a focus to what could be improved.
I love this redesign. It is definitely more readable and far more enjoyable; removing the clutter of navigation links and bringing focus to the article are massive improvements.
Of course, there will be challenges implementing this, including the lack of images that can serve as article covers (or, for that matter, user avatars). These problems can be solved if the community wanted this design; however the community does NOT want it.
A much more moderate redesign was recently whittled down until it was just an imperceptible font change; there's now a discussion about rolling that back as well.
Your time and considerable talent is probably better spent on some other projects; Wikipedia has a community that is extremely hostile to new people and ideas.
I really like this. It would be cool to see this actually implemented.
For the record, it wasn't entirely obvious at first that I could click/drag the individual rows on your site.
Also, for anyone that's curious, there have been several other redesign concepts floating around (one here: http://www.wikipediaredefined.com/), although so far this one seems to be the most thought-out.
Put your images on a cdn :)
That went down rather quickly... Didn't even get to see it yet
Cache: http://webcache.googleusercontent.com/search?q=cache:http://...
But the cache isn't very useful since the images don't appear.
how does one image survive the rain?
This kind of design is nice and all, but a site like Wikipedia wouldn't throw everything they have like that: they want before all to keep their interface available for everyone, even if that means it has to look a little rustic.
One change that would be very beneficial though, is improving legibility of articles' text by having a way to adjust the number of character per line (see http://webtypography.net/2.1.2).
No. A good part of Wikipedia is that it works and renders properly on almost every device. Making such a HTML5/CSS3/JS-oriented redesign could heavily ruin that.
The page doesn't load completely for me. I'm using the latest Chrome.
The main issue for a redesign at Wikipedia is not the lack of talented designers and UX professionals.
The rigidity of the (old) underlying tech combined with the lack of media make this kind of attempt moot.
Wikipedia has a functional/practical value, anything that lowers that value is bad.
Anything that can increase that value/not decrese it while making the site look better is good.
I remember a few years ago there was a rising competitor to Wikipedia. I don't remember the name but it was a wikipedia with video and slide shows.
isnt there a way to have your cake and eat it too? WIkipedia is CC-BY-SA so it should be possible to maintain a mirror of Wikipedia with a more souped up interface? I guess the costs of maintaining would be pretty high but Wikipedia allows commercial use so you should be able to slap some advertising on it. in fact im suprised people havent tried this already. perhaps they have?
A browser plugin that applied a style-sheet and did image-selection would get you much of the way there...
Couldn't see everything because of the 503 errors, but seems really interesting, thanks for sharing!