Ik was bezig met de opmaak van een webshop toen ik bij de prijstags aankwam. Welke kleur moet de prijs? Even kijken hoe de concurenten dat doen.





En ik maar denken dat rood een alarmkleur is die slechts bij zéér aantrekkelijke aanbiedingen gebruikt kan worden. Bij reguliere (hoge) prijzen schrikt dit toch juist af? Blijkbaar niet...

Verder kiest Play.com voor knaloranje wat erg moeilijk leesbaar is, gaat MediaMarkt in hun traditionele font voor metalic zwart en kiest Wehkamp voor een mini-font zwart die wederom moeilijk leesbaar is.

Wat wel een terugkerend element is is de opbouw van de site icm fonts. De mainpage heeft grote afbeeldingen met grote fonts en hoe verder je navigeert hoe kleiner het formaat. Dit is 1e verkooples materiaal dus dat hoef ik niemand uit te leggen lijkt mij.

Hebben jullie nagedacht over dingen als price fonts/colors? De huisstijl op de pricetags gereflecteerd, of juist helemaal niet? Slim omgesprongen met line-through's om kortingen te indiceren? Ben erg benieuwd.

Handige link: Marketing Kleuren

Vuistregel in interfaceontwerp is inderdaad: rood is slecht, groen is goed. Dat geldt in het bijzonder voor waarschuwingen, foutmeldingen, tips en dergelijke. Verder hangt het echter vooral af van het visuele ontwerp, dus het grotere geheel, en daarin hoeft rood niet per se negatief te zijn.

Op Briksets.nl gebruik ik een CSS-trucje om de van-prijs door te halen met een schuine in plaats van rechte streep. Voor optimale leesbaarheid kun je de doorgehaalde prijs aanwijzen en dan verdwijnt de streep tijdelijk. Bij usabilitytests bleken gebruikers dat een handige verademing te vinden.

Het prijsvoordeel wordt weergegeven in groen, met zowel het relatieve percentage als het absolute bedrag in euro's. Toon niet slechts de van/voor-prijzen, maar maak het voordeel concreter.

Off-topic: lang niet alle kopers hebben dezelfde prijsgevoeligheid en dan blijkt al dat van/voor-gestunt niet zo relevant. Leverbaarheid is voor sommige doelgroepen belangrijker, dus dat gaat bij mij ook in groen bij "Op voorraad" en in rood met "OP=OP" als de voorraad beperkt is en we een artikel niet meer kunnen inkopen.

KLopt, rood = alarm, groen =goed
Maar voetballers met een rood shirt worden als beter beschouwd dat wit

Gaat erom dat het een kleur is die meteen de aandacht trekt, juist omdat het een alarmkleur is.
Daarnaast als je prijs in het rood staat, lijkt het een discountprijs, dus een aanbieding.

Zelfs als je niet een prijs met een streepje erdoor ernaast hebt.

@ward, Kan je dat trucje toevallig ook plaatsen of pb'en?

Jelle du Chatenier schreef:@ward, Kan je dat trucje toevallig ook plaatsen of pb'en?

Jelle, voor meer CSS-technieken zou je mijn boek Het beste van CSS kunnen raadplegen Deze techniek is echter heel eenvoudig, dus ik leg de truc graag even uit.

Je geeft de HTML-tag <del>...</del> met de CSS-eigenschap background-image een achtergrondafbeelding mee met alleen de schuine streep. Het effect werkt alleen goed als je de schuine lijn in de afbeelding dezelfde kleur geeft als de doorgehaalde prijs, anders zie je dat lijn niet werkelijk op maar achter de tekst ligt. Daarnaast zet je text-decoration op none om de normale doorhaling uit te schakelen. Het aanwijseffect met de verdwijnende doorhaling bereik je vervolgens door background-image in CSS tijdelijk op none te zetten bij hover:

oeh ik zal strakjes eens gaan kijken naar het boek.
Zoals ik ff snel zag, is het eenvoudig geschreven (gelukkig)

Dank je, zal dit van de week even gaan verwerken.