Scroll to top

Mobile Form Design Tips: 2018 Edition

Mobile devices and innovative applications have the power to bring the future within users’ grasps. When it comes to providing input, however, many users face annoyances which disrupt their experiences. This is why many mobile forms tend to fail and paper forms prevail.

This doesn’t mean that designing highly effective mobile forms is an impossible feat though.

What you need to do is learn and implement the best practices for designing mobile forms. Here are some more tips from TransformTek’s experts to help you create user-friendly forms.

#1 Don’t Go Overboard While Asking for Information

Possibly one of the common mistakes mobile form designers make is getting carried away with adding fields. Unlike paper forms, mobile forms should aim at reducing the number of fields while adding more overall value. For instance, rather than adding a large text field for form users to input details, you can have them upload images instead. To allow more input, provide drop down menus or autofill fields for standard data.

Other tips to consider are:

  • Decide which information you really need to collect and which can be automatically retrieved. For instance, the name of the person submitting a report can be automatically added if they log into their mobile forms app.
  • Consider breaking up long forms. A multi-tabbed form can do wonders, especially for preventing information overload.
  • Some fields may not be required in a form. So, leave them as optional fields if you don’t wish to remove them altogether.

#2 Become Familiar with the Psychology of Colors

The colors you use in labels, fonts, and other elements of your forms matter. Colors evoke a range of feelings in people, driving them either to use your forms or delete them off their devices. To prevent the latter, keep in mind the following colors and the feelings associated with them.

  • Black – Black has several emotions attached to it, including menace, power, unhappiness, and sophistication. That’s why many form designers use it sparingly. However, as it’s a very strong color, it’s commonly used for text and accents.
  • White – Like black, white evokes a range of emotions, from purity to sterility. Therefore, avoid overwhelming form users with it. In addition to using color to reduce its intensity, you can use shades such as ivory instead of white.
  • Red – Red evokes strong feelings, ranging from warmth to excitement and intensity. That’s why it’s used for warnings or highlighting elements like text or buttons.
  • Orange – Like red, orange is a stimulating color, but to a lesser degree. The color evokes confidence, energy, and optimism.
  • Yellow – While representing happiness as well as anxiety, yellow is mainly used for warning signs. It can be combined with black to attract attention.
  • Green – As green is associated with plants, it signifies growth and health. Choosing saturated green colors grabs attention, which is why it’s used for call to action buttons.
  • Blue – A very versatile color, blue can represent a range of feelings, thoughts, and emotions. Lighter shades are especially used to evoke feelings of calmness and trust.

#3 Carefully Consider the Typography Used in Your Mobile Forms

You need to be selective of the fonts you use in your mobile forms. Ideally, a font should be legible yet compact enough to make better use of mobile devices’ limited screen sizes. Here are some effective tips to ensure your form’s typography is consistent and easily readable

  • Use Bold, Emphatic Headings – Break down your form into sections using bold titles aligned to the left. A majority of iOS apps follow this method for presenting typography. Moreover, it adds personality to your form.
  • Establish a Clear Hierarchy of Title and Subheadings – Users should be able to differentiate between titles and subheadings. For that, use different shades of the same color, font size, and/or font weight.
  • Don’t Be Scared to Prototype – When designing forms for mobile, you should be ready to test them often. Download them onto real mobile devices to ensure the text’s readability and similar aspects.

#4 Choose Images Wisely While Adding Them to Your Forms

Most mobile form designers including Makeen transform Platform will allow you to add images to your forms. However, you need to be careful while using this feature as bandwidth constraints may delay images’ loading time and affect their quality. This is especially true for users working on-site where internet access may be intermittent.

If you absolutely must use images, here are some tips to keep in mind.

  • Keep images relevant. Select those which have a strong relationship to your forms’ content and its goals.
  • Make sure the images are engaging and exciting. This will make your forms feel unique and prevent them from being deleted by users.
  • Avoid using too many images across your mobile forms as that can lead to a visual overkill.
  • Choose smaller high resolution images which work across the devices used in your enterprise.

#5 Foolproof Mobile Forms with Form Assistance

First off, you should never have to explain to users how to fill out your forms. This defeats the purpose of mobile forms, which means that you need to redesign them. That said, form assistance actions aim to ensure users provide necessary and properly formatted information. Here are some tips to help you with this tricky aspect.

  • Add explanatory text next to input fields only where really needed. Do not exceed 100 words, but aim for less than 75 words.
  • Keep the language of your text clear to avoid confusing users further.
  • Use placeholder text to define the format of the data you collect. For instance, in the State field, you can type “e.g. WA, NSW, or QLD” to instruct users to type abbreviations rather than full forms.

To improve your mobile form design skills, seek inspiration from everything around you. Even shows such as Game of Thrones.

You can also check out Ready2Use Forms. The mobile forms app offers a collection of ready-to-use templates for Safety, Project Management, Business Development, and Human Resource. Just download Makeen transform App and enter the app code “ready2use”.

If you still need more help, send us your paper form and our team will mobilize it for you. Our team will then walk you through designing your own forms through Transform Studio.

Have fun designing your next mobile form.

Author avatar

Post a comment

Your email address will not be published. Required fields are marked *