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