De afgelopen sprint hebben we gewerkt aan een verbeterde productpagina in de Pricewatch waarmee je meer relevante informatie ziet in mobiele weergaven. Daarnaast zijn er weer stappen gezet met het ontwikkelen van een wysiwygeditor.
Nieuw ontwerp voor de productdetailpagina
In de Pricewatch hebben we de productdetailpagina vernieuwd, zodat je bovenaan de pagina in één oogopslag de belangrijkste informatie over het product kunt vinden. Met name op mobiele weergaven is dit een flinke verbetering. In het oude ontwerp waren in die weergave namelijk alleen de titel, uitvoeringsselector en prijsalert zichtbaar. In het nieuwe ontwerp zie je ook de afbeeldingen, belangrijkste specificaties en gebruikersreviewscore. Bovendien kun je het product direct aan je vergelijkingslijst toevoegen. Om in deze compacte mobiele weergave alles te laten passen, hebben we de banner bovenin deze pagina verplaatst naar een nieuwe positie in de pricelisting.
De vernieuwingen hebben we eerst getest in een usabilitytest met gebruikers. Vervolgens hebben we in drie a/b-testrondes het nieuwe ontwerp kwantitatief gevalideerd. Hierbij zagen we dat in het initiële ontwerp de prijzen in de mobiele weergave te laag stonden om goed gevonden te worden voor gebruikers die minder bekend waren met Tweakers. Daarom hebben we de header compacter ontworpen, zodat de pricelisting altijd zichtbaar is wanneer je op de pagina landt. De komende tijd zijn we van plan om nog verdere verbeteringen door te voeren in de pricelisting.
Update wysiwygeditor
In de vorige development-iteratie schreven we al over de keuze voor Tiptap als basis voor onze wysiwyg. Nu we voor Tiptap hebben gekozen, hebben we onderzocht hoe we hier een abstractielaag op kunnen bouwen. Deze abstractielaag moet het eenvoudiger maken om functionaliteit toe te voegen, zonder dat de developer diepgaande kennis hoeft te hebben van Tiptap.
Het doel is dat een developer dankzij deze abstractielaag eenvoudig ondersteuning kan toevoegen voor RML-tags. Door aan te geven hoe een tag er in RML uitziet en hoe deze in wysiwyg moet worden gerenderd, gaat de rest 'vanzelf'. Ook kan op deze manier een toetsenbordsnelkoppeling worden ingesteld. Deze verschijnt in de werkbalk en de developer kan ook aangeven welke markdownnotatie ondersteund moet worden. De abstractielaag maakt het mogelijk om voor een groter deel van het team aan de editor te werken, terwijl een ander deel van het team verder werkt aan basisfunctionaliteiten die wel diepgaande Tiptap- en RML-kennis vereisen.
Verder hebben we de afgelopen sprints gekeken naar interactie, bijvoorbeeld om een link in te voegen en zowel de link zelf als de linktekst aan te passen. Daarnaast is er ondersteuning gebouwd voor het feit dat RML en HTML fundamenteel anders omgaan met 'platte tekst' en hebben we een eerste blocknode toegevoegd. In onze testomgeving hebben we de wysiwyg gekoppeld aan de frontpagereacties, zodat we het geheel beter kunnen testen.
En verder
- We hebben de optie voor Veilingen in Vraag & Aanbod weggehaald. Deze feature werd erg weinig gebruikt, maar kostte ons wel tijd qua onderhoud. Zodra alle lopende veilingen zijn afgelopen, verwijderen we de code volledig. Meer hierover lees je in deze aankondiging.
- Het was al mogelijk om op je profiel een plaatje in jpeg-, gif- of png-formaat te uploaden, maar door een bug werd deze altijd omgezet naar een jpeg. Dit is nu opgelost waardoor onder andere ook animated gifs weer correct worden weergegeven.
- De Pricewatch-categorie voor hoofdtelefoons is opgesplitst in Oordopjes en Hoofdtelefoons, zodat je eenvoudiger de juiste producten kunt vinden.
- In navolging van eerdere verbeteringen op het gebied van digitale toegankelijkheid hebben we het prijsfilter in de Pricewatch voorzien van invoervelden, zodat dit filter volledig te bedienen is met toetsenbordnavigatie.
- Bij het afsluiten van het abonnement is het dankzij de vernieuwde iDEAL 2.0-flow niet meer nodig om vooraf een bank te kiezen. De bankselectie hebben we daarom verwijderd uit de check-out.
- Op een paar plekken op de site hebben we de kleur van de pijltjes aangepast zodat deze ook goed zichtbaar zijn in dark mode.
- We hebben een bug met smileys in de spoilertag opgelost. Ook de bevestigingspagina na inloggen is gerepareerd en de resultatenpagina wordt weer goed ingeladen bij het gebruik van bepaalde filters.
/i/2005930376.png?f=fpa)
/i/2005707588.png?f=fpa)
:strip_icc():strip_exif()/u/79018/crop6244312d860f5_cropped.jpg?f=community){kind=small}
/u/12436/p1_normal.png?f=community){kind=small}
/u/32637/crop677ea9d840dae_cropped.png?f=community){kind=small}
/u/308454/crop663ca7664b8bb_cropped.png?f=community){kind=small}
/u/34186/crop62e07d174532d_cropped.png?f=community){kind=small}
:strip_icc():strip_exif()/u/312772/crop63d3a8d18ee78_cropped.jpg?f=community){kind=small}
:strip_icc():strip_exif()/u/99872/crop6442df4114e7a_cropped.jpg?f=community){kind=small}
Het eerste deel op de product pagina oogt enorm rommelig en de prijs daar tonen heeft absoluut geen meerwaarde omdat de eerste shop vaak toch niet de beste is./u/155568/usericon.png?f=community){kind=small}