Your submission was sent successfully! Close

You have successfully unsubscribed! Close

Thank you for signing up for our newsletter!
In these regular emails you will find the latest updates about Ubuntu and upcoming events where you can meet our team.Close

Introducing Overlay Scrollbars in Unity

This article was last updated 5 years ago.


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!

Talk to us today

Interested in running Ubuntu in your organisation?

Newsletter signup

Get the latest Ubuntu news and updates in your inbox.

By submitting this form, I confirm that I have read and agree to Canonical's Privacy Policy.

Related posts

Canonical releases Landscape 24.04 LTS

Landscape 24.04 LTS is Landscape’s first LTS release, with a modernised backend, web portal, snap management, and repository management features.

Canonical releases Ubuntu 24.04 LTS Noble Numbat

Canonical’s 10th Long Term Supported release sets a new standard in performance engineering, enterprise security and developer experience.

Ubuntu Desktop 24.04 LTS: Noble Numbat deep dive

Learn how Ubuntu Desktop 24.04 LTS is built to empower open source developers and deliver innovation for the next 12 years.