[fp/feat] Complete restyle van reactiestructuur

[Blue-eagle]

Jullie scoren slecht op zo'n beetje alles wat jullie hebben gedaan met de reactiestructuur. Ik zal hieronder uitgebreid aangeven welke punten mogelijk verbetering nodig hebben. Edit: nuance. Veel problemen zijn al vaker aangegeven en er wordt niks mee gedaan.

Het is lastig te zien op welke diepte binnen de boomstructuur een reactie zich bevindt.

Alle reacties zijn omgeven door een 1 pixel brede border, behalve aan de rechterkant. Deze inconsistentie daargelaten (wat de site uit balans brengt): alle reacties hebben links een border op zo'n 20 pixels afstand. Behalve het 4e niveau. Hier staat de border weer helemaal links.

De laatste reactie in een boom heeft opeens helemaal geen borders meer. Het gebruik van borders is dus niet alleen in onbalans qua design, maar ook nog eens enorm onvoorspelbaar en onherkenbaar. Het lijkt in het begin heel logisch: per diepte in de boomstructuur komt er een border links bij; 1, 2, 3, en dan in plaats van 4 opeens terug naar 2 en als laatste opeens helemaal niks meer.

Ga terug naar de tekentafel, stuur mensen zonder kennis van zaken de vergaderkamer uit, laat desnoods Femme in zijn eentje het hele ding designen en implementeer iets wat qua design en logica wel lijkt op iets werkbaars.

Voor inspiratie zou ik eens kijken naar een eeuwenoude structuur zoals men op een van de populairste community-websites gebruikt: www.reddit.com.

Je bent nog steeds verplicht om alle reacties op een reactie door te scrollen, ook als je al besloten hebt deze niet interessant te vinden.

Een enorm simpel javascriptje, letterlijk 5 minuten werk voor iedere zichzelf respecterende front-end developer, zou het mogelijk maken om reacties (en de reacties daarop) op alle niveaus in te kunnen klappen. Dit scheelt heel wat muiswieltjes heel wat omwentelingen.

Voor iets wat zo'n ongelooflijke impact heeft op usability en gebruikersvriendelijkheid van de website snap ik niet dat zo'n extreem simpele feature niet al jaren in de website aanwezig is.

De styling van acties bij een post (ook op de fora) is niet onderscheidend genoeg van de user-content.

Het knopje "Reageer" is niet simpel te onderscheiden van de reactie zelf. Ten eerste hoor je zo'n knop gevoelsmatig rechts uit te lijnen om hem te breken van de context van de reactie, en ten tweede biedt hij zodanige functionaliteit dat het wel zijn eigen stijl verdient. Maak het raakvlak iets groter, geef het knopje een simpel icoontje (een driekhoekje zo groot als de iconen gebruikt voor posts op de FP), of underline het ding. Een iets opvallendere kleur zou ook niet misstaan.

De volledige breedte van het contentgedeelte wordt niet benut.

Als je relevant informatie wilt weergeven aan de rechterkant van nieuwsitems, reviews, etc., waarom laat je deze inhoud dan niet meescrollen met de gebruiker? Het is nota-bene aangemerkt als "relevant", of verwacht je dat we met ons allen weer helemaal naar boven scrollen? Op een computer niet zo lastig (home knop), maar op een tablet of smartphone toch weer een heel gedoe als je daar geen shortcuts kent.

Ter illustratie, als ik mijn browserscherm in de breedte zo klein mogelijk maak zodat er net geen horizontale scrollbar verschijnt, dan is 1/3e van mijn scherm bij de reacties gewoonweg wit. Dit is zonde van de ruimte in alle mogelijke scenario's.

Concluderend...

Deze post is ietwat snel geschreven maar ik kom nu al ruim 12 jaar op Tweakers.net en heb heel wat iteraties meegemaakt qua design. Het huidige design voelt aan alsof iemand zonder al teveel verstand van zaken een aantal beslissingen heeft geforceerd die (hopelijk) met tegenzin zijn geïmplementeerd. Het resultaat is op veel vlakken twijfelachtig te noemen, en op enkele vlakken zelfs storend.

