Wp-calypso: Domains: Domain pending transfer shows similar warning messages with different colors

[sixhours]

These are basically the same message, but one uses pink and one uses yellow. I feel like they should both use yellow.

That said, I also wonder why we need two separate messages that say the same thing; removing the smaller one reduces visual clutter on the page, since the larger one at the top is unable to be dismissed and is more in line with our pattern for messages.

To find this screen:

1. Go to Manage -> Domains.
2. Add a domain and select Use an existing domain
3. Select Transfer a domain to WordPress.com
4. Start the domain transfer process (unlock domain, get auth code from existing registrar)
5. Checkout, if necessary.
6. Go back to Manage -> Domains and click on the domain you've transferred. You'll see this screen with the transfer notices.

[klimeryk]

Hi, @sixhours! Thanks for noticing this discrepancy. While I agree the notice levels don't match, I think the root issue here is different - the big notice (and/or the smaller one) are (ab)used to show important information to the user.
The top one is marked as info, because it's part of the process. It could be changed to warning after some delay (like a day or two), to draw the attention of the user to it (that an action is needed).
The smaller one is a warning, since a domain transfer in general is a major action on the domain and one that carries a lot of risk.

Ultimately, I'd say the issue here is that a notice is not the best way to display a next step in a process and instead something like a Checklist could be used instead: https://wpcalypso.wordpress.com/devdocs/design/checklist
It would better explain the overall process and in what's the immediate next steps.

[danhauk]

The smaller one is a warning, since a domain transfer in general is a major action on the domain and one that carries a lot of risk.

I understand domain transfer is a major action on a domain with a lot of risk, but what is this warning providing that the big warning/notice above isn't doing? There doesn't appear to be any action the user can take from this screen.

Is there any harm that could come from removing this small warning in favor of only showing the larger one?

[sixhours]

I think the root issue here is different - the big notice (and/or the smaller one) are (ab)used to show important information to the user.

Completely agree.

The top one is marked as info, because it's part of the process. It could be changed to warning after some delay (like a day or two), to draw the attention of the user to it (that an action is needed). The smaller one is a warning, since a domain transfer in general is a major action on the domain and one that carries a lot of risk.

Combining these could work as an interim solution, since building out a checklist seems unlikely at this point. (Fixing the Flows is looking at a lot of the larger issues, notice abuse being one of them, but that's a slower process.)

With a single, larger warning at the top of the page, the user gets more information and even direction as to what action(s) they can take. Using is-warning could help draw attention and indicate the importance/riskiness of the transfer process. (I opened a similar issue for removing the smaller notice in #36481 because the info/status messages are duplicated on that screen, too.) What do you think?

[lcollette]

I hear what you're saying, @klimeryk. I appreciate your looking to the root of the issue! We're going to be tackling those bigger sorts of issues in the near future. As part of that, can you confirm the purposes of the notices as they stand today?

Large banner: Inform the customer of where they are in the transfer process and tell them what to do next, if needed.
Smaller banner: Provide a status update.

With a single, larger warning at the top of the page, the user gets more information and even direction as to what action(s) they can take. Using is-warning could help draw attention and indicate the importance/riskiness of the transfer process.

In the interim, however, given the wonkiness of multiple instances of these double notices, I agree with @sixhours' proposal.

[klimeryk]

Large banner: Inform the customer of where they are in the transfer process and tell them what to do next, if needed.
Smaller banner: Provide a status update.

Correct 👍

In the interim, however, given the wonkiness of multiple instances of these double notices, I agree with @sixhours' proposal.

Cool, go for it 👌

With a single, larger warning at the top of the page, the user gets more information and even direction as to what action(s) they can take. Using is-warning could help draw attention and indicate the importance/riskiness of the transfer process. (I opened a similar issue for removing the smaller notice in #36481 because the info/status messages are duplicated on that screen, too.) What do you think?

Yup, I see your point now. Removing the small notice in this view makes sense - we're in the context of the domain, it should be clear that the notice is about it. But on the other view, where there's a list of domains, it's harder to figure out which domain the big notice is referring to if it's on the top and there's no warning notice on the affected domain. Anyway, I'll comment there :)