Bètatest UI-update

Zoals we eerder al hebben uitgelegd, gaan we in 2026 de styling van Tweakers vernieuwen. Het eerste resultaat is nu beschikbaar als bèta en kan worden getest. In dit .plan leggen we uit wat we van plan zijn.

In de afgelopen jaren hebben we steeds vaker de opmerking gekregen dat Tweakers er verouderd en onaantrekkelijk uitziet. Die geluiden kwamen uit verschillende hoeken: frequente bezoekers, mensen die Tweakers af en toe gebruiken en ook collega's. Zelf vinden we ook al een tijdje dat de UI van de site een opknapper kan gebruiken.

Vooral op mobiel blijft de gebruikerservaring achter en voldoen we niet aan moderne richtlijnen zoals de Web Content Accessibility Guidelines. Zowel onder hardcoregebruikers als advieszoekers is het gebruik op mobiel inmiddels sterk toegenomen, wat het extra belangrijk maakt om de mobiele gebruikservaring op orde te hebben.

Dit jaar krijgt de site daarom een opfrisbeurt. Om te beginnen hebben we onze designprincipes onder de loep genomen en opnieuw vastgesteld. Dit gaat om de volgende fundamenten die we in ons werk toepassen:

• Streef naar eenvoud: keep it simple stupid.
• Zorg voor consistentie en voorspelbaarheid.
• Voorkom cognitieve overbelasting: houd rekening met de Wet van Miller en kies voor het chunken van informatie in behapbare groepen van maximaal zeven (± twee) items tegelijk.
• Zorg voor een duidelijke visuele hiërarchie door middel van witruimte, semantisch groeperen, kleurgebruik en lettergrootte.
• Breng de Web Content Accessibility Guidelines in de praktijk zodat de site toegankelijk is voor gebruikers met beperkingen.
• Werk mobile-first bij ontwerp, implementatie en testen.
• Waarborg snelle laadtijden en de perceptie van snelheid.

Het moderniseren van de UI zal een langlopend project zijn dat in fases wordt opgeleverd. De eerste stap bestaat uit een update van de styling door het aanpassen van typografie, witruimte en uitlijning. Hiermee verbeteren we de uitstraling binnen de mogelijkheden die de bestaande lay-outs bieden. De meest in het oog springende wijziging is een aanpassing van de lettertypes en lettergrootte. Deze stap kan nu als bètafeature worden aangezet in je instellingen.

Nieuwe typografie

Bij het bepalen van de lettergroottes hebben we tot nu toe altijd veel rekening gehouden met de wensen van een groep textsavvy gebruikers: mensen die zeer effectief met een grote hoeveelheid tekst overweg kunnen. Deze keuze heeft ervoor gezorgd dat Tweakers niet meer voldoet aan de algemeen geaccepteerde richtlijnen voor goed leesbare typografie. Ook speelt mee dat de pixeldichtheid van beeldschermen met zo'n 20 procent is gestegen sinds we de huidige lettergroottes zijn gaan gebruiken. We hebben daar niet voor gecompenseerd.

De UI-update vergroot de lettergrootte van broodteksten van 13 of 14px naar 16px. We weten dat een deel van jullie veel waarde hecht aan hoge informatiedichtheid, maar het is algemeen geaccepteerd dat een grotere letter zorgt voor een betere leesbaarheid. Met de keuze voor een lettergrootte van 16px zitten we aan de ondergrens van wat empirisch onderzoek aanwijst als de optimale lettergrootte.

Een tweede verandering is dat we afstappen van het karakterloze Arial als lettertype voor broodteksten. We gebruikten Arial vanwege de goede leesbaarheid op beeldschermen met een standaard pixeldichtheid. Een grotere lettergrootte geeft de vrijheid om een lettertype te kiezen dat beter past bij de uitstraling die we als techsite willen nastreven.