And why should T.net care?

Ik ben front-end designer van beroep, ook al zo'n 12 jaar, en werk voor een grote internationale website die meerdere keren site van het jaar in Nederland is geweest, en internationaal ook regelmatig in de prijzen valt. Ik ben erg bekend met usability, en laat me niet beïnvloeden door boeken en zogenaamde goeroes op dit gebied, waar ik werk komen we achter de beste oplossingen door middel van wetenschappelijk onderbouwde experimenten in kleine iteraties, waar statistisch gezien de beste oplossing wordt gekozen.

Niet om hoog van de toren te blazen, want ik weet ook dat intuïtieve zaken niet altijd werken voor eindgebruikers, en ik ben enkel een spil in een grote productie, maar ik heb wel degelijk een idee waar ik het over heb: tientallen miljoenen gebruikers vertellen mij dagelijks wat ze prefereren qua design en usability.

Ik hoop van harte dat jullie niet te trots zijn om grove wijzigingen in de site aan te brengen, waar nodig, want ook gezien de vele negatieve reacties tot nu toe: het is nodig.

[Bakove]

Hmm, ik zie geen reacties hierop. Terwijl dit momenteel 1 van mijn grootste ergernissen is. Ik wilde zelf hierover gaan klagen, maar kwam toen dit topic van een paar weken terug tegen.

Ik heb geprobeerd te wennen aan het nieuwe uiterlijk van de reactiestructuur van tweakers 7, maar ik wordt er knettergek van. Het zou geen moeite moeten kosten om de berichtenstructuur te overzien. Dat moet in 1 oogopslag duidelijk zijn. Zoals het er nu uit ziet moet ik me echt goed concentreren op details om te weten waar iemand nou eigenlijk op reageert. Zo hoort dit niet.

Waar ik voorheen vaak alle reacties op artikelen doorlas, heb ik er nu na een aantal reacties genoeg van vanwege de rommelige layout en lees ik een groot deel van de reacties niet eens meer.

[MuddyMagical]

@TS: Na deze zin ben ik al uitgelezen:

Jullie scoren slecht op zo'n beetje alles wat jullie hebben gedaan met de reactiestructuur. Ik zal hieronder uitgebreid aangeven welke punten mogelijk verbetering nodig hebben.

Je manier van feedback werkt je doel juist tegen. Met je beschrijving dat je als front-end designer weet waar het over gaat degradeer je alle developers en andere leden van de T.net crew to minder capabele mensen dan jezelf.
Ik snap dat je het niet eens kan zijn met de vorm of de manier waarop de reacties zijn weergegeven, maar dit is echt niet de manier om het aan te stippen.

[Femme]

Blue-eagle schreef op donderdag 18 oktober 2012 @ 18:50:

Het is lastig te zien op welke diepte binnen de boomstructuur een reactie zich bevindt.

Alle reacties zijn omgeven door een 1 pixel brede border, behalve aan de rechterkant. Deze inconsistentie daargelaten (wat de site uit balans brengt): alle reacties hebben links een border op zo'n 20 pixels afstand. Behalve het 4e niveau. Hier staat de border weer helemaal links.

De laatste reactie in een boom heeft opeens helemaal geen borders meer. Het gebruik van borders is dus niet alleen in onbalans qua design, maar ook nog eens enorm onvoorspelbaar en onherkenbaar. Het lijkt in het begin heel logisch: per diepte in de boomstructuur komt er een border links bij; 1, 2, 3, en dan in plaats van 4 opeens terug naar 2 en als laatste opeens helemaal niks meer.

Er is in het verleden vaak gevraagd om de relatie tussen reacties beter zichtbaar te maken door lijntjes te tekenen van child- naar parentreactie. De border die jij aan de linkerkant ziet van een reactie is een lijn die van de parent naar child gaat. Als een reactie op het vierde niveau geen nakomelingen heeft zie je hier inderdaad geen lijn naast staan.

