Julie Grundy – The UX of Form Design: Designing an Effective Form


(audience applauds) – Okay. Hi everyone. Thank you for being here after lunch. That lunch, I think was
the best lunch I’ve had at a conference. Who agrees? (audience applauds and cheers) Thank you, it really was. So, I’m here today to
talk to you about forms. Yes. So, a little bit of background. My name is Julie, once again. I’m Senior UX Designer for Bronto, which is an e-commerce marking platform that was recently purchased by Oracle. So, previously, I was in public relations, and about 10 years fell
in love with web design and development, and that
has since morphed into user experience. So, please feel free
to find me afterwards. I love chatting and networking
and just really thrilled to be here with y’all in New Zealand. Okay. So why do we care about forms? Well, forms are the linchpin
to all online interactions. Forms are important for
registration, for revenue, to grow our community, and
participation in sharing, and any task that requires
entering information. So, just think. There’d be no cat videos
on YouTube without a form, or none of us would be
here at this conference with registering for the
conference using a form. They’re incredibly important
to our interactions with life. So, Luke Wroblewski, who’s
the kind of gradnfather of webform design, said
that “Webforms are often “the last and most important
mile in a long journey.” And this really resonated
with me ’cause I can tell you previously, I was working in
an agency where we were doing drupal websites, and as
the information architect and UX designer, I was doing
a lot of things, and mostly kind of our forms went
something like this. About two to three days before
launch, somebody would say, “Julie, do we have a contact form?” And I’d go, “Oh shit, I
forgot the contact form.” So, I would end up then having
to enable the webform module or remind a developer to put
the webform module in the site and just kind of throw it together. So, Luke’s quote really rang
true and for me personally, which is why I started
researching really how can I make the best and most effective form? So, how much do we think
a bad form can cost you? Well, I mean, the real
answer is priceless, right? But I can tell you that for Expedia, it was about $12 million. They found that users
were going on the site, entering their travel
information, going through the whole process and
then clicking Buy Now, but not completing the transactions. This was happening
countless amount of times, so what’s up with that? Well, it turns out that
they had a field under First Name, Last Name for Company, and users were entering
their, on the billing, this was on the billing
screen, so users were entering their company– I mean, entering their bank
account, like their bank name in the Company field, and then
entering their bank address in the Address field, so
credit card transactions were failing because,
of course, the Address was the bank address, and
not, like, their actual home address that the
credit card company knew. So after doing a little bit
of research, they realized if they just removed that Company field, transactions increased
overnight, and over the course of that year, they earned
an additional $12 million in revenue. So, y’all, this is all
because of one form field. And the thing is is that UX
designers and professionals in this industry, we know better. Studies have shown that forms
that follow basic usability guidelines are faster to
complete and almost twice as likely to be submitted without errors, so, and our challenge is
is that forms are annoying. They’re a thing in between
the person and what they’re looking for. They’re that thing you have to
go through to get something, right? So, it’s kind of, it’s a
blocker often to something else why someone would even
go through the form. And, forms really have
lasting consequences. I can tell you that my
friend Missy works for, in D.C. as someone, I was telling her I was coming
to the conference to talk about forms, and in my research,
I’ve been thinking more about forms, and she said,
“Let me tell you about a form.” So, she works with folks
who are on disability and who are getting back to
work, so she was with a client one day and they were filling
out a form for the client to work at the local Harris
Teeter, which is a grocery store chain in the United States, and Harris Teeter had recently
redesigned their website, so they’re filling out the
form, name, information, you know, your basic online application, and in the State field,
they were in Virginia, she entered VA, which is the
state abbreviation for Virginia and they got an error
message, so they went back, and the client said, “Maybe we need to type
out V-I-R-G-I-N-I-A,” and still, got an error message, so they actually quit, they
left, and that client of hers left feeling like he was
not smart enough to work at Harris Teeter, and that
is actually our fault, that’s our fault as designers,
developers, that someone who should have been QA-ing
that site and missed it, so it’s just important to
remember that these decisions are things that we often
forget about really can affect people. So here’s an application
form for an online, for a job to work at Ladybird
and this is horrible. Imagine trying to go through this. Here’s an online application. Everything is required. It’s painful. (chuckles) Here’s an online application. I’ve got a select list
that has every type of, like, every type of job but
it actually doesn’t have my job in it, so I don’t
know what to fill out. All right, so, now we’re
going to talk about what makes an effective form. So you might say, well, Julie,
one that follows usability guidelines, like we talked about earlier, and I’d say you’re 100%
correct, but for today, we’re going to focus on
three guiding principles, which is to reduce cognitive load, to help prevent errors,
and to make it human. Okay, so, reducing cognitive
load means that we want to, to me, it means we want
the form to be scannable and have feelings of simplicity. So, first off, we’re going
to talk about labels. A label is the thing that
is in red here, circled. Now, we know that top-line
labels are best for faster form completion times. This is because it’s easier
to scan, and the reduced amount of eye movement needed
when going through the form, so it’s always best to
have top-aligned labels. It’s also important to
have your label close to the input box because that
way the eye visually knows they’re tied together. I’d also like to recommend
not to use all caps because it can feel like
you’re screaming at someone. And that’s not cool. Additionally, it’s really
important that we don’t use inline labels. Does anyone know what an, does anyone want a reminder
about inline labels? Basically, inline labels are
when you have a form field and the label for that
form, like, user name is in the form box itself. The problem with using inline
labels are that once someone clicks in the form, their
instructions go away, and like, we don’t
remember things, as humans, we just don’t, so, someone’s got to out, like, click out again. It’s making someone work harder. We’re not helping them
reduce the cognitive load. Also, inline labels, someone
can think it’s already filled out, so you just kind of skip it. And, according to an eye tracking
study from Norman Nielsen, blank, like, not inline labels, like
blank fields are actually more recognizable and draw the attention, eye’s attention more
than inline labels, so, remember our labels, top-aligned. Okay, we also, let’s
use sequential buttons. What I mean by this is put the
primary action on the right and the secondary action on the left. So if you want someone to
submit, put it on the right. If you want them to go to
the next screen, put it on the right. Like, in this example,
we’re going to delete. That’s what someone’s
intended to do, so it depends on your situation what
your primary action is. The reason why I say this
is because this follows most of our mental models
about which direction to go, so on the right is typically next, think about your web browser,
like the buttons at the top. Back is always left, so I
think this just helps us, helps the form be easier
to fill out if we know the, as designers, what we want people to do, put it on the right side. Cool? Oh yeah, don’t use reset. That should never be a thing, ever. All right, also, let’s
make our forms one column. This is for scannability and readability, and it’s also, this includes radial
buttons and check boxes. Also, this is awesome
if you, of course, have a responsive presence as well,
because it’s already aligned as it should be. All right, so now let’s
talk about options. And select lists, drop downs. So, if you have, it’s
recommended like, we, our brain can kind of absorb
about five things at one time so if you have a select list, like so you have five option, if you want to actually show
all those words on the page, if you have between six
and 26, you can put those in a select list, but
if it’s more than 26, try and use contextual search. All right, another way we’re
going to reduce cognitive load is to match our field length
to estimated text size, so, in this example, an expiry date, that’s a, you know, like
month/month, year/year. That makes sense. Zip or postal code is a little
too big here in my opinion, but, and even though all your, I work with a visual
designer and he’ll say, but Julia, it’s not lined up properly, and I’ll say, I don’t care,
like, someone’s going to think that they might be messing
something up, or it’s like, if we know how long something
needs to be, that’s as long as the text that, field
input size should be. Right? Okay, and let’s group related
information in our forms. This is basically applying
content strategy to your form, so we know how to do this. Put things together that
make sense together. Yeah, once again, I know
you know how to do this. All right, use pre-fills when you can. Pre-fills are like hooking
into Google APIs to help bring in an address, or if
you’re asking for someone’s email when someone use the @
sign, then maybe prompting them up with @gmail.com or hotmail, et cetera. This is just another helpful
way to get someone through the form. Okay, also, we want to show progress. This is especially
helpful on longer forms. Give someone context for where
they are, in different steps. It gives them a sense of
place, and this is typically pretty good for onboarding as well. Okay, we also want to add
attributes for usability purposes so let’s say if you are, an
attribute is a piece of code that you put in your form
or your developer puts in your form, that it’s
basically saying, like, I know what you’re going to
put in so I’m going to help you with that, so, for
instance, if you know it’s going to be a telephone number, you an put in the attribute
tel, which, if you’re on a mobile device, that’s how
the number keypad pops up instead of, you know, the alphabet keypad, so that’s just another
way we can help people. Okay, an input mask also
are important for reducing cognitive load. This is just helping people
format, so if you know it’s going to be a telephone
number or a credit card number, this is like
allowing that little dash and the parentheses to be
there so the user does not have to fill those out. And, doing them right is key. It’s also important that
these aren’t really going to show up unless you’re
on focus, as well. All right, so that was, once again, I’m going through
a lot of things on how to go through a form, but that
was how we can help reduce cognitive load, but now
we’re going to talk about how to help prevent errors. And this is the practice
of basically putting up a, putting up a fence, like
helping people not make errors, exactly what it sounds like. Okay, first off, field validation. So, we want to specify errors in line, and we want to validate items per field. This is an example from mint.com. I thought they did it really well. They had nice, clear context. They had nice examples for me. I mean, nice descriptions
for what I was doing wrong, for telling me, like, hey
this is what you can be doing. We all know how frustrating
is it, after you filled out a form and then pushed
Submit, and then get your sea of errors. This is slowing us down and
making someone not get to that thing they’re hoping to
get to at the end of the form. Also, with this, it’s
important that we don’t show in line validation on focus. We want to show it on blur. That means don’t wait ’til
someone clicks in the input, like, we don’t want to, like, once you click in,
you want to wait ’til they click out to show the
error message, if there is an error message because
if you do it on focus, which I see sometimes,
it’s like you’re basically yelling at someone before they’ve
even tried to fill it out. It’s like saying, hey,
you’ve done this wrong, and you haven’t even tried yet! It’s just really a negative
experience (chuckles). Okay, so we also, we want
to leave select lists blank, so, this is because it’s, select lists are really
easy to skip and if you’re scanning a form, if people are scanning a form
and it’s already filled out or let’s say there’s the default, if it’s an alpha-order
list and the default is A, whatever that is for you, chances are that someone’s
just going to skip that and not change it, so this is helping, this is making someone basically,
potentially give an error or a input at, an answer they might
not have meant to give. So, static values are
really easy to skip and when it’s blank, similar to what
we talked about earlier, when it’s blank, it’s actually
more obvious to someone that they need to fill it out. However, if you know that 90%
of your users are going to choose one option, you can use
a smart default in that case so for instance, here, they, I think they were using
geolocation to know that I was in the United States, so
they were able to say, hey, okay, we’re going to
pre-populate United States for you but in general, it’s always
better to leave select lists blank if you don’t have that kind of data. Okay, so help text. Sometimes you need additional,
like, hey, here’s what we mean by this, and when
you’re in your form, which is completely fine. It’s recommended to put help
text underneath the field box. Luckily for anyone who
works with drupal sites, this is how drupal does
it natively, so, it helps, it’s nice. Okay, so it’s also nice to
differentiate button styles. Kind of similarly to making
them sequential, the primary, let’s make it more visually obvious. Let’s say, okay, this
is big, this is bright, this is what we want you
to be doing or what we anticipate you doing. Once again, I think one of the
most frustrating experiences I personally have had is
to fill out a form and then accidentally push the wrong button, right? Okay, so now we’re going
to talk about how to make forms human. Because forms really are kind of the, it can be, it’s like
conversation almost that you’re having with someone, and it’s
a really impersonal thing, like, there’s absolutely no, well, often, there’s no
customization to it and there’s, like, it can be really, they can be really dry, but
let’s remember that there’s actually a person on the
other side of this form who’s filling it out. So as designers, it’s important
that we make our forms as human as we possibly can,
so now we’re going to talk about some tips on how to do that. Okay, similar to what Kyle was
talking about this morning, we want clear and simple
language and call to actions, so it’s important to
do your user research, know who your users are and
speak to them in a language that they understand. Labels and buttons should clearly
explain what they’re doing and be written for the
user, so in this example, this is, I was looking at
a snowboard on Burton.com, and I said, oh sure, I’ll
sign up for your newsletter. I really liked how they
said, I’m interested in gear for men, women, or kids, in the form. That was a really friendly
way to say, hey, how, in the future, how should
we market to this person? Also, we want to limit typing. Don’t make people work any
harder than they need to. We wouldn’t do that in real life. We don’t want to do it on a form either. Okay, and we want to make it accessible. Web accessibility refers
to the inclusive practice of removing barriers that
prevent interaction with, or access to websites by
people with disabilities. And, if a website or app
is designed, developed, and edited with accessibility
in mind, then all users have access to the same
information and functionality. And, sites and apps that
are designed accessible are actually better for everyone. Kind of, accessibility
practice is one of those things that once you do it, you
find a lot of hidden benefits as well. For instance, ramps aren’t
just only used by people in wheelchairs. Strollers and people with
bad knees, on crutches, or just someone who prefers
to take a ramp and not the stairs, right? So, there’s a lot of hidden
benefits in accessibility and it’s incredibly
important with forms as well. There’s a lot written
about how to do this, on W3C, and really, if you
just code a form in a clean way it will be accessible. It’s better for everyone. Okay, and we want to
value our users’ time. Amanda mentioned earlier,
like, if it’s only $10, she’s not going to do it. We want to make sure we
are valuing someone’s time as they’re inputting,
they’re there on the form, they’re taking their time
out, we want to really think about the questions we’re
asking, so in this example, I was redesigning the giving
form for Duke University and this is the old form, and
I said, it was really long and lot of stuff, like this
actually only the second half of the form in the screenshot. I couldn’t fit the whole
thing, where you’d all be able to read it. In this box, Enter any
comments you have concerning your gift designations,
maximum 1,000 characters. Nobody was doing anything
with this text box, so people were often, people
were just entering things like “Say hi to Bob for me,” or “Go Duke!” And it wasn’t that, that data wasn’t actually going anywhere, so we removed that. Also, with our user research,
we learned, with alumni dues, we could remove that from the redesign, we could remove that
from the new iteration because it wasn’t just alumni
who were coming to the form, it was people who were also
giving because they really liked the basketball team. So, it’s just really important
to make sure we think about who is going to be on this
form and do we really need to ask that, because I want to
make sure I value their time, just as you would in real life. Okay, and also consider the context. People are going to be
filling out forms in all sorts of different places so we
want to think about where is someone going to most likely be? Social situations matter and
it includes forms as well so if you are, let’s say
a car insurance form, you want to make a claim
on your car insurance, there’s a possibility that
someone’s filling out that form right after they’ve had
their accident, on the side of the road, so you want to
make sure you think about color contrast and, is
the text big enough? And are you using language
that empathizes with them? It might be a really scary
moment for that person, right? Or, if you’re sick, if it’s
a form to maybe request a visit at a doctor’s office,
that person could be sick when they’re filling out the
form, so you want to make it really clear about what
to do and make, you know, make it as easy as possible
because situations matter. Okay, and, once again,
clear call to actions. Right here, I’m really
talking about buttons because it’s important to remind
people why they’re filling out the form. This is an airline in
the U.S. called Delta, and the button says Find
Flights, which I just thought was really clear, and I liked
that it was reminding me why I was filling out this form. Not just Submit or Go, let’s say. This is also good for
accessibility, like if you have a home page and you have
a couple news snippets and then you want to say, like, more news, you want to show more news
and go to your news page, it’s awesome to say More
News, not just More. So, we want to be as clear as possible. All right, so now I’m going
to go through some kind of common questions that people ask me about, because once I started talking about forms and thinking about forms,
it kind of comes to me, so I encourage you all to
do that too afterwards. Somebody would say, Julie,
forms, the shorter the better, right? And I’d say, totally depends. So much depends on the
context and it doesn’t, like studies have shown
that long forms are fine, as long as the questions
are contextual and engaging, so really, it always does
come back to research. Or, optional versus required. Like, oh, hey, should we, should this field be required or optional? Or, what’s the deal with that? It’s best to mark your optional fields, not your required fields,
and I recommend marking your optional fields in
parentheses with the words optional in there. This is because not everyone
knows what that asterisk means. Right? And, the required is, like,
saying something is required is a little bit, is much more harsher than saying optional. Noting optional is more
friendly, and we know someone’s there to fill
it out, so it’s really not necessary to over, to show the required because
they know they have to fill out the fields to get to the next step, right? So, marking optional is showing, it’s showing that the
fields that aren’t optional are required. Also, let’s think about it. Required is really a developer, required is something that actually goes in the code to make sure someone fills out the form,
so this is a design pattern that is being influenced
by code for us, right now, and we don’t need to do that. It’s totally fine to just mark optional. All right, so now we’ve got
some interactive time here. So, help me chat about what went wrong. Okay, so this one,
we’ve got inline labels, and I can tell you, I typed
in Durham, North Carolina for my location and it
says location not found. I promise it’s a real place. All right, here, my buttons
are all out of order. Let’s see, it’s not sequential. I’m getting an error
message before I submitted, and just like, how are
you going to have a form within a form? It’s horribly unorganized. I don’t have my content group together. Okay, here, I don’t
know how to close this. I don’t see a close button. This is not human. You wouldn’t trap someone
in real life, would you? (audience chuckles) Oh, wow, I’ve got way
too many select lists. Let’s see, they’re not blank. We should really have Please
select not everywhere, and the input field, the
fields don’t match the size of what’s in there at all. Also, this is making me do math. If y’all can’t read it out there, it says, Skill test question: 4
plus 10, divided by 5. What? This is crazy! These are real forms too. This one, I’m not even sure
what all went wrong here, but (chuckles), it’s just bad. All right, so here we have
an example of in line errors that were given on focus, so, basically, I just clicked in First name,
and then I got this prompt, What’s your first name? But already got error messages
in all the other fields. I hadn’t even filled it out yet. I hadn’t even tried and it
was telling me I did it wrong already, right? It’s sad. Okay, so while I just have
a couple minutes left, I’m going to do a quick chat
about how I kind of feel like the future of form design’s going. And I just wanted to put
that cat meme in here. Okay, so material design is,
as we all know, it’s a style, or as you might know, it’s a
style guide or a design trend from Google. It kind of breaks my top-align
rule that I chatted about in the beginning, but it
doesn’t really break it because it’s an inline label
and when you click in, the label goes above. It’s really cool. I think it works great. It’s important, though,
to test with your users, your user base, to make
sure it works for them and also watch your
accessibility contrast ratios ’cause often, I see a
light gray text on a white, with material design. Okay, conversational user interfaces. These are the chat box. Like, this is really
just a form in itself. It’s a way that the user or
the person, the user, the human is giving interaction to
the company, to the website. It’s successful in collecting data. But, I mean, it’s kind of like, it’s somewhere in the cousin
of form design, I’d say. Also, voice is a really cool
way that we’re going to be interacting with our, with sites, brands and apps in the future, to get that same kind of
information that one might be filling out in a form, and I
can’t wait to listen to Mark later today talk about voice. You know, I think in my
experience, usability heuristics still hold true when we’re
talking about voice UX, but, basically, I can’t
wait to see where this goes. All right, so if you
forget everything I say, which is totally cool,
please remember, just these guiding principles, which
when you’re talking about form design and you’re
thinking about your forms, we want to help reduce cognitive load, help prevent errors, and make it human, and when in doubt, be sure
to talk to your users. So, thank you very much. I appreciate you all being here. (audience applauds)

9 comments

  • splutch49

    impressive work, thank you for sharing your knowledge ! It is the best video about forms that I have seen so far

    Reply
  • gagan ahuja

    Good video.

    Reply
  • gagan ahuja

    Do you think voice input option should be available for users in forms?

    Reply
  • A Nonymouse

    Wow…tough crowd! Great presentation…really informative.. thanks

    Reply
  • lalaithan

    This is great in both info and presentation style! Thanks for sharing it.

    Reply
  • Geobradly Jeft Aguyaoy

    Nice Presentation! 🙂

    Reply
  • Tony Wu

    Hi Julie, love to watch if you have "Voice and tone" section as well. Thanks for your great sharing 🙂

    Reply
  • black jack

    The hard part. Validation

    Reply
  • Steven Moore

    Excellent! Clear and very helpful. Thank you

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *