UI - Forms
This note is about using forms as user interface elements. Web authentication is related, as most forms online are login or registration forms.
Forms should be short and simple to fill. Long single page forms are simpler to fill than multi-page form. But long forms scare users more than short looking multi-page form. Which is better depends on context. I usually start by creating a multi-page form so that the first few steps are minimal while showing progress as percentage at least after each step.
Optimal field count is under 4, but the less is better. Fill rate is lowered because of too many fields.
Give users hints what to input to each field. At least include labels. Always tell user what to do, not what not to do.
<input id="phone" name="phone" type="text" aria-describedby="phone-hint">
<span id="phone-hint">Please enter digits only.</span>
Phone Number (+358 XX XXX XXXX)
+----------------+
| |
+----------------+
Avoid showing auto completion on the field itself. Prefer adding text field autocomplete suggestions as a list below the field that can be accessed by clicking, pressing enter or by pressing down and enter.
Don't always give a default choice. When you want user to decide between two options, make user to make a choice. Having two states does not always mean that you should be using a checkbox.
// bad
[ ] Join mailing list.
// good
Do you want to join our mailing list? *
( ) Yes please. ( ) No thanks.
Don't make users to format strings. Write few lines of code to convert the most frequent errors.
Remove spaces and dashes from phone and credit card numbers.
Group related fields together. When you have more than 7 inputs, you may want to group fields e.g. address information, credit card information. This is usually done by whitespace.
<form>
<fieldset>
<legend>Recipient</legend>
<!-- Recipient related inputs. -->
</fieldset>
<fieldset>
<legend>Transfer Details</legend>
<!-- Transfer detail related inputs. -->
</fieldset>
<input type="submit" value="Submit">
</form>
Prefer using separate label for fields. Avoid using placeholder text inside the field. But if you end up using placeholder text, make sure that the placeholder text looks totally different from the user written text.
// bad
+----------------+
| Name |
+----------------+
+----------------+
| Phone Number |
+----------------+
// good
Name
+----------------+
| |
+----------------+
Phone Number
+----------------+
| |
+----------------+
Place label above the related field. More room for translations, cleaner and requires less styling.
// not as good
+----------------+
Name | |
+----------------+
+----------------+
Phone Number | |
+----------------+
// good
Name
+----------------+
| |
+----------------+
Phone Number
+----------------+
| |
+----------------+
Guess information as much as you can. But don't enforce it, of course.
// You can guess city or country from zip code.
20540
Turku, Finland or Washington, United States
// You can guess credit card type by its number.
4XXX... Visa
51XX, 52XX, 53XX, 54XX, 55XX... MasterCard
6011XX, 644XX, 65XXXX... American Express
34XXXX, 37XXXX... Discover
Allow switching fields by pressing tab.
Allow submitting the form by pressing enter.
Never opt-in for email newsletter. People will hate you for it. Problem is not that you customers will stop using your service, problem is that customers will swich to an alternative that they can trust.
Mark which fields are optional and which are required. It's better to mark all optional fields as "optional" than to mark all required fields as "required". Studies have shown that marking optional fields makes users feel them more frequently than by marking required fields.
Consider having all required fields marked with a red asterisk (*). Also have legend what the asterisk means in some corner for less tech savvy users. This is the only standard way of indicating required and optional fields.
<input type="text" name="username" required="true" aria-required="true">
Username *
+----------------+
| |
+----------------+
Don't ask for phone number. People don't like giving out their phone number.
Errors
Error messages should include instructions how to correct the error. More about how to write error messages in copywriting notes.
Place your error messages well. Best place for error messages is a small window pointing to the label or otherwise showing the error close to the label. Avoid using error summaries that contain all errors in form. Remember to place tooltip content in HTML, before the related element, for screen-readers.
Highlight fields with errors. Consider highlighting the related field border in orange or yellow. Consider highlighting the related field background in orange or yellow. You may use red but that is usually too negative.
Error checking should be done twice. Error checking should be done during filling the form and finally on server side.
Input Helpers
Common input helpers:
- Auto Complete: After each typed character, show possible completions under the input.
- Live Suggest: Show popular suggestions, like auto completion but may contain synonyms or whole sentences.
- Live Search: Show search results in real-time as user types the keywords.
- Refining Search: Allow filtering search results by additional radios and checkboxes.
Use arrows and enter to select suggestions and completions. Allow choosing main auto completion value with tab. Live suggestion should allow selecting the matches with arrow keys and choosing it with enter.
Avoid sliders on refining search. Sliders are tedious to use, use a dropdown select in stead.