Filters groeperen - Development-iteratie #142

Onze developers hebben dinsdag iteratie #142 opgeleverd. In deze sprint hebben we gewerkt aan verbeteringen van de filters en een nieuwe look van de aboshop.

Groeperen filters

Om filters sneller vindbaar te maken, hebben we ervoor gezorgd dat gelijksoortige filters vanaf nu worden gegroepeerd. Filters die bijvoorbeeld gerelateerd zijn aan het beeldscherm van een smartphone, vind je nu onder het kopje Beeldscherm. De groepering gebruiken we al langer op het kenmerkentabblad van producten. Aan de weergave van de meest gebruikte filters in een categorie is niets veranderd; deze worden nog steeds opengeklapt weergegeven.

Positie filter- en sorteerknoppen op mobiel

In de afgelopen maanden hebben we diverse posities en verschillende stylings geprobeerd voor de filter- en sorteerknoppen in de mobiele weergave. Uit tests bleek dat onze bezoekers lichtblauwe knoppen bovenaan de listing het meest gebruikten. De knoppen zijn daarom nu weer verplaatst van een fixed positie onder in beeld naar een plek bovenaan de resultaten.

Nieuwe lay-out aboshop

We hebben de portal van de aboshop een nieuwe lay-out gegeven, die vergelijkbaar is met die van acties en evenementen. In de aboshop vind je nu betere informatie over de voordelen van een Hero- en Elite-abonnement. De wijziging heeft er ook voor gezorgd dat de inhoud van de pagina nu via ons cms te beheren is, zodat het makkelijker is om actuele aanbiedingen voor onze abonnees toe te voegen.

Symfony-service-mock

Onze developers werken aan het voorbereiden van de upgrade van Symfony 3.4 naar 4.1. Symfony is het php-framework waarop het grootste deel van Tweakers is gebouwd. Bij dat voorbereiden liepen we tegen het probleem aan dat het vervangen van een service in Symfony 4 niet meer mogelijk is zodra deze service is geïnitialiseerd. Dit bleek een obstakel bij het uitvoeren van unittests die, om code te testen, soms gebruikmaken van zogeheten mock services die tijdelijk in de servicecontainer werden geïnjecteerd. Dit zijn imitatieservices die het gedrag van de originele service op een gecontroleerde manier simuleren. Op die manier is het bijvoorbeeld mogelijk om een service te testen die normaal gesproken toegang nodig heeft tot een database zonder bij het testen die database te moeten aanspreken.

Om het probleem op te lossen, hebben we een proxylaag gebouwd die het mogelijk maakt om services alsnog in runtime te vervangen door gesimuleerde objecten. De code van symfony-service-mock is open source en beschikbaar via Packagist.

En verder hebben we…

• de invoer van productinformatie in de categorieën powerbanks en externe hdd-/ssd-behuizingen geautomatiseerd;
• het in de mobiele weergave van de filters duidelijker gemaakt dat de 'toon resultaten'-knop geen resultaten oplevert als de gebruiker een filterset heeft samengesteld die geen matches heeft;
• het specificatietype 'geheugengrootte' hernoemd naar 'werkgeheugen' voor een duidelijk onderscheid tussen werk- en opslaggeheugen.

Reacties (45)

Upgrade Symfony 3.4 naar 4 ;D oh goodie... heerlijke hoeveelheid penswerk gaat daarin zitten. Wel eindelijk van die bundles af >_>

Upgrade van 3.4 naar 4.x is vrij simpel. Je ook nog steeds prima met bundels werken (al zou ik niet weten waarom), maar je kon deze al verwijderen in 3.4.

Overigens is het geen unit-test meer als je de container initialiseerd. Ik vind het pakketje vrij questionable, aangezien je ook gewoon een test config kan inladen waar deze mocks/stubs in gedefineerd staan.

In fact, het enige wat je zou moeten vervangen is je persistence layer.

Bij onze applicatie veranderde vrijwel alles.. hele structuur ging om, en bijna alles kreeg wel een rename. Niet complex, wel veel werk.

Daarna alles zien te rebasen terwijl de dagelijkse werkzaamheden doorgingen.. nee, zou het niet eenvoudig willen noemen

Upgrade van 3.4 naar 4.x is in mijn ogen niet zo simpel, o.a. de complete directory structuur moet (iig volgens de upgrade-lijst) anders. En dat je bundels al kon verwijderen zegt natuurlijk niet dat dat dan geen onderdeel van de upgrade-procedure is dan.

