4

autofill dropdown ruining UX

FYI the image above was taken with autocomplete="new-password"

As you can see, the dropdown is covering the error message (which ends in "letters and numbers" (plus a few other error messages).

This error message is IMPORTANT, and the user MUST see it, so how do I hide the dropdown? The dropdown is preventing the user from seeing the message. You could say that "The dropdown is bad UX" in this particular circumstance

You could say to move the message below the field, but then we have the exact same problem, just from the other direction.

As far as I can tell, our solutions are:

  1. disable dropdown
  2. move message to a place where the dropdown won't cover it (like a popup or to the side)
  3. Move the message so it is always displayed on the opposite side to the dropdown

Option 1 doesn't work because we used to be able to disable the dropdown by setting autocomplete to "new-password" or "off" or "false" or whatever, but none of these things seem to disable the dropdown anymore.

Option 2 doesn't really work because I want the message to be near the field to give the error message some context. I don't really want a popup with the error message "You password is too short" because that seems like bad UX also. I guess I could move the error messages to the side of the password input, but that wouldn't work on small devices that don't have the screen width.

Option 3 also doesn't seem very good because the error message is moving around based on the scroll position of the window, and moving text based on some arbitrary scroll line also seems like bad UX.

So yeah, I'm out of options, unless anybody can think of any?

Is this a browser problem? Or is there one simple trick I can use to get the good UX I desire?

Improve this question
1
  • As @DaveNelson mentioned below, I also would place the error message above the input field so to not lose its visibility.
    – Adriano
    Nov 22, 2019 at 4:09

1 Answer 1

Reset to default
3

My recommendation for the last couple of years has been to layout forms

  • Label
  • Description/Note
  • Error Messaging
  • Field

Issues like the one you are describing is a good reason for following this layout, but so is the small screen use case where they visitor may not have scrolled down far enough to see the error message or note.

Improve this answer
1
  • P.S. We are also running into the issue where browser based drop-downs to pre-fill addresses, phone numbers, and other saved information are interfering with our type-ahead and autocomplete drop-downs. At some point I hope there is an easy way to address this so that the browser's features and the features we create can be displayed in a useful way without loosing the functionality of either.
    – Dave Nelson
    Nov 25, 2019 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.