Designing UX Forms Create Forms That Don’t Drive Your Users Crazy (Jessica Enders) (z-library.sk, 1lib.sk, z-lib.sk)

CREATE FORMS THAT DON’T DRIVE USERS CRAZY FO R M S D E S IG N IN G U X : FO R M S E N D E R S SITEPOINT BOOKS Advocate best practice techniques Lead you through practical examples Provide working code for your website Make learning easy and fun WEB DESIGN PRINT ISBN: 978-0-9943470-5-3 Visit us on the Web at sitepoint.com or for sales and support email books@sitepoint.com USD $34.95 CAD $40.95 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 UX. 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. It’s filled with practical and engaging insights, and plenty of real-world examples, both good and bad. • Where should field labels go? • What makes a question easy to understand? • How do you design forms to work on small screens? • How does touch impact on form design? • How long can a form be? • What’s best practice for error messaging? “A splendid book that I’m happy to recommend to anyone who wants to create a good from — or to improve one that could be better.” – Caroline Jarrett, co-author of Forms that Work. DESIGN FORMS THAT WORK BEAUTIFULLY ON ANY DEVICE YOUR AUTHOR JESSICA ENDERS Jessica Enders has suffered from a lifelong condition known as a love of designing forms, applications and other transactional interfaces. She is attempting to minimize the adverse symptoms by running her own form design business, Formulate Information Design. Formulate’s international clients include PayPal and the Mayo Clinic; in Australia, Jessica has worked across all sectors for organizations such as Wesfarmers, Coles, Diabetes Australia, Sydney Water, Royal Melbourne Hospital, VicRoads and the Australian Prudential Regulation Authority. DESIGNING UX: FORMS BY JESSICA ENDERS ASPECTS OF UX

Designing UX: Forms by Jessica Enders Copyright © 2016 SitePoint Pty. Ltd. Managing Editor: Simon Mackie Series Editor: Joe Leech English Editor: Ralph Mason Technical Editor: Joe Leech Cover Designer: Alex Walker Illustrator: Natalia Balska Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: books@sitepoint.com ISBN 978-0-9943470-5-3 (print) ISBN 978-0-9953826-0-2 (ebook) Printed and bound in the United States of America i

About Jessica Enders Jessica Enders has suffered from a lifelong condition known as a love of designing forms, applications and other transactional interfaces. She is attempting to minimize the adverse symptoms by running her own form design business, Formulate Information Design1. Formulate’s international clients include PayPal and the Mayo Clinic; in Australia, Jessica has worked across all sectors for organizations such as Wesfarmers, Coles, Diabetes Australia, Sydney Water, Royal Melbourne Hospital, VicRoads and the Australian Prudential Regulation Authority. Jessica has two decades of award-winning, unbeatable return-on-investment form design experience. If you have a problem with completion/conversion rates, poor data quality, low customer satisfaction or high incidence of user error, Jessica knows how to fix it. She also believes in sharing her insights with clients and community alike, writing and presenting widely. This book is her latest step toward making the world a better place, one well-designed form at a time. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. 1. http://www.formulate.com.au/ ii Designing UX: Forms

For m.e. You are my everything. iii

Table of Contents Preface .................................................................................x Who Should Read This Book ....................................................................... x Conventions Used ......................................................................................... x Tips, Notes, and Warnings ................................................................ x Supplementary Materials............................................................................ xi Chapter 1 Introduction ..............................................1 Designing Forms Is the Worst Best Job in the World .............................1 Some (Crucial) Definitions...........................................................................2 Three Dimensions ..........................................................................................4 Which Forms This Book Is About ................................................................5 Online...................................................................................................5 Mobile ..................................................................................................6 Touch....................................................................................................7 Accessibility ........................................................................................8 Performance .......................................................................................8 One Design to Rule Them All ......................................................................8 What Makes a Good Form? .........................................................................9 iv Designing UX: Forms

Chapter 2 Form Projects ..........................................11 Form-specific Information Gathering .....................................................12 Questions to Ask ..............................................................................12 What If You’re Doing Agile Development or Lean UX?.............13 What If the Form Is Part of a Bigger Web Project? ...................14 How to Ask........................................................................................14 Who to Ask .......................................................................................14 Metrics ..........................................................................................................15 Metrics Can Highlight Design Issues ............................................16 Don’t Copy Others.......................................................................................17 A Guiding Principle for Form Design.......................................................18 Chapter 3 Words ..........................................................20 Words Matter Most.....................................................................................20 Questions ......................................................................................................22 Good Form Questions Are Hard to Find.......................................23 What Is a Question? ........................................................................24 Four-stage Model for Question Answering.................................26 Satisficing..........................................................................................36 Judgement: Checking Answer Suitability, and Making Adjustments ......................................................................................41 Table of Contents v

