Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

pic

share|improve this question
    
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 '13 at 9:37
    
Yes, it's the current layout –  Khurram Apr 4 '13 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 '13 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 '13 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 '13 at 11:10

2 Answers 2

up vote 3 down vote accepted

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?

mockup

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.

share|improve this answer
    
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 '13 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! –  Benny Skogberg MCSA Apr 4 '13 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. –  Misha Scholte Apr 6 '13 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.

share|improve this answer
1  
Removing search button will create problems. –  Khurram Apr 4 '13 at 11:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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