Usability Review #2 – Albert.nl

5 oktober 2009 om 09:00

In deze serie bespreek ik praktijkvoorbeelden van usability op websites. Hierbij focus ik op punten die vanuit gebruikersoogpunt beter kunnen, omdat slechte usability gebruikers hindert bij het bereiken van hun doelen. Dit tweede artikel behandelt de bezorgservice Albert.nl, waar je boodschappen van Albert Heijn, Etos en Gall&Gall kunt laten bezorgen.

Homepage Albert.nl

Hoofdingangen

Op de homepage van Albert.nl is het even zoeken naar de ingangen naar de on-line shops van Albert Heijn, Etos en Gall&Gall:

Homepage Albert.nl

Albert.nl is een portaal naar deze webshops zodat de call-to-action in mijn optiek beter zou mogen: het hoofddoel van de pagina is de gebruiker naar de relevante webshop te krijgen.

De focus wordt echter gelegd op de kolommen onderlangs op de pagina, en de prominente postcode check rechtsboven. De hoofdingangen naar de shops vallen niet erg op doordat de teksten binnen visuals zijn gezet en de kleur van het Etos-vlak weinig contrast met de achtergrond heeft. In de kop (die je wel snel kunt scannen) staat alleen ‘De bezorgservice van…’.

De tekstlinks onder de visuals zijn ook gelijk (“> Direct winkelen”) zodat je als gebruiker niet snel kunt scannen welke ingang je moet hebben.

Scannen van teksten

Het lettertype op de homepage is erg klein en de onderlinge regelafstand is klein, wat lezen en snel scannen van teksten bemoeilijkt. Er ontbreekt ook een payoff die aan nieuwe bezoekers in één oogopslag duidelijk maakt wat je op de site kunt.  In de middelste kolom staat een tekst over ‘Albert zakelijk’ en een link ‘Lees meer’. Door de uitlijning staat de link echter niet bij de tekst, waardoor hier weinig samenhang in is.

Postcodecheck

Bij de postcodecheck (rechtsboven op de pagina) valt op dat de invoer van de postcode bevestigd moet worden door op ‘>’ te klikken. Dit is niet alleen een klein klikvlak, maar ziet er ook niet als een button uit. Hier ontbreekt een duidelijke call-to-action en een groter klikvlak zou wenselijk zijn (Fitt’s law). Als je de postcode check gedaan hebt en Albert.nl blijkt niet in je gebied te bezorgen dan kun je je aanmelden voor een mailinglist. Als je de aanmelding annuleert dan keer je niet terug naar de homepage van Albert.nl, maar naar de webwinkel van Albert Heijn. Omdat het design van de webwinkel niet overeenkomt met Albert.nl kun je als gebruiker in verwarring raken.


Mogelijke suggestie portalfunctie

Om de portalfunctie van Albert.nl beter te benutten zou je een aantal punten kunnen overwegen:

De webshop

Omdat de webwinkels van Albert Heijn,  Etos en Gall&Gall dezelfde opzet en hetzelfde stramien hebben beperk ik me tot het bespreken van één webshop, die van Albert Heijn.

Homepage Albert Heijn webshop

Er wordt weinig nadruk gelegd op het feit dat Albert maar in een deel van Nederland bezorgt. Rechtsboven staat een instructietekst “Doe boodschappen in de webwinkel en laat alles bezorgen tot in de keuken”, zonder voorbehoud. Het bezorggebied beperkt zich tot Midden- en West-Nederland, Noord-Brabant en een gedeelte van Gelderland. Hierdoor bestaat de kans dat een gebruiker pas bij het afrekenen er achter komt dat Albert niet bij hem of haar bezorgt. Overigens wordt wel een pop-up getoond na het toevoegen van vijf artikelen (wat al aan de late kant is):

Melding

Bij de pop-up valt op dat de tekst niet kort en bondig is, dat de link nietszeggend is (“Klik hier”) en dat deze qua kleur niet opvalt omdat deze bijna dezelfde kleur heeft als de bodytekst.

Kleine klikvlakken

Wat verder opvalt in de webshop zijn de kleine klikvlakken als je het aantal wilt verhogen van een artikel:

Klein klikvlak artikelen toevoegen

In het boodschappenmandje kan dit tot problemen leiden. Stel dat ik het aantal pakken vanillevla wil verhogen van 1 naar 2 en per ongeluk op de min ipv de plus klik dan wordt mijn artikel direct verwijderd. Ook als je het artikel in het winkelmandje wil leggen is het klikvlak niet al te groot (!). Overigens heeft dit icoon wel een leuke feature: het icoon wijzigt zodra je een artikel toevoegt aan je winkelmandje:

