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 ...
user avatar
  • 37k
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 ...
user avatar
  • 2,612
139 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 ...
user avatar
  • 40.4k
109 votes

How to enable users to insert an infinity number

How about using something like this?
user avatar
  • 1,142
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
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 ...
user avatar
  • 5,395
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 ...
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 ...
user avatar
  • 3,333
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 ...
user avatar
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 ...
user avatar
64 votes

Two forms to choose from, choose only one

You could use an accordion. Here's an example of one I've used before:
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 2,634
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 ...
user avatar
  • 2,306
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 ...
user avatar
  • 21.1k
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 ...
user avatar
  • 33.1k
50 votes

How to tell a user that a search is being performed when they stop typing

I would suggest a miniature progress wheel at the end of the input that only displays once a search is going on. I've seen this behavior before (I believe on user name boxes) and I believe that ...
user avatar
  • 747
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) ...
user avatar
  • 6,726
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. ...
user avatar
  • 21.1k
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, ...
user avatar
41 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 ...
user avatar
  • 15.2k
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 ...
user avatar
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 "...
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 ...
user avatar
  • 3,540
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 8,853
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 ...
user avatar

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