If you have a search box on your website, take a
minute now to review it. Look at it in relation to
other elements on the page. Does it stand out
and make an impression? If the answer is no,
then you are not alone.
Most website owners know that they need to have search boxes
in place for the convenience of visitors. For some, it might even
be the primary means of navigation, but in most cases a tour of
the Internet will reveal that not much time or energy is invested
in their designs.
If there’s one area of Web design that often gets placed on
the “Phase 2” list of things to update on a website, it is often the
search box. The role that site search plays in the success of a
website, however, is enormous — particularly for Internet retailers
and information publishers.
So, why not pay more attention to its design? Why not
make the availability of site search a priority on your digital
Most Web workers will be content with the standard site
search functionalities offered by their content management systems
or e-commerce shopping carts, but we are not talking
about how it works — we are talking about getting people to
use it. And they can’t use it if they don’t know it’s there.
A recent research study by the Missouri University of Science
and Technology revealed that it takes just two-tenths of
a second to form a first impression when viewing a website.
If you need or want people to search your site, every effort
should be made to ensure that users see the search box.
For this reason, consider updating the design of that search
box. Not only can users receive helpful cues about what to do
when they arrive on your website, you will ultimately move
them one step closer to a conversion — or at least further down
the sales funnel.
In order to be effective, a search form should be easily visible,
in a location consistent with other websites, and with
enough space for the user to enter their query and still read it.
The search button should be clickable, large enough to click,
and include a search-related icon such as a magnifying glass, or
simply the word “Search” as a label.
All search boxes are not created equal. Website Magazine
has assembled a collection of several effective implementations
at http://wsm.co/SearchBoxDesign, but review a
few of the best in these three different search forms below.
One tactic to increase the visibility of a search box is to simply
make it bigger. This is taken to somewhat of an extreme
by the VoucherCodes site, but likely to their benefit.
As one of the leading coupon sites, RetailMeNot also leads
in best practices for its search box, giving it a high profile and
populating the form with some helpful hints.
This site has taken somewhat of a traditional approach, but
by offsetting the search box with a dark border and placing
it front and center and above the fold, its importance is
obvious to users.