Verder hebben we het niet over e.o.a. mini-websiteje dat heel recent perfect volgens de Symfony-richtlijnen was opgezet. Maar die ruim voordat Symfony (bij ons) bekend was al was begonnen en langzaamaan gemigreerd is naar Symfony. Daardoor zijn allerlei constructies die ondertussen niet meer 'best practice' zijn natuurlijk wel gewoon in gebruik genomen, maar dat wordt bij de diverse major upgrades dan steeds verwijderd en levert daarmee soms grotere wijzigingen op dan je uit de one-liners van de upgrade-documentatie zou verwachten.

Verder hadden we nou eenmaal "legacy code" en daar weer unit tests van. Soms was dan de meest praktische weg naar een werkende test (of assertion) om wat dieper in de dependency-hierarchy een service te vervangen door een mock; maar het heeft zeker onze voorkeur dat niet nodig te hebben.

Desalniettemin was deze library implementeren veel minder werk dan de betreffende tests aanpassen en het leek ons sowieso nuttig om dit te kunnen blijven doen.

Ziet er goed uit en werkt prima. Ik zie in mijn tests alleen vrij veel categorien met maar 1 filter. Die moet je dan twee keer uitklappen. Zie bijvoorbeeld bij Voedingen de categorien "Eigenschappen" en "Overige specificaties." categorie: Voedingen


Een goede naam voor een categorie vinden is ook niet altijd makkelijk. "Eigenschappen", "Overige Specificaties" en "Overige" zijn niet echt onderscheidend.

Mee eens, en als we het dan toch over de categorie Voedingen hebben:
Ik vind het dan eigenlijk ook verwarrend dat de filters Voeding certificering en Vermogen (watt) niet onder Vermogen en certificering te vinden zijn... Misschien dan beter "de meest gebruikte filters" (waar die 2 onder vallen) in een categorie Meest gebruikt stoppen die standaard uitgeklapt is, maar ook opnemen in de categorien waar ze eigenlijk thuishoren, en dan de 2 locaties koppelen zodat ze altijd tegelijk worden aangepast.

en dan de 2 locaties koppelen zodat ze altijd tegelijk worden aangepast

Dat is technisch nogal, eh, uitdagend... (lees: lastig en veel werk)

Dat is meer iets voor ons product-content team; dergelijke zaken kan je melden in Forum: Pricewatch

[Reactie gewijzigd door crisp op 23 oktober 2018 16:43]

Ziet er handig uit zo, die nieuwe inklapbare categorieën! Denk je dat er nog een knopje zou kunnen komen met "alle categorieën uitklappen / inklappen"?

Nu is het erg lastig om een criterium te vinden dat ingeklapt is. Het kan ook niet meer via control-F, zoals ik het normaliter deed.

[Reactie gewijzigd door Cerberus_tm op 23 oktober 2018 19:21]

Is het in dit geval misschien een idee om de item onder de categorie automatisch uit te klappen? Dus, als er maar één filter in een categorie zit, gelijk uitklappen. Dat zou niet zo moeilijk moeten zijn om te programmeren en scheelt net iets frustratie

Verklaard dit waarom de website toen straks een minuutje ofzo niet te bereiken was en ik naar een landingspagina werd verwezen?

Ja, hoewel dat in werkelijkheid eigenlijk meer een foute interpretatie van de loadbalancer zelf was. We waren iets strenger geworden met opvragen van bepaalde urls, waardoor die 404's kreeg ipv 200's op een specifieke testpagina

Maar toch zag ik 500 errors in mijn browser console?

De loadbalancer kreeg 404s terug op een testpagina. Dus dacht hij dat die server stuk was. En dat alle servers stuk waren. Dus gaf hij een 500 error

Ah, dat verklaart een hoop

Wat voor landingspagina was dit?

Dat was deze foutpagina (in mijn geval tenminste).

Deze was het inderdaad, maar was na een paar refreshes weg

Ja

Persoonlijk ondervind ik nog wat "probleempjes" op (LG G4 marshmallow) smartphone en hopelijk kan dit gebruikersvriendelijk gemaakt worden.

Ik kan geen foto's direct aanklikken bij een getoonde artikel in Pricewatch. Ik moet eerst op gewenste artikel klikken dan naar kenmerken en vervolgens helemaal naar onderen scrollen om een foto te vergroten voor een impressie.
Het zou een optie kunnen zijn om de foto's helemaal bovenaan te plaatsen en klikbaar te maken, dan hoef je niet naar beneden te scrollen.
Het beste zou zijn als je op een (kleine) afbeelding klikt dat deze gelijk de foto toont. Druk je op de tekst dan krijg je kenmerken van het product.
Ik heb dit "probleem" een tijd terug aangekaart maar helaas is hier geen respons op gekomen.

