My real name

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.

Analysis

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

Evaluation

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.

Conclusion

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.”

-Josh

UPDATE

This concept has been brought to life. Check out my project Reveal with Conrad Kramer on Cydia today! Watch this video to see how Reveal works. 

© 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.

Analysis

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)

Evaluation

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

Conclusion

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.

- Josh

UPDATE

This concept has been brought to life. Check out my project Reveal with Conrad Kramer on Cydia today! Watch this video to see how Reveal works. 

© 2012 Joshua Tucker