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?


  • Is your mockup reflecting how the site currently looks, or is it your suggestion of how it could look? I assume it's the current layout, yes?
    – JonW
    Apr 4, 2013 at 9:37
  • Yes, it's the current layout
    – Khurram
    Apr 4, 2013 at 9:49
  • 1
    What about the users? what do they use most, do they use navigation or do they go for search bar first?
    – Igor-G
    Apr 4, 2013 at 10:15
  • Also dropping "About" from main menu and leaving it in the footer only would give you more space, same with "Help". Also why do you have "Account" at the top right if a person is not logged in?
    – Igor-G
    Apr 4, 2013 at 10:20
  • The website is based on B2B model. Business customer knows what they need and use search bar in first place to find products.
    – Khurram
    Apr 4, 2013 at 11:10

3 Answers 3


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.

  • Thanks for the Answer. Search is indeed preferred tool to find products. I believe moving contact info next to logo will distract user and might consider 'contact us: 0800 525 888' part of logo. From your mockup I've extracted an idea to move contact us link next to 'Something else' link and see how it looks.
    – Khurram
    Apr 4, 2013 at 11:39
  • @Khurram Glad I could help! You could also move contact to only reside in the footer since users are used to find contact info there. Good Luck! Apr 4, 2013 at 11:44
  • 1
    I think this is a great option. I like the idea of giving the search area a different background color. It's very easy to spot plus it's more 'future-ready', should the eCommerce site choose to expand and offer more or different navigation options. Apr 6, 2013 at 13:23

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.

  • 1
    Removing search button will create problems.
    – Khurram
    Apr 4, 2013 at 11:41

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.