« | Blog Home | »

Mobile UX : Resources for Forms

I have gotten some requests from a few web designers and developers on what are the best approaches for mobile forms.
My short & sweet answer is to keep it simple and make it flexible. Make sure your forms work with according to web standards best practices: clean code, strip out the extraneous that does not work towards the form’s task or goal, and use progressive enhancement when coding the javascript if you use it at all. Resize the screen, are inputs too long or hidden? Test your form: if you turn off your javascript & CSS will the form inputs work? If so, then your forms will work on almost any device out there.
But you argue, “Jen, I am designing for smart phones with good webkit/gecko browsers, so I don’t need to worry.”
Yes, you do, as you can’t guarantee on the mobile web what phone, be it smart or feature phone, what browser, and what screen size will come to visit your mobile or web site and may want to fill out a contact form or purchase something.
Here are some resources to get you started:
Luke W, the king of forms, on mobile forms:
Web Form Innovations on Mobile Devices
Better Mobile Form Design
Forms On Mobile Devices: Modern Solutions
Linda Bustos at Get Elastic on Mobile Commerce Usability: Forms and Checkout
Chris Mills in ThinkVitamin on Coding for the mobile web
WestCiv’s Complete CSS Guide, The Mobile Profile
PPK’s Mobile with links to his CSS & Javascript mobile tests
If you like the Details & Standards and a different point of view from Luke W, don’t miss:
Luca Passini’s Global Authoring Practices for the Mobile Web, under point 3.2 Usability Luca argues that one should Beware of HTML style forms and has a different approach to Managing User Input.
Finally, the W3C recommendation on Mobile User Input