View
266
Download
0
Category
Preview:
Citation preview
Mobile UX Usable Forms
Good and Bad designs May 6, 2016
Why mobile forms?
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
• Mobile Form Design
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
• Mobile Form Design
1. Sign In Forms 2. Registration Forms 3. Checkout
Checkout Forms
Checkout Forms
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.
https://www.nngroup.com/articles/mobile-input-checklist/
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.
https://www.nngroup.com/articles/mobile-input-checklist/
References
• “Mobile Design Pattern Gallery” by Theresa Neil
• Mobile Design Checklist by Nielsen Norman group
Recommended