109
votes
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 ...
- 3,353
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 ...
- 2,706
60
votes
Accepted
Telephone input (+ country code)
Make it effortless for the user.
Firstly you could show the country code auto-selected based on their geographic location.
If that's not possible, make the back-end logic in such a way that it would ...
- 3,599
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
...
- 37.3k
41
votes
What is the best UI for allowing the repeated selection of the same item from a list?
The type of UI/UX you are using does not correspond to the functionality you need. In fact, if the items in the left list are to remain, the button to return them from the right list makes no sense.
I ...
- 18.3k
29
votes
Accepted
How to represent an abstract data type in a form?
Simply put: DO NOT USE TABS.
This is not what tabs are meant for, so just use the box you have. Once the user selects the type, show the fields you have in second tab, only that right below the ...
- 37.3k
29
votes
Telephone input (+ country code)
Seems like a simple solution: allow the user to search either by country name or code, including shortened and alternate versions of the country names. Just put a smaller searchable input before the ...
- 844
21
votes
What do you call this input element where a focus will automatically be transferred to next text field after being filled?
Input Mask
This would be an example of an input mask implementation
An input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in ...
- 15.3k
16
votes
What do you call this input element where a focus will automatically be transferred to next text field after being filled?
I've known it as auto-tab, but avoid using these if you can!
They have bad UX -- if the user makes a mistake in the last character of an input, they can't just hit delete (the expected functionality ...
- 639
15
votes
Accepted
Dealing with dozen digit number inputs
Using words isn't a bad idea at all. It's the most 'easy to understand' way for everyone.
You can make a dropdown list after the input, containing:
No unit
Thousand
Million
Milliard
The "no unit" ...
- 2,610
15
votes
How to represent an abstract data type in a form?
To expand on Devin's point ...
Make the change obvious
Tabs mask the state change, asking users to know what you want without the help of visual cues. When an interaction changes the state of some ...
- 21.3k
14
votes
What is the best UI for allowing the repeated selection of the same item from a list?
If the order of the selection is not relevant, only which items are selected and how many of each, then it may make more sense to keep only one line for each distinct item, and a quantity.
The obvious ...
- 2,706
13
votes
Telephone input (+ country code)
Is there a reason for you to suspect that your users don't know their own country code?
Are you certain that your country code list is all-inclusive and self-healing? By self-healing I am referring ...
- 5,658
12
votes
How to enable users to insert an infinity number
This seems very close to a very common pattern for pagination by limiting searches per page, e.g. datatables:
In your case you only want to display the first page, but it's still pretty much the same ...
- 7,228
11
votes
Accepted
Best way to make many boolean selections
Well, checkboxes are difficult to use when there are many due to their size. In this case, I'm not sure checkboxes is the right UI element. You're asking people to select products, not options (which ...
- 1,175
10
votes
How to enable users to insert an infinity number
In scenarios where a setting of zero does not make sense, zero is sometimes used for infinity. It does not really make sense but I think I've seen it in more than one application so as a user I'd see ...
- 217
10
votes
How to enable users to insert an infinity number
Given the OP's wording of his question, I would implement Joel Tebbett's first suggestion this way:
This would adhere to the perception of heirarchy as noted in his second option.
- 201
10
votes
Accepted
Designing a mandatory input field with options
Talk to your users!
Options 1,2:
A better option:
Talk to your users, ask them to enter the Segment ID and let them know right away that you can auto generate it for them in case they don't have it....
- 1,665
9
votes
Accepted
Is there a valid reason to allow leading or trailing spaces in user input?
Depends on the type of form input:
Usernames/Emails
Trim away. Especially if you accept mobile input, as some auto-complete keyboards insert a trailing space after emails.
Passwords
As mentioned ...
- 3,848
8
votes
Accepted
Allowing the user to add input fields
Why did you say its a poor interface? Have you tested this with your users?
One minor suggestion though, I would prefer to place the add button below the fields. The add button in your design gives ...
- 1,797
8
votes
Accepted
Do users understand when a title is a button
I would never understand that the [Filter by] and [Sort by] elements are clickable if you did not write it. It is not a good approach.
However, even at the end they are a little bit confusing to me. ...
- 13.9k
8
votes
<input type="number"> or <input type="text"> for entering an ID?
I would say use type="number"
and then remove spinner with
-webkit-appearance: none;
-moz-appearance:textfield;
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
...
- 574
8
votes
Accepted
Best input method for 5 or 9 digit ZIP codes
Adam Silver has recently written an excellent article regarding multiple inputs versus one input.
Short summary:
While using multiple inputs can be helpful, most of the time it’s completely ...
- 406
7
votes
Accepted
<input type="number"> or <input type="text"> for entering an ID?
The WHATWG HTML specification has a note about exactly this situation. According to that note, this is not an appropriate use of input type="number".
The type=number state is not appropriate for ...
- 796
7
votes
Help text for 4 digit year
The easiest way might be to provide the help text next to the label, and provide simple validation for when a user fails to input the required pattern.
I don't believe "4 digits" is necessary or ...
- 19.5k
6
votes
What's the best and most intuitive way to have a user enter a height value in feet and inches into a web form?
Ultimately, the User portion of UX will depend on your users.
The best approach will change based on conditions like:
What deployment targets you're looking to support / optimize (touch vs keyboard)...
- 669
6
votes
Avoiding offensive language in publishing App
Here's a radical concept: Human filtering.
Tell the client. "You want granular and subjective control of content? Humans do that best!"
The very nature of subjectivity is that it's subjective. An ...
- 2,258
6
votes
Avoiding offensive language in publishing App
The seeming simple task of not allowing rude words and phrases is actually incredibly complex to solve with just UI.
Donald Norman stated that if an error is possible, someone will make it. And I ...
- 374
Only top scored, non community-wiki answers of a minimum length are eligible