Aanleiding
De vernieuwde site die Tweakers vandaag heeft gepresenteerd, is de grootste verandering in de geschiedenis van deze site en de eerste grote verbouwing sinds 2007. Tweakers 7 is het zesde redesign na eerdere redesigns in 2008, 2007, 2002 en 1999 (tweemaal). Tijdens het tweejarige ontwikkeltraject werd de bezetting van het technology-team verdubbeld om voldoende ontwikkelcapaciteit in huis te halen. Er werden vele gigabytes aan ontwerpen en honderden pagina's documentatie geproduceerd en meer dan 260.000 regels php- en java-code ge- en herschreven. In dit artikel geven we je een blik achter de schermen en een rondleiding langs de nieuwe features.
Aanleiding
Sinds de introductie van Tweakers.net NG in juni 2007 heeft Tweakers een succesvolle transitie doorgemaakt van een pure hardwaresite naar een breder georiënteerde techsite die niet louter is gefocust op computers en IT, maar ook plaats biedt aan informatie over games, smartphones, tablets en andere hightech-consumentenelektronica.
De vrees dat de hardcore-tweaker moeite heeft met deze verbreding, bleek ongegrond. De tweakers die sleutelen aan pc’s, servers en htpc’s blijken dezelfde personen die vooraan staan om de nieuwste smartphones en televisies uit te proberen. Gamen deden ze al die tijd al. In de afgelopen jaren hebben we gezien dat de belangstelling voor het tweaken van pc’s is afgenomen en zich heeft verplaatst naar smartphones en tablets. De gemiddelde pc is inmiddels snel genoeg voor de taak waarvoor hij gebruikt wordt, terwijl de vernieuwingen in jonge productcategorieën, zoals smartphones en tablets, veel sneller gaan.
Naast verbreding van de inhoud is Tweakers in de afgelopen jaren de diepte ingegaan door gaandeweg betere productinformatie in de Pricewatch aan te bieden en betere relaties tussen onderwerpen en content aan te brengen. De site is in al die jaren min of meer organisch gegroeid. Veel verbeteringen werden ad hoc toegevoegd. Het resultaat laat zich enigzins vergelijken met een kasteel waar om de paar jaar een torentje wordt aangebouwd. Hoewel dat een romantisch buitenaanzicht kan opleveren, is het vanuit logistiek oogpunt minder geslaagd en het werd tijd om eens wat dingen te slopen en opnieuw op te bouwen.

Dat was ook het uitgangspunt voor het Tweakers 7-project. De oude site werd gekenmerkt door een gebrek aan uniformiteit in vormgeving en interactie. De navigatie was gecompliceerd en de pagina-opmaak had, vooral door de drukke tracker, een gebrek aan focus op de content. Verder was er veel redundantie en een gebrek aan samenhang in de informatiestructuur. Productinformatie kwam onvoldoende tot zijn recht, en dat terwijl producten de spil zijn van de content die de redactie en onze bezoekers produceren.
Een voorbeeld van het gebrek aan samenhang was het onderwerp laptops. Op de oude site stonden de redactionele categorieën los van de productcategorieën in de Pricewatch en de forumcategorieën op GoT. Naast deze categorieën bestonden er tags waarmee nonchalant werd omgesprongen, met als gevolg dat hetzelfde onderwerp geregeld als categorie én als tag bestond.
Zo was er een redactionele categorie notebooks, een productcategorie laptops, een tag laptop en een forumcategorie Complete Systemen & Laptops. Op de pagina over de redactionele categorie notebooks vond je nieuwsberichten en reviews, op het forum vond je topics en in de productcategorie kon je nieuwe en gebruikte producten vinden op gescheiden pagina's in de Pricewatch en Vraag & Aanbod. De tagpagina deed dat nog eens losjes over door nieuwsberichten, reviews en indirect gerelateerde producten met de tag 'laptop' weer te geven. Er ontbrak echter een centrale pagina waarop je álles over laptops kon vinden.
/i/1350419871.png?f=thumbsmall)
Op het gebied van functionaliteit liet de samenhang soms ook te wensen over. De oorsprong van de forumsoftware, die door een derde partij was ontwikkeld, was nog goed te merken aan de gebrekkige integratie van de gebruikersprofielen en het forum, en aan het feit dat direct messages waren ondergebracht in het forum in plaats van op een centrale locatie in de navigatie of het profiel.
De belangrijkste pijlers van het Tweakers 7-project werden zodoende het ontwerpen van een nieuwe lay-out waarin eenvoud, consistentie en samenhang centraal staan, het opzetten van een nieuwe taxonomie en het ontwerpen van een onderwerpomgeving waarin de informatie over de onderwerpen in de taxonomie wordt ontsloten.
Om een goed beeld te krijgen van de manier waarop bezoekers de site gebruiken, werd in het voorjaar van 2011 een uitgebreid klikonderzoek gedaan en vond een enquête plaats waarop 12.500 gebruikers reageerden. Het klikonderzoek bestond uit het vastleggen van de coördinaten van de muiskliks en van de elementen van pagina's waarop werd geklikt. Deze gegevens werden gebruikt om heatmaps van de pagina’s te genereren.
Er vond ook een inventarisatie plaats van de wensen van andere betrokken partijen, waaronder de redactie, het Pricewatch-contentteam en de crewleden. Uit alle verzamelde informatie werden requirements gedestilleerd die het uitgangspunt vormden voor het ontwerp.

