Currently trying to find the best visual representation for Order Status. It needs to stand out and be scannable in a list of 25 items. But, in the larger hierarchy of the page, status shouldn't be the first thing that you see.
Plus, inquiries need to stand out as different than orders. Then orders have several stages during the process. And there's also an "unread" state. Oy!
Feedback appreciated :)
8 months ago
we have a similar interaction challenge when it comes to taking attendance for a large class.
Rather than one large collection of items sorted by status, we broke out our attendance status into chunks of related items
We found that instead of trying to scan a big list, staff members using our product had just a few related items to scan. It made it clearer as to which group of attendees needed attention.
Have you tried pulling the white shapes (checkmark, shopping cart, etc.) out of their squares? The squares are making everything equal, and I think the shapes are different enough to help scanning.
To break up "inquires", I'd remove the question mark icon entirely. My theory is the sudden space while (whilst?) scanning would cause users to pause.
@Travis Isaacs That's a really interesting approach. We're already breaking out Active Orders and Completed Orders but within Active Orders there are six states. Maybe there's a way to rethink the organization like you suggested.
@Ryan Rushing You may be right about the squares. I initially tried the icons without the square and it felt a little chaotic, but I may need to revisit it and fine tune the execution.
I'm guessing there's two basic chunks of status from that larger group: something like Needs Attention and Passive. Just at a glance, I would guess New Orders and Inquiry require some kind of action or response, where Accepted, Scheduled, and Delivered are more a demarcation of where in the process the order is.
I'm not sure what the blue background is denoting in the first three orders. If it's meant to accomplish the same thing as the orange color on the status, you may want to pick one or the other. If it denotes that those three lines are selected (checked) for some kind of bulk action, then it makes complete sense.
I love the style of the toggle at the top right. I'm not entirely sure what it does, but I'd be tempted to click it. I'm a bit confused about which one is selected, though - the blue color on the left would seem to indicate that was the selected toggle, but the depressed state on the other side would seem to indicate that. This is kinda how I'm thinking of it:
Here are a couple suggestions:
1. Yellow is often associated with warnings. Consider neutral tones for things that don't require action.
2. I agree with Ryan about the overall icon shapes - at that size, the white part of the shape doesn't stand out very much.
by Erica Burnett
8 months ago
@Ste Grainer Thanks for the thoughtful response!
I didn't really provide much context, so I'll try to outline that a little. There are several layers of information at play here. First, there are Orders and there are Inquiries. Any of those may be read or unread. But the orders can have several states: New (which hasn't been accepted by the seller yet), Accepted, Scheduled, Delivered, and Charged.
We are using orange to denote new messages and urgent activity elsewhere on the site so it seemed appropriate to use that for items that require action within 24 hours (New Orders and New Inquiries).
I definitely agree with your first point that yellow could be misunderstood for a warning of some sort. Here, I was using yellow to represent items that require action (working on the order or delivering the order), but not urgent action. The next phase (Charged) is coded green. I'm definitely open to color suggestions for active and charged orders since they feel kind of primary/kid-friendly as they are now. What sort of neutrals were you envisioning?
I suppose I should also add that our link color is the bright blue and is used to highlight actionable items too. I suppose that's why I used the blue on the toggle at the top. The toggle would allow the user to switch between two views: expanded and collapsed.
Thanks for the +1 on the icon shapes. I just posted a rebound of this and am much happier with it. Thoughts?
@Erica Burnett Thanks for the context - that does help me understand the decisions better.
I'm guessing the light blue background on the table rows is read/unread status? (Either that or selected/unselected.)
The orange is perfect to denote urgent action, especially if it is carried throughout the site.
To me, Accepted, Scheduled, and Delivered sound more like passive actions (particularly scheduled and delivered) as 1) they are past tense and 2) there is no immediate next action inherent in the words. If there *are* obvious next actions tied to those statuses, then I think some color is fine. When I mentioned a neutral, I was thinking a grey or tan color in a medium range.
The toggle at the top is immediately obvious as a toggle. My confusion lies around which state is currently selected. With a two- (or even multi-state) toggle, I'm used to seeing the depressed (shaded) side as the side currently selected. But I also expect that side to have colored icon or text. When one side has color (the left) and the other side is "depressed" (the right), I'm not sure which side is selected. Here's another example - notice the shading and color:
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter