[Usability] Betekenis van groen vinkje en rood kruisje

[Cyb]

In een tijdschrift waar producten getest worden, hebben ze verzorgingsproducten opgenomen. Deze producten hebben ze getest, zodat je weet welke product het *beste* is. In de test hebben ze ook opgenomen of er ongewenste bestandsdelen/ingredienten aanwezig zijn. Dit geven ze weer d.m.v. een rood kruisje of groen vinkje.

Ik vroeg me af hoe jullie de rode kruisjes en groene vinkjes interpreteren. Zie de tabel met ongewenste bestandelen hieronder. Per rij is een ander getest product opgenomen.





Poll: Wat is de betekenis van het groene vinkje en rode kruisje?
• Groen: het slechte ingredient ontbreekt. Rood: het slechte ingredient is aanwezig.
• Groen: het slechte ingredient is aanwezig. Rood: het slecht ingredient ontbreekt.

^{Ook een poll maken? Klik hier}

Update: Tweakers forum software gebruikt een proxy voor de poll resultaat afbeelding, waardoor deze niet geupdate worden. De resultaten zijn te zien op: https://poll.dezeserver.nl/results.cgi?pid=406806

[ Voor 16% gewijzigd door Cyb op 10-12-2024 17:59 ]

[pagani]

Rood: Het ingrediënt is aanwezig maar staat niet op de verpakking
Groen: Het ingrediënt is aanwezig en staat op de verpakking

Dan verwacht ik:
Leeg: Het ingrediënt zit niet in het product.

Overigens vind ik "allergenen" veel te breed. In feite is alles behalve inerte materialen als goud een allergeen.

[ Voor 22% gewijzigd door pagani op 10-12-2024 17:28 ]

[Hahn]

pagani schreef op dinsdag 10 december 2024 @ 17:27:
Rood: Het ingrediënt is aanwezig maar staat niet op de verpakking
Groen: Het ingrediënt is aanwezig en staat op de verpakking

Dan verwacht ik:
Leeg: Het ingrediënt zit niet in het product.

Overigens vind ik "allergenen" veel te breed. In feite is alles behalve inerte materialen als goud een allergeen.

Leeg? Waar zie jij leeg? Sowieso lijkt het me heel sterk dat jouw verwachting van rood en groen is hoe het bedoeld is.

@Cyb is er echt niet meer context aan deze tabel, naast de producten die je eraf gecropt hebt?

Op basis van wat ik nu zie zou ik verwachten dat groene vink betekent dat het goed door de test komt (en het dus niet in het product zat) en rood kruis betekent dat het niet goed door de test kwam (en het dus wel erin zat).

Maar dit had zeker véél beter weergegeven kunnen worden.

[Cyb]

@pagani Er zijn geen lege vakjes. Ik heb voor de duidelijkheid de tabel geupdate, zodat de velden beter te zien zijn, met meer context.

@Hahn De screenshot was niet gecropt, maar de website waar het vandaan komt, heeft een te smalle content kolom op de webpagina t.o.v. de tabel, waardoor je horizontaal in de tabel moet scrollen om andere waardes te zien van een product. Heb nu met knippen/plakken het figuur geupdate met meer velden/context.

[CyBeR]

Groen vinkje: goed, dus het zit er niet in (aannemend dat dat het punt van de tabel is), rood kruis: slecht, dus het zit er wel in.

Toegegeven een groen kruis vs een rood vinkje zou waarschijnlijk logischer zijn, maar tbv kleurenblinden zouden ze er ook even ergens bij moeten zetten wat wat is.

[ Voor 38% gewijzigd door CyBeR op 10-12-2024 17:58 ]

[Hahn]

CyBeR schreef op dinsdag 10 december 2024 @ 17:57:
Groen vinkje: goed, dus het zit er niet in (aannemend dat dat het punt van de tabel is), rood kruis: slecht, dus het zit er wel in.

Toegegeven een groen kruis vs een rood vinkje zou waarschijnlijk logischer zijn, maar tbv kleurenblinden zouden ze er ook even ergens bij moeten zetten wat wat is.

Maar een groen kruis en een rood vinkje zijn ook weer tegenstrijdig.

Hier had gewoon 'Aanwezig' en 'Afwezig' of iets vergelijkbaars moeten staan.

[Jan Smit]

