Best practices for mobile form design in SharePoint

Build effective SharePoint forms with Nintex that are accessible anywhere, at any time, and on any device. You built the workflows, you built the forms, now make them mobile.

Mobilize your processes

Nintex Mobile apps help you get more from your business processes by allowing users to interact with them on-the-go. Nintex Mobile apps extend the promise of Workflow for Everyone to your mobile devices, improving the user-experience and enabling increased productivity for your whole organization quickly, easily and securely. You built the workflows, you built the forms, now make them mobile.

Nintex Mobile - Mobilize Your Processes

Where the experience starts: design your form with Nintex Forms

Nintex Mobile works together with Nintex Forms for SharePoint by extending access to available forms on your mobile device. SharePoint administrators can design forms visually with Nintex Forms, and, with a simple action, publish them for consumption on mobile devices, with the option of being able to choose the target platforms and form factors.

Forms published for Nintex Mobile Phone or Tablet layout are displayed in a native format to the mobile device selected and can be accessed offline, once the form definition has been downloaded on your mobile device. This happens automatically the first time you open the form on your mobile device. The advantages of using the Nintex Mobile apps and native form format over a generic HTML approach are:

·         You want to publish multiple mobile forms and have your users access them from one single point, instead of distributing multiple URLs to separate forms.

·         You want to allow users to fill in forms offline and attach files and images directly from the app.

·         You want a fully integrated experience for your business processes, where forms and tasks can all be accessed in one single and consistent application.

As mentioned in my other article about Creating mobile accessible forms in SharePoint, Nintex Forms allows you to optimize the layout of mobile forms for phones (typically 4” –5” screen size) or tablets (7” – 10” screen size).

When designing forms for smartphones and tablets, you should take the opportunity to optimize and simplify the form layout for the specific mobile device.

Try to add value to the mobile experience by asking yourself questions such as:

·         What is absolutely essential to submit when you’re on the move?

·         What’s the best way to represent the form and information?

·         Is it clear enough without too much explanation (i.e. reduced screen size may limit users’ ability to enter full-length explanations and descriptions of form fields).

Mobile form optimized for a phone layout

A few best practices for designing effective mobile forms:

·         Align labels and controls in a column, one beneath the other one when designing for phone view.

·         Portrait mode usually works better with longer forms that require scrolling. In this case, we recommend one direction of scrolling (up and down).

·         Save and Cancel buttons do not need to be placed on your form; the Nintex Mobile apps will do that for you automatically, by respecting the design guidelines of the mobile platform in use.

·         Do not add images to the mobile form or specify background colour, unless really required. Keep your mobile forms lean and mean, the smaller the better. This results in quicker download times on a mobile device when connectivity is poor. Nintex Mobile will automatically optimize the layout and formatting of the form for the specific mobile platform.

·         Use a Yes/No control instead of a Choice control with radio buttons when you require an “either/or” answer. Mobile devices render this type of control with a simple switch most users are familiar with, and the overall size of the form definition is smaller, which reduces download time on a mobile device.

Use of Choice control with option buttons

Use of Yes/No control

The Yes/No control as rendered by Nintex Mobile

Categorize your forms

Forms created with Nintex Forms are displayed within a specific category in Nintex Mobile. I’d recommend assigning a category to forms, so they are easier to locate on the mobile app. To assign a category:

1.     Click on Settings in the Ribbon.

2.     Expand the Nintex Mobile Settings section and specify the category of the form. Forms without an assigned category will be displayed in Nintex Mobile under the “No Category” group.

In the same section, it is also possible to specify a form name and description for mobile use. Uncheck the Use default Form Name and Form Description options, and enter the preferred name and description in the appropriate fields.

The name and description entered here will override the default values of the SharePoint form, and will be used instead by Nintex Mobile.

To personalize further your forms, it is also possible to specify a custom icon that is displayed in Nintex Mobile next to the form name. It is necessary that the icon is accessible by your SharePoint server, so you need to specify the icon’s full URL in the Icon field.

The form icon is exposed in three places:

1.     App in Full Screen: displayed dimension is 62 by 62 pixels

2.     App in Snapped View: displayed dimension is 42 by 42 pixels

3.     The Start Screen when you pin a form: displayed dimension is 150 by 150 pixels

The recommended dimension of the icon is 150x150 pixels. This will scale down to the other sizes.

The Nintex Mobile Settings section in the form’s Settings page

That’s all for now. In the next article, I’ll describe how to mobilize your forms for SharePoint workflow and provide a seamless experience to your users at any stage of a business process, anywhere and on any device.