Answering: Physically Providing the Answer..............................44 Question-level Help.........................................................................51 Deciding What Questions to Ask ..................................................54 Common Questions .........................................................................58 Other Words in Forms ................................................................................73 Headings............................................................................................74 Button Labels....................................................................................77 Messages ...........................................................................................79 General Instructions ........................................................................80 Yours or Mine?.............................................................................................82 Start Without Pronouns .................................................................82 Where Pronouns Can Be Helpful...................................................83 Referring to More Than Two Parties.............................................83 Words That Work.........................................................................................84 Chapter 4 Layout .........................................................87 A Mantra: It’s All about Balance ..............................................................87 For Realz .......................................................................................................88 Choose Your Field Types.............................................................................89 Problems with Using “Enhancements” to Answer Field Types .91 Alignment...................................................................................................117 vi Designing UX: Forms

Vertical Path to Completion ........................................................118 Aligning Answer Fields................................................................. 120 Label Placement ............................................................................ 125 Button Alignment......................................................................... 135 Spacing ...................................................................................................... 138 Proximity ........................................................................................ 138 Text Box Widths ............................................................................ 145 Empty Text Boxes.......................................................................... 148 Touch Tips....................................................................................... 154 Color ........................................................................................................... 154 Be Very Careful with Color.......................................................... 157 What Colors Should You Use? .................................................... 162 Color Blindness.............................................................................. 164 Color Contrast ............................................................................... 166 Required Versus Optional Fields ............................................................ 169 Buttons ...................................................................................................... 174 Typography ................................................................................................ 175 Typeface.......................................................................................... 176 Case ................................................................................................. 183 Line Length .................................................................................... 186 Contact Information................................................................................ 188 Table of Contents vii

What’s Absent from Our Layout ............................................................ 189 Review ........................................................................................................ 189 Chapter 5 Flow ...........................................................195 Order........................................................................................................... 195 Question Order .............................................................................. 198 Principles for Deciding Question Order .................................... 198 Screens............................................................................................ 203 Before and After ........................................................................... 215 Validation .................................................................................................. 228 Two Types of Errors....................................................................... 228 Errors of Omission......................................................................... 228 Inline Validation............................................................................ 231 Messages.................................................................................................... 234 Error Messages .............................................................................. 235 Warnings ........................................................................................ 239 Success............................................................................................ 240 System Processing ........................................................................ 241 From Good to Great................................................................................. 243 Reduce Workload .......................................................................... 243 Tailor the Experience.................................................................... 251 viii Designing UX: Forms

The Art and Science of Flow .................................................................. 259 Appendix A Forms Documentation: QxQ.....261 Contents of a QxQ ................................................................................... 261 The Investment in a QxQ Has a Great Return ..................................... 262 Table of Contents ix

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, accessible web forms, but the focus on underlying principles means plenty is applicable to other types of forms—such as mobile and desktop apps, kiosks and even paper forms. You’ll learn best practice for visual design, how to write effective questions, and what makes for a smooth flow, with some tips about managing form design projects as a bonus. So join me as we refashion forms from frustrating to fabulous. Who Should Read This Book This book is for designers, developers, aspiring UX professionals, and anyone with an interest in building forms that work beautifully. Conventions Used Look out for the following items. Tips, Notes, and Warnings Hey, You! Tips provide helpful little pointers. x Designing UX: Forms

Supplementary Materials https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky web problems. books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason. Ahem, Excuse Me ... Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always ... ... pay attention to these important points. Watch Out! Warnings highlight any gotchas that are likely to trip you up along the way. Preface xi

1Chapter Introduction I hate telling people what I do. Usually, the response is one of confusion: blank looks and pregnant pauses. I go on to explain, “You know, like when you have to register your car or be admitted to hospital: I design the form you fill out, so it’s less painful.” Some understanding is restored using these everyday examples. Yet people are still surprised to learn that someone actually designs these forms (a depressingly apt reflection on the quality of most). Designing Forms Is the Worst Best Job in the World Surprising as it may be, I love what I do. As it draws on so many different subject areas, designing forms is one of the most interesting professions you can have. It’s 1 Designing UX: Forms

