Ruimte maken in de header van de productpagina – Development-iteratie #346

De afgelopen sprints hebben we gewerkt aan de productpagina. Een van die wijzigingen valt direct op, dus die lichten we hieronder toe. Daarbij leggen we uit wat je ervoor inlevert en wat er de komende tijd nog bijkomt.

De header van een productpagina is de drukste vierkante centimeter van Tweakers. Daar staan de prijs, de shop, de belangrijkste specificaties en de fotogalerij. Tot vandaag stonden daar ook drie knoppen: 'Vergelijken', 'Willen' en 'Hebben'.

Vanaf nu zitten die drie in een menu achter de drie puntjes rechtsboven. Op de vrijgekomen plek tonen we wat wij over het product weten: 'Laagste prijs', 'Getest door ons testlab', 'Best Buy' als het product in een Best Buy Guide staat, of een award zoals 'Excellent' wanneer de redactie het in een review goed genoeg bevond.

Waarom

We nemen de mobiele weergave als uitgangspunt, en daar is de ruimte simpelweg op. Met elke regel die we toevoegen, zie je één prijs minder zonder te scrollen.

Dat dwingt ons om op basis van gebruik te kiezen. Je kunt zelf zien hoeveel mensen een product op 'Willen' of 'Hebben' hebben staan: bij een handvol populaire producten zijn dat er duizenden. Bij verreweg de meeste zijn het er enkele tientallen. Dat is het totaal over de hele levensduur van de pagina. Die knoppen namen dus permanent ruimte in voor iets wat zelden gebeurt.

Daar komt bij dat we willen dat een productpagina meer voor zichzelf spreekt. Niet iedereen die hier binnenkomt, weet wat 'Willen' betekent. Voor die bezoeker zegt 'Getest door ons testlab' meer dan drie knoppen waar hij niets mee doet.

Wat je inlevert

Gebruik je 'Vergelijken', 'Willen' of 'Hebben' veel, dan kost dit je een extra klik. In het menu zie je nog steeds of een product al in je vergelijklijst staat, maar niet meer direct op de pagina.

Dat is een reële verslechtering voor wie deze knoppen intensief gebruikt. We hebben die afweging bewust gemaakt.

Vergelijken blijft bovendien werken zoals je gewend bent: in de categorielijst vink je meerdere producten aan en vergelijk je ze in één keer. We hebben meteen de EAN, sku en Tweakers ID naar dit menu verhuisd. Die stonden verstopt achter het informatie-icoontje bij de breadcrumb, een plek waar vrijwel niemand ze zoekt.

Waar we die ruimte voor nodig hebben

De labels die je nu ziet, zijn het begin, niet het doel. De komende sprints werken we aan meer manieren om in één oogopslag duidelijk te maken wat wij van een product vinden. Ook willen we tonen wat er op dit moment mee aan de hand is. Die informatie staat nu verspreid over de pagina of wordt helemaal niet getoond. Dat past alleen als er ruimte is.

Was er hier alleen een label bijgekomen, dan hadden we drie knoppen niet hoeven verplaatsen. We ruimen nu op omdat we weten wat eraan komt, en niet andersom.

De wijziging staat vanaf nu live voor iedereen.

Reacties (62)

[Marc H]

We nemen de mobiele weergave als uitgangspunt, en daar is de ruimte simpelweg op. Met elke regel die we toevoegen, zie je één prijs minder zonder te scrollen.

Stop eens met mobiel als primair kiezen en maak het echt dynamisch. Ik werk hier met een 32" 4k en een 34" WQHD scherm en wordt gek van het mierenneuken op de millimeter vanwege "Mobiel".

[klaasZ58]

mee eens, trouwens je kun toch zo zien in jullie webserver statistieken welke resoluties het meest gebruikt worden, dat zijn vast geen mobieltjes

[dsibma]

