Payment interactions are incredibly important. They are the culmination of all other efforts on a site or app. To lose people here is to waste all of your other efforts. Around 68% of people abandon their carts before checkout, which amounts to $4 trillion in unobtained spending. If you have an awesome payment page, users who are on the fence about pulling the trigger will be delighted and will go forward.
As digital technology progresses quickly, there are many different ways that payment can occur within an interface. As well, many types of products will call for different types of interactions. So, what kind of experience do you want your users to have when they pay? Below is a curated selection of some of the best payment service interactions from designers around the world to inspire the project that you’re working on.
Messenger Bots and Partial Payment
Credit: Isil Uzum
Isil Uzum gives us a peek at “the end of apps as we know them.” This payment service for a travel app operates within a messaging app to offer the user a sequence of actions. Uzum shows us how two friends can remotely survey ticket pricing together, then make a purchase collectively. This design not only makes checkout more efficient, but it also provides a social element to payment that would not otherwise be possible. Imagine that users could not only book their flight this way, but also the rest of the services for their trip ahead.
Payment and Delivery Tracking
Credit: Saptarshi Prakash
Although this app has been designed specifically for Domino’s, the design could easily be adapted to any delivery service. Saptarshi Prakash designed an interface with a quick way to choose between cards, then keep track of how long until you have to put on your bathrobe and get to the door. If the app just closes once payment is made, the user might feel detached from the service and unsure about their delivery. The timer and option to call the store are simple efforts to tell the user that their delivery is in good hands.
Workflow Payment
Credit: Barthelemy Chalvet
Barthelemy Chalvet show us an interface for a social payment service to keep tabs on which of your friends just bought Beyonce tickets. The user experience centers around a central button that accesses the essential actions. With a quick tap, you can choose to pay to a friend, set up a recurring payment, or deposit some cash.
Checkout Flow
Credit: Ramakrishna
Digital representations of that plastic thing in your wallet are becoming popular in many payments apps and services. Ramakrishna designed an intuitive interface for users to save this information so that they can quickly access it during payment. The graphic makes for a visually appealing interface, but also gives users a sense of realism that can be lost in digital products.
Tinder Travel
Credit: Gleb Kuznetsov✈
The main detail to notice from this interface is the thumbprint identification at the end of the payment. The interaction flows seamlessly with the rest of the payment process, but provides a more tangible confirmation for payment than just the on screen animation. For products that handle payments as significant as a flight, this security feature is something to consider.
Card Input
Credit: Oliver Schmid
This interface is an example of a payment interaction that might be more applicable to users who don’t frequently use the same service. As the user wouldn’t have a card saved with the product, Oliver Schmid makes entering in information as easy as possible. The web form fills the screen so that our thumbs don’t have to search for hard to tap fields.
CC Payment Swipe To Confirm
Credit: Sam Atmore
Sam Atmore addresses a simple interaction concept with this design for a swipe to confirm button. The swipe action not only simulates the physical action of a credit card being scanned, but it also means the user has to intentionally follow through with the swipe action. A button can allow for an unintended tap, so by using the swipe we are able to eliminate an accidental confirm errors that may occur if a customer realises they have handed over the wrong card.
Citrus Onboarding
Credit: Parallel Labs
Onboarding is a relevant process for any digital product. Here is an example of a fun, but intuitive set of animations for a social payment app. The sequence distills the essential functions of the app that users will benefit from.
Payment loading
Credit: Luboš Volkov
Tired of the same old spinning wheels? Toptal designer Lubos Volkov gives users something interesting to watch while their payment loads. The element is a part of a bigger concept that you can check out on his Dribbble.
Payment Concept for Online Charity
Credit: Handoko Dyan Aditya
Payment services aren’t just for businesses. Handoko Dyan Aditya offers an easy way to support those in need by isolating a cause and offering users to donate to a selection of organizations. Aditya imagines that payment is easiest with NFC instant payment. What do you think?
Conclusion
As with all design problems, the payment process requires attention to function, usability, security and aesthetics. However, since checkout is often the culmination of an app’s entire efforts with a user, this point of the experience should be dealt with great care. The question is what experience is best for your product: something light hearted like the delivery tracker, the more secure thumbprint confirmation, or the social in-messenger payment? Perhaps some new breed of all-of-the-above?
This article was originally posted on Toptal
No comments:
Post a Comment