247 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's user avatar
  • 37.3k
145 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 ...
Jason C's user avatar
  • 2,622
108 votes

How to enable users to insert an infinity number

How about using something like this?
anna328p's user avatar
  • 1,132
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
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 ...
UXerUIer's user avatar
  • 5,485
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 ...
Swapnil Borkar's user avatar
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 ...
Denis's user avatar
  • 3,363
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 ...
Dmitry Grigoryev's user avatar
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:
Nick Groeneveld's user avatar
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 ...
Armstrongest's user avatar
  • 2,644
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 ...
jcaron's user avatar
  • 2,716
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 ...
plainclothes's user avatar
  • 21.3k
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 ...
thegreatemu's user avatar
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 ...
Devin's user avatar
  • 37.9k
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) ...
Big_Chair's user avatar
  • 6,825
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. ...
plainclothes's user avatar
  • 21.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 ...
Juan Jesús Millo's user avatar
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 ...
Sooraj MV's user avatar
  • 3,609
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 ...
stradled's user avatar
  • 2,537
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 ...
Nicholas Pappas's user avatar
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 ...
SteveD's user avatar
  • 8,924
28 votes
Accepted

Google and Yahoo require you to enter your username first, then password. Why is this?

Both sites are preparing new login features. Google has made an announcement explaining the reasons behind the 2 steps login process Today, you sign in to Google on a page that includes both the ‘...
Devin's user avatar
  • 37.9k
26 votes

What is the most common color to indicate the input-field is disabled?

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text. Even if you're not implementing a framework, you can ...
Mike M's user avatar
  • 24.6k
25 votes

Why would the search input field not get focus when the page is loaded?

You already answered your own question. Keyboard/screen-reader users will need to step out of the search field when it was focused automatically to make use of other ways to navigate. Also on mobile, ...
jazZRo's user avatar
  • 11.7k
23 votes

Good alternative to a slider for a long list of numeric values

How about a combination of a slider and a spinner (number stepper)? How does this work? I am glad you asked... Your list of values is effectively an array. So rather than the slider having a list of ...
musefan's user avatar
  • 7,091
22 votes

Splitting credit card number fields into four different inputs

The simplest, if not necessarily the absolute best, solution is a single credit-card field that lets a user input any string of digits and spaces. It should be trivial for the server-side logic to ...
nigel222's user avatar
  • 665
21 votes

What do you call this input element where a focus will automatically be transferred to next text field after being filled?

Input Mask This would be an example of an input mask implementation An input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in ...
DasBeasto's user avatar
  • 15.3k
21 votes
Accepted

Should selected options be removed from single- and multi-select dropdown lists?

Good question, also props for differentiating the two different scenarios. I think that you are in luck because there is indeed just a simple correct answer: Do not remove selected options from the ...
Kolja Sam's user avatar
  • 1,235

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