Wikipedia vernieuwt websitelay-out met sticky header en inhoudsopgave

Wikipedia heeft een nieuwe lay-out gekregen. De online encyclopedie heeft Vector 2022 doorgevoerd, een restyling die vier jaar in ontwikkeling is geweest. De nieuwe lay-out lijkt op de skin uit 2010, maar ziet er moderner uit met een nieuwe inhoudsopgave en een sticky header.

De nieuwe lay-out heet Vector 2022. Het is een vernieuwde versie van het bestaande Vector, dat Wikipedia al sinds 2010 gebruikt. Volgens de makers van de online encyclopedie voldeed dat oude ontwerp niet aan alle eisen, waardoor er veel elementen op de schop moesten. Het nieuwe ontwerp moet 'toegankelijker en comfortabeler zijn voor zowel nieuwe als oude lezers'. Ook zou de skin het beter doen voor 'geavanceerde gebruikers op de desktop'.

De inhoudsopgave blijft voortaan standaard op de pagina staan en scrolt daarbij mee met de gebruiker. Ook komt daar op discussiepagina's extra context bij te staan voor lezers. Het wordt daarnaast makkelijker om van taal te wisselen tijdens het lezen. Ook wordt de sidebar inklapbaar en zijn er verschillende kleine visuele verschillen.

Een andere belangrijke wijziging is dat de zoekfunctie prominenter wordt weergegeven. Daar komt ook informatie bij te staan over een zoekopdracht, zoals extra afbeeldingen of beschrijvingen. Tot slot wordt de header voortaan sticky, waardoor die meescrolt met de gebruiker.

Reacties (51)

[Theway1978]

Zet ?useskin=vector-2022 achter de URL en je krijgt de nieuwe skin

[Brummetje]

Ik was heel enthousiast om dat te proberen maar wat vreselijk dat het niet volledige breedte is.

[DanielChopin]

Als je uitgelogd bent, zie je rechts onderin van je scherm een icoontje staan waar je de pagina op de volledige breedte kan krijgen, als je ingelogd bent kan je dit definitief maken in je preferences.

[Brummetje]

Dat is inderdaad een heel stuk beter! Snap niet dat dit niet de standaard is als je bent uitgelogd. Vind persoonlijk de lege balken links en rechts erg storend overkomen.

[MacGyverNL]

Er is een lange historie van typografisch onderzoek, publicaties, en praktijk [1,2,3,4] waarin men concludeert dat de optimale regel-lengte voor de gemiddelde lezer onder 100 karakters per regel zit. Dit is waarom, als je meer ruimte hebt dan dat, het leeuwendeel van papieren publicaties (kranten, tijdschriften, wetenschappelijke artikelen, etc) in meerdere kolommen werken in plaats van tekst over de hele paginabreedte uit te smeren.

De exacte regel-lengte wordt in verschillende onderzoeken verschillend geconcludeerd [5,6,7], maar geen van deze onderzoeken gaat over regels langer dan 100 karakters, dus zelfs als hun "langste regellengte" de "beste" was, dan is dat nog steeds 100 karakters of minder.

Het enige onderzoek dat ik zo snel kan vinden dat echt kijkt naar regels langer dan 100 karakters per regel concludeert ook dat het optimum onder 100 karakters per regel zit [8]. Niet zozeer vanwege leessnelheid en begrip (daar vinden ze geen statistisch significante verschillen), maar vanwege de door de lezers uitgesproken voorkeuren (75 karakters voor volwassenen, 45 voor kinderen). Ze speculeren dat de afwezigheid van statistisch significant verschil komt doordat, hoewel langere regel-lengtes beter zijn op het gebied van hoeveelheid scrollen, dat effect teniet gedaan wordt doordat men per regel meer moeite met lezen heeft.

Je zou zeggen, dan kunnen we misschien meerdere kolommen gebruiken, maar door de voor de hand liggende problemen van meerdere kolommen op een computerscherm (waar breek je immers de kolom af?) heb je ook een flink potentieel nadeel, namelijk dat het toch langzamer leest dan één kolom. De enige onderzoeken die ik daar zo snel over kan vinden zijn uit 1997 [9] en 2005 [10,11] en hun enkele "brede kolom" is nog steeds maar 75 respectievelijk 90 en 95 karakters breed. En dan zit er ook nog een flink verschil tussen scrollen en pagineren, waar 1 kolom gescrolld trager leest dan 3 veel smallere kolommen gepagineerd, maar het snelste is 1 kolom van 75 karakters gepagineerd.

Persoonlijk vind ik tekst in een normale lettergrootte uitgesmeerd over een heel 1920-pixels-breed scherm ook echt moeilijker om te lezen. Dus ik vind 't niet heel gek dat een volledige reflow over de hele breedte niet (meer) de standaard is. (Voor de volledigheid: dat is ongeveer 250 karakters in mijn browser op fullscreen-breedte.)

