7

This UI design pattern keeps coming up and I'm wondering whether there are any best practices out there that can improve the quality of my solution.

The pattern is: type your email (or password), re-type to confirm in another field. Now I know that some consider this an anti-pattern, but that's not what's up for debate right now, as I'm locked into customer requirements.

This is mobile design, so we have to consider convenience affordances like a "Next" button on the soft keyboard when in field 1 but just a "done" button when in field 2.

We also want error messages to come up when the two fields don't match BUT perhaps not on first run, when the second field is empty because you just haven't gotten to it. An automatic error message that you can't avoid is just annoying.

But we also have the (edge) case where the user has already filled both fields and for some (obscure) reason has cleared one of the fields. So checking for empty fields is not a guarantee that you're capturing the intent.

And then we must consider the user coming back after successfully filling in the fields, and re-editing them later (like on an edit profile page). In that case the fields start out filled out.

There are many successful implementations of these requirements in the wild, and if nothing is forthcoming from this SE question, I'll be performing an audit of the best practices and find a way to abstract and document them.

Before I go ahead and do that exhaustive work, I'd love to see whether there are any documented decision trees, flow diagrams or even pseudo-code out there already, so I don't duplicate effort.

Improve this question
5
  • I don't understand how this scenario is different to any standard sign up form. Could you share an example of a form (for example Facebook en-gb.facebook.com/r.php?next&locale=en_GB&display=page) that doesn't comply with your requirements and explain why?
    – Midas
    Dec 9, 2015 at 8:44
  • @Jake I'm not suggesting my requirements aren't aligned with best-practice forms; on the contrary, in fact. My question was to see whether there were any diagrams out there that illustrated all of that logic. It's more complex than it appears at first blush.
    – Tom Auger
    Dec 17, 2015 at 15:29
  • Understood - to be honest I think your original question is not very clear about what you want.
    – Midas
    Dec 17, 2015 at 15:57
  • @Jake I've updated my question based on your feedback. Hopefully my motivations are a little more clear?
    – Tom Auger
    Dec 17, 2015 at 20:23
  • A quick search confirmed for me that there isn't a good, free diagram of this workflow available online anywhere! Maybe you're the one to make it?
    – skybondsor
    Mar 25, 2016 at 16:31

1 Answer 1

Reset to default
1

Initial state of form: two blank fields (password and confirm password; strength indicator = weak (or invisible); submit button disabled.

Has the user filled in the password field?

  • YES → check password strength, show indicator
  • NO → no action

Has the user filled in the confirm password field

  • YES → check it is the same as the password field (on blur event)
  • NO → no action

Is the password strong enough?

  • YES → enable submit button

  • NO → show feedback text

NB - check security websites (e.g. OWASP) for best practice around security considerations for password guidelines, password strength indicators, and user feedback on incorrect password / username comnbinations

Improve this answer

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.