Design notes on the 2023 Wikipedia redesign

March 20, 2023 5:18 AM

Hey, I’m Alex Hollender. For the past few years I led the redesign of the Wikipedia desktop interface, which launched this past January. Below are some notes on the project and process.
posted by Etrigan (25 comments total)

I don't like the new design. But that's not due to its merits. I just hate and fear change, and Wikipedia changing is a punch in the gut.

(It is better.)
posted by brundlefly at 7:19 AM on March 20, 2023 [12 favorites]

https://addons.mozilla.org/en-US/firefox/addon/classic-wikipedia/

also, ALL the skins wikipedia has made are still available via preference (if logged in) or url suffix (if not).

https://en.wikipedia.org/wiki/Wikipedia:Skin
posted by Clowder of bats at 7:42 AM on March 20, 2023 [3 favorites]

I love reading notes like this from folks doing technical and design web work. It's remarkable to me that no one had redesigned Wikipedia in 15 years. There's something to be said for that - change has its own costs. But web design has gotten better in the intervening years. (Font technology alone!)

I only wish they had gone further in design and matched something more like the mobile site design. Or Modern for Wikipedia, a desktop addon that I use. Hide all the navigation and cruft and really focus on just the article. Honestly the new vector skin (and the old one) don't have too much junk on display but the typographic design doesn't emphasize the right things. Modern for Wikipedia does a remarkably good job making something look like an article, not a wiki node.

Also I'll note the essay ends And yes,we should increase the font-size to 16px. So why didn't they? Argh! Maybe Hollender lost that debate. If they just made the article text bigger (and left navigation elements the same) it'd go a long way to improving the typographic problem.
posted by Nelson at 7:51 AM on March 20, 2023 [2 favorites]

Hide all the navigation and cruft and really focus on just the article.

The article addresses the tension between focusing on readers and developing editors.

We could make those links less prominent for readers, allowing them to more easily focus on the content. But what if, as a result, those curious few were no longer able to find their way behind the scenes (and eventually become editors)?

posted by zamboni at 7:57 AM on March 20, 2023

For all the fuss I didn't even notice there was a change until people started griping about it. It seems perfectly fine to me.
posted by fimbulvetr at 8:14 AM on March 20, 2023 [1 favorite]

The article addresses the tension between focusing on readers and developing editors.

Yeah, I wasn't convinced by that discussion although I do appreciate the endpoint the site design landed on. I appreciate the desire to make the design still invite participation as an editor but the main barrier to more editors is the culture of Wikipedia, not the CSS.

Still the final design they launched does mostly help with readability. And for potential editors, as they say "organizing and minimizing the clutter allows us to accentuate things in a more intentional manner". The "Edit" and "View History" buttons are still visible, moreso if anything. Thank goodness they removed that awful left navbar, the one with links unrelated to the article like "Special pages" and "Upload file".

The main typographic change I'd make to improve readability further is to somehow make the font for the article different from the navigation. Maybe just bigger (like, say, 16px?). Or arguably a different style font. As it is on an article page two things stand out visually right now. The article title (different font; good!). And the menu "Add languages" (in bold; why?!). The actual article text has the exact same font and size as the navigation links on the left, the toolbar at top, etc. Some sort of visual differentiation would help.

Modern for Wikipedia solves this by basically not having any navigational text on the page. There's a very slim toolbar with some graphical glyphs, but the interactive controls and editing are hidden behind a menu. That may go too far for the designer's stated goal of keeping the edit button visible. But as a reader and only occasional editor, I like it. (Modern also removes the edit button entirely if you're not logged in; that's a fairly provocative change but not an essential one.)
posted by Nelson at 8:37 AM on March 20, 2023 [2 favorites]

I love reading notes like this from folks doing technical and design web work.

Yes, same. Thank you for this.
posted by jessamyn at 8:42 AM on March 20, 2023

Here's something I wrote 9 years ago (while I was working for the Wikimedia Foundation, which I haven't in many years):

If You Log In To Wikipedia You Can Customize A Bunch Of Stuff

I bet most people reading this often read Wikipedia articles but don't log in. That's fine. I love that you don't have to register to read or edit. But here are a few reasons you should try logging in:

