8 Responsive Form Best Practices for Retail Banks


We live in a multi-channel world, where financial customers can move between devices during the course of a single transaction, such as a loan application or insurance claim. “Mobile First” design, once promoted as the new standard of a mobile world, no longer works in a multi-device, multi-channel world. Implementing responsive form best practices is a better approach for multi-device support as it allows a web page to dynamically respond to different screen sizes while still offering an optimal user experience.

The responsive approach is well understood for web pages. Digital forms, however, are closer to complete applications than simple web pages. To develop responsive forms for “Apply Now”-type transactions, there are several user interface best practices that need to be carefully analyzed and designed. This post highlights the top eight responsive form best practices to implement.

Best Practice #1: Digital Form Layout

Digital forms turn out to be quite a bit more complicated than simple text or image-based web pages, especially when it comes to the layout.

  • Always decide on one or more breakpoints in your forms, oriented around some of the standard screen widths of common devices. Determine how your forms should look within each of these breakpoints.
  • Ensure that your form has a maximum width, which will make it easier to use on larger devices. (This practice is easily forgotten, since we often spend most of our time designing for smaller devices.)

Best Practice #2: Form Fields

Fields have multiple sub-parts (such as a caption, data entry area, and action areas) which make them more complicated than simple text.

  • To accommodate narrower devices, fields should generally be self-contained, with the caption above (rather than below or beside) the data entry.

Best Practice #3: Field Interactions

Fields require users to interact with them, and the types of interactions that we are familiar with on large-screen mouse-oriented devices do not necessarily translate to small-screen touch-oriented devices.

  • Create field interactions that are familiar enough for desktop users so they intuitively know what the field is and how to use.
  • Create fields that are usable on both touch and mouse-oriented In particular, the “target” area for controlling the field needs to be large enough for larger fingers.

Best Practice #4: Images

When a digital form includes images, the design needs to accommodate the size of the screen. Mobile devices often have less bandwidth than larger devices, and the cost of downloading large images will make the form’s load time unacceptably slow.

  • Provide designers with a mechanism for using an alternate smaller dimensioned version of an image on mobile devices.
  • In order to reduce download times, try to provide an image with a smaller file size, rather than simply scaling down a large file to smaller dimensions.

Best Practice #5: Menu Placement and Behavior

Don’t embed your form inside your existing website. Instead implement it as a pop-up in a new window or tab. This makes the best use of available real estate on smaller screens, avoids accidental navigation away from the form, and reduces potential unwanted interactions between the website and the form.

  • Use menus for both navigation (by allowing your users to tap/click them) as well as completion.
  • If possible, convert a static menu on large device to a pop-up icon-based menu on smaller devices.

Best Practice #6: Error Display and Navigation

A different type of thinking is required when displaying errors and navigating to them on smaller devices. On a small device, the screen may be limited to only showing a small number of fields at one time, and the user can easily become contextually lost when errors occur.

  • Consider displaying errors immediately when they occur, rather than waiting until form submission time. This allows users to correct errors while they still have context.
  • Auto-navigate the user to a field that has an error rather than forcing them to locate it manually.

Best Practice #7: Tables

Many forms designed for larger screens use tables, but they don’t translate well to narrower screens. The simplest approach is not to use tables at all but rather to repeat the information.

  • If using simple repeats, try to ensure that you give the user a sense of context. For example, use a bounding box to group a set of fields together forming the “row.”
  • Another approach is displaying only a summary of each row on the main form, with a drill-down button that displays all the fields for that row in a drill-down or pop-up.

Best Practice #8: Ease of Use When Designing Digital Forms

Responsive design is usually implemented by a programmer who is intimately aware of JavaScript and CSS. However, it’s also possible for non-programmers to easily build electronic forms that support good responsive design without this detailed knowledge.

  • Rather than hand-coding web forms, use a form design tool that has responsive best practices built.
  • Where possible, the tool should have appropriate defaults, so responsive behavior occurs without any special effort by the form.
  • The tool should also allow the form designer to adjust the default values to customize the digital form.

Next Steps: Get More Responsive Form Best Practices

Consumers expect to be able to move from device to device as they transact with a company, which means the need to design web pages and responsive forms will only increase. Learn more about designing responsive forms by downloading the full white paper: RESPONSIVE FORMS: 8 Best Practices in Responsive Design Principles for Forms.

 

Don Bergal
Don Bergal

Don is CMO, building and leading worldwide marketing at Avoka. He has a successful 25 year record of growing technology businesses in marketing, operations, and sales management, particularly with early stage and high growth companies.

Leave a Reply