We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Top Articles on Designing Forms for Mobile

Case study

As two new iPhones launched last week, I thought it might be pertinent to give an overview of a few great resources for making forms better for mobiles. Not that those buying iPhones today will be able to read this, as they will likely be queuing for the next couple of days.

Mobile usage is at an all time high and continuing to rise. What does that means for your online forms? Well, if the barrier to completing a form was high on your main site, it is likely to be even higher on a mobile device. Even a form designed to work well on a desktop will not necessarily work on mobile devices.

Some problems that mobile users can face (that most desktop users will not):

–          Bad lighting
–          Smaller screen
–          Slow / intermittent connection
–          Time constraints
–          Multitasking (for those second screeners out there)
–          A restricted keyboard

The Baymard institute also provides a list of usability issues that can arise even in the most comfortable of setting for a mobile user. So if you want to prevent the visitors to your website throwing their phone on the ground out of frustration, use these resources to guide you.

iPhone 6 showing the design of the Apple store checkout

Mobile Form Design Strategies – UX Booth

The article rightly states that users of mobile forms are often under a more challenging set of conditions that those filling out a form on a desktop, and as a result, your form should be as efficient as possible. It then outlines some easy ways for you to approach mobile form design.

Top tip from this article – For mobile devices, you should top align form field labels, so there appear above the field, rather than to the left or right. On mobile forms, users often zoom in to read labels more clearly. If you labels are left aligned, the labels can be cut off when the users in interacting with the field, as in the example below:

Times online mobile

Instead, move the labels above the fields:

Top aligned mobile labels

Improving mobile site form usability with HTML5

This article outlines a number of ways you can improve your mobile forms using HTML5, and gives you example codes to help you get there.

Top tip from this article– change the input types of your form fields, so that users see a different keyboard when they enter the field, and one that is tailored to allow them to enter correct information easily. Setting the input as email for instance will display a keyboard that includes the @ symbol for many mobile devices.

Improving the usability of email subscribe forms on mobile devices

How can you make your email subscribe forms more mobile friendly? This article outlines a couple of easy to implement tips on how to make it as easy as possible for your readers to sign up to receive regular updates.

Top tip from this article – test light boxes on mobile devices, if you have to use them at all.

Web and mobile friendly forms design – CX Partners

This bumper slide deck gives you tonnes of tips for making mobile forms better.

Top tip from this article – your mobile form does not have to be drastically different to the one on your main site, but small changes such as labels alignment and removal of distractions can make a huge difference.

Designing A Better Mobile Checkout Process – Smashing Magazine

A great resource for any ecommerce business trying to improve their checkout process.

Top tip from this article – Allow checkout as a guest. Many e-commerce businesses insist on registration, but many users are turned off by being required to do this. One major retailer reportedly saw a $300 million leap in sales by removing the “Register” button!

How to make your contact forms mobile friendly

A great practical guide (with example of HTML and CSS to help you) on how to improve the area of your website where potential customer often go first.

Top tip from this article – add a tap-to-call telephone links, so that users can easily reach out to you, rather than use difficult copy and paste features to ring your number.

Mobile Form Usability: Avoid Splitting Single Input Entities – Baymard Institute

The Baymard Institute conducting a usability study aimed at how users found interacted with a single input split over several fields.

Split phone field

Top tip from this article – combining different fields for the same input can be a great way to improve the usability of your mobile forms. Examples where this is sometimes done on desktop forms are separating First Name and Last Name (combine them for mobile) and separating phone numbers and credit card details.

One more tip: Avoid captchas

Capthcas are always a painful and frustrating experience, but on a mobile they can reach a new low in terms of usability. Many phones have autocorrect features that lead to websites dedicated to the hilarious consequences of autocorrect, but also to Captcha’s being an absolute nightmare to fill in. Even if the autocorrect feature is disabled for the Captcha field, switching between the alpha and numeric keyboard a number of times takes far more effort from the user than it would on a desktop.

Designing Captchas on mobile

For the above captcha for instance, I enter the first letter, then have to press the button to switch to the number keyboard, enter the number, then switch back again to the alpha keyboard, enter the letter, switch again to the number keyboard, enter the number and switch back again to the letter keyboard. Not ideal, and can be made even worse when capital letters are included.

So that wraps up our selection of the top guides out there? Have we missed any great resources? Let us know in the comments…