On-Site Search - What's The Perfect Design?
By Rob Innes, 3 March 2018
The humble search box. It appears on millions of websites, but have you noticed just how many variations of it exist? From visual cues to example searches, multiple features and UX treatments can now be added to improve user experience - so how do you know which one is right for you?
Here are five examples that range from simple to very complicated, which may prompt some thoughts for what would work for new sites or redevelopments you may be considering.
Before we get into some of the examples, some of these UX treatments are designed with a lot of data in mind. If your site manages a lot of data, you are probably more interested in these methods, whereas if you site is more modest, one of the cleaner, simpler methods may suit better.
Option 1 – Plain search box with instruction action button text
This option contains no prompt within the search box itself (the user data entry part) and gives a subtle call to action by adding the brand name into the search icon space and applying a consistent background. This is a nice simple treatment and works well with short brand names. It gives a bit of a lift to the search experience but is simple to design and build.
Option 2 – Tuck away the search function to an icon and open with a click
This partly hides away the search data entry box and is a great solution for a crowded header or for sites where the page content is expected to take primacy, leading the user journey from in-page content. Where sites where content searching is more common, this may not be the best solution as it puts an extra action in the way of the user. Simple to implement but care needs to be taken with busy headers, especially with smaller viewports.
Option 3 – Give example searches in the data entry space
By giving the user some examples of valid search types, the search box helps users to construct queries that will yield good results (and demonstrates that verbose expressions of search intent are not required). The example text is subtly grey to sit just a little bit in the background and works in place of instructional text such as ‘Search here’ or ‘Search site’ which are often found on websites. The example search approach, shown in the illustration, is probably superior to a generic search approach, but both are easy to implement.
Option 4 – Offering full site search or a constrained search focused on a section of content
For sites with a large content collection, especially those organised into large product areas, adding a feature to constrain searching. This is an especially useful feature if a full site search returns a large set of possible results. By constraining to a section of the site, for example, Animal Health, the service will naturally exclude a large part of the site, possibly yielding a faster return but certainly yielding a more manageable result set. Note, the object works at a full site level by default, so the user journey does not have to be interrupted, however, if the user chooses to engage, richer search options present themselves. Frequent users may make good use of such a feature. Although this represents a simple design, the implementation may be complex and data organisation may require some curation effort.
Option 5 – Offering an advanced search capability within the search box
This final example presents initially as a simple search box and can operate as such. However, within the design there is a visual cue to wider functionality. By engaging with the ‘chevron’ object, the object expands via an overlay to present the user with a set of search options. These particular options range from the simple to the very complex and an implementation of this kind is only merited on sites with large content bases or complicated product data. The time to organise data and develop the tool may be extensive but it’s a great way to get better results in front of users, particularly frequent users.
If you are searching for right way to provide search capability to your website or application, get in touch - we'd be happy to take a look!