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

Preface

Have you ever had a debate with your team about whether a form label should go above, inside or to the left of its field? Or whether or not to disable a button until all the required fields are filled out? Maybe a stakeholder wants to include a dumb question, and you need to help them see the light.

This book is here to help. You’ll find the answers to all of the above and much more, as we look at the factors behind great form experience. It’s an easy read from cover to cover, but the book is also divided into sections with clear headings that make it simple to jump to specific information.

We will concentrate on designing mobile-friendly, ...