Na uitvoerig testen met de crew en collega's zijn we uitgekomen bij Roboto Flex. Roboto is bekend als standaardlettertype voor de UI op Android-apparaten. De Flex-variant is ooit ontwikkeld om de mogelijkheden van variabele fontassen te demonstreren. We maken gebruik van die mogelijkheden om Roboto Flex wat wijder te maken om de uitstraling van een monospace te benaderen zonder de nadelen voor de leesbaarheid. Bij monospacelettertypes hebben alle tekens een gelijke breedte, waardoor ze automatisch wat vierkanter zijn. Deze categorie lettertypes kennen we onder andere van terminals en code-editors.

Voorjaarsopruiming

Gelijktijdig met de typografie doen we het equivalent van een voorjaarsopruiming in de lay-outs van de site. In de loop der tijd zijn er wat slordigheden in de opmaak van de pagina's ontstaan. We zetten lay-outs wat ruimer op en trekken de opmaak strak door bijvoorbeeld de uitlijning van elementen te verbeteren. Ook zijn er talloze wijzigingen gedaan om de grotere letters passend te maken.

Probeer het zelf

We rollen de nieuwe styling uit als bèta zodat we gelegenheid hebben om feedback te verwerken van onze trouwste bezoekers voordat we de styling voor iedereen inschakelen. Je kunt de nieuwe styling uitproberen door de bètafeature 'Vernieuwing UI' aan te zetten in je instellingen.

Kom je problemen tegen in de lay-out? Meld ze dan via dit Google Form. Feedback op de wijzigingen kun je achterlaten in dit forumtopic.

Vervolgstappen

Deze update van de lettertypes is een stap in een bredere vernieuwing van de uitstraling van Tweakers. Zodra deze eerste update voor het grote publiek is uitgerold, gaan we verder met het vernieuwen van de designs voor de meest bezochte pagina's, te beginnen bij de navbar en redactionele artikelen. In de vervolgstappen gaan we grotere wensen realiseren die niet mogelijk zijn met een aanpassing van de styling. Ook gaan we de algehele merkuitstraling onder de loep nemen.

Reacties (102)

[Robbierut4]

maar het is algemeen geaccepteerd dat een grotere letter zorgt voor een betere leesbaarheid

En dan vervolgens:

We gebruikten Arial vanwege de goede leesbaarheid op beeldschermen met een standaard pixeldichtheid. Een grotere lettergrootte geeft de vrijheid om een lettertype te kiezen dat beter past bij de uitstraling die we als techsite willen nastreven.

Oftewel, de site is prima leesbaar op 13px met het huidige lettertype, maar we kiezen voor een lagere informatiedichtheid omdat het er iets leuker uit ziet.

Is dat nou vooruitgang voor de bezoekers?

[Blokker_1999]

Nog meer scrollen, joepie

[Skit3000]

Er komt vast iemand met Custom css om het lettertype terug te draaien, maar wie los daarvan meer verticale ruimte wil winnen (bij de reacties op de frontpage) zou eens naar dit (mijn) snippet kunnen kijken.

[TheVivaldi]

Jouw snippet ziet er goed uit en werkt best lekker, maar ik mis wel de score (hij staat er nog wel, maar als een vaag streepje). Ook is het een beetje buggy dat de tijd maar half wordt getoond, evenals de reactieknop (plusknop).

[Reactie gewijzigd door TheVivaldi op 7 april 2026 14:11]

[Skit3000]

Scores -1, 0 en +1 hebben allemaal hun eigen kleur, +2 is iets "groener" en bij +3 wordt de hele reactie van een groene achtergrond voorzien. Het doel van het streepje ipv het cijfer was om het iets minder een afleiding te laten zijn.

Ik zie nu ook dat het eerste cijfer van de tijd wegvalt; dat zal komen door het nieuwe lettertype. De reactieknop zou wel standaard altijd rechtsonderin moeten staan?

[TheVivaldi]

De reactieknop staat ook rechtsonderin, maar op je screenshot zie ik een cirkel met plus erin, terwijl ik bij mij een miniem hoekje met + zie: https://tweakers.net/foto...UnkHz8MQL7HkAymDYDBYZ.png

[Skit3000]

Je hebt gelijk; het is een oude screenshot. Zoals jij het ziet is wat het zou moeten zijn (al hoort de plus wel kleiner te zijn).

