Due to where they’re located, MBTA screens present a few design challenges: Many are in distracting environments, interspersed with advertising, and may be located far from riders (for example, at platforms, but across the tracks). Additionally, the 10- or 15-second content-delivery segments limit the time we have to deliver a message.
This section outlines best practices for maximum readability, which is the key factor in whether screens content achieves its ultimate goal—connecting with our riders.
It also meets the guidelines as defined by the accessibility section.
Designing Text
All screens content must meet minimum readability requirements—this includes real-time predictions, service alerts, and advertising. To ensure riders can read and understand your content, follow these guidelines:
- Keep word count low. This helps readers digest your message before they’re distracted by an advertisement or vehicle arrival. We suggest no more than three sentences for the entire 10- to 15-second segment.
- Use sentence case. Sentence case is easier to read than title case or all caps.
- Left-align text. This is almost always easier to read. On triptychs, center-aligned text on the center screen is sometimes acceptable.
- Pay attention to type size, leading, and tracking. Different type sizes, viewing distances, and aspect ratios require different approaches. For example, narrow text boxes (like on triptychs and Solari screens) benefit from tighter leading than horizontal text boxes (like on DUPs). Text that is too thin or bold can be difficult to read.
Designing Layouts
A good layout helps riders scan and digest content. Due to the challenges detailed above, MBTA screens require more attention to hierarchy, spacing, and balance than more flexible formats (like MBTA.com, flyers, or posters). To create readable layouts, follow these guidelines:
- Reduce visual clutter. Short viewing times limit the information a rider can digest. New, additional design elements should not distract from key information.
- Prioritize critical information. Animation and imagery are useful for earning rider attention. However, arrival times, disruption information, and system announcements should always occupy the most important place in your hierarchy. When space and time are limited, prioritize information that directly affects riders—not branding, imagery, or decoration.
- Give each element space. While text size is important, breathing room also makes your layouts readable. Clumped-together elements can make messages difficult for riders to understand from a distance. For maximum readability, layouts must balance large type sizes and generous margins.
- Mind the gap in triptychs. There is a 190-pixel gap between triptych screens. Images should account for this gap to avoid jarring, mismatched edges. In addition, text should never span more than one screen on a triptych.
Keep in mind