Questions tagged [input-fields]
Input fields are several different controls such as textboxes, dropdown lists and radio buttons who reside in a (web) form.
74 questions
56
votes
4
answers
46k
views
Character limits on textarea fields - pros and cons and best practices?
Some of our form fields have character limits. We're debating whether we should reflect the current size of data entry, or to simply hard-limit and inhibit data entry beyond that size.
In HTML, ...
- 9,361
35
votes
4
answers
6k
views
Auto Advance to Next Field
When is it appropriate to 'auto advance' from one text field to the next, as in phone numbers and SSN?
- 353
41
votes
11
answers
46k
views
Mark or don't mark required fields if all are required?
If all fields in a form are required should they be marked somehow (eg. with an asterisk)?
I see this done a lot and find it redundant?
There could be a difference in big forms and small forms, but ...
- 1,108
26
votes
6
answers
5k
views
Combining all the address fields into one?
Both customers and companies want a quick and easy checkout experience. From what I've seen, a big UX bottleneck at checkout is the billing and/or shipping address(es) because there are so many input ...
- 2,325
3
votes
2
answers
332
views
How to set a quantity by entering an exact number, or a difference (add/substract amount)?
I have to design a form with one field being a quantity that represents the number of available items of a given product. I want to allow the user to modify this quantity in 2 different ways, in the ...
- 133
68
votes
5
answers
53k
views
Why aren't HTML5 typed number inputs right aligned, and should they be?
As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned.
I saw that ...
- 3,144
39
votes
4
answers
100k
views
What should the character limit(s) for first/last name inputs be? [closed]
We want to create input fields for a user's first and last names.
What should the minimum and maximum limits be, if any, and why?
- 391
37
votes
4
answers
4k
views
Where should the GUI light source come from?
I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top ...
- 9,337
32
votes
8
answers
14k
views
Is there a recommended size for search boxes?
Do users change their search patterns if the search is shorter?
Do users search less if the search box is too large?
The only article I'd found is a 2009 Smashing Magazine article:
The [Nielsen] ...
- 685
25
votes
2
answers
3k
views
Input Field Widths
In a form with several input fields, is it better to define the same width for all fields (in order to maintain alignment), or to have different sizes for fields that are intended for less data?
For ...
- 363
20
votes
8
answers
18k
views
Signifying to user that field is editable
I have a grid that has a bunch of data. Some of the fields are editable and cause a postback updating the data. What are the best ways to show that to the user?
i.e. Is there a best practice for how ...
- 303
17
votes
5
answers
10k
views
Should I make space for error messages in forms?
I'm designing an mobile app for both iOS and Android, which includes a form. The form has several required input fields that the user needs to complete before continuing.
If the user clicks Continue ...
- 211
15
votes
1
answer
3k
views
Time (duration) entry in webapp - pros/cons of various designs
In designing a way to enter time durations in a website, there are various proposals below. What are the pros/cons from a UX standpoint for both mouse & touch uses.
Yellow boxes show input ...
- 311
13
votes
4
answers
28k
views
For required fields, should we add the red asterisk before or after the field label?
Should we add red asterisk before or after the label of required fields, i.e., to the left or the right of the field name? My boss prefers to add the asterisk before the labels, but I like to add them ...
- 233
11
votes
5
answers
8k
views
How to improve usability of a form with lots of fields
I'm tasked with re-designing a HTML browser-based form which is completed by technicians as they complete various parts of a task. At various stages of the task they return to this form and fill in ...
- 215
10
votes
1
answer
3k
views
Why do so many forms use input masks in for input fields?
To be honest, I find input masks annoying. Different masks on different sites sometimes work differently, such that their behavior unpredictable and it actually makes me take more time to type out ...
- 105
10
votes
3
answers
2k
views
What is the rationale for the design of search input fields?
Having read through a whole bunch of literature on search behaviour and looking at different design patterns, I am interested in the large variation of search input field on the web. Specifically, I ...
- 27.7k
8
votes
1
answer
4k
views
Placeholder : field label or sample data?
I am designing a generic form. Every input has a label positioned right above it.
My question is about using input fields placeholder :
Should they be a reminder of the label (Ex : Label : Username ...
- 109
7
votes
3
answers
854
views
Should I vary input field lengths in a single page checkout form?
I am currently designing a single page checkout form. I would appreciate some feedback on the lengths of my input fields.
In the Billing and Shipping sections, I have staggered the length of the ...
- 71
6
votes
1
answer
2k
views
Accessibility of in-field labels and help text labels in input forms
Many newer UI interfaces have a preference for input field labels or help texts to be contained within the UI component itself instead of implementing them as separate labels. I was wondering if ...
- 27.7k
5
votes
2
answers
3k
views
An alternative to Indeterminate checkboxes?
How best to display incomplete or indeterminate state?
Microsoft UI pattern has an display icon for this - a dark box within the checkbox instead of a check. http://msdn.microsoft.com/en-us/library/...
- 6,641
3
votes
3
answers
2k
views
A required field that isn't really required?
...the email field in my clients data entry system is required but users of the system are allowed to enter [email protected] if the customer refuses or doesn't have an email address. Is this best practice? ...
- 31
2
votes
1
answer
1k
views
User-friendly date interval/duration input
I'm building a configuration page for a web application and some of the parameters are durations. Most of these durations are in days but there are some that might be specified in weeks, hours, or ...
- 672
2
votes
3
answers
6k
views
Allowing the user to add input fields
I have a form where the user can input as many usernames as they'd like. I've decided to show the form with 3 inputs initially, to encourage the user to input more than one username.
When the user ...
- 23
122
votes
10
answers
65k
views
Splitting credit card number fields into four different inputs
I have previously been using 4 fields for the credit card number, splitting up each set of 4 numbers to make it easier to enter.
I am now thinking about having one field, which inserts spaces after ...
- 2,383
101
votes
12
answers
35k
views
Removing placeholder text on focus
Chrome, Safari, and Firefox 15+ remove the placeholder text after the users first key press in the text input field.
Opera, IE, and Firefox 14 and below remove placeholder text immediately after ...
- 3,932
60
votes
11
answers
9k
views
Why is the input field always at the bottom of a chat window?
It seems like the input field for writing your messages in a chat application is always placed at the bottom of the conversation.
Do we have any argument for this seen in a UX perspective?
56
votes
11
answers
11k
views
"Typocaptcha" - an alternative to CAPTCHA? [closed]
We all hate CAPTCHAs, but to some applications they're a necessary evil. Today I wondered if there's a better alternative we just haven't thought of yet. I considered the dilemma: how do you create ...
- 1,069
47
votes
6
answers
5k
views
When the username is an email address should the field be called 'username' or 'email'?
When the username for a service is an email address should the field be called 'username' or 'email'?
- 553
43
votes
3
answers
5k
views
What do you call this input element where a focus will automatically be transferred to next text field after being filled?
I have seen this input element often when inputting a serial number or similar code. Each text field accepts N characters, after which focus is automatically transferred to the next field. Pressing ...
- 548
41
votes
7
answers
134k
views
How to avoid 12:00 AM midnight/noon confusion in a time input field?
I recently specified the wrong deadline for an assignment, for a "dropbox" in the D2L course management application. I was trying to choose 12:00 noon, and the time entry field showed 12:00 right ...
- 513
32
votes
6
answers
10k
views
When and why should date pickers be used?
The above screenshot is from an airline's website.
Date pickers are somewhat common on websites - they're especially common for circumstances when you're booking events. Most often when they appear, ...
- 882
21
votes
6
answers
68k
views
Using asterisk (*) vs required [duplicate]
For a long time, the norm was to put a red asterisk "*" after the field label if the field was required. Now I am observing a shift into replacing the asterisk symbol with the word "(required)" after ...
- 547
17
votes
5
answers
3k
views
Should input fields be cleared out when the user selects them?
I have a few input fields in my form with some default values (numbers). Please note, they are not just placeholders, i.e. they can be used as is, if they are not changed.
I was wondering if I should ...
- 273
17
votes
6
answers
4k
views
How to convey a true/false value to a user?
I'm developing an application where users will be allowed to create custom fields that are part of a record, in addition to the fields that are provided by default. Users will be able to choose names ...
- 285
17
votes
6
answers
9k
views
What is the best way to show conditional fields?
We are creating a desktop app where (business) users can enter contracts. The issue is that the contract form contains a very large number of fields, with some of them being conditional. An example ...
- 476
16
votes
6
answers
3k
views
Case-study for hiding the optional fields?
I am currently designing a web form for the Online Travel Insurance System and I am thinking of hiding the optional fields since there were so many of them. Like the image below.
I put a Show More ...
- 1,615
13
votes
5
answers
2k
views
Does the height of an input field affect UX?
Overview
I'm working on a project that includes an in-browser Chat feature. We're looking for ways to improve the UX.
Problem
Today, our online chat UI offers a textareathat allows customers to ...
- 1,596
11
votes
5
answers
5k
views
What is the term for a numeric input field of a specific format?
There are new HTML5 input types being defined for commonly used numeric input types such as date, time, telephone number, etc. These terms refer to a specific input format based on the type of numeric ...
- 27.7k
10
votes
2
answers
668
views
What's the official name of concept of input boxes with tags?
I'm looking for an implementation and the (official) name of this kind of control where it's a inputbox where we can add multiple tags into it. By example, it is used in JIRA like this capture (and ...
- 203
9
votes
4
answers
2k
views
Is it good practice to only accept numeric keystrokes in number-only fields?
I have a form that only takes in numbers as it represents a dollar amount. Currently, the form only accepts numerical keystrokes. Is this good practise?
- 287
9
votes
3
answers
4k
views
What is the best way to display nullable bool value as UI component?
There are common pattern for nullable (three state) bool checkbox
But in real life, if user see only indeterminate (null) state and don't see checked (false) it often confusing that indeterminate is ...
- 193
7
votes
1
answer
782
views
Many-to-Many associations - Edit in place or on new screen?
I am trying to design an interface to do two things:
Create Items and Objects
Create links between Items and Objects (in a many-to-many association)
An Item is a simple attribute that must be ...
- 773
7
votes
2
answers
3k
views
Inline validation icon usability
I have been looking at the styling for validation of input forms of Bootstrap, and wondered if there was a specific reason for where the icons used for inline input validation is positioned.
I ...
- 27.7k
7
votes
3
answers
5k
views
What's the best way to show form labels that are longer than the corresponding fields (which require a short input)?
I'm having trouble with labeling of short input fields. Some labels have standard 280px width approximately, but others are quite small in order to offer clues on the expected input (characters).
I'...
- 251
6
votes
4
answers
5k
views
'Same as billing address' checkbox - Ticked or unticked by default?
I'm working on a subscription user journey. Most of the subscriptions are for digital products. However, a few of them may have a print included in the package and we would need a delivery in this ...
user25518
6
votes
5
answers
3k
views
Inputs, does removing borders except the bottom one have any benefit?
Until material design, form fields always have a border all around. For me, it's a cultural habit. Users use these borders to identify the field in the page. Google itself, on Gmail, Google Search... ...
- 163
6
votes
8
answers
6k
views
Is it a "Natural language" form a good practice?
A good UX for a form is one that makes it easy and fast to use.
An experimental form like this, that uses natural language instead of the usual form display seems to be simple to use and creative, but ...
- 4,521
6
votes
3
answers
2k
views
Address Autocomplete - Shouldn't city come before street?
Most address forms in e-commerce (or anywhere) look like this:
The street always comes before the city/postal code. I guess that's simply because that's what we're used to. The accepted answert to ...
- 6,847
6
votes
1
answer
3k
views
How to indicate on a form field that additional important documentation is available?
We have a primarily form-based application. Most field labels are hyperlinked to a formal instructions document via context-sensitive help links (the mouse cursor changes to show this.) This works ...
- 214