Ik zou kijken op het stukje afbeelding dat is afgeknipt. Daar staat de legenda en daar staat dus wat het betekent.

[Cyb]

Jan Smit schreef op dinsdag 10 december 2024 @ 18:09:
Ik zou kijken op het stukje afbeelding dat is afgeknipt. Daar staat de legenda en daar staat dus wat het betekent.

Het zijn delen die ik aan elkaar heb copy/paste, omdat de tabel op de pagina heel smal wordt weergegeven. Tussen de breuk stond wel nog een testdatum en een prijs per gebruik, maar die heb ik vanwege de breedte even weggelaten. Maar de hele pagina en tabel heeft helaas geen legenda, en ook geen beschrijving van de betekenis van de kruisjes/vinkjes.

[ Voor 19% gewijzigd door Cyb op 10-12-2024 18:19 ]

[sys64738]

Heb deze discussie even verplaatst naar Software-ontwikkeling. Is meer een UX design vraag/discussie dan Foto & Video.

[CyBeR]

Hahn schreef op dinsdag 10 december 2024 @ 18:07:
[...]

Maar een groen kruis en een rood vinkje zijn ook weer tegenstrijdig.

Helemaal niet. Je geeft daarmee met de kleur aan of het kruisje/vinkje (naar de mening van de schrijver) goed of slecht is, en het kruisje/vinkje zélf heeft een andere betekenis: wel of niet aanwezig. Dat laatste zet je ook bij de tabel zodat mensen die moeite hebben met rood/groen ook weten wat er aan de hand is.

[Barrycade]

Kan je beter kleine a en grote A gebruiken van afwezig of aanwezig

[Hahn]

CyBeR schreef op dinsdag 10 december 2024 @ 19:26:
[...]

Helemaal niet. Je geeft daarmee met de kleur aan of het kruisje/vinkje (naar de mening van de schrijver) goed of slecht is, en het kruisje/vinkje zélf heeft een andere betekenis: wel of niet aanwezig. Dat laatste zet je ook bij de tabel zodat mensen die moeite hebben met rood/groen ook weten wat er aan de hand is.

Prima dat jij dat duidelijk zou vinden, maar in mijn ervaring van 10 jaar UX-designer zijn kan ik je vertellen dat een kruisje en vinkje ook bepaalde verwachtingen hebben. En een rood vinkje en een groen kruisje zullen voor veel mensen verwarrend zijn.

[CyBeR]

Hahn schreef op dinsdag 10 december 2024 @ 19:32:
[...]

Prima dat jij dat duidelijk zou vinden, maar in mijn ervaring van 10 jaar UX-designer zijn kan ik je vertellen dat een kruisje en vinkje ook bepaalde verwachtingen hebben.

Klopt, en die maak je waar: vinkje: ja, dat ingredient is er. Kruisje: nee, het is er niet.

De hele reden dat TS deze vraag stelt is omdat in zijn voorbeeld dit verkeerdom gedaan wordt en dat dus verwarrend is, en de enige manier waarop we dat doorhebben is omdat ze ze ook van een kleurtje hebben voorzien waardoor we kunnen beredeneren dat het vinkje zoiets betekent als "ja, het is er niet", wat imo dom is.

[Hahn]

CyBeR schreef op dinsdag 10 december 2024 @ 19:37:
[...]

Klopt, en die maak je waar: vinkje: ja, dat ingredient is er. Kruisje: nee, het is er niet.

De hele reden dat TS deze vraag stelt is omdat in zijn voorbeeld dit verkeerdom gedaan wordt en dat dus verwarrend is, en de enige manier waarop we dat doorhebben is omdat ze ze ook van een kleurtje hebben voorzien waardoor we kunnen beredeneren dat het vinkje zoiets betekent als "ja, het is er niet", wat imo dom is.

Omdat jij nu in je hoofd hebt zitten dat het vinkje en het kruisje aangeven of die stoffen erin zitten of niet en dat er niet in zitten goed is, vind jij het heel duidelijk. Ook omdat je er nu al meer dan 2 seconden naar gekeken en over nagedacht hebt.

Als iemand anders deze tabel zou hebben gezien, maar dan met groene kruisjes en rode vinkjes en verder niks anders, kan ik je op een blaadje meegeven dat er nog steeds een flink deel van de gebruikers het niet direct duidelijk zou vinden. Ook omdat bijvoorbeeld die eerste 2 stoffen niet per se heel bekend zijn, en dus ook niet gelijk overkomen als 'dit moet je niet willen'.