Ja het is jammer van de verloren ruimte -- maar dat denk ik ook bij tweakers-artikelen en comments. Als je daar om geeft moet je je browser niet fullscreen draaien op een 1920 pixels breed scherm -- het web was een stuk leesbaarder toen de schermen nog 4x3 en 1280x960 waren. Dingen die helpen zijn je tab-balk aan de zijkant hebben, twee applicaties side-by-side gebruiken, en een tweede scherm in portrait mode hebben.

Bronvermelding:
[1] Typography, Ruder, 1967
[2] <https://baymard.com/blog/line-length-readability> (empirisch onderzoek voor e-commerce sites op basis van Ruder's bevindingen)
[3] The Elements of Typographic Style, Bringhurst, 1992
[4] <http://webtypography.net/2.1.2> (Bringhurst maar dan hoe toe te passen op websites)
[5] <Readability of text scrolled on visual display terminals as a function of window size>, Duchnicky & Kolers, 1983
[6] <The Effects of Line Length and Method of Movement on Patterns of Reading from Screen>, Dyson & Kipping, 1998
[7] <The influence of reading speed and line length on the effectiveness of reading from screen>, Dyson & Haselgrove, 2001
[8] <The Effects of Line Length on Children and Adults' Perceived and Actual Online Reading Performance>, Bernard & Fernandez & Hull & Chaparro, 2016
[9] <The legibility of screen formats: Are three columns better than one?>, Dyson & Kipping, 1997
[10] <Is Multiple-Column Online Text Better? It Depends!>, Baker, 2005
[11] <The Effects of Line Length on Reading Online News>, Dawn Shaikh, 2005

[Reactie gewijzigd door MacGyverNL op 22 juli 2024 20:06]

[86ul]

Er is een lange historie van typografisch onderzoek, publicaties, en praktijk [1,2,3,4] waarin men concludeert dat de optimale regel-lengte voor de gemiddelde lezer onder 100 karakters per regel zit.

Grappig, deze zin zelf is al 200 tekens. Zelf verkies ik een zin van rond de 15 woorden als lang genoeg. [8 en 13 woorden, oef]

[Caedus]

Een beetje professionele schrijver houdt de cadans van de tekst in de gaten en wisselt lange en korte zinnen met elkaar af. Dat leest fijner.

[86ul]

Zo'n schrijver 'danst' inderdaad met de lezer over de tekst, echt een gave om te kunnen doen.

[MacGyverNL]

Merk op dat er een verschil is tussen de (woord)lengte van een zin en de regellengte van een layout.

(Edit: Tweakers houdt op mijn scherm in fullscreen ongeveer 110 karakters aan in zowel artikelen als comments.)

