95 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 ...
user avatar
  • 21.1k
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 ...
user avatar
  • 2,818
70 votes
Accepted

Why are keyboards still the predominant input device?

Because of: Familiarity: Everyone has more or less learned to use it and a lot of users don't even need to take a look at at individual keys to type. Although not physically, it's present and has the ...
user avatar
53 votes
Accepted

Best way to communicate "tap anywhere to continue"

There is no good way Here's the design logic: Backgrounds are perceived by users as backgrounds, i.e. inert and uninteractable. This is obvious. In order to communicate to users that the background ...
user avatar
  • 40.3k
53 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 ...
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 ...
user avatar
  • 841
48 votes
Accepted

Do input box highlights improve user experience?

There is at least a single benefit for those not using a mouse - Normally you are able to tab between input elements using the keyboard, this is an indicator as to which element currently has your ...
user avatar
47 votes

Intuitive interface for Composing Boolean Logic?

This one tested well with both the technical and non-technical users and can generate pretty much any possible database query... The benefits are that it's very clear and a user can drag and drop (or ...
user avatar
  • 15.8k
44 votes

Why are keyboards still the predominant input device?

Rewobs answer is already excellent, but for a deeper understanding it's valuable to consider what alternatives we have. Chorded keyboard Already in the mother of all demos in 1968 an alternative ...
user avatar
  • 3,304
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 ...
user avatar
  • 1,774
40 votes
Accepted

What is the iOS alternative to a radio button?

Usually this is done using a table view, which is basically a list of items as well, only with a checkmark instead of a radio button. Sometimes such lists are on a new 'page' in the navigation ...
user avatar
  • 526
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.
user avatar
35 votes
Accepted

Pick a unique activity for each day of the week

Create a repository with actions from where they can be dragged to days. The question is what happens when you try to drag an item to a day that is already occupied. Replace the item and send the ...
user avatar
  • 10.3k
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 ...
user avatar
  • 10.5k
29 votes
Accepted

Multi shapes buttons damage User Experience / User Interface?

The style of shapes can alter the look and feel of the application and thus change the user experience. Apple got praise with their rounded corner movement showing that a different style shape can ...
user avatar
29 votes

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

Monofaked fonts There is 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 ...
user avatar
  • 13.8k
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 ...
user avatar
  • 6,716
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 ...
user avatar
  • 13.8k
24 votes

Best way to communicate "tap anywhere to continue"

What's the issue with giving the user a predefined region of space with some sort of indicator that that space is where they should tap to continue - a button with an appropriate continue icon (the ...
user avatar
  • 341
24 votes
Accepted

Best practice on Web Chat "please wait" messaging

Think about what it means to be staring at that loading spinner: The user doesn’t want to do any of this. He has no interest in managing his utilities. It’s something he might have to do from time to ...
user avatar
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 ...
user avatar
21 votes

Why are keyboards still the predominant input device?

Their usefulness scales beautifully with experience and developed skill Someone who knows only a little bit of numbers and letters can use a keyboard for a variety of tasks, even without knowing ...
user avatar
  • 431
21 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 ...
user avatar
  • 415
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 ...
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 ...
user avatar
  • 1,512
19 votes
Accepted

Purposefully obscure user interface design to encourage behaviours

These are called 'Dark patterns' and these can be used in many different ways to influence users behaviour. Social networks as you mentioned put the logout button in a separate menu, Facebook in ...
user avatar
  • 957
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
user avatar
  • 8,974
18 votes

Why does the caps lock key have a down arrow as its icon?

Wikipedia seems to be popular with the information so far... :) So here's info from the history section of the page on caps lock The Caps Lock key is a modified version of the Shift lock key that ...
user avatar
18 votes
Accepted

What is the term for a numeric input field of a specific format?

The term used for these format-constrained inputs is masked inputs or mask input. Here is a demo which includes a broad range of masks (date, time, phone number, etc). If you Google 'masked input' ...
user avatar
  • 40.3k
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 ...
user avatar
  • 1,439

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