1 / 14

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?

maurilio-nihill
Download Presentation

Web Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Forms A User Interface Nightmare

  2. Web Form Design Overarching questions • What is the user community? • How tolerant, or sophisticated, are the users?

  3. 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?

  4. 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

  5. Web Form Design (4) Field types • Name • Address • Fixed length numeric • Telephone number • Credit card number • ZIP + 4 • Date

  6. 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

  7. Date Entry • Subfield text boxes • Single field text box • With separator • Without separator • Date format • Specialized dates: e.g. expiration date

  8. Name Entry • Title • Generation • Single name: Is it the first or the last name? • Initials • Name length • Culturally driven format

  9. 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

  10. 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

  11. 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.

  12. 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)

  13. Error Response • Show error message close to problem. • Keep supplied information

  14. Examples • Remodeling the house • Going fishing

More Related