https://snipboard.io/yqVnPt.jpg

Direct ook de weergave van de tijd aangepakt:

https://snipboard.io/hrUalQ.jpg

[Reactie gewijzigd door Skit3000 op 7 april 2026 14:57]

[Mizgala28]

Yup

Oude lay-out

Nieuwe lay-out

Normale S25, tekst formaat op allerkleinst ingesteld in de Instellingen van de telefoon zelf (zo gebruik ik het dagelijks).

Maar goed, men test het waarschijnlijk op koelkast formaat telefoons (aka de norm) dus dan valt het waarschijnlijk minder op.

Beetje hetzelfde als bepaalde websites (niet Tweakers) die niet goed in Safari of Firefox werken, omdat betreffende devs denken dat Chrome de enige browser ter wereld is...

[Reactie gewijzigd door Mizgala28 op 7 april 2026 13:59]

[Redneckerz]

Vooruitgang uit zich op verschillende manieren. Zie ook dit inmiddels gesloten topic, wat ook als vooruitgang is bestempeld. En ook hier wordt om feedback gevraagd.

Vooruitgang in deze context is de roadmap die Tweakers voor over heeft zodat ook je naaste familie de site zal bezoeken.

[Deakers]

Eerder vandaag toevallig door dit gesloten topic heen geworsteld, was het wel spuugzat om meer dan 3 extra kliks te doen om alle specificaties te bekijken.
Had dan ook meer van deze beta-ui verwacht, wat niet meer lijkt als minor css aanpassing

vooruitgang wordt in topic idd duidelijk beschreven:

Voorkom cognitieve overbelasting: houd rekening met de Wet van Miller en kies voor het chunken van informatie in behapbare groepen van maximaal zeven (± twee) items tegelijk.

oftewel:
Converteer Tweakers naar Tweakers-voor-Dummies

[GurbieV]

Of, minder elitair.

[Hans1990]

Imo niet, meer headlines die naar 2 regels springen maakt het minder duidelijk leesbaar. Ik zoom op bredere/grote schermen wel eens in, en ik zie nog meer onnodige verspringen op deze manier.

Verder ziet de tekst er "b r e e d", platgedrukt en dikgedrukt uit. Vooral boven bij "Nieuws", "Reviews", enz. vind ik het erg opgepropt en knullig er uit zien, ondanks dat de tekst veel meer ruimte in beslag neemt.

Nu lees ik het toch meeste nieuws via intranet (tbv aandacht regulatie), dus dan heb ik er weinig last van.

[Reactie gewijzigd door Hans1990 op 7 april 2026 13:10]

[swhnld]

Nee, dat is geen vooruitgang voor bezoekers die dat niet wenselijk vinden. Ja het is vooruitgang voor mensen die het wel wenselijk vinden.

Echter, er is een gulden middenweg. Geef de gebruiker vrijheid. Op mijn Windows laptop zegt Microsoft dat een 150 procent aanbevolen wordt, ik vind 100 procent fijner, stel dat in, en ben klaar.

Dus waarom zou je dat hier ook niet mogelijk maken?

[Mizgala28]

Precies dit, gewoon opties geven.

Zoals ik in mijn andere comment ook al zei, ruimte verspilling is niet eens het grootste probleem van de nieuwe lay-out.

[Kroesss]

Dat is altijd al mogelijk geweest. Je kunt namelijk gewoon custom CSS gebruiken om van alles en nog wat naar je hand te zetten. Je kunt kiezen uit stukken CSS die door anderen worden aangeboden, of zelf je eigen CSS toevoegen.

https://tweakers.net/instellingen/customcss/

[swhnld]

Leuk voor mensen die dat zelf kunnen en willen ontwikkelen (binnen wat is toegestaan want er zitten ook nog eens beperkingen aan), maar bijvoorbeeld dark mode is ook gewoon een instelling om de website eenvoudig bedienbaar te maken. Je kunt ook in de browser op 80 procent zoom gaan zitten. En met de tooling die geimplementeerd wordt om aan de WCAG richtlijn te voldoen, kun je ook het mogelijk maken de lettergrote te beinvloeden zodat de website ook bij slecht zienden toegankelijk wordt.

