Design with poorly worded fields

Definitive Advice on Forms: An Interview with Jessica Enders

Gerry Gaffney Accessibility, Interaction design 10 Comments

Download (mp3: 27.1MB, 28:13) Designing for satisficing. Authoritative guidance on the elements of a form.

Share this episode



Transcript

Gerry Gaffney:

Today’s guest is a longtime friend and colleague. She is a forms tragic. Her business is called Formulate Information Design, with the tagline “We Fix Forms”. She’s worked for PayPal and the Mayo Clinic.

In Australia, she’s worked for Coles, Vic Roads and various other organisations. She recently released her book on forms design. It’s called Designing UX: Forms and it’s published through SitePoint and it’s available from the usual outlets, Amazon, Book Depository and so on.

Jessica Enders, welcome to the User Experience podcast.

Jessica Enders:

Thanks for having me, Gerry. I have to say, I’m a little bit nervous coming after such UX greats as Dave Gray and Steve Portigal but I’ll do my best!

Gerry:

Oh, no you’re better than they are. [Laughter.] So, let’s start off – why a book on forms?

Jessica:

You know forms, forms are strange. If you think about it, there’s very little that happens of any significance in the modern world without the form, whether it’s buying a car or registering to use a social media service, there’s a form involved. It might be short, it might be long. But strangely there’s very little literature for research or information out there for people designing forms. So they’re everywhere but there’s very little for people to go on in actually making them look good.

So, and in fact, as you may know, until recently there were only two sort of current books on form design. There is your book with Caroline Jarrett, Forms that Work which is a great overview of the different elements that come into form design and then after that came Luke Wroblewski’s book which was about web forms specifically but even that is a good few years old now and I also wanted to create a book that had accessibility rolled into it so it wasn’t a separate consideration or something you had to add on later on. It was just the form that you would design by following the principles in this book would be accessible from the get-go and it would also work across a range of devices and a range of screen sites and platforms because as everybody knows it’s getting more diverse, not less. So that’s why I thought, after working in form design and in one fashion or another for about twenty years now that it might be time to put my thoughts down in writing.

Gerry:

Yeah, very good. It’s a very good book. I really enjoyed it. It’s good to get you know I guess something that is modern and up to date in comparison to the other couple of books that are getting a bit long in the tooth at this point.

One of the things that sort of struck me early on in the book is you know usually we tell clients and designers to look at what other people are doing for exemplars and we say well you know just copy somebody’s, not necessarily just blindly copy but look at what other people are doing and you get good practice and people have done research. But you say in the book, “Don’t copy others” because the exemplars are not good ones. That’s a bit of an indictment, isn’t it of where we are at?

Jessica:

Yeah I think it is actually and I still stand by that. Again, like no other field of design, forms, as I said, they’re out there everywhere but because there’s so little information shared about how to do them well, most forms have multiple user experience, usability issues with them and, it’s funny, I run training courses about form design and use loads of examples in those to make it real for people and sometimes I get asked, “Can we have more examples of forms that are done well out there in the real world?” And I have to say I’ve pretty much found all that are really good ones that I can and I’m yet to find one where all the different dimensions of a forms design have been done well.

It’s probably worth mentioning that in the book I talk about how forms have these three dimensions. Most of us think about design as being layout, the aesthetic, how something looks. That’s one of the dimensions of a form’s design. But there are two other dimensions that I cover in the book. One is flow, and that’s how you move through the form, the order of the questions, how many screens it has, that kind of thing and that obviously impacts on the user experience. But the most important other dimension is the words.

Forms are a words-based interaction. So how the question you’ve asked and what information as help you give and what the buttons say really matters most. And so, very often you’ll see forms that are very attractive to look at but you can’t answer the first question because it’s ambiguous. Or less commonly, you’ll find forms that are really well worded but maybe a bit ugly to look at or the buttons don’t function right, moving backwards and forwards and so forth.

So there is a low bar but the good side of that is there’s lots of low-hanging fruit and by using sort of practical techniques in the book we can get our forms to a much better standard quite simply and easily, I believe. And that’s something I feel quite passionate about.

Gerry:

