Door Femme Taken

UX Designer

Vernieuwing grafieken en plaatsen van reviews - Development-iteratie #253/254

28-02-2023 • 14:33

37

In de afgelopen sprints is er gewerkt aan vernieuwing van de manier waarop we grafieken tonen in redactionele reviews. Daarnaast is de vernieuwde frontpage naar productie gebracht en hebben we hierbij direct enkele bugs geplet. Ook werken we aan het makkelijker maken van het plaatsen van een gebruikersreview.

Plaatsen van een gebruikersreview

Een tijd terug hebben we onderzoek gedaan naar het makkelijker maken van het schrijven van gebruikersreviews. Via een survey en reacties op .plans hebben we toen inzichten opgehaald die zijn vertaald in een concept voor een vereenvoudigd reviewformulier in de vorm van slide-inoverlay. Dit concept is succesvol beproefd in een usabilitytest waarover we in dit .plan een terugkoppeling gaven.

Vanwege andere prioriteiten heeft het even geduurd voordat we het bouwen van het nieuwe reviewformulier konden oppakken. Inmiddels is het zover en kunnen we de eerste verbeteringen opleveren. Onderdeel van de vernieuwing is het reduceren van de complexiteit van het formulier door koppelingen met gerelateerde producten en de beoordelingen van losse criteria zoals beeld- en bouwkwaliteit te verwijderen. Beide functies werden weinig gebruikt en werden al jaren niet meer prominent weergegeven.

Verder hebben we de maximale lengte van de korte toelichting verhoogd van 50 naar 150 woorden, zodat je meer vrijheid hebt in het schrijven van reviews. Eenvoudige reviews zonder uitgebreide reviews mogen nu dus ook een stukje langer worden.

In de komende sprint gaan we verder met het ombouwen van het reviewformulier naar een slide-inoverlay. Deze verbetering zorgt dat je een review kunt schrijven op de productpagina zonder tussen verschillende pagina's heen en weer gestuurd te worden. Het nieuwe ontwerp maakt ook een betere gebruikservaring mogelijk op mobiele apparaten.

Reviewformulier

Mocht je opmerkingen en feedback over zaken rondom gebruikersreviews hebben, dan kun je terecht in dit forumtopic.

Nieuwe library voor tonen grafieken

De grafieken in artikelen en ook op andere plekken op de site zijn vernieuwd. Vanuit de redactie en het testlab was er namelijk de wens om meer data te tonen en om testdata ook op andere manieren te kunnen tonen in grafieken. Een van de dingen die we met de oude grafieken niet goed konden doen, was het tonen van meerdere lijngrafieken behorende bij hetzelfde product. Dit is handig om bijvoorbeeld verschillende datastromen naar een router in een grafiek weer te kunnen geven.

Om dit wel mogelijk te maken was een vernieuwing van zowel de achterliggende code als de gebruikte library nodig. De C3 library die we gebruikten werd al enige tijd niet meer actief onderhouden. Omdat de code achter de grafieken nog stamde uit de begintijd van ons testlab, was daar ook aardig wat tech debt ontstaan. Voor de weergave van alle grafieken op de site hebben we gekozen om over te stappen op de ECharts-library. Deze library gebruikten we al voor de weergave van de prijsgrafieken in de Pricewatch en biedt veel mogelijkheden. Hiermee is het ook makkelijker om in de toekomst de weergave van grafieken verder uit te breiden.

In de review van de Intel NUC 12 pro zie je de eerste toepassing van de nieuwe library op de grafieken.

Echarts grafiek

Verder betekent dit ook dat alle oude grafieken in eerdere reviews op basis van de C3-library vanaf nu getoond zullen worden met ECharts. Ook op andere plekken op de site waar grafieken getoond worden wordt nu ECharts toegepast.

karma grafieken
Ook de karmagrafieken worden getoond met ECharts.

Vernieuwde frontpage

