Earlier this morning, I posted an idea for scrolling text on iOS notification banners. I made note of the fact that the lock screen is a viable place for this implementation as well. However, there are two significant differences between lock screen notifications and the banners.
- Notifications on the lock screen do not clear until the device is unlocked
- Lock screen alerts show more than one line of text.
With this in mind, I feel the best way to go about scrolling in this view is to do it like native iOS - vertically.
In this post, I will be discussing my thoughts on how to go about this when in the bubble view.
Note: All measurements are rounded to the nearest whole pixel.
Here are some important figures to note:
Number of Characters Visible (Unexpanded) = 130 (including whitespace)
Full Size Bubble Dimensions (Unexpanded - Max Characters) = 262 pixels by 592 pixels
I find that the best way to alert the user that the bubble is selected for scrolling is by expanding it. This can be done by simply tapping it. Upon tapping it once, it will expand and show more text (three new lines). However, if you scroll your finger through the bubble, you can move up and down through the message. To exit the selected bubble view, tap it again and it will resize.
Note: The scrolling bar on the side of the bubble in the picture is only viewable when you scroll (just like native iOS).
Here are some more important figures to note:
Number of Characters Visible (Expanded) = 225 (includes white space - scrolling allows the user to view the entire message thus making it an infinite amount of characters that can be viewed)
Full Size Bubble Dimensions (Expanded - Max Characters) = 297 pixels by 592 pixels.
The reason why I chose it to be these dimensions and allow three new lines is because, if resized evenly, it expands just a tiny bit but allows three more lines of text. It will look clean and still won’t completely cover the screen. Plus, the importance of the expansion is to alert the user that they can scroll in this view. Making it any larger would surely make the bubble obtrusive in my opinion.
As all the core information is above, here’s the full message I sent myself.
“Tap to select the bubble. It will expand at that point and will allow you to scroll through the message from top to bottom and back again. Tap the bubble again to bring it back to normal. This will still allow full compatibility with Abstergo.”
© 2012 Joshua Tucker
Due to the fact that the banner can only stretch as far as the length of the iOS device’s screen, many times characters and words are truncated in order to fit. A way to alleviate this issue would be to implement a scrolling ability through the text like in the Music application when the name of the song or artist is longer than what is viewable.
Note: Although this is oriented towards banners from the SpringBoard (while using the device), this could apply to notifications that appear on the lock screen as well.
After timing and toying around with the implementation of this feature in the Music application, I came up with some figures alongside facts on the banners themselves that would make this addition viable and user friendly.
Note: All figures are rounded to the nearest second.
View Time of Notification Banner = Seven seconds (approximate - based on three counting tests)
Number of Characters Viewable on Banner = Fifty-four characters (includes whitespace)
I preceded to Music to do some timing tests on how fast the scrolling was when playing a song. My tests were undertaken as follows:
The text (in this case the artist) disappears from view as it passes under edge of the bar. As soon as it started moving again, I counted to one second and benchmarked in my mind where the text was at the time when I went to two. I then counted the number of characters that were already hidden before I moved on to two. I did this three times to ensure better reliability in timing.
Number of Characters Scrolled Per Second = Nine characters (approximate - includes whitespace and based upon three measurements)
Now, with these numbers, let’s see what happens. For the best user experience, the banner needs to stay on screen without motion for a least one second. This will allow the user time to focus on the banner itself and what text is on there.
9 x 6 = 54 characters in six seconds
54 (what’s already visible) + 54 = 108 characters
With this said, you could read most likely read an entire text message and almost an entire tweet (maxed out at 144 characters) by the time the banner disappears from view. And this would all be done at a pace that is easy on the eyes and user intuitive.
As an example, if this had been implemented, you would have seen the entire message I sent myself in approximately three and a half seconds:
“Imagine if this scrolled like a stock ticker. The banner stays for about seven seconds.”
Similar to how the Music application handles this, the text would disappears as it hits the edge of the character cell (the divider before the icon on the far left). If the text is too long for the screen but not much, it will scroll again through the message if time allows. However, it will always wait one second after returning before scrolling again.
© 2012 Joshua Tucker
This project is in progress.
The pre-beta release of Mountain Lion gave us the definitive conclusion that unification between iOS and OS X is coming. It’s a great thing and will enhance the user experience and reliability between devices.
With that in mind, I feel that the iPad could take some additions from OS X like the Mac has done in regards to the iPad. Adding iOS 5 Growl-isk banners to the iPad would utilize more of the screen real estate, but allow for more content and could potentially fit this device quite well.
These banners are based off of the iOS 5 bubble notifications that appears on the lock screen and have been transformed to fit the iPad screen. The logistics of how you can interact with the notifications is in my head but hasn’t hit paper yet.
Keep looking back and see what happens! I really like this rendition. I would appreciate all respectful and constructive criticism that you have!
Special thanks to my cousin Nevin for the iPad image.
© 2012 Joshua Tucker