Hot answers tagged

60 votes

Is colour alone enough to convey warning?

No, it is not enough. This is how your image looks for people with achromatopsia (grayscale vision) This with Blue-Weak Tritanomaly This with Blue-Blind Tritanopia As you can see, there are evident ...
Devin's user avatar
  • 37.3k
23 votes

Is colour alone enough to convey warning?

Color alone is never sufficient to convey information because: Roughly 5% of the world population has some form of color vision deficiency, either dichromacy (only two types of working cone cells), ...
Austin Hemmelgarn's user avatar
19 votes

Is colour alone enough to convey warning?

The color alone is not sufficient as a distinguishing feature. The comparison to a traffic light is also not entirely correct. A traffic light has not only the three colors but also a very specific ...
BrunoH's user avatar
  • 3,415
15 votes
Accepted

How to indicate that a button is locked?

Consistency (WCAG 3.2.4) and labeling (WCAG 4.1.2) and are two important points in accessibility that apply to your situation. In your first two button examples, the "quick scan" has an icon ...
slugolicious's user avatar
  • 3,245
10 votes

If decrease in time represents a better score, should I show an up or down arrow?

Let's back up—consider this... The problem isn't up or down arrow. The problem is using an arrow to represent change in response time. The reason is because response time is viewed as higher numbers (...
bloodyKnuckles's user avatar
7 votes
Accepted

How can "down arrow" mean "increase"?

It's very nearly the same as this: Natural "reading order" for most cultures is from top to bottom, so when you place sequential things (whether it's a sequence of numbers, or the sequence ...
hobbs's user avatar
  • 186
6 votes

How to indicate that a button is locked?

I'll take inspiration from both excellent answers so far and suggest the following: Place both icons on either the right or the left side, whichever you prefer, but ensure consistency. Now, the issue ...
Devin's user avatar
  • 37.3k
6 votes

How can "down arrow" mean "increase"?

My guess is that it's referring to the position of the next month in a calendar, which is either to the right or to the bottom of the current month. The calendar itself is just following the ordinary ...
Glorfindel's user avatar
  • 3,310
6 votes
Accepted

Is there an accessibility standard for using icons vs text in menus?

I like the link posted in the comment section (When to use icons vs. icons with text vs. just text links?) but I wanted to specifically address the accessibility aspect since the question was tagged ...
slugolicious's user avatar
  • 3,245
6 votes

How to indicate that a button is locked?

There are different patterns to approach this but the main goal is to allow discoverability & learnability for the user on premium features. I would suggest your research well on what works well ...
Chris's user avatar
  • 4,518
4 votes

How to indicate that a button is locked?

IMHO, if you want to transport the paywall message, please use a paywall icon. Not a disabled or locked icon. If there's a locked icon, I'd ask my IT support department why it is locked and how to ...
Thomas Weller's user avatar
3 votes

Is colour alone enough to convey warning?

It is a misleading question because it is not about color, but about contrast. Is colour alone enough to convey warning? Yes, if these colors are strong enough to show a unique concept. In maximum ...
Danielillo's user avatar
  • 18.3k
3 votes

What icon should Restore (previously deleted file) button have?

There is no definitive answer to this, as it needs to be compatible with the icon for deleting (as those two options are contextually connected). However, here are some examples: Material Design ...
Laura Sofia Heimann's user avatar
3 votes
Accepted

Do small icons have to pass at least 3:1 for contrast accessibility?

Yes, it must have at least a 3:1 contrast with adjacent colors. The size of the icon is irrelevant with regards to WCAG unless you are working on AAA compliance, in which case, WCAG 2.5.5 Target Size ...
slugolicious's user avatar
  • 3,245
3 votes

How can "down arrow" mean "increase"?

The arrow corresponds to direction of the eyes opposed date value: The date values increase as the eyes look in the downward direction. The date values decease as the eyes look in the upward ...
Brandon's user avatar
  • 31
2 votes

Use open_in_browser icon or open_in_new icon inside native mobile app

I can't answer which icon you should use. But there is a difference between open a link in a new tab to open the browser and show something there. The second will open a new app on your device which ...
BrunoH's user avatar
  • 3,415
2 votes
Accepted

Why is the icon for password a lock, should it not be a key?

You’re not wrong, a password is more like a key than a lock. But, I can think of three reasons why a lock is shown. In the real world, the lock is the signifier that you need a key. We just ...
Izquierdo's user avatar
  • 12k
2 votes

What should be the order of icons in an accordion?

I believe you're mixing elements and affordances in your current UI design. The "info" icon is correctly placed next to the title, because the info is related to that title. However, the ...
Devin's user avatar
  • 37.3k
2 votes
Accepted

Does it make sense to visually differentiate between native select vs custom select/dropdown component?

This is a solid case for UI consistency, as there's no real possibility for the user to make an error. Most of the users won't notice or care about the fact that these are different icons. And you are ...
Alex Marcevoi's user avatar
2 votes

Should tooltip icons appear before, or after the element they refer to?

I don't think there's a rule for this. However, I think the vast majority of icons are placed right after the element they refer to, which makes a lot of sense. For example, when you read a sentence, ...
Devin's user avatar
  • 37.3k
1 vote
Accepted

Visual way (icon or otherwise) to indicate localization language is only partially complete

I wouldn't use an icon at all. Forty languages are a lot, and the icon's meaning will only be clear to languages with more speakers, such as English and Spanish. Discoverability in less common ...
Devin's user avatar
  • 37.3k
1 vote

Buttons with icon. Possible problems

It depends. Without knowing more details and without testing, your client is right by default. You don't need icons for buttons, but you do need labels. However, as you say, it's true that icons can ...
Devin's user avatar
  • 37.3k
1 vote

How to show elements in a table row that are not combinable ? ( Pls see description)

I think the problem is in the distribution of items in each of the cells: If the telephones are options, why do they appear in the description that it's a fixed element? What's the meaning of the ...
Danielillo's user avatar
  • 18.3k
1 vote

Basic question I know but what is the different between this dropdown to select with up/down icons rather than a dropdown with a chevron?

Apple calls these things pop-up buttons, as opposed to pull-down buttons. They say: Use a pop-up button to present a flat list of mutually exclusive options or states. A pop-up button helps people ...
Leo Wattenberg's user avatar
1 vote

Icon for partialy visible

This is a very common pattern, simply use + and - signs. As you can see in the image below, a + sign denotes there's more content, a - sign denotes that you can hide those visible items. However... ...
Devin's user avatar
  • 37.3k
1 vote

Is colour alone enough to convey warning?

No, color is not enough. But I'd be more general. As software professionals, we're often careful not to be redundant in our systems (except as needed for reliability) because it is too easy for ...
Robert Fisher's user avatar
1 vote

If decrease in time represents a better score, should I show an up or down arrow?

While other responses have suggested different icons to represent improvement or worsening, I'd like to take a different approach. Consider using a graph to display the user's progress over time. This ...
filip's user avatar
  • 2,685
1 vote

Using detail disclosure buttons on section headers

For me is hard to say without seeing a real case but you can use one of these components: Onboarding Modal: As you suggested, a one-time onboarding modal can introduce users to the key features and ...
AndriiD's user avatar
  • 624

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