My initial take: I actually like this a lot. The body text is narrower which makes for easier reading. The sidebar with an updating highlight of current place in document is really nice too. I don't mind the "wasted space": Wikipedia is primarily about reading, and any well typeset book or web page should have generous margins so the line length is not too long.
Have been using this new theme since beta. I love the much cleaner look more than the previous one. One can always tune the CSS yourself at the user's preference near the theme selector. The only thing I need to adjust to my liking is to limit the line width:
main#content {
max-width: 40em;
}
I really hope any website could be as flexible as Wikipedia to allow users to write their own CSS.
I don't like the extra padding that every designer is adding into every web site and application. I need to keep multiple sites/apps on my screen as I need to look at references, work on my tasks, and communicate with others. but every designer thinks I should maximize their site/app. It's forcing me to resize and move windows all the time.
I really like it.
Mostly the repurposing of the left side for the table of contents, but also the width reduction. I only use half of my screen for my browser already, and on many pages, lines are just insanely long.
Personally, I nevery really minded having open space on websites. I never felt it made reading worse. Contrary, pages with little whitespace felt cramped and I lost my position now and then. But I understand that other people will feel differently about that.
I'd stil like the language selector below the table of contents in the sidebar.
Good:
- Sidebar for navigation
Bad:
- Wasted screen space
- Other languages are not available as a simple anchor tag anymore. They are hidden behind <button> elements. It's annoying for readers who consult their own language and en.wikipedia.org in the same session. It breaks my bookmarklet to change languages, which depended on something like `document.querySelectorAll('a')`
For people who don't like the new look, you can go to preferences->Appearance and select 'Vector (Legacy)'. It does require you to login first which is annoying but at least you can easily go back to the old look.
Edit: You can also have it take up the entire width by hitting the button in the bottom right. Doesn't seem to remember the change for me though so hopefully they add that in soon.
Why is everyone moving to so much white space? I wish there was more of an emphasis on information density on the modern web.
What, excuse me, the fuck. It's almost like all lessons from the Windows 95 era were forgotten (see e.g. [1], and the top comment of the HN discussion is worth a read as well [2]). No borders visually separating areas of different function, no visible indicators where the clickable area of an UI element (e.g. a button) is, and the content jumps to the right when opening the main menu.
> These improvements will make Wikipedia more welcoming and easier to use.
Above quote from the notification, which, again, has no visual borders. Just an insanely contrast-less sky blue on a white background.
Whoever has thought of this being a good idea should just go and resign in shame. Not every questionable design "trend" has to be followed.
[1] https://twitter.com/tuomassalo/status/978717292023500805
I appreciate the table of contents moving to the left-hand sidebar, needing to scroll back to the top in order to navigate a long page or get a permalink was always an annoyance.
Sigh, yet another site that contorts into an absurd distortion of a mobile layout at a still spacious viewport width. Am I the only person with two windows up?
Screenshot: https://cloudflare-ipfs.com/ipfs/QmaovnEHiCo6knhTPpp4XJyr5x9...
This actually increased the line length.
Thanks, I hate it. Everything I loathe about "modern" web design made manifest here, and switched on without warning! At least I can turn it off in settings.
I browse with Safari on iOS with JS disabled by default. I do this for privacy and accessibility reasons (gotta stop those annoying popup modals, trackers and other annoyances).
One thing I noticed with Wikipedia with JS /enabled/, all the sub-categories of a topic are by default, closed.
But when I browse with JS disabled, all the sub-categories are /opened/ and I have the full article.
Since most people browse with JS enabled, this means they have to make additional clicks just to read the sub-categories.
Which leads me to question: which version is better? The JS where you have to make additional clicks, or the no-js version where you get the full article?
Floating table of contents on the left is a nice feature, but why is the styling so plain? It's just links floating in a void. Why do modern designers hate borders so much?
So Much White Space
Its also off-center which
is annoying on an 15"laptopEwww what's with this terrible trend of wasting the majority of the screen space on a 16:9 monitor like this. Let it fit the window width, if someone needs it to be narrow let it adjust itself appropriately.
The Second Law of Interface Thermodynamics means that the software can't get more usable with time, nor can it even retain its previous level of usability.
Everything decays, especially software.
> Research has shown that limiting the width of longform text leads to a more comfortable reading experience, and better retention of the content itself.
Is this actually true? I'm curious if anybody has sources for this and if it's a common UX practice. I tend to use wider windows than traditional 8:9 half-screens and this max-width practice drives me nuts.
> Research has shown that limiting the width of longform text leads to a more comfortable reading experience, and better retention of the content itself
Surprised they did not include a citation for this research...
Gut reaction: I hate it. But I'll probably get used to it...
Lots of whitespace, lots of unnecessary animations, and lots of floating bars I'd never click occupying screen space. Hopefully this isn't too hard to fix with browser extensions.
Thanks I hate it.
I hate that sides want to control how "wide", I mean narrow the text can be. Sorry, I prefer longer lines and not a bunch of empty space on the sides.
The new layout style, most notably the centrered text blocks, has already been the default on a few other language versions of Wikipedia most notably fr.wikipedia.org.
Great, now it takes two clicks to switch languages
old.wikipedia.org when?
Looks nice on desktop, have yet to see how mobile has changed. Oddly, I find that it still shows the old UI on certain pages? Eg:
https://en.wikipedia.org/wiki/Does_not_compute https://en.wikipedia.org/wiki/Combinatorics https://en.wikipedia.org/wiki/Stable_Diffusion
And I guess my one complaint is, it now takes 2 clicks to iterate through random articles.
Now I have to log into Wikipedia just like reddit in order to get the non-atrocity user interface experience. How nice.
feels modern, but modern in a very web center way that i feel like very 2020s. it feels overly minimalist in a way that looks good in design sheets. love the table of contents on the side dont care for the modern trend of removing any and all color separation between distinct portions of the page.
I don't like it. It was fine the way it was. I like the new table of contents though. Thats kind of useful
Not that it matters to most people, but I'm surprised this didn't break the Dictionary app on my 10-year-old version of OS X (10.9 Mavericks). Wikipedia inside the Dictionary app looks basically identical to how it did a week ago, even though aiui it's basically just rendering the Wikipedia page (in a now terribly outdated browser engine) with some custom CSS. I wonder why it's still working.
Wow, an improvement to a website that is actually an improvement. Reads way easier. Can I get Confluence to look like this?
My personal problem with it: the sidebar became wider. Now I have to disable it, but when I disable it, it disappears and makes the text lines much wider than what I'm used to. I'm one of those few people who don't maximize the browser to get a good acceptable line width. Wikipedia simply broke this :(
Oh, it's still hideous. Years ago I used to have a Safari extension that made Wikipedia look absolutely beautiful, with vastly improved readability. Such was the shock when that extension finally stopped working that I can still remember where I was when I suddenly saw the full horror of its regular design.
>When you are logged in to Wikipedia, the updated header will move with you as you scroll. You will no longer need to scroll to the top of the page to find what you are looking for, and you can focus on reading and editing instead.
How do people write things like this with a straight face
I was really hoping for a built in dark mode with the update. The mobile app is fantastic about this.
This reminds me of the Modern Wiki browser extension, which seems to have a lot of the same things but looks better to me at a glance. Also configurable, dark mode, etc.
It seems fine. I'm glad they didn't use a useless watered-down mobile design with excessively rounded components like Xfinity and other businesses have lately been doing. On larger monitors, there should be a full width option though.
Love the new ToC links on the left.
The new look seems to mess up some inline images.
In the following links, the histogram chart under section Historic Population has an unnecessary horizontal scrollbar for the chart image.
https://en.wikipedia.org/wiki/Bern (New vector-2022 look)
https://en.wikipedia.org/wiki/Bern?useskin=vector (Previous vector look)
Note: I am viewing this on my surface tablet in landscape mode.
I like it but I wish I could still have the available languages on the left column instead of having to click a button at the top. It would be great to pick some languages to be displayed on the left if there's a version available.
I really like it
Finally. I have a big monitor and the line width is insane, glad they made it a more reasonable column layout, moving my head from end to end was getting very annoying that I had to use custom CSS instead.
Now, is there a dark mode like on the app?
A max line width is welcome from me, I'll be able to remove my tampermonkey script for wikipedia.
I'll still need to keep the generic one around that I use on demand to fix other unreadable pages though.
The table of contents is a great addition! Whitespace/minimalist styling is of little importance as it will change with design fashions, while the table will stay a net positive.
I wish the search was better, you basically have to know the exact spelling of the thing you're looking for, and there doesn't seem to be any partial word results.
This is all fine and dandy, but it baffles me that in the Year of Our Lord 2023 Wikipedia still insists on separate domains/URLs for mobile v. everything else.
I've been using the Mobile Wikipedia extension(1) for Firefox which achieves the same effect. Actually mobile Wikipedia is lighter and loads faster than the new design.
(1) https://addons.mozilla.org/en-US/firefox/addon/mobile-wikipe...
I guess they have to justify their e-begging banner somehow even though a tiny proportion of the donations actually get spent on Wikipedia.
Wikipedia is really becoming awesome, and for me is really a Wonder of the modern world.
Combined with tools like ChatGPT (or improved variants) for high quality translation of any article in any language, or combining submissions in several languages, or to get summaries or interactive explanations on some subject, this will become the most powerful tool of knowledge in history.
I sense part of what drove this redesign is the fact that 4K and Ultrawide monitors are now common enough that designing to accommodate them cannot be ignored. That being said, I much prefer left-justification instead of centering the content and having massive whitespace islands to either side. I wish there was an option to left justify.
Just let me link to a content section (named anchor) on mobile. It makes sharing specific parts kinda difficult.
Another irritatingly unnecessary change.
For those who don't like the new skin. I have created a user CSS to make it more compact:
https://gist.github.com/kool-user/457cbf0100e075cc83977c1fe8...
I didn't like the look of it from that GIF but after visiting it I don't mind it at all
I think it's nice actually. It also works great with JavaScript disabled! Thanks Wikipedia.
Never occurred to me how better it feels with the table of content on the side, even though that's a common thing in document processors. UX is the ultimate one-way function. Hard to make right, easy to judge.
Should use white for the text colour to give the design a consistent theme.
Does anyone have any CSS/JS code to always expand the ToC sections?
I prefer Wikiwand over the redesign, but this is still a massive step in the right direction.
Worst choice ever all it makes is for 1 second of being able to read it then it goes all blurry and not to mention I have to put it on full screen width everytime.
But how does it look with a massive charity drive ad banner?
Thank god for wikiless.
My first instinct was: how to get rid of the left menu and get the text wider again.
Magnify to 150% and it's readable again.
I don't know if they're rolling it out in phases or what, but the new design seems to work only on some articles.
As of right now (UTC 4:50 am):
- Hanlon's Razor (new design) https://en.wikipedia.org/wiki/Hanlon%27s_razor
- Dunning-Kruger effect (old design) https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect
... Got to admit, seeing the headline, I was assuming I would hate it, but... it looks pretty good.
oh goddammit
(sorry)
Is there a way to change it back?
~2005 was peak Wikipedia aesthetic. All these flat, border less design decisions take away from intuitive UX and make things more... globally homogenous.
something is definitely wrong with firefox on linux. There is no margin on the left side.
I don't need a header to follow me down the page, in fact I'd prefer it not to. On the very rare occasion when I need to scroll all the way to the top of the page, I have no problem figuring out how to do that. Feels like they're introducing a persistent UI element without a benefit. Benefit to me, anyway. Maybe they heard from a lot of users who were having trouble remembering where the header was, I can't say. I don't log in to Wikipedia, so this doesn't affect me much at present.
I'm not sure what value the collapsible table of contents is. Maybe it's useful on mobile, to help save screen space, but on desktop it would just be extra work for me to collapse the sections (which appear to be expanded by default). I have not found the length of the table of contents to be a problem, and I see the value of this structure as being that it allows me to see everything at once.
I get why having a maximum line length is good for readability. My reaction to this feature is negative, but I wonder if it's because I've gotten good at sizing Wikipedia articles the way I like them to be, by upping the font size and shrinking my browser window. Maybe I will come around on it, but my initial reaction was that I don't trust them to make the right decision for me, so I'd rather they just kept it flexible.
Initial reactions from watching the gif, coming in cold, having not seen the new design:
2003: Ouch. Yeah, that's bad.
2005: Great.
2011: Not worse. Maybe a little better. I have a vague recollection that some things that aren't well-showcased by a still got better with this one, but the still is at least not-offputting compared with '05.
2022: LOL are you serious? You cannot be serious. Please tell me this is unfinished.
All that padding. WTF. Someone accidentally hit "0" too many times in their CSS editor.
[EDIT] I mean I guess you need enormous swathes of empty space when you remove all other indicators of section division, but... like... just don't do that, then?
[EDIT 2] OK, I was like, "whatever, it sucks, but I'll get over it" until I read this: "When you are logged in to Wikipedia, the updated header will move with you as you scroll." Thank god when I try it on the site this doesn't actually work, since that'd force me to have custom CSS for Wikipedia. {ah, I see now it's because I'm not logged in. Great, easy to avoid then, no problem} Also: I'd love a before-after on page weight. Everyone always seems to add like a full MB of junk to the damn page when they add smart search like that, for some reason, even though it shouldn't require anywhere near that much (see: Github, whose pages bloated a ton when they made their search field "smarter"). One of the nicest things about WP is that it's semi-usable on a potato connection and I wouldn't want to see them sacrifice that in the name of almost any other improvement.
[EDIT 3] Being the change I want to see in the world: I checked with caches disabled and it looks like transfer and weight are damn near identical compared with the "wikiless" site that someone else linked, for the same article. Very nice, happy to see that. However, it appears to use double the memory of the Wikiless version (which I suppose represents something closer to the old design?) which seems pretty bad to me.
[dead]
[dead]
If you hate it, it's probably because it's different. You'll get used to it. It's similar to how every time a company re-designs their logo, there's always a huge backlash solely because it's change, and people do not like change.
It's a really nice improvement from the previous design.
Details on the design process: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme...
-
On Wikipedia, and any MediaWiki installation, you can add the useskin query parameter to the URL to change skins on a page, even when not logged in.
Current (vector-2022): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ve...
Previous (vector): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ve...
Older (monobook): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mo...
Older alternative (modern): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mo...
Older alternative (cologneblue): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=co...
Mobile (minerva): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mi...
Responsive alternative (timeless): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ti...
Installed skin list: https://en.wikipedia.org/wiki/Special:Version