New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UX] Quick order status update action buttons #15889

Closed
gerdneuman opened this Issue Jun 30, 2017 · 10 comments

Comments

Projects
None yet
5 participants
@gerdneuman

gerdneuman commented Jun 30, 2017

In all contexts I am aware of the 3 dots icons symbolizes something like a "More options" menu. At least in all three mayor browsers like Chrome, Edge and Firefox (with the upcoming new menus in Firefox 56)

When clicking on the 3 dots icon I would assume that a menu pops up letting me set the order status to any of the possibilities:

3_dots_icon

Instead this stands for "processing". I personally have always find this confusing (same icon but different meaning between browser and woocommerce) and think another icon should be used for "processing", maybe something like a working hand or similar.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Jun 30, 2017

Member

What is "a working hand"?...

Member

mikejolley commented Jun 30, 2017

What is "a working hand"?...

@gerdneuman

This comment has been minimized.

Show comment
Hide comment
@gerdneuman

gerdneuman Jun 30, 2017

... you don't seem to be socialist ;)
https://openclipart.org/detail/279568/man-weilding-a-hammer
https://openclipart.org/detail/151477/hammer-in-hand

Anyway, something like a "tool", e.g. a hammer would symbolize "in progress" (working at it) to me. Though I cannot find anything immediately looking at http://fontawesome.io/icons/

Maybe an hour glass with rinsing sand would do http://fontawesome.io/icon/hourglass-start/

gerdneuman commented Jun 30, 2017

... you don't seem to be socialist ;)
https://openclipart.org/detail/279568/man-weilding-a-hammer
https://openclipart.org/detail/151477/hammer-in-hand

Anyway, something like a "tool", e.g. a hammer would symbolize "in progress" (working at it) to me. Though I cannot find anything immediately looking at http://fontawesome.io/icons/

Maybe an hour glass with rinsing sand would do http://fontawesome.io/icon/hourglass-start/

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Jun 30, 2017

Member

I understand the potential confusion. Although our icon predates Material design I believe xD

The tooltip explains what is happening so I don't think this is urgent. (We should update the tooltip to say "Mark as processing" rather than "Processing" though - separate issue).

That of course is not visible on mobile so this needs to be addressed somehow. I'm not keen on any of the suggested icons because they have alternative interpretations. There is no universally recognisable icon for 'processing' that I can think of.

Imo we should redesign the actions here. Potentially to use a select with a go button. Similar to the actions meta box on the single order screen.

Member

jameskoster commented Jun 30, 2017

I understand the potential confusion. Although our icon predates Material design I believe xD

The tooltip explains what is happening so I don't think this is urgent. (We should update the tooltip to say "Mark as processing" rather than "Processing" though - separate issue).

That of course is not visible on mobile so this needs to be addressed somehow. I'm not keen on any of the suggested icons because they have alternative interpretations. There is no universally recognisable icon for 'processing' that I can think of.

Imo we should redesign the actions here. Potentially to use a select with a go button. Similar to the actions meta box on the single order screen.

@gerdneuman

This comment has been minimized.

Show comment
Hide comment
@gerdneuman

gerdneuman Jun 30, 2017

There is no universally recognisable icon for 'processing' that I can think of.

Don't you have some designers at Woo/WordPress? Usually devs aren't UX or visual experts usually. I think everything like "working", "in progress" would do better than ...

Imo we should redesign the actions here. Potentially to use a select with a go button. Similar to the actions meta box on the single order screen.

Actually, I like it that it is one click. Select would mean 2-3 clicks I guess.

FWIW, here's a Firefox with the upcoming Quantum/Photon changes coming with Firefox 57 in Nov:
2017-06-30 13_57_05-nightly start page - nightly

...and here's current Edge:
2017-06-30 13_58_29-start - microsoft edge

So, sure you've been first but you can't work against the browser :-P

gerdneuman commented Jun 30, 2017

There is no universally recognisable icon for 'processing' that I can think of.

Don't you have some designers at Woo/WordPress? Usually devs aren't UX or visual experts usually. I think everything like "working", "in progress" would do better than ...

Imo we should redesign the actions here. Potentially to use a select with a go button. Similar to the actions meta box on the single order screen.

Actually, I like it that it is one click. Select would mean 2-3 clicks I guess.

FWIW, here's a Firefox with the upcoming Quantum/Photon changes coming with Firefox 57 in Nov:
2017-06-30 13_57_05-nightly start page - nightly

...and here's current Edge:
2017-06-30 13_58_29-start - microsoft edge

So, sure you've been first but you can't work against the browser :-P

@gerdneuman

This comment has been minimized.

Show comment
Hide comment
@gerdneuman

gerdneuman Jun 30, 2017

