.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!
Understand the core user psychology and intent, and make your search smart/functional
For example, when users search exact title and product ID, and it does not show up - users assume the item does not exist. Therefore make your search smart and allow it to read data from all product aspects (title, name, category, brand, attributes, descriptions, media, features, tags, theme (such as "winter, party, birthday"), slang/symbols (example: Sz instead of size; sweaters $50-$100), etc.).
Please users with a prominent and "important" search design
The search is the navigation, do not hide it. Make it highly visible - and always showcase a submit/search button for better clarity (yes, even on mobile!).
Please users by showing them the results instantly via an auto-suggest list
While typing, the site search must do a lot of work behind the scenes, and as soon as there is a relevant match, show the results without going to a full search results page (and highlight the part of the text that matches precisely with the term). However, you must allow users to see the Full page and have a call to action for that. Always allow users to modify or remove their search terms easily.
Show product key data on the search autosuggest results
Show categories where a match was found, product thumbnail, title, and price - as a minimum baseline. If no results are to be found, present suggested search terms or categories.
Remember what the user has been searching, and also suggest new searches
Present a recent search block while opening the search and help the user continue their journey. You should also explore offering the user new search terms dynamically or manually. Enable users to clear their search history and opt out of suggestions!
Autocorrect misspellings and make the search predict
Misspellings are a big issue, and asking the user to be perfect and spot-on on grammar, is a nice dream. The search must predict and auto-fix key spelling issues, as nobody is perfect. A few examples: "nik shoes > nike shoes; snoy camera > sony camera; sirup > syrup; dinner ware > dinnerware; trainers = also shoes; shades = sunglasses; blck shirt > black shirt" and the list goes on.
Show suggested searches or featured products or categories instead of "0 results found"
0 results, in short, is a dead end, which is something to avoid. Help people to continue their flow and suggest items and categories to discover. The more relevant, the better.
Enhance the search with a seasonal-biased results formula
While searching for jackets in November or December, highlight those nice warm winter jackets while watching the fireplace crackling. And while doing the exact search in the summer, highlight something thinner and light!
Do cover the search results basics by following these guides
The results page should be as accurate as possible, filtered down to the specific product variations matched, not all of them. You can use the Category page guide to keep the page spot on and the Filters guide to have those spotless!
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
The “please avoid” checklist
Avoid search being overly slow
As you already know, site speed = money in your pocket.
Avoid showing irrelevant and "not-matching" results
While searching for a t-shirt, and presenting a luxurious and formal shirt instead, can be a showstopper.
Avoid showing 0 results, there is always something to sell
Suggest, recommend instead of telling you have literally 0 items to offer for a search gone wrong.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
.webp){kind=logo}
.png){kind=logo}
