Improve the order workflow UI

Implementing your proposed changes as MR!

As I don't have that much experience with Drupal Commerce yet and the project is a bit larger, could you point me to the location in the code where this workflow is being handled?

@LRWebks sure!

In the UI you can find this here:
/admin/commerce/orders/1
(you need to create an order for that)

The code lives in the commerce_order submodule.

This part is implemented in the twig template:
https://git.drupalcode.org/project/commerce/-/blob/8.x-2.x/modules/order...

I think this looks better now! Implemented your suggested changes. Lines 40-42 might look like a bit of a bodge, however there was no attribute to also use within the for-loop and for some reason order['state'] gave me the two buttons... Not sure what that's about. To review!

@LRWebks thanks! As this is a visual task, please always post a screenshot of the relevant part / changes, once finished :)
That makes reviews faster, because reviewers don't have to set up the whole environment to see the change in the first step.

Thanks!

I'm not totally fine with all the ideas for this label
The label should explain, that the buttons show possible next workflow steps to take...

Any ideas for a short and self-explaining title?

• Proceed to next workflow state:
• Next step:
• Possible actions:
• Proceed with the order:
• Possible workflow actions:
• Change workflow state to:
• ...?

Fixed that quickly! This is how it looks now:

However, the <h4> appears to be bigger than the previous heading... Looks a bit bad to me.

Thank you @LRWebks! Clear UX improvement, that's more self-explaining now for the context.

Next question is which label to choose (#8).
h4 is fine here semantically, I think, while the admin seem doesn't seem to care for the smaller size, but that's not the key point here.

I think the title that would explain it most naturally to me would be "Proceed with the order:", wdyt?

Do we have a clear pick yet on what the subheading is going to be? Otherwise, this issue is small but a great improvement, so it would be a shame to let it reside here for such a while...

@LRWebks: Totally agree. Please use "Next order workflow actions:"

So we can set this RTBC'd for maintainer feedback.

That's that! Don't think you need an explicit screenshot here, right?

Right, but you may not set the RTBC as the one who implemented it. I'm confirming RTBC hereby with the need for maintainer feedback for the final steps.

Clear UX improvements, thank you!

It looks like this is just a change to a template, so if the current workflow UI is confusing for a specific shop, couldn't these changes just be made in a custom template?

If this gets committed, existing websites may need to create a custom commerce-order--admin.html.twig template to remove the changes if they don't make sense to their administrative users. Just wanted to highlight that potential solution in this comment, if this update causes problems for existing sites.

For our site, the label "workflow" doesn't make sense, and even the "Current state" label would be problematic, since we had to change every order "state" label to "status" in our admin UI. It's been called "status" in our order entry system for more than 30 years, long before we started using Drupal, and nobody wanted to switch to "state"!

@lisastreeter thanks for your feedback. This is not for us. This is for UX and of course this is expected to be discussed and improved :)

Read the issue summary for the things that we think should be discussed to be improved and why. Or would you say Drupal Commerce UX is just perfect and can't be improved further? I don't think so, that's why I mentioned the points that possible don't seem clear to new users.

The thing is called "State Machine" and I though "State" is the correct term here, also used in other parts of Drupal Commerce Orders?

Please suggest how you would improve things based on the points in the issue summary for a better UX?
Looking at the initial screenshot it seems obvious to me, that it's not really self-explaining.

Thanks! And sorry if the point of my comment was unclear. I'm just thinking about existing sites, many of which are highly customized. I only mentioned the order "status" vs. "state" customization we have as an example of something we needed to do to improve the UX for our own site--originally, I left the standard Commerce order "state" labels in place, but it caused confusion. So I just changed the labels. If the word "workflow" suddenly pops up, that will also be problematic. We have older CSRs, in their 50s and 60s, who would wonder, "what is a "workflow??" But this is absolutely a "my site" problem, not a Commerce-project-as-a-whole problem.

I have no objections to your changes as a potential improvement for new sites, potential new sites evaluating Drupal Commerce, and even many existing sites. I just think there are some existing sites, like ours, for which the update will not work. But that's fine, especially since it's easy enough to add a custom template that will leave our site unchanged.

If I hadn't noticed this issue and released the changes as part of a routine update, then our admin users would have certainly wondered why their UI was changed. So then I would have gone searching through the release notes and issues included in the release to try to identify the source of the change. Then I would have found my way to this issue and read through the comments before looking at the specific code changes. It would have been helpful for me to find a comment that just provided the name of the template that was changed and made it clear I could "fix" our site by just reverting it to the previous version. So that was the main point of my comment--just an attempt to help some existing site admin who could want/need to "un-improve" the order workflow UI.

@lisastreeter thanks a lot for the clarification. Absolutely agree and if you should have any further ideas or feedback how to better improve this for the future, please let us know. Wording is one of the hardest things, but UX is super important.

Here you go!

I'd have to agree with Lisa here... The wording used here could be problematic on some sites... This is easy enough to override on a custom install so perhaps we should just skip this in core...
Will ping Ryan Szrama to see what he thinks about this change.

Thanks for the feedback @jsacksick. Would be nice, if we could take a more general look at this section. We don't have to choose the wording proposed, as the issue summary says, it's a more general UX issue with the current wording of this section, which confused users in several projects. That's the reason why we raised this point.

Our implementation is just one possible improvement.

Back to NW then.

Will ping Ryan Szrama to see what he thinks about this change.

Any feedback from @Ryan Szrama yet? Would be appreciated to know how we can improve this.