Het verkeer op T.net zal misschien wat afwijken van de gemiddelde website, maar voor de meeste sites geldt tegenwoordig dat meer dan de helft van het verkeer van mobiele gebruikers komt.

[klaasZ58]

het gaat om resoluties van de schermen, mobieltjes doet niet ter zake eigenlijk

[onok]

Ik snap het ook niet zo goed. Het is zo makkelijk om deze verandering alleen voor small screens te laten gelden. Op de desktop ziet het er echt knullig uit.

[MischaBoender]

Hoe vaker je dat doet, hoe meer de desktop versie uit de pas gaat lopen met een mobiele versie. Vind het er wel nietjes uit zien met die labels.

[mschol]

het zijn dan hoor ok andere apparaten met andere viewports en moeten dus ook apart behandeld worden. Dit is bij degelijk webdesign geen enkel probleem en wordt dan via CSS volledig afgevangen.
kan dit niet dan schort er (heel) wat aan de onderliggende website

[angelina]

Soms kun je niet alles doen, tijd is beperkt en gewenste features zijn er zat. Dan moet je keuzes maken op basis van populariteit.

[adje123]

Waar en door wie wordt de populariteit getoetst?

[Menno94]

Als beheerder van een website kan je tot zekere hoogte vrij gemakkelijk zien vanaf wat voor apparaat jouw site wordt bezocht.

Dus Tweakers heeft zelf prima inzicht vanaf welke apparaten dat het meeste gebeurt.

[adje123]

Daar reageerde ik niet op.

Er wordt gesproken over features en populariteit van de features.

Mijn vraag is, door wie of wat wordt de populariteit getoetst?

[MischaBoender]

Door Maurice de Hond Tweakers zelf natuurlijk.

[vickypollard]

Door Maurice de Hond. Wat denk je?

[adje123]

Enlighten us.
Graag met bewijs dat het zo wordt gedaan en niet “ik denk dat…..”

[Ossi]

Whooooosssshhh die vloog zo over je hoofd heen

[MarkH NL]

Ff snel wat gemaakt: Pricewatch vergelijk/willen/etc menu standaard openen (CSS snippet)

Niet getest op mobiel ofzo, en geen idee wat er nog meer kapot gaat

[Reactie gewijzigd door MarkH NL op 17 september 2026 15:01]

[atthias]

zo voel ik me er ook over

[Eagle Creek]

Dat dwingt ons om op basis van gebruik te kiezen. Je kunt zelf zien hoeveel mensen een product op 'Willen' of 'Hebben' hebben staan: bij een handvol populaire producten zijn dat er duizenden. Bij verreweg de meeste zijn het er enkele tientallen. Dat is het totaal over de hele levensduur van de pagina. Die knoppen namen dus permanent ruimte in voor iets wat zelden gebeurt.

Wordt "vergelijken" dan ook zo weinig gebruikt, @Freek1710 ? Ik zou toch verwachten dat dit een heel populaire feature is. Wat zijn jullie statistieken daarvan? En is dat geen optie die jullie meer gebruikt zouden willen zien?

[DMZ]

Vergelijken is best moeilijk te gebruiken omdat bijvoorbeeld de gegevens niet altijd uitgelijnd zijn en bij verschillende modellen, soms op echt de meest rare plekken staan.

[nzall]

Ja, dit zou eigenlijk wat meer gestandaardiseerd mogen worden. Als voorbeeld: bij moederborden kan informatie over lane sharing op 4 of soms zelfs meer plaatsen staan afhankelijk van het moederbord. Probleem is dat je dat niet zomaar gestandaardiseerd krijgt...

[Gropah]

Als ik dingen vergelijk dan is dat meestal vanuit het overzicht van producten en niet vanaf de productpagina. Misschien dat het daarom niet veel gebruikt word?

[Freek1710]

Vergelijken wordt goed gebruikt! Ik ben het ook eens met onderstaande dat vergelijken wel een opfrisbeurt kan gebruiken en ook nog echt een stuk beter kan.

