Apple leaks new scroll bar UI details in Mac OS X 10.7 Lion
Apple's chief executive Steve Jobs specifically highlighted a few new user interface changes coming in the next release of Mac OS X, but his presentation also revealed additional subtle but significant changes to how scroll bars work in the new Mac user interface.
Jobs' presentation focused on a few incremental evolutions, ranging from a more iPad-like implementation of full screen apps (Preview and iPhoto, specifically) to an enhanced version of Exposé named "Mission Control" that better integrates with the Dashboard and Desktop views, and also does a better job of clustering apps' windows together.
Apps' clustered windows in Mission Control behave more like groups of photos on the iPad, another example of the cross pollination going on between iOS and the Mac OS X desktop. The new interface also blends Spaces' virtual desktops into the user interface more cohesively in a way that will likely be accessible to a wider audience.
The concept of full screen apps goes beyond the "heads up display" full screen views the company has been experimenting with. Rather than presenting a single document full screen, with a normal menu bar, navigation controls and tool bar palettes that slide into view when the user mouses over the top and bottom of the screen, the new full screen view of iPhoto 11 presents a simplified, windowless interface with an iPad-like toolbar that's always visible. There's also subtle grey scroll bars.
What Jobs didn't address: vanishing scroll bars
Curiously, Jobs didn't make any mention of another significant interface element that appears to be undergoing a rather radical rethinking in Mac OS X Lion: the scroll bar, which now appears to vanish whenever its not in active use.
Jobs similarly presented iTunes 10 recently without even mentioning the rather radical vertical repositioning of its title bar window controls, as if such a change were not that big of a deal. To many Mac users however, any changes to the user interface guidelines are very noteworthy, and often even arouse controversy.
Screen shots taken during the "Back to the Mac" presentation--and particularly enhanced shots Apple has provided to the media--reveal that apps modernized by Apple as part of Lion do not present scroll bars until the user begins scrolling, similar to the iOS.
Specifically, the Mission Control screen shot (below, click to download the full size graphic) indicates that Mac OS X Lion's new Mail, iCal, Mac App Store, Safari, and the iWork Pages app all present their documents and content without active scroll bars at all.
On page 2 of 3: Lion's contextual scroll bars.
Lion's contextual scroll bars
The higher resolution image of Mission Control isn't entirely consistent with the apps Apple demonstrated however. Craig Federighi, Apple's vice president of Mac OS X engineering, demonstrated a brief glimpse of Mac OS X Lion features where a mishmash of scroll bars intermingled.
Incidentally, Federighi formerly led Apple's WebObjects server development before leaving the company in 1999 to serve as the chief technology officer for Ariba. Last year, Federighi was recruited back to Apple by Bertrand Serlet, the company's senior vice president of software engineering. Back in the 90s, Federighi worked as a protege of Serlet at Apple and before that at NeXT, where he served as a key architect of the company's object-oriented frameworks for enterprise application development.
In his sneak peak at Mac OS X Lion, Federighi first opened the new Mac App Store, which at launch displayed no scroll bar, despite having more content than could fit in the window. However, after scrolling into the app listings, a dark grey iOS-style menu bar appeared with no scroll arrows nor any menu bar track. After a moment of inactivity, the scroll bars vanish again. This appears to be the new look of scroll bars in Lion, or at least the preferred option.
The Mac App Store is also unique in that it centers the window button controls with the tool bar buttons, eschewing the use of a window title bar at all. Presumably, if you have the Mac App Store open, you don't need a line of text telling you that's what it is. This divergence from the Mac OS X human interface guidelines is interesting, and again, tends to result in a more iPad-like experience, despite the app existing as a free floating window on the desktop and not a full screen app.
In fact, the Mac App Store appears to be designed not to enter full screen app mode, as its green Zoom button is dimmed. In the presentation, Federighi also explicitly noted in passing that the green button is now considered a full screen app button rather than the "zoom to the largest window size that makes sense" that it always has been on the Mac.
On page 3 of 3: Still a work in progress.
Still a work in progress
In addition to the new Mac App Store, Federighi's demonstration also revealed the new scroll bar behavior in less exciting apps, including Dictionary, which he briefly opened up while showing LaunchPad. Dictionary opened with the same new tiny, trackless iOS-like grey scroll bar that then disappeared after a moment.
iPhoto 11 also launched with no visible scroll bar, despite having more than a single window of content. When taken full screen, the app continued to have no visible scroll bar. The existing version of iPhoto running on Mac OS X Snow Leopard always reserves a column for the scroll bar, even when there's no need for one (below). Safari and iCal also both appeared without scroll bars in the demo.
At the same time, while apps such as Pages are depicted in the Mission Control artwork (above) without using a scroll bar, the app was demonstrated on screen by Federighi with a bright blue Aqua style scroll bar visible at all times. This is probably because Pages hasn't yet been updated to the new Lion look and feel as other bundled apps (and the recently revised iPhoto 11) have. iTunes 11 was also portrayed with its current, custom grey scroll bar.
The beta version of FaceTime for Mac that Apple released to Snow Leopard users makes a half-step in this direction, presenting a non-standard, dark colored scroll bar that gets a slight highlight when the user mouses over it. However, its scroll bar never completely disappears as it does in the desktop Lion apps, or in today's iOS apps.
The disappearance of scroll bars when not in use follows Apple's history of experiments with getting rid of other window elements, notably the title bar. In Snow Leopard's QuickTime X, the title bar of the video-playing window vanishes to reveal a larger playback area, and then reappears when the user mouses over.
The new FaceTime app also has a vanishing title bar in the same shiny black finish as QuickTime X, although it only disappears during an actual call. That app is still in beta, so its user interface is still a work in progress. Its security model is also rough around the edges, initially presenting all of the signed-in user's MobileMe account information before the oversight was noticed and Apple began to block users from accessing their account details from within the app.
Jobs' presentation focused on a few incremental evolutions, ranging from a more iPad-like implementation of full screen apps (Preview and iPhoto, specifically) to an enhanced version of Exposé named "Mission Control" that better integrates with the Dashboard and Desktop views, and also does a better job of clustering apps' windows together.
Apps' clustered windows in Mission Control behave more like groups of photos on the iPad, another example of the cross pollination going on between iOS and the Mac OS X desktop. The new interface also blends Spaces' virtual desktops into the user interface more cohesively in a way that will likely be accessible to a wider audience.
The concept of full screen apps goes beyond the "heads up display" full screen views the company has been experimenting with. Rather than presenting a single document full screen, with a normal menu bar, navigation controls and tool bar palettes that slide into view when the user mouses over the top and bottom of the screen, the new full screen view of iPhoto 11 presents a simplified, windowless interface with an iPad-like toolbar that's always visible. There's also subtle grey scroll bars.
What Jobs didn't address: vanishing scroll bars
Curiously, Jobs didn't make any mention of another significant interface element that appears to be undergoing a rather radical rethinking in Mac OS X Lion: the scroll bar, which now appears to vanish whenever its not in active use.
Jobs similarly presented iTunes 10 recently without even mentioning the rather radical vertical repositioning of its title bar window controls, as if such a change were not that big of a deal. To many Mac users however, any changes to the user interface guidelines are very noteworthy, and often even arouse controversy.
Screen shots taken during the "Back to the Mac" presentation--and particularly enhanced shots Apple has provided to the media--reveal that apps modernized by Apple as part of Lion do not present scroll bars until the user begins scrolling, similar to the iOS.
Specifically, the Mission Control screen shot (below, click to download the full size graphic) indicates that Mac OS X Lion's new Mail, iCal, Mac App Store, Safari, and the iWork Pages app all present their documents and content without active scroll bars at all.
On page 2 of 3: Lion's contextual scroll bars.
Lion's contextual scroll bars
The higher resolution image of Mission Control isn't entirely consistent with the apps Apple demonstrated however. Craig Federighi, Apple's vice president of Mac OS X engineering, demonstrated a brief glimpse of Mac OS X Lion features where a mishmash of scroll bars intermingled.
Incidentally, Federighi formerly led Apple's WebObjects server development before leaving the company in 1999 to serve as the chief technology officer for Ariba. Last year, Federighi was recruited back to Apple by Bertrand Serlet, the company's senior vice president of software engineering. Back in the 90s, Federighi worked as a protege of Serlet at Apple and before that at NeXT, where he served as a key architect of the company's object-oriented frameworks for enterprise application development.
In his sneak peak at Mac OS X Lion, Federighi first opened the new Mac App Store, which at launch displayed no scroll bar, despite having more content than could fit in the window. However, after scrolling into the app listings, a dark grey iOS-style menu bar appeared with no scroll arrows nor any menu bar track. After a moment of inactivity, the scroll bars vanish again. This appears to be the new look of scroll bars in Lion, or at least the preferred option.
The Mac App Store is also unique in that it centers the window button controls with the tool bar buttons, eschewing the use of a window title bar at all. Presumably, if you have the Mac App Store open, you don't need a line of text telling you that's what it is. This divergence from the Mac OS X human interface guidelines is interesting, and again, tends to result in a more iPad-like experience, despite the app existing as a free floating window on the desktop and not a full screen app.
In fact, the Mac App Store appears to be designed not to enter full screen app mode, as its green Zoom button is dimmed. In the presentation, Federighi also explicitly noted in passing that the green button is now considered a full screen app button rather than the "zoom to the largest window size that makes sense" that it always has been on the Mac.
On page 3 of 3: Still a work in progress.
Still a work in progress
In addition to the new Mac App Store, Federighi's demonstration also revealed the new scroll bar behavior in less exciting apps, including Dictionary, which he briefly opened up while showing LaunchPad. Dictionary opened with the same new tiny, trackless iOS-like grey scroll bar that then disappeared after a moment.
iPhoto 11 also launched with no visible scroll bar, despite having more than a single window of content. When taken full screen, the app continued to have no visible scroll bar. The existing version of iPhoto running on Mac OS X Snow Leopard always reserves a column for the scroll bar, even when there's no need for one (below). Safari and iCal also both appeared without scroll bars in the demo.
At the same time, while apps such as Pages are depicted in the Mission Control artwork (above) without using a scroll bar, the app was demonstrated on screen by Federighi with a bright blue Aqua style scroll bar visible at all times. This is probably because Pages hasn't yet been updated to the new Lion look and feel as other bundled apps (and the recently revised iPhoto 11) have. iTunes 11 was also portrayed with its current, custom grey scroll bar.
The beta version of FaceTime for Mac that Apple released to Snow Leopard users makes a half-step in this direction, presenting a non-standard, dark colored scroll bar that gets a slight highlight when the user mouses over it. However, its scroll bar never completely disappears as it does in the desktop Lion apps, or in today's iOS apps.
The disappearance of scroll bars when not in use follows Apple's history of experiments with getting rid of other window elements, notably the title bar. In Snow Leopard's QuickTime X, the title bar of the video-playing window vanishes to reveal a larger playback area, and then reappears when the user mouses over.
The new FaceTime app also has a vanishing title bar in the same shiny black finish as QuickTime X, although it only disappears during an actual call. That app is still in beta, so its user interface is still a work in progress. Its security model is also rough around the edges, initially presenting all of the signed-in user's MobileMe account information before the oversight was noticed and Apple began to block users from accessing their account details from within the app.
Comments
Sure, there are some situations where compromises have been made due to lack of screen real estate on devices like the iphone, but there is no excuse for doing this on a desktop machine.
If there is more content than will fit on the visible portion of the view, there should always be some visual indication that there is more to be seen (e.g. by showing scrollbars).
Sure, there are some situations where compromises have been made due to lack of screen real estate on devices like the iphone, but there is no excuse for doing this on a desktop machine.
I like the idea of an indicator that you aren?t at the end, but I love the scrollbars disappearing as I haven?t used them since getting a scrolling trackpad.
3 pages of link bait to say...
Lion is going to have a different looking UI to Snow leopard.
Well colour me shocked.
Now give me back the last 4 mins of my life.
There has got to be something better to blog about??
I like the idea of an indicator that you aren?t at the end, but I love the scrollbars disappearing as I haven?t used them since getting a scrolling trackpad.
Yes, all I want to know is: "Is there more here?" I don't need to to have scrollbars in my face all the time telling me this. It's visual clutter. Find another way.
Scrollbars do have their use, but we have so many other ways to scroll (spacebar, 2-finger drag, scrollwheel, page down key) nowadays that I'm completely fine with them being hidden when not in use. In fact, I actively attempt (at least in Finder) to size my windows so the scrollbar disappears if possible, so I'm already 1/2 towards what Apple's getting at in 10.7. Perhaps there could be some type of mouseover event that would make the scrollbars reappear if 10.7 detected the user's pointer near the edge of a window? That would let those who click to page down/up to continue to do so.
There needs to be some sort of visual indicator to show that there is more content, that does not require a mouse over or any other interaction. I have no problem with mouse over scrollbars etc, but you just don't know there is more unless there is an indicator there when you are just looking at the screen.
If there is more content than will fit on the visible portion of the view, there should always be some visual indication that there is more to be seen (e.g. by showing scrollbars).
Sure, there are some situations where compromises have been made due to lack of screen real estate on devices like the iphone, but there is no excuse for doing this on a desktop machine.
I agree. By doing this, Apple is removing an indication of how much more stuff is on the page or that you are able to scroll. I hope that it is at least visible when the mouse is moving over that application.
I have no problem with mouse over scrollbars etc, but you just don't know there is more unless there is an indicator there when you are just looking at the screen.
Actually there will be an indicator of sorts... just as in iOS, when you hit the bottom or top of content it is scrolled but snapped back indicating you hit the end or the beginning. It is just an opposite approach; Instead of indicating that there's more content, it indicates when there is no more. This is more natural, as we usually assume there's going to be more anyway.
Nobody had issues with this method on the iPhone or iPad, so there's no reason for it to be in issue on the Mac.
Actually there will be an indicator of sorts... just as in iOS, when you hit the bottom or top of content it is scrolled but snapped back indicating you hit the end or the beginning. It is just an opposite approach; Instead of indicating that there's more content, it indicates when there is no more. This is more natural, as we usually assume there's going to be more anyway.
Nobody had issues with this method on the iPhone or iPad, so there's no reason for it to be in issue on the Mac.
Indeed. I can't think of a single UI designed since the invention of the scroll wheel-equipped mouse that has an always-displayed visual indicator of position. They always only display while scrolling.
I like the idea of an indicator that you aren?t at the end, but I love the scrollbars disappearing as I haven?t used them since getting a scrolling trackpad.
Yes, all I want to know is: "Is there more here?" I don't need to to have scrollbars in my face all the time telling me this. It's visual clutter. Find another way.
Actually there will be an indicator of sorts... just as in iOS, when you hit the bottom or top of content it is scrolled but snapped back indicating you hit the end or the beginning. It is just an opposite approach; Instead of indicating that there's more content, it indicates when there is no more. This is more natural, as we usually assume there's going to be more anyway.
Nobody had issues with this method on the iPhone or iPad, so there's no reason for it to be in issue on the Mac.
The scroll bar does more than tell you if you are at the end of a document. It also shows you how far into the document you are (the scroll bubble is 1/3 down the scroll bar, you have 2/3 of the document to go) and how long the overall document is (the bubble takes up about 1/10 of the scroll bar means there are 10 screens of content in your document). And I shouldn't have to move the mouse all the way over to the other side of the screen just to see this information. Finally, let's say I do want to mouse over and scroll my document, where do I aim my mouse movement? Is the bubble near the top of the scroll bar? In the middle, near the bottom? You don't know until after you've already moved your mouse there...only to find out your cursor is nowhere near the bubble.
On a small screen like the iPhone or iPad, pixels are at a premium, and it is a good trade-off. On a full size computer screen, is saving a few pixels really that big a deal? The rearranging of the three window-control buttons was silly, too. All to save 10 pixels of height on the title bar (which also makes it more difficult to grab the window by the narrow space above the iTunes display to move the window).
These are all little things, but they start to add up and degrade the overall usability. And before you know it you have a buttonless iPod shuffle.
Indeed. I can't think of a single UI designed since the invention of the scroll wheel-equipped mouse that has an always-displayed visual indicator of position. They always only display while scrolling.
Care to name a few non-smartphone apps that behave that way? I'm pretty sure Tiger, Leopard, Snow Leopard all came out well after the invention of the scroll-wheel mouse. Not to mention every application I have purchased since then. Every single one of them has always visible scroll bars whenever there is content beyond the size of the window. Even Aperture in full-screen mode shows scroll bars to scroll through your photos.
The scroll bar does more than tell you if you are at the end of a document. It also shows you how far into the document you are (the scroll bubble is 1/3 down the scroll bar, you have 2/3 of the document to go) and how long the overall document is (the bubble takes up about 1/10 of the scroll bar means there are 10 screens of content in your document). And I shouldn't have to move the mouse all the way over to the other side of the screen just to see this information. Finally, let's say I do want to mouse over and scroll my document, where do I aim my mouse movement? Is the bubble near the top of the scroll bar? In the middle, near the bottom? You don't know until after you've already moved your mouse there...only to find out your cursor is nowhere near the bubble.
On a small screen like the iPhone or iPad, pixels are at a premium, and it is a good trade-off. On a full size computer screen, is saving a few pixels really that big a deal? The rearranging of the three window-control buttons was silly, too. All to save 10 pixels of height on the title bar (which also makes it more difficult to grab the window by the narrow space above the iTunes display to move the window).
These are all little things, but they start to add up and degrade the overall usability. And before you know it you have a buttonless iPod shuffle.
Good post. Well said.
The scroll bar does more than tell you if you are at the end of a document. It also shows you how far into the document you are (the scroll bubble is 1/3 down the scroll bar, you have 2/3 of the document to go) and how long the overall document is (the bubble takes up about 1/10 of the scroll bar means there are 10 screens of content in your document). And I shouldn't have to move the mouse all the way over to the other side of the screen just to see this information. Finally, let's say I do want to mouse over and scroll my document, where do I aim my mouse movement? Is the bubble near the top of the scroll bar? In the middle, near the bottom? You don't know until after you've already moved your mouse there...only to find out your cursor is nowhere near the bubble.
On a small screen like the iPhone or iPad, pixels are at a premium, and it is a good trade-off. On a full size computer screen, is saving a few pixels really that big a deal? The rearranging of the three window-control buttons was silly, too. All to save 10 pixels of height on the title bar (which also makes it more difficult to grab the window by the narrow space above the iTunes display to move the window).
These are all little things, but they start to add up and degrade the overall usability. And before you know it you have a buttonless iPod shuffle.
Yes I do understand that the scroll bars show how much of the document is visible and where you're currently located within the document. However, I also believe that a majority of new users coming to the Mac next summer will most likely come from using iOS devices and be used to the iOS way. This is what Lion is about. There will most likely be a checkbox in the Appearance preference pane that will allow the old guard to enable the old-style scroll bars as well. Just because the new style is being demonstrated, doesn't mean they've done away with the old.
You also don't have to move your mouse all the way over to see this information, the scroll indicator appears when you scroll, so as you're scrolling you can see all that information regarding size and position within the document.
Good post. Well said.
Ditto. Nice post, Wiggin.
And why bother having a scroll bar track? If the scroll bar disappears then why continually show the track? The scroll bar may as well be there too.