Icoon boodschappenmandje

In het winkelmandje valt verder op dat de artikelen gesorteerd staan op categorie, wat het snel scannen om te kijken of je alle artikelen hebt bemoeilijkt.

Visuele ruis

De homepage van de webshop zelf oogt rommelig door een wisselende uitlijning en is erg druk door het gebruik van kaders binnen kaders en veel achtergrondvlakken. Hierdoor ontstaat visuele ruis en kan je als gebruiker niet snel scannen: zaken vallen weg in de drukte. Daarnaast krijgt het middenvlak van de pagina een scrollbalk, in plaats van de hele pagina. Hierdoor kan ik niet eenvoudig naar beneden scrollen door mijn muiswiel te gebruiken, maar moet ik de muisaanwijzer boven het te scrollen gebied plaatsen. De breadcrumbtrail scrollt hierbij mee uit beeld, terwijl deze nu juist inzicht aan de gebruiker geeft waar hij zich binnen de site bevindt.

Hoofdnavigatie

De categorieën van de hoofdnavigatie vallen niet op en zijn niet snel te scannen omdat de tekst over meerdere regels verdeeld is. Daarnaast is het moeilijk een logische volgorde te ontdekken in de categorieën:

Hoofdcategorieën

Mogelijke oplossing

De webshop zou op een aantal punten verbetering kunnen gebruiken:

Afrekenen

Call-to-action

Als ik wil afrekenen staat er een banner tussen mijn winkelwagentje en de button ‘Naar de kassa’. Dit is één van de belangrijkste call-to-action momenten, waarbij de banner alleen maar afleidt:

Winkelmand close-up
Inloggen en registreren

Als je op de button ‘Naar de kassa’ klikt wordt een pop-up getoond dat je eerst moet inloggen voor je kunt bestellen:

Pop-up inloggen

Ik moet nu eerst de melding sluiten en zelf op zoek waar ik in kan loggen. Waarom wordt die extra handeling van mij gevraagd? Stuur me dan gelijk door naar een pagina waar ik in kan loggen… Overigens valt op dat de linktekst ook hier weinig zegt: ‘Nieuwe klant? U kunt zich dan hier inschrijven’. Beter zou zijn: ‘Bent u nieuw op onze site? Schrijf u in als nieuwe klant!’. De call-to-action hoef je dan niet af te leiden van omringende tekst.

Om de bestelling te kunnen plaatsen moet je je registreren, waarbij je wachtwoord minimaal zes karakters lang moet zijn. Helaas kom je daar als gebruiker pas achter bij de foutmelding als je een wachtwoord kiest met minder karakters…

Foutmelding wachtwoord

Bevestigingspagina

Nadat ik mij aangemeld heb wordt een melding getoond dat mijn account gevalideerd moet worden, door de link te activeren in de mail die naar het opgegeven e-mailadres gestuurd wordt. Vanuit gebruikersoogpunt is het prettig dat vantevoren gemeld wordt dat je een valide e-mailadres op moet geven. In mijn geval is de mail nu naar een niet bestaand adres gegaan. Voor mij niet zo erg, maar er zijn mensen die uit privacy- of spamoverwegingen niet hun echte e-mail adres opgeven: dan is het wel handig als je dit ter plekke meldt. Anders moet je je opnieuw registreren – wat een groot afhaakmoment kan zijn.

Bevestiging registratie

Overigens valt ook op dat ik op de bevestigingspagina nergens op kan klikken: ik kan niet terug naar de homepage zonder zelf actief de URL opnieuw in te geven. Ook het logo linksboven (niet zichtbaar op het screenshot) is niet klikbaar, wat wel een conventie op internet is.

Minimum orderbedrag

Na de registratie afgerond te hebben kan ik het bestelproces hervatten, maar een volgende pop-up gooit roet in het eten: ik moet minimaal voor € 60 euro bestellen. Exclusief statiegeld en bezorgkosten…

Minimumbedrag bestelling

Ook dit weet je als gebruiker liever vooraf, en niet pas na registratie (!!)… Stel dat ik slechts een paar boodschappen wil laten bezorgen en net het hele bestelproces doorlopen heb; grote kans dat ik alsnog afhaak (waarbij de user experience van deze ervaring af kan stralen op de fysieke winkel).


Mogelijke oplossing

Conclusie

Albert.nl en de bijbehorende webshops werken functioneel best goed, maar kunnen op bepaalde punten absoluut beter. Een paar van de besproken punten lijken misschien ‘maar’ kleine punten te zijn, maar veel kleine punten bij elkaar verminderen al de user experience waardoor de gebruiker af kan haken. Nog los van enkele grovere usabilityfouten die gemaakt worden… Ik ben nieuwsgierig of er lezers zijn die ervaring met Albert.nl hebben?

