Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 05:21, 7 May 2012 by hamishwillee (Talk | contribs)

Mobile Design Pattern: Marquee

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Yiibu (06 May 2009)
Last edited: hamishwillee (07 May 2012)


This design pattern is part of the Mobile Design Patterns series.

Contents

Description

A string of text that scrolls vertically or horizontally across a view.

Use when

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


Use how

On mobile, marquees are most often scrolled horizontally and the animation only initiated on focus.


A scenario:

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.

The implementation:

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


42-marquee-animation.jpg

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.

Design Tips

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


43-marquee.jpg

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.

55 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×