Designing forms for mobile

This post was first published in 2008 on ‘Forms that Work’ – the companion website for Caroline’s book with Gerry Gaffney Forms that Work: designing web forms for usability. It was updated in 2011.

Design for mobile first

Nokia X6 phone
photo of Nokia X6 : John Karatatsanis, creative commons licence

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

 

#forms #formsthatwork