top | item 34429175

Explore Wikipedia's New Look

292 points| zebracanevra | 3 years ago |wikimediafoundation.org | reply

277 comments

order
[+] trynewideas|3 years ago|reply
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

[+] yamtaddle|3 years ago|reply
Looks like my analysis on the other post using Wikiless for comparison is wrong: the new theme does transfer about 50% more data and has double the uncompressed "weight" that the previous one did, for this article. Memory use similar, bouncing between about 215 and 230MB.
[+] csande17|3 years ago|reply
It seems like Monobook is the only skin whose styling matches all the boxes and tables used in articles. (Minerva makes a valiant attempt to restyle infoboxes but doesn't touch other elements like https://en.wikipedia.org/wiki/2020_Masters_(snooker)#Main_dr... .) It's forward-thinking, placing the search box in the sidebar where it doesn't take up valuable vertical real estate on widescreen displays. It doesn't try to shove controls in between the title of the article and the content of the article. It's even got a responsive layout for mobile devices!

I say they should have bumped up the font size a notch, added a max width option, and saved themselves thirteen years of redesign work. Web design truly did hit its peak in the early 2000s.

[+] pndy|3 years ago|reply
I find timeless most visually pleasing - it does bring some professional look to Wikipedia. And it also provides direct access to pages in other languages without additional clicks, which is important for me because it's the feature I'm using all the time.
[+] ashton314|3 years ago|reply
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.
[+] chazeon|3 years ago|reply
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;
    }
For those who hate it: you will always have the option to switch back to the old theme.

I really hope any website could be as flexible as Wikipedia to allow users to write their own CSS.

[+] wolpoli|3 years ago|reply
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.
[+] dangus|3 years ago|reply
The article addresses this by mentioning that they referenced research demonstrating text that is too wide causes people to read less comfortably and retain less information.

The page gets much less padded when you reduce the size of the window, because the padding isn't there to make blank space, it's there to enforce a maximum line width.

[+] Night_Thastus|3 years ago|reply
For whatever reason, especially with a bigger screen, I find that wider text becomes uncomfortable and somewhat exhausting to read. I'm not sure what the right portions/ratio are, but with a 27in screen it's definitely noticeable.
[+] autoexec|3 years ago|reply
Even when I only have one maximized window up I hate all the empty white space. I've taken to just zooming in until the text fills the window. The new design handles the zoom so much better than the old one.
[+] Gualdrapo|3 years ago|reply
I don't think "every" designer does that.

And not everyone wants all content crammed into a little area.

All in all, it should be up to the user decide how much content density they want on websites.

[+] ketzu|3 years ago|reply
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.

[+] psacawa|3 years ago|reply
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')`

[+] spartanatreyu|3 years ago|reply
> Wasted screen space

Don't fall for that mental trap. White space is not wasted space.

[+] askvictor|3 years ago|reply
Humans read best when a line is around 10 words long. Longer, and it's easy to lose which line you're on when you go to the next one. The sidebar collapses if you resize to a narrower window, so I wouldn't call it wasted.
[+] layer8|3 years ago|reply
Yes, switching languages not being a single click any more is a major usability regression. They should at least allow to configure a set of “favorite” languages that can be directly accessed.
[+] Fauntleroy|3 years ago|reply
Even in the new design the line length is way too long. I get complaints about wasted screen space, but you really don't want lines of text blasting all the way across the screen either.
[+] mike_d|3 years ago|reply
> - Wasted screen space

Don't worry, it will soon be filled with solicitations for donations.

[+] ilyt|3 years ago|reply
Also for some reason they made links even brighter blue
[+] slimginz|3 years ago|reply
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.

[+] Snitch-Thursday|3 years ago|reply
Thank you! I first went back to vector legacy, but then I saw monobook which is the wikipedia of my memories and have swapped there, so now I'm happy.

Kudos to WM for keeping the option for that theme in MediaWiki. Now I have a reason to browse logged in all the time.

[+] rchard2scout|3 years ago|reply
IIRC, the button in the bottom right is intended to not remember the change. To make the full width setting persistent, when you're logged in, go to Preferences -> Appearance, and disable "Enable limited width mode".
[+] coldpie|3 years ago|reply
> 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.

Ooh good spot. That fixes my one issue, the bizarrely narrow column width.

[+] userbinator|3 years ago|reply
Or you can just use custom CSS, which works not only here but on every site, and has been my preferred way of fixing/reverting horrible decisions.
[+] sdevoid|3 years ago|reply
Thank you! I think this is the first time I've logged in for 10 years.

I don't mind the current UI change, but I wish significant changes would come with a toggle button to let me look at the old and new renderings. I don't think it's possible to mentally "place" the improvements without side-by-side comparisons and affordances for finding edge cases where the new UI may be lacking.

[+] arc-in-space|3 years ago|reply
Unfortunately this only works if you have javascript enabled on the site, too, and the awful popups they added made me disable it.
[+] ohCh6zos|3 years ago|reply
Why is everyone moving to so much white space? I wish there was more of an emphasis on information density on the modern web.
[+] mschuster91|3 years ago|reply
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

[2] https://news.ycombinator.com/item?id=21888451

[+] kibwen|3 years ago|reply
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.
[+] aendruk|3 years ago|reply
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.

[+] LordDragonfang|3 years ago|reply
Pardon me asking, but what font (cipher? language?) are your tab titles and menus in? I don't recognize it, and I'm familiar with quite a few ciphers. (I initially thought it was another language, but it's clearly a transliteration of English.)
[+] g051051|3 years ago|reply
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.
[+] liberia|3 years ago|reply
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?

[+] lxgr|3 years ago|reply
Closed subsections break page search (at least on iOS Safari), which I find very frustrating.
[+] shrx|3 years ago|reply
I always prefer the full article, but this is a matter of opinion. The issue is that the behavior is not consistent.
[+] mostlysimilar|3 years ago|reply
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?
[+] bearmode|3 years ago|reply
Because it works well without borders. You need to have a justification for adding things - what does a border add here? Other than making it feel more boxed-in?
[+] thiht|3 years ago|reply
Because it works without borders. Do you have any trouble differentiating the sidebar from the content? I'm gonna guess no. Hence, no need for a border.
[+] mozball|3 years ago|reply

  So                Much     White    Space
  Its               also   off-center which
  is                annoying on an 15"laptop
[+] trompetenaccoun|3 years ago|reply
But they added the donate button in a prominent position top right. At least no one will miss that when they're looking for a context menu ;)
[+] dotnet00|3 years ago|reply
Ewww 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.
[+] Y_Y|3 years ago|reply
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.

[+] Willish42|3 years ago|reply
> 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.

[+] rising-sky|3 years ago|reply
> 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...

[+] emehex|3 years ago|reply
Gut reaction: I hate it. But I'll probably get used to it...
[+] skyyler|3 years ago|reply
Same! I absolutely hate the amount of empty space everywhere on my 1080p screen.
[+] zebracanevra|3 years ago|reply
Yeah, same reaction for me... I've always liked the small gradients on the top and the long list of things down the left side which I never click. Felt homely. I'll miss it.
[+] timeon|3 years ago|reply
> probably get used to it...

Since it is on some language version for some time I already did. But it took some time.