Mobile usability & User Experience (UX) for convincing quality & acceptance

What do you think of when the topic comes to forms, checklists and the documentation of assignments? Spontaneously, some may still have an outdated image in mind, with stacks of printed paper forms or confusing and boring web forms. The HybridForm App and Software shows that it can be done differently – and combines modern technology, intelligent functions and optimal user experience into a reliable tool for mobile data collection and digital documentation on site. With the aim of providing users with the best possible support in their tasks, avoiding errors, frustration and unnecessary extra work, saving time and offering a positive overall experience. Because if work is also fun – all the better.

Which form fields are mandatory, which fields are optional? In the HybridForms App, open required fields are clearly visible at a glance: The form titles are always marked with an asterisk* and are also displayed in an accent color (blue). As soon as you have filled in a mandatory field, the form title turns dark gray.

How many mandatory fields are still open? How far have I got with the mandatory data entry? The status for the degree of completion in a form is always currently displayed and informs you about the progress of the required entries. As soon as you have filled in a mandatory field, the color of the form title changes from the accent color blue to dark gray (as already described above). At the same time, the status display automatically changes in two places:

• The status icon in the tab shows the current completion level for this form section [0%] [25%] [50%] [75%] [100%].
• The display in the menu bar counts the number of mandatory fields still open on a form page.

When all mandatory fields have been filled in, the check mark icon appears everywhere. Then you can finish entering the data.

Form titles are usually short and concise. Tooltips are therefore an important function for providing users with supplementary information and tips. Tooltips can be recognized by the question mark [?] in the form title or in a tab; clicking on the icon displays the corresponding info text. The tooltip function can be activated individually for each form field. Where and which tooltips are to be displayed is defined in the design process and in the course of form development.

In which format should the data be entered? Do the entries correspond to the specifications? For certain form fields (such as e-mail addresses, phone numbers, date fields), the HybridForms App immediately checks your entries for plausibility. This client-side validation provides an optimal user experience through direct error checking. For example, if you enter an invalid e-mail format, the form field is immediately highlighted in the signal color red and an error message is displayed with corresponding instructions. At the same time, a red exclamation mark [!] appears as a warning symbol both in the tab and in the menu. You can correct the form field immediately – functions such as error message, tooltip and/or placeholder text serve as important filling aids.

The calculation of numerical field values is another function of HybridForms that supports and relieves you considerably during documentation and data entry on site. The automatic calculation of prices, quantities, durations, ages, etc. for two or more fields saves time and also avoids unnecessary input errors (or calculation errors).

Form fields can be pre-filled with data from third-party systems and existing applications, such as the automatic transfer of operation IDs, file numbers and personal data. This means, for example, that forms and checklists for field staff can be optimally prepared in the back office, and unnecessary duplicate entries can be avoided later on the road.

Forms and checklists do not have to be – and actually should not always be – black and white. The targeted use of colors not only makes forms more visually appealing, but also clearer and easier to use. Be it to clearly mark open mandatory fields, to display error messages and warnings in an eye-catching way, to design interactive buttons, to highlight selected options more strongly or to confirm correct entries. The HybridForms App uses an integrated style guide from which the colors for field titles, field backgrounds, options for radio buttons and checkboxes, buttons, etc. are taken. Optionally, you can also adapt these definitions according to your company’s own corporate design specifications.

You can set the zoom and display for your forms directly in the HybridForms App (except on smartphones). In the standard view (default value), all forms and checklists are automatically adapted to the size and resolution of the display of the device used – smartphone, tablet, laptop, desktop PC – as well as to the orientation (portrait/landscape). The adaptive zoom is an enhanced version of the standard view. Form fields, font sizes and spacing are optimized even better here – for best mobile usability on different mobile devices as well as on Mac or PC. It is also possible to select a one-column or two-column display for all forms.