Learning about user interface design guidelines for 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.

• 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.
  For example: Instead of small text links, use buttons that are large enough to tap. Remember that using a mouse allows for much greater precision than tapping on a touch screen, so the important UI components should be convenient to tap.
• 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 Designing a new mobile list page 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.
• 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.
  For more information, see Learning about storing large reference data in 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.
  For example: Pega Platform provides you with mobile-ready controls and actions, such as Signature capture, Map, Attach content, Scan barcode/QR code, Mobile search, Get directions, and Floating action button.
• 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.
  For more information, see Configuring a responsive user interface.
  For example: A dynamic layout might change a two-column layout to one column on a smaller device, to increase the readability and usability on narrower screens.
• 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.
  For example: Add a visibility rule that displays an element of the UI only on mobile devices.