Ander probleem die ik laatst ondervond was:

Ik zocht een behuizing met maximale breedte van 17cm dus van links naar rechts opgemeten en maximale hoogte van onder naar boven gemeten a 27cm. Ik kwam tot de ontdekking dat dit geen goede resultaten gaf. Vaak werd bij het filteren hoogte/diepte en breedte door elkaar gehaald. Zodoende moest je alsnog manueel alle pc behuizingen nalopen in Pricewatch. Zou dit verbeterd kunnen worden?

[Reactie gewijzigd door aliberto op 23 oktober 2018 15:46]

Inmiddels staan de afbeeldingen bovenaan op de kenmerken-tab

Het is een begin maar nog steeds onhandig naar mijn mening

Nog steeds wanneer je een foto ziet tussen alle getoonde artikelen zou het fijn zijn als deze direct aanklikbaar is. Dus niet dat je eerst foto aanklikt en bij bijvoorbeeld telefoons op Abonnementen terechtkomt en dan dat je op Kenmerken moet klikken waarop je vervolgens de foto moet aanklikken om deze beter te kunnen bezichtigen.

Het zou makkelijker moeten kunnen.
In overzicht van artikelen klik op artikelplaatje en deze wordt vergroot. Wil je meer info klik je op de naam van gewenste artikel.

Dat is vast makkelijker als je het plaatje groter wilt bekijken. Maar als je meer informatie over het product wilt (zoals de prijzen of kenmerken), dan is het natuurlijk juist vervelend dat je niet - zoals ook wel gebruikelijk op het web - op zowel het plaatje als de titel kan klikken om bij de betreffende informatie te komen

En die laatste use case hebben we hier verwerkt, maar is uiteraard niet te combineren met de eerste.

Ik denk dat het probleem met hoogte-breedte-diepte niet het systeem is, maar de invoer? Blijkbaar staan de maten gewoon niet goed ingevoerd in de database. Maar ik zie niet hoe dat automatisch gecorrigeerd zou kunnen worden? Bij videokaarten zie ik het ook wel eens. Ik pas het handmatig aan wanneer ik het tegenkom bij mijn zoekopdrachten ("productinformatie verbeteren", of hoe het ook heet op klikken).

Is er ook bekend wanneer de nieuwe visualisatie van de filters ook wordt doorgetrokken naar de forum-search?

In hoeverre is dat in jouw belevening niet nu al gebeurt?

Alle styling is namelijk generiek voor alle filters; alleen de groepeerfunctionaliteit is exclusief voor de productspecificaties.

Als ik bij het forum iets zoek zie ik de oude filters die niet fullscreen zijn.

[Reactie gewijzigd door AW_Bos op 23 oktober 2018 16:23]

Helaas verduidelijk je met dat antwoord mijn vraag niet

Volgens mij zijn de enige elementen die uberhaupt hadden kunnen veranderen de filters met meerdere keuzes. En die krijgen gewoon dezelfde stijl voor de of/en-selectors en dezelfde groene achtergrond bij de chechboxes eronder.

Ik heb echter geen idee wat jij verwacht en nu niet terugziet.

Visueel ziet de filter van de pricewatch er anders uit dan het forum. Op de pricewatch zie ik de nieuwe styling voor de filters die hier op mijn telefoon fullscreen opent, blauwe knoppen hebben.

Op het forum zie bij het filteren van de topics nog de oude grijze styling die niet full-screen is, grijs is en intuïtief wat lastiger werkt.

Ik bedoel dus of dit nog eens gelijk wordt getrokken.

Of zie jij dingen die ik niet zie ?

[Reactie gewijzigd door AW_Bos op 23 oktober 2018 16:36]

Ah, de mobiele variant. Dat was informatie de relevante informatie die mistte

Dat is inderdaad niet heel consistent nu, ik zal de betreffende mensen hierop wijzen.

Jep. Dat wordt de volgende iteratie zeker?

Daar heb ik een tijd geleden al een ticket voor aangemaakt die nog steeds 'pending' is...

@ACM AW_Bos doelt op het 'full focus' dat in de forum-search nog niet is geimplementeerd

[Reactie gewijzigd door crisp op 23 oktober 2018 16:40]

Ah, hopelijk is het eenvoudig te doen

