Hot answers tagged input-fields
78
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, ...
41
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 ...
33
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?
...
31
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 ...
25
Because this behavior is rare and therefore unexpected, it will surprise most novice users, which can cause them to misunderstand how to use the interface, and interfere with usability.
(An example of this interference might be if the user fills out the field and presses tab, while you have auto-advanced, and while they think they are typing in the next ...
24
The standard is that the light source is at the top of an item, as this is where light sources are usually located in real life (the Sun, ceiling lighting). Items lit from below or on top appear unnatural.
Lighting and shadows help controls like buttons look like buttons, and that's what they should do. Whether the light comes from top or a little to the ...
23
Having a blank field that means that all Organizations/Locations can access the item is really confusing. There should be a default that says "All Organizations" and "All Locations". It can be shown if the value is Null, if that is appropriate for the underlying code, but it needs to show the user what is going on. Changing the code to not confuse the ...
20
The general practice of lighting from some modest angle left of completely overhead is old and practical. Renaissance painters for instance, as they became more scientific about depth perception, often chose this lighting technique.
There are a few reasons for the effectiveness of the "just-left-of-noon" light source, I think:
As others stated, and ...
20
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
...
14
It's hard to answer the question without seeing more of the design scheme, but I'll give you the guideline anyway.
Your question is about a problem of affordance. Affordance is a visual cue that implies action. For example: a thin slot in a soda machine indicates the place in which the user should insert their coin, and the pull lever in a car's door ...
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 ...
12
With one of my previous assignments, this issue came up with our users. It turned out frustrating for both beginner and advanced users. Here are some major issues with auto-advancing:
Not everyone looks at the screen while typing. They may not realize that they are in a new field and will type erroneous values. This happens even to people who are aware ...
12
It is generally accepted (and well proven) that shorter forms are completed more often than longer forms (with all else benig equal of course). However there are exceptions where some information is expected by customers, and leaving it out leads them to question the validity of the form.
'Shorter = better' is a good starting hypothesis, but one that you ...
12
What is the context of your application? Context really matters for dates. Consider the two following situations.
A budgeting application where users plan spending for future years
A college reunion signup where users enter their graduation date
Clearly if people are planning, they would be annoyed to get a date in the past and if people are entering ...
12
Regardless of the solution criteria, why not populating the field with a default value in grey? Telling your users what the field actually does without their input. If they're happy with it they'll move on, otherwise they'll replace it.
As per the default criteria, I would choose the less painful i.e. "As a user the less input I have to provide the better I ...
12
It does need a label, not just visually for people viewing the site but for people using assistive technologies (screenreaders etc). If there is no label then people visiting do not know what the field is for, or what goes it it.
From W3C Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.
3.3.2 Labels or Instructions: Labels or ...
11
When no text, make the message simply inicate the max number of characters (no mention of the number remaining.
As you type, the number of remaining characters fades from grey to black (very subtle indication)
When you reach the limit, change the border to red; make any excess text a different colour; show a small error icon below and indicate number of ...
11
Removing it when you start typing is better
Depending on how the focus was moved to the input field, the user may not necessarily see the placeholder text before it quickly disappears.
Yes you might read it before you manually click in the field but perhaps not if you happened to tab into the field from the previous input.
There's also the possibility ...
11
Fields should generally be an appropriate size for their expected input, which may well mean that one field in a form has a different width to another field. The size of a field provides a useful clue about the information that should be entered into it. For example, if you're asking a user to input a postcode/zip, a field that is 20 characters long would be ...
10
We had the same question and after a lot of heated discussion we decided to not format while the user was editing.
While the user type he can add grouping or decimal separators if he would like and as soon as he blurs we add them if the user didn't.
so the user can type
100000
100,000
100,000.00
100000.00
but as soon as he blurs we format it as
...
9
Something I have seen code syntax highlighters do is to indicate long lines of code by changing the color of text that exceeds the limit, something like the below:
download bmml source – Wireframes created with Balsamiq Mockups
The advantage of this method is that it takes up no additional space. However, it doesn't give any indication of how ...
8
This is very dangerous ground.
The radio buttons not only make the input easier, they also serve as a sanity check for the user who gets a visual confirmation of the sum he typed in. I would bring them back. The new functionality you developed is excellent and it should stay. Of course, it should interact with the radio buttons, and once the user had typed ...
8
If you want email, use email.
That said, I find that people tend to forget which email address they used to sign up. Many people have multiple email addresses. So you have to clarify what it is you're doing.
Here's how I solved it:
8
Depending on the level of experience of your users, you may wish to be careful about how you ask. If you provide input boxes for "email address" and "password" then I wonder, if maybe there is a risk of some users providing their email and password.
It might also be good to give a suggestion somewhere on the page that this is a "new password for this ...
7
Your question highlights the grey area between "desktop" GUIs and "web" or "web app" GUIs. There is no real standard for showing web-app-like controls in a 3D space. Browser chrome controls, like radio buttons and pulldowns, have desktop-like properties, but links and tags and whatnot typically don't.
The old Apple Human Interface Guidelines (the basics of ...
7
You should always strive to provide some form of reciprocity. Meaning that if you are getting something out of it, you should let the other person also get something out of it.
My suggestion would be to make as many fields as possible optional. Then instead of nagging people to fill them in, incentivise them to fill in additional fields by giving them ...
7
The change to preserve placeholder text on focus in the recent Firefox 15 release confused me the first time I saw it. I actually thought the field was disabled. In Firefox, the default styling (text color) of placeholder vs. disabled is very similar, and unlike Chrome, there isn't a default focus highlight, so the main indication that the field is ...
7
The size of the input field is absolutely a cue to the user about the expected input.
I've observed this in user testing and it has been demonstrated in formal research also, e.g.
Denham, P. (2004) “The impact of space and survey format on open ended responses", published in Australasian Journal of Market & Social Research. Volume 12, No. 2, November ...
7
The size (length) of a field is a matter of usability in that it can provide a valuable affordance to the user.
Take the following example:
download bmml source – Wireframes created with Balsamiq Mockups
Even without labels you can probably guess what the fields are:
download bmml source
Obligatory Wroblewsky quote (The above example ...
6
I've never actually conducted any research, but I don't imagine it will matter so long as it's consistent, and the opposite side to that you dock your labels to. If you align field labels to the right and right-align your asterisks, you'll create an odd-looking ragged effect.
Apart from that, I'm not convinced it matters. Some might suggest otherwise by ...
Only top voted, non community-wiki answers of a minimum length are eligible
