Designing UX: Forms: Create Forms That Don't Drive Your Users Crazy
()
About this ebook
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:
- 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 look and feel should the form have: skeumorphic, flat, or something else?
- What's best practice for error messaging?
Jessica Enders
Jessica Enders has suffered from a life long condition known as a love of designing forms and other transactional interfaces. She is attempting to minimise the adverse symptoms by running her own form design business, Formulate Information Design.
Related to Designing UX
Related ebooks
Killer UX Design: Create User Experiences to Wow Your Visitors Rating: 0 out of 5 stars0 ratingsDesigning UX: Prototyping: Because Modern Design is Never Static Rating: 0 out of 5 stars0 ratingsUX and UI Design, A Case Study On Approaches To User Experience And Interface Architecture Rating: 0 out of 5 stars0 ratingsCommunicating the User Experience: A Practical Guide for Creating Useful UX Documentation Rating: 4 out of 5 stars4/5UX Decoded: Think and Implement User-Centered Research Methodologies, and Expert-Led UX Best Practices Rating: 0 out of 5 stars0 ratingsUser Journey Mapping Rating: 0 out of 5 stars0 ratingsPractical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience Rating: 0 out of 5 stars0 ratingsDesign That Scales: Creating a Sustainable Design System Practice Rating: 0 out of 5 stars0 ratingsMicrocopy: Discover How Tiny Bits of Text Make Tasty Apps and Websites Rating: 4 out of 5 stars4/5Researching UX: User Research Rating: 0 out of 5 stars0 ratingsAbove the Fold, Revised Edition Rating: 5 out of 5 stars5/5The Strategic Designer: Tools & Techniques for Managing the Design Process Rating: 0 out of 5 stars0 ratingsContent Everywhere: Strategy and Structure For Future-Ready Content Rating: 4 out of 5 stars4/5Why We Fail: Learning from Experience Design Failures Rating: 4 out of 5 stars4/5Build Better Products: A Modern Approach to Building Successful User-Centered Products Rating: 2 out of 5 stars2/5Writing Is Designing: Words and the User Experience Rating: 5 out of 5 stars5/5Building Design Systems: Unify User Experiences through a Shared Design Language Rating: 0 out of 5 stars0 ratingsGet Into UX: A foolproof guide to getting your first user experience job Rating: 4 out of 5 stars4/5Web Form Design: Filling in the Blanks Rating: 5 out of 5 stars5/5The Strategic Web Designer: How to Confidently Navigate the Web Design Process Rating: 0 out of 5 stars0 ratingsThe Designer's Web Handbook: What You Need to Know to Create for the Web Rating: 0 out of 5 stars0 ratingsAbove the Fold: Understanding the Principles of Successful Web Site Design Rating: 0 out of 5 stars0 ratingsProduct Management for UX People: From Designing to Thriving in a Product World Rating: 5 out of 5 stars5/5Mental Models: Aligning Design Strategy with Human Behavior Rating: 4 out of 5 stars4/5Everyday UX: 10 Successful UX Designers Share Their Tales, Tools, and Tips for Success Rating: 5 out of 5 stars5/5Mastering UX Design with Effective Prototyping: Turn your ideas into reality with UX prototyping (English Edition) Rating: 0 out of 5 stars0 ratingsService Design for Business: A Practical Guide to Optimizing the Customer Experience Rating: 3 out of 5 stars3/5From Psychology to UX: The Evolution of a Career and the Intersection of Disciplines Rating: 0 out of 5 stars0 ratings
Internet & Web For You
HTML in 30 Pages Rating: 5 out of 5 stars5/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsThe Gothic Novel Collection Rating: 5 out of 5 stars5/5Coding For Dummies Rating: 5 out of 5 stars5/5Remote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Tor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5Content Chemistry: The Illustrated Handbook for Content Marketing Rating: 5 out of 5 stars5/5Lying and Lie Detection: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratings
Reviews for Designing UX
0 ratings0 reviews
Book preview
Designing UX - Jessica Enders
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.
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.
Supplementary Materials
https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky web problems.
[email protected] is our email address, should you need to contact us to report a problem, or for any other reason.
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 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).
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 Rails. Don’t worry if you don’t know anything about these programming languages; you won’t need to for the purposes of this book.
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.
Research refers to learning about the needs, wants, contexts, preferences and opinions of both users and stakeholders. To some extent, all user research techniques 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). 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.
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 Willis.
Three Dimensions
Every form has three dimensions (from relatively most to least influential for user experience). 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):
Words (what you say in the form, and how you say it)
Layout (how things are presented, visually)
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.
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 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