3

The navigation pane is scrollable on focus, which works well in all the browser in Windows PC because the scrollbar appears when the mouse is pointed over the navigation area. However, this is not the case with Mac. There's no visual cue to let the user know that this is scrollable area and more number of menu items are available on scroll.

So I'm thinking of doing like the one shown in the image attached. Is there any other better way to handle this? Somehow I feel showing a up and down arrow button to use that to scroll up/down is old school.

enter image description here

enter image description here

Improve this question

2 Answers 2

Reset to default
11

Another "Macbook no scroll" UX problem...

See, Apple's UX is arguably the best of the best. They set the rules for other people to follow and everything they do is copied, for a good reason. You could say they don't do many things wrong. Well, this approach is one of those few things that you can debate 'til the cows come home, but in the end empirical evidence shows this is not correct. And it's very easy to demonstrate: just test your page with 30-40 EXPERIENCED Mac users using this on a Mac and see the results by yourself. As a matter of fact... we just did it yesterday! And in our tests, it took users up to 3 minutes to discover the affordance of a scrolling section, while Windows users noticed scroll at first sight, literally 0 seconds.

So, what to do?

Personally, I think your approach is too big, bulky and creates distraction calling attention to an extremely secondary item that shouldn't even exist in the first place.

So, instead of re-inventing the wheel, the proper answer to your problem is to... force scrollbars (for example using -webkit-scrollbar ). Easy and to the point, 0 friction.

If you're still looking for a "no scrollbar approach", try using continuity (see top example: I truncated the last row and added a small shadow to communicate there's more content below)

enter image description here

Last, if you don't want the default scrollbar or just want to trigger them ONLY on Mac, you can design your own scrollbars with CSS or use some kind of JS or jQuery solution

Improve this answer
2
  • +1 for forcing scroll bars. What do you think about showing the scroll bar on hover? It is very likely the user will hover over the pane (not to scroll, just over the items they're already seeing) and notice the scroll bar appearing. I've seen this behaviour on Mac.
    – nuwa
    Commented Mar 10, 2016 at 11:58
  • 1
    @nuwa, yes, that's the default behavior and what many developers will expect / hope for: eventually, the user will hover on the element and see the scrollbar. Now... what if not? Unless I see a visual cue (such as the one requested by the OP), I'd be leaving an usability element to luck, just hoping an user randomly discovers it. Please note that one thing is to scroll the page (expected) but it's totally different to scroll an element inside the page. Hence.... force scrollbars
    – Devin
    Commented Mar 10, 2016 at 15:57
0

Below are my thoughts.

  1. The Mac users already familiar with the scrolling concept in Mac. If you are targeting a experienced Mac user then you don't need a additional cue.

  2. If the above point 1 is not reasonable, then you can consider the following suggestion.

    a. You can hide the a little part of last menu item in the navigation pan (That will give a cue to the user there are something more on the bottom).

    b. Place a animate a arrow which is indicating to scroll(Optional).

enter image description here

Improve this answer
2
  • 2
    I've seen experienced users fail to realize that they could scroll a page. Knowing how to scroll doesn't mean that you check every page to see whether you can scroll.
    – octern
    Commented Mar 9, 2016 at 22:31
  • 2
    Having a partially visible bottom line is a good solution, but it's brittle in that any change to the menu items, the font size, or the display size could break the alignment and cause the items to line up with no hiding.
    – octern
    Commented Mar 9, 2016 at 22:32

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.