3

I work on a desktop application which has a sidebar with different workplaces. Most of the time there are around 4 workplaces but there can be use-cases with more workplaces that don't fit on a screen so user would have to scroll up or down to navigate between them all. So my task was to come up with a solution for such cases.

My first though was:" that's simple, lets use a nice, always visible scrollbar to avoid situations where users would not be aware there is more content hiding". My co-workers "hated" this because it looks ugly and cluttered. Although I kind of agree with them, in my opinion it still gets the job done and besides, it's an edge case that rarely happens.

So what can be done?

I could design it in a way that only a part of the next element is visible to the user indicating there is more. But, this was turned down because it would not always be possible to show additional content like this.

Next idea was to design a scroll bar which appears only on hover. Not a fan of this because again, we would be hiding stuff.

Then there were suggestions to indicate with use of shadows that there is more. I dislike this, since it really looks out of place. We don't use shadows anywhere else in the UI.

Now I came up with the idea to have "up" and "down" arrow buttons that user could use to navigate by clicking (beside scroll wheel on a mouse). It look OK, it tells the people there is more content etc. My concern is, that I have never seen such navigation in other UI's. Most of the other applications I checked use a scrollbar that appears on hover or the scrollbar is always seen.

Any thoughts or alternatives?

Thanks in advance.

3
  • 2
    Have you considered the "more" button approach? The last workplace to fit in the viewport would have "ellipsis" icon instead of a logo, and a "+2 more" label instead of workplace name. Jan 4 at 12:20
  • Hi, yes I have also considered that. In your opinion what would the behavior be when user clicks on a more button? Would user see a popup window with the remaining workplaces? Jan 4 at 13:07
  • 1
    There are options: load additional items and show scroll bar, or "up" button at the top as you suggested, or opening a modal with the remaining workspaces. What is important IMO is that you separate the initial and clicked states. Jan 5 at 11:35

1 Answer 1

1

I might recommend a little mini stacked cards thing, kind of like the Windows desktop chooser but more condensed. For example, at bottom left you have this when it's collapsed and you're working on stuff:

collapsed

(Note green border for the active one; could certainly be done better, e.g. with CSS filters to brighten the active one and/or darken the others.)

Then you hover over that panel and get a little rolodex:

rolodex

When hovering a scroll or up/down arrows or left/right arrows or gestures or something could allow you to flick through to the screen you want.

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.