Your own development team or implementation partner will implement autocomplete on your website. When doing so, it's important that they use the autocomplete functionality correctly, as it will impact all shoppers' ability to find products efficiently. Here, we provide you with best practices for designing the autocomplete design and how it will behave when shoppers are interacting with the search bar.
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
👉 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
👉 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
👉 Users must be able to fully control and clear history
B. Trending / Popular searches (Voyado Elevate feature)
- Display high-performing or trending queries
- Use Voyado Elevate’s built-in Trending searches feature
👉 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
👉 Each group must be visually distinct
3.1.2 Visual separation
Use:
- Section headers (e.g. “Suggestions”, “Products”)
- Spacing or dividers
👉 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
👉 Do not overload users with too many options
3.1.4 Product suggestion design
Each product must include:
- Image
- Title
- Price
- (Optional: brand)
👉 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 this matters:
- Enables fast comparison between suggestions
- Improves scanning speed
- Makes system suggestions explicit
👉 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”
👉 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
👉 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
👉 Prevent misclicks and frustration
Article last updated