Responsive checkout design optimisation
- This is a work in progress, not all responsive elements have been reviewed and tested.
- Design - Prototypes are for referencing only.
- Content - Any visuals and copy not aligned to brand properties are placement holders only.
What good looks like, and how success in measured
Layout adheres to design principles and respectful of the brand guidelines
- Avoid using multiple columns
Keep designs clean and easy to scan for all viewports by using a single column layout
- Minimise the forms
Make the process efficient and mitigate any duplication
- Minimise typing
Use the right keyboard for mobile, auto pre-fill, card recognition, etc
- Offer field focus
Sign-post and orientate users on the page
- Meaningful pop-overs
Provide users prompts to migitage confusion and potential mistakes
- Offer validation on the go
Sign-post mandatory fields and support users with real time errors
- Allow passwords to be visible
Allow the option to mask instead
- Let users know where they are
Provide a clear path to completion, improve orientation and an easy way back
- Ensure the contents for each step are responsive
Horizontal space is limited for mobiles, a vertical progress tracker is preferred.
- Optimise the page layout
Reduce cognitive load using clickable elements where possible
- Follow through
Let users know once they've completed and reinforce trust signals