23 Opinionated Big Little Details

Things that make a little big difference to user experience when building web applications.

  1. When a user gets their password wrong, and are using email to sign in, send an email with either a one time login URL, or a link to your forgot password flow.
  2. If you ask for verification codes and the length is fixed, auto submit the form when the last one is entered. e.g. See Stripe SMS codes component
  3. If you perform a password reset, and the user has verified their password twice - allow them to login from this screen, rather than redirecting to the login to ask them to fill details in again.
  4. Show a caps lock warning on password fields
  5. During signup, if you ask for an email first, perform a gravatar lookup to showcase their avatar and potentially fill in firstname / lastname. Other APIs are also applicable here to lower friction to signup.
  6. Auto-focus the first input field on forms.
  7. Display password rules before users receive validation errors, preferably with a live strength indicator.
  8. On long forms, preserve entered form data even if the session expires.
  9. Allow users to toggle visibility of entered passwords and sensitive fields.
  10. After errors, return focus to the first invalid field, and on mobile, auto scroll to it.
  11. Trim accidental whitespace from email inputs.
  12. Use appropriate keyboard types on mobile for specific fields (email, numeric code).
  13. Allow swipe to close menus on mobile, using touch down events etc. rather than just tapping hamburgers.
  14. Handle slow networks gracefully, and provide online / offline indication. Retry on failed requests.
  15. If you email a user, ensure they know which inbox to check, many people have multiple inboxes.
  16. Preserve filters and sorts. Users spend time configuring views. Respect them on next visit.
  17. If you ask for country of birth. Use the users current browser settings to either appropriately find the most likely country, or at least start the dropdown close to it.
  18. Long dropdowns, for the love of all things holy. Make them searchable
  19. Provide feedback with 100-300ms.
  20. Use verbs on buttons. If I see another button with 'Submit' on it, I might scream.
  21. Empty states should be educational. No reports? Create one now.
  22. Modals are a design smell. Too many modals feel claustrophobic and interrupt flow.
  23. Undo is often better than 'Are you sure?'