Introducing Overlay Scrollbars in Unity

One of our goals in the Unity design effort is maximising immersion in content, and reducing the amount of chrome and clutter needed around that content.

Unity’s new Overlay Scrollbars are a small but important detail in this bigger picture.

Problem

Today’s scrollbars are optimized for cursor driven UI but they became easily unnecessary and bulky on touchable and small screen devices. In those cases, optimization of the screen’s real-estate becomes essential. Other platforms optimized for touch input like Android and iOS are already using a light-weight solution visible only while dragging the content.

Our interest is in bringing a more lightweight approach to window chrome, like scrollbars, to the desktop experience. Touch and scrollwheels are making that chrome, if not obsolete, then certainly less important. We want to embrace new thinking from the mobile world, while still retaining some of the key semantics and experiences of the desktop world in recognition of the differences between the environments.

Process

Research

There have been few attempts in the past to bring innovation in this very mature GUI widget. Unfortunately the most radical approaches didn’t really survive long. We had a look at these attempts and analyzed why they failed. Some of them were just trying too hard, a good approach could have been to do a step at the time, in this case more an evolution than a revolution.

Prerequisites

After having a better idea on the problem, and the various attempts, it was time to take some decisions starting from the scope for the solution.

The prerequisites we defined were:

• Has to reduce at the minimum the usage of screen real-estate: to provide more immersive experiences.
• Has to allow the user the ability to interact with 100% of the content surface: to be able to work over any content already created.
• Has to work well both on cursor driven UI and on touch ones: this is a prerequisite of any Unity solution.
• Shouldn’t conflict with the window resizing functionalities (ie. dragging windows borders)

One of the contexts we used to validate our solution was scrollable panes rich applications like Eclipse:

Prioritization

To have a solution which would embrace touch input devices, some of the functionalities available on cursor driven solutions might have to go. For this reason we prioritized the scrolling functionalities (from the more important to the least):

1. Scrolling via mouse wheel (or dragging content on touch devices)
2. Scrolling via thumb
3. Page up/down
4. Jump to position via bar
5. Line up/down

Exploration

Going for an evolution approach of the current cursor driven scrollbars towards the overlay ones we have seen on more recent touch UI platform, we quickly narrowed down the options and the variations we considered were fairly similar.

Solution

Without further ado, here the video which shows both the prototype and the work in progress implementation (the visual might not be 100% accurate).

Overlay Scrollbars in Unity from Canonical Design on Vimeo.

User testing

As we usually do, especially for the more controversial design solutions, we tested the prototype in our office with external users. The results were so positive that they almost surprised us. People were involved in completing tasks where the scrollbars were just a marginal mean, of course they weren’t aware of what was really tested. Bottom line, despite they were using a not 100% stable prototype, they used the scrollbars so intuitively, going straight to the thumb and using it without any problem.

The current implementation is already available for everyone to test it starting from here. Please give it ago and report some bugs if you can!

Disclaimer

1. We are fully aware that our solution can be an easy target for critics (as they were who tried to innovate in the field before us). As mentioned earlier, we believe priorities are changed recently in the industry and that this is the right time to make our own attempt.
2. We just noticed MacOSX Lion is likely to give it a try on merging the traditional scrollbars with the overlaid ones. From the few screenshots we saw, it looks like a quite different solution. What else can we say, good luck to them and may the best win!