Amazon’s scanbare productpagina’s en het belang van design (updated 8 mei 2008)

Amazon's winkelwagen vroegerEn hoe zit dat dan met usability en design? Hoe belangrijk is design eigenlijk? Ik roep als antwoord vaak dat design “overrated” is, en dat veel sites wel een undesign sausje kunnen gebruiken.

Er zijn echter twee tegenovergestelde argumenten vóór het enorme belang van design. Het eerste kreeg ik bij de vakjury avond van de usability award naar mijn hoofd geslingerd door Nils van den Broek van Valsplat. Design heeft verhoudingsgewijs juist een enorme impact op usability omdat mensen bij de eerste blik op een pagina hun mening vormen. En die is van invloed op bijvoorbeeld hoeveel moeite iemand doet om verder te zoeken. Dit is voor een groot deel dus een kwestie van vertrouwen opbouwen en de juiste verwachtingen wekken.

die webwinkel die voor iedereen een voorbeeld is, maar die door niemand als voorbeeld gebruikt mag wordenHet andere argument presenteert Amazon. Mocht je het zijn vergeten: dat is die webwinkel die voor iedereen een voorbeeld is, maar die door niemand als voorbeeld gebruikt mag worden.

Amazon heeft zijn productpagina’s subtiel onder handen genomen. Zie hier de before and after pictures:

Voor

Amazon's oude productpagina
Veel dikgedrukte kopjes en weinig contrast in de verschillende onderdelen. Op zich geen slechte productpagina zou je zeggen, Amazon vaart er wel bij. Maar kijk naar de volgende screenshot, en beweer dan nog maar eens met droge ogen dat de kleine veranderingen niet een enorm effect hebben…

Na

Amazon's nieuwe productpagina

Ik kon helaas geen online voorbeeld van de nieuwe pagina vinden. Soms kun je verschillen zien tussen Amazon.com en Amazon.co.uk (zie de totaal andere hoofdnavigatie), maar in dit geval hebben beiden voor mij nog het oude design. Anyway, ik vind het verschil enorm, je voelt het gewoon direct.

Wat hebben we nu geleerd?

Ik krijg hiervan een hoop inspiratie om te gaan testen met de productpagina’s van Eduhub. Die zijn helemaal rechttoe rechtaan, maar misschien is het logisch om wat meer variatie in de data aan te brengen. Het lijkt me goed om het hele metadata blokje in een multivariate test te gooien met verschillende stijlen per kopje, om dan te leren welke informatie op welke manier het best tot zijn recht komt.

Het mooie is dat Amazon’s design niet te kopieren is. Ze creeren hun eigen wereld en elk kleurtje, elk lettertype, elk klein design element, draagt daaraan bij op een unieke manier. Voor mij is dit iets waar elke website naar zou moeten streven om zich zo los te maken van de concurrentie.

Ik sprak recent de internetmanager van Nederlands (een-na?) succesvolste webwinkel Wehkamp. Ik vroeg hem of ze bij het ontwikkelen van de site eigenlijk niet gewoon altijd Amazon proberen te volgen. In dit verband een leuk en misschien veelzeggend antwoord: “Haha, steeds minder!”.

Wat zegt dit over Wehkamp, en over Amazon? Is het voor elke website mogelijk, of zelfs noodzakelijk, zijn eigen wereld te scheppen? En wanneer staat er in Nederland een blogger op die puur naar de design kant van usability gaat kijken?

Update (8 mei 2008): nog een nieuwe variant gespot

Aartjan merkt in de reacties hieronder op dat Amazon de titel inmiddels weer zwart heeft gemaakt. Kennelijk toch iets scanbaarder of in ieder geval een hogere conversie, zie:

Amazon's productpagina nog eens geupdate