Hij is vrij lastig om duidelijk te maken waar een lijn naartoe loop als de reactie zelf niet omkadert is met een lijn. Ik doe dat liever niet bij alle reacties omdat het er nogal druk uitziet. Nu zijn alleen +2- en +3-reacties omkadert. De lijn loopt nu vanaf de horizontale lijn aan de bovenkant van de reactie naar dezelfde horizontale lijn van de childreactie.

Je bent nog steeds verplicht om alle reacties op een reactie door te scrollen, ook als je al besloten hebt deze niet interessant te vinden.

Er was geen tijd om iets dergelijks te implementeren. Het zat wel in het ontwerp van het reactiesysteem. Dat het maar vijf minuten zou kosten is natuurlijk onzin, er zit veel meer werk in, zeker bij complexe functionaliteit zoals deze reacties met zichtbare parent-childrelaties.

De styling van acties bij een post (ook op de fora) is niet onderscheidend genoeg van de user-content.

Een button voor de reactieknop zou nogal opvallen en aandacht trekken waar we liever gericht hebben op de tekst van een reactie. In het verleden hadden we subtiele iconen die voor beginnende gebruikers alleen na een beetje zoeken gevonden konden worden. De blauw linkje met de concrete tekst 'Reageer' is makkelijker te vinden. Onze blauwe linkkleur is vrij donker om voldoende contrast te creëren zodat bijvoorbeeld de headlines op de frontpage goed leesbaar zijn. Waarschijnlijk ben je er nu al lang aan gewend dat Reageer geen onderdeel is van de reactietekst.

De volledige breedte van het contentgedeelte wordt niet benut.

In de oude site konden reacties gebruikmaken van de gehele breedte van het contentgebied. Dit had als nadeel dat de reacties naar beneden werden gedrukt als de rechterkolom naast het artikel langer was dan het artikel zelf. Hierdoor ontstond er tussen het artikel en de reacties een witruimte die soms erg groot was.

We hebben er nu voor gekozen om reacties door te laten lopen in dezelfde kolom als het artikel zodat het bovenstaande probleem er niet meer is. De artikelkolom is een stuk breder geworden dan voorheen zodat er genoeg ruimte is om ingesprongen reacties weer te kunnen geven. Het zorgt er wel voor dat we de ruimte niet optimaal kunnen benutten.

Omdat we de rechterkolom naast artikelen ook hebben opgeruimd komt het niet zo vaak meer voor dat de rechterkolom langer is dan het artikel. We kunnen alsnog besluiten om het anders te doen zodat reacties breder kunnen worden maar soms pas kunnen beginnen onder een lange rechterkolom. In dit nieuwsartikel zouden de reacties ongeveer 480 pixels naar beneden worden gedrukt.

Als je relevant informatie wilt weergeven aan de rechterkant van nieuwsitems, reviews, etc., waarom laat je deze inhoud dan niet meescrollen met de gebruiker?

Meescrollen wordt als irritant ervaren en het lost weinig op omdat gebruikers die reacties aan het lezen zijn volgens mij niet super geïnteresseerd zijn in gerelateerde artikelen of producten.

[Dirk]

Om voor de nesting er eens een voorbeeld bij te pakken: leipo18 in 'nieuws: Rockstar heeft pc-versie Grand Theft Auto V 'in overweging''
Dat ziet er op dit moment zo uit:


Ik vind het hier lastig om te zien dat Huygens niet op Maikel_1976 reageert, maar op leipo18. Zo zou ik het veel logischer vinden:



Met een lijn die direct onder de parentreactie begint op het niveau van de marge van de parent en doorloopt langs alle children.

[Verwijderd]

Of wat zou helpen is het aangeven (misschien bovenaan bij de avatar) op wie je reageert.
Bv. Eerst jou avatar en een pijltje of zo en de avatar en of naam op wie deze reactie is.

Dan zou je in de post kunnen zien op wie er gereageerd is zonder terug te scrollen om dit te zien.

Dit is misschien niet de perfecte oplossing maar zou het al wel een beetje handiger maken.
Het lijkt me sowieso moeilijk om met lijnen en inspringen dit duidelijk genoeg te maken aangezien. Er soms veel reacties door elkaar lopen.