Wat zou kunnen helpen is als er in de rij bovenin bijvoorbeeld 'Allergenen aanwezig' had gestaan. Dán kan ik met je meekomen dat een groen kruisje zou communiceren dat het niet aanwezig is (kruisje), en dat dat goed is (want groen).

edit:

Ah, Sodium lauryl sulfaat kwam me enigszins bekend voor, maar dat is SLS, dus blijkbaar gaat de tabel over tandpasta?

[ Voor 10% gewijzigd door Hahn op 10-12-2024 19:53 ]

[ThomasG]

Het probleem met de gebruikte iconen is dat ze dubbelzinnig zijn en daardoor verwarring veroorzaken. Het simpelweg veranderen van de kleur of het icoon zelf lost dit probleem niet op. Vanuit een UX-oogpunt is dit een ernstige tekortkoming. Het ontwerp slaagt er niet in om de gebruiker in één oogopslag duidelijk te maken wat het icoon betekent.

Een betere aanpak zou zijn om een icoon te gebruiken dat specifiek verwijst naar het onderwerp, zoals een gekleurd "microplastic vrij" icoon om aan te geven dat er geen microplastic in een product zit. Wanneer het product wél microplastic bevat, kan hetzelfde icoon in grijs worden weergegeven met een schuine streep erdoor.

Een andere oplossing is om de labels om te draaien. In plaats van een label zoals "Microplastic" met een rood kruisje om aan te geven dat het product geen microplastic bevat, kan het label worden veranderd naar "Microplastic vrij". Dit label krijgt een groen vinkje als het product vrij is van microplastic. Voor producten die microplastic bevatten, kan het icoon dan gewoon weggelaten worden.

[Aganim]

pagani schreef op dinsdag 10 december 2024 @ 17:27:
Overigens vind ik "allergenen" veel te breed. In feite is alles behalve inerte materialen als goud een allergeen.

offtopic:
Goud mag dan chemisch inert zijn, het kan weldegelijk een allergeen zijn. Idem voor zilver overigens.

[ Voor 0% gewijzigd door Aganim op 10-12-2024 21:15 . Reden: Missend woordje toegevoegd ]

[Hahn]

ThomasG schreef op dinsdag 10 december 2024 @ 19:53:
Het probleem met de gebruikte iconen is dat ze dubbelzinnig zijn en daardoor verwarring veroorzaken. Het simpelweg veranderen van de kleur of het icoon zelf lost dit probleem niet op. Vanuit een UX-oogpunt is dit een ernstige tekortkoming. Het ontwerp slaagt er niet in om de gebruiker in één oogopslag duidelijk te maken wat het icoon betekent.

Een betere aanpak zou zijn om een icoon te gebruiken dat specifiek verwijst naar het onderwerp, zoals een gekleurd "microplastic vrij" icoon om aan te geven dat er geen microplastic in een product zit. Wanneer het product wél microplastic bevat, kan hetzelfde icoon in grijs worden weergegeven met een schuine streep erdoor.

Een andere oplossing is om de labels om te draaien. In plaats van een label zoals "Microplastic" met een rood kruisje om aan te geven dat het product geen microplastic bevat, kan het label worden veranderd naar "Microplastic vrij". Dit label krijgt een groen vinkje als het product vrij is van microplastic. Voor producten die microplastic bevatten, kan het icoon dan gewoon weggelaten worden.

En hoe ziet een 'microplastic vrij' icoon er precies uit..? Je hele post komt eerlijk gezegd een beetje AI gegenereerd over, qua bewoording en verloop.

[ThomasG]

Hahn schreef op dinsdag 10 december 2024 @ 19:57:
[...]

En hoe ziet een 'microplastic vrij' icoon er precies uit..? Je hele post komt eerlijk gezegd een beetje AI gegenereerd over, qua bewoording en verloop.

De gangbare manier is een plastic flesje met een vergrootglas erbij waarin kleine stukjes te zien zijn.

[Hahn]

ThomasG schreef op dinsdag 10 december 2024 @ 20:00:
[...]
De gangbare manier is een plastic flesje met een vergrootglas erbij waarin kleine stukjes te zien zijn.

