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 ...
- 21.2k
73
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 ...
- 2,858
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 ...
- 10.4k
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 ...
- 40.7k
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 ...
- 7,761
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 ...
- 871
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 ...
- 3,303
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 ...
- 1,782
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 ...
- 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.
- 10.8k
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 ...
- 10.8k
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 ...
- 10.6k
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 ...
- 2,415
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 ...
- 16.5k
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 ...
- 6,776
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 ...
- 16.5k
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 ...
- 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 ...
- 2,581
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 ...
- 1,512
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 ...
- 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 ...
- 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 ...
- 717
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 ...
- 1,532
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
- 9,014
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' ...
- 40.7k
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 ...
- 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.
- 11.1k
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 ...
- 24.4k
15
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/
- 275
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" ...
- 2,600
Only top scored, non community-wiki answers of a minimum length are eligible