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 ...


83

There is no universally good answer to this question, but there are definitely two pros of YYYY: by showing the two leading numbers you can easily tell e.g. 1911 from 2011, you know exactly where the year is in cases when the year is from the range XX01-XX12. In other words: Notation Possible interpretations: ----------- ------------------------- 09/...


77

I don't have a pointer to published research - but in my experience US folk will always assume the US MM/DD/YYYY format unless they are knowingly using an non-US site, and are already aware of the potential differences. If you have to use numbers only then the format that causes least confusion across cultures in my experience is YYYY-MM-DD since it ...


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? ...


64

I agree with you that the first is best. Good UX is largely about reducing the cognitive load of a user. (###) ###-#### is a format that, in North America, is unique to phone numbers, so I know as soon as I see the format that this is a phone number. At first glance, if I just see {several numbers} {hyphen} {several numbers}... well, this could be a social ...


64

As a rule, it's never OK to use a 2-digit year. If you can prove that using a 4-digit year will cause thousands of babies and cute fluffy bunnies to die horribly, that could be an exception to the rule, but probably not. I have seen hundreds of costly process failures simply because a programmer thought it was perfectly OK to use a 2-digit year or a local ...


53

Another option would be for the text field to ignore all non-numeric characters, and display appropriate formatting automatically. For example: User enters '3' -> Text field displays '0.03' User enters '4' -> Text field displays '0.34' User enters ',' -> Text field displays '0.34' (no change) User enters '5' -> Text field displays '3.45' User ...


51

Well, you can write the predicted year of death based on user research, or you can say "TBD" :). And more seriously - it would be a good idea to develop two templates for this item, one for dead presidents and another one for those who are still alive. The "alive" one shouldn't contain the "Died" field at all. The downside to this is that it may not be self-...


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? ...


36

Single column layout you have is definitely better, but there are several other options. I'm not going to say my approach is the best. Just try to apply it to your problem and see the result. Basically, there are several ideas: enhance readability try not to mix field names and entered values optimize form length introduce some logical structure (if ...


36

Italics are a known problem for some people with dyslexia and the general advice has been to avoid italics (particularly large blocks of italic text) and instead use bold for emphasis. The British Dyslexia Association says: Avoid underlining and italics: these tend to make the text appear to run together. Use bold instead. UX Movement touches on this ...


36

Let's talk for a minute about user expectations and magic. A user comes to your tool with certain expectations, and not every user's expectations are the same. You're seeing this first-hand. Culture, up-bringing and life experience all shape how a user will interact with a tool, opening a vast array of expectations to potentially meet. One expectation ...


32

Teacher: How to visually format questions/answers to easily follow the story? Student: I think that using "T" as prefix for Teacher and "S" as prefix for Student may help. You may also use the full word (see also) at the beginning. Do not omit this if roles can be inverted or the flow will be soon unclear (unless this is your creative intent.) Consider to ...


29

The problem at hand does not seem to be a question of correct asterisk marking rules, or a literal interpretation of metaphor behind the radio button control. Rather, the conflict from your description appears to be this: While the two radio button selection instances are marked as required, the requirement is already fulfilled by pre-populated selection. ...


27

Show the user what's expected visually and show how the machine interprets the user's input. My contribution to the brainstorm would be: Use a reference to the cheque-form of the old days :) Let the computer ignore all comma's and periods that the user enters (for that matter: non-numerical characters) Show (if you're able to) an image in the background ...


25

You can do whatever you wish basically, as long as you provide a way to verify the input. I would personally dynamically display --next to the input field-- the amount at least partially written out, like [ 123.45 ] (123 US dollars, 45 cents) [ 123,45 ] (123 US dollars, 45 cents) [ 123,456.78 ] (123 456 US dollars, 78 cents) [ 123,456 ] (123 456 ...


22

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 strip the spaces out of the submitted string before checking whether the resulting string of digits is or is not a valid credit card number. If the user chooses to ...


21

Consistency is key here I think. So, for currency, always use two decimals and align every number to the right. It took me some time to make sense of the table you displayed in your post. I would go for something like this: tender qty amt 5.00 1 5.00 10.00 1 10.00 100.00 1 100.00 0.05 1 0.05 0.10 1 ...


18

I would suggest using the Microsoft Windows User Interface Text formatting guidelines. In short it says: Use title-style capitalization for titles, sentence-style capitalization for all other UI elements. Exception: For legacy applications, you may use title-style capitalization for command buttons, menus, and column headings if necessary to avoid mixing ...


17

I vote A. I read the result/s initially as result per second. Result(s) seems more natural, but I would prefer the option were you'd detect if the number is larger than 1 and change result to results. Maybe take a look here: english.stackexchange here the (s) seems to be the standard. Another option is to put it like this: Matching results: 1 With ...


17

The study list linked to in the blog mentioned by Matt Obee is here http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf It's an interesting paper and the conclusions are worth working through: The main conclusion is that font types have an impact on readability of people with dyslexia. As they do on readability with ...


17

Take this example: 01/02/07. At first look, it could be anything. Now, let's make it YYYY: 01/02/2007. Quite a bit of difference, right? This is one of the main reasons for the YYYY format. Very few datapoints are in 2-digit / 2-digit / 4-digit format, and this helps avoid a bit of confusion.


16

Good question... I don't think you ever will be able to get it right, so it's better leave this responsibility to the user. You can trim spaces, of course, but you shouldn't mess with the case. The only foolproof formatting you could do, is to make everything uppercase. This might be handy for internal use, but not as a correction of the user's entry. ...


15

A poke around Google suggests that most guides on usage of the symbol agree with your intuition. This article emphasizes that you should use a non-breaking space to avoid the symbol and the copyright holder being on two different lines or pages. Their reasoning is as follows: Must you put a space af­ter the copy­right sym­bol? No, but se­man­ti­cal­ly, ...


15

Show all items on a single page in a vertical list This obviously has limits as it is almost never a good idea to display thousands of items at a time. Though putting a list of a hundred items on a single settings page is fine especially providing some way to quickly filter the list at the top. Chunking them into groups as you have done is a good first ...


14

Firstly, the thousands separator is not common among all regions of the world. When in doubt the recommended solution (SI/ISO 31-0 standard) is to use a non-breakable thin space as a separator. You also have to take into account that not all countries group by thousands. From Wikipedia: In China, comma and space are used to mark digit groups because ...


14

Single column layouts are better because: They are more streamlined. Inline suggestions can be provided if needed. The labels are more scan-friendly. They make the user think less by providing a definite order to fill up the form. Remember, the user always says: "don't make me think!"


14

I guess one can always find special cases, but in the general case, I would go with rounding the correct sum, not summing the rounded numbers. The point of rounding is to make a number easier to digest at a glance. And while we are aware that there is a tradeoff due to lost accuracy, we want to keep the accuracy loss as small as possible. If you were to ...


14

Highlighting is more relative than absolute Non-designers often don't realize that the style of highlighting is much less important than the relationship between the highlights and non-highlights. There are all kinds of approaches to creating highlights. One might use font-color, background-color, size, font variation (e.g. italics, underlining) and ...


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