Autocomplete is implemented on your website by your development team or implementation partner. The way it’s set up plays a key role in how easily shoppers can find products. In this guide, you’ll find best practices to help you design a smooth and effective search and autocomplete experience with Elevate.
1. Before the search (The search input field)
Purpose
Ensure the search feature is easy to find, easy to use, and sets clear expectations for the shopper.
1.1 Visibility & placement
- Place search in a highly visible, persistent position
- Desktop: Visible search field in header
- Mobile: Visible search icon that expands into input field
Principle: Search must never be hidden or hard to find
1.2 Input field design
- Desktop: Use a wide input field to support longer queries
- Mobile: Expand input to full width on focus
1.3 Placeholder text
- Use clear guidance:
- “Search for products, brands or inspiration”
- Avoid vague placeholders like “Search”
1.4 Visible search queries
- Keep the user’s query visible after search
Principle: Users must be able to refine queries without retyping
2.When the shopper initiates the search (Empty state)
Trigger
The shopper taps or clicks into the search field
2.1 Show a structured empty state
Never show an empty dropdown. Instead, you can make use of Recent or Trending searches.
A. Recent searches (Voyado Elevate feature)
- Display previously searched queries
- Include:
- Clear all option (mandatory)
- Optional: remove individual items
Principle: Users must be able to fully control and clear search history
B. Trending / Popular searches (Voyado Elevate feature)
- Display high-performing or trending queries
- Use Voyado Elevate’s built-in Trending searches feature
Principle: Guide users who don’t know what to search for
2.2 Design & behaviour rules
- Clearly separate sections:
- “Recent searches”
- “Trending searches”
- Limit each section to 5–10 items
- Clicking any item: → Executes search immediately
3. Autocomplete results
3.1 Layout & styling
3.1.1 Grouping of suggestion types
Group autocomplete into:
- Search suggestions (queries)
- Product suggestions
- (Optional) Content suggestions
Principle: Each group must be visually distinct
3.1.2 Visual separation
Use:
- Section headers (e.g. “Suggestions”, “Products”)
- Spacing or dividers
Principle: Users must be able to scan groups instantly
3.1.3 Number of suggestions
- Queries: 5–10 items
- Products: 3–8 items
- Keep total visible items under ~15
Principle: Do not overload users with too many options
3.1.4 Product suggestion design
Each product must include:
- Image
- Title
- Price
- (Optional: brand)
Principle: Product suggestions must be visually scannable and informative
3.1.5 Highlighting (Critical)
Rule:
Highlight the autocompleted (predicted) part of the query
Example:
dress → dress **black**
dress → dress **long sleeve**
Why highlighting is important:
- Enables fast comparison between suggestions
- Improves scanning speed
- Makes system suggestions explicit
Rule of thumb: Do NOT highlight typed text — users already know what they typed
3.2 Interaction behaviour
3.2.1 Allow free search submission
Key principle
Users must always have a clear, explicit way to execute their query without selecting a suggestion
Desktop
- Support submitting the query via Enter key (mandatory)
- Provide a visible submit option in the UI
Best practice:
- Include a “Search for ‘[query]’” option as the last item in the autocomplete list
Example:
Search for “dress”
Principle: Users must always have a clickable way to submit without selecting a suggestion
Mobile
- Use a search-optimized keyboard (Enter key labeled “Search”)
- Support submission via:
- Keyboard “Search” button (primary)
- Visible submit option in the UI (required)
Best practice:
- Include a “Search for ‘[query]’” option in the autocomplete list
Optionally include a submit button/icon inside the input field
3.2.2 Clicking suggestions
- Query → navigate to search results
- Product → navigate to product detail page
3.2.3 Keyboard navigation (Desktop)
- ↑ ↓ Navigate between suggestions
- Enter (after navigation)->navigate to highlighted suggestion
- Enter (no navigation) → Submit typed query
- ESC → Close autocomplete
Principle: Navigation must match the vertical structure of the UI
3.2.4 Mobile interaction
- Use large tap targets
- Ensure clear spacing between items
- Avoid dense layouts
Principle: Prevent misclicks and frustration
Article last updated