Skip to main content
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.4k
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,694
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
84 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,373
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

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
61 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,654
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
52 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
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,835
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
31 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,934
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.7k
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.9k
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,111
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
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,245
20 votes
Accepted

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

Autofocus is a tool that is wildly helpful if done correctly and it is appropriate to the situation, but there are many, many things that can go wrong. If your implementation doesn't avoid all of ...
HappyDog's user avatar
  • 487
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

How to improve usability of a form with lots of fields

Assuming we cannot split the form on multiple pages, here are some guidelines how to make it more usable: 1. Divide the web forms on sections Grouping related input fields and visually distinguising ...
Kristiyan Lukanov's user avatar
18 votes

Is password-unmasking worth the potential security downside?

I'm a little surprised the pattern is so alien to you, and have to agree with the others on your team on this (sorry). Providing a visibility toggle for the password is a fairly common pattern across ...
Ro Achterberg's user avatar
17 votes

Customers using the New Order option when they should use Reorder

Why this is happening In a word (because, well, there is a word that's causing it—or rather three together): jargon. It may not seem like it… both words involved are common language words. But that ...
taswyn's user avatar
  • 3,097

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