250 Powerful E-commerce Design Tactics (That Actually Work) | Part 1 – A killer Product Search Experience

  • Posted by: Vladimir

“Never let your campaigns write cheques that your E-commerce platform can’t cash.”

70% of shoppers abandon their carts and leave E-commerce sites without purchasing anything. Window shoppers aside, a lot of this comes down to site owners’ negligence of UX as a key part of their strategy.

Poor clarity on full pricing, clunky search, lengthy forms, and not taking into account local habits for multinational websites are the most common sales killers, but each of these issues is solvable with design adjustments.

Need to fix your E-commerce performance, or benchmark your online retail project? Get started with the first section of a super convenient checklist of 250+ tactics, straight from an upcoming easy-to-browse 31Ten eBook on best E-commerce UX practices.

Sure, there are entire websites & research dedicated to online retail design. Our aim here is not to replace them, but instead, to offer a comprehensive and structured repository of key global E-commerce best practices as well as China-specific conventions & affordances you should be considering. We wanted to be as exhaustive as possible, at the risk of including niche aspects that may not apply to all businesses’ target audiences and buyer personas.

So why start with search? Because it is one of the foremost E-commerce buyer journey entry points.

Watch out for the following icons indicating the suitability of each tactic:

ecommerce china

I. The Search bar


1.Display the search field prominently, and avoid icon-only search bars that increase the cost of interaction – Read more here

Vlad’s take: “The center-top position is standard for E-commerce, vs the traditional upper-right corner.”

ecommerce china search bar


2. Do use a universal search trigger such as “Search / 搜索” or a magnifying glass button

Vlad’s take: “Given the importance of search in E-commerce, this is not the right place to show off creativity” Read more here

ecommerce china search bar


3. Use a separate button instead of an icon embedded within the search bar

Vlad’s take: “This helps users recognize there’s an additional step required to trigger the search action — even if they decide to do this by pressing ‘Enter’ on a desktop. On mobile, it’s the opposite- the search field query should be triggered by the keyboard search icon since it is closest to the fingers. Offering a button next to the search field on mobile may fragment attention.”

ecommerce china search bar button


4. Use a search field long enough to accommodate typical search length

Vlad’s take: “It depends on your vertical, but on average, 82% of requests worldwide fall within 2 words, with 27 characters covering 90% of search content. Consider using a search box that expands when clicked.” Read more here – and here

ecommerce china search bar bar


5. Use hint labeling within your search bar

Vlad’s take: “Use a placeholder clearly showing what can be searched for (categories, products, colors, …) – leaving it empty is a missed opportunity.”

ecommerce china search bar hint


6. Pin the search bar to the top of the page for long or infinite scrolling

Vlad’s take: “Definitely a Chinese standard.”

ecommerce china search bar pin

II. Recognition


7. Offer to scan product IDs: Code bars, ISBN, etc.

Vlad’s take: “All Chinese E-commerce apps offer it. You can integrate WeChat barcode recognition directly into your web pages.”

ecommerce china product scan

8. Offer product image recognition

Vlad’s take: “Again, a China standard. The West is catching up on the trend.” Read more here

ecommerce china product picture recognition

9. Offer voice search

ecommerce china voice search

III. Query assistance


10. Use auto-complete and/or auto-suggest based on the first few letters/characters entered

UXMag: “The purpose of auto-complete is to resolve a partial query, i.e., to search within a controlled vocabulary for items matching a given character string. The purpose of auto-suggest is to search a virtually unbounded list for related keywords and phrases, which may or may not match the precise query string.” Read more here

ecommerce china auto complete

11. Use emphasis in auto-complete or auto-suggest additions

Vlad’s take: “Style the given query and suggested words differently so that users can easily recognize what can be added.”

ecommerce china suggestions

12. Offer to narrow down search query to a specific category or scope read more here

ecommerce china category drop down

13. Additionally, use search scopes in your auto-suggestions

ecommerce china search scopes

14. Set off your search drop-downs or panes

Vlad’s take: “ Blur the rest of the interface, or use shadows, contrast, or fades to focus the attention on the search assistance.”

ecommerce china search bar drop down

15. Introduce results directly in the search suggestions

ecommerce china results on search bar drop down

16. Accommodate for spelling errors, typos and homonym Chinese characters

Vlad’s take: “Use a subtle message like ‘Users also searched for [corrected query]’ right above the list of search results.”

ecommerce china spelling check

17. Don’t erase users’ queries after they hit the search button

Vlad’s take: “Keep the original text in the search box so users don’t have to type the entire query again when unhappy with the matching results.”

ecommerce china shorcuts on save

18. Offer shortcuts to related searches or trending search keywords

Vlad’s take: “It’s a Chinese E-tailer staple, and Western E-commerce websites should test these functionalities out as they might resonate with certain categories of shoppers.

ecommerce china shortcuts on search bar

19. Offer shortcuts to recent search history upon clicking search bar

Vlad’s take: “Again, a China standard I’d love to see implemented more often in Western E-commerce.”

ecommerce china search history

20. On mobile: Search pane with search shortcuts, history, and suggestions triggered when search bar is clicked

ecommerce china search suggestions

21. Auto-suggest Chinese characters from pinyin input

Vlad’s take: “It’s always good to think of users who’ve forgotten to switch their keyboards back from Latin characters.”

ecommerce china search pinyin

22. Show the number of matching results for each suggestion

ecommerce china result volume

IV. Results display


23. Use search loading animations or placeholders

Vlad’s take: “If search loading is likely >1 second, it helps to influence the perception that searching times are shorter than they really are, and make the user feel in control” Read more here

ecommerce china loading animation

24. Avoid giving dead-ends (0 results) when the search produces no matching results

Vlad’s take: “Provide products from similar categories or variations over the user’s search query while clearly indicating this has been done.”

ecommerce china suggested products if term not found

25. Offer a dedicated “Search Within” field to search inside the category path or results list

Baymard: “Up to 50% of users assume that searching again on the results page will trigger a result-wide search, and not a site-wide or category-wide search, particularly on mobile.” Read more here

ecommerce china search within feature

We are passio- no, obsessed with creating the very best, up-to-date online user experiences that translate into more checkouts and a higher percentage of repeat customers.


Want to improve your E-commerce platform’s usage, retention, sales and conversion rates?


Follow us on WeChat (thirty-one-ten), LinkedIn, or leave us your email address below to be notified first when the eBook is published!

<< Click here to be notified when the ebook goes live >>

—– Authors —–

• Vladimir Garnele 

UX-UI designer and partner at digital agency 31Ten. Vladimir manages and regularly participates in design-related WeChat groups. He put a lot of thinking into how these new features would fit nicely within WeChat’s current user experience.

Vladimir writes about design and user experience best practices in China and shares case studies. Previous posts include:

• Joan Lin 

Joan is a UX-UI Designer working at 31Ten since 2017. She has more than 2 years of experience in mobile apps, H5, graphic and web design. She has the end-to-end design process experience including user flows, wireframes, mockups, and prototypes.

Author: Vladimir
I’m Vlad, a passionate UX-UI Creative based in Shanghai, China. I help companies committed to digital transformation to create memorable experiences through user centered design..

Leave a Reply