Als ik Tweakblogs open dan wordt ik automatisch uitgelogt op Tweakers. Ook moet ik de cookie-policy opnieuw accepteren. Het lijkt wel alsof Tweakblogs mijn Tweakers-cookies verwijderd. Dit is gekomen na deze update.

Ik neem aan dat de korte storing van vanmiddag ook met deze update te maken had?

[Reactie gewijzigd door 3raser op 23 oktober 2018 16:09]

Weet je zeker dat je dat pas sinds deze update hebt? Er zijn een paar gebruikers die dit al maanden melden, maar waarbij het door gedrag van hun browser komt.

[Bug] Wordt steeds uitgelogd

Dit topic heeft het probleem inderdaad opgelost. Wel apart want ik leek er niet eerder last van te hebben. Bezoek Tweakblogs niet dagelijks maar automatisch uitloggen had me wel opgevallen lijkt me.

Mooie verbeteringen aan de filters. Ik vraag me wel af waarom resolutie en beelddiagonaal niet default onder beeldschermeigenschappen behoort (igv telefoons). Natuurlijk snap ik wel dat dit een grove methode is om op te filteren en de beeldscherm groep meer een detail is, maar het is wel een beeldschermeigenschap.

Daarnaast hoop ik nog dat jullie filters zo kunnen bouwen dat als in een filtergroep geen dingen meer selecteerbaar zijn, deze filteroptie ook tijdelijk verdwijnt. Dit maakt het overzicht van potentieel te filteren eigenschappen overzichtelijker (en mogelijk sneller).
Als ik bijv. Android 9 selecteer, dan hoef ik geen opties meer te zien van Apple iPhones en andersom: als ik bovenaan Apple als merk selecteer hoef ik geen Android OS meer te zien in de te filteren eigenschappen. Eigenlijk dus alles wat de waarde "0" levert bij de checkboxes kan dus weg. Valt hier nog wat mee te doen een volgende iteratie?

Het verbergen van onrelevante filteropties hebben we intern al eens uitgetest, maar dat levert heel zenuwachtig gedrag op; de filters 'stuiteren' dan op en neer door de het veranderend aantal opties en dan ben je telkens het filter waar je mee bezig was kwijt...

Daarnaast is het niet handig als je snel wat wederzijds incompatibele filters wilt wisselen: je moet dan altijd eerst het oude filter uitzetten, dan het nieuwe aanzetten (omdat het nieuwe filter immers verborgen was). Dus dat zou ik sowieso niet doen inderdaad.

Wat wel zou kunnen is onrelevante filteropties voorzien van een kleurtje of schuingedrukt maken o.i.d.? Dan kun je het wel meteen zien. Dat zou echt handig zijn.

Verder mooie verbetering!

[Reactie gewijzigd door Cerberus_tm op 23 oktober 2018 19:27]

Ik ben persoonlijk geen fan van de gegroepeerde filters. Kost extra clicks om te openen en je kan niet meer Ctrl + F gebruiken op een bepaald filter.

Ook wel eens. Eigenlijk zou er dus nog een knop moeten komen met: alle filtergroepen uitklappen/sluiten. Vergelijkbaar zoals het is bij specificaties/kenmerken op de productpagina zelf.

Nog geen alternatief voor Google Maps?

Nog een idee voor een development iteratie, ben wel bang dat dat een vrij grote iteratie is als het technisch zelfs mogelijk is want dat weet ik eerlijk gezegd zo niet.

Soms zoek je wat oudere producten op, bijvoorbeeld om te kijk wat zoiets nog waard is in nieuwstaat o.i.d. en dan kom je soms rare dingen tegen.

Zoals in dit voorbeeld kom ik een 'De laatst bekende laagste prijs was € 8.034,94 op maandag 8 mei 2017.' terwijl dit totaal onrealistisch klinkt en wat ook bevestigd wordt door de prijsontwikkelingsgrafiek.
pricewatch: HP Proliant Microserver N54L

Maar hoe zie ik nu wat de prijs ongeveer wel was? Zeker in dat voorbeeld is het erg moeilijk in te schatten, zo ergens tussen de €0 en €750.

Wat nu als je nu met je muis over de graph zou kunnen 'hoveren' en een prijs kan zien op dat specifieke punt? Hier zijn natuurlijk een hele hoop voorwaarden aan wil dit mogelijk zijn want ik weet niet eens of deze dat wel echt opgeslagen wordt, maar vanuit mijn perspectief 'it's worth a shot'....