Improve address validation UI

Created on 5 May 2021, almost 4 years ago
Updated 5 April 2025, 8 days ago

Problem/Motivation

The current UI used for address validation is dense and hard to quickly parse

Proposed resolution

Improve the wording and layout of the address validation modal to make it clear what is required of the user.

User interface changes

  • Remove the Enter again button. This button is unnecessary as the user can dismiss the modal. It forces them to reason about which button is appropriate instead of choosing between two clear actions.
  • Remove the restriction on pressing the escape key to dismiss the modal (why was this defined in the first place?)
  • Cleanup the wording of the instructions to make them less conversational and more concise.
  • Format the address in an easier to compare format instead of a single potentially wrapped line
  • Style the recommended button to make the desired action easy to find

✨ Feature request
Status

Active

Version

1.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States rhovland Oregon

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States rszrama

    Attaching a reroll of your patch with no changes, as the underlying code had changed a bit. That said, I'm still not sure it's a great UX. The modal can be closed with escape, but there's no X a user could click, nor does clicking outside the modal dismiss it. There's a bug in the behavior, too, in that you cannot then resubmit the form if you dismiss the modal, because the JS disables direct form submission.

    This is the patched appearance:

    I don't mind just improving what we have, but I'm also open to rethinking the UX based on what I've seen elsewhere. This from Miva is really interesting, for example:

    You can easily dismiss theirs, and the side by side comparison / selection of the address is nice. Their button is weird, though, in that using what you entered shouldn't be construed as an update ... I'd likely just generalize that to a "Continue" button. That said, I'm not sure how much we'd have to rework to make the method based on a radio button selection, so my approach to start will be to just make the modal work with dismissal and checkout form resubmission.

  • πŸ‡ΊπŸ‡ΈUnited States rhovland Oregon

    Yeah the patch I wrote was a rough idea that needed more work. I did not have the skill to do much more than what's in it.

Production build 0.71.5 2024