Designing the user interface of mobile apps
Ensure that your application dynamically adapts to the screen of a mobile device by following the UI design guidelines for mobile apps. This way, you can build an application with a responsive and adaptive design that works on a range of devices.
Pega Platform provides you with a
modular, low-code development environment that helps you create flexible user
interfaces. When you design the UI of your application, keep in mind the following best
practices, to optimize the UI for mobile devices.
- Consider the screen size, font size, and the position of the controls in the UI of your mobile app.
- Design the application with touch controls in mind.
- Make the UI simple and intuitive by identifying the critical information that users need, and then designing the interface primarily for that information.
- Highlight the most important information on the screen by including the information in a section that is always visible.
- Position supporting information below the important content, or hide less important content until the user requests the information.
- Give the non-critical parts of the UI less emphasis by using a smaller font and weight, or an unobtrusive color.
- Maximize the actionable area that appears on the screen by attaching actions directly to a dynamic layout, instead of using multiple buttons in a layout that might make the buttons difficult to tap.
- Limit scrolling to no more than two or three screens, especially for screens
with editable content.When your content does not fit a single screen, try to break up the screens to create a flow in which each screen is saved before the user navigates to the next screen.
- Make use of progressive disclosure features, such as collapsible sections or menus, but remember that mobile users rely on accessing the critical parts of the mobile app quickly, so do not overuse these features.
- Take advantage of native components whenever possible, by using features such
as mobile list pages or mobile search.For more information, see Authoring mobile list pages and Adding a search gadget.
- To display lists with more than 20 rows in online-only mobile apps, control the
amount of data on the screen by using the pagination option in a repeating
dynamic layout.For more information, see Creating a repeating dynamic layout.
- To ensure that event targeting works as expected in mobile apps, avoid using AJAX containers in your application.
- Especially for offline-enabled mobile apps, you can guarantee efficient synchronization of the data page to the mobile client by configuring the data pages as large data pages.
- Ensure that your design is consistent and works with all types of browsers and
mobile devices by using the out-of-the-box controls whenever possible.Some controls have a mobile-specific configuration that helps you apply native-style rendering when you display these controls on a mobile device.
- Use a clean application skin that you can readily customize for mobile
use.Instead of converting an application from previous Pega Platform versions, it is often more efficient to create a new application that benefits from the latest versions of the Cosmos and UI-Kit applications.
- Help users provide correct input in the fields of your mobile app by ensuring that you use the correct data types for properties in the UI controls.
- Provide a visual effect that fits the context of the action and informs the
users that the content of a screen is loading, by using the out-of-the-box
transition effects for actions.Ensure that you are consistent with the types of transitions that you use for specific actions, and that you do not overuse them in mobile apps in a production environment.
- Ensure that the content of your mobile app always displays correctly, regardless of screen size and orientation, by using dynamic layouts with responsive breakpoints.
- Ensure that the layouts in your UI adjust to different screen resolutions by
using percentages, instead of pixels, when you define the size of the
layouts.When you use pixels to define the width or height of a layout, you risk introducing unwanted user experience side effects, such as horizontal scroll bars.
- Display several layouts together and determine a common method of navigation
between them, by using the Layout group feature.By default, depending on the screen size, the content of a layout group can be set to display as tabs, accordions, stacked, or menu layouts. In addition to touch support, layout groups also support horizontal swiping for moving between the members of the group.
When you use tabs, avoid a setup with more than three tabs for a phone-sized device, to make each tab large enough to conveniently tap.
- Tables are great for presenting large amounts of data, but they are less
effective on mobile devices with smaller screens, and offline-enabled mobile
apps do not support them. Instead, use repeating dynamic layouts that display
your data in a list format.Repeating dynamic layouts are flexible: you can style them with ease, they optimize performance, and they adjust the content of the layout to match the screen size.
- If tables are necessary, ensure that you define the importance setting for each
table column and enable the responsiveness setting for the table.The table layout uses the importance setting to adjust the way the content of the table displays on a mobile device, by prioritizing the display of the most important data.
- Use conditional logic to determine what content should appear in your mobile app.
Guarantee a modern, optimal mobile user experience:
Optimize the performance of the UI:
Create a consistent UI with built-in features:
Build a responsive and adaptive UI:
Previous topic Designing applications for mobile use Next topic Developing mobile apps