Last try (I propose ;). How about a loop with arrows. Something like
image

so that it does not look like a "Reload" button

(without the white space it would be even better I think, that is, one line only)

There's more like this: https://duckduckgo.com/?q=loop+arrow&t=ffhp&iax=1&ia=images

gerdneuman commented Jun 30, 2017

Last try (I propose ;). How about a loop with arrows. Something like
image

so that it does not look like a "Reload" button

(without the white space it would be even better I think, that is, one line only)

There's more like this: https://duckduckgo.com/?q=loop+arrow&t=ffhp&iax=1&ia=images

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Jun 30, 2017

Member

It's still abstract. It could literally mean anything...

This also affects the status icon on the left of orders.

Member

mikejolley commented Jun 30, 2017

It's still abstract. It could literally mean anything...

This also affects the status icon on the left of orders.

@claudiulodro

This comment has been minimized.

Show comment
Hide comment
@claudiulodro

claudiulodro Jun 30, 2017

Contributor

IMO the loading spinner thing might be a good "processing" icon, since generally things are "processing" while it's displayed.

It also might be confusing. Not sure if people would think something's loading there. :)

Contributor

claudiulodro commented Jun 30, 2017

IMO the loading spinner thing might be a good "processing" icon, since generally things are "processing" while it's displayed.

It also might be confusing. Not sure if people would think something's loading there. :)

@WPprodigy

This comment has been minimized.

Show comment
Hide comment
@WPprodigy

WPprodigy Jun 30, 2017

Member

Actually, I like it that it is one click. Select would mean 2-3 clicks I guess.

Being able to quickly change the status in one click is nice, but it's not very helpful if most people don't understand what the buttons mean in the first place. This UX also worsens when you have more custom order statuses with icons as well.

I wonder what the use case actually is for quickly changing the order status on the order-list page? If your orders needed fulfillment, I would think the store management would need to be clicking into the orders to get the information anyway. If people scroll through the orders just auto-completing or going straight to processing, there may be an issue in the workflow (they should be using virtual & downloadable products for example, or somethings wrong with the gateway thats not sending orders to processing).

I like the idea of rethinking this, and perhaps using a select instead. It makes the UX consistent across the order-list and single-order pages, more considerate for those w/ extra statuses, and provides more context as to what the user's options actually are.

Member

WPprodigy commented Jun 30, 2017

Actually, I like it that it is one click. Select would mean 2-3 clicks I guess.

Being able to quickly change the status in one click is nice, but it's not very helpful if most people don't understand what the buttons mean in the first place. This UX also worsens when you have more custom order statuses with icons as well.

I wonder what the use case actually is for quickly changing the order status on the order-list page? If your orders needed fulfillment, I would think the store management would need to be clicking into the orders to get the information anyway. If people scroll through the orders just auto-completing or going straight to processing, there may be an issue in the workflow (they should be using virtual & downloadable products for example, or somethings wrong with the gateway thats not sending orders to processing).

I like the idea of rethinking this, and perhaps using a select instead. It makes the UX consistent across the order-list and single-order pages, more considerate for those w/ extra statuses, and provides more context as to what the user's options actually are.

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Jul 3, 2017

Member

So, sure you've been first but you can't work against the browser :-P

Exactly, I was just making the point that we didn't make the decision to do that by using the same icon haha :D

I'm not worried about 2 clicks to update order status when the trade-off is a clearer UX.

A select scales better with extensions (and is easier to integrate with). It's better for accessibility and localisation as well.

But @WPprodigy makes a good point, I wonder how often these actions really get used. We didn't include them in our designs for WC on WordPress.com. We should probably leave them for now (replace with select) but I think we can consider removing them in the future.

Member

jameskoster commented Jul 3, 2017

So, sure you've been first but you can't work against the browser :-P

Exactly, I was just making the point that we didn't make the decision to do that by using the same icon haha :D

I'm not worried about 2 clicks to update order status when the trade-off is a clearer UX.

A select scales better with extensions (and is easier to integrate with). It's better for accessibility and localisation as well.

But @WPprodigy makes a good point, I wonder how often these actions really get used. We didn't include them in our designs for WC on WordPress.com. We should probably leave them for now (replace with select) but I think we can consider removing them in the future.

@mikejolley mikejolley added this to the 3.3.0 milestone Jul 3, 2017

@WPprodigy WPprodigy changed the title from [UX] 3 dots icon for "processing" is misleading to [UX] Quick order status update action buttons Jul 3, 2017

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Sep 4, 2017

Member

This is being worked on in branch: #16700

Member

mikejolley commented Sep 4, 2017

This is being worked on in branch: #16700

@mikejolley mikejolley closed this Sep 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment