This is a brief video of some things I learned designing a one-page checkout.
I've been working with a client on a one-page checkout experience. This video is a brief How To for designing your very own one-page checkout. The goal here is to relay some interaction design fundamentals that could be helpful if you are designing one as well.
Understand Process, Design Accordingly Ensure process is both understood and clear to the user. To do this work with your stakeholders to understand the business processes supporting checkout. In my example, I am working on a B2B flavored one-page checkout. In your own however you may not need a progress bar if it is truly completed on a single page.
Ensure Active States are Clear As a user is working through your one-page checkout they need to be subtly directed what to do next. In the case of each section (delivery, payment and order) the UI should clearly show what is active while restricting the non-active sections. In the example, I have indicated this by greying out the inactive sections and highlighting the active sections with color and label changes
Call to Actions Guide Process As a user is trying to checkout control the workflow by judiciously using call to actions to guide them through the process. Ensure that there is only primary button active at once and disable the others that may add confusion. In the example, I have the 'Review Order' button disabled until delivery, payment and order details are filled out.
Close Sections When Finished As the user completes the sections the call to action should close and direct them to another area. This will allow them to focus on the task at hand and make adjustments using a 'change' accordion later if they wish
Ensure Floating Order Summary Component The order summary is the last stop before the user clicks to proceed in the process. The order summary should always be within eyeshot of the user since it contains the primary call to action to proceed. Ensuring it floats up and down as the user scrolls is a good way to ensure it will be available when needed.
That's it! Thanks a lot for watching and please let me know if this content is helpful.
ABOUT The Author
Justin Watts
Sr. UX Lead, Usability Fanatic and Avid Record Collector
Product Design. UX Strategy. User Research.
Justin Watts is a user-centered designer with a decade of experience. He attended Kent State University and received a Master of Science degree in User Experience Design. He has worked on UX projects in enterprise, agency and startup environments. He has spoken a various usability engagements and is active in the UCD community. Justin created this blog to help share lessons and information learned over the course of his UX career.