[sumac]

Ik ben het helemaal eens dat de structuur van een discussie zeer onduidelijk is. Ik wil in een enkele oogopslag zien waar een reactie bij hoort. Voor mij werkt dit niet. Wat Dirk hierboven voorstelt vind ik overigens ook niet 100%. Iedere subreactie moet een lijntje links hebben dat leidt naar de parent. Genoeg voorbeelden te vinden op internet. Het zal me hier niet weghouden, maar het leidt mij af, en dus heb ik minder aandacht voor waar het om gaat: de discussie.

Wat ik verwacht is een lijn om een reactie, en alle kinderen vallen binnen die lijn. Hier en daar mogen er best openingen zijn als dat grafisch interessant is, maar dit is wat werkt. Ik heb nu het idee dat men het wiel opnieuw heeft willen uitvinden. Zo'n poging is prima, en je mag zoiets ook zeker uitproberen, zelfs op productie. Maar als het niet werkt, wijzig het svp.

[ Voor 28% gewijzigd door sumac op 26-11-2012 17:00 ]

[World Citizen]

Ik heb het een tijdje geprobeerd... maar ik raak echt continu kwijt wie nu waar op reageert.
Verder ziet het er netjes uit, maar het hiërarchie systeem ontgaat mij...

Dus na een test periode keur ik hem af

Maar ik ben ook maar alleen.. Dus we wachten netjes af.

[World Citizen]

Is er nog leven in dit topic? Hebben we plannen of zijn we tevreden? Of heb ik iets gemist?

[Femme]

Er is een ticket ingeschoten om in de iteratie die over twee weken begint wat simpele wijzigingen te doen waaronder een border om alle reacties (ook die met een score lager dan 2). De verbindingslijnen tussen de reacties worden gestippeld zodat het verschil tussen border van de reactie en verbindingslijn duidelijker wordt.

Op latere termijn kunnen we nog wel eens kijken naar een mooiere oplossing. We kunnen ook overwegen om de verbindingslijnen weg te halen en alleen op afroep te tonen bij een klik op een reactie. Je zou dan alleen de verbindingslijn naar de parent en eventuele nakomelingen van de reactie krijgen te zien, waardoor er geen verwarring kan ontstaan met verbindingslijnen van andere reacties. De overbodige borders om de reacties kunnen dan ook weg. Een dergelijk idee kost echter meer tijd om te implementeren en bovendien is het maar de vraag of het een voldoende goede oplossing zal zijn. Er zullen inmiddels vast ook wel gebruikers zijn die graag altijd verbindingslijnen zien.

[World Citizen]

Femme schreef op dinsdag 04 december 2012 @ 18:39:
Er is een ticket ingeschoten om in de iteratie die over twee weken begint wat simpele wijzigingen te doen waaronder een border om alle reacties (ook die met een score lager dan 2). De verbindingslijnen tussen de reacties worden gestippeld zodat het verschil tussen border van de reactie en verbindingslijn duidelijker wordt.

Op latere termijn kunnen we nog wel eens kijken naar een mooiere oplossing. We kunnen ook overwegen om de verbindingslijnen weg te halen en alleen op afroep te tonen bij een klik op een reactie. Je zou dan alleen de verbindingslijn naar de parent en eventuele nakomelingen van de reactie krijgen te zien, waardoor er geen verwarring kan ontstaan met verbindingslijnen van andere reacties. De overbodige borders om de reacties kunnen dan ook weg. Een dergelijk idee kost echter meer tijd om te implementeren en bovendien is het maar de vraag of het een voldoende goede oplossing zal zijn. Er zullen inmiddels vast ook wel gebruikers zijn die graag altijd verbindingslijnen zien.

Top!

We wachten de update graag af. Het is niet dat het niet werkbaar is

Als er inderdaad om elke reactie een vak komt te staan, dan denk ik dat we een heel eind zijn. Het moet natuurlijk niet de oude stijl worden. Het kaderen definieert dan het inspringen duidelijker.

Thanks voor de update!