🎨

Search box design

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

💡 Ideas and tips

Mobile headers and design patterns

‣

Use a colored field to enhance search box visibility

‣

Place search icons “inside left” or “inside right” relative to other links

‣

Make the “X” control clear if you use a search drawer

‣

Try a header takeover on-tap

‣

Try a sliding search field

‣

Try a search modal

‣

Emphasize the Search button with a pop of color

Hint text

‣

Test longer hint text against a simple “Search” or blank field

‣

Describe your catalog in Search box hint text

‣

Use hint text to remind customers they can search articles

‣

Consider colored hint text

‣

Show your brand personality through clever hint text

Widget behavior

‣

Consider scoped search (traditional dropdown style)

‣

🦄 Try sliding scoped search

‣

🦄 Try a Sale pre-filter checkbox

‣

🦄 Consider visual search

‣

Test animated hint text to show catalog range

🫣 Cautions

‣

Don’t leave out the Search button!

‣

Be careful with “search takeover” patterns

‣

Avoid full-width search boxes

‣

Avoid styling your search box the same as other elements

‣

Avoid using a SEARCH text link instead of an icon

‣

Avoid placing your Search icon next to a text label or link

‣

Don’t get too creative with icon styling

‣

Avoid invoking your full category menu with search

‣

Avoid including popular searches on-click

‣

Avoid recommending products on-click

‣

Avoid low-contrast search boxes

‣

Avoid wordy hint text

‣

Test your colored search field

Back to Site search ideas

👉 Follow on LinkedIn for daily ideas 💡