Yeah, I often tell people not to bother fixing their forms because a lot of the time people say, you know, “Wwe need to fix this form, or we need to get the colour right or we need to pick a font or we need to do…” and you look at it and you think, well how about all the stuff that’s just completely wrong with the relationship that you’re establishing with the customer or the citizen or the user or whatever and it’s like the focus is completely in the wrong area, like they are looking at layout and aesthetic but they’re not really looking at perhaps flow and you see something that’s incredibly clunky, and they’re worried about just whether the colour is right and it’s almost as if they’re avoiding thinking about the real problem.

Jessica:

Yeah, yeah and I think sometimes that’s for a very natural reason. We are human beings, unless you’ve got an impairment we are naturally very visually dominant creatures so we tend to interact with the world primarily through our sense of sight and so I think there’s a bit of evolutionary reason why we tend to focus on the aesthetics of the form but it is also something that we assess unconsciously. We look at something and we know whether we like the look of it or not. Whereas the flow and the questions, they actually need a bit of conscious work to think about them. And I always say to people, I’ve got an article on my website about this called Judging Forms that if you’re trying to judge whether a form is good or not the real metric is can the person fill it out, provide the right information to get the good or service that they need. Not judging it by having a look at it and saying does this appeal to me or not? Because a person can fill out a form if they can understand the words no matter how ugly it is, but if it’s attractive and they can’t understand the words or they can’t provide the answers they need to provide, they’re stuck.

So words really are the most important dimension.

Gerry:

Much more so than layout, for example.

Jessica:

Oh, totally.

Gerry:

One thing I liked about the book, and I did really enjoy the book, but one thing I really liked about it is the way you give definite directions. I mean I guess we’re kind of used to in the field of usability and UX whenever you say, “Should I put buttons on the left or the right?” or whatever somebody says “Well, it depends,” and they give you all these reasons and you go away and think and I still don’t know the answer. But you’ve sort of said “Do this” and “Don’t do that.” Was it easy to make those calls?

Jessica:

Well…

Gerry:

Are you happy to stand behind them and you know fight them out?

Jessica:

[Laughs.] Well, I should say before I get expelled from the user experience community, that yes, you know the context really matters and it’s not like I’m saying always put the button on the right hand side no matter what, full stop. What I’ve tried to do is create principles that you can follow that will work in all circumstances and those principles are based on academic research and decades of testing real forms with users, not just mine but that other people have done, to see what actually works and thankfully there are some things that are consistent no matter what your background is, your culture, your religion, what part of the world you’re from. There are some things about how the brain works that are consistent that we can draw on for the design of our forms.

So, for example, we know that from some work that was done in the early part of the 20th century things that are close together in space we tend to see as being related. So we can use that in our forms to, if we want it to be clear where the answer goes, we put the answer box close to the question. And we know that without even having to engage any conscious processing, human beings will see those two things as related without even realising that they’re doing that.

So that’s what I’m trying to draw on in the book rather than any sort of personal opinion or preference. Now, first principles, sometimes they butt up against each other. There might be something that says you should put this question early because it’s a primary question but it says you should put difficult questions late because they might put people off and so that’s where the “depends” does come into play and you can’t really make a ruling without knowing the specific context. And so you always need to be doing research with your users if you can, with your form design. But there are some really great, that fit into that kind of low-hanging fruit category, principles that anybody can adopt.

Gerry:

Now one of the things, I don’t want to annoy you, but what about placeholder text that we see so much of nowadays whereby somebody has either put the entire label inside the field itself or they’ve got a label and then some sort of instruction in the field and then when you click on it, it goes away or sometimes it floats up to above the field or something. Is that a good thing?

Jessica:

Some of your more perceptive listeners might have heard me sigh then when you mentioned placeholder text. Let me take you back to the medieval times.

Gerry:

Right.

Jessica:

A form, the definition of a form that I like to use is it’s just some kind of interface for collecting information from one party, transmitting it to a different party so the first party can get some good or service, can get something. It’s just any interface to make something happen.

Forms have actually been around for hundreds of years and I mentioned medieval times because some of the first recorded forms are what is called “indulgences,” now I’m not a scholar of Roman Catholic history so excuse me for getting the details wrong but in medieval times you were able to sort of reduce the amount of penance you had to pay for a sin by doing things like reciting certain prayers and so on and in later Medieval times, and we’re talking about the 13th century, this practice was a bit abused a little bit and people could pay money to have their sins sort of absolved, and a form was created where it had a blank space for the person’s name and a blank space for the amount of money that they paid and it said that the words around what was being done.

