37
votes
Accepted
Our brand (and design system)'s primary colour is green: how should we indicate success?
DO NOT RELY ON COLOUR ALONE.
Status indicators should never rely on colour alone.
If you have any colourblind users (approximately 4.2% of people are colourblind) this will make statuses difficult to ...
- 14.2k
11
votes
Our brand (and design system)'s primary colour is green: how should we indicate success?
When it comes to coloring things like on/off indicators, selection indicators, links, error messages—interface "signals"—use colors people expect to see for those things. Here's where ...
- 2,673
10
votes
Our brand (and design system)'s primary colour is green: how should we indicate success?
In the example of the first image you show not only the main color but also a dependency relationship between shades of the same color: the light color as the axis and the dark color as the object:
...
- 20.4k
8
votes
Displaying Opening Hours
Try to think of how users would say this out loud, and how they perceive duration.
'When does the market close?'
'What time does it open?'
'What are the trading hours?'
Show time as one unit
If you ...
- 25k
7
votes
Accepted
Selecting new status vs. Triggering status change?
Assuming that the reservation status always starts with being "Pending" - and is not a factor of user action, there are two distinct categories of system/user actions.
First category has both ...
- 3,939
6
votes
Accepted
Status Bar with several Stage
I personally prefer the visual progress bar than the percentage number info. This is an example design combining both possibilities in the same space:
- 20.4k
6
votes
How to display status for On, Off, Faulty
As it is correlated with the function status: ON / OFF, it's a good choice to show both statuses close to each other as they both indicate the need for action.
But other than that, you should asses ...
- 4,578
6
votes
Our brand (and design system)'s primary colour is green: how should we indicate success?
Not a big fan of color only indication. Even if you use different shade of green, if someone has trouble seeing colors properly, they might not be able to tell them apart. Why not just use a checkmark ...
- 161
5
votes
Colours for project status
This does not directly answer the question, but an interesting approach to status is not only showing text and color. You could indicate all the steps (states) involved using indicators similar to ...
- 152
4
votes
Design suggestion for status on card view
Users generally notice the footer section when they have to take some action on the card, else the section might go unnoticed.
The F of eye tracking
Keep in mind the F of eye tracking on how users ...
- 16.3k
4
votes
Accepted
What's a good 'empty state' for a Delayed Buses display?
Assuming that there is a legitimate reason for having timetables separated for buses that are running on time and those that are delayed (I would argue that having all buses on 1 timetable and showing ...
- 478
4
votes
How to indicate that an item has been moved to another tab?
First of all, I think that, as a core of Kanban approach, this should not be an issue for the Users, as there is a natural connection between swiping an item right and the fact that it lands in the ...
- 13.9k
4
votes
Interpretation of job status
Avoid icon ambiguity wherever possible. In your scenario, a simple status string could work well for each row.
This could be done like so with color, or you could replace the "Completed: 0 / 99" ...
- 3,858
4
votes
Wizard component - current state vs active state
Use matching labels and colors
Showing incomplete tasks in gray quickly highlights the tasks which are being worked on and/or complete if they are shown in a different color.
Here are a few ways to ...
- 16k
4
votes
Our brand (and design system)'s primary colour is green: how should we indicate success?
Use a different green for statuses. Many color palettes accommodate both warm and cool shades of colors; in your case, you could use your cool "brand" green for components, and a warm green ...
- 12.9k
4
votes
Our brand (and design system)'s primary colour is green: how should we indicate success?
This won't necessarily apply to all controls and statuses but I noticed a nice little feature on Wix today. They use a symbol to indicate status as well as slightly fading the control. If you're only ...
- 41
3
votes
Accepted
Dual color iOS status bar / Alter width dimensions
No, it cannot do that out of the box: it's either light, or dark;
No, it's width cannot be altered normally;
I guess, you could make yourself a custom status bar, that behaves how you want it to, ...
- 2,628
3
votes
Accepted
Using "Void" as a status instead of "Void" as an action
We use "voided" as the status. So you "unvoid" a "voided" thing and "void" an "unvoided" thing. It's weird, but that's what we do.
- 9,054
3
votes
Colours for project status
I use the following colors for project status:
Dark Grey - Cancelled
Blue - Completed
Green
3a. Dark Green - Future (2 - 3 months) - on track
3b. Bright Green - Action required / Imminent (next ...
- 31
3
votes
Accepted
Adding tick and cross inside a toggle button
While tick mark works fine but adding a cross can send a different cue to the user.
Reasons:
Usually, cross denotes "remove" or "close" something inside any product or application.
Hence people ...
- 662
3
votes
Adding tick and cross inside a toggle button
It's definitely good to have an extra indicator besides color (which a color blind person might have trouble distinguishing) and left-right (it's not immediately obvious that the right side represents ...
- 3,330
3
votes
Microsoft Teams - Status colours shown on the UI for Away & Be Right Back are same?
Good question - I looked into it a bit and I can't find anything super convincing. My theory is that they are trying to cater to both the sender and the receiver:
Some people might want to ...
- 1,283
3
votes
Accepted
Why does NNG recommend skeleton screens for full page but not for individual components
Does the modal load as the page is loading too? For example sometimes sites will load the main page and also load a marketing modal at the same time ("sign up for our newsletter"). So you ...
- 3,327
2
votes
Showing the status of an action on a button
Keep in mind the function of user interface objects.
Displays and status icons are read-only objects to inform the operator.
Buttons enable the operator to take action of some kind.
Combining these ...
- 121
2
votes
Colours for project status
You can spell it out rather than having traffic lights. There are a set of visual representations that conform to global standards (like traffic lights). I would recommend to let the user know the ...
- 21
2
votes
Accepted
How to visualize status where a lower number or a zero is better than a higher number?
Big numbers in small digits are often better than small numbers in double digits. i.e. a 1 with font-size 16 is much more important than a font-size 12 of 22
i.e. think about this.
1
versus
22
...
- 801
2
votes
Accepted
How to indicate that an item has been moved to another tab?
I suggest you use a "snackbar" message informing the user of those recent changes:
Issue 1 was moved to In Progress
If several changes were made you could inform about it in a more general message:...
- 16.9k
2
votes
Colours for project status
We had a long debate in my company around this subject. We came to the conclusion that the correct colour depends really on what we are trying to achieve.
NOTE: I take the point that colour alone isn'...
- 121
2
votes
How to best show an activity state transition adhering to google's material design component framework?
Welcome to the site, shikhhar!
It may well be that the combination of the term "Activity Completed" and the interactive element causes confuses users. "Activity Completed" is a description of a state....
- 3,741
2
votes
Status Bar with several Stage
I find the percentage very confusing. It is the percentage of the pieces processed in each delivery state. It might not be clear to the user what these percentages actually mean (well, I don't know ...
- 3,445
Only top scored, non community-wiki answers of a minimum length are eligible