15

Left navigation is becoming a more widely used trend in Web Applications; for example, it is utilized by Zoho Books, Slack, Gmail and others.

More valid reason to move Left navigation, like screen resolutions sizes are increasing gradually, also to utilise more vertical space, as well as it looks like Desktop software too....

My point, why don't we use Left navigation like in web applications. Both are similar use cases, right?

Already we are using LEFT navigation for API documents, Help Documents & Knowledge base screens.

Advantages to move LHS navigation:

  • We will get more vertical space for main content
  • If already our web applications moved to Left navigation, it will be more useful for web sites. So that both looks similar

How to solve various resolutions using responsive design?

  • LHS can be opened by default for Above 1280 resolutions
  • LHS can be positioned at the top [or] closed by default for 1024-1280
  • LHS options can be moved under "MENU" tab at the top like mobile website for below 1024 resolutions

Yes, some of the website using LHS navigation, but they are using "hamburger menu" to open LHS part. Why don't we show upfront LHS navigation by default. Yes visually main content should be more focused.

What is your suggestion. Is there any particular reason to avoid LHS navigation?

enter image description here

  • 2
    Who is 'we' in this question? I'm a little confused. As an industry, left navigation is still used quite a bit. – DA01 Jun 16 '15 at 0:49
  • 1
    like @DA01, I have no idea who are you talking about, and as it is written, this question should be closed since it relates to an specific unknown case – Devin Jul 14 '15 at 19:50
  • What goes around comes around...websites in the late 90's were all left hand nav. Here's an example: web.archive.org/web/20000414042632/http://… – Jeff Aug 4 '15 at 15:58
7

I think your question is why you don't see left-hand navigation by default any more. I'd say this mainly a trend--perhaps a good one.

There are many trends these days and two of them are a) hamburger menus and b) single column page layouts.

This article isn't in-depth, but one of many you can find out there that talk a bit more about this: http://www.weebly.com/blog/web-design-trends

The goal of both of these trends is to put all the user focus on the task-and-hand. One column of content to focus on, no menu to distract.

This, obviously, isn't necessarily the best solution for everyone, but there's a lot of times this does make a lot of sense vs. past ways of how we did things with side-bars and top+left nav, etc.

3

The answer to this question is simple, and is the answer for pretty much any "why don't we do it this way" question: You should do what makes sense for your users to digest your content in the most effective way.

This may mean a left-hand nav for your app, but a one-size-fits-all model will not be effective for all users across all applications.

Your best bet is to watch your users in their "natural habitat" to see what actually does work for them and what doesn't. Then you take those observations, make a prototype of your app, and see if it works. If it is left-hand nav, great! But you shouldn't discount something NOT left-hand just because it doesn't make sense to you.

2

Many modern website designs that eschew vertical left navigation menus use one or more of the following instead:

  • Hidden hamburger menus
  • Simple horizontal navigation at the top of the page
  • Long single-column content
  • Targeted call-to-action buttons

Those design decisions help maintain focus on the content and allow each page to deliver information with a crafted narrative.

Today, many product and service sites employ these techniques to maximize user conversions. They view their website as the sales pitch before a buying decision, rather than pages of information. The first and second pages of a website may be the last a user sees before making a related purchase.

Sites focused on doing don't need to tell a story, and although the content is important, productivity is more important. Thus, they employ persistent navigation elements to reduce the number of clicks required to get where you need to go.

1

Here are a few reasons why people prefer top navigation.

  1. Users consume website content in F pattern

    http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

    This suggests both the left and top real estate grab equal attention. So, top navigation is another choice that can be used unless the number of menu items are not too many.

  2. Content positioning to grab user attention

    The trend now is to use large images and content that take up the entire browser width. The rise in internet speed makes it possible to download high res images and videos online. Making use of the entire browser width helps grab user attention. This way of story telling works for single page websites and sites that have a fewer menu items. Vertical nav bar takes its own space. Horizontal menu with a fewer items works best here.

  3. Localization

    Top nav suits well for most languages. In a few cases, Left nav has to be shifted to the right for Arabic. In scenarios like this, top nav makes life easier.

Refer this article for more http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/

Though I don't agree to a few points in the smashing magazine article above, I would say it has good points on vertical Vs horizontal menu. This article has a link to a study that suggests left nav is mostly ignored.

In a study called Eyetrack III: What We Saw When We Looked Through Their Eyes, results showed that top navigation performed better than left-side navigation. Interestingly, according to the results, even right-side navigation had better success than left navigation.

I would say the menu choice depends on the content and context. This link below provides guidelines on which menu to use based on context

http://www.usefulusability.com/main-navigation-types-and-usability-pt-1-horizontal-navigation/

Quoting a few lines from your question

1

If already our web applications moved to Left navigation, it will be more useful for web sites. So that both looks similar

2

LHS can be opened by default for Above 1280 resolutions

LHS can be positioned at the top [or] closed by default for 1024-1280

Well, I guess the above statements are contradicting. Anyways, this might work for a long menu. But, when a menu has a fewer items, and if you want consistency across all screen sizes, it is good to go for a horizontal menu.

0

Screen sizes on desktops might be getting bigger, but more than 50% of web usage is now through smart phones where real estate is at a premium.

2-column designs are impractical for phones, and people may want a consistent experience across multiple devices/screens (or as consistent as it can be)

  • Yes, definitely, 2-column layout will fit in to mobile screens. That's why I have mentioned about "MENU" option for below 1024 or mobile screen use case. – jelumalai Jun 16 '15 at 7:18
-1

I would suggest that horizontal text is more readable than text on separate lines.

Read | This Sentence | Now | Please

vs.

Now
Please Read
This
Sentence

My eyes would rather move in a straight line than zig-zag.

  • 11
    Navigation isn't the same thing as paragraph text though, so isn't supposed to be read in the same way. Users hunt for a particular item that they are looking for, rather than reading the whole thing. I would say that it's easier to quickly find 'Sentence' in your second example than in the first. – JonW Jun 14 '15 at 10:49
  • @JonW, Yes you are correct. Vertical readability better than horizontal one. In this case we can use icon with labels. – jelumalai Jun 14 '15 at 13:54
  • Icons will do nothing to improve readability. With a few exceptions, icons mean different things to different people. – Sean Ryan Jul 6 '15 at 17:11
  • As in forms vertical alignment is easy to find rather than one line menu. – Abektes Jul 14 '15 at 21:20
  • This example has different verbiage in the horizontal and vertical examples, so the ability to compare becomes disconnected. Also, I think this all depends on context. Second tier navigation could make perfect sense displayed vertically on interior pages, but having vertical navigation for the top level navigation might not make sense. A lot of content written about this topic horizontal nav vs. left nav vs. right nav, etc, fails to clarify the context and so the discussion becomes ambiguous. – Dmacatude Oct 6 '15 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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