form design in mobile

Mobile UX Usable Forms

Good and Bad designs May 6, 2016

Why mobile forms?

Agenda

•  Mobile Form Design

1.   Sign In Forms 2.  Registration Forms 3.  Checkout

Sign In Forms

Don’t innovate on the sign in forms. Use common practices to allow the user to get in Easily and faster. Provide a way to retrieve a forgotten password.

Sign In Forms

Sign In Forms

Top Aligned Labels means less eye stops.

Agenda


1.  Sign In Forms 2.   Registration Forms 3.  Checkout

Registration/Sign Up Forms

Registrations should have minimal inputs. Edit ruthlessly. Remove Confirm email and Confirm Password fields. Horizontal fields could end up truncated. Avoid them.

Registration/Sign Up Forms

Agenda


1.  Sign In Forms 2.  Registration Forms 3.   Checkout

Checkout Forms

Checkout Forms

Leverage mobile UI elements.

Checklist

Necessity

•  Is this field absolutely necessary?

Description

•  Is the label above the field?

•  Is the field marked required(*) or optional?

Visibility

•  Is the field big enough so that most possible field values are visible?

•  Is the field visible in both orientations when the keyboard is displayed?

•  Do you have any good defaults for this field?

https://www.nngroup.com/articles/mobile-input-checklist/

Checklist

Filling it in for the user

•  Can you use the phone features (camera, touch ID, GPS, voice, contacts ) to populate it?

•  Can you compute it for the user based on other info (e.g., state based on zip code, coupon field)?

Typing

•  Do you support copy & paste into the field?

•  What is the right keyboard for this field?

•  Can you make suggestions/autocomplete based on the first letters typed? •  Do not autocorrect for names, addresses and email addresses.


Checklist

•  Do you allow typos or abbreviations?

•  Do you allow users to enter it in whatever format they like? (e.g., phone numbers credit cards) •  You can autoformat it for them.


References

•  “Mobile Design Pattern Gallery” by Theresa Neil

•  Mobile Design Checklist by Nielsen Norman group