12

Why a form can be the worst UX example ever

over 7 years ago from , Design Specialist @ InVision, Mentor at OOOHours and DesignLab

I am convinced that the absolute worst case of UX fail is a form wherein, if you submit an invalid input, the form is wiped clean on a page refresh with a little red error above it, "invalid password." Well, thanks champ, I know, I hit the J key instead of the K, but now you want me to insert my email address all over again? Ok, I'll type it all in once more (why didn't I just click "save password information" the first time I logged into this damned site), but, oops, I thought my password started with a capital letter and it turns out it does not. Once again, the form refreshes. By this time I am so frustrated I might just close the window - not so good for retention, eh there buddy?

Who hasn't experienced something like this before? Why is this flow still rampent on the web when there are plugins like garlic.js to save form data in the user's local, or AJAX form validation that doesn't force a page refresh?

The latest culprit I encountered was the Asana internal interface - when trying to enter a new email address so that I can send updates from one project to a different account, I had to first enter my password. After three incorrect attempts I went searching for a "reset password" link and couldn't find one! That small annoyance leads to huge losses in the overall user experience, and probably their metrics as well.

9 comments

  • Guilherme CartaxoGuilherme Cartaxo, over 7 years ago

    One might even formulate a law:

    "The probability of a form being wiped clean following an invalid input submission is inversely proportional to its size"

    0 points
  • Arian BehzadiArian Behzadi, over 7 years ago

    Absolutely.

    Our HR Benefits portal has this awful login where you have to choose "type" of login (by employee id or social security no.), input that, then input a alphanumericcharacter password that I can never seem to remember.

    It has never taken me less than 3 tries to get in. Partly because sometimes I input the right password, but accidentally typed in social security and had employee ID selected.

    And once I'm in, well that UX is a whole different story.

    0 points
    • Kevin TwohyKevin Twohy, over 7 years ago

      On the very rare occasions where I'm forced against my will to interact with our HR portal, I'm convinced that it's some kind of UX reality/horror show and that Jared Spool is going to jump out any moment wearing a trucker hat and tell me I've been Punk'd.

      0 points
  • Sash CatanzariteSash Catanzarite, over 7 years ago

    Even worse is credit card forms that fail if the user enters spaces, i.e. "xxxx xxxx xxxx xxxx" rather than simply removing the spaces on submission. Related to the OP's point, because if that fails, the user then hast to retype the number, even if it was correct the first time. Bonus UX fail points if the whole form clears when the cc number fails.

    0 points
    • Emily Campbell, over 7 years ago

      I had the misfortune of having to book an unaccompanied minor plane ticket on Southwest. Instead of giving me the option of entering my daughter's information first, they had me fill out the full payment form THEN asked me if she was flying alone THEN had me fill out her info (a task in itself) THEN had me fill out my credit card info again. Certainly stress inducing and horrible UI.

      0 points
    • Marc EdwardsMarc Edwards, over 7 years ago

      YES. This can be even worse if the field is limited to the expected number of digits, so you paste in a number that has spaces or dashes and the field truncates the entire thing — damaging the number irreparably.

      The only choice (after realising that's what the stupid website does) is to paste the number somewhere else, edit, copy, then come back to the form and paste again.

      So horrible, and so easy to fix.

      My bank does this.

      0 points
  • Ryan LeFevreRyan LeFevre, over 7 years ago

    I think laziness and ignorance is the biggest cause of forms not being persisted.

    0 points
    • Kelly SuttonKelly Sutton, over 7 years ago

      This.

      Well, it also stems from developers getting ahead of themselves and not using a boring

      to wrap everything with an input. Modern browsers do a lot of the legwork to make sure inputs get persisted on error and than validations get performed. (e.g., If you don't wrap things in a , Chrome won't validate type="email" inputs.)

      I find myself going back to my JavaScript-less roots more and more when doing simple interactions. We try to build the same ideals into Designer News.

      0 points
  • Allan YuAllan Yu, over 7 years ago

    Amen

    0 points