Yet Another Wikipedia Redesign — Part I

“Oh man, not this again!”

Yes. I know…I’m as aware of it as you are. I know its been done too many times, but hopefully this time its a little bit better. Most of the redesigns I’ve seen so far focus too much on form, rather than the function. This aims to be a bit more of a redesign in terms of usability and housekeeping, rather than just a beautification exercise.

So, first, the basics.

Here’s the homepage on any given day.

The Wikipedia home page on November 16, 2016

One point to note is that this works. People still use Wikipedia by the millions, every single day. Then why are so many designers trying to revamp Wikipedia? Well, we designers are a crazy lot. Sometimes we don’t understand function, only form. I myself am guilty of this plenty of times.

But that doesn’t mean there’s no need for improvement. What is a across-the-board change that could make a huge difference? IMHO, I’d say the typography.

Ok, let’s start there.

Compare the readability of both the text.

Wikipedia makes the safest bet here: a ‘sans-serif’ System font. On Windows, this is Arial. Arial is one of those typefaces that has a problem with the capital ‘I’, the lowercase ‘l’, and the ‘|’ character. This is best resolved by using a serif typeface, like this text you’re reading now.

I’m quite partial to one particular typeface, which is one of the best performing typefaces I know.

Presenting FF Hertz.

Hertz was designed by Jens Kutílek in 2015, and comes with a higher-than-average spacing and lower-than-average stroke contrast, which is helpful while displaying text at varied resolutions on different screen sizes. Another main plus point is that it supports upto 83 languages, a major criteria for Wikipedia. While there are wikis in more languages, we can use Google’s Noto Typefaces for the languages that are outside of Hertz’s ability.

Why not simply continue using the current fonts, then, you ask? Well, um, it’s not beautiful enough! Sorry, I’m a designer, I can’t help it. The objective here is to draw a compromise between beauty, practicality and character support. Hertz ticks more boxes than most other typefaces, and I’d love to hear your alternative suggestions.

One of the main features of Hertz is that it is “uniwidth”, which means that a character’s width remains the same across all weights. This particularly helpful for us, as Wikipedia’s articles come with a smattering of bold(links are bold for when the subject appears in the article for the first time) and regular text, and numbers differ greatly from page to page. Using Hertz means that the paragraph sizes will remain the same irrespective of the number of bold links in the text.

Text is set in Arial on Windows 10, Chrome.

A simple example. Left para has no bold links, while the one on the right has quite a few.

While this is a minor edge-case, but it’s the predictability we want. Also, I’m OCD like that.

One more advantage of Hertz is the generous spacing it offers. There’s no congestion between the glyphs, and even the ligatures are considerately apart, rather than smushed together. This is great for legibility at even at miniscule sizes.

Now to find a partner-in-crime.

FF Hertz is the now the candidate of choice for body text. Hertz is a serif typeface, and tradition dictates that we now go for a sans-serif for the UI and other elements.

After digging around for a while, I settled on this little gem —

Isn’t she a beaut? Larsseit, she is called. My criteria was simple: no-nonsense, geometric, and absolutely must have double-storey As and Gs. No reason, just a personal preference. Larsseit, again, has low-contrast strokes, like Hertz. It’s designed by Type Dynamic and released in 2013. It supports European, Baltic Turkish and Romanian scripts, which is a good chunk of the most popular wikis with the most articles.

That’s settled then — Hertz and Larsseit.

Ok, back to the home page again. First look, it seems messy and there’s too much text floating around. There seems to be very little method to the madness, and method itself is not very obvious.

An user can’t scan comfortably, and the colours and boxes offer too much distraction. Another thing I noticed with the text is that at somewhat lower screen brightness levels, the non-bold links merge with the body text, and are almost indistinguishable. This is especially true in the INT and OTD sections(the blue boxes on the right). This problem is worsened when a blue-light filter is active, as is the case with MacOS’ NightShift and the Flux app on Windows. Quite a few people use Wikipedia under these circumstances.

There are also too many redundant links. For example, the left menu has the links to the “Sister Projects” and “List of languages” which appear almost at the same place on the right.

Another is the “Talk” link, which appears twice, once on a tab and again on the top nav of a logged-in user.

I do not have access to advanced usage metrics, and I cannot say for sure how many of the links are oft used and which ones are almost never clicked on, so we just have to use a bit of reasoning and compromise here to prune these.

In any case, these are just some of the issues that need to be tackled in this lofty venture. This is also why this is a multi-part article, with this part bringing up the basic issues and first steps to rectify these problems.

Keep tuned to this, I’ll release Part II soon. Meanwhile, tell me what you guys think, I’d love to hear your feedback. I’m sure a significant bunch of you are heavy Wiki users, and you must have quite a bit of opinion on this.

DISCLAIMER: I’m not a designer with a fancy degree, I’m self-taught with just a good eye for aesthetics. I’d love some constructive criticism, and happy to listen to what you have to say, no matter how minute it is.

Psst! How about a sneak peak of the actual redesign? Here you go!
You can also check a live version here. It’s a WIP, so it’s not a 100% responsive, but it’ll work on a large screen and give you a good idea of what I have in mind.

Thanks for reading! Stay tuned for Part II where I walk you through the minute details. Feel free to share and spread the word. (Please?)

Like what you read? Give Sujan Sundareswaran a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.