5

Several popular sites are moving the navigationsbar to the left side. This mainly because of the evolution of the portable devices with smaller screen sizes and also the widescreen monitors. The widescreen monitors are now the standard. When a site has the navigation bar on the left side it sure looks more like the tablet or the phone version. In this way, users can navigate through the site like they are used to in phones and tablets. In the iOS platform we have: UISpliView for iPad and flyout navigation menu for iPhones.
In the Android platform we have: Multi-pane Layouts for tablets and, again, custom flyout navigations menus from the left side. Also having the navigationbar on the sidebar gives more content view to the users. Users also have access to the menu where ever they are.

  1. Do you really think that navigationbars are fading into sidebars?
  2. Which way do you think is better and why?
  3. Some good practices/articles I could read about this subject?

Please excuse my english!

Example of the new facebook theme which looks like the phone or tablet version. Another example is google+. enter image description here

Android on tablets enter image description here

iOS on tablets
desc

Android on phones
enter image description here

iOS on phones
enter image description here

Can somebody please turn these images into a single image? with a beautiful layout? Im running on linux so no photoshop for me.

Improve this question

2 Answers 2

Reset to default
4

Sidebars are superior due to a lot of reasons.

They are not new, they have been here for a while, especially used in content&structure rich interfaces (Gmail, MS Outlook or almost any mail or multi-PIM application, folder list in file managers like Total Commander, Forklift or even built-in Windows Explorer or Finder, iTunes...).

More and more interfaces start using this approach recently (especially in the era of responsive design as they help address the need to adjust the interface to multiple screen sizes, resolutions and orientations). The services we use tend to offer 'more' in the same time (I know it's kinda generalizing, but 'more' is a driver for users to use a service, and this 'more' needs to be packed somewhere).

Having this in mind, the reasons why sidebars are almost perfect and gain more and more popularity are (in fact, some of these you have already mentioned in your question):

  1. They allow to use the vertical space better:

    • for horizontal screen orientation (most desktop screens, tablets in horizontal) there is usually a lot of space to use on the sides of the content, especially when 960px grid would be enough for the content itself. These websites can go fullscreen and use part of the additional space for a sidebar or double sidebars (Facebook for example).

  2. With proper approach, they are almost orientation-proof:

    • they can be adjustable width-wise - in some cases, like in Wordpress backend, you can expand/contract the sidebar (while contracted it is reduced to icons only).

    • they can be even hidden totally - some sites (like Wikipedia.com for mobile) or apps (like Facebook app for iOS) share the same approach: you can show/hide the sidebar by swipe gesture or tapping an icon.

  3. They are content-flexible:

    • you can easily expand top level structure without a complete redesign of the interface

    • the limit of the items in the sidebar is way higher than in case of horizontal menus (actually, there are only three limitations: the height of entire interface, the fold and reasonable number of items)

    • this limit does not decrease when you provide more descriptive names for them (it would if you used horizontal menu)

    • you can easily organize sidebar content by grouping items into sections

    • these sections can be expandable in accordion style, which allows you to both pack more items inside sidebar and control the clutter

  4. They allow to communicate functionality better and can be easier to interact with:

    • you can be more descriptive while naming the functions in the sidebar, which would be tricky for top bar navigation (of course you could use tooltips for these, but they would not work on touch devices due to impossibility of triggering the hover state).

    • with less vertical and horizontal limitation you can make clickable/tappable elements bigger.

Some links:

Improve this answer
0

Sidebar "navigation", in a more abstract conceptual sense has been around since 70s. enter image description here

The early convention was that a window pane (or panel) controlled the content of those panes to its right or downward. This was easy to understand and quick to learn (I'm tempted to call it "intuitive" but that's not really the right word).

When Apple derived its GUI from Smalltalk-80's (above) it for the most part did away with putting multiple panes within a window so the abstract notion of navigation within a window didn't make it into mainstream computing at this time. But soon the usefulness of multiple panes within a window was (re)understood and as this became more prevalent, the convention of a window pane (or panel) being controlled by those upward or leftward of it reemerged.

So placing the navigation of a webpage above or to the left of the main content is well established convention and both general layouts work well. Placing the navigation to the left has the advantage of leaving vertical space for the main content, while placing the navigation at the top leaves more width for the main content.

Improve this answer

Your Answer

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