Saturday, August 18, 2012

Scrollbar in Mac OS

Since 2007, my interest has been shift to iOS and Mac. One thing interesting UI is scroll bar. Apple has changed the behaviour of scrollbar in iOS. The purpose of this change is to utilize the maximum territory space in a scrollable view. The scrollbar will disappear after the view stays static within seconds. To bring it back, you can user touch gestures to swipe the view. All these are handled by OS. This has been in iOS devices for long time.

Since Lion OS,  Apple introduced the similar support in Mac OS. It is a very interesting design. Here is my understanding. The scrollbars (horizontal and vertical ones) are two UI components. When they are visible, they are UI elements with two main purpose:

  1. They provide visual vision of positions of its content, and
  2. They respond to user interaction, moving or scroll to a position when they are clicked or dragged.
When scrollbars are invisible, not only cannot users see content positions or if content is scrollable, users also have no way to interact with scrollbars. In iOS and Mac native applications, this normally does not present any issue. Users can user touch like swipe to check or move content positions.

However, I had a case recently that invisible scrollbars do cause me some trouble. I use web based RDC to connect to Windows. The RDC window was developed in Java, which is based on Java UI component. It does not support swipe gesture. When I saw a blue window, I had no way to scroll its contents even I knew the Start menu there on the bottom behind the window.

What I found there are two solutions to resolve the issue. The first method method is limit to Mountain Lion OS. Windows in ML are resizable by dragging any boarders. By dragging boarders, the scrollbar will appear for a short period of time. With that period, just quickly touch the scrollbar to make a move.

The second solution is to make scrollbars always visible. This can be set in System Preference | General.

Actually, the scrollbar-always-visible looks really ugly after I am getting used to the new-and-clearn views. However, this solution is the only solution when a window is not sizable.