Ontwerp
De ontwerpfase ging van start in augustus 2011. Toen was er al geëxperimenteerd met prototypes in Axure en Photoshop, zodat het ontwerp van het framework snel van de grond kwam. Met een minimaal gebruik van stijlelementen werd een nieuwe, maar duidelijk herkenbare interpretatie gegeven aan de bekende huisstijl van Tweakers. De vaste elementen in de lay-out werden in een aantal revisies tot de essentie gereduceerd. Zo verdwenen onder andere de channels uit de hoofdnavigatie, omdat ze onvoldoende toegevoegde waarde voor de gebruikers bleken te hebben. De zoekmachine kreeg een prominentere positie in de header.
Het hiërarchische navigatiemenu waarin elke bestemming op de site vanaf elke pagina direct toegankelijk was, maakte plaats voor een eenvoudig, plat navigatiesysteem. Hierin zijn de kernbestemmingen Nieuws, Reviews, Video, Pricewatch, Vraag & Aanbod en Forum direct toegankelijk. Een aantal minder belangrijke bestemmingen is ondergebracht in een uitklapmenu.
Uit het klikonderzoek bleek dat er nauwelijks gebruik werd gemaakt van de dieper gelegen links in het oude menu. Ook zat er wat redundantie in het menu en leidde de hiërarchie tot problemen met de naamgeving van de tabs. Zo was 'Archieven' geen aantrekkelijke naam en was Vraag & Aanbod weggestopt onder Pricewatch. In het nieuwe, platte menu zijn Nieuws, Reviews, Video's en Vraag & Aanbod direct zichtbaar. Een bijkomend voordeel van een plat menu is de betere bedienbaarheid op touchdevices.

