Daily UI Challenge #002: Checkout
Axure prototype for mobile checkout
Summary: Work smarter, not harder. Don’t waste time reinventing the wheel when you have bigger UX challenges to focus on, but do take the time to borrow best practices from people who have done their usability research.
I am doing the Daily UI Challenge as a warm up exercise in the mornings to get my creative juices flowing. I’ll admit I’ve spent more than one day on this particular “checkout” challenge. It still has many possible improvements to make it a fully functional template, but as we all know: perfect is the enemy of done.
Axure is my current tool of choice for creative interactive prototypes. It’s great for quickly mocking up an experience so you can feel how a flow works, not just imagine it.
Check out the interactive prototype on Axshare
I chose to do a mobile checkout flow, with the standard shipping, billing, credit card information collection as a baseline. In the future I may expand this prototype to include options such as paying with a fingerprint.
How little design decisions add up
Doing this challenge was a good reminder of all the little design decisions that come together for everyday experiences. We tend to take those for granted when working on big new experiences.
You don’t always have to recreate the wheel and design something revolutionary. Often the best thing to do for your users is leverage existing knowledge to create the best frictionless experience.
Here’s four of the little design decisions from this challenge that leverage existing knowledge:
1. Functional Animation
Animation is one of those “the design is in the details” tools that can be used to improve user understanding and make interfaces feel intuitive. In this prototype, I used animation to orient users to where they are in the checkout flow.
- Moving forward as they advance (content slides left so the user feels like they move to the right)
- Moving backward as they go back (content right right, so the user feels like they move to the left)
In Axure, the quick way to include this orienting animation is using dynamic panels and setting the “in” and “out” animation transitions when switching between states. I used the “slide left” for the incoming state, and “fade” for the outgoing state. This makes the transition feel as if we’re progressing forward to the right.
Smashing Magazine has a much more in depth explanation of functional animation if you want to learn more.
2. Progress Tracker / Indicator
Another way to orient people and answer the question of “where am I?” is to provide a progress tracker with a clear final step. The best progress tracker is honest and encapsulates the whole task from start to finish such that the end is really the end.
True Story: I worked on an out-of-box experience (OOBE) for a large consumer company that had people asking aloud “am I done-done now?” because they had false positives for being done in the middle of the setup progress. We worked to fix that, and I learned a lot about how your OOBE reveals how your company’s organizational structure to your end users along the way.
I chose to make the last step stand out from the previous steps by using a color that highlights the final action and the final step in the progress tracker.
In Axure, I used the interaction styles to make a quick and dirty progress tracker. The normal (enabled) state is when a step is completed and therefore clickable to return to that previous step. The disabled state is for a future step. Lastly, the selected state is for the current step.
I setup these styles in the widget style editor so I can easily change the colors. Then for the final step where I wanted to highlight it when selected, I made a change based on the style in the interaction panel.
Here’s a deeper dive into progress trackers by Nick Babich.
3. Put Your Credit Card Form in a Box For Better Security
I learned something new in a quick search about best practices for credit card entry: simply encapsulating the credit card entry into a box gives an increased perception of security. This is a great example of leveraging our psychology to make a better experience. Of course you must have all the backend security in place to fulfill this promise of security.
To quote the 2016 research summary from Baymard Institute:
Users have little technical understanding of form field security and rather go by their perceived sense of security — something that is largely determined by the site’s brand recognizability and any visual cues surrounding the payment form.
The user’s perceived level of security can be lifted through the use of visual clues like encapsulating the credit card fields with a solid background color, having site seals in close proximity to the card fields, using (effectively “meaningless”) padlock icons, and other visual reinforcements.
4. “Full Name” is Better Than “First Name” and“Last Name”
Using a single full name field has multiple benefits:
- Reducing form complexity: People get overwhelmed and feel form fatigue from seeing too many fields.
- Cultural differences: Some people only have a single name
- Faster to type: People are much more accustom to writing their full name out in one go than switching between fields between their first and last name.
There are a few more tips from from Baymard Institute’s 2016 research on form complexity that I also incorporated into my prototype.
As I said up front, perfect is the enemy of done, so here is the list of things missing from this checkout flow prototype, but you should look into if you’re creating a checkout flow:
- Inline error checking
- Make it work with Chrome auto-fill
- Support decision making when editing the cart
… and more for the “perfect” mobile checkout.
Not everyone can be an expert in everything, but anyone can learn from the expertise of others. I’m going to wrap up this “daily” challenge so I can move into the next one and learn something new yet again.
