96 votes

Best error color on blue color?

MD guidelines aren't rules The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it ...
plainclothes's user avatar
  • 21.3k
72 votes

Best color to display hot/cold but also on/off

I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON ...
nuwa's user avatar
  • 2,858
54 votes
Accepted

Best color to display hot/cold but also on/off

Red can be used for ON, most sockets use this color when they are on : I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will ...
DesignerAnalyst's user avatar
51 votes
Accepted

Better way to show books in a row

By the usability point of view, the optimal choice would probably be #2, since it leaves no doubt about the binding between the book title and its cover (see the Gestalt's Proximity Principle). An ...
Stefano's user avatar
  • 871
44 votes

Best color to display hot/cold but also on/off

Do not use colors to indicate that the system is ON or OFF, use instead a linguistic code, while use an iconic code to comunicate the HOT/COLD state. Here I used a thermometer with different colors (i ...
Marco Tatta's user avatar
  • 1,762
36 votes

Visually indicating user to change orientation of device

By using text + image. You can use something like this: Bonus points for adding a subtle animation that catches even more attention.
Pectoralis Major's user avatar
31 votes

Disable past dates or display error message?

1 is the better option as you are not making the user do a set of actions that would lead to error message. It's better to avoid the chance of an error occurring rather than let the user do the error ...
Blue Ocean's user avatar
  • 10.7k
29 votes

Is it a good decision to include monospace fonts in UI?

Monofaked fonts There's a solution already planned in design for this type of situation, it's to use pseudo monospace fonts or proportionally spaced typefaces with a monospaced appearance. Type ...
Danielillo's user avatar
  • 18.9k
29 votes

Why is Figma/Adobe XD needed?

Because not everyone is working alone. Of course when you're the developer of your own design you don't need to sketch everything. I don't need to do it for my own app I'm developing either. But in a ...
Big_Chair's user avatar
  • 6,825
25 votes

When to use the gestalt principle of common region?

The proximity principle used as a frame works correctly when there are at least two or three elements generating the container virtual limits: It works more as a closure law: Or the content has a ...
Danielillo's user avatar
  • 18.9k
24 votes

Why most footers have a background color as a divider of section?

When you walk into a physical store usually have a rug or a door or something to make you slowdown and pay attention to all after that point. On websites is quite similar. You should have different ...
Rafael Perozin's user avatar
22 votes

Disable past dates or display error message?

Both. As others have said, it's better to disable past dates to minimise the risk of bad data, however you should also factor in that sometimes things don't work as expected and still validate the ...
gabe3886's user avatar
  • 425
21 votes
Accepted

Visually indicating user to change orientation of device

In many sports apps when you check the standings table you only get limited data (such as no. of games, points) and when you want to see all columns (no. of goals, wins, etc.) you need to rotate the ...
Jaroslav M's user avatar
21 votes

Does the icon of arrows shaped as triangles pointing up and down have a name and what does it mean?

This icon seems to have different meaning in different systems: it's called "caret sort" or "chevron sort" in Carbon Design System; it's called "unfold more" in Material ...
exp's user avatar
  • 2,598
19 votes
Accepted

Best error color on blue color?

Show your error message on a neutral-colored box. download bmml source – Wireframes created with Balsamiq Mockups
Ken Mohnkern's user avatar
  • 9,034
18 votes
Accepted

Why most footers have a background color as a divider of section?

If you add too much whitespace, apart from wasting screen space (which I won't go into further as I don't want to rant), plenty of users will stop scrolling too soon to see it if they're not actually ...
Chris H's user avatar
  • 1,439
17 votes

Does the icon of arrows shaped as triangles pointing up and down have a name and what does it mean?

It is one representation of a sort icon. When used next to a table header label, the user can sort in one direction by clicking once, and the other direction by clicking a second time.
Izquierdo's user avatar
  • 12.5k
16 votes

Intuitive interface for Composing Boolean Logic?

There is a jquery plugin to do this, called QueryBuilder, which do this in an interesting way : http://mistic100.github.io/jQuery-QueryBuilder/
Rey0bs's user avatar
  • 285
16 votes

How do I handle wrong input in a multiple input field?

I'm not sure what your tech stack is, but you could use an input that the Return key quickly turns it into a taglike pill. Here's a bootstrap example showing this with accompanying code (It's a tiny ...
Mike M's user avatar
  • 24.6k
15 votes
Accepted

Dealing with dozen digit number inputs

Using words isn't a bad idea at all. It's the most 'easy to understand' way for everyone. You can make a dropdown list after the input, containing: No unit Thousand Million Milliard The "no unit" ...
Max de Mooij's user avatar
  • 2,620
15 votes

Does the icon of arrows shaped as triangles pointing up and down have a name and what does it mean?

I have seen some dropdowns on the web styled with the double arrows. Also, in table headers it is used as a sort icon (fa-sort in font-awesome). So I guess you can use it for both.
Nash's user avatar
  • 2,443
14 votes

Intuitive interface for Composing Boolean Logic?

There's quite a few good ideas/references here, especially to some existing approaches. Often, though not always, Apple's approach is a good place to start - but perhaps in your case it may not be. I ...
Monomeeth's user avatar
  • 3,826
13 votes
Accepted

What are good synonyms for "not yet connected"?

When you can't think of a noun for an anchor or headline, think of a verb If you can't quite think of a name for the content on the linked page, you can instead try thinking of the action that users ...
Tim Grant's user avatar
  • 3,941
13 votes

What's the difference between "Help Center" and "Knowledge Base" sections on a website, if there's any?

Personally, I always considered (and therefore use) Knowledge Base INSIDE Help (or Help Center if you wish). I think HELP is global, and all resources aimed to HELP users should be put together in a ...
Devin's user avatar
  • 37.9k
13 votes
Accepted

Categories in a list: Empty state or hide?

Option 1 does present more data, but is bound by a more explicit rule. If someone looking out over a six month period for reservations, and is coordinating or receiving this data from other systems, ...
Mike M's user avatar
  • 24.6k
12 votes
Accepted

What is the minimum waiting time after when should a page loader be displayed to the user?

If loading time is more than 1 second. It is one of the classics, going back to 1968. 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will ...
locationunknown's user avatar
12 votes

Is it a good decision to include monospace fonts in UI?

Often people use monospaced fonts to create simple tables or ASCII art. If you don't allow a true monospaced font you are making a blanket decision for all of your users that those uses are ...
WiringHarness's user avatar
11 votes

What is the iOS alternative to a radio button?

I wrote a highly customizable radio button control for iOS. It supports both obj-c and swift. Hope it helps!
David Liu's user avatar
  • 211
11 votes

Best color to display hot/cold but also on/off

My advice would be to lose the On/Off labeling. It's just adding a layer of confusion. If ON == Cold && OFF == HOT, just label them HOT/COLD. They are referring to the same state. Then you ...
Mark's user avatar
  • 1,189
11 votes

Do I need arrows to indicate hover menus in main navigation?

It used to be that arrows were preferred as they provided a visual cue to users there was more to the menu if they clicked on / hovered over them. Over time web developers started making these menus ...
Monomeeth's user avatar
  • 3,826

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