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

Overview

A recent study found that on average, designing a form to have a great user experience almost doubled the rate of successful first-time completions. For example, Ebay made an additional $USD 500 million annually from redesigning just the button on one of their mobile form screens.

More conversions, fewer dissatisfied users, better return on investment. Can you afford not to improve your forms' user experiences?

This book will walk you through every part of designing a great forms user experience. From the words, to how the form looks, and on to interactivity, you'll learn how to design a web form that works beautifully on mobiles, laptops and desktops. Filled with practical and engaging insights, and plenty of real-world examples, both good and bad.

You'll learn answers to common queries like: