What is so different about websites like Google, Amazon and eBay? How is their primary interface different from that of blogging websites like Moz and Search Engine Journal? The primary difference that you have all seen but not noticed is the exaggeration of the search form. In the case of the former three websites mentioned, the search form is placed in the center or at least in front of the UI.
The purpose of the website decides the right balance between search forms and the landing page. All websites make sure that their respective search fields are usable; the difference lies in the prioritization of the search field.
Placing the search field in plain view is always the smart option, but that does take up a lot of screen space at times. So here are a few ways that will keep your website looking trendy, yet save you a lot of space.
Modal Search Window –
Modal search windows have become the ubiquitous search form type for most websites that thrive on live searches. This was earlier used for opt-in fields to grab the user’s attention, but now these modal search windows have transcended to become the new search form type for most websites. It can vary in size from a small window to the entire page, but as long as it is responsive and gets your job done smoothly, it is good to go!
Have you visited the Ads of the World website very recently? They have upgraded to a modal search window that occupies almost the entire page and has multiple options that allow you to filter your result. Its entire appearance on a dark background makes it extremely attractive. It only appears when the visitor clicks on the magnifying glass and it will appear on top of any page irrespective of its content. This is also completely responsive which wonderful news for mobile browsers is.
The Comedy Central website is a different ballgame altogether. In this one, the modal window takes over the current page content. It has no transparent background but it offers a wide range of choices as search options. It is more content rich and this ensures that the visitor gets a deeper view of the website content. Both trending videos and breaking news are featured on this window.
Inline Search Form –
Have you checked out the Cartoon Brew website recently? If you click on the top-right magnifying glass symbol a small search form comes “out of the icon”. This is a style that is more dynamic as you can set the field to span the entire width of the current page or span a few blocks to grab your visitor’s attention.
This is how www.stgeorgewebdesign.comcurrently rocks their website. They have a responsive website design where clicking on the small magnifying glass causes a search field to animate out. The website designer has created a very fluid experience by simply hiding it off-screen and creating options to animate it in the responsive view as well. This is a wonderful way to give more importance to usability as well.
Something similar is seen in a popular ThemeForest theme. Avada is one classic example where the search field drops down under the navigation menu. However, the responsive version has eluded this option and limits the accessibility of mobile browsers.
Inline search forms are great to save space and make the UX more luxurious. But it really doesn’t do much if its accessibility is limited to less than 50% of the audience (desktop users).
Autosuggest the Search Results –
Now, this is something all users love. The award for this grand idea surely goes to Google and then the likes of Facebook and Pinterest. Now lesser known websites have picked it up so their own contents become more accessible to their visitors.
Although not as lesser known, you can consider the example of the CN website (earlier known as Cartoon Network). This website includes an amazing autosuggest feature that includes scores of content. This also includes game suggestions and video suggestions where visitors can directly click on the options. This automatically introduces new pages to the visitors that they would have never found without CN’s help. The visual cue is CN’s USP as they definitely suggest a younger audience.
A more professional yet magnificent example can be seen in the case of Wikipedia. Once you go to their in-website search field, you will be stupefied with the astronomical number of suggestions related to your queries presented by this online information enclave that will guide you in the right direction.
Updating hundreds of pages like Wikipedia does, on autosuggest, is quite a tricky thing to do. A few CMS systems like WordPress do help with the creation of autosuggest features on your search forms. But it is always smarter to leave this to your team of professional designers like the bunch at www.stgeorgewebdesign.com.
Clear Form Design –
Most of the 21st-century internet users automatically associate the magnifying glass icon with search options. But in the case you want to make it more obvious you can go with the large button accompanied by “search” written in the field. To get an idea of what we are talking about, you can check out the HappyChild theme.
A variant of the same concept is used in Etsy where the search field reads “what are you shopping for?”In the case of WikiHow, the text changes to “…to do anything…” which is juxtaposed to the website name, making it look like a complete question.
More than obvious patronization, these clever placements make the last website quite iconic. We are sure that almost 99% of all extant websites can get by with just the icon, but the added text provides a safety-net.
Search forms, icons and autosuggest options have ceased to be just functional aspects of websites and seeped into the aesthetics of website design that decides the performance and statistics of websites.
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.