Innovative Navigation Techniques to Save You Header Space

by on 11/10/11 at 8:40 am

The header is an important part of a website. It usually has the logo, navigation, login, sign up and search. Making room for all these elements in your header is no easy task. The last thing you want to do is cram everything together and give your users a cluttered navigation. You also don’t want to dedicate too much space to your header otherwise you’ll show too little content above the fold. What you want to do is dedicate a small amount of space to your header, and use that space efficiently to display your interface. Here are a few innovative navigation techniques that can help make that happen.

Elastic Search Bar

For large sites, a search bar in the header is necessary to have. But placing it inside your navigation bar is a tight squeeze if you have a lot of links there. This is where an elastic search bar works best. An elastic search bar displays the text field in a thin, manageable size, and expands when the user clicks on it to type in their search term. The navigation links squeeze together to make room for the wider text field. This approach not only gives users enough padding to click on the navigation links, but it also gives them enough text space to enter their search term when they need.

Innovative Navigation Techniques to Save You Header Space

Unified Login/Sign Up Button

Logging and signing up are actions that users will need to do from the header of your site. But there’s no reason that your login and sign up buttons should take up a large amount of space. This can happen if you use a separate button for each action. A way to save space is to unify the login and sign up buttons into one, and visually separate the two different actions with a vertical line. An added benefit to this approach is that it places the two actions in closer proximity to each other. So after users sign up, they’ll have no trouble finding the login.

Innovative Navigation Techniques to Save You Header Space

Nav Bar Logo

A logo can give your site a unique and memorable identity. But you don’t have to make it big to do that. A big logo can take up a lot of header space and push a lot of content below the fold. When you scale the size of your logo to fit inside your navigation bar, you save header space and bring more content above the fold. Not only that, but you also allow your logo to act as the home button that takes users back to the home page. This means you’ll save even more space by not needing to add another home button to your navigation bar.

Innovative Navigation Techniques to Save You Header Space

Hover Bar

A nav bar logo can do the job just fine, but some sites might want a big logo and tagline in their header for aesthetic purposes. Is it possible to have a big logo and tagline and save header space at the same time? With the hover bar it is. The hover bar displays the navigation bar when users hover their mouse over the header. When users hover their mouse off the header, the navigation bar disappears and the big logo and tagline appear. This approach lets you have your cake and eat it too.

Innovative Navigation Techniques to Save You Header Space

Dropdown Logo Menu

If you really want to save header space, you can even go as far as shortening your navigation bar. When you arrange your navigation links horizontally, the navigation bar gets longer and longer. The more links you have, the less space you’ll have for your search bar and login/sign up buttons. However, if you use a dropdown logo menu, you can pack all of your navigation links in a menu under your logo to make room for your other header elements. The result is a short navigation bar that only takes up a small amount of space. Users can get to the menu, search bar or login/sign up buttons quickly and easily without experiencing any clutter or noise.

Innovative Navigation Techniques to Save You Header Space

Flyout Ribbon

What if you want the navigation bar to go away completely? There’s even an innovative technique for this. The flyout ribbon completely collapses the navigation bar into a tab on the right when the user clicks the disclosure arrow. To open the navigation bar back up, the user clicks the disclosure arrow again. This approach allows users to browse pages freely and openly without an obtrusive navigation bar in the their way.

This is the perfect add-on to persistent navigation bars that follow users as they scroll. Sometimes persistent navigation bars can come in handy. Other times you just want the navigation bar out of your sight. The flyout ribbon can make a persistent navigation bar disappear when you don’t want it, and reappear when you do.

Innovative Navigation Techniques to Save You Header Space

Fisheye Menu

There’s not a more elegant to save header space than to use icons with a fisheye menu. The fisheye menu is a beautiful way to save header space and show off your icons. As users move their mouse across the navigation, the icon they hover over enlarges so that they can not only see the item label, but also the graphical detail of the icon. Icons are generally an efficient way to save header space. But using icons with a fisheye menu allows you to save header space in style.

Innovative Navigation Techniques to Save You Header Space

Conclusion

Giant headers and messy navigations are found all over the web today. Don’t assume users want to spend most of their time in your header or navigation because they don’t. What drives them to your site is content. Minimize your header and maximize your content by using these innovative navigation techniques. Simplify your navigation bar and make it easy for users to find what they’re looking for. If you can do that, you’ll achieve what most websites struggle with.

With techniques as innovative as these, its important to test them on your users. That way you know what works well on your site and what doesn’t. The header is one of the hardest things to design. But with the right technique, some testing and tweaking you’ll come up with an elegant and efficient header in no time.


Innovative Navigation Techniques to Save You Header Space Innovative Navigation Techniques to Save You Header Space

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

4 Responses to “Innovative Navigation Techniques to Save You Header Space”

  1. Fabian

    Nov 10th, 2011

    Good article!

    I’ve gotta say, I kinda like the way that TechCrunch (http://techcrunch.com/) does it – you’ve got a navbar that folds up as you scroll down the page, giving you plenty of room to actually read the article.

  2. Rizwan

    Nov 10th, 2011

    I like the first three suggestions but the Hover bar, Dropdown menu, Flyout Menu are not good solutions because they hide the main navigation from the User. People with technical knowledge would probably figure out the menus but other people might not. Thanks for the suggestions though.

  3. Jim

    Nov 11th, 2011

    Cool space saving techniques but I would still want to run usability tests with a service like http://www.usertesting.com to see what my website visitors really think about them.

  4. matt

    Jun 8th, 2012

    Your suggestion to unify the Join Digg and Sign in to Digg bullet above directly contradicts the entire premise of your article on why sign up and sign in should never be placed next to each other… I am a first time visitor and it seems like you have some great content, but I am just sayin’….

Leave a Comment