Hot answers tagged forms
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?
...
14
When soliciting donations on a website, should you start by providing a box for the donation amount?
This kind of change typically need A/B testing before making a decision.
First thing, some people simply do not give, so do not lose time with them. Therefore you have to focus on people that donate.
Help them ! Give them 4 choices and a pre-selected one :
download bmml source – Wireframes created with Balsamiq Mockups
People who want to give ...
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 ...
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
...
8
Radio buttons will be the most clear, as far as indicating that the options are mutually exclusive. Your Option 2 check box is very unclear. It looks like you can do a search with or without promotions, but from your description you're either searching for reservations or promotions.
I suggest something more like this:
download bmml source – ...
7
With no further information this how you can improve your form:
No abbreviation (they can be obscure for the user)
No uncommon or useless symbols like [-] or [:] (useless is useless)
Clear understanding of what is selected by default and what can be changed (no ambiguity, no over-thinking)
download bmml source – Wireframes created with ...
7
Luke Wroblewski has done a lot of research on web forms.This article on dependent dropdowns would probably answer this question more fully for you.
He breaks selection dependency into a few different visual displays: page display, tabs (section and finger), section selectors, and exposing with radio buttons (below, within, inactive, and groups).
Depending ...
6
The user must feel that they are in control of the form and they should be aware how long the form is.
If it's a long form you can have titles at the top or the side marked as "sections" or "steps" and change the color (or change the font color)once they have been completed, like the example below that shows that the user is in screen 3.
But also you can ...
6
Why don't you try a more graphical approach ?
Use a calendar and put your times directly into context.
To repeat from a week to another, just add a "periodic" option close to the validation
6
You could indicate under the selected response the actual value - as in the image below, so that users get immediate (but non blocking) feedback in-place for the response they just selected.
If users meant to be very Satisfied they will likely spot the mistake and correct it
Also you might try not putting the header in inverse colours as that slightly ...
6
Situation n°1: The user knows where she can find a location: you can use a combo box instead of a drop-down.
You want you design the combo box adequattly so the user knows she has to start typing in it. You surely want it to be auto-complete.
Below, an example taken of Facebook profile editing.
Situation n°2: The user does not know the location she ...
5
You could initially just have the user select from the list of main checkboxes. Once they've chosen the boxes, they can press select to go to a list that contains the sub-topics.
download bmml source – Wireframes created with Balsamiq Mockups
and then once the user finishes selecting the main topics....
download bmml source
This ...
4
2 propositions
First one will work depending on the lenght of the text and the quantity of subtopics but it lets you see ALL of the checkboxes you have selected
The idea is that you uncheck what you do not want instead of checking it.
Second will work in any case, but will be less transparent
4
Be careful that this notation is not common for all users.
Simplified table of numbers formatting :
1000000 < nobody that cares about readability
1 000 000 < Sweden, France
1,000,000 < UE
1.000.000 < Germany
Is it going to be an amount of money ? Because if its so I would recommend you to input right to left (have a look to currency ...
4
Why should users make this choice when searching? As the form fields are the same, use Option 1 but without the tabs. That way you remove an unnecessary choice for the first step.
Instead, you can offer the option to filter the results on the result page.
You could use the two tabs there, selecting the more common one by default. Or you could provide a ...
4
Am using different messages in different examples, pick whichever one sounds better in your use case.
On the page where the user is redirected, display a message 'Your file is being downloaded. Check your download folder when the download is completed.' Be explicit to avoid confusions.
You can have a splash/overlay message saying 'Your file download has ...
4
Both of the options can provide good user experience if they are used properly.
In your case, the drop-down provides a better user experience for the following reasons:
The content of each form for the sections is the same, therefore there is no point in loading a different form for each "tab." Even if you treat it as a button, it will not trigger any ...
4
Tab is for navigation, drop-down is for input.
Though tab can be used for input like you have done, I feel it is not a good thing to do. I was confused by the first design, as to, what should be done here. Do I Need to fill the form on each and every tab?
I would go with the drop-down.
3
Even more than just applying formatting during input doing anything to actively change the input during an edit is extremely user hostile.
ex Your system limit is 1,000,000 and your user attempts to change a value from 230,015 to 330,015; begining by typing a 3 with the intend of following up with a delete to remove the 2. With an immediate force value to ...
3
Client-side validation can be helpful, but you need to be very careful how you implement it; it's easy to make it unhelpful to the user.
For example, if you silently ignore non-numeric characters, then a user quickly typing '12.34' might not realise that the field has ignored their decimal point and accepted the text as '1234'.
Another example; if you ...
3
To confirm sensible results, I have taken surveys that use anti-questions:
download bmml source – Wireframes created with Balsamiq Mockups
Number 1 and 4 are "anti-questions". If a survey taker answers in a corresponding way (more or less the same meaning) on those two questions, it is more likely that he or she has read the questions carefully ...
3
A radio button would be ideal, but you do not want to confuse the user by using check box and radio button in the same row.
You can de-highlight the options when any user is selected. Grey out the remaining options when any user is selected. (There is some confusion with this approach, since it might lead to the user thinking that his option is locked and ...
3
Since there are different type of roles it is probably a good idea to separate their management.
You could use something like that for roles that are unique :
I'm of the assumption that the administrator knows the users she want to be Finance and Legal.
download bmml source – Wireframes created with Balsamiq Mockups
If it is relevant you can ...
3
My recommendation would be to go with the email approach. That would be a one click process and it's already used by companies like TripIt to build up travel itineraries.
Other than that, I am not sure if you can insert text into the email sent by the online store, but if you do have access, you can have a simple text link which says:
"Copy the text of ...
3
The simple rule is that a password should never be stored in a retrievable format.
To be able to leave the password fields as they are, the password would have to be stored somewhere locally in a readable format - somewhere like the browser cache or a cookie. That is poor security as someone could later retrieve the password from one of these sources.
...
3
By adding the + sign, it is counter intuitive as the user would have to click the drop down, read through the options and determine none of the options listed apply. Then click the + and provide the value.
I would suggest adding a 'Other' or 'add new' entry in the drop down list. This would mean that the user would scan the list of drop down items, find ...
2
Here's a simple rule of thumb:
If there are only two options, and you need to force a choice, use radio buttons and do not pre-select one. It's ok to make an exception to the rule that a radio button set should always have a default selection in this case. See Luke Wroblewski's "Form Design" page 158.
But in your case, let them just click a checkbox if ...
2
Regarding the Next button on top or bottom: Do both!
Sounds like a great idea to split it into multiple steps, especially if you need to validate some parts before continuing to others. In that case, you will have to disable the Next button in the stepper, or in your custom navigation bar.
Starting from iOS, the Back button should be found in the top left ...
2
When soliciting donations on a website, should you start by providing a box for the donation amount?
A couple things I have noticed:
Many websites have multiple donation prompts on the home page. A button up top and a quick donation widget on the bottom (maybe below the fold). Just saying that you can have both the techniques in different locations.
If you are going with a donation widget (i.e. radio buttons with donation amount)
A couple notes about ...
2
When soliciting donations on a website, should you start by providing a box for the donation amount?
If you want to optimise conversion rates, use A/B split testing. This way you can test several approaches and measure the results. For Example:
A simple button that links to a payment page where the user can control amount and what it's used for
download bmml source – Wireframes created with Balsamiq Mockups
A choice of multiples like ...
Only top voted, non community-wiki answers of a minimum length are eligible
