.svg)
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The site header with branding, auto-suggest search, support contacts, and main navigation
Take a look at the examples by Wunderfront. For mobile, it is essential to keep the search input open, navigation, and cart quickly accessible, and branding concise. Try also bottom navigation on mobile! Be thumb-friendly and boost conversions!
The clear page title with an option to return to the previous view
Clearly indicate the page the user is on and enable the user to return to the previous screen easily.
The password reset inputs
Ask users for their previous password (and offer an entry to the recovery flow), and after that, as the user for a new secure password that will overwrite the old one. The new password input should provide a visual and auto-updating validation for the rules required (for example, if you require 1 upper case letter, 1 symbol, 1 number - show a grayed-out checklist that goes, for example, green step by step when meeting the rules). And as the last step enable the user to verify and Apply changes from the main call to action button.
The recently viewed products
Help the returning visitors become visitors much faster, and also consider moving this section below the Hero campaign banners for returning users (on homepage)! This an amazing opportunity to take the user to the checkout!
The pre-footer: The bottom benefits
Visually and textually remind site-wide why shop with you. Keep it super short and have 3-5 benefits visualized and communicated.
The pre-footer: The payment options
Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.
The site footer with bottom navigation and trust marks
The site footer is like the air you breathe in, it has to exist. Showcase trust badges/marks, top navigation items, key categories, contact pages, FAQ, About us pages, social links - and all the terms and privacy pages. And do not forget the delivery information and return handling pages! You can also use the area to acquire leads and make people subscribe to your newsletter, but there are better ways.
The bonus checklist
Provide clear UI messages on success and error, and be clear on what went well and what needs extra attention
Communication is essential, even when the user does everything correctly. Indicate success and areas where extra attention is needed.
The “please avoid” checklist
Avoid inline form labels
Inline form labels act like a blindfold, it hides the input purpose and people often forget what the input was about in the first place. As an alternative, you can use the Material Design guidelines by Google, to have the inline input look and feel, but still keep the information visible.
.png){kind=icon}
.webp){kind=logo}
.png){kind=logo}