1. Read how you want. You can fiddle with a bunch of preferences you didn't even realize you wanted. Suppress display of the fundraiser banner. Disable the suggestions dropdown list for the search box. Choose a different skin (page style) that emphasizes information density. Remove images and background while printing.
2. Beta features. If you log in, you can try out new improvements early. Right now, on English Wikipedia, the beta features include "hovercards" (when you hover over a page link, a little summary pops up) and better search.
3. Language and font settings. If you're multilingual, note that you can change what language you want all the framing text to be in, on any Wikimedia site. For instance, I can go to Russian Wikipedia and change my preferences to English. All the articles are still in Russian, but stuff like the Random Page link is labelled in English, so I can navigate easier.
4. Mobile stuff. If you read Wikipedia via your phone's or tablet's browser, you can look for Settings in the site menu and tap to turn on Beta. That'll give you a preview of upcoming improvements.
5. The VisualEditor. For most Wikipedia editing, the new what-you-see-is-what-you-get interface is more intuitive than messing around with wikitext. So if you rarely hit Edit, it'll be way easier for you if you use VisualEditor. On English Wikipedia, if you log in, you can turn on VisualEditor by checking its checkbox in your Beta features.
6. Better privacy. If you improve a Wikipedia page while you're logged in, the site associates that edit with your username. If you do it without logging in, the edit is associated with your IP address. And people can tell a lot more from an IP address than they can from a username.
7. Better trust. If you end up editing, using your username means other people will have an easier time thanking you, suggesting ways to improve your work, cutting you slack when you make a mistake, and scheming with you to improve particular articles or topics. You can build a reputation when you log in.

So try logging in!

Some of that is now obsolete, but that first point is still super relevant. If you log in, it's far easier to tweak the display to suit your preferences. If you've never tried it, I recommend it.
posted by brainwane at 8:43 AM on March 20, 2023 [3 favorites]

Just to check, is Explosing a typo for exposing, or a term of art I'm not familiar with?
posted by zamboni at 9:12 AM on March 20, 2023 [1 favorite]

the main barrier to more editors is the culture of Wikipedia, not the CSS.

This has been my experience.
posted by aniola at 9:35 AM on March 20, 2023 [4 favorites]

Not quite sure what the definition should be but "explosing' just should be a word. Let's crowdsource, crowdonomatopeiaize, indulge in profligate meme-ification of this wonderfully silly word.
posted by sammyo at 9:56 AM on March 20, 2023 [2 favorites]

Now that I have read the article, that was FASCINATING. I participated in some of the prototype-feedback stages (I think?) and it's remarkable to me that a massive redesign on this scale was ultimately decided by eleven votes. Also I felt this addendum in my bones...

Addendum: after the launch some people on English Wikipedia started another RfC, about rolling back the redesign. You can read all 238,758 words of that RfC here. For context: Moby Dick is 209,117 words.

posted by jessamyn at 10:43 AM on March 20, 2023 [3 favorites]

So ... what color did they decide to paint the bike shed?
posted by Ickster at 11:18 AM on March 20, 2023 [1 favorite]

Back to 2004, which was the last time Wikipedia's interface changed significantly. [..] and there were no smartphones (the first iPhone would come out 3 years later).

Uh, the iPhone wasn't the first smartphone by a very long way. And when the iPhone was released, it wasn't a smartphone at all. Couldn't install apps.
posted by 1adam12 at 11:54 AM on March 20, 2023 [2 favorites]

was ultimately decided by eleven votes

Note that the final RFC tally was 154 support, 165 oppose, so that’s 11 in the negative direction. Given your average editor’s contrariness and hatred/fear of change, if you squint, a split decision like this is kind of a ringing endorsement, and it was ultimately closed as ‘consensus if X, Y, and Z happens’:

The most substantial concern, and the only clear blocker, was the issue of fixed-width. The idea of using a community-maintained gadget is deemed insufficient. It should be possible to achieve a full-width experience using a WMF-maintained toggle, which is clearly visible and available to both logged-out and logged-in users. There were also notable concerns about non-intuitive icons in the sticky header and the behaviour of the language selector, which we believe need to be addressed to achieve a firm consensus.

