24 voorbeelden Progress Indicators


 door 

In de blogpost ´the War of the Roses´ heb ik aangegeven dat onder andere Progress Indicators in mijn ogen zorgen voor hogere conversie. Hieronder heb ik 24 voorbeelden van Progress Indicators verzamelt. Een progress indicator toont de gebruiker in welke stap hij zit en welke stappen hij nog te gaan heeft voordat hij het product, of de dienst, heeft gekocht. Regelmatig zitten er wel meerdere pagina’s in 1 stap (een Progress Indicator is dus niet altijd gelijk aan 1 stap zoals het veelgebruikte “stap 1 van x”).

Deze voorbeelden komen bijna allemaal van hoog converterende websites. De voorbeelden geven dus een goed zicht op wat nu de standaard is. Opvallend is dat ze allemaal wel erg op elkaar lijken. De volgorde is vrijwel altijd:

•    Gegevens/Address
•    Shipping/Delivery
•    Billing/Facturering
•    Order complete/Controle/Confirm

Er zijn een paar uitzonderingen. Bij Eddie Bauer en Walmart staan ´Extras´ en ´Gift´ aangegeven. “Extra’s” is cross sell en bij “Gift” is het mogelijk het gekochte te verzenden als cadeau. Bij andere sites komen deze stappen soms wel voor maar zijn die kennelijk niet belangrijk genoeg om in de Progress Indicator genoemd te worden. Verder en belangrijker is het aangeven dat het proces veilig is zoals bij Sears en Proflowers.

Ebags is de enige met icoontjes en een telefoonummer (for assistence with your purchase, please call: 1-800-820-6126). Je mag toch verwachten dat het aanbieden van assistentie bij het koopproces conversieverhogend werkt. Of wegen de kosten niet op tegen de opbrengsten?

Heeft er iemand ervaring met Progress Indicators? En wijken deze af van deze 24 voorbeelden?

Vind meer artikelen over:
Gerelateerd

9 reacties


Goed artikel en leuk om al die voorbeelden te zien. Wat ik naar aanleiding van jouw presentatie nog aan de standaard wil toevoegen is: ze zijn bijna allemaal horizontaal uitgelijnd/gepositioneerd. Dit zal in sommige gevallen te maken hebben met het design/layout van de website, maar ik vermoed ook dat een horizontale progress indicator beter werkt. Dat een horizontale A – B – C meer tot de verbeelding spreekt (van een proces) dan een verticale
A
|
B
|
C

Bij SNS Bank hebben wij verticale progress indicators, zeker nog het testen waard. Onze stappen voldoen gedeeltelijk aan de standaard. Bij ons is het invullen van de productgegevens (hoeveel wil je sparen/lenen) vaak de eerste stap. Een stap die je vanuit de ‘retailgedachte’ misschien eerder verwacht in de winkel zelf (net zoals het kiezen van de maat van een schoen). Interesting…


Leuk om te zien. Mooie selectie.

Een bekende reden om het aankoopproces te cancellen is omdat de kosten toch hoger uitvallen dan verwacht (bijvoorbeeld vanwege verzendkosten, niet-vermelde extra kosten en ander klein leed). Om het vertrouwen te winnen zou het verkoopproces juist moeten starten met de kosten (u wilt deze dingen, dat gaat zoveel kosten, ga verder als dit okay is), om vervolgens aan het einde nog eenmaal terug te komen bij het definitieve scherm voor bevestiging (producten, kosten, adres, et cetera).

@ Reinout: zijn daar al cijfers van bekend, verticaal vs horizontaal? Ik kan me ook niet voorstellen dat verticaal beter werkt, maar intuïties worden vaak gelogenstraft door cijfers. Gelukkig maar :)


@Inge: Nee, zóóóó snel ben ik ook weer niet ;) Ik bedacht het net toen ik het stuk las en de voorbeelden bekeek. Maar ik neem aan (gevaarlijk!) dat een aantal bedrijven van de 24 voorbeelden dit wel getest hebben. Of zal er ooit één mee begonnen zijn (zonder test) en heeft de rest het gekopieerd? :)