Als je het goed regelt, en zegt de standaard is 16 maar je kunt de lettergrote zelf op 13 terugzetten als je dat fijn vind, is iedereen blij. Nu krijg je een chagrijnige community, en dat gaat goed tot het in een keer fout gaat, en dan is je community snel weg en blijft er een schim over van wat je had. Dat moderators discussies dicht gooien omdat het een lange klacht wordt zegt iets over waar het heen gaat, en over hoe er geluisterd wordt.

[RadYeon]

In de afgelopen jaren hebben we steeds vaker de opmerking gekregen dat Tweakers er verouderd en onaantrekkelijk uitziet.

Dat vind ik juist een groot pluspunt van T.net, lekker simpel en het "werkt gewoon".

[xoniq]

Ja ik kreeg automatisch de nieuwe beta, en twijfelde even na het openen of mijn browser iets ingezoomed stond dus ik sta CMD + 0 te spammen. Vind het persoonlijk niet heel prettig ogen.

[RichardG]

Ja, dat dus...
Ik dacht ook al dat ik ineens ingezoomd had.

[The Third Man]

Hier nog een.

[TheVivaldi]

Ik zie het verschil niet qua tekstgrootte. Wellicht dat het daarom bèta is, omdat het bij iedereen anders tot uiting komt.

[Gr4mpyC3t]

Grappig dat ik het dus precies andersom ervaar. Ik vind de oude layout altijd te klein en bekeek het standaard op 120% zoom of zo. Nu staat het weer op 100% omdat de 16px tekstgrootte dit gecompenseerd heeft.

[JerX]

Ik niet. Vind de beta en zijn lettetype veel fijner. Bij Tweakers gebruik ik dan ook vaak de Lees functie binnen een browser voor meer rust. Daarnaast vind ik de Tweakers homepage veelste druk en het menu een rommeltje.

Waarom zit er in de onder banner zoveel meuk? Icoontjes van een paar pixels is prima. De overige items kunnen vast kwijt in het menu.

De pricewatch heeft ook wat werk nodig, vanuit een leek een categorie selecteren is vragen om problemen. Die zoeken gewoon een tv of soundbar zonder dat ze eerst op een categorie moeten klikken, laat staan de infinite scroll aan filter opties (b.v. bij veel merken) een zoek optie hierin zou helpen. Of ga mee met de AI hype en laat een robotje helpen met het zoeken van spul door wat vragen te stellen.

Waarom staan er ook continue die IT-banen onder nieuwsitems?

Mijn lijst gaat nog wel door.

Ben benieuwd hoeveel Tweakers er doorheen kan pushen en de harde kern kan behouden, want zij lijken hier de scepter in hadden te hebben en niet Tweakers zelf lol.

[Reactie gewijzigd door JerX op 7 april 2026 14:18]

[ShadLink]

Grotere letters beteken automatisch meer witruimte en meer scrollen. Ook het lettertype zelf vind ik een stuk minder leesbaar dan standaard Arial. En waarom is er voor het Android lettertype gekozen?

[SXForce]

Zojuist de Beta feature aangezet en ben het met je eens. Mijn ogen vinden dit niet zo leuk, het lijkt wel alsof de tekst "blurry" is en word er een beetje misselijk van (letterlijk, niet figuurlijk). Zoom level naar 90% zetten verhelpt dit probleem op de 1 of andere manier wel, maar dat lijkt mij niet de bedoeling. Snel weer terug gezet.

edit:
Desktop, Brave browser

[Reactie gewijzigd door SXForce op 7 april 2026 13:14]

[ShadLink]

Inderdaad. Ik had het al eens eerder aangegeven (bij de pricewatch update) van maak een specifieke CSS voor Tweakers op mobiel en een specifieke CSS voor Tweakers op een computer. Natuurlijk is het extra werk, maar je bespaart je een hoop boze gebruikers die nog steeds graag op een computer werken.

[TERW_DAN]