Sinds kort heeft Tweakers een nieuwe smoel. De vernieuwde frontpage heeft een bredere lay-out gekregen, zodat er meer content zichtbaar is voor de bezoeker, waaronder reviews en achtergrondverhalen. In deze aankondiging kun je alles lezen over hoe we tot dit ontwerp zijn gekomen en wat we hebben gedaan met feedback. In de eerste dagen na de release hebben we nog enkele bugs geplet die door gebruikers werden gemeld. Zo waren er op enkele iOS-versies problemen met de weergave van de ankeilers, wat nu is opgelost. Daarnaast is het True-logo weer zichtbaar wanneer de tracker rechts openstaat en breekt er geen tekst meer uit de footer. Tot slot zijn de marges rondom de poll nu consistent en worden de forumthema's op alle schermbreedtes op de juiste manier weergegeven. Mocht je onverhoopt nog een bug tegenkomen, dan kun je die melden in het daarvoor bestemde forumtopic.

En verder

  • Het in- of uitsluiten van shops in de Pricewatch werkt nu ook voor virtuele specificaties, zoals de prijs per GB. De prijs hiervan wordt automatisch aangepast op basis van de ingestelde shopvoorkeuren, wat het eenvoudiger maakt om tot een juiste keus te komen.
  • Bij het beëindigen van een abonnement kunnen gebruikers aangeven waarom ze dit doen. Deze redenen zijn aangepast, zodat we beter inzicht krijgen in waarom gebruikers hun abonnement opzeggen.

Reacties (37)

Sorteer op:

Weergave:

Ik moet zeggen dat ik nog niet de grootste voorstander ben van de nieuwe front layout. Er is een hoop tegelijk aan het roepen om m'n aandacht. Het voelt voor mij een beetje als een geforceerde layout, alsof dit EN dit EN dit moet worden getoond.

Kan natuurlijk zijn dat ik er weer even aan moet wennen, maar ik heb wel het gevoel dat hier veel meer te behalen is dan er nu is. Wat minder "gevecht om aandacht". When everything is highlighted, nothing is.

Suggestie:
  • Maak een horizontaal vak met daarin de laatste 20(?) nieuws artikelen, met daarna een doorklik naar de nieuws pagina. Links een lijst met artikelen, rechts kun je dan in een grid van bijv. 2x3 die blokjes met nieuws ook tonen als een "uitgelicht"
  • Daaronder zou je een horizontaal vak kunnen plaatsen met de best-buy-guides. Ik gok dat die best waardevol zijn, die zouden dan meer aandacht kunnen krijgen. Hier zou ook het merch blokje passen
  • Daaronder een horizontaal vak met de Community mogelijkheden, eigenlijk ongeveer zoals deze nu onderaan al staat. Hier mogelijk ook weer de actieve topics? Nu staan er allemaal grote topic, maar die moeten je maar net boeien. Persoonlijk vind ik de nieuwe/active topics ook wel leuk, in die eerste 1/2/3 pagina's valt daar nog wel significant bij te dragen.
Voor de lol een snel voorbeeldje gemaakt
(en eigenlijk ook weer de verplichte vraag: Komt er ook nog een dark mode?)

[Reactie gewijzigd door Martijn.C.V op 24 juli 2024 06:18]

Men is nooit blij met die frontpage wijzigingen. Ik zelf overigens ook niet. Maar daar hebben we custom css voor. Ik zie zelf bijvoorbeeld momenteel alleen het nieuwsoverzicht en de tracker links. Al het andere is voor mij bloatware en zodoende uitgeschakeld. Daarmee is de frontpage weer clean en overzichtelijk.
dit kan je alleen doen als je abonnement hebt zeker? mijn karma punten zijn te laag om het te doen namelijk.
Ik heb geen abbo. Geen idee hoeveel karma je nodig hebt maar desnoods gebruik je een browser addon.
Ik heb geen abbo. Geen idee hoeveel karma je nodig hebt maar desnoods gebruik je een browser addon.
Welke browser addon zou je hiervoor kunnen gebruiken?

je hebt best veel karma nodig.
Voor Chrome gebruik ik: https://chrome.google.com...bmkiecgbjeifoejpgmdaleoha

Ikzelf heb genoeg karma en de interne css ingeschakeld. ;)
Ik heb gewoon met uBlock Origin die middelste kolom weggezapt. Dan is dat drukke geschreeuw van die plaatjes ten minste weg, maar dan heb je dus een saaie witte kolom midden in het scherm.
Ik gebruik de FireFox-add-on Sauron. Die maakt grote lichte opppevlakten donkerderder.

