Forms and Functions in the 21st Century

Data entry and the touchless UX

Hold still, this field is required

Pity the humble form. Often overlooked and certainly not sexy, Web forms are not sought out because of the satisfaction they offer. Rather, filling out a form is the thing that just has to be done so that some degree of satisfaction will follow.

In many cases forms don’t even reach this lackluster height. They are a thing that exists because a prior decision proclaimed that it must. They are interacted with sporadically and begrudgingly, if they are interacted with at all.

Yet paradoxically forms are one of the most crucial parts of a user experience online, as they represent, if not an actual conversion, at least a necessary step toward that important goal. That’s why, even in this increasingly touchless world, forms will be with us for some time to come.

Inputs, Outputs, and Everything In-Between

From punch card to mainframe, to PC, to handheld device, the computer has always been a system that receives input, does a few calculations, then sends output and awaits further input.

This basic transactional nature both defines and constrains the evolution of computing. In cases where those inputs come from the user, it will be the masking of this transaction that continues to drive the computer’s evolution in the 21st century. In other words, the less aware I am of my inputs, the more I will perceive that the computer has evolved.

So we will continue to be bedazzled by exponential advances in technologies which mask and even eliminate user input: Voice interfaces, biometrics, ambient systems, and so on. Yet in spite of these advances, forms will be with us for a long while.

An embarrassment of riches

With every impressive leap forward there proliferates in the interfaces of the less fortunate millions of agonizing inputs, dropdowns, checkboxes, radio buttons, and more. And for every one of those there exists hidden — and ready to lurch out — a hideous red error message. These are almost always written poorly, punctuated worse, and seemingly unable to agree if user name and login are one word or two; whether they should be capitalized or not.

Yes, forms are everywhere and they’re not going anywhere soon. This is why l’ve declared it my solemn duty as a UX professional to try to make them as good as they can possibly be. Let’s look these monsters square in the face and understand that we can exert our influence in three areas: 1.) How the UI looks and feels, 2.) what data is captured, and 3.) what the outputs look like.

UI is as UI does

First the easy thing: how does the UI look and feel? Designers the world over have developed and refined patterns in the last 5–10 years which have vastly improved the form experience. Starting with styles that sought to visually enhance form elements, forms have thankfully gotten a lot less ugly. More than just an aesthetic improvement, applying the same principles that typography brought to plain HTML pages has made forms easier to parse and interact with. And this is a good thing.

Mobile-first approaches have also changed form design, and interestingly that change hasn’t been limited to mobile screens. Some of those mobile-first decisions have influenced desktop layouts too. This can be great, however we need to be aware that a decision which works well in one context might be completely wrong in another.

Material Design-type floating labels

Case in point. Mobile screens forced once and for all the issue of label placement and alignment. Space constraints (and Google) have thankfully brought us floating labels. These represent great design thinking, a welcome microinteraction which breaks up a boring task, and a solid solution that works across many screen sizes. I’m a big fan of floating labels.

But less successfully, we see sloppy mobile-first responsive designs that don’t scale well to the desktop layout. Examples of this are forms which are full-width, or forms with all fields stacked and spanning the same width. These patterns work well on mobile, but not on desktop. And it goes without saying that forms designed for desktop display only are a disaster on mobile.

Other things to be on the lookout for are inputs that have not been tagged to bring up the right keypad. Dropdowns that are far too long and date pickers that rely on native controls. These are just a few of the lower hanging fruits, but there are lots more.

Making friends and influencing people

What about the trickier issues, like the order of the fields in your form design? Does your Web form read like a Kafkaesque nightmare from ye olden days? Or does it leverage available technology like location services or zip code lookups in order to eliminate unnecessary manual entry?

Granted, you’re not always going to get these ideas pushed through. My point is that you should get in the habit of bringing such opinions to the table. Consistently pushing issues around forms UX from project to project will eventually influence the conversation. Ultimately you will shift the project team and stakeholders to a more user-centric point of view — or you’ll alienate them and end up getting fired.

But let’s plan on you not getting fired. There are plenty more things that can be effected through consistent leadership focusing on UI, inputs, and outputs. Look at a great mobile design like Chipotle and see how they’ve elegantly handled their password field — one of the most consistently awkward fields to deal with as a designer or a user.

Feels a lot better

Chipotle provides a show/hide function which helps eliminate user error. When creating an account, this same method allows them to eliminate a redundant field, and all it took was a creative reframing of the issue; for someone to think about it a while and say, “Hey why do we need those black dots on a device only one user can see?”

Chipotle’s login screen

The same creative reframing can be applied towards outputs, prompts, confirmations, and error messages. These are all too often speed bumps that bring our meticulously designed experiences crashing down.

I’ve written elsewhere that these interactions should be framed as customer-service opportunities. Framing them this way is important because it creates a solid business case to present as you try to influence your team. Left to their own devices, decisions such as these get made somewhere down the waterfall by very non user-centric players on the team — and this is true even if you’re an Agile shop.

I always cite Virgin USA as a best-in-class example of customer service being front and center in prompts, confirmations, and so on. And speaking of Richard Branson, that brings me to my next point: Always challenge the dominant paradigm.

* = Required

Too many forms require superfluous information. Furthermore, labeling a field as required decreases conversion metrics. So, for starters, let’s lose that red asterisk, permanently. Let’s also encourage our stakeholders to help us eliminate fields that are not absolutely required.

After you’ve worn them down for a while — hopefully presenting data to bolster your argument — maybe they’ll relent and eliminate a field or two. That’s a win. If they insist on optional fields, convince them that it’s better to label those fields as optional, and keep those to a minimum.

Deja-vu all over again

Enter a password, enter it again. Password doesn’t meet requirements. Enter email address, enter that again. That email address is already being used.

ReCaptcha looking nicer than ever

Just thinking through these common scenarios kills brain cells and makes me cold, tired, and hungry. Why would any sane person make their customer perform busy work for the benefit of the company? Aren’t our systems supposed to simplify and enhance people’s lives?

Repetitive tasks like this remind me of my pet peeve: the dreaded pre-flight announcement. This is the seat belt instruction passengers in the U.S. are forced to listen to on every flight ever, for the rest of their lives. Ridiculous conventions created by lazy people whose logic was that users are stupid.

Users are not stupid, so let’s stop designing experiences to the lowest common denominator. At the same time, recognize that not everything will be elevated to the latest futuristic activation any time soon. Even though adoption of natural user interfaces is growing, users will still likely be unwilling to speak private data aloud. And I’m sorry geeks, but biometrics will always be creepy to older guys like me.

My point is that Web forms are with us to stay. They will be with us for as long as many of us work in this field. So let’s give them the same attention we give to the rest of the experiences we design. Let’s make them as good as we can. Let’s go over the UI, the inputs, and the outputs again and again, with an eye toward excellence.

Our customers depend upon data, our paychecks depend upon our customers’ business goals being achieved, and our users depend on us. In fact they’re begging right now, right this minute as you read this article, to never, ever make them listen to that awful pre-flight announcement again.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.