Grotere letters beteken automatisch meer witruimte en meer scrollen. Ook het lettertype zelf vind ik een stuk minder leesbaar dan standaard Arial. En waarom is er voor het Android lettertype gekozen?

Ik was ook benieuwd hoe het eruit zou zien met het nieuwe lettertype. Maar het is echt een bak ellende. Arial ziet er tenminste fatsoenlijk uit, en is iedere letter even breed als de andere. Dit is weer zo'n lettertype dat kunstmatig dikker en dunner wordt, zodat het er nog een beetje uitziet als je anti-aliasing aan hebt staan. Als je dat uit hebt staan, dan is het echt vrijwel onleesbaar.

Het is zo jammer dat je tegenwoordig op bijna iedere plek custom fonts moet gebruiken om het leesbaar te houden.

[Reactie gewijzigd door TERW_DAN op 7 april 2026 13:28]

[Femme]

Roboto Flex is ontwikkeld als experimentele variant van Roboto met veel variabele assen waarmee de weergave is te customizen. Op een Android device wordt volgens mij gewoon de normale Roboto gebruikt.

We hebben veel verschillende lettertype uitgeprobeerd en zijn bij Roboto Flex uitgekomen. Het lettertype moet in de eerste plaats functioneel zijn (goed leesbaar, geschikt voor zowel teksten als listings en filters met specs in de Pricewatch). Roboto Flex kunnen we dankzij de variabele asses wat breder maken zodat het beetje techie monospace vibes heeft zonder de nadelen ervan.

[ShadLink]

Alleen heb ik helaas veel meer moeite om het te lezen. Wat me ook op verschillende Android telefoons is opgevallen, waar ik vrijwel altijd het lettertype aan heb moeten passen. Op mijn iPhone heb ik hier nooit last van gehad, gezien Apple een fijner lettertype heeft (San Fransisco (SF))

Sterker nog als je op de Typgrafie guidelines van Apple kijkt zie je dat ze een 13px font adviseren voor Macs en een 17px font voor iPhones/iPads/Watches. Hier kom je dus redelijk dicht bij een 14px voor computer en 16px voor mobiel.

[Reactie gewijzigd door ShadLink op 7 april 2026 14:11]

[TheVivaldi]

Ik vind Roboto Flex niet fijn, maar om nu te zeggen dat ik SF prettiger vind, nou nee. Ik heb grote moeite met SF lezen op mijn iPhone, en los van de algemene leesbaarheid haat ik ook lettertypen die geen onderscheid maken tussen een kleine letter l en hoofdletter I, zoals SF.

[ShadLink]

Persoonlijke mening, in mijn geval. Ik vind SF fijner dan Roboto Flex. Roboto doet mij denken aan Comic Sans, leesbaarheid is echt gewoon een stuk lager (voor mij).

[Arjan90]

Aangezet en het lettertype is mij veel te groot op een S26 Ultra. Op de computer zal het wel loslopen, maar op de mobiel vind ik het helemaal niets. Het lettertype is wel mooier, maar mi behoeft dit meer mogelijkheden voor gebruikers om het naar wens in te stellen, zodat je de standaard wellicht wel groter maakt, maar iemand ook voor 95%/90% kan kiezen bijvoorbeeld.

[Gismo1979]

Ik vind het lettertype en grootte op mijn S24U wel mee vallen. Mag wel kleiner.

Op de desktop heb ik geen leesbril meer nodig. Lettertype is prima, maar de grootte

[Stijnvi]

Hetzelfde hier. Op PC (1440p UW) ben ik er heel blij mee, want het oude formaat was echt te klein voor mij. Maar na jouw comment te hebben gelezen heb ik even mijn telefoon erbij gepakt (S24 Ultra), en daar is het inderdaad echt veel te groot. En dan heeft de Ultra ook nog een hoge pixeldichtheid van ~500 PPI. Ik wil niet weten hoe dit eruit ziet op een reguliere S26 o.i.d. met 400 PPI.

[Mizgala28]

