7 tips voor het ontwerpen van een betere afrekenpagina
Met de feestdagen voor de deur, zullen velen van ons online winkelen. (OK ... misschien veel winkelen!) De afrekenpagina van een website kan die ervaring onvergetelijk maken, of een ervaring die je zou willen vergeten.
Als u een afrekenpagina ontwerpt, zijn er zoveel overwegingen: functionaliteit, bruikbaarheid, beveiliging en ontwerp. Het laatste element is iets waar elke ontwerper impact op kan hebben. Een afrekenpagina mag niet als bijzaak worden ontworpen; het is misschien wel de belangrijkste pagina in de online winkelervaring.
Maak het visueel
Dit klinkt misschien als een voor de hand liggend idee, maar de afrekenpagina van een e-commercepagina moet visueel zijn. Te veel websites maken er een basisvorm van.
Dit is om verschillende redenen belangrijk. Een visuele verbinding tussen de afrekenpagina's en de rest van de site zorgt voor geloofwaardigheid van het merk. Als de afrekenpagina eruitziet als de rest van de site, voelt deze veilig aan en hoort bij de site. Visuals, van logo's tot items in de winkelwagen, helpen gebruikers te onthouden waarom en waar ze zich op internet bevinden. (Vergeet niet dat een groot deel van de wereld een behoorlijk afleidende groep internetgebruikers is.)
Dus wat voor visuals moet je gebruiken?
- Afbeeldingen. Elk item moet minimaal worden vergezeld van een pictogram dat aangeeft wat de gebruiker koopt.
- Logo's. Het bedrijfslogo moet altijd duidelijk zichtbaar zijn (en klikbaar om terug te gaan naar de rest van de site).
- Grote knopen. Voer call-to-actions zoals 'Toevoegen aan winkelwagentje', 'Item bijwerken' en 'Nu kopen' groot, kleurrijk en visueel aantrekkelijk. Knoppen moeten gemakkelijk te vinden zijn en ervoor zorgen dat u erop wilt klikken.
- Kleur. Te veel afrekenpagina's zijn allemaal wit met omlijnde vakjes. Het is OK om kleur te gebruiken. Behoud het kleurenschema van de rest van de website op de afrekenpagina.
- Typografie. Tekst moet eenvoudig en gemakkelijk te lezen zijn. (Mensen hebben de neiging om eenvoudige lettertypen zonder schreef of schreef meer te vertrouwen dan een script of nieuw lettertype.) Maar u kunt ook plezier maken met grotere tekstelementen.
Inclusief betalingslogo's en veiligheidszegels
Voeg afbeeldingen toe die gebruikers een goed gevoel geven bij het winkelen bij jou. Hoewel de meeste mensen begrijpen dat ze online met een creditcard kunnen betalen, wordt dit idee versterkt door kleine logo's naast betaalknoppen.
Het is een kleine maar geruststellende visuele aanwijzing voor gebruikers. Het kan helpen om verwarring te voorkomen over welke soorten betalingen worden geaccepteerd.
Vergeet niet om logo's op te nemen voor alle betalingswijzen. (Te veel sites onthouden creditcardlogo's maar vergeten PayPal of Apple Pay.) Houd de afbeeldingen klein en groepeer ze op een georganiseerde manier. (Gelukkig voor ontwerpers worden de meeste van deze elementen goed weergegeven in kleine formaten en hebben vergelijkbare beeldverhoudingen.)
Overweeg om voor dit doel een speciale gebruikersinterfacekit met logo's te ontwerpen of te downloaden. U bent niet beperkt tot voorraadlogo's van het bedrijf. Word gewoon niet te wild met het ontwerp; het doel is dat gebruikers de logo's op een heel klein formaat op het scherm herkennen.
Overweeg om afbeeldingen te vergroten
Afrekenpagina's waarmee gebruikers nog een laatste blik op items in de winkelwagen kunnen krijgen, zijn een geweldige bonus. Hover-effecten die elk item in de winkelwagen of een pop-up vergroten, kunnen het voor gebruikers gemakkelijk maken om potentiële aankopen nog een laatste keer te zien en de frustratie te elimineren dat ze terug moeten navigeren om een kleur of maat te controleren.
Een andere optie is om extra grote miniatuurafbeeldingen te maken voor items op de afrekenpagina. Deze extra afbeelding kan een gebruiker helpen bij het bevestigen van zijn of haar winkelkeuze en zich nog beter voelen over de aankoop.
Te veel ontwerpers verzuimen überhaupt afbeeldingen op te nemen, waardoor het gemakkelijker wordt om een winkelwagentje achter te laten. Zie het op deze manier: een afbeelding bij het afrekenen staat gelijk aan in de rij staan bij een fysieke winkel met een artikel in de hand. Op dit moment veranderen niet veel mensen van gedachten.
Gebruik tabellen
Informatie in de winkelwagen moet tot in de puntjes worden georganiseerd. De eenvoudigste manier om dit te bereiken, is door de wagen te ontwerpen in de vorm van een tabel of een vergelijkbaar op raster gebaseerd formaat.
Gebruik kolommen en rijen om elk item, een afbeelding, beschrijving, hoeveelheid, prijs en andere relevante informatie weer te geven. Items moeten verticaal in kolommen worden gesorteerd met andere informatie in de bijbehorende rij. Deze manier van sorteren is essentieel voor karren met meerdere items, zodat gebruikers niet gedwongen worden om over schermen te bewegen in plaats van op en neer (wat comfortabeler is).
Gebruik binnen elke tabel of elk raster een consistente uitlijning. Links komt het meest voor. Overweeg ook hoe de prijzen worden uitgelijnd, zodat ze gemakkelijk op het scherm te zien zijn. Idealiter zouden de prijzen zo moeten zijn opgesteld dat de cijfers voor en na een periode voor elk artikel op dezelfde posities staan.
Denk na over functionaliteit
Hoewel veel van de algehele functionaliteit van een kassa-paginaontwerp misschien niet de richtlijn van een ontwerper is, is het iets dat moet worden overwogen. (Of ontwerpers of ontwikkelaars deze concepten maken, kan per team verschillen.)
Belangrijke functionaliteitsproblemen die ontwerpelementen nodig hebben, zijn onder meer:
- Mogelijkheid en gemak van printen vanaf meerdere schermen, inclusief voor en na het afrekenen.
- Voeg wenslijstfunctionaliteit toe of een andere methode om items op te slaan voor latere aankoop. Maak die informatie deelbaar.
- Te veel betaalpagina's worden donkere gaten zonder links naar andere delen van de winkelervaring. Vergrendel gebruikers niet op pagina's waar ze niet uit kunnen komen.
- Sta in-cart bewerking van items toe.
- Overweeg een afdrukbare factureringsoptie of pagina. (Dit is vooral belangrijk als uw klanten zakelijke klanten bevatten.)
- Maak het gebruikers gemakkelijk te begrijpen hoe ze bestellingen kunnen wijzigen, wijzigen of bijwerken. Veel afrekenpagina's bevatten naast elk item een aantalteller. Maak dat nummer gemakkelijk te bewerken (en het zou automatisch moeten worden bijgewerkt).
- Maak het gemakkelijk om een account aan te maken na het afrekenen. Niet elke klant heeft eerder bij u gewinkeld. Het moet snel en gemakkelijk zijn om een aankoop te doen en u vervolgens aan te melden voor een account. Bedek eerst de verkoop.
Sleutelpictogrammen moeten op elke pagina verschijnen
Nadenken over het afrekenen van pagina-ontwerp, begint op het moment dat het website-concept een e-commerce-optie begint op te nemen. Bepaalde ontwerpelementen moeten door de hele website worden gedragen.
Pictogrammen voor toevoegen aan winkelwagentje en afrekenen moeten door het hele ontwerp worden gedragen. De knoppen of navigatie-elementen moeten hetzelfde ontwerp (of vrij gelijkaardig) hebben als de overeenkomstige actieknoppen op de afrekenpagina.
Onthoud mobiele gebruikers
Een groeiend percentage van de verkoop vindt plaats op mobiele apparaten in plaats van op desktopcomputers. Denk ook aan het ontwerp van uw afrekenpagina en het gebruiksgemak voor deze klanten. (Niets is frustrerender - en al te vaak - dan een website die tot de afrekenpagina op een telefoon werkt.)
Ontwerp elementen met tikken en vegen in gedachten. Knoppen moeten groter zijn en gemakkelijker te zien. Het formulier moet diepere vakken bevatten, zodat ze gemakkelijk kunnen worden gebruikt zonder dat er op het scherm hoeft te worden ingezoomd.
Als het gaat om mobiele gebruikers, is het net zo belangrijk om alles op één pagina te bewaren. Maak een afrekenpagina die scrolt in plaats van door meerdere schermen te bladeren.
Gevolgtrekking
Het ontwerpen van een afrekenpagina kan voor elke ontwerper een grote taak zijn. De sleutel is iets waar we het vaak over hebben in de ontwerpgemeenschap: houd het simpel. Ontwerp een eenvoudige schets met minimale effecten en focus op bruikbaarheid en u zult eerder succes vinden.
Onthoud de gebruiker wanneer u nadenkt over afrekenpagina's. Streef ernaar een pagina te ontwerpen met visuele aantrekkingskracht, logo's om gebruikers te begeleiden en te informeren, veel afbeeldingen, een georganiseerde lay-out, functie, pictogrammen om de verkoop te begeleiden en te promoten en een mobielvriendelijke interface.
Stock Foto's Hoffelijkheid van Creatieve Markt.