Wij kijken naar de product advieszoek reis als een funnel. Dat betekend dat ik "vergelijken" een primaire functie vind als je op de product-lijst bent en je nog niet weet welk product precies de juiste is voor jou. Of als je bijvoorbeeld een BBG leest.

Maar als je dan eenmaal op een productdetailpagina (PDP) bent, dan is het niet meer een primaire functie. Op die pagina gaan we er vanuit dat je naar dat product wil kijken. Ook wetende dat er heel veel mensen rechtstreeks vanuit Google landen op onze PDP die gewoon het product willen zien waar ze op gegoogled hadden.

[segil]

Aangezien ik bijna nooit Tweakers bezoek op een mobiel, ga ik af op de screenshots bij dit artikel.

Maar als je naar de screenshots kijkt, is dat toch ontzettend rommelig en druk en onoverzichtelijk? Gewoon teveel informatie op een klein schermpje. Of ligt dat aan mij?

https://tweakers.net/i/Uz...367852.png?f=imagegallery

[Xilonz]

Er staan maar 30 (of een paar meer) knopjes/linkjes in dat screenshot. Ik zie het probleem niet

[Reactie gewijzigd door Xilonz op 17 september 2026 16:55]

[segil]

in houd wel van informatie dichtheid, maar dit is toch wel een beetje veel van het goede

[Darude1234]

Inderdaad, ik zou voor de quick win die regel "wacht je op een prijsdaling" weghalen 

Ook de winkel achter het grote prijs label bovenaan weghalen dan heb je daar ruimte om die prijs/ster/best buy labels te tonen

Haal vervolgens die slogan bij de winkel weg en je hebt zo al een heleboel verticale ruimte gewonnen.

Maar ja ik snap ook wel duizend mensen, 1000 verschillende meningen.

[Rolfie]

Weer een achteruitgang voor op de desktop. Ik moet nu veel meer handelingen doen als ik iets wil hebben, zodat ik dit op een verlanglijstje kan doen.
Ik kan ook nu niet meer in 1 opslag kijken, of dit artikel al in een lijstje van mij stond.

Waarom dit niet gewoon verschillend maken tussen mobiel en desktop, of gewoon automatisch afhankelijk van je scherm grote? Ik zit regelmatig op een 32' monitoren, en dit werkt gewoon niet. Ook niet op mijn FHD monitoren.

Ik gebruikt PW trouwens letterlijk nooit op mijn mobiel, zeker niet meer sinds de slide (waardeloos).

Ik krijg steeds meer het gevoel, dat pricewatch steeds meer achteruit in de functionaliteit.

[Aloy]

Het heet bij mij sinds ongeveer een week ook geen "Pricewatch" meer maar gewoon saai "Producten".

[Ossi]

Ja dat lijkt ook een probeersel te zijn. Maar ik kan "producten" ook niet lekker vinden bekken. Pricewatch is een begrip op Nederlands internet. Dat veranderen zou echt een grote fout zijn.

[RobinHood]

Een grote fout? Dan weet je zeker dat HQ er zich voor 200% voor inzet

De PW is sinds de grote "update" sowieso al een gedrocht, dus voor mij is het eigenlijk allemaal /care.

Zolang ze maar van GoT afblijven.

[Rabb]

Huh, dat is wel een rare keuze. Tweakers verkoopt zelf toch niets?

Misschien willen ze meer nadruk leggen op de specs, maar uiteindelijk is het gewoon een prijsvergelijker.

Hoewel dat ook verminderd natuurlijk wanneer je zulke knoppen gaat verbergen.

[Brummetje]

Op Desktop heb ik nu heel veel ruimte boven en onder de prijs. Is dat de bedoeling want als er ruimte bespaard moet worden ziet dit er wel heel vreemd uit.

[Freek1710]