Toen het vorige redesign van Tweakers in 2007 het levenslicht zag, waren smartphones met snelle internettoegang en met browsers die websites net zo goed konden weergeven als een desktop-pc, nog geen gemeengoed. We gingen er toen nog vanuit dat beeldschermen alleen maar groter zouden worden. Daarom werd de keuze gemaakt om de lay-out breder te maken dan het gebruikelijke maximum van 1000 pixels, zodat er in de Pricewatch een filterkolom naast de productlijsten weergegeven kon worden en er tegelijk ruimte was voor de tracker. Inmiddels zijn we vijf jaar verder en is de variatie in beeldschermformaten door de opkomst van smartphones en tablets alleen maar toegenomen. De resoluties van desktop- en laptopbeeldschermen zijn hoger geworden, maar tegelijk ging ook de pixeldichtheid omhoog, waardoor grotere lettertypes wenselijk zijn.
Tweakers 7 heeft nog geen responsive design, maar is wel beter geschikt voor de hedendaagse beeldschermen. De informatiedichtheid is lager door het gebruik van grotere lettertypes en meer witruimte, en omdat de tracker geen vast onderdeel van de lay-out meer is. De tracker kan voortaan op afroep worden weergegeven via een icoon in het gebruikersmenu rechtsboven aan de pagina. Op hoge-resolutiebeeldschermen kan de tracker desgewenst permanent links of rechts van de pagina weergegeven worden.
Uit het klikonderzoek werd verder duidelijk dat de bezoekers zich niet snel laten afleiden door informatie die niet is afgestemd op het doel waarmee ze de site bezoeken. Naast het verbergen van de tracker hebben we de rechterkolom op de nieuwspagina's en reviews opgeschoond, zodat de focus op de inhoud wordt gelegd, waar hij hoort.
Architectuur
Wat gold voor de organische groei van de functionaliteit van de site, was ook het geval voor de code. De oude site was nog deels volgens een procedureel model gebouwd, met functies die elkaar aanriepen. Door oude delen van de code om te zetten naar een objectgeoriënteerd model, werd het aantal publieke methodes en variabelen gereduceerd en kon de code eenvoudiger gemodulariseerd worden. Pagina's die opnieuw zijn ontwikkeld voor Tweakers 7, maken gebruik van het Symfony-framework en zijn gebouwd volgens de model-viewer-controller-structuur. Hierdoor is een betere scheiding verkregen tussen de delen van de code die verantwoordelijk zijn voor het datamodel, de datapresentatie en de applicatielogica.
De java-engine die sinds 2009 wordt gebruikt als tussenlaag tussen de database- en de php-servers voor het opvragen, filteren en sorteren van productgegevens, is uitgebreid en bevat nu gegevens voor de meeste lijsten van contentpagina's. Door het gebruik van java in plaats van php kan de engine gegevens persistent in het geheugen van de webservers vasthouden en kunnen zowel eenvoudige als complexe filters met een korte responstijd op grote hoeveelheden informatie toegepast worden. Ook geeft de engine ons een uniforme methode om informatie op te vragen.
Aan de voorkant werd de site sneller gemaakt door intensief gebruik te maken van css3-features, zoals gradients, shadows en embedded afbeeldingen. De nieuwe site gebruikt minder externe afbeeldingen, zodat het aantal http-requests van de frontpage kon afnemen van 50 naar 40. Daardoor is Tweakers 7 de lichtste en snelste versie van Tweakers ooit.
Taxonomie
In Tweakers 7 hebben we de wijze waarop onderwerpen worden ingedeeld geheel herzien. Er zijn zes verschillende soorten onderwerpen benoemd: categorieën, merken, productseries, producten, productuitvoeringen en tags. Onderwerpen die in verschillende vormen voorkwamen, bijvoorbeeld als merk en als tag, zijn samengevoegd. Tussen merken, productseries, producten en productuitvoeringen bestaan hiërarchische relaties. De nieuwe taxonomie maakt het mogelijk om de enorme hoeveelheid informatie op Tweakers beter toegankelijk te maken. Het Pricewatch-contentteam heeft in de afgelopen maanden veel werk verzet om relaties te leggen tussen producten en productuitvoeringen, en om entiteiten in het oude databasemodel te mappen op de nieuwe taxonomie. De taxonomie wordt centraal beheerd door het contentteam, zodat de kwaliteit goed bewaakt kan worden.

