The new designs for notifications display Page Names and Topic Names in numerous situations and positions. Because these names can run to hundreds of characters, creating attractive and user-friendly designs will require us to truncate the names. The new designs also call for excerpts from page posts to be displayed, and the same requirement applies to these.
In establishing appropriate character limits, it may be desirable for the number of characters for a piece of data to vary in different positions: e.g., page names might need to be shorter in a secondary link versus a message body. However, while space is less constricted on the Notification Page than it is on the Notifications Panel, Engineering would prefer that limits for individual elements (e.g., message body, secondary link) remain consistent across both designs.
Below is a list of all the different positions and elements I can think of that will need truncation. Pau, I think the first part of this task falls to you -- to set appropriate limits based on your designs.
PAGE NAMES
- in the first lines of notifications (Panel/Page).
- in secondary links (Panel/Page)
- in filtering menus (at left) on the Notification page
TOPIC NAMES
- in the first lines of notifications (Panel/Page).
- in secondary links (Panel/Page)
- in bundled notifications (Panel/Page)
- in filtering menus on the Notification page
CONTENT EXCERPTS
- in the second lines of notifications (Panel/Page).
Proposed solution
For the notification text:
- Truncate usernames at 20 characters.
- Truncate page titles at 50 characters.
For the secondary actions:
- Truncate both usernames and page titles at 15 characters (we could explore options for these to adapt to the available space, but 15 characters should provide enough information without causing the line to wrap).
- Don't truncate when they are inside the more ("...") menu. This happens with bundled notifications, for example.
For excerpts:
- Show one line of content and truncate when they overflow based on the available width (e.g., using text-overflow: ellipse).
- If this makes hard to present the content inside quotes, we can skip the quotes and rely on the lighter grey text color to act as the delimiter for the excerpt.
Some additional considerations:
Additional considerations:
- Make the notification panel a bit wider to have more room for content (e.g., 500px instead of the current 450px as recommended in T122646).
- Check that truncation works well across scripts. This is always problematic since the concept of "character" is not trivial to map to some languages.
- Apply character-based truncation with a safety range. For example only truncate to X characters if the text is longer than X+5 characters. That will avoid a 31 character-long username to get truncated just because of one character (making the truncated version with the ellipses longer than the original one).
