I am currently working on a new project for a financial trading and broking platform, where we are splitting the screen into 2 columns, one sidebar and one for content. The purpose of the sidebar is for navigation purposes and confirming completed steps to the user.

In the Nav (also located in the sidebar) we have two action buttons, add and locate, whose options are limited to the scope of the step and the object, but are recurrently used (i.e. for a contact we can add and locate quotes, complaints or fees => then for the quotes we can locate the quotes received, but we can't add anything).

We can also add tasks, files etc. These are global additions that are duplicated. I want to avoid duplicating this. Can anyone recommend a good way to add and make the options change in the add and locate buttons, without confusing the user. Unfortunatelty, I cannot add any screenshots at this point.

I was thinking of adding a dropdown list with changing options depending on the applicability to the object (i.e the quote, contacts etc), then splitting the dropdown with a line separator and add the global options (i.e. the tasks, files etc) below.

Also is it recommended to put the step by step (like breadcrumbs) in the sidebar or shall we put it on top of the main content. By steps I mean the actions you need to take to arrive to the end point of receiving quotes for clients. So the user will see the steps left to take and where they are currently.

  • You could use the integrated UI Mockup tool if you want to provide a quick sketch. – JOG Mar 13 '13 at 10:10
  • Or you can upload the image to an image hosting service and provide a link to it. – Dominik Oslizlo Mar 13 '13 at 10:51

There are plenty of ways to provide different actions to different objects. For example, interchanging drop-down menus like yours; the right-click menu on files; interchanging ribbon bars in Office. So it is a common issue, but probably too wide to give a specific answer.

Some of the problems you face are:

  • How will the user know that new options are available?
  • How will the user know why an action is not available?

Either way, consider ways to not let all options change positions all the time, so that the menu is more easily recognizable. For example keeping the static (global?) options on top of the list, and the interchanging ones below. Or always keeping all options in the list, but inactivate the ones that cannot be used for the current step/object.

Personally, I believe the interchanging drop down menu button is slightly too invisible. I would rather have all the options available in the toolbar. It could work in your case though, as the two action buttons you describe seem to be so central that all users might learn to always look for their options there.

  • Thanks Jog, that is exactly what I thought as well. I think we are going for an accordion like structure with cascading tabs on the sidebar. Sorry I can't upvote you, still a low reputation. Thanks again. – Elmar Mar 13 '13 at 12:29

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.