(En voor de volledigheid: volledige breedte op wikipedia is in mijn browser op fullscreen 250 karakters, en dan heb ik mijn browser's tabbalk al aan de zijkant. Meer dan het dubbele.)

[Reactie gewijzigd door MacGyverNL op 22 juli 2024 20:06]

[86ul]

Merk op dat er een verschil is tussen de (woord)lengte van een zin en de regellengte van een layout.

Inderdaad, daarom schreef ik ook zin, ipv regel. Want die zin is gewoon ook lang...

[MacGyverNL]

Ah, dus het was geen onbegrip, maar een volstrekt irrelevante steek naar de complexiteit van mijn zinsopbouw. Duidelijk, waarvan akte. Voel je vrij om het te herschrijven zonder gebruik te maken van zinnen langer dan 15 woorden.

[86ul]

Eerder een steek naar de onderzoeken. Als in, waarom wél onderzoeken naar de ideale aantal tekens per regel, maar tot niet volledigen met ideale aantal woorden per zin. Tevens, een ideale 'dans met de lezer over de tekst' is inderdaad zo'n 10 a 20 woorden, met een gemiddelde van 15 woorden. Zo'n schrijver 'danst' inderdaad met de lezer over de tekst, echt een gave om te kunnen doen.

[Reactie gewijzigd door 86ul op 22 juli 2024 20:06]

[P_Tingen]

"regel" <> "zin". @MacGyverNL heeft het over een regel en dat is niet persé gelijk aan een zin. Een regel kan meerdere korte zinnen laten zien en een zin kan over meerdere regels zijn verspreid.

[Applejack]

Ik ben in ieder geval wel blij met de optie, want op een ultrawide is volledige breedte veel te breed om aangenaam te lezen.

[Bazi]

Wetenschappelijke studies wijzen uit dat korte regels effectiever zijn. Zie hier en hier.
Ze komen dan op 50-100 letters per regel als de optimale lengte.

Tegelijk kan iedereen een eigen voorkeur hebben natuurlijk.

[RoestVrijStaal]

Screenshot dat eens a.u.b.. Ik kan het nergens vinden.

[DanielChopin]

Het staat echt letterlijk helemaal rechtsonderin van je browserscherm. Wel op de Engelse Wikipedia (en.wikipedia.org)

[Bergen]

Doet Tweakers toch ook niet? Hoe breder de tekst, hoe onleesbaarder het wordt. Stel dat een krant de artikelen over de volledige breedte van het papier afdrukt...

[Brummetje]

Gaat mij niet om de tekst zelf. Gaat mij om het ontwerp dat er onnodig veel lege ruimte is. Meeste pagina's op Wiki hebben heel veel extra informatie naast de stukken tekst. Daar kan je die ruimte prima voor gebruiken.

[Annihlator]

stel dat een gebruiker het venster instelt op de maximale grootte die ze willen gebruiken...

Nu weer een berg nodeloze witruimte en op mn tablet die maar 1280x768 als resolutie draait is de impact merkbaar groot en negatief in hoe veel er nog wel weergegeven kan worden.

En eigenlijk is het neveneffect van die witruimte rechts vooral über-storend wanneer ik het venster op een helft van mn 4k monitor plaats, nog méér verspilde beeldruimte waardoor indirect het browservenster onnodig groter zou moeten zijn.

Zal een andere dag uitgebreider testen, maar dat wordt sws een bulk feedback van mijn zijde... ik haat (ronduit) dit soort "tablet-only" ontwerpen, op de desktop mag gerust die geforceerde witruimte ophoepelen, al helemáál als het venster niet "volscherm" is.

[AlRoke]

Je behoefte is dat de tekst de volledige breedte zou innemen? Of welk deel? Vind persoonlijk het design geweldig.

[Brummetje]

Er is enorm veel lege ruimte links en rechts en dat is erg zonde vind ik persoonlijk.
Tekst hoeft uiteraard niet helemaal over het scherm te gaan maar dit is wel heel erg overdreven.

[Gropah]

Snap ik. Je hebt de breedte op een monitor om gebruikt te worden. Aan de andere kant heb ik ook nog wel eens moeite met de volledige breedte. Zeker met grote blokken tekst waar weinig paragrafen of block onderdelen zoals code-snippets of wiskundige formules opzitten. Het is dan heel makkelijk voor mij om bij naar de volgende regel gaan, de precieze hoogte te verliezen en zo dezelfde regel opnieuw te gaan lezen, of een regel over te slaan.

Erg fijn dat je dat nu dus kunt instellen

[Bender]

Ik vind het juist veel fijner lezen, over de hele breedte lezen is ook vrij ongebruikelijk zelfs.

[AlRoke]

Kwam net deze link posten, maar ik zie dat je me voor was: https://en.wikipedia.org/...akers&useskin=vector-2022

[sjoerd.stougie]

bij mij gebeurt dat automatisch... kan het ook uit? het is echt lelijk

[ocn]

Ik zie echt geen sticky header.

[DanielChopin]

Word gefaseerd uitgerolt. Hier word live de progressie bijgehouden: https://sal.toolforge.org...oduction?p=0&q=T326892&d=

50% van alle pagina's heeft nu de nieuwe layout. Dit doen ze gefaseerd om niet de servers te overbelasten. Het kost +- 3 uur om alle 57 miljoen+ pagina's op de Engelse Wikipedia de nieuwe layout te geven.

[Reactie gewijzigd door DanielChopin op 22 juli 2024 20:06]

[killercow]

Waarom is je content uberhaupt gekoppeld aan de layout vraag ik mij dan af?

[TweakerCarlo]

Caching waarschijnlijk? Denk niet dat ze elke request opnieuw gaan opbouwen.

[YopY]

Dat idd, de pagina wordt 1 keer opnieuw gerenderd op hun servers, maar dat maal bijna 60 miljoen is best een dure operatie. Daarnaast hebben ze wereldwijd caches (CDNs) die ook ververst moeten worden.

[jip_86]

Ah goeie, ik zat me al af te vragen waarom de ene pagina wel en de andere niet.

[Roel1966]

Om eerlijk te zijn kan ik de verschillen nog niet echt zien maar dat vind ik alleen maar positief. Vooral voor iemand met een leesbeperking kan het soms erg storend zijn als een layout totaal veranderd. Dat vergt dan weer veel extra energie en moeite om alles weer terug te vinden. Maar dat heeft Wikipedia dus gelukkig goed aangepakt en verder niets veranderd aan het aangezicht van de layout.

Verder kan ik sowieso alleen maar positief zijn wat Wikipedia betreft en er eigenlijk best wel veel gebruik van maak. Altijd handig om even snel op Wiki te kijken als je snel iets wilt weten en vaak Wiki ook best accuraat is.

[MacGyverNL]

... en verder niets veranderd aan het aangezicht van de layout.

Nou, een (licht controversiële) verandering is dus dat ze standaard een maximale kolombreedte aanhouden. Dit zou de leesbaarheid ten goede moeten komen, maar het was bij de overschakeling van de Archwiki naar de Vector layout ook nogal controversieel. Als je bedoelt dat je zelf een leesbeperking hebt, dan ben ik eigenlijk wel benieuwd hoe het bij jou valt.

[Roel1966]

Nou, een (licht controversiële) verandering is dus dat ze standaard een maximale kolombreedte aanhouden.

Voor mij kan dat gunstiger uitpakken omdat ik met een 21:9 inch scherm werk en soms vooral wel eens bij PDF's heb dat het hele scherm opeens gevuld word met tekst. Dus een vaste maximale kolombreedte kan in deze situatie zelfs wel handig zijn en ik niet hoef te verkleinen.

Als je bedoelt dat je zelf een leesbeperking hebt, dan ben ik eigenlijk wel benieuwd hoe het bij jou valt.

Zoals ik hierboven al schreef is tekst op de hele breedte van het scherm ook vermoeiend met lezen.

[YopY]

Het is alleen controversieel omdat Wikipedia een van de laatste websites was die dat niet deed; toen het net uitkwam was dat prima (in 2001 was 1024x786 de standaard), maar daarna kwamen de breedbeeldschermen en pasten nagenoeg alle websites zich aan, zo ook bijvoorbeeld Tweakers. Alhoewel die al eerder niet de volledige breedte gebruikten

[Wouter-k-9]

Ik gebruik zelf de volgende plug-in voor een moderner uiterlijk voor wikipedia. Hij is beschikbaar voor Firefox en Chrome. Ik kan hem met harte aanraden!
https://www.modernwiki.app/

[Reactie gewijzigd door Wouter-k-9 op 22 juli 2024 20:06]

[lilmonkey]

Vergelijkbaar: https://www.wikiwand.com

[e.dewaal]

Ik gebruikte een UserScript die automatisch redirect naar de mobiele pagina van Wikipedia. Deze is al heel lang responsive en prima te gebruiken op de desktop. Nu dit thema er in komt heb ik hem uitgeschakeld. Ik ben erg benieuwd!

== edit:
Ik heb even gekeken en getest, maar eerlijk gezegd vind ik de skin die gebruikt wordt op de mobiele site (minerva neue) toch prettiger lezen. Het voornaamste verschil is voor mij dat het lettertype een tikje groter is (16px ipv 14px). Ik laat de UserScript toch nog maar lekker aan staan, maar voor de meeste gebruikers zal deze nieuwe skin een verademing zijn ten opzichte van het oude thema.

[Reactie gewijzigd door e.dewaal op 22 juli 2024 20:06]

[Zeror]

Veel beter!

[Martinspire]

Eens. Rustiger layout, minder opties (die je toch niet vaak gebruikt) en het gedeelte van tekst is ook smaller en iets leesbaarder op grote schermen (imo)

[mxt3]

Lijkt dat Franstalige Wikipedia deze versie, of iets dat er sterk op lijkt, al een hele tijd in gebruik heeft.
Kan misschien al meer dan een jaar het geval zijn.

EDIT:
Aha, van https://en.wikipedia.org/.../More_about_Vector_(2022)

It is also in use as the default across over 20 community-led projects accounting for more than 1 billion pageviews per month, such as French Wikipedia, where it has been the default since 2020.

[Reactie gewijzigd door mxt3 op 22 juli 2024 20:06]

[DanielChopin]

Ze hebben dat inderdaad eerst gedaan op "kleinere" wiki's om reacties te peilen en verschillende testen te doen.

[bzuidgeest]

Even gekeken, maar ik heb nog steeds de oude layout. Duurt wellicht even voordat het doorgevoerd is....

[Napo]

Positieve ontwikkeling al waren er al manieren om middels bijvoorbeeld wikiwand een wat prettigere omgeving te krijgen met dezelfde content.

[xray1x]

Net even de mobiele Wikipedia getest, die lijkt nog steeds te lijden onder eindeloos scrollen als je een lange lijst opent zoals alle processorvarianten van Intel. Je komt dan enkel bij de inhoudsopgave door terug te gaan. Het zoekvak is nu wel mooi prominent aanwezig.

[FvGa]

Wow! Geweldige update, leest veel lekkerder weg om de een of andere reden.