The key there, what makes it a form, is that it had blank spaces and that principle still applies today. People know a form is a form by seeing blank spaces or boxes to tick or radio buttons to click in and so if you’re asking people for text answers you need to have blank spaces on your form. So as soon as you put words inside the spaces, whether they’re the question itself or whether it’s help or something else, it stops looking like a form that they have to fill in it. It looks like it’s already been filled in and there is, there are some great articles on the Web, including one by Caroline Jarrett that gives data around how many errors and incomplete forms and abandoned forms come about because of text being inside the field. And when the whole flat design craze came about some of this was also a problem with fields having colour inside of them so they looked kind of more like buttons and, again, this is a problem because it’s not an empty space waiting for data to go inside it. And one of my more popular articles was on A List Apart called Flat UI and Forms which talked about this. So I kind of say to people if there’s one thing you do with your layout of your form, nothing else, it’s to have blank spaces where you put the text in. And it’s kind of a bit of an affliction, people wanting to play with putting things inside the field. There’s a new pattern, relatively new pattern, which is the float label pattern which attempts to address the issue of space. It’s come about because you know particularly on mobile you don’t have a lot of space so I think the thinking is if we put the question inside the field, save us some space, but to get around this problem of the field looking filled in, we’ll float the label up into the top border when the person clicks inside it. So it’s still also always visible which is great; the thinking behind it is really good. The problem is you still have some of the main problems with text inside fields. It doesn’t look like a blank field. You still need the same amount of size because to float the label up you still have to have space above the field and if you don’t use much space it’s because the label is really tiny and people can’t read it. So even now I don’t feel like that is a good solution to the problem and I continually recommend to people they just put the question above the field or to the left of the field, outside the box.

Gerry:

Okay, so no placeholder text.

Jessica:

No placeholder text. And there’s information in the book about where you therefore put the help text and how to arrange it so that it works on mobile and on desktop and on TV because, as you’ve seen, I believe very much in responsive design as well and rather than design different forms for different layouts and screen sizes, which is just going to become more and more unsustainable, designing one form that will adapt and flex to whatever screen size, device, what-have-you people are using.

Gerry:

I had an interesting issue where I did some forms for, they were mobile first, to use Luke’s term, or a term that Luke certainly popularised, and you know it was nearly, it was only a small amount because it was optimised for a mobile device so when we put it on the desktop, the designers, the visual designers started to put text around it, like instructions and yada yada stuff because it looked empty otherwise. It was a real battle. Have you come across that?

Jessica:

That’s interesting. I haven’t seen that, mostly because the forms I’ve been working on are actually very complex, long forms to begin with. So, and that’s why they’ve decided to engage a forms designer, whereas I think in a lot of other cases people just have a go at it themselves. In that case, I would be wanting to point out to them that people don’t notice stuff like a whole lot of white space around a form. Forms are a bit different from your other sorts of interactions, say watching videos on YouTube or listening to music or reading, in that people want to get in, get it done, get out again. They don’t actually care about the form; they care about the good or the service that’s on the other side of it. And so what we see when we do user research is they’re extremely focused on, not just getting to the questions, but getting to the first answer space and then moving to the next answer spaces and reading only as much of the question as they need to, they believe, to be able to answer and get through.

So, I daresay most people would not have even noticed that there was white space around the form, certainly wouldn’t have cared and by adding more words you’re likely to make the form look more intimidating, the more chance for distraction, more chance for errors. Yeah, tricky one.

Gerry:

Yeah, I just told them they couldn’t do it.

Jessica:

Great. [Laughter.]

Gerry:

So you talk about people being wanting to get in and get out and I guess you do really see this totally task-focused thing so I guess a couple of questions come to mind about that; one is I think newcomers to forms design, you hear them say so many times “but it’s in the instructions” or “it’s in the introduction.” Instructions just don’t work, do they?

Jessica:

