Text Field

• Placeholder: "Search for products"

• Maintain search query after search is executed
• Once a character is entered into the field, show the "X" icon.
  • Function: "X" icon removes the entered query from the field.
• Begin showing Recommendations with the first keystroke to create a consistent search experience and impression of speed for users, while also reassuring them in their interactions with instant visual feedback.

• Value: search icon

• Upon Text Field focus, the style of the button will change to flat in order to blend better with the dropdown.
• onclick: perform the search using the query that is entered in the text field.

Quantity per Section

Max Quantity

User can use the up and down arrow keys on the keyboard to navigate through the recommendation list. The focused item will use the hover styles, and the query in the text field will update to match the focused element. Allowing the user to navigate and select the autocomplete suggestions with their keyboard is essential (see guideline #369)

If the user hovers over a recommendation item with their mouse, the item will appear in the hover state, but no change is made to the query until the user clicks on a recommendation item.

When the user presses "enter", whatever query is populated in the text field will be submitted.

Label: "Removed from search history"

Link: "Undo"

Message shows for up to 7 seconds.

If the user pushes "Undo" while the message is shown, the item will be returned to the list.

Title: "Suggestions"

Icon: Search Icon

Provide “Suggested Search Queries” for users, instead of just categories or results (products).

Search Query Suggestions should provide the following benefits to the user:

• Reassurance
  As the user types and autocomplete suggestions related to the entered query appear, the user is reassured in the usage of those keywords and that the site carries products related to such searches.

• Exactitude
  By displaying increasingly detailed suggestions, the user will be encouraged to submit a more detailed search query. The suggestions may indeed help the user remember details of a product name and in this way help them find the exact product they are looking for, even if the user initially could only recall the base name of the product (and not, for example, the specific model).

• Exploration
  A few subjects described autocomplete results as “the computer” finishing their thoughts. In other words, they felt they could begin typing in a thought and then have different paths suggested to them. Thus, autocomplete suggestions enable users to use search for more explorative product-finding tasks too.

• Spelling
  Good autocomplete suggestions will automatically correct misspellings (correcting “Mac Book Air” to “MacBook Air” in the suggestions) and suggest meaningful word replacements (e.g., suggesting “laptop adapter” when the user types “laptop charger”). However, be sure not to suggest redundant spelling variations (see guideline #368).

• Guidance
  By suggesting alternate paths and related queries, the site can guide its users toward relevant (and high-profit) content on the site. This is especially true of time-sensitive content – such as special offers and seasonal campaigns – and relevant search scopes (see guideline #361).

• Probing
  Some subjects used the number and accuracy of autocomplete suggestions to gauge the types of queries the site supported. For example, if “spring jackets” was suggested after typing “jackets”, the subjects would conclude that the site supported Thematic and Product Type queries. They also used it to gauge the range of the site’s product catalog – for example, if search suggestions grew increasingly detailed yet remained relevant, the subjects generally perceived the site to carry a lot of products related to the base part of their query.

Suggested search queries requires 2 parts to make it useful:

• Search is able to apply filters automatically to the results page

• the site recommends (or suggests) useful search queries to the user that would apply accurate filters to the results page.

Title: "Categories" or "Brands" respectively

Label: 

• Top Level: {dimension name}

• Not Top Level: {dimension name} " in " {top-level parent name}

Number of Results: Show the number of results for each item in parenthesis to give the user context into how the results are ordered.

This is the only thing that shows in the current Autocomplete.

Items are ordered by number of results within each one.

Title: "Products"

Product Image: {product-image}

Line 1: Will show {web-display name} or {product-code} depending on the search query and which one we're confident they're searching for.

Line 2: 

• If {web-display-name} is shown on line 1:
  • {product-code} " • " {relevant-spec-title} ": " {relevant-spec-value}

• If {product-code} is shown on line 1:
  • {web-display-name}