Aangezet op mijn S25 en het maakt lezen van artikelen voor mij meer vermoeiend voor de ogen dan de normale lay-out, om maar over te zwijgen hoe groot alles is en dat terwijl de lettergrootte op mijn S25 ingesteld is op het allerkleinst.

Oude lay-out

Nieuwe lay-out

Qua desktop, formaat is prima (1440p 27", 100% schaal in Windows) maar de lettertype zelf zorgt ervoor dat mijn ogen vrij snel beginnen te tranen, het leest heel ongemakkelijk en vermoeiend.

En dat ligt niet aan hoe groot de tekst is, als ik met de oude lay-out inzoom leest het prima.

_{inzoomen in de oude lay-out was puur een test, ik lees op 100% omdat ik dat fijner vindt}

[Reactie gewijzigd door Mizgala28 op 7 april 2026 13:56]

[Pompi]

Wordt het hardcoded 16px of wordt het 1 rem en aangezien dat zo goed als altijd gelijk is aan 16px noemen jullie het nu voor gemak in deze .Plan 16px? Want is mijn inziens handiger als je de site toch aan het vernieuwen bent je naar responsive/accessible design om dan te gaan voor iets als rem en niet px.

[Reactie gewijzigd door Pompi op 7 april 2026 12:49]

[crisp]

--font-size-medium: 1rem;

[Pompi]

Top, dan kunnen mensen die het te groot vinden het enigszins gemakkelijk aanpassen. En bedankt voor het snelle antwoord.

[Femme]

Fontgroottes worden via css variabelen gedefinieerd en zijn eenvoudig aan te passen met een stukje custom css.

[Pompi]

In eerste instantie had ik wat @Dirk realiseerde in gedachte en dat je het gewoon in browser kon aanpassen. Maar daarna inderdaad dat je het ook via custom css kan doen zodat het alleen op Tweakers veranderd. En bijvoorbeeld

html{
font-size: 14px;
}

is eenvoudig te doen.

[Dirk]

Leuk, door dit antwoord realiseer ik me opeens dat ik de grootte van het lettertype op Tweakers, maar op andere sites zoals nos.nl, kan aanpassen door gewoon de standaard grootte in de instellingen van Firefox aan te passen.

Er is dus effectief niet gekozen voor 16 px, er is gekozen om de standaardinstelling van de browser te volgen, die standaard op 16 px staat.

[Blokker_1999]

Hier ook, nooit geweten, snel maar even aangepast naar wat kleiners. Alleen spijtig dat ik dat op een aantal browsers zal moeten doen.

[[Roland]]

Grappig, ik meld me aan en begin me gelijk te irriteren aan het hele grote lettertype, blijk ik Tweakers op 125% te lezen (desktop op werk). Op 100% gezet en letter zijn weer net zo groot als ik gewend ben.

Oftewel, lettertype vergroten is w.m.b. een correcte keus :-)

[Duval]

Ik had exact dezelfde ervaring, was al vergeten dat ik standaard tweakers op 125% zette wanneer ik met een nieuw apparaat de website bezocht om de tekst aangenamer leesbaar te maken.

[xFeverr]

Ik ben wel blij dat de letters iets groter staan, het was voor mij wel een tikje te klein steeds. Alhoewel me dat dus nu pas echt opvalt, nu het groter en duidelijker is.

Maar dat Roboto Flex is 'm nog niet helemaal als je het mij vraagt. Maar goed, daar is het een beta voor.

[Luminair]

Mee eens. Ik heb zelf net even gespeeld met `font-variation-settings: "wdth" 90;` en die leek mij een stuk fijner dan de 101 waar die op stond. Echt veel te wijd.

In de menu balk lijkt het alsof een ander lettertype wordt gebruikt: "Tweakerubik".

[gpon]

Op de telefoon heb ik liever smallere fonts.

[NEK]

16px is best groot. Vind 14px (zoals de huidige) fijner lezen. Ziet er scherper uit.

[YdieresiS]

Ik dacht al wat ziet het forum er anders uit, maar nu snap ik waar dat vandaan komt. Even proberen en kijken of ik het een verbetering vindt of niet, voor nu moet ik er heel hard aan wennen in elk geval.