Often not. The people filling out our forms are humans and if you’ve done any kind of user-centred design you will get to know human beings and we are fallible, we make mistakes, we’re in a hurry. We also might be really stressed or upset. One of the forms I worked on last year was applying for a restraining order against someone who was perpetrating domestic violence and so it was the survivor of the domestic violence filling out this form in the midst of something very traumatic and dangerous in a lot of cases. So it’s really important that we make it as safe and easy for them to get through the form as possible. So the tricky thing is that even if the person isn’t at the time traumatised, they’re unlikely to be giving the form their full attention. They might be filling it out while watching TV and eating dinner at the same time, “I just want to get some quotes for car insurance,” or whatever it might be.

So we have to assume that we’ve got say ten percent of the person’s attention. So that already means they’re unlikely to read any text beyond what they feel they have to. And when I say they feel they have to there’s this phenomenon called “satisficing” which all humans, all people do, myself included. The term itself was, originated in the Fifties and as a combination of “satisfy” and “suffice” and it’s this idea that we tend to only expend the energy we unconsciously believe we need to expend to get something done. And it makes sense, because if you think about us way back on the savannah as Neanderthals or whatever we were, with limited energy, and our brains use quite a bit, and so we need to preserve that energy so that if we have to run away from a woolly mammoth we can, what have you. And it persists to this day.

If you think about, well, sounds like you were away last night, but what you had for dinner last night, what we did in my family is I made tandoori chicken. Now I didn’t buy a tandoor, which is the actual proper oven that tandoori chicken should be made in, and then you make the spice paste myself. I bought paste in a jar and I marinated the meat and then I cooked it in a fry pan; that was doing just enough to get a good enough result for the situation. I don’t cook a five star meal every night and that’s satisficing.

Now when it comes to forms…

Gerry:

You made me hungry talking about it.

Jessica:

[Laughter.] When it comes to forms, what it means is that people will only read what they think they need to read. And, again, this is happening unconsciously. It’s not that people are being lazy or anything like this. It’s just how the brain works in order to be able to answer the question. And so what it means is they’ll only look at the instructions if they get stuck and they feel it’s worth the effort and they think the instructions might help them.

So one little tip I give people in the book is if something has to be read, make it part of the question and put it at the start of the question, not the end of the question and that way you’re much more likely to have it seen by the person filling out the form and yeah, it’s just the reality we have to live with. We have to assume that most instructions aren’t read.

Gerry:

I quoted you the other day actually from the book to a client because they had quite a nice form and I kind of liked it but you had to make a choice and they said “What is X?” because X was the thing that you needed to make a choice about, and it was just a link and it didn’t take up much space and you think “OK, if I don’t actually know what X is then I can go off and find out about it” but I said, “No, Jessica says you have to put in there on the form.” So I’m sure you’ll be happy about that.

Jessica:

Excellent.

Gerry:

Another question that occurred to me when you’re talking about people getting in and getting out. What’s the maximum number of screens or pages that you can have?

Jessica:

Oh, here’s my chance to say it depends. [Laughter.] It depends but what really matters is not so much the objective, quantifiable number of screens or questions but the perceived length that the form has for the person filing it out. So, I can’t remember if I talked about this in the book but there’s been a lot of research by the Disney company about queuing and how to make people feel like when they’re standing in the queue for Space Mountain, which is this amazing ride, but it’s a 45-minute queue, how to feel like it’s only 5 minutes and they do entertainment and they wrap their queue around so it’s not one long line and all this sort of stuff. And what they are drawing on there is this idea that it’s perceived length and perceived effort that matters much more than objective.

So you might have a form with seven screens of questions on it. But if the person can answer the questions quickly and easily and with very little cognitive effort, it might feel fine to them and it’s also about what the form’s trying to do. So, in the case of a restraining order form, it’s a much more serious situation. The participants, when we did research with them, they expect to be asked questions about quite a few things that are going on and so they expect it to take them time and that they’ll need to concentrate on it. Whereas someone getting car insurance quotes from different providers might not, it might feel like five questions is too many. And so it’s really about doing that research and getting that sense of what’s acceptable.

I do talk about in the book how to work out where to divide your form up and as a rule of thumb, you want to try and avoid more than seven screens just because the amount of clicking “Next” and “Back” starts to feel like work. But in that restraining order form it had eleven potential screens and questions, depending on the person’s circumstances and that felt okay for people. They thought it would take them 20, 25 minutes and yeah so that was alright.