Dat klopt. Dit ziet er nu, tijdelijk, niet ideaal uit omdat we binnenkort meer dingen toevoegen/verplaatsen/vergroten. Meerdere fases.

[Brummetje]

Duidelijk!

[Xilonz]

Mijn 2 cents:

Het tab menu zou, net zoals op de andere paginas, een duidelijke actieve status moeten hebben en een scroll indicator.

De tracker valt over de tabs heen; zorgt voor onrust en verwarring; die knop hoort niet bij de tabs.

"Wacht je op een prijsdaling?" kan gewoon naast de prijs (vaak) met "Prijsalert :alert:"

Het nieuwe menu introduceert opeens een dropshadow en afgeronde hoekjes. Totaal inconsistent met andere interface elementen.

En wees eerlijk: Hebben en Willen worden nauwelijks gebruikt. 't is een leuk idee, maar het allemaal spul wat je moet onderhouden. Weg er mee.

En waarom moeten de tabs op mobiel 'open' zijn? Je scrolt opeens van de prijs naar de specificaties zonder dat je daarom vroeg en zonder dat dat visueel duidelijk word gemaakt (de tab word bijv. niet uitgelicht)

En bij het volgende kan ik helemaal geen touw aan vastknopen:
"best buy" is blijkbaar een knop naar een nieuwe pagina
"excelent" doet helemaal niks
"reviews" is opeens een popup - terwijl het ook in een tab staat?
en als je dikke vingers heb opent er een specificaties popup terwijl dat ook in een tab staat?

Alle variaties in de dropdown naast de afbeelding kan ook gewoon in een tab, dan onstaat binnen die tab ook de ruimte om de verschillen tussen de variaties duidelijk te maken.

Hoe heeft het zover kunnen vraag ik me altijd bij zoiets af? Er zitten zoveel experts op Tweakers en dan plukt en amateur (ik ben geen ux/ui'er) er al zoveel problemen uit door gewoon logisch te kijken.

[Rabb]

Er zijn genoeg mensen die willen en hebben juist wel veel gebruiken, ik ben er een van. Die features eruit zou de meerwaarde van de Pricewatch/Producten echt sterk verminderen.

[JCQ]

"We nemen de mobiele weergave als uitgangspunt, en daar is de ruimte simpelweg op. Met elke regel die we toevoegen, zie je één prijs minder zonder te scrollen."

Alstublieft, gratis en voor niets.

• Ruimte voor ca. 6 - 7 regels met prijzen waar je er eerst krap 3 kwijt kon;
• Ruis weg (onzin onder winkelnaam verwijderd);
• Beginnen met weergave sterren, zodat alles overzichtelijk blijft wat betreft uitlijning;
• Prijs refurbished uitgelijnd met andere prijzen voor simpel vergelijk;
• Info over bezorgtijd direct naast prijs.

[Reactie gewijzigd door JCQ op 17 september 2026 17:04]

[Toppe]

Alleen die knop prijsdaling even weg, die kan nog wel links er naast

[Robru1]

Fantastisch!

[atthias]

zeer slechte ontwikkeling als primair desktop gebruiker Tweakers maakt nauwelijks gebruik van mijn scherm


kunnen we dit niet gewoon splitsen dat dit meer blijft zoals het nu is voor de desktop?


dit is overigens iets wat ik graag meer zou willen zien in het algemeen, een meer dynamische website die sich aanpast voor de desktop of mobile, want nu heb ik als desktop gebruiker "last" van dit soort onhandige zaken.


is dat een optie in de toekomst?

[DMZ]

Hebben jullie al een keer gekeken naar TVTropes en hoe zij zowel de mobiele gebruiker, als de Desktop gebruiker, prima van dienst zijn door een 'wide load' optie?

Er is een enorme focus op mobiel, maar TVTropes heeft ook maar een team van 3 mensen die de website op het gebied van presentatie onderhoudt. Het is hen gelukt om beide doelgroepen te dienen.