Om dat duidelijk afleesbaar te maken zal je het een flink icoon moeten maken. En daarmee los je het alleen op voor 1 van de 4 stoffen. Hoe moet het met die andere 3?

[ThomasG]

Hahn schreef op dinsdag 10 december 2024 @ 20:03:
[...]

Om dat duidelijk afleesbaar te maken zal je het een flink icoon moeten maken. En daarmee los je het alleen op voor 1 van de 4 stoffen. Hoe moet het met die andere 3?

Dan valt die optie af. Het omdraaien van de labels boven de tabel is waarschijnlijk beter. Vooral als het zo qua icoontjes consistent blijft met de rest van het tijdschrift.

[brammerd21]

Zonder echt te lezen wat je schreef en m'n eerste indruk:
Groen: het ingredient is aanwezig. Rood: het ingredient ontbreekt.

De th had beter iets kunnen zijn als:
SLS vrij: √
Allegenen vrij: √
Microplastic vrij: X

[edeboeck]

brammerd21 schreef op dinsdag 10 december 2024 @ 20:09:
Zonder echt te lezen wat je schreef en m'n eerste indruk:
Groen: het ingredient is aanwezig. Rood: het ingredient ontbreekt.

De th had beter iets kunnen zijn als:
SLS vrij: √
Allegenen vrij: √
Microplastic vrij: X

Dit dus (gecombineerd met groen vinkje en rood kruisje)

[Cyb]

Dank voor jullie inzichten en meningen.

Ik heb de tabel zelf niet gemaakt (anders dan copy/paste), maar ik wist van te voren wel hoe het tijdschrift zelf de vinkjes en kruisjes heeft opgezet.

Intuitief dacht ik in eerste instantie: Groen is een goede situatie, en rood een foute situatie.
Dat groen met "goed" wordt geassocieerd wordt ook nog eens extra benadrukt in de gecijferde cellen, waar een goed cijfer een groene achtergrond heeft, en een slecht cijfer een rode achtergrond.

Ook wordt een kruisje in het algemeen vaker gezien als een verbod of een fout, of iets slechts. (Denk bijv. aan een verbodsbord, met strepen of kruisen ergens door heen. Of denk als talentenshows, waarbij de ontevreden jurylid een groot rood kruis laat verschijnen.)
En een vinkje wordt meestal geassocieerd met iets goeds, denk bijv. aan de docent, die een vinkje of krulletje zet bij een goed antwoord.

Op basis van deze test gebruikte ik al een tijdje een bepaald product. Jaarlijks kijk ik of er betere producten in de lijst bijgekomen zijn.
Echter, toen ik de ingredienten uit de tabel ging vergelijken met de daadwerkelijke productverpakkingen, leek de tabel vaak niet te kloppen.

Ik heb het vervolgens nagevraagd bij het tijdschrift, en deze zegt dus dat:
-Groen vinkje betekent: de stof zit er wel in.
-Rood kruisje betekent: de stof is niet aanwezig.

Dus compleet het tegenovergestelde dan waar ik intuitief vanuit ging, en velen met mij. Ik had zelfs niet eens verwarring/twijfel bij de interpretatie.
Maar zelfs nu ik het antwoord weet, vind ik de tabel nog steeds niet-intuitief.

Het argument van @CyBeR maakt het wel weer intuitief/begrijpend voor mensen die kleurenblind zijn.

Het voorstel van @ThomasG met label "Microplastic vrij" (ipv "Microplastic") zou het voor mij meteen duidelijk maken.

Uit de 25 stemmen op GoT blijkt dat 56% van de stemmers hetzelfde denkt als ik. 44% denkt zoals het tijdschrift het heeft opgesteld. Gelukkig ligt het dus niet aan mij, maar toch verbaas ik me er over dat 44% het wel *goed* had.

Duidelijk is wat mij betreft dat, zoals @ThomasG zegt, het vanuit een design perspectief het ernstig tekort komt. De lezer/klant kan er een compleet omgekeerde conclusie uit lezen, zonder het zelf door te hebben.

Ik zal dit topic terugcommuniceren naar het tijdschrift.

[franssie]

*snip* Hou 't ontopic a.u.b.

[ Voor 88% gewijzigd door RobIII op 11-12-2024 00:51 ]

[Ed Vertijsment]

My 2 cents: denk aan toegankelijkheid en dan moet je gewoon een tekst alternatief bieden, denk aan een tooltip met toelichting.