Some of the contentious nature of the subsequent revoke RFC was that people thought the fixed-width blocker had not been sufficiently addressed.
posted by zamboni at 12:16 PM on March 20, 2023 [1 favorite]

if you squint, a split decision like this is kind of a ringing endorsement

Oh thank you, I think I had misunderstood that part.
posted by jessamyn at 12:47 PM on March 20, 2023

For all the fuss I didn't even notice there was a change until people started griping about it. It seems perfectly fine to me.

I'm no web designer, but I think "I didn't even notice there was a change" might be the highest compliment you could pay to a redesign of a site as big and popular as Wikipedia.
posted by Norton Glover at 12:52 PM on March 20, 2023

So ... what color did they decide to paint the bike shed?

The same color as the boathouse at Hereford.
posted by kirkaracha at 1:47 PM on March 20, 2023 [3 favorites]

Not quite sure what the definition should be but "explosing' just should be a word.

Sadly, Hollender has edited the heading to the pedestrian 'Exposing', explosing his preferitude for less cromulent words.
posted by zamboni at 2:06 PM on March 20, 2023 [2 favorites]

The same color as the boathouse at Hereford.

The way they say 'Hereford' has become a bit of a meme in my house
posted by benoliver999 at 2:51 PM on March 20, 2023 [1 favorite]

The most substantial concern, and the only clear blocker, was the issue of fixed-width. The idea of using a community-maintained gadget is deemed insufficient. It should be possible to achieve a full-width experience using a WMF-maintained toggle, which is clearly visible and available to both logged-out and logged-in users.

Did they actually end up implementing a toggle? I certainly didn't see anything like this mentioned in the new skin announcement. Logging in and reverting to the old skin was the only workaround I could find.

I believe the folks who say they didn't notice, I guess the difference must not be as obvious on all systems/browsers(?), but for me at least, I damn sure noticed the difference immediately, because suddenly only 50-60% of my screen was being used!

IMO this is a great example of the sadly too-common process where a bunch of stakeholders spot a major problem immediately and are summarily ignored for being too negative.
posted by equalpants at 6:23 PM on March 20, 2023 [3 favorites]

God, I hate this attitude so much:

As the comments/votes started coming in, I became frustrated at how unrepresentative of the general public the people voting were. It was a very small group of editors, potentially making a decision for billions of readers. It was also unclear if the people who were voting had participated in past discussions, and/or had taken the time to read through the project documentation, research results, data, etc. It seemed like we were getting a lot of first reactions (as it turned out, only ~28 of the 159 people opposing the new interface had previously engaged in discussions, feedback, etc.). There was a lot of arguing about white space and icons, and people saying they simply didn't like it, rather than discussions of user needs and/or key metrics.

To me that's a textbook example of how not to receive feedback. Shoot the messengers, question their credentials, find a reason to dismiss them.

Re: the fixed-width toggle - the second "revert" RfC has a bunch of comments about it, I guess it really is out there somewhere, will have to go looking...
posted by equalpants at 6:39 PM on March 20, 2023 [2 favorites]

I have found that the Firefox extension FediAct interferes with the display of this page. While it's enabled, the page displays as a plain white field to me, with a Home link in the upper-left corner. This isn't a complaint against the page, just noting that it happens in case someone else is affected.
posted by JHarris at 6:41 PM on March 20, 2023

For me, the biggest issue with the redesign is that moving the article navigation from the top of the article to the left sidebar hasn’t solved anything, at least for long articles. The navigation still scrolls up with the article, instead of being fixed in view. So, if I want to jump to a section of the article, I still have to scroll the page back to the top in order to get to the navigation.

In a way, the new nav is even more aggravating, since I know it could be easily fixed in view, but they opted not to do so. As far as I can see, moving the nav from the top of the article was largely an SEO move, rather than a helpful UI improvement.
posted by Thorzdad at 3:20 AM on March 23, 2023

The navigation still scrolls up with the article

It does? I don't think it's supposed to. At least it doesn't on Chrome or Firefox on Windows Desktop. There's a whole section in Hollender's writeup about how it works, look for the section titled "Wikipedia articles are often very long". More information at the design document.
posted by Nelson at 8:35 AM on March 23, 2023