Do Your Users Rage Quit Out Of Your Forms? Let's Fix That - Stephy Hogan

On March 21 & 22, 2023 I attended Geekle’s UX/UI Design Summit 2023 webinar along with my coworker and Front End Developer Erin Flegg.

Here are some highlights from Stephy’s presentation. Thanks to all the presenters for sharing their knowledge and resources.

Stephy Hogan

Let's jump right in:

  • Form layout should always be 1 column, no exceptions.
  • Keep content to 7 ‘things’ per screen, max. If there are more than 7 things in your form, try using accordions, or ‘next screen’ flows (particularly good for mobile).
  • Try to encourage slight auto-scroll to introduce the next section of the form, to urge the user to advance to the next step of the form.
  • Slight animation to verify confirmation or error. This can be subtle yet satisfying for the user.
  • Avoid dropdowns! Try to only use dropdowns when there are more than 7-8 options.
  • Use checkboxes when the label is a statement (can be multiple selections).
  • Use radio buttons when label is a question (only 1 selection).
  • Tap (aka touch) target standard is a minimum 44px x 44px.
  • No floating labels (doesn’t play well with autofill options).
  • Try to avoid tooltips - all instructions should be visible.
Accordion (courtesy of hubspot.com)
Tap target should be 44px x 44px minimum (courtesy of accessguide.io)

Contact Acorn for ways to keep best UX practices top priority, ensuring user engagement and reducing bounce rates.

Recommended resource:

Smashing Magazine - forms and everything else!

Part five: