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.

  • 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 '15 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 '15 at 15:29
  • Understood - to be honest I think your original question is not very clear about what you want. – Midas Dec 17 '15 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 '15 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 '16 at 16:31
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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