Features
Het project omvatte het ontwerp van het framework, de lay-out en de corefunctionaliteit van de kernbestemmingen, en de functionaliteit van de nieuwe onderwerpomgevingen, waaronder de categorie- en productpagina's in de Pricewatch. Bestaande functionaliteit werd in principe ongemoeid gelaten. Binnen dit bestek zijn we er toch in geslaagd om veel verbeteringen door te voeren.
Frontpage
Op de frontpage zijn er niet langer aparte lijsten voor de verschillende soorten artikelen, maar tonen we nieuwsberichten, reviews, video's, meukupdates en .plans in een enkel, chronologisch gesorteerd overzicht. Zo kun je sneller zien wat er nieuw op de site is en kunnen we de ruimte op de frontpage efficiënter benutten. .Plans en meukupdates, die veel minder frequent gepubliceerd worden dan nieuwsberichten, nemen nu geen kostbare ruimte meer in beslag. Om te voorkomen dat video's en software-updates de lijst domineren, worden deze automatisch gegroepeerd.
Vier grote leaders boven aan de frontpage laten zien welke artikelen je absoluut moet lezen. Via de rechterzijde van de frontpage kun je voortaan naar producten zoeken, naar de populairste categorieën navigeren en op de poll stemmen. Onder de nieuwe redactionele artikelen is er ruimte voor items uit de community. Forumtopics, productreviews en tweakblogs worden hier door elkaar getoond.

Nieuws, reviews en reacties
De pagina's met alle nieuwsberichten van een enkele dag hebben al jaren een vaste schare fans. De links naar het dagoverzicht waren echter altijd een beetje weggestopt. In Tweakers 7 is het dagoverzicht direct toegankelijk via de bestemming Nieuws in het navigatiemenu.
De rechterkolom bij nieuwsartikelen is opgeschoond. Onder het artikel vind je voortaan links naar de twee volgende en twee vorige berichten, zodat je een eventueel minder interessant artikel direct kunt overslaan.
Nieuwe moderatie-controls maken het modereren van reacties op touchdevices gebruiksvriendelijker. De relaties tussen reacties worden voortaan duidelijk gemaakt met lijnen die van de parent- naar de child-reactie verwijzen.

Op de reviewhomepage vindt je een overzicht van zowel redactionele als hoogwaardige gebruikersreviews. Ook in de zoekresultaten worden reviews van redactie en gebruikers gecombineerd.
Zoeken
Dankzij een nieuw ontwikkelde zoekmachine is het voor het eerst mogelijk om het leeuwendeel van de site te doorzoeken. Als je zoekt vanaf de frontpage, combineert de zoekmachine resultaten uit redactionele artikelen, video's en gebruikersreviews. De resultaten worden verder verfijnd door te filteren op onderwerpen. Zoek je vanuit een bestemming, bijvoorbeeld de Pricewatch of Nieuws, dan krijg je respectievelijk alleen producten of alleen nieuwsberichten terug.

De zoekmachine probeert je zoekopdracht te matchen met een onderwerp in onze database. Zoek je bijvoorbeeld op 'Galaxy S III', dan geeft de zoekmachine als eerste resultaat het product Samsung Galaxy S III. Het resultaat verwijst naar de onderwerpomgeving waarin je alle informatie vindt over de Galaxy S III.

Het forum is nog niet geïntegreerd in de nieuwe zoekmachine. Hier wordt momenteel aan gewerkt.
Onderwerpomgevingen
In Tweakers 7 heeft ieder onderwerp, of het nu een categorie, merk, serie, product of tag is, een centrale omgeving. Met deze onderwerpomgeving wordt alle informatie over het onderwerp gebundeld. Zo vind je in de omgeving over tablets alle tabletproducten, en alle nieuwsberichten, reviews, video's en Vraag & Aanbod-advertenties over tablets. De onderwerpomgevingen hebben een uniforme lay-out. De pagina over het product Samsung Galaxy S III werkt grotendeels hetzelfde als die van de categorie tablets.

Producten en uitvoeringen
De nieuwe taxonomie maakt het mogelijk om informatie beter te presenteren. In de productlijsten hebben we de optie toegevoegd om de uitvoeringen van een product te groeperen. In de categorie tablets zorgt deze functie er bijvoorbeeld voor dat alle uitvoeringen van de iPad uit het voorjaar van 2012 of de Samsung Galaxy Tab 10.1 bij elkaar worden gezet. Je kunt zo beter zien in welke varianten een product verkrijgbaar is.
In de uitvoeringentab op de productpagina's tonen we de verschillen tussen de uitvoeringen van het product en kun je de uitvoeringen filteren op eigenschappen. Bij producten met veel uitvoeringen, zoals bepaalde laptops, kom je binnen een paar kliks te weten welke variant het beste bij jou past.