Links
Albert.nl werkt efficiënter dankzij vraagsturing – http://www.twinkelmagazine.nl/nieuws.aspx?id=22054

 

In deze serie bespreek ik praktijkvoorbeelden van usability op websites die vanuit gebruikersoogpunt beter kunnen. Dit tweede artikel behandelt de bezorgservice Albert.nl, waar je boodschappen van Albert Heijn, Etos en Gall&Gall kunt laten bezorgen.


Homepage Albert.nl

 

Links

http://www.twinkelmagazine.nl/nieuws.aspx?id=22054 – Albert.nl werkt efficiënter dankzij vraagsturing

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • Pingback: Tweets die vermelden Heeftstijl.nl - Nederlands webdesign magazine » Usability Review #2 – Albert.nl -- Topsy.com()

  • http://twitter.com/sanderdegans @sanderdegans

    Goed stuk! Erg interessant! Dergelijke artikelen maken HeeftStijl tot een prettige en interessante blog!

  • http://intensedebate.com/people/heeftstijl heeftstijl

    Leuk om te horen Sander!

  • http://twitter.com/jeroenelstgeest @jeroenelstgeest

    Een mooie feat van de AH webwinkel is de integratie met recepten, je kunt complete recepten toevoegen aan je albert.nl-lijstje, het jammere is echter dat er niet de link is tussen het boodschappenlijstje op ah.nl en die op albert.nl.

    Het zou mooier zijn als ze acties naar voren trekken (Een postcode check ter plekke) of het überhaupt niet verplichten (een account zou niet verplicht hoeven zijn, en zou als handige optie voor toekomstige bestellingen aangeboden kunnen worden).

    Ikzelf val helaas ook niet binnen het levergebied, want ik zou het graag (eens) proberen.

    Interessante aanstaande gebeurtenis: het uitbrengen van een iPhone app, die hopelijk integratie met ah.nl heeft.

  • http://www.ivobosma.nl Ivo Bosma

    @Jeroenelstgeest de feature bij recepten is inderdaad mooi, maar integratie met de webwinkel zou nog mooier zijn.

    Wat ook jammer is dat je op ah.nl wél zaken naar je boodschappenlijstje kunt slepen (bv recepten: alle ingrediënten staan dan op je boodschappenlijstje), maar dat dit in de webwinkel niet zo werkt.

    Wat betreft de iPhone app: heb je daar meer nieuws over?

  • http://www.santhos.nl Thomas

    Goede analyse! Dat verhogen en verlagen van aantallen is inderdaad heeel irritant. Boodschappenlijstje daarentegen is inderdaad wel goed geslaagd!

  • http://www.userguru.nl Michel Tel

    Goede analyse.

    Veel (verbeter)punten op het gebied van user experience. Vind er zo nog een handvol. Je hebt gelijk dat al deze, in de ogen van veel mensen, kleine aanpassingen zorgen voor een negatieve beleving. Je mag beter verwachten van een winkel als AH.

    Een kleine aanpassingen kan al enorme gevolgen hebben voor de conversie (positief).

    Overall gezien zou een opbouw volgens een vast stramien niet misstaan. Evenwicht zorgt voor rust en overzichtelijkheid.

  • Daniel

    De volgorde van de categorieen is op basis van de standaard winkel indeling zo te zien :)

  • http://www.ivobosma.nl Ivo Bosma

    @Michel bedankt voor je reactie. En inderdaad: er zijn nog wel meer punten te vinden, alleen werd mijn artikel dan te lang 😉

    @Daniel de navigatie volgt inderdaad op hoofdlijnen de indeling van een fysieke winkel. De Albert Heijns die ik ken wijken echter op verschillende vlakken nogal af van deze indeling, waardoor je alsnog moet zoeken

  • http://hiranthi.illutic.nl Hiranthi

    Ik vind de header "Mijn Webwinkel inschrijven" ook wel erg misleidend. Alsof je op die pagina je eigen webwinkel zou kunnen inschrijven..

    • http://intensedebate.com/people/milanvanbruggen Milan

      Hey, da's raar. Die header zie ik niet. Waar zie je dit staan?

      • http://hiranthi.illutic.nl Hiranthi

        Op de screenshots v/d inschrijving van je account (grote blauwe letters "Mijn Webwinkel inschrijven").

        • http://intensedebate.com/people/milanvanbruggen Milan

          Oh ja, duh 😉 Maar, inderdaad verwarrende kop.

  • http://intensedebate.com/people/milanvanbruggen Milan

    Leuke iPhone app die hiermee te maken heeft.

  • http://xgoodchoice.com jones