Gerry:

I really upset a client by redesigning a two-page form into a six-page form. I must admit I was extremely nervous before we tested it but we found the same thing because you know because it flowed it was acceptable. You can hear a dog in the background by the way, perhaps, scratching.

Jessica:

Just keeping us company. Yeah and I talk about that too. Often in my training that people will try and make something shorter by making one big whopper of a question that’s got, that’s actually asking four different things at once and that’s so much harder for us to actually process that it might be a single question but it feels like a page of questions and breaking that up into four separate questions might feel even easier than the four so that’s why it’s a bit like the visual thing, people do get a bit hung up on the count of the number of questions and screens but…

Gerry:

Yeah it’s like you know the “no more than three clicks,” and you know, “no more than five to seven things,” where people get very hung up on rules that don’t really make a difference when you test with people. Because I’ve certainly found, as long there’s a flow, as long as you can see that you’re going in the right direction then people tend to go along with it without being overly stressed about how many actual steps it is.

Jessica:

Yeah totally and tied in to what you said there, as long as it doesn’t like break halfway through or stall or ask them a question that they have to then go away and get a document from a third party from, you know so those kind of flow things really matter as well.

[Caroline Jarrett asked me to remove part of this podcast because she considered that it gave the impression that she did not support Jessica’s book. She wants to make it clear that although of course there are a couple of points in forms design where she and Jessica do not entirely agree, she is hugely enthusiastic about the book and heartily agrees with the vast majority of it. - Gerry]

Gerry:

Have you any advice for designers who want to or are being forced to get involved in forms design for the first time? And how should they go about learning the things they need to learn?

Jessica:

Well I suspect there are a lot of people that end up doing it as part of a great web design project or an app design. So there’s a lot of people doing it out there. Of course I would recommend my book.

Gerry:

As would I.

Jessica:

Because I really wanted with the book for it to be, even though it’s grounded in research and academia, I didn’t want it to be that kind of book. I wanted it to be the kind of book that, you’re doing the work right now and you need to know what’s the best way; should I put the label above the field or to the left of the field? How should I write the question, and so on. So it’s very practical, it aims to be at least and give you enough to feel confident that your form is going to be at least, at the base, meet the baseline requirements for user experience.

I would heartily recommend getting the other two books as well; yours and Caroline’s and Luke Wroblewski’s because there is such a gap in the market of information and we all have slightly different perspectives on form design as well so I think that’s really good. I think diversity always means a better design and a better outcome if you include it and, as I said, I really hoped it would be a book where accessibility is incorporated as well so you don’t necessarily have to go out and read separate articles about how to make sure your form is accessible because that’s a really important part of, I don’t think it’s a good user experience if it’s not accessible.

Gerry:

Well the book is really excellent and again it’s called Designing UX: Forms and the subtitle, or whatever they call it, what do they call that bit there?

Jessica:

Byline? I’m not sure.

Gerry:

It’s “Create Forms that Don’t Drive Users Crazy,” and it is full of practical advice. It’s funny because that’s what when I was looking for stuff I mean I couldn’t find a book many, many years ago and I was looking for a book that I could give to clients and to managers and to people I was working with and say “Here, here’s a good book,” and I think with this you really can. I think you can say here’s the book to read, read this. Don’t have fights within your project team about whether to put labels here or there or whatever, you know just take this book and use it as the beginnings of your own definitions of a style guide or whatever. So it’s nice to have, it’s really nice to have that book. So well done.

Jessica:

Thank you. And if I could just add to that as well, I certainly have been trying to blog about form design, write articles about, in more depth about topics and so they’re available on my website and I invite people to actually email me with those sorts of debates. I want to write articles that respond to questions that people have when they’re designing forms in the real world. So people can just send an email and let me know if there’s something that hasn’t been covered. I run training courses, in-house and external, those sorts of things as well if they’re interested.

Gerry:

I’m sure there are and Jessica’s work really is excellent and she’s an expert in the field. So I thoroughly recommend the book Designing UX: Forms by Jessica Enders.

Jessica Enders, thanks for joining me today on the User Experience podcast.

Jessica:

Thank you very much Gerry, it’s been a pleasure.

Gerry GaffneyDefinitive Advice on Forms: An Interview with Jessica Enders