Pdashop.nl had vroeger een verticale indicator. Ik heb zojuist gekeken en het is veranderd naar een horizontale. Wellicht dat je daar wat aan hebt.
Verder ben ik wel benieuwd naar jullie meningen over een “one page checkout”.


Verticaal vs horizontaal, goede vraag, je zou zeggen horizontaal maar zeker weten doe ik het niet. Het is wel heel raar dat ze allemaal zoveel op elkaar lijken. Het is dus optimaal of heel erg van elkaar afgekeken.
@Mitch, heb jij een goed voorbeeld van een “one page checkout”?


Leuk om alles zo eens bij elkaar te zien. Mijzelf spreekt erg de onderste van slide 3 aan (qvc), ook office depot op die slide ziet er goed uit (maar dat is allemaal subjectief).

Goed om te zien dat van elke stap ook al wordt samengevat wat deze gaat inhouden.

Er zitten ook een aantal ingewikkelde tussen. Kan me dan ook goed indenken dat ze niet allemaal zijn getest :-)


Bijvoorbeeld zoiets: http://www.volusion.com/one-page-checkout-benefits.asp
Ik werd erop gewezen dat het conversieverhogend zou zijn. Maar na wat tests blijkt het niks uit te maken. En als ik voor mezelf spreek vind ik het ook helemaal niet fijn om in één keer zo’n lap informatie in te vullen, te scrollen etc. Geef mij maar gewoon het stappenplan.


@Mitch: goed punt. Bij SNS Bank hadden we eerst veel formulieren die bestonden uit 1 lap invulvelden (zeg een one page checkout) en bij het ontwerp van de nieuwe site hebben we hier verschillende stappen van gemaakt. De resultaten waren altijd positief. Deze ‘test’ is natuurlijk niet waterdicht aangezien de opmaak/design, validatie en interactie ook veranderde, maar het zegt wel iets. Het zou nog wel een keer een test waard zijn.


Een horizontale stappenindicator sluit aan bij de (bijna?) conventie dat alle buttons die je verder het proces in sturen rechts staan, en buttons die terug gaan in het proces (‘vorige’) links. M.a.w.: naar rechts is verder (hoewel dit tegenwoordig nog wel eens doorbroken wordt bij blogs). Daarnaast is het ook ruimtebesparend: een verticale indicator gaat vaak méér ten koste van de ruimte in je viewport dan een horizontale.

@Inge: “.. Om het vertrouwen te winnen zou het verkoopproces juist moeten starten met de kosten (u wilt deze dingen, dat gaat zoveel kosten, ga verder als dit okay is), om vervolgens aan het einde nog eenmaal terug te komen bij het definitieve scherm voor bevestiging (producten, kosten, adres, et cetera).”

Helaas is dit niet altijd mogelijk, omdat afhankelijk van het gekozen product de vervoerskosten hoger kunnen zijn (denk aan een dvd tegenover een wasmachine die afgeleverd moet worden). Dit is bijvoorbeeld het geval bij wehkamp.nl Wel is het zaak om altijd zo transparant mogelijk te zijn over bijkomende kosten, want het kan inderdaad een afhaakmoment zijn!

Een one page checkout kan afschrikken voor de gebruiker, zeker als je alle informatie in één keer toont. Je kunt wel dmv progressive disclosure alles op één pagina houden: wanneer je het 1e onderdeel ingevuld hebt wordt het 2e onderdeel pas uitgeklapt etc.

Bij ingewikkelde bestelprocessen is dit ook niet altijd mogelijk (denk aan backoffice checks, controleren of gewenste afleverdatum beschikbaar is etc). Hier zijn afzonderlijke pagina’s in de vorm van stappen handiger. Als je goed communiceert naar de gebruiker wat de stappen zijn (stappenindicator!) hoeft dit ook geen bezwaar te zijn.

Plaats een reactie | Houd u op de hoogte van reacties via e-mail

* Verplicht in te vullen

Houd mij op de hoogte van nieuwe reacties. Of abonneer jezelf op deze discussie zonder te reageren.