Forms that work: Designing web forms for usability

Design of mobile forms

Design for mobile first

For a long time, we said 'just say NO' to forms on mobiles. In the days of WAP, they were too awful to contemplate.

Now - we agree with Luke Wroblewski. Design for mobile first. It's much easier to make a successful mobile design work as a web form than the other way around.

Find out how to think about mobile forms

Good place to start? Try Chui Chui Tan:

For a shorter summary on designing for mobile in general, including some tips for designing forms, try Shanshan Ma's Designing for the Mobile Web: Special Considerations

For a rant about how bad it can be when it all goes wrong, read about Craig Villamor's experience when trying to sign up for OneNote on his mobile: Microsoft OneNote for iPhone: Your Org Chart is Showing

Specific points for mobile design

Text entry is difficult

Whichever type of phone you use, entering text on a mobile device isn't easy. A recent study by Blink looked at typing on four types of mobile devices, and found no real advantage for any of them. Users get familiar with their current device, and prefer its method. Summary of the study: What do Users Think of Mobile Text Entry Methods? 

Put labels above the fields

The Baymard Institute points out one way you can help users: put the labels above the fields. Then they can see the label as they type on the narrow mobile window.

Ideally, do a responsive design so that if the user switches the screen to landscape, the labels switch themselves to the left of the fields.

More details of their advice: Mobile Form Usability: Place Labels Above the Field

 

Site

Changes
Index
Search
Templates

User

Log In

 
 

Last Modified 2014-04-23