When designing for different screen sizes and zoom levels, space is limited. In some Pega use cases, we found that stacking multiple layers was cumbersome, confusing, and disorienting. Therefore, we made trade-offs to fit when working down to the 320x250 pixel baseline WCAG expects.
As space decreases, managing screen real estate becomes more important. Constellation hides non-essential features in certain workflows to prevent information overload, especially for neurodivergent users. This ensures that essential functions remain usable on the smallest of devices, from mobile to highly zoomed desktops. Constellation, like any system, must prioritize important features to stay in focus.
Some examples of decisions we have made for a better experience across the wide spectrum of users:
- Modals at small sizes will fill the entire screen
- Tables found in small modals, like Preview panel, have actions removed from the column headings. Note that the same actions are available at the table level.
- Non-critical elements are condensed or collapsed when not the main flow, e.g.,
- Navigation elements move into hamburger menu
- Utilities is moved under a tab along with Pulse and History
- Application name and logo are removed