book

Designing UX: Forms

by Jessica Enders

September 2016

Intermediate to advanced

276 pages

4h 40m

English

SitePoint

Read now

Unlock full access

Who Should Read This BookConventions UsedSupplementary Materials
Designing Forms Is the Worst Best Job in the WorldSome (Crucial) DefinitionsThree DimensionsWhich Forms This Book Is AboutOnlineMobileTouchAccessibilityPerformanceOne Design to Rule Them AllWhat Makes a Good Form?
Form-specific Information GatheringQuestions to AskWhat If You’re Doing Agile Development or Lean UX?What If the Form Is Part of a Bigger Web Project?How to AskWho to AskMetricsMetrics Can Highlight Design IssuesDon’t Copy OthersA Guiding Principle for Form Design
Words Matter MostQuestionsGood Form Questions Are Hard to FindWhat Is a Question?Four-stage Model for Question AnsweringComprehension: Understanding Words and MeaningPlain Language ResourcesFull Sentence or Brief Prompt?Retrieval: Searching Memory, Feelings, Thoughts and SourcesSatisficingJudgement: Checking Answer Suitability, and Making AdjustmentsAnswering: Physically Providing the AnswerCharacteristics of Usable Closed Answer FieldsAlphabetical OrderPunctuation at the End of the LabelQuestionlevel HelpRotten RepetitionDeciding What Questions to AskInformation NeedData QualityHow Long Is Too Long?Common QuestionsTitleDon’t Use Title as a ProxyNameResources About NamesAddressEmailPhoneDate of BirthSex and GenderCredit Card DetailsDisplay Payment OptionsOther Words in FormsHeadingsForm TitleSection HeadingsQuestions Posing as Section HeadingsStep HeadingsButton LabelsMessagesError MessagesGeneral InstructionsYours or Mine?Start Without PronounsWhere Pronouns Can Be HelpfulReferring to More Than Two PartiesWords That Work
A Mantra: It’s All about BalanceFor RealzAbbreviationsChoose Your Field TypesProblems with Using “Enhancements” to Answer Field TypesIssues with DropdownsWhat to Use Instead of a DropdownLong Lists of OptionsImplementing Country Text Box with AutosuggestSegmented Controls and SwitchesWhat to Use Instead of a Segmented Control or SwitchDate PickersInternational Date PickingWhat to Use Instead of (or in Addition to) a Date PickerOne Text Box or Many?Sliders and SteppersSliders in HTML5SpinnersWhat to Use Instead of a Slider or StepperSingle CheckboxesAlignmentVertical Path to CompletionDon’t Put Questions Beside Each OtherAligning Answer FieldsLabel PlacementWhat about That Study?Avoiding the GutterButton AlignmentSingle-step FormsMultistep FormsButtons on MobileSpacingProximityAlways Show Questionlevel HelpText Box WidthsEmpty Text BoxesNo Background ColorNo Placeholder TextFloat LabelsTouch TipsColorBe Very Careful with ColorWhat Colors Should You Use?Message ColorsColor BlindnessColor ContrastRequired Versus Optional FieldsMany Optional QuestionsButtonsNo ResetTypographyTypefaceBody TextHeadingsCaseLine LengthContact InformationWhat’s Absent from Our LayoutReview
OrderQuestion OrderPrinciples for Deciding Question OrderFollow How the User ThinksCore Before SupplementaryEasy Before DifficultRelated TogetherBe ConsistentPrinciples, Not RulesTab OrderScreensThree Different Ways to Split over ScreensDeciding the Number of ScreensMultistep (Screen) FormsKeep it TogetherOne Question per ScreenProgress IndicatorsModal WindowsBefore and AfterGateway ScreenConfirmation ScreenEmail ConfirmationReview ScreensValidationTwo Types of ErrorsErrors of OmissionDisabling the Primary Action ButtonErrors of CommissionInternational FormatsInline ValidationNever Rely Solely on Client-side ValidationMessagesError MessagesErrors Take TimeWarningsSuccessSystem ProcessingFrom Good to GreatReduce WorkloadTouch Device SmartsDouble EntryShow/hide PasswordPrepopulationDefaultsTailor the ExperienceConditional QuestionsEligibilityTime LimitsThe Art and Science of Flow
Contents of a QxQSimple Forms Don't Need a QxQThe Investment in a QxQ Has a Great Return

Content preview from Designing UX: Forms

Words

This chapter is all about the words you use in your forms. They’re the most influential component of your design—more so than how your form looks.

Do come for a stroll through the world of words with me, and see just how much they can do.

Words Matter Most

A web form is a text-driven interface. The core of the interaction is the questions asked and answers given. This is why the words we use in the form—and not how it looks—are the most important part of the design.

Have a look at the image below. This ecommerce form has an attractive, clean layout. But can you fill it out? The heading talks of checking whether the item is available in store. Yet the question itself refers to delivery. The waters are muddied even more by the instruction: ...