36 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 ...
Roux Martin's user avatar
  • 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 ...
bloodyKnuckles's user avatar
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: ...
Danielillo's user avatar
  • 18.9k
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 ...
Mike M's user avatar
  • 24.7k
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 ...
Amit Jain's user avatar
  • 3,909
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:
Danielillo's user avatar
  • 18.9k
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 ...
Chris's user avatar
  • 4,548
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 ...
Tomáš Zato's user avatar
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 ...
John's user avatar
  • 152
4 votes

Order status indicator color

As a user, I would have no idea what the different colors would mean. I think you should write the title of each status underneath in small caps. If you do that, here are my color suggestions: OPEN - ...
user2950509's user avatar
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 ...
Dipak's user avatar
  • 16.2k
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 ...
Dominik Oslizlo's user avatar
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 ...
Joe Taylor's user avatar
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" ...
Alan's user avatar
  • 3,848
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 ...
DaveAlger's user avatar
  • 15.9k
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 ...
Izquierdo's user avatar
  • 12.7k
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 ...
James's user avatar
  • 41
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 ...
Francois's user avatar
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.
Ken Mohnkern's user avatar
  • 9,034
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, ...
exp's user avatar
  • 2,598
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 ...
slugolicious's user avatar
  • 3,255
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 ...
skinnedknuckles's user avatar
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 ...
Arvind Sagar's user avatar
2 votes
Accepted

Color selection according to status

The tooltip is a good addition, but I would also strongly suggest you find a way to use shape or icons in addition to color. Color can be tricky due to populations with colorblindness; you will want ...
Mattynabib's user avatar
  • 3,481
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 ...
insidesin's user avatar
  • 801
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'...
pmdci's user avatar
  • 121
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:...
Alvaro's user avatar
  • 16.8k
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....
virtualnobi's user avatar
  • 3,536
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 ...
BrunoH's user avatar
  • 3,425
2 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 ...
Swapna's user avatar
  • 642

Only top scored, non community-wiki answers of a minimum length are eligible