Ook handig voor nu.nl bijvoorbeeld :D (ook zo'n felle/witte ellende in de nachtelijke uren)
En anders slingeren we f.lux aan :) (windows-app die je beeld minder blauw/helder maakt, systemwide)
een puzzelen, mij nooit in verdiept, vandaar de vraag :-)
Dan wel ja. Iets meer in de community doen lost het op, of betalen natuurlijk. :+
Wie is "men" in deze opmerking? Het is al lang bekend dat dark mode zo'n beetje bovenaan de wensenlijst van de community staat. Het is een modus, dus die kan ook uit. Maar maak je geen zorgen, het komt niet. Valt geen geld mee te verdienen, dus geen prio
Met de nieuwe frontpage is juist het fundament gelegd om een thema als darkmode te ontwikkelen. Het zit dus wel degelijk in de pijplijn :) Meer daarover kun je lezen in .plan: Welkom op de nieuwe frontpage - Een nieuwe smoel voor Tweakers
Dat is meer dan ik dacht. Desondanks, het leggen van een fundament zit dan misschien wel in de pijplijn, maar zit het maken en aanbieden van de thema's dat ook echt? Dit geeft mij (als pessimist, sorry) nog niet echt de indruk dat het meer voorstelt dan een goede intentie.
op mobiel is het zo ingezoemd en vol gepropt met andere artikelen tussen de nieuws berichten dat ik het tegenwoordig nog amper bezoek via mijn mobiel. op de pc is het nog te doen maar ook hier vind ik het erg vol en onoverzichtelijk, alles aan de rechter kant lijkt op een .ad of het nou gaat om een product of nieuw bericht
Ik vind niet blij wel iets anders dan wat het nu is. Ik heb inderdaad custom CSS gebruikt om het bruikbaar te houden. Andere frontpage aanpassingen was ik soms niet blij mee, dit was gewoon vervelend.

Het kan aan mijn problemen liggen met chaotische zaken maar het zorgde er voor dat ik er eigenlijk niet meer mee overweg want het werd te frustrerend om titels te lezen.

Het is nog niet zo erg als IGN op mobiel waar ik echt niet meer kom(echt alles door elkaar) maar ik zie geen reden waarom de focus op desktops over 3 zaken verspreid moet worden, en waarom op mobiel wel de focus op 1 ding tegelijk mag liggen.

Je zou denken dat de gebruikerservaring het belangrijkste is en niet content pushen die mensen weg houd van je site.
Ik ben eigenlijk benieuwd hoe de keuze tot stand is gekomen. Waren er resultaten gedeeld? Ik heug me nog te herinneren dat we wel een stemronde hadden uit een aantal ontwerpen.
Iedere verandering is kut want het is een verandering. Dat eist gewenning. Eerst een tijdje gebruiken, dan pas evalueren. Al gebruik ik het niet want custom CSS (iig dark mode).

Toch is het wel logisch dat je op een scherm met 16:9 oid (meer horizontaal dan verticaal) meer content laat zien in de breedte. Websites worden tegenwoordig voor smartphone portrait mode gemaakt. Het is niet voor niets dat je met een verticale monitor prima kunt scrollen.

Persoonlijk los ik het op door zoveel mogelijk mijn taskbar en tabs aan de linkerkant te hebben ipv onder. Dat eerste schijnt onder Windows 11 nog steeds niet te mogen :+
Aan de andere kant, mensen hebben ook gewoon voorkeuren. Tweakers wordt steeds meer mainstream en visueler, en ik wil gewoon een opsomming titels hebben met verder niks :P

Hier hebben we al eerder discussies over gehad, en tweakers was geloof ik bang dat een compacte layout nieuwkomers afschrikt. Maar daarom hebben ze inderdaad custom CSS, dus deze gebruik ik daarvoor (voor dark mode niet overigens, daar heb ik dark reader voor).

Aan de andere kant zie je ook 'compacte' sites wel populair zijn, nog steeds heel veel mensen die bijvoorbeeld old.reddit.com gebruiken en ook hacker news (news.ycombinator.com) is echt een begrip in de tech community. En die doen helemaal niks aan ankeilen of reclame (*) of wat dan ook.

*) Behalve wat vacatures van YCombinator bedrijven

[Reactie gewijzigd door GekkePrutser op 24 juli 2024 06:18]

Klopt, en de custom CSS werkt ook alleen als je bent ingelogd. Dat is niet altijd mogelijk/wenselijk.

Dark Reader vind ik nogal een zware extensie, die gebruik ik enkel als dat niet anders kan.

