Skip to Content
SAP Cloud Applications Studio

Cloud for Customer iPad UI design guide / best practices

Tags:

Unlike a standard web browser, the iPad has limited visual assets. One of the major differences is the user interaction and user experience. For example, on an iPad most of the user actions are finger gestures, so some actions such as ‘mouse click’ are not possible anymore. This different interaction requires a change in how you approach UI configuration with a "mobile first" approach for the SAP Cloud for Customer application.

Given the SDK was meant to support a variety of UI patterns and different deployment options, the SDK will not limit you from configuring the UI that will either not work or be sub-optimal UX when viewed on the iPad. To balance functionality with usability, the Cloud for Customer UX team came up with standard UI patterns that all standard Cloud for Customer UIs (Work Centers, Data Sets (TOWLS), Thing Inspectors, Quick Views, and Quick Creates) have been designed to work out of box for iPads. However, the Data Set (TOWLS) and Thing Inspector floorplans have lots of flexibility so we advise you to use this guide as well as review the existing standard UIs to give you a frame of reference of what we recommend as optimal UX.

Best practice #1 before you start on any custom UI configuration, you should familiarize yourself with the different standard UIs which will give you an idea how to design your custom UIs. In particular, the Account Management, Quote Management, and Visit Management Thing Inspectors will give good variety of patterns that have been optimized for specific functional use-cases.

Best practice #2 after you have finished your custom UI configuration, test your UI on both the web browser and the iPad. You will immediately know on the iPad if the UI features are not configured correctly. Just because it works on the web browser doesn't mean it will work the same on the iPad.

Best practice #3 compare your custom UI configuration with one of the standard UIs on the web browser. Data Sets (TOWLS) and Facets (Tabs) within Thing Inspectors have lots of flexibility. If they look different from a style point of view (your custom buttons are appearing in different places, your custom search filters showing in different places, you can do different actions in a list like inline edit), change them to look like the standard UIs, otherwise there is a high likelihood they will not work on the iPad.

Best practice #4 what you see in any standard UI is possible to configure an identical UI in SDK as the UI designer that you use in SDK is the same tool our developers use to build standard product features. There are lot of "advanced" undocumented UI configuration features, so if you find something that you would like to configure and can't find instructions please let us know and we wiil try to release configuration guides. In the interim you can always open a standard UI in the configuration explorer in UI designer and "reverse engineer" the UI by copying the configuration details, which is what most of our developers do as well.

Before you start, ensure that you have downloaded the most recent version of this document from SAP Service Marketplace, at http://service.sap.com/cloud4customer.

https://www.dropbox.com/s/oywj8li20exowvh/MobileAppDevGuide.pdf

Rei Kasai

Product Management

Cloud for Customer

Former Member