kinda like getting paid to solve rewarding puzzles that make other people’s lives easier. And boy are there a lot of puzzles out there that need solving. After all, when was the last time you heard someone gush with delight about a wonderful form they just filled out? Instead, every day, forms make people want to pull their hair out in frustration. And every day, organizations waste millions of dollars collecting information poorly. But despite the huge need, and the fascinating, diverse work, form design isn’t a recognized discipline. If you tell people you’re an accountant, or a landscaper, or even a web developer, they have an inkling of what you do. Form design, on the other hand, is a niche within the niche of user experience. It shouldn’t be this way. The world needs more people who understand what makes one form easier to fill out than another. For some of you, reading this book will light a spark that sets you on the path to becoming a specialist form designer. For most of you, however, it’ll mean you’re a bit more prepared to design the form that’s part of a bigger web project. And while you may not be boisterously celebrated for the functional and aesthetic form you produce, know that you’ve made a real, tangible difference both to the people filling it out, and to your organization. Besides, at the end of the day, nothing happens without a form. Some (Crucial) Definitions You’d be hard pressed to find professions that ruminate about definitions more than User Experience and Design. But I’m rather inclined to go against the grain, and this is meant to be a practical book, so I’m just going to tell you straight up what you need to know. In this book: A form is any physical interface that collects information from at least one party, and delivers it to at least one other party, so that a product or service can be provided. A form can be on paper, on a mobile, within a complex desktop application, or even a bank’s automatic teller machine (ATM). Introduction 2

A web form is a form that people fill out inside the browser, and is the only kind of form we’re going to cover in this book (although many of the techniques can be used with other types of forms). It has its basis in HTML, CSS and JavaScript, but may be built using: a front-end framework such as Twitter’s Bootstrap a CSS preprocessor like Sass or Less JavaScript libraries like jQuery programming languages such as PHP and Ruby on Rails1. A user is someone who is filling out your form. It’s a regular person, who may be internal or external to your organization. Yes, “user” isn’t an especially elegant term, but it’s simpler than “form filler”, so I’m sticking with it. The target audience is the group of users for whom the form applies, as a whole. Sometimes the target audience can be segmented into groups according to things like characteristics, motivations, preferences or demographics. The form owner is the organization that creates the form, to collect some necessary information, from the target audience. Within the organization, there will be many people who have a stake in the form—the stakeholders—but hopefully there’s one person who has the ultimate decision-making authority—the project owner. User experience is the experience users have when they use something. In our case, it refers to the experience they have when they fill out your form. Our aim is to create an optimal user experience, such that the needs of both the users and the form owner are met. Design means the choices we make about how our form will look, feel and work. It doesn’t matter what your actual job title is, or whether you’ve ever studied design. If you’re writing words, setting out text boxes or coding up a button, you’re doing design. 1. Don’t worry if you don’t know anything about these programming languages. You won’t need to for the purposes of this book. 3 Designing UX: Forms

Research refers to learning about the needs, wants, contexts, preferences and opinions of both users and stakeholders. To some extent, all user experience research techniques2 are applicable to forms. But the most relevant are: contextual enquiry (observing and interviewing users in the situation where the form would be filled) analytics review (examining form metrics and samples of completed forms, to see where things are going wrong) usability testing (watching people fill out a form to see what’s working and what isn’t)3 A/B testing (a controlled experiment to see which of two design options for a particular element performs best). There’s also a specialist technique for form research called cognitive interviewing, which is a combination of contextual enquiry and user testing tailored for the form-filling context. It was developed out of social psychology, for testing survey questionnaires. If you’re interested in learning more about cognitive interviewing, a place to start is the “How To” guide by Gordon Willis4. Three Dimensions Every form has three dimensions (from relatively most to least influential for user experience)5: 1. Words (what you say in the form, and how you say it) 2. Layout (how things are presented, visually) 2. http://uxmastery.com/resources/techniques/ 3. Sometimes people call this “user testing”, but usability testing better conveys that it’s not the user that’s being tested, it’s the interface. 4. http://www.hkr.se/pagefiles/35002/gordonwillis.pdf 5. Technically speaking, I also talk about a fourth dimension: Process. Process is everything that happens around the form itself, from how people get access to it, to what happens after it’s submitted, and all the associated organizational activity. Process can also significantly influence user experience, but is beyond the scope of this book. Having said that, you’re likely to uncover opportunities for process improvement just by following the techniques we discuss, especially those specific to managing a forms project (Chapter 2). Introduction 4

3. Flow (how the user moves through the form). You’ll probably find form design more manageable if you can get a firm sense of these three dimensions. They’ll help ensure you’ve considered all key components, and will provide a common language for discussions with colleagues and peers. The dimensions can also provide a framework for the planning and division of work, as well as pinpointing where design problems are occurring. Finally, it’s just too damn overwhelming to try to design all three dimensions at once! Correspondingly, the core of this book is divided into three major chapters—one for each dimension—plus a brief summary of managing form projects: Chapter 2: Form Projects Chapter 3: Words Chapter 4: Layout Chapter 5: Flow. Which Forms This Book Is About Before we get too much further into detail, we should further clarify which forms this book is about. Online Would you design a novel the same way you’d design an advertising billboard? Surely not, as the medium influences the design. The constraints and goals also differ. The same is true for forms. While there are some commonalities, forms designed for paper follow different rules from those designed for digital. And within digital, designing a native app for an Android smartphone is very different from designing an enterprise system to run on the desktop. Furthermore, what defines a native app today—let alone what operating system the app is native to—may have changed by tomorrow. 5 Designing UX: Forms

