Good and Bad forms in Mobile.

1. Mobile UX
Usable Forms
Good and Bad designs
May 6, 2016

2. Why mobile forms?

3. Why mobile forms?

4. Agenda
• Mobile Form Design
1. Sign In Forms
2. Registration Forms
3. Checkout

5. 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.

6. Sign In Forms

7. Sign In Forms
Top Aligned Labels means less eye stops.

8. Agenda
• Mobile Form Design
1. Sign In Forms
2. Registration Forms
3. Checkout

9. 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.

10. Registration/Sign Up Forms

11. Agenda
• Mobile Form Design
1. Sign In Forms
2. Registration Forms
3. Checkout

13. Checkout Forms

14. Checkout Forms

15. Checkout Forms

16. Checkout Forms
Leverage mobile UI elements.

17. 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/

18. 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/

19. 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/

20. References
• “Mobile Design Pattern Gallery” by Theresa Neil
• Mobile Design Checklist by Nielsen Norman group