Download Web Forms

Web Forms
A User Interface Nightmare
Web Form Design
Overarching questions
• What is the user community?
• How tolerant, or sophisticated, are the
users?
Web Form Design (2)
Technical questions
• What should the Tab key do?
• What should the Enter button do?
• Should some fields be partitioned into
subfields, e.g. City and State in two
different text boxes?
Web Form Design (3)
• Should the form use automatic advancing
for fixed length subfield entry?
– For example, 610-519-6000
– Pluses: fewer keystrokes,
– Minuses: error correction, user’s mental
model
Web Form Design (4)
Field types
• Name
• Address
• Fixed length numeric
– Telephone number
– Credit card number
– ZIP + 4
• Date
Address Entry
•
•
•
•
•
•
•
Addresses in free format vs. multi text box entry
Autocomplete (or autofill) of city names
City and state names defined by zip code
Cities without states, e.g. London
Easy selection of state or country names
Confirm parsing of free format
Or use persistent identity
Date Entry
• Subfield text boxes
• Single field text box
– With separator
– Without separator
• Date format
• Specialized dates: e.g. expiration date
Name Entry
•
•
•
•
•
•
Title
Generation
Single name: Is it the first or the last name?
Initials
Name length
Culturally driven format
Web Form Entry
• Users say:
• GUEPs say:
• Design principles say:
– Choose the lesser of two evils
– Use a clear, short, neatly arranged statement of
purpose at top of form
– Tidy and organized design outweighs field ordering
– Use imperative language only for required items
Web Form Entry (2)
• Use a small number of input methods
– Five HTML form elements: drop-down list, radio
button, check box, dialog box, hyperlink.
– Scripted or programmed elements
• Keep option list short and sensibly ordered
• Offer common choices first. Cater to 80% of
users but allow the other 20% to have success.
• For long lists use plain text entry and offer
choices
– Example
Web Form Entry (3)
• Choose appropriate input element based on:
–
–
–
–
–
–
Typing vs. selecting
Potential typing errors
Review of options before selecting
Number of options
Mutually exclusive selections
Distinctiveness of options
• Mark required fields, but consider whether the
field information is really required.
Web Form Entry Errors
How should these be handled?
• Typing errors
• Transcription errors (4311 for 3411)
• Category errors
– Insisting on an entry
– Out of range
• Send errors (premature form submittal)
• Privacy errors (user does not want to
supply information)
Error Response
• Show error message close to problem.
• Keep supplied information
Examples
• Remodeling the house
• Going fishing