Form Design in Mobile
•
1 like•556 views
This document discusses mobile form design. It covers sign in forms, registration forms, and checkout forms. For sign in forms, it recommends using common practices to allow users to log in easily and quickly, and including a way to retrieve forgotten passwords. For registration forms, it suggests minimizing inputs and removing unnecessary fields like confirm email and password. For checkout forms, it emphasizes leveraging mobile UI elements and considering factors like field necessity, labeling, visibility, and typing support.
Report
Share
More Related Content
Similar to Form Design in Mobile
Similar to Form Design in Mobile (20)
Recently uploaded
Recently uploaded (20)
Form Design in Mobile
- 1. Mobile UX Usable Forms Good and Bad designs May 6, 2016
- 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.
- 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.
- 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