Firefox op Android ondersteunt inmiddels ook Tampermonkey. Liefst zou ik zoiets willen syncen tussen devices, zoals bijvoorbeeld ff-sync.

Zelf gebruik ik deze websites (Tweakers, HN, Reddit) ook enkel middels de titels. Eigenlijk zoals een RSS reader. Die ik ook gebruik maar dan als backup (voor het geval ik een tijdje niet kan lezen).

Wat vind je trouwens fijne Reddit communities?
Ik dacht juist hetzelfde. Maar ik gebruik vooral een RSS feedreader om verschillende nieuwswebsites te volgen.
Mooi, eerder gebruikten jullie een of andere externe site en dat was heel vervelend als je thirdparty sites uitgeschakeld had ivm de privacy. Sommige artikelen waren dan alleen maar een paar regels tekst en verder geblokeerde content :')

Nu ook de video nog terughosten ipv youtube <3 Maar dat zal wel meer voeten in de aarde hebben.

[Reactie gewijzigd door GekkePrutser op 24 juli 2024 06:18]

De Tweakers-player was een verschrikkelijk gedrocht destijds. Ben juist blij dat ze naar YouTube zijn gegaan destijds.
Voor mij werkte hij prima toen hij met HTML5 ging werken. En youtube maakt het spelen binnen de pagina kapot omdat ik alles third party blokkeer vanwege de privacy. Youtube gebruik ik sowieso zelden.

Zo geef je Google ook echt een monopolie in handen trouwens. Dat is ook niet fijn want je komt bijna niet meer om youtube heen tegenwoordig.

Maargoed dat youtube niet werkt stoort me een stuk minder dan die missende grafieken, omdat ik toch vooral de geschreven content lees, als beiden worden aangeboden (zoals tweakers vrijwel altijd doet) dan zal ik het filmpje toch niet kijken. Dus ik ben heel blij dat dat van die grafieken opgelost is!

[Reactie gewijzigd door GekkePrutser op 24 juli 2024 06:18]

De grafieken zien er strak uit!
Alleen bij het karmaverloop is de mogelijkheid tot inzoomen op de grafiek nu verdwenen.
forumtopic: [bug] Profielpagina’s -> Karmaverloop: Zoomen stuk

Dit is dus bewust niet overgenomen met echarts, omdat het daar blijkbaar extra werk kost
Kan ik begrijpen. Nou moet ik zeggen dat dat zoemen op mobiel ook niet bepaal lekker werkte overigens, dus een extreem gemist is het ook niet naar mijn idee.
Dit dus. Vroeger kon je de grafiek ook vergroten en dus inzoomen. Dat kan nu allebei niet meer.
Die animatie mag er wel af.
Goed om te lezen dat de korte reviews een stukje langer zijn geworden. Met een beperking van 50 woorden moest ik altijd een afweging maken over wat ik wel en niet kon delen, terwijl er van een uitgebreide review direct veel meer verwacht werd. Ik denk dat het nu meer uitnodigt om in een beknopte vorm een ervaring met een product te delen, en daar hebben we allemaal baat bij.
Hmm, Echarts. Die heb ik zelf ook onlangs bekeken voor een project en die 's erg uitgebreid en heeft goede documentatie maar de grootte vond ik wat minder fijn. Er moest wel een alternatief bestaan dat heel wat kleiner was zodat elke client geen honderden kB's of zelfs MB's moet downloaden om gewoon een grafiek te tonen. En dat vond ik ook: Chart.js.
Ik vond het beter dat je vroeger meest actieve topics uit verschillende categoriën op de frontpage zag.
Nu is het telkens van een specifieke sectie/categorie.
het valt me nu pas op dat de content van het artikel gecentreerd weergegeven wordt, terwijl de reacties links uitgelijnd worden met aan de rechterkant een hoop whitespace :| (en dat is al met een customCSS die de 2e extra kolom verbergt)
Hopelijk is het ook mogelijk om nog altijd full screen een review te schrijven, dat zij scherm ziet mooi uit, maar ben ook bang dat je hierdoor misschien per ongeluk het scherm weg klikt.
even offtopic vraag:

wanneer wordt het mogelijk om in je favorieten advertenties te zoeken?
heb ik ook op het forum gevraagd.
Die wens is bekend. Maar daar hebben we op dit moment geen plannen voor.

Op dit item kan niet meer gereageerd worden.