17 gedachten over “Amazon’s scanbare productpagina’s en het belang van design (updated 8 mei 2008)

  1. Ruben Timmerman Berichtauteur

    Marketingheld Seth Godin schrijft toevallig net:

    The facts:
    Too many choices.
    Too little time.

    The response:
    Quick decisions based on the smallest scraps of data.

    It’s not fair but it’s true. Your blog, your outfit, the typeface you choose, the tone of your voice, the expression on your face, the location of your office, the way you rank on a Google search, the look of your Facebook page…

    We all jump to conclusions and we do it every day.

    Where do you want me to jump?

    Vind ik wel een aardige om in je hoofd te houden. Wat mij betreft is fatsoenlijk, professioneel ogend, webdesign bijvoorbeeld een vereiste om je bouncerate laag te houden. Al geldt dit obviously weer niet als je iets anders unieks hebt waardoor mensen toch blijven (Hyves, Startpagina, Marktplaats…)

    Like

  2. Sjors

    Het concept van werelden cre?ยดereen vind ik wel een interessante. Zelf zag ik het meer als het opstellen van regels, (een beetje zoals stylesheets ook werken) Als een object een bepaald type informatie in zich heeft dan hoort daar een stijl bij. Het leuke is natuurlijk dat het in de werkelijkheid niet altijd samengaat, dan kloppen alle margins en paddings volgens een design principe maar oogt de website erg onrustig. Een voorbeeld van een website waarbij het cre?ยดren van een wereld belangrijk was dan het 1 op 1 copieren van Amazon is deze nederlandse webwinkel: http://www.azarius.net (disclaimer zelf promotie)

    Een tweede punt is denk ik dat webdesign niet los van usability gezien kan worden. Design is geen kunstvorm en heeft daarom altijd een doel, en mooi zijn is geen doel op zich ๐Ÿ™‚ Professionaliteit en betrouwbaarheid uitstralen is vaak een belangrijke, maar ook merkherkenbaarheid is iets waar design goed voor te gebruiken is. En hoe beter je merk herkenbaar is hoe moeilijker het is om een direct kopie te maken. Maar zulke dingen als scanbaarheid van teksten of het sturen van bezoekers in de gewenste richting lijkt me een onderwerp waar je usability en design niet echt los van elkaar kunt halen. Ik probeer nu even een voorbeeld te bedenken van een site die er geweldig uitziet maar die voor geen meter werkt, maar ik kom nog niet echt ver. Wellicht als je de layout voor je nieuwe webproject bij http://www.templatemonster.com/ oid koopt ๐Ÿ™‚

    Voor mij is het onmogelijk om design los te zien van usability, keuzes van knop kleuren, font sizes, pagina breedtes zijn design keuzes die toch meer doen dan alleen een site mooi maken. Ontstaat wellicht de vraag, moet elke designer ook ook een stevige dosis usability kennis hebben, of is het mogelijk om deze functie puur door een andere persoon te laten vervullen? Daarom een tegenvraag: wat is er niet design aan usability? ๐Ÿ™‚

    Like

  3. Ruben Timmerman Berichtauteur

    Niet design aan usability: de content en de informatie architectuur/navigatie. Ik denk dat er heel veel sites zijn die er “mooi” uitzien maar niet usable zijn. Een voorbeeld waar ik toevallig net aan’t zoeken was:
    http://www.Expatica.com/ch/main.html

    Ik vind die site qua design mooi maar de structuur en content zijn gewoon niet goed genoeg om mij te helpen. Ik ben nu op zoek naar basic info over hoe ik me een paar maanden in Zurich kan vestigen. Zoek dus naar een woning, kantoorruimte en info over hoe ik daar kan freelancen. So far is het me niet gelukt via die site ๐Ÿ™‚

    Like

  4. Robert Gaal

    Mooi stuk Ruben. Zoals je weet zit ik vaak met dezelfde vragen ๐Ÿ™‚

    Ik denk ook dat je voorbeelden oa. laten zien dat usability design kan versterken en andersom. Natuurlijk kun je dat gescheiden zien maar volgens mij is dat juist ?ยฉ?ยฉn van de grootste fouten die je kunt maken in het hele proces van productontwikkeling.

    Daarnaast denk ik dat design gewoon echt emotie is. Zoals je al zegt in je stukje: men vormt een mening, ze voelen het direct. Ze krijgen er een gevoel bij, een stukje vertrouwen of gewenning. Dat alleen al is denk ik waar je voor moet gaan en waarom je design absoluut niet moet afdoen als onzin. En of het nu de “bouncerate” opvijzelt of niet, ik maak echt liever een product wat mensen raakt.

    Like

  5. Carlo

    Dat laatste wat je zegt is waar, Robert, een goede designer kan onmogelijk iets maken wat hij zelf lelijk vind, ook al is het totaal niet useable, maar bij user interfaces heb je (web)designers nodig die snappen dat je niet het mooiste schilderij op de achtergrond moet plaatsen, maar rust en overzichtelijkheid moet creeren en dus verstand moeten hebben van usability.

    Zoals Sjors zegt: design vind zijn oorsprong in kunst, usability in psychologie. Een website/user interface/informatiesysteem is geen schilderij maar een gebruiksvoorwerp, vandaar dat usability hierbij altijd op nummer 1 dient te staan. Daarnaast wil je dat je website of product een ‘lovemark’ wordt en dus aanspreekt bij je doelgroep. Een pagina scanable maken door bv teksten kleur te geven of bold/normal te maken is wat mij betreft usability, een pagina de stijl en uitstraling geven die bij je brand hoort = design.

    In de praktijk zie je volgens mij vaak reclamebureau’s/art directors de huisstijl/overall design bepalen en webdesigners/interaction designers deze stijl op een usable manier in een web applicatie verwerken, toch?

    Like

  6. Carlo

    Een aanvulling: Content is King. Er bestaan websites die niet useable zijn, er niet uitzien, maar toch succesvol zijn. Zouden deze sites nog succesvoller worden met een usable en mooi design, zou het slechter worden of zou het niet uitmaken?

    Like

  7. Sjors

    Wat volgens mij ook nog meespeelt is dat desing een woord is wat een ontzettend brede lading dekt, het maakt denk ik nogal uit of je een website voor de nieuwe campagne voor heineken ontwerpt; veel design, veel merkbeleving, veel minder usability. Of juist probeert om een site als Flickr neer te zetten, weinig design, veel usability en erg veel ruimte voor content die door andere gemaakt is.

    En met Robert kan ik het ook wel gedeeltelijk eens zijn, de vraag is soms echter wiens emotie de designer naar voren moet brengen, moet hij zijn designvriendjes blij maken en zijn photoshop skills showen (denk aan apple gerelateerde webdesign stijlen) of juist net doen als of er geen designer aan te pas is gekomen zoals de nieuwe marktplaats beta versie.

    En er lijkt in design zelf ook een conflict te zijn tussen het minimalistische gedachten goed: haal al het overbodige weg, en je houdt de perfecte vorm over (bijvoorbeeld facebook of craigslist, super functioneel maar behoorlijk zielloos ) en de andere over-emotionele (maximalistische?) stijl die van myspace en hyves een erg gezellige maar haast totaal onbruikbare site heeft gemaakt.

    Like

  8. Nils

    Hi Ruben! Leuk stuk, interessante stelling. In aanvulling op “mijn quote” nog even dit.

    Design (esthetiek) heeft een belangrijke voorspellende invloed op (perceived) usability. Gebruikers bepalen in een fractie van een seconde (dus vooral/alleen op basis van vormgeving) of de site ze bij het beoogde doel gaat helpen.

    In de literatuur worden 2 dimensies van esthetiek onderscheiden: klassiek en expressief. Klassieke kenmerken (zoals duidelijk, verzorgd, evenwichtig, etc…) hebben een possitief effect op (perceived) usability, terwijl meer expressieve kenmerken (bv. creatief, boeiend, origineel: vorm voor de vorm zeg maar) eerder een negatief effect hebben. Het voorbeeld van Amazon laat duidelijk zien dat aandacht voor klassieke kenmerken goed werkt!

    Verder blijkt dat gebruikers op basis van hun eerste indruk van de vormgeving zoeken naar bevestiging. Dus, als je de vormgeving ruk vindt, ga je op zoek naar wat er nog meer mis is. Terwijl je bij een positieve associatie eerder geneigd bent de goede zaken van de site te zien.

    Kortom: genoeg reden om te investeren in goed design, maar don’t overdo it. Tsja, dat was toch een beetje jouw stelling ๐Ÿ™‚

    Tot slot dan maar een lekkere clich?ยฉ: vorm volgt functie.

    Like

  9. Teun

    Ter aanvulling van Nils:
    In een sequentie van ervaringen wordt elke volgende ervaring beinvloedt door voorgaande ervaringen (het halo effect). Sinds vorig jaar weten we dat er op basis van vormgeving zeer snel een eerste indruk wordt gevormd.

    Verder is vastgesteld dat klassieke esthetiek een positief verband heeft met perceived enjoyment en perceived usability. Expressieve esthetiek heeft een positief verband met perceived enjoyment en perceived usefulness. Het is niet vastgesteld dat, zoals Nils zegt, expressieve esthetiek een negatief verband heeft met perceived usability.

    De eerste indruk schept dus verwachtingen met betrekking tot de bruikbaarheid, gebruiksvriendelijkheid &egraven de ‘fun’ van een site. Wat blijkt: design is king ๐Ÿ™‚

    Probleem is dat het begrip ‘design’ op verschillende manieren gebruikt/uitgelegd wordt. Meestal wordt de term ‘design’ alleen gebruikt voor zaken die binnen de dimensie van expressieve esthetiek vallen. Daar tegenover staat het recent gehypte ‘undesign’, dat stiekem weleens gelijk zou kunnen lopen met de dimensie van klassieke esthetiek.

    Verwarrend? Vraag gewoon aan je gebruikers wat ze van je pagina’s vinden. Als je ‘overzichtelijk’ en ‘rustig’ hoort ben je goed bezig ๐Ÿ™‚

    Like

  10. Celine

    Wat Carlo zegt, Content is King. Een gebruiker blijft in de eerste instantie niet op een site omdat het er mooi uitziet of omdat het usable is. Een gebruiker blijft op een site omdat hij de informatie die erop staat, goed kan gebruiken. Als de gebruiker een keuze kan maken tussen drie websites met dezelfde content, dan pas gaat o.a. de usability een rol spelen.

    Like

  11. Matthijs

    Content is volgens mij niet altijd king. Een gevoel wat iemand krijgt bij een product kan heel erg krachtig zijn. Zoals vroeger bij de indianen werken kraaltjes en spiegeltjes nog steeds. Ik heb bijvoorbeeld nog nooit een Apple liefhebber echt boos gehoord over zijn computer, terwijl je er bij staat te kijken dat het ding toch echt niet doet wat de gebruiker verwacht; “Normaal doet ie dit gewoon”. Natuurlijk heeft Apple erg (veel) goede usability dingen gemaakt. Maar mocht er niets toch niet in de haak zijn, verblindt het de gebruiker wel vakkundig met designers glans ๐Ÿ˜‰

    Content en lay-out gaan hand in hand, de een kan echt falen zonder de ander ..

    Like

  12. Bas

    Van oudsher heeft het vak (grafisch) ontwerpen twee aspecten: het cre?ยดren van identiteit (uitstraling, emotie, merkbeleving, vertrouwen, enz.) en het ordenen van informatie (indeling en lay-out, rangschikken van tekst en beeld, gebruiksvriendelijkheid, enz.). Beiden maken deel uit van het vak en zijn niet los van elkaar te beoordelen. Afhankelijk van de aard van het product kan de nadruk verschuiven van het een naar het ander, maar het blijven twee uiteinden van hetzelfde spectrum.

    Bij โ€šร„รฒundesignโ€šร„รด is dan ook geen sprake van minder design. Bij undesign verplaatst de naald zich meer naar de pure informatievoorziening. In de praktijk betekent dat afzien van het grote gebaar ten gunste van het eindeloos schaven aan de kleinste details om het grootste effect te bereiken. De Amazon-restyle laat dat zien en we kennen dit proces ook van de minutieuze aanpassingen aan de Google-site.

    Maar vergis je niet: ook hier geldt het adagium van Charles Eames: ‘The details are not the details. They make the design’.

    Like

  13. Bowie Derwort

    Persoonlijk ben ik niet zo van het Undesign. Ook bij Amazon houden ze wat mij betreft toch iets teveel vast aan de ‘kale’ undesign layout. Ik weet zeker dat met een paar lichtgekleurde vlakken de site duidelijker en rustiger wordt.

    De beste test vind ik altijd mijn oma en mijn moeder. Beide niet erg handig met de computer. Als het hen lukt om de informatie zonder problemen te vinden, is de site voor mij geslaagd. Dit is soms best frustrerend omdat ik dan vooraf overtuigd was dat iets ‘toch heel logisch’ was geplaatst. De ultieme test dus, oma’s, moeders en ook kleine kinderen trouwens ๐Ÿ˜‰

    Like

  14. Aartjan van Erkel

    Leuk artikel Ruben.
    Amazon heeft inmiddels trouwens de boektitel weer zwart gemaakt, in jouw screenshot is hij nog oranje. In een usability test bij Valsplat ๐Ÿ˜‰ heb ik ooit geleerd dat headers die gewoon zwarte tekst zijn beter gescand worden dan gekleurde. Uit de tests van Amazon blijkt dit dus blijkbaar ook.

    Like

  15. Ruben Timmerman Berichtauteur

    Aartjan: zwart is zeker beter te scannen, maar de titel is op deze pagina natuurlijk niet het belangrijkst. Dat jij (en ik) de titel nu zwart zien komt omdat Amazon dit soort dingen vaak eerst in de VS uitrolt, wij kunnen de veranderingen dus helemaal niet zien helaas ๐Ÿ™‚

    Like

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s