8

Starting from Mac OS X Lion, scrollbars have been transient. That is, they disappear when your mouse stops moving. Some sites, like Facebook, even emulate this transient scrollbar for Windows users:

facebook feed

I had the opportunity to interview a design/usability candidate. I asked the candidate to use our website and critique it. I only had a Lion laptop, so she had to critique using Lion. One of the panes on our site was scrollable, but she did not realize it until I mentioned it to her. This design/usability candidate is a Mac user and the lead designer at a very reputable website startup and even she couldn't discover the Lion scrollbar.

So here's the million dollar question:

How do you make a pane look scrollable on OS X Lion?

Improve this question
1
  • This kind of thing is just horrible for accesibility in general. Guessing interfaces are just bad. A tooltip would be my suggestion but it's just too obvious to make a full answer.
    – alfa64
    Dec 2, 2011 at 19:57

3 Answers 3

Reset to default
5

You have a couple of other options to:

  1. when the site loads make the scroll bar visible for 3-5 seconds, then make it go away, it will probably make the user focus on that area

  2. you could always put an arrow down to symbolize the more option for that panel and try to integrate the arrow within the pane with the items so that when the user goes over it it will disappear and the scroll bar will show up with a nice fade (you trick the user into scrolling)

enter image description here

Improve this answer
2
  • What I see when I load a page in Chrome on Lion OS X is the scroll bar fades in a split second after the page loads, then fades out. The fading in is what really catches the eye.
    – Taj Moore
    Nov 28, 2011 at 21:21
  • 2
    The fading out of the scrollbar is poor design on Apples behalf. This forces the user to be attentive in the first second of the website opening to memorize which panes are scrollable. When the user is 1 minute into using the website, he may have forgotten which panes are scrollable. Also, there are scrollable panes that may have been below the fold during page loading, so the user never gets the fade-out visual cue.
    – JoJo
    Nov 29, 2011 at 17:42
3

If you make sure that some content is always peeking out the bottom of the pane, it can give it a scrollable feel even without the scrollbar being visible.

Improve this answer
3
  • 2
    What if the pane is a percentage height of the browser window, and it's not a fixed height? In this case, you can't guarantee that the last item in the list appears half chopped off. An example is Facebook's right column pane. It spans 100% height of the browser.
    – JoJo
    Nov 25, 2011 at 22:15
  • This depends of the height of your items and their number. Often you can use responsive design, and play with the spacing between the items a bit, making it dynamic and dependent on the current size of the pane.
    – Vitaly Mijiritsky
    Nov 26, 2011 at 9:04
  • 1
    @VitalyMijiritsky I am sure that every visual designer who reads your suggestion is cringing, my self included. I designed something to be a certain size for a reason (Both visual and usability) so having something arbitrary change size is frustrating. It gives a user a different experience each time a leads to the "I don't know why but this website pisses me off" moments. At least that's my opinion. The mater of the fact is it is sad that we have to make up for Apple's colossal usability issue so they could make it more "pretty". Visual Design should enhance not dictate usability
    – Chris Janssen
    Feb 7, 2012 at 21:58
1

is a Mac user and the lead designer at a very reputable website startup and even she couldn't discover the Lion scrollbar.

Well, I personally wouldn't link those two facts.

As to the question, Lion will make the scrollbars persistent if you plug in a mouse. The scrollbars fade away only when you're solely using the trackpad.

Apple decided, that trackpad users should get used to the natural scrolling and content discovery. (perfectly within the normal learning curve when introducing new paradigms)

So, to answer your question, you have 2 methods:

  • Passive - make it obvious there's more content hidden by the container, same approach used to fix 'below the fold' discoverability issues.
  • Proactive - you can provide a smooth animation when the user hovers the content area, display the end of the list and scroll up/down on page load.

I'd either use just the first one, or combine them.

To figure out if you need to combine them or not, do some user testing with users who own and use Apple laptops, running Lion, with just a trackpad, otherwise you'll be testing your interface and introducing people to Apple's new navigation paradigm I would say.

Improve this answer
1
  • I disagree on the test group. You should be testing your interface and introducing people to Apple's new navigation paradigm is the better way to test. Reason being is that if those users can figure it out, the lion natives will as well. After all you want to support all those users who are converting over to lion (be it from PC or a previous version of mac OS). After all I am sure the lion natives get just as confused at points when they didn't pay attention for the first second, or the scroll was below the fold. And why should they have to search for 15 seconds to find what areas scroll.
    – Chris Janssen
    Feb 7, 2012 at 22:03

Your Answer

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

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