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.
- Do you really think that navigationbars are fading into sidebars?
- Which way do you think is better and why?
- 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+. 
Android on tablets 
iOS on tablets
Android on phones
iOS on phones
Can somebody please turn these images into a single image? with a beautiful layout? Im running on linux so no photoshop for me.
Answer
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):
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).
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.
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
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:
No comments:
Post a Comment