I’ve been spending a lot of time this year designing forms for mobile devices. Primarily because of my personal interest and partially because that’s what is coming through the door at the agency I work at.
I’ve tried a lot of different things, messed up a lot, broke some stuff and learned a lot along the way. I’m in the ecommerce space so form fields come up in every project, specifically during sign-in/register and checkout flows.
One of the biggest things I’ve learned is designing user-friendly forms for touch. I’m still surprised how badly many app makers and mobile web designers treat this area. It’s not the sexy feature so it’s not top priority. Someone on the team will just throw a form together and not think about it again. And user’s will miss-click and fumble their way through it.
So let’s explore designing form fields for touch with a simple login screen.
Designing Forms for Mobile Devices
Let’s start with talking about some basic concepts for mobile forms.
1. Simplify the form
When creating any form, you should start with making a list of the information you need. These will likely become fields or inputs. However, forms on mobile devices need to be only critical fields.
Simplify. Simplify. Take a break. Simplify some more.
If you’re starting from scratch and taking a mobile first approach, you’ll be defining the most critical fields and hopefully ONLY using those. Keep the extra or “optional” fields for desktop… or throw them away completely. Whichever.
If you’re redesigning an existing site or adding mobile, go through the current fields and challenge yourself (or the extended team) on all of them. Does it really need to be there? Probably not.
Traditional marketers in particular want everything. If you have one of those as a stakeholder, try to sell them on progressive profiling. That will help limit the amount of information gathered at any given interaction point.
2. Group related information
Generally a good practice in interface design. Doesn’t have to be a massive card sorting exercise or anything. Use logic and talk to a few users if it’s something beyond your knowledge (e.g., a survey designed for cancer researchers).
A more common example would be contact info (email, mailing address, phone number) and account info (login/user name and password).
3. Define your primary call to action
Another good practice in general, but on mobile in particular… keep that funnel focused. You don’t have to strip out all navigation or anything but try to stick to one primary action (e.g., “sign up” button). Don’t try to do too many things on one screen.
Designing Forms… with Fingers in Mind
With some basic concepts out of the way, let’s talk about pixel specifics.
Field size… or should I say touch target size?
We all know it’s all a lie. Size matters. Especially on mobile.
Those tiny little fields, links and button aren’t helping your users. I don’t care if it’s not aesthetically pleasing to your design sense. This is about function.
In my experience designing and testing form fields, bigger is better. Miss-clicking is an extremely frustrating experience especially when it leads the user to an alternate path (e.g., “create account” instead of “sign in”, or “cancel” vs. “submit”) or sets them back (e.g., clears fields).
Apple’s minimum 44 pixels is a good baseline for anything clickable (touchable?) on touch devices (e.g., buttons, icons, links, etc.). This doesn’t include margin for surrounding elements but you need to be cognizant of that. You don’t want users to miss-click because items are so close.
So the floor is established, but that being said… required fields on forms should be much taller than 44px in a modern UI. These are primary actions for a user. If anything, I lean towards the ridiculous and make fields much bigger than many of my peers.
As an example, here is a field from a login screen for an imaginary app:
In this example, the field height is 120px and there’s an internal padding of 44px. This is definitely on the big size but generally speaking this is my starting point for mobile fields. Naturally, they’ll fluctuate a bit based on the visual design style of the app (or web page).
There’s plenty of options for styling labels for fields. Many designers and developers are trending towards unique interactions for labels. There’s nothing wrong with that on the surface. I for one love Brad Frost’s floating label pattern.
However, always keep sight of the purpose behind labels… to identify the field for the user.
Now buttons… the primary call to action of a field. As I suggested earlier for fields, bigger is better.
The primary button shouldn’t be so small a user could even possibly miss it. Secondary buttons, such as a cancel button, can be smaller but they should still align with minimum recommendations.
The example below of the same app from before shows a primary button of 150px tall and a secondary of 100px.
There’s nothing special about the button height or width here. The point is they’re large and it’s very difficult for a user to make a mistake.
Simplify. If you get that principle, you’ll go along way towards success. Lean to the larger side of things when designing for touch. Lastly, we didn’t really touch on it too much but use visual treatments to enhance usability (and not to interfere with it).
Ultimately, you’ll need to challenge yourself to prioritize and simplify the experience when designing forms for mobile devices. There’s a lot to consider and your choices will vary based on specifics of the product, users and context of the form. Hopefully, this short article enables you to think through the impact of those decisions and thus evolves your own design process.