De productpagina bundelt de reviews van alle uitvoeringen van het product. We kunnen je zo een eerlijker en completer beeld geven van de ervaringen met een product. Verschillen in bijvoorbeeld kleur en opslagruimte hebben vaak immers geen wezenlijke invloed op de gebruikerservaring. Via de breadcrumb onder de productnaam kun je eenvoudig van de ene naar de andere uitvoering van een product navigeren om de prijzen en reviews van een bepaalde uitvoering te bekijken.
Productvergelijkingen
Productvergelijkingen zijn niet langer beperkt tot vier producten. Met behulp van zijwaarts scrollen kun je maximaal tien productuitvoeringen naast elkaar zetten. De selectie kan worden beperkt door een productuitvoering met de blauwe kruisjes uit de vergelijking te verwijderen.

Categoriebrowser
Met de nieuwe categoriebrowser vind je vliegensvlug je weg naar een categorie. De categoriebrowser biedt directe toegang tot de populairste categorieën. Minder populaire categorieën kunnen worden teruggevonden met behulp van drill-down-navigatie, waarin je achtereenvolgens het segment, de hoofdcategorie en de subcategorie kiest. Door minder categorieën in dezelfde view te tonen is de nieuwe categoriebrowser overzichtelijker. Gewijzigde benamingen van de segmenten voorkomen dat er verwarring kan bestaan over welk soort product in een segment thuishoort. 'Core' heet voortaan Computers, 'Electronics' heet nu Beeld en geluid, en 'Mobile' krijgt de naam Tablets en telefoons.

Notificaties en berichten
In Tweakers 7 heb je direct vanuit het navigatiemenu toegang tot je persoonlijke berichten en notificaties. Zo kun je sneller communiceren met andere gebruikers en word je beter op de hoogte gehouden van gebeurtenissen, zoals reacties op een advertentie of prijsverlagingen van een product.

Tracker
Voor het eerst sinds 1999 is de tracker geen standaardonderdeel meer van de pagina's. Dat maakt de site een stuk rustiger. De tracker kan op afroep getoond worden en desgewenst op brede beeldschermen permanent links of rechts worden weergegeven. Het personaliseren van de tracker is nog gemakkelijker gemaakt.

Videoplayer
In samenwerking met StreamOne is een nieuwe videoplayer ontwikkeld, die html5 en mobiele apparaten ondersteunt. De videoplayer kan video's op een groot formaat afspelen en onthoudt de instellingen van de gebruiker.

Conclusie en bughunt
De vandaag vrijgegeven versie 7.0 van Tweakers is niet het eindpunt, maar een nieuw heel begin. Om te voorkomen dat we ten prooi vallen aan het DNF-syndroom is de reikwijdte van dit project scherp bewaakt. Tweakers 7.0 bevat het minimum aan vernieuwingen dat volgens ons voor het uitbrengen van een nieuwe versie van de site noodzakelijk is. Na de introductie zal het technologyteam volgens de scrum-methode in vervolgstappen van drie weken nieuwe versies opleveren.
Sinds er begin oktober een code freeze werd afgekondigd voor de versie die vandaag online is gegaan, hebben de devvers al weer hard aan de volgende release gewerkt. We blijven dus ontwikkelen om de site nóg beter te maken.
Dit betekent niet dat de huidige code geen foutjes of onvolkomenheden bevat. De devvers hebben hard gewerkt om zo goed mogelijk werk af te leveren en hebben elkaars werk zorgvuldig gecontroleerd, maar waar gehakt wordt vallen spaanders. Aan jullie de vraag om te helpen met het zoeken van die spaanders, zodat we problemen zo snel mogelijk boven water krijgen. De bezoeker die Tweakers de meest bizarre, ludieke of opvallende bug of fout weet te melden, wint bovendien een Google Nexus 7-tablet. Insturen kan in dit topic.
Edit: de bughunt is afgelopen. De tablet is vergeven aan de winnaar