Skip to content

Instantly share code, notes, and snippets.

@jackawatts
Last active July 17, 2018 22:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jackawatts/5c629fe2c54ae51b3319b17668ac011a to your computer and use it in GitHub Desktop.
Save jackawatts/5c629fe2c54ae51b3319b17668ac011a to your computer and use it in GitHub Desktop.
  1. Only show important fields so that people don't have to spend more time filling out the form than they need to
  2. Top align fields so that the form is suitable for a mobile view
  3. Design for fat fingers so people aren't penalized for using a smaller device
  4. Collapse menus and dropdowns so that the form isn't harder to navigate through
  5. Use predictive text so that the user has to type less
  6. Use single inputs where possible so that they user has less fields to fill out
  7. Make submit buttons standout, have meaningful names & possibly 1/3 so it is clear what the user must do and they know how close they are to completing the section
  8. Add html <meta name="viewport" content="width=device-width,initial-scale=1"> so the user doesn't accidently zoom the form in such a way that it becomes difficult to read/restore
  9. When opening linkes from a form, notify the user and open them in a new tab so users do not lose their progress
  10. Track progress (eg. Page 1/3 or 75%) so that the user knows how much further they need to go to complete the form
  11. Load the form quickly <3s (reduce superfluous assets and ensure images emphasize your point) so the user doesn't get impatient https://mobile1st.com/patience-impatience-curse-load-time-mobile-web-ux/
  12. Consider using the device's native controls so that the form is accessibility and consistent with the device
  13. Remove the 300ms delay from form inputs for mobile devices (assuming double taps aren't necessary) so that the form feels more responsive (this often happens automatically when the viewport element has been added to the header)
  14. Use legible font sizes so that people can read the site: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment