Best way to separate navigation and search bar

Question

I am in the process of improving an existing eCommerce site design. The client has asked that we highlight the best selling categories.

Currently all the categories are under the heading Categories and the customer can browse individual categories via the mega menu.

The client wants to split Categories into four different headings: e.g. category 1, category 2, category 3 and category 4.

There are few options:

1. Add new categories, decrease the width of search bar and compromise on search bar visibility.
2. Display links and search bar in different rows, e.g. links in first row and search in second row.
3. Move search bar next to logo.

Which way is the best and why? Any alternate approach?

Answer 1

I'd move the search area to the empty space where you have the contact us <phone no> today, and as a consequence move that higher up. That way you've made plenty of space for the search - which is easy to find for users. To further highlight the search area you can use a different background color than the rest of the site, but it really depends on what you want your users to do. Is search the preferred tool, or is navigation? Which way do you want users to take?

^{download bmml source – Wireframes created with Balsamiq Mockups}

There are other e-commerce sites that uses search in a different location than the navigation bar. To mention a few examples - take a look at Amazon, CDON and NetOnNet.

Answer 2

You could move the search box to above the navigation bar. Instead of thinking of that bar as a unified "finding things" bar, think of it as just for navigation. The search box as searching, which isn't navigating.

If the search box is in the top right, that's naturally where people's eyes go when looking for a search box.

Alternatively if you can't move the search box, remove the search button, people hit enter or dismiss the keyboard on mobile which blurs and submits the form. Have the form submit on blur - saving you space.

Answer 3

A separated search bar is a must in most cases. The unified bar is prone to mistakes and makes the users unaware of urls and how http is related to their browsing.

It will make it easier to create the right on screen keyboard and.voice commands for the different jobs.