247

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 load to the user. "Do I need to manually jump to each field?" "Will the system do it for me?" "What if I hit tab myself but the form automatically jumped - will ...


143

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 covered in the other answers. Also, a CC number isn't four 4-digit numbers, it's a single long number. Some credit cards don't even have groups of four, in ...


129

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 comparability and scannability. However, sometimes number fields are unrelated or are mixed with text fields in a form, so left-alignment may promote better visual ...


108

How about using something like this?


97

Interestingly the w3 Spec for placeholder allows for either behavior: User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise). But, functionally speaking, ...


95

Call it the email address. It's unambiguous. A user returning to your service will always remember their email. They may not remember if they configured a special username, however.


94

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 doesn't have everything for every scenario. Don't be afraid to part with them. Working off of your blue background, I quickly landed on an "alerting" color that ...


87

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 breathing space + visual design to make it easier on the eye. The problem with the wireframing tool, we aren't able to choose different colors to make options ...


85

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 that the user might want to add something to that query. For example, if I search for American Psycho and I find that it's a movie with amazing ratings and I want ...


80

Add a checkbox labelled 'Limit number of queries'. And only make the input field active if this checkbox is checked. Alternatively if you must use the infinity icon, keep it simple and place it to the right of the '+' button, in the same style. This would also adhere to the perception of hierarchy. i.e. the left button decreases the value, and the right ...


72

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 Google is using an error model for common typos (letters replaced by those adjacent on the keyboard etc.) If you program your computer to only consider anagrams, ...


66

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 tedious to have to copy-paste four times instead of one. I'm assuming here that your form won't fill the 4 fields if I paste 16 digits in the first one. Will it? ...


65

People read from left to right and from top to bottom. Chat applications normally place texts from top to bottom. The newest chats placed at the bottom. Placing the input at the bottom, therefore, is logical. Edit With this answer I didn't mean ALL people. For example, Arabic is read from right to left. But considering this websites' audience and the OPs ...


65

You could use an accordion. Here's an example of one I've used before:


64

</textarea> placeholder="Enter your next post here!"> <textarea name="postText" rows="3" </div> top. to put the input at the it would make sense from bottom to top, read a chat window In a world where we <div class="post">


63

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 by comparing it to known words. Which defeats the whole point of having this extra barrier. Secondly, how would this affect folks with dyslexia or other ...


60

I would progressively reveal details to a user as they need them. Consider what would your smart defaults would be? Are there assumptions that you can make that would get most users most of the way there? A couple you could consider: Sunday and Saturday are typically off days for US workers. Is this true for you? If so, then let's go ahead and default them ...


60

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 into a command prompt, the previous command you typed is still there. Although you state that it's a long ID that the user probably just pasted in have you ...


54

Emails were never intended as a form of chat type messaging. Remember that they are electronic versions of mail, so trying to modify them to be something they weren't designed for is a mistake. As to the reasons why we write the subject line first: The subject line is part of the header of an email (see the original RFC822 and the newer RFC5322), and ...


53

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 extra text for the sake of clarity. This does not always hold true with younger markets. Get into your customer's state of mind ... "Reorder" means "place ...


51

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 Cut & Paste Auto tab (form field) script Auto Tab HTML Input Fields And even Microsoft dev calls it that way.


50

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 progress wheels are so clear that everyone will understand that something is going on. Once a user types, hide it briefly (or grey out to reduce flicker) and then ...


45

For readers: You need to know what the stuff is all about. For writer: You need to know what the stuff you are going to write about.


45

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. The test designer must have a system in their mind for how score and rank relate — obtuse though it may seem. Dig deeper and see if there isn't a ...


44

I would side with having the placeholder text show as long as possible without getting in the way. The way it is done in Chrome is better, in my opinion. I've found ways to get around this on all browsers, however. What I've done in the past is remove the placeholder text on focus, but also re-displayed that text by making the label--which is almost ...


43

There is some interesting pedantic information on the weirdness of midnight: http://en.wikipedia.org/wiki/Midnight Specifically, technically, at midnight, it's neither am nor pm. But merely the instant of transition between the two. Some ideas: Use a 24 hour clock. Perhaps with 12 hour correlations in parenthesis: ... 10 11 12 13 (1pm) 14 (2pm) etc ...


43

Don't do that, there are different approaches to filling out values, and for some it would be disruptive. For example if the user just wants to change the last digit... A good, non-disruptive alternative would be a small "clear input" button.


43

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, assuming the first and last letters are correct, given a word list file for the language" is probably so straightforward that it'd make a good puzzle for our Code ...


39

Do not update what users enter when they're still typing. It fuddles up their ability to edit as they type, and it makes the field a moving target. If you were to type 25000 straight, no typo's, no backspacing, it might make sense to format it right when you're done. However, what happens when you enter a 0 between the 2 and the 5? Or when you hit backspace? ...


39

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 Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary ...


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