March 3rd, 2011 byOne 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):
- Scrolling via mouse wheel (or dragging content on touch devices)
- Scrolling via thumb
- Page up/down
- Jump to position via bar
- 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
- 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.
- 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!
The toolkit
107 Responseshide comments
Great job guys! This looks awesome!
Well, what can I say, this solution surprised me (in a good way), when I saw the the orange bar I thought “Mac OS” then, that thing appeared and I liked it instantly. I like out-of-the-box solutions
Good luck guys, and I think you’ll be the winners.
Is fantastic
i love the idea, and at first i was thinking that apple will do this to Mac OS X, but i am so happy to see this in our Ubuntu that taste very good on every next bite 
) yummy 
Finally, an uncontroversial idea
. This is truly great work which would be great if it could be included in Natty.
Uncontroversial? This is one of the worst ideas ever.
Dear Sirs:
quote:
(Your requirements.)
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)
end quote.
I notice that none of the requirements listed are USABILITY and FUNCTIONALITY. While the bar looks cool (if you are into cool), it is totally useless. Imagine you are a driving 18 wheel truck. Imagine that a child is running across the street. Imagine that your break would be this scrollbar. So, to stop the truck you take two steps (1) hunt for the scrollbar, (2) push on the break. Ooops you ran over the child.
The MORAL of the story. Cool is cool. But usability and functionality comes first.
Getting to the saving space. Typical window is 100mm x 100mm. Typical normal scrollbar is 3mmx 100mm on the bottom and 3mm x 100mm on the right. So total area of normal useful scrollbars is 3×100 + 3×100= 600mm^2. Total window area is 100mm x 100mm = 10,000mm^2. In other words by making the scrollbar invisible (and useless) you saved 600/10,000 or 6 lousy percent.
-respectfully
-Jim
Jim,
Forget the respectfully. I just tried using UNITY… Takes twice as long gnome to do anything, why are we going back to having to know the name of the programs you want to run and having to type them into a command line!
It’s the most confusing, ugly and amateurish interface I’ve ever had the misfortune to come accross. Its the biggest mystery meat tour I’ve ever seen. Took me five minutes to work out how to log out of the system.
Respect will be deserved when this rubbish is canned.
This is interesting. I have however one concern. One thing scrollbars provide for me is the indication that a document is bigger than the window displaying it. A common incident I encounter is a VNC/RDP window too small to display the entire desktop of the target system. When this happens big scrollbars pop up and I get an instant (ugly) visual cue that my window is too small.
In your prototypes you have a little orange or gray line to represent the scroll position. I’m concerned this is not obvious enough and I might tune it out. Of course it might just be that I’m conditioned to notice the gray scrollbars.
Great looking solution, nice to see genuine innovation, cannot wait to try it.
Yes, that’s a fine solution (y)
Inspiring work…. hope to see this in Natty
Why not use that thin orange line and let it thicken quite a bit when the mouse is approaching? That would have the same positive effects as this overlay scrollbar but look better confuse and will possibly (I’m now ignoring your research and am going on my gut feeling) confuse new users (coming from Windows) less.
The scrollbar thumb is an interesting UI element, the least you need it (small scrolling available) the bigger it is. Unfortunately it is quite common to have a long thumb and having a long element resizing can be quite distracting.
Thanks for your feedback!
if there is a chance, can you make other images for horizontal scroll buttons, because the “source of light” is different, horizaontal scroll should have light from top
any way excelent work, i am proffesional designer, and for next release i will try to help your team…
As I mentioned briefly in the video, the visuals you have seen are not final. I will definitely pass your comment to our visual artist!
Any help is always welcome
Thanks a lot!
Who’s the visual artist for this GUI, and in other GUI visuals for Ubuntu?
@Løvskogen
The Visual Design Lead for Unity is Otto: http://design.canonical.com/theteam/
You can always set the lower limit of scrollbar thumb size to reasonable value to have it big enough to act as UI element and not only as (even informative) decoration. Just make it thicker under mouse pointer (as YouTube scrolling now).
Your proposed solution offers extra (and new) UI element which is not good idea in general. IMHO.
this is very very good idea Dmitry !!! go and search ( http://omgubuntu.co.uk ; http://webupd8.org ) you will see that people who test this = love this
The scroll overlay is a larger target though. If I have a very long document (>1000 pages) it is still easy to grip. If I only have the orange line to grip, it would be much more difficult.
Hi, you did a nice work with the scrollbars.
I’m just wondering if it’s just me, or someone else has this problem too: I just can’t understand how badly Gnome treats screen-estate. All window elements have HUGE GAPS in between – for example: all tabs on your picture above has at least twice the margin as it should have. I’ve used Monodevelop for some time, and it was a horror because of these oversized window-margins and useless paddings. It’s like using my grandma’s Firefox with 8 toolbars open – you can barely see the content of the window, with half of the screen lost to garbage.
With smaller resolution displays (tablets in mind) I guess it’s equally a big problem and distraction as the scrollbars-issue:)
I have a few questions. First, what about the ability to middle-click (or Shift-click) any part of a scrollbar to jump to that point on a page? Is this still possible somehow? Personally, I use that feature a lot (so much so that I would even prefer if that were the default left-click behaviour). Secondly, is this themeable? Personally, I would prefer the thin scroll indicator (what’s its official name, anyway?) to be uncoloured (at least when the content area is idle) and to have rounded ends, like elementary’s minimalistic scrollbars.
I also have a few comments about the design. I would prefer if 100% of the content area of any window were devoted to content. Thus, I would prefer a solution that didn’t even have that thin scroll indicator permanently taking up space. Have you considered, instead, overlaying it when scrolling and when the pointer is at the window edge (or the edge of the screen)? Finally, the fact that the Page Up/Down buttons don’t move while active is a little weird, since they temporarily break their visual association with the scroll indicator. Have you considered, instead, moving the buttons as the scroll indicator moves, while also moving the pointer with it? I realize that moving the pointer is a bit unprecedented and weird, but I wonder if it would be less weird than the current behaviour.
Finally, I love that this type of innovation in design is taking place in a shipping product, rather than in an academic context, where ideas take 20 years to be brought to market. I hope to see more! Thank you.
I don’t think that would work in a touch environment, as you would have to move your finger along with the scroll bar. As it is now, all you’d need to do is simply tap the same place on the screen repeatedly to scroll down a lot.
@Christian:
falling over from Marks article, and not being this “Desktop” guy, I have to say:
This is f*cking awesome.
Normally I eat what you present me, unity wise, but what you showed in the video…dude, this is….sorry to repeat me here.
Well done…and You people are on the right track.
I’m waited for years to have linux on a desktop…and now you and mark as stakeholder give it to me….
really, this is awesome…thx for sharing….can’t wait to have it on my laptop….
\sh
If you implement it like that then I’d like it to always be inside the window since that would look better. But instead of having an scrollbar overlay I’d rather you make the “position indicator” bar expand into a real scrollbar on mouse-over.
I concur with the need for a consistent/predictable position – inside the outside is unnecessary. This predictability is the only shortcoming I see in metaphor – or whatever you call it.
To that end, I’d like a fixed (hidden is ok) area where I can reliably do page control. Searching for the visual telltale then getting the scroll control to appear, then moving to the arrow to page is too many steps. A quick touch at the upper or lower corner of the window would be better.
Thats indeed great.
I got a question though. Since when did the keyboard become irrelevant in favour of touch screens? You didnt mention it not once.
Are those improvements keyboard friendly?
Sure, keyboard on desktop and laptops didn’t loose any relevance in favor of touch screens. These scrollbars will be as keyboard friendly as the previous ones.
It has been so far a visual, GUI, make over, but one day we might explore if the keyboard interaction can be any better. Thanks for asking!
I wonder if the search result indication Google Chrome has (yellow marks on the scroll bar where the entered search term was found on the page) could be made to work with those new scroll bars. It’s a really handy feature I wouldn’t want to miss.
Hot shit guys. The scrollbar is an idicator for most people anyway.
Do you have statistics on the usage of mouse-wheel vs. scrollbar?
One thing I haven’t seen written about is accessibility. Did you user tests involve people with non-standard needs?
Don’t get me wrong, I think this looks great and I would certainly enjoy using it but can the user change it to something that might better suit their physical needs?
Hi Jackie, we feel your concerns. The scrollbars can be easily disabled in the settings.
Excellent news, Christian. Good luck with it.
Besides the accessibility issue (that seems to have been tackled), did you make any usability testing (or plan to do so) for this change?
Scrollbars are UI elements that are used by less technical users and despite the really elegant design, i feel that we are trading something that works well or in a familiar fashion for something new that lacks visual keys, that lacks “discoverability”.
In several usability tests that i made, i saw users struggle to understand that webpage/app was scrollable, i saw users inefficiently use the scrollbar arrows to go up and down (never using the bar or the scroll wheel), etc.
If we want effectively to “cross the chasm” we have to be careful not to break what is working.
I’m not saying that this idea won’t work, but for something that has existed so long, we have to make sure that we aren’t doing any regression to the interaction experience, hence question about usability testing.
There is a real tricky line between design innovation and usability, we must make conscious decisions about the trade-offs.
As a final note, i don’t want to undermine your work, i think the Design Team is doing a great effort to improve ubuntu.
Keep up.
Hi David, please have a look to the User Testing section. Thanks for sharing your concerns!
Christian –
We do understand that you tested this change. With all due respect, it’s very hard to cover all the cases, particularly for some stroke of genius you’ve had yourself. I’ve designed a number of UIs myself, so I know the user default reaction to change is usually excessively conservative, but that’s not something you should pooh-pooh. Users have good reason to be attached to the expertise they’ve developed.
Sometimes resistance to change is simply a matter of things working well in some places but not others. I really liked the unity launcher on netbooks, I’m a lot less enthusiastic about it on the desktop or laptop, particularly as it steals focus from app widgets near the edge of a maximized window.
The Overlay scrollbars are a terrific idea on tablets, because scrollbars are just vestigial there. On a desktop they’re OK, because you’ve got the scroll wheel. On a laptop with a trackpoint or trackpad, they’re poison — and there’s not clearly documented way of undoing the change other than switching desktop; you have to search in Google.
Here’s the shortcomings of this change as I see them:
(1) If you actually want to use the scrollbar instead of a wheel or keyboard to scroll the “popping” of the dragging widget actually works against content immersion.
(2) The dragging widget pops inconsistently depending on the maximization state of the window, requiring more attention diverted to it.
(3) If you want to use the scrollbar to scroll a long document on a large screen, the visual target to make the dragging widget pop is tiny.
(4) The appearance and behavior of scrollbars is inconsistent between applications and utilities is inconsistent. In some cases (Firefox) this is because the app designers draw the scrollbars with a toolkit rather than rely on the window manager. But the scrollbars in the launcher’s “Dash Home” appear and behave differently from the scrollbars created by the window manager for no apparent reason. If you make a change like this, all the major apps in the distribution should look the same and respond to the same settings.
(5) Documentation and configurations options are not provided. It wouldn’t be so hard to list all the radical changes introduced in the “About Ubuntu…” window with a link to undoing them. Documentation in general has been a sore point in recent Ubuntu releases.
On the plus side, the new scrollbars look great, even if they don’t work that well for me. I’m generally an early adopter, but I prefer the UI to fade into the background rather than draw attention to itself. Apple’s iPad UI does this; it’s initially impressive, but after a few minutes’ use it disappears from consciousness. Overlay scrollbars remind me more of the Windows tablet interface; they look great, but they never quite fade into the background like they should.
-Matt
Which settings?
Which settings contain the ability to disable or change the color?
Well i love it, kudos.
I wasn’t unable to see this video until I opened up the page on Vimeo. Maybe you have some bug with the embed code…
[Desktop+Notebook User] Don’t remember when I use scrollbar the last time. So in my case you may abandon it completely.
I use my scrollbar mostly to keep track of where I am in the page content, I feel that the orange “rim” will be a lot more noticeable than the “whiteish”, which is nice because sometimes it takes a while to see where you are with the current scrollbar(using 10.10).
Gotta give mad props for the “new” font as well.
Great effort and good ideas. However, I would like to suggest that you look into adding some kind of cue that a view is scrollable. It might not always be obvious that there is additional content hidden away when the orange scroll indicators are so small.
intriguing… was wondering why the scroller widget doesn’t simply appear over the orange rim instead of offset inside/outside?
This is great news! The UI in Ubuntu is shaping up so quickly! It’s almost unbelievable. It’s completely unlike anything we’ve seen in other Linux distros.
I have a question: Is it possible to keep the small, “near invisible” scroll indicators, (which I loved) but not to have the overlay “thumb” with the arrows (the one that appears when you hover?) I never click the arrows or drag scroll bars… And I can see the overlay appearing all the time being a distraction for me…
I would really appreciate some setting to disable it. (But not the new scroll bars)
Thanks!
Would have loved to see how Eclipse looks with overlay scrollbars
Yes, great.
vimeo is terminally broken for me (yes, I am running linux) and even if it worked I’m severely bandwidth limited, and so I have no idea what this is about.
Please post some pictures, and appropriate descriptive text, instead of the “here, look at this video, which half the world is unable to access”.
I recommend Tiny Menu for Firefox. It reduces the screen space the browser GUI takes away from the web page.
http://addons.mozilla.org/firefox/addon/tiny-menu/
Well thought!
I think this sums up the problem with Ubuntu and Linux-based operating systems.
They are constantly trying to fix what isn’t broken. People have huge amounts of horizontal space on modern screens, meaning two 16px scrollbars only represent 2.5% of the available horizontal space even on a typical 1280×800 resolution 13″ laptop. Vertical scrollbars are more problematic (one will take 2%), but uncommon: software that relies on them is rare and is generally badly designed (e.g. Eclipse). Ignoring whatever merits the design has (I dislike floating UI widgets), it’s not something that needs to be fixed.
Meanwhile, it’s near impossible to fix what is broken. Most notably, this is the misuse of huge amounts of vertical space by comedy-sized widgets and silly amounts of whitespace, which is a *huge* inconvenience on low-resolution devices, making GNOME software near unusable.
Even worse, by making scrollbars smaller, it makes the comedy-sized widgets and whitespace look even bigger, so the design looks imbalanced and ridiculous.
Awwwwwww, but now how will my Content Aware Scrollbars fit?
http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-aware-scrollbar-ui/
I like both scrollbars actually, my content aware scrollbars are really only useful when used for web browsers, and these new overlay scrollbars for email programs, system settings, and every thing else.
But I do agree with Oliver, this is fixing what wasn’t broken, and I feel it’s harder on the eyes to try to find the tiny little orange overlay scrollbar. The smaller it is, the more colorful it has to be to stand out easily but by making it orange and other colors it just becomes distracting again.
This is the first big UX work from Canonical that I actually like as far as I can remember.
To those suggesting that this is a fix for something that wasn’t broken, you are wrong. It may not be broken for you, but it is for many; I’d bet even most. People hate scrollbars when they get in the way.
To those suggesting that Gnome is unusable due to large UI elements, this is controlled by the theme. Try Clarity or Elegant Brit: both of these have a slimmer UI.
To those complaining that the bars are too small, I’d be extremely surprised if this wasn’t set by the theme. Furthermore, I think you’re probably wrong. I’ve been using Elegant Brit for a while; it has an orange scroll bar about 5 (or so) pixels wide, and it’s extremely visible.
I like the idea. As everybody seems to hide essential interactive tools for getting a bit more screen real estate: my kudos for this solution that seems to combine visibility, minimal GUI and efficiency very good.
Shouldn’t that scrollbar be on inner side of window ? On outer side it looks chaotic I suppose.
Why the right side only? Such a small indicator could be put symmetrically on both sides of the viewing pane at the same time. It’d be much more efficient (time / motion wise) to scroll the window for the user.
And while it sounds odd and over-decorated, I bet it’s an issue that we’re just accustomed to the 1 bar on the right of the window. Symmetrical tracks (after acclimation) would feel more analogous to the real-world. Paper between two tracks of the auto-feed on your scanner or printer, for example. The space-hogging scroll thumb would only appear on the side you move your mouse to scroll, but the thin, slivered indicators would provide more useful and comfortable feedback (after acclimation).
I agree with the person above. The indicator is so small it could be placed on both sides of the page. That would actually be a nice improvement, because most interaction is on the left side of the window.
I agree with some of the posters before: Gnome really has ridiculous padding/margin of UI elements.
I wonder why people always have to write their own .gtkrc file to make it bearable again.
Wouldn’t it be possible to fix that, once and for all?
in my opinion, it is very difficult to change the size of a window, because it is so hard to “catch” the small area, the border, where you can pull the window to enlarge it.
thats why i like the corner “right-bottom”, which is easier to catch.
hopefully this corner will not be removed.
greetings
One feature I really like in current interfaces is the single line scroll. This seems to do away with that.
Perhaps the scroll bar/scroll tab could be scaled. Clicks at the edges of the tab would cause page scrolls, clicks towards the center would give single line scrolls.
If you wanted to be excessive it could go so far as to have widgets in metacity just like current window controls with an ability to turn on or off line scroll, page scroll, top/end jump.
The scroll tab concept is great and it’s a positive step.
Gus
@xy,
I agree, grabbing window edges takes a fair bit of precision. Using the same model as they have illustrated here, the bottom corner could easily expand to a “grab box” to make it easier to catch, especially with low precision input devices.
Gus
It looks great. I’m just afraid the current middle-button-click functionality won’t be preserved. Will it be?
i was thinking in mouse gestures instead of scrollbars,
the velocity increase according the distance percentage
check the image
http://khipu.edu.ec/scroll.png
Good idea for netbooks. It also very well for small controls with scrolling, where scrollbar hide a part of text. It will get more place now for content.
Cool!
A very intuitive and cool solution. Even on my 21.5 desktop screen, in gnome, I always feel like the interface is geting too much of my screen
.
Canonical should follow a new strategy for the launch of Unity.
Below is a link to view the model of the idea.
Community participation and a greater period of development is important.
http://i.imgur.com/pce7m.jpg
Wow!!!
:D
Im really like it!!
looks great!
will it be included in final natty?
Yes, quite likely only on few well tested applications. Thanks!
Idea for Unity – Mockup
I did a mock-up with new ideas for Ubuntu Unity, including social networks and a better interface with menus.
The Unity is still a little confused. Many users find it difficult to use it. It would be nice ubuntu users post their opinions about an improvement in usability of the Unity.
Mockup this video:
http://www.youtube.com/watch_popup?v=0O6v9miJKGI&vq=hd720
Forum:
http://ubuntuforums.org/showthread.php?p=10591849#post10591849
Post Webup8:
http://www.webupd8.org/2011/03/unity-video-mockup-better-menus-social.html
Blog:
http://unitymockup.blogspot.com/
Inspiration from Google Wave scrollbars?
How does the scroll bar interaction work with resizing windows? (which is a very old and well known ubuntu bug).
Does this mean that resizing will be left to a specific place(s) on windows or will there be a finer interaction with window borders?
I have found in 12.04 that the scroll bars make resizing windows very difficult. Extremely small area to grab to resize. The demo vid uses a window with the horizontal scroll bar slightly above the bottom of the window. In 12.04 many status bars, buttons and other useful stuff has been done away with. When the scroll bar is on the very bottom of the window it is hard to resize, especially with overlapping windows and scroll bars.
Bravo! I clapped irl, great idea and well executed.