Web elements: search-box

An eye-tracking Heatmap showing where a subjec...
Image via Wikipedia

Search is getting the dominant way to navigate trough the web.  The first web generation started out with a web-directory (the good old Yahoo, Altavista times), nowadays the start of every web-visit is search.  Websites changed a lot because of this. menu’s, sitemaps and breadcrumbs (the whole web experience) changed because the homepage of every website is not the usual landing page. A search-box is almost essential on every website.

Positioning of the search box

More websites are using a search-box the give users fast access to their information. Not only because websites are getting bigger, also because search is an automatic process. The “Google-Generation” does not care about menu’s they directly use the search-box to find the information they need, even if a website has just 5 pages.  To make the  search box accessible it needs to be on ‘the right spot’.
eye-tracking heatmaps tell us that most visitors are scanning a page in a ‘F’ figure. Two horizontal lines (mostly the horizontal menu and the first header) and a vertical line (a vertical menu). search-boxes are mostly places in the right-upper corner within this ‘F’.

Design of the search-box

Most search-boxes are just a text input field with a button to start search. Sometimes they got a ‘advanced’ search possibility. After examining loads of boxes I came to some general conclusions:

  • There seems to be a trend to filter a search-result after searching instead of offering an advanced search option.
  • Most searches give results with the search-term emphasized and placed in their context.
  • Wildcards like % and * are not used anymore.
  • Websites with a lots of content place a search-box in the center, and do not offer a classic menu anymore.

Examples of search boxes

yahoo_searchbox

wordpress_search

msn_search

myspace_search

twitter_search

ebay_search

flickr_search

digitalbuzz_search

cnn_search

wikipedia_search

Reblog this post [with Zemanta]

Popularity: 6% [?]

Tags: , , , , , , , ,

One comment