Month: November 2017

Hoe kun je het beste je betaalmethodes tonen

Winkelwagen ontwerp: selectie van de betaalmethode

Als gebruikers geen manier hebben om u te betalen, kunnen ze niets van u kopen. Het is dus duidelijk dat het accepteren van een breed scala aan betaalmethoden een goed idee is om ervoor te zorgen dat alle gebruikers daadwerkelijk een manier hebben om geld naar u te verzenden.

Het is zone als je vel moeite en geld hebt gestoken om je website vindbaar te maken, alleen om vervolgens te zien dat niemand wat koopt.

Tijdens onze uitcheck-bruikbaarheidstudies hebben we echter gezien hoe alleen het presenteren van de gebruiker met een stapel betaalmethoden complexiteit aan het afrekenproces introduceert en zorgvuldig moet worden ontworpen om verwarring en keuzeverlamming te voorkomen.

Voor internationale sites is het accepteren van meerdere betaalmethoden niet alleen een kwestie van gebruikersvoorkeuren (hoewel dat zeker ook een voordeel is), aangezien in internationale markten zoals Duitsland, China en Rusland, internationale kaarten zoals VISA en MasterCard minder dan 40% hebben van het marktaandeel van online betalingen, met oplossingen zoals ELV, Union Pay, QIWI en Alipay, omdat dit zeer populaire betalingsmethoden zijn.

In Nederland zijn Afterpay winkels meer en meer in trek om bij te shoppen. Soortgelijke tendensen zijn te vinden in B2B en B2G, waarbij het accepteren van facturen en bankoverschrijvingen van essentieel belang kan zijn. Dus hoe ontwerp je een betaalproces dat de gebruiker veel betaalmethoden biedt om uit te kiezen zonder onnodige wrijving en complexiteit te introduceren, of een keuze te maken voor verlamming?

Veelvoorkomende valkuilen bij betaalmethode design

In dit artikel bespreken we een aantal veelvoorkomende valkuilen bij het ontwerpen van de selectie van betaalmethoden, bekijken we een paar voorbeelden van ‘beste praktijken’ en geven we een reeks principes voor het ontwerpen van een goede interface voor de selectie van betalingsmethoden.

Valkuilen bij betaalmethodes

Hoewel het de voorkeur verdient om een ​​groot aantal betaalmethoden aan te bieden, kan het bombarderen van opties naar de gebruiker vreselijk mis gaan als niet veel aandacht wordt besteed aan de manier waarop de opties worden gepresenteerd, zoals blijkt uit de volgende voorbeelden. U zult merken dat de ontwerp valstrikken grotendeels draaien rond nabijheid en selectietoestand – die beide nog duidelijker tot uiting komen tijdens mobiel geoptimaliseerde uitcheckstromen, zoals waargenomen tijdens ons onderzoek naar mobiele bruikbaarheid gedurende het hele jaar, vanwege de afname in context veroorzaakt door kleinere schermafmetingen.

OfficeMax biedt creditcardbetalingen en Bill Me Later, maar de keuzerondjes die worden gebruikt om de actieve selectie aan te geven, worden zo ver uit elkaar geplaatst dat veel gebruikers de twee niet verbinden. De creditcardvelden verleggen de Bill Me Later-optie ver beneden de pagina, waardoor het keuzerondje ver weg van zijn tegenhanger verschijnt, namelijk het keuzerondje Credit / Debit card. Formulieren met twee kolommen, zoals degene die bij Costco wordt gebruikt, zullen vaak lijden aan soortgelijke problemen met de nabijheid.

Afterpay wordt het hoogste gewaardeerd

Tijdens onze usability-onderzoeken hebben we keer op keer gezien hoe radio iconen die ver uit elkaar geplaatst zijn grote verwarring veroorzaken bij de testpersonen – dat is wanneer ze helemaal niet over het hoofd worden gezien. De proefpersonen missen eenvoudigweg de noodzakelijke context om de implicaties van het keuzerondje te begrijpen en activeren vaak niet het keuzerondje, zelfs niet toen ze daarnaast bijbehorende velden vulden.

Nabijheid is van cruciaal belang bij het gebruiksvriendelijk maken van keuzerondjes – de opties moeten naast elkaar worden geplaatst zodat de gebruiker ze als een verzameling ziet die onderling geen keuzes zijn, en alle opties kunnen bekijken en vergelijken zonder over de pagina te hoeven scrollen.

Avon heeft misschien geprobeerd de problemen met de nabijheid van OfficeMax op te lossen door alle betalingsopties samen te voegen in een enkele bundel bovenop de creditcardvelden. Helaas introduceert dit slechts een nieuw probleem met de nabijheid omdat de selecties voor creditcards nu worden losgemaakt van het creditcardformulier.

In een poging om dit probleem met de nabijheid op te lossen, plaatsen sommige sites alle betaalmethoden in een lijst en duwen dan de actieve inhoud onder deze opties. Dit introduceert echter alleen een nieuw probleem met de nabijheid, omdat de actieve inhoud nu wordt “losgemaakt” van de geselecteerde optie (behalve wanneer de laatste optie is geselecteerd).

Het werkt in wezen als een “tabbladontwerp” maar zonder de nodige visuele aanwijzingen om de relatie tussen de geselecteerde optie en actieve inhoud te versterken. Tabbladen zijn een uitstekend ontwerppatroon en inderdaad een zeer geschikte oplossing voor dit ontwerpprobleem voor de selectie van betaalmethoden, maar tabbladen moeten worden ontworpen als werkelijke tabbladen om deze voordelen te effectueren.

Bij diapers.com zijn er zes groene “Apply” -knoppen, één voor elke betaalmethode, maar er zijn ook twee grote rode knoppen “Volgende: Review Order”. Dus op welke knop moet de gebruiker klikken? En welke betaalmethode wordt er gebruikt bij het klikken op een van die rode “Volgende” knoppen?

Het is van cruciaal belang dat de ‘actieve’ of geselecteerde betaalmethode voor de gebruiker absoluut duidelijk is. In het bovenstaande voorbeeld van diapers.com is dit helemaal niet duidelijk, omdat alle formuliervelden voor elke optie op de pagina zijn neergelegd. In feite selecteert de gebruiker nooit een betaalmethode, maar wordt verondersteld dat hij sommige formuliervelden invult en vervolgens een betaalmethode indient.

Dit veroorzaakt begrijpelijkerwijs grote verwarring bij sommige gebruikers en maakt de pagina intimiderend voor de rijkdom aan koptekst

Read More