3

I want to add a side pane to an application, the side pane will contain the user favorite screens, recently used screens and a screens search. In which side of the application shall I put it? Given that the application is English (LTR), and the user can show/hide the side pane.

Please support your answer with solid studies and researches regarding the matter. Feel free to suggest any other better options.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question
13
  • 4
    Have you considered allowing the user to configure it for themselves?
    – ChrisF
    Commented Apr 25, 2012 at 9:45
  • 1
    Yes, that is a nice suggestion, but what about the default location?
    – Mohammed A. Fadil
    Commented Apr 25, 2012 at 9:55
  • 1
    i agree with @ChrisF, i dont see a general default screen position either for such type usually its LTR.
    – sree
    Commented Apr 25, 2012 at 10:44
  • 1
    @ChrisF, I disagree with you that the location really matters, because the user can show and hide the side pane, and this will affect the user's currently displayed form, if the pane is position to the right side the form will just shrink/expand, but if the pane is positioned at the left side the user's form will shrink/expand, moreover, it will move the form from its place right/left depending on whether the side pane is expanding or shrinking respectively.
    – Mohammed A. Fadil
    Commented Apr 25, 2012 at 11:36
  • 2
    what platform is this for?
    – Jake Berger
    Commented Apr 25, 2012 at 14:02

5 Answers 5

Reset to default
5

If you allow the user to configure the position the default becomes less important.

However, the right hand side is often where this sort of this goes. Visual Studio 2010 and Photoshop are two applications that have tabs etc. on the right hand side, though Visual Studio does have some flyout tabs on the left hand side too.

Having said that though, SQL Server Management Studio and Expression Blend have them on the left.

Therefore, I think the initial/default position is less important than you think.

Improve this answer
4
  • is their a chance that standalone application design are treated in a different way than web applications?. the example of visual studio etc are installable apps , but online web applications are different.. so is their a chance treating both as separate when considering designing?
    – sree
    Commented Apr 25, 2012 at 11:07
  • 1
    @sree - all the applications I've mentioned are desktop applications, but I take your point that web applications are different.
    – ChrisF
    Commented Apr 25, 2012 at 11:08
  • 1
    If the additional pane could be considered a contextual-navigational-menu, linking to views the user recently watched or have labelled as favourites I would say that the conventional placement of that type of component would be on the left side, no? At least that's where I would expect to find an element that features navigation of the main view.
    – AndroidHustle
    Commented Apr 25, 2012 at 11:31
  • 1
    In addition to that I think letting the user chose placement is a great idea
    – AndroidHustle
    Commented Apr 25, 2012 at 11:32
3

I prefer to maintain consistent flow from left to right.

Left side bar - options that will switch your main window to other places - navigator, bookmark bar, search. If used as filter, it contains all available options.

Right side bar - anything related to content of main window - references, related content, see also... and so on. If used as filter, it contains only options from collection shown in main window.

In your case that means go left. I think this is quite common pattern (facebook, g+, portals...)

Improve this answer
4
  • But the user can show and hide the side pane, and this will affect the user's currently displayed form, if the pane is position to the right side the form will just shrink/expand, but if the pane is positioned at the left side the user's form will shrink/expand, moreover, it will move the form from its place right/left depending on whether the side pane is expanding or shrinking respectively, which I think is not a good UX.
    – Mohammed A. Fadil
    Commented Apr 25, 2012 at 11:57
  • I agree, but... Shuffling content is bad UX - so I would avoid show/hide feature. If you insist of that, ask yourself important question - is it important to have it open for longer time? if so, do not allow to hide it. if yes, you can allow to shuffle navigator on top of UI so not resizing content - just for the time necessary to pick desired link.
    – Frantisek Kossuth
    Commented Apr 25, 2012 at 12:14
  • I prefer ... not the way to go about UX
    – Jake Berger
    Commented Apr 25, 2012 at 13:59
  • @jberger: "users prefer" is rarely the best option.
    – Frantisek Kossuth
    Commented Apr 25, 2012 at 17:23
2

ok here is my suggestion based on updated comments:

  • Position the panel LTR , since it the general rule of convention. (default)
  • If the option is given to the user to fit the position, then i would suggest you to fix the position of panel(left or right) and let it doc above all screen (i,e let Z-index be maximum), in this way your user form size will not be effected even if panel is hidden or expanded , since its interface is on top of screen always!
Improve this answer
2

I think it's dependent on what the function of the pane is.

If the pane is merely used as a navigation help to other (re)sources, which from your summary I am assuming, then I would put it hidden on the top right as a 'favourite/navigation' icon. This icon, when clicked, will collapse out into a navigation pane.

If the pane actually holds tools/buttons that interact with the content on the main window I would keep it in sight and on the left (photoshop preference), but configurable to be standard on x side and collapsed yes/no.

Don't have time for a mock-up so I hope my answer is clear enough. Ask me if it isn't.

Improve this answer
1

The initial location doesn't matter as much as that the user can change it AND the setting is persisted when the app is closed and reopened.

OP mentioned that WPF will be used. Check out AvalonDock and its Layout Persistance feature.

Improve this answer

Your Answer

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

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