Data entry is a key component of many APEX apps and should be very carefully considered when designing screens for mobile use cases. This page outlines a few patterns that Universal Theme provides as well as some general guidelines when designing forms and data entry pages for small screens.

When designing your data entry screens for mobile, consider using the Floating Labels field templates for your page items. These templates are especially optimized for mobile use cases as they provide a much larger tap area to gain focus and provides larger text for improved readibility. The field label will automatically shrink as a value is populated, but still remaining on screen so context is not lost.

Be sure to visit the Components → Forms → Floating Labels page for additional examples.

Steps

1. Select the page item in Page Designer
2. Modify the Template property under Appearance
3. Select either the Optional - Floating or Required - Floating template from the select list.

Here are some good design practices to follow when designing pages and apps for small screen devices.

• Limit the number of fields to fill out
  Fewer fields to complete means a higher successrate of users completing the form. Whenever possible, use smart defaults, and employ HTML5 apis such as geolocation to capture location data rather than asking the user to enter it manually.
• Use radio buttons in place of select lists when possible
  You can improve the usability of your form by replacing select lists which have a few options to a radio button. This will result in fewer taps to see the available options as they will already be displayed on screen. You can go even further by setting the Display as Pill Button template option to provide a more user friendly control.
• Position submit buttons near the end of the form
  This simple trick will make it far more easier to reach and tap on the submit button.
• Avoid using heavy controls and widgets
  While it may be tempting to use Interactive Grid on a phone, there may be alternatives that provide better usability and mobile performance. When in doubt, try to avoid large controls like Interactive Grids on mobile screens and instead try to optimize for user experience.