Mobile Design Pattern: Marquee
This design pattern is part of the Mobile Design Patterns series.
A string of text that scrolls vertically or horizontally across a view.
- Use marquee scrolling to display non-critical strings of text within a small space.
- S60 recommends you only use marquee scrolling for texts that are not generated by the phone, and for which truncation is not desired.
On mobile, marquees are most often scrolled horizontally and the animation only initiated on focus.
We have a photo management application, which displays lists of image folders. The top string of each list item contains critical information (ex. The name of a folder) while the second string contains a truncated, non-critical string of associated information (ex: the folder description). On focus, the truncated string will animate as a marquee to display the full folder description.
- Begin with a truncated string of text.
- Activate the marquee once the list item has focus.
- Scroll (i.e. animate) the text from left to right until the entire string has been displayed.
- Revert to the original truncated string then stop (or pause) the animation. Several methods can be used to revert to the original string. The simplest (and least distracting for the user) is to loop the animation until all of the copy is back in its original position.
Note: There are several ways to animate the transition from step 4 to 5. Examples can be found within the Nokia carousel (3rd Edition, FP2), Nokia Search and many mobile email clients.
- Marquee animations can be difficult to read—especially if the user is merely glancing at the device. For this reason, they should only be used to display non-critical information. Displaying the marquee only on focus also increases the likelihood the user will actively be engaged with this particular piece of content and will not mind pausing slightly to read it.
- Only use a marquee if you have a reasonable expectation that you will be able to control the speed of the animation (and that you will be able to test and adjust the speed during development).
- Only one marquee should be active on screen at a time.
Note: While there is no proof that vertical marquees are more difficult to read than horizontal ones, it is recommended that you only use horizontal marquees on small screens.
Figure: The S60 3rd Edition carousel uses a marquee to display the second row of data i.e. the address of a recent map location. Within the Search application however, the marquee is used to display the first row of data. i.e. the email subject.