If we tried to cover all these different types of forms, as well as all the aspects of good form design, your head would explode. (Plus, researching, writing and designing a book takes a lot of work, so I want it to be valid for more than two minutes!) So we’re going to focus on the most adaptable, accessible and durable type of form: web forms. As we defined earlier, web forms are those that run in the browser (e.g. Google Chrome or mobile Safari on the iPhone) and are based on HTML, CSS, and JavaScript. This is a book about designing forms, though, so you don’t need to understand these programming languages, or coding generally. Rather, all the rationale and recommendations apply to web forms, but may not carry across directly to other contexts. We’ll dip into HTML from time to time, where it’s relevant for enhancing the user experience. And if you don’t have any familiarity with programming for the web, SitePoint has some great places to start, such as the free Build Your First Website: HTML & CSS6 course by Russ Weakley. Mobile One of the reasons I declare web forms to be the most adaptable is that they work on mobiles, tablets and other small screens as well as laptops, desktops and TVs. In fact, this is one of the real advantages of web forms: you can design a single form that will respond to the screen size. Consequently, in this book you won’t find any chapters specifically on “mobile form design”. Instead we’re going to produce one design that works everywhere. In other words, we’re going to do responsive form design. This is much better than having to come up with multiple designs that each need to be developed and maintained, right? In fact, the great news is that most of the design approaches work for all screen sizes, without any particular modification. The key exceptions—which we’ll point out as we go along—are: 6. https://www.sitepoint.com/premium/courses/build-your-first-website-html-css-2891 Introduction 6

label placement text sizes buttons. Touch As Josh Clark says in the introduction to his great book Designing for Touch7: For decades, we explored the digital world with prosthetics called mouse, keyboard and cursor. We nudged plastic bricks across our desks. We directed onscreen arrows to poke buttons from afar. We clicked icons. We pointed at pixels. But then we started holding those pixels in our hands. Thanks to smartphones, billions of people wrangle touch screens every day, all day. It’s no longer enough to design our forms so that they work just with mouse and keyboard. We have to accommodate fingers and thumbs, too. But touch, as a way of interacting with an interface, is not clearly associated with a particular environment, unlike screen size, operating system or device type. We can never really know when our form will be filled out using touch. Thus, we must make all our forms touch-friendly by default. If you don’t know much about touch, here are some key tips: Touch can be found on all sizes of screen, from small smartphones to large display monitors. So don’t use screen size as an indicator of touch. The minimum touch target size is 7mm, which equates to 44 pixels (or points or dp). For responsive designs, this equates to 2.75 rems (a “rem” is a “root em”—see “Font sizing with rem”8). There’s no such thing as “hover” on a touch device, so try to avoid using it in your designs. Fewer taps are better, as arms, hands and wrists get sore easily. And if all of that is way too technical for you, just pass it on to your developers! 7. https://abookapart.com/products/designing-for-touch 8. https://snook.ca/archives/html_and_css/font-size-with-rem 7 Designing UX: Forms

Accessibility The same applies to accessibility. Instead of trying to retrofit accessibility to our form after the fact, or try to apply it in a subset of use cases, we’re going to bake accessibility right into our design. After all, accessibility “features”—like readable text and colors that don’t clash—help all users, not just those with disabilities. Performance As web technology has evolved, web pages have grown in size (or weight, depending on how you like to think about it). Larger pages take longer to load, and slow-loading pages certainly detract from user experience. True, internet connectivity and mobile networks have also improved. But these improvements struggle to keep pace with the evolution of the web. The improvements are also not evenly distributed—as people from rural areas to inner city black spots can tell you, not to mention other countries. Ideally, we should aim to create forms that load and respond comparatively fast, using familiar, straightforward, standards-compliant design approaches, and keeping our forms free from many of the things that increase the size of web pages, such as advertisements. (See “What’s Absent from Our Layout” in Chapter 4.) One Design to Rule Them All In summary, this book will show you how to design a form that will: work on the web—on all devices (including mobile), and regardless of browser or operating system be responsive to screen size suit touch, in addition to the more traditional input devices of mouse and keyboard be accessible to people of all abilities, including those using assistive technologies like screen readers and magnifiers load quickly, and respond quickly to user interaction. Introduction 8