Multichannel

Multichannel guidelines

Successful apps work anywhere, in any channel, at any time.

Whether texting chatbots about account info, commanding voice assistants to pay a bill, submitting forms offline on a phone, or monitoring real-time metrics of build progress on a floor-to-ceiling screen with a lightning fast connection, Pega apps and components adapt to any size or condition.

Four components of Pega’s multi-channel experience include:

Responsive/adaptive

  • The Pega Platform can deliver both responsive UI (client-side variation, according to viewport), and adaptive UI (server-side variation, according to the device)
  • Use consistent UI patterns for elements that are common to a specific OS.
  • When possible, use native optimizations (e.g., web views with native container).
  • The size of components, UI elements, and action areas should target the proper device size and persona. For example, because Pega allows multiple app views in a single application, one can easily create a simplified mobile and chatbot "view" for end-users and a "back office" view for employees, each using the same data and processes.

Interaction

  • All interactive areas must be big enough to accommodate larger fingers.
  • Use expected physical gestures for interactive elements to create a sense of consistency for users.
  • Employ the various tools and sensors available on a typical device only to enhance the user experience (e.g., voice command fields or physical gestures using accelerometer data).
  • Consider how various devices may work in tandem with other channel experiences to provide a more holistic feedback loop.

Connectivity

  • Apps work anywhere at any time, no matter the network's availability or quality.
  • Communicate changes or conflicts and help the user resolve them.
  • Reduce the size of images and files for slower or restricted connections.

Device considerations

  • Beyond limited screen size, mobile devices are often used in busy or distracting environments.
  • Many devices are hand-held, meaning it is likely that parts of the screen are obscured from view.

Last updated: May 2019

Mobile considerations

App Store submission

App icons

  • Provide a square (icon.svg) and round (icon_round.svg) 512 x 512 pixel application icon in SVG format.
  • Provide two single-color 300 x 300 pixel icons for Android notifications (keepalive_icon.svg and notification_icon.svg). They can be the same icon.
  • If you need a custom splash logo, you will need a 3x dpi PNG for iOS, and variations of one for Android at different resolutions (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
  • All assets should be packaged following the template Pega provides, and be uploaded into Pega.

All Pega applications used on mobile device use the default Pega app icon to start, but may customize for their app if desired.

Mobile app icons have a simple "flat" graphic toward the top with "Pega" brand text below. iOS icons have a subtle gradient in a rounded-point square; Android icons have a solid white background in a circle. Icons should not use more than one area with the new Pega teal.

Application icon example

When submitting a mobile app to an app store, follow the guidelines for the various images required by the Apple App Store and Google Play Store.

Preview screens

  • Its always best to show the real screenshots from the actual device you are targeting.
  • You will need 1242 x 2208 pixel screens for Android and smaller format iPhones, 1242 x 2688 pixel screens for the iPhone X series, and 2048 x 2732 pixel screens for iPad Pros.

Native notifications

  • Titles should be not be longer than 40 characters.
  • Even though devices can handle up to 140 characters in a message, keep crucial information in the first 40 characters so it may appear in Android's notification preview text.

Last updated: Aug 2019