248
votes
Splitting credit card number fields into four different inputs
I would generally always opt for the simplest solution. In this case, one single field for the user to type into.
With split fields, such as the 4-box one you propose it adds in an extra cognitive ...
JonW♦
- 37.1k
144
votes
Splitting credit card number fields into four different inputs
This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support.
Don't use 4 separate fields.
First, it's annoying, a lot of those reasons are ...
- 2,602
142
votes
Accepted
Why aren't HTML5 typed number inputs right aligned, and should they be?
Number fields should not always be right-aligned
It often makes sense to right-align numbers when they are being compared to other number fields (e.g. in financial statements). This can help ...
- 40.8k
109
votes
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
86
votes
Accepted
How can I reduce duplication of radio buttons?
Actually, there could be a way to make this a tad bit less heavy.
In your situation, you're repeating words which are not absolutely necessary. Try something like this in addition to adding more ...
- 5,405
85
votes
To clear (or not to clear) the search box?
I have a personal hatred towards websites which clear content from the Search bar after I hit Search.
Here's why:
It is completely unnecessary to clear the content out. There are multiple chances ...
- 6,385
74
votes
Accepted
How should I allow a user to input a number where not all numbers are valid?
The user is entering a number. That some values are invalid for technical reasons does not change the nature of the user interaction. I would go with an option that is the most natural to enter a ...
- 3,343
72
votes
"Typocaptcha" - an alternative to CAPTCHA?
Ironically, I could not get by myself what bgeigr meant, but almighty Google helped me out:
So this captcha is quite easy for computers to guess, yet may be hard for humans.
And bear in mind that ...
- 2,236
66
votes
Splitting credit card number fields into four different inputs
As someone who happens to use virtual credit cards, I'm strongly in favour of a single field. Every time I want to pay, there is a new card number generated for me by the banking app, and it's very ...
- 2,236
65
votes
Two forms to choose from, choose only one
You could use an accordion. Here's an example of one I've used before:
- 7,875
63
votes
"Typocaptcha" - an alternative to CAPTCHA?
Why would this be indecipherable to a computer? Since each word has the correct letters, but they are scrambled, it would seem very easy for me for a computer to crack the correct order of the letters ...
- 1,267
62
votes
Accepted
To clear (or not to clear) the search box?
If you clear the box, you're taking away control from the user. While you may seem like you're doing them a favor, you're robbing them of context for what they just typed in.
When you type things ...
- 2,654
62
votes
How should I allow a user to input a number where not all numbers are valid?
I think a horizontal slider with:
Graduations (tick marks) showing the possible values
A handle with a triangle end pointing to those tick marks
Snapping to the closest possible value when you drop ...
- 2,566
53
votes
Accepted
Customers using the New Order option when they should use Reorder
Speak like your customers
It's helpful to be more conversational — especially with older customers who tend to miss implied meaning in an interface. They aren't typically put off by a little ...
- 21.2k
53
votes
Accepted
Is password-unmasking worth the potential security downside?
This is current recommended best practice by NIST
The people who dinged your product for security issues are not up-to-date with current standards. In 2020 NIST published updated password guidelines ...
- 646
51
votes
Accepted
What do you call this input element where a focus will automatically be transferred to next text field after being filled?
I have always known this as Auto Tab or (Auto tab input fields). As a matter of fact a search for Auto Tab gives me different ways of implementation of this element, including:
jQuery Autotab Demo
...
- 35.2k
46
votes
Accepted
Textbox with an unknown value
In a previous project we went for something just like you thought of, just a bit more visually clean:
Why it's good:
Law of proximity (you clearly see the connection of form field & checkbox)
...
- 6,786
44
votes
How can I reduce duplication of radio buttons?
The secret sauce of product design 🦄
You mentioned that the score and rank are determined independently. This sounds to me like a classic example of the feature no one asked for but everyone wanted. ...
- 21.2k
43
votes
Accepted
"Typocaptcha" - an alternative to CAPTCHA?
This is not effective for keeping out a targeted attack by someone who uses a word list, such as /usr/share/dict/words, to solve your anagrams. A task like "unscramble the words in standard input, ...
- 1,075
43
votes
Accepted
What is the best practice for password field placeholders?
This article by NNGroup actually covers this exact topic.
http://www.nngroup.com/articles/form-design-placeholders/
To summarize:
WORST:
Using a placeholder that says "Password" with no additional ...
- 15.3k
39
votes
What is the most common color to indicate the input-field is disabled?
The correct terminology is Greyout.
It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.
Definition by Oxford Dictionary:
noun
...
- 921
36
votes
"Typocaptcha" - an alternative to CAPTCHA?
tl;dr
A good captcha would need (ideally) to offer the best possible protection (difficult to get for a computer) and ease of use (easy to get for a human).
But captchas aren't good at this and "...
- 10.4k
36
votes
Accepted
How do you convey that the minimum size of an input is X characters?
The best approach is to inform the user about these rules in plain language next to respective input fields.
I would suggest enforcing a minimum and maximum character limit to handle edge cases and ...
- 3,599
33
votes
Is there a recommended size for search boxes?
From my experience, the answer is... It depends!
I work for a recipe site and we launched a new site last year which had a whole redesign. We used to have a smaller search box and users interacted ...
- 2,527
33
votes
Accepted
Using asterisk (*) vs required
Asterisks (*):
Pro: it doesn't take up much space
Con: it doesn't mean anything
"Required":
Con: it takes up more space
Pro: it tells you exactly what it reads as meaning
The "norm" was never a ...
- 17.5k
32
votes
Accepted
Disable or hide input fields?
When you grey out a control, you are communicating "something is currently disabled, but may become available if you do something else on the page".
The only down-side of this approach is the ...
- 8,904
30
votes
Is it standard practice to indicate on the form that Caps Lock is on?
Indicating the caps lock is on is a design pattern used for passwords. When the passwords are hidden and every character is only represented by a dot, users might not know they're typing capitals ...
- 9,344
Only top scored, non community-wiki answers of a minimum length are eligible