IntroductionWelcome| 00:04 | Hello, and welcome to Web
Form Design Best Practices.
| | 00:07 | Now we're taking a detail dive into
what makes web forms tick and even looking
| | 00:11 | at a couple of ways to gather information
from people without using web forms at all.
| | 00:15 | So if you're interested in boosting
conversion while delighting your customers,
| | 00:19 | this is the course for you.
| | 00:21 | At the beginning, we'll
quickly look at why web forms matter.
| | 00:24 | From commerce, to community to
information gathering, web forms play a crucial
| | 00:29 | role on the web and the details in web
form design can have a really big impact.
| | 00:34 | Next, we'll take a look at
how we organize web forms;
| | 00:37 | do we lay it out over a single page,
across multiple pages, how do we organize
| | 00:41 | and structure in ways that's
meaningful, and drives more use and conversion.
| | 00:45 | Now we'll take a look at Form Interactions.
| | 00:48 | This is where the rubber really
hits the road and we're having
| | 00:51 | conversations with our customers.
| | 00:53 | Through the back-and-forth
interactions in our designs, we can either make
| | 00:56 | things delightful, or frustrating for them.
| | 00:59 | And last but not least, we'll
look at moving beyond web forms.
| | 01:02 | How we can take input from people
without requiring them to go through series of
| | 01:06 | labels and input fields?
| | 01:08 | I'll provide a lot of specific
examples, and then wrap it up in a series of
| | 01:12 | best practices that allow you to apply the
lessons to your specific product or service.
| | 01:17 | So without further ado, let's jump right in.
| | Collapse this transcript |
| Why forms matter| 00:00 | Let's start off with talking
about why web forms matter.
| | 00:03 | To do so, I want to start
with a little bit of a story.
| | 00:06 | I fly a lot, and when I'm in an airplane,
I'm actually very proud of the fact
| | 00:09 | that I can get my Inbox down to 0.
| | 00:11 | In order to send off all the emails that
I wrote up on the plane, when I land at
| | 00:15 | the gate, I need to get online.
| | 00:17 | So I sit down, pull open my laptop
and what greets me? You guessed it;
| | 00:23 | a web form.
| | 00:24 | In this case, the Boingo
AsYouGo sign up to get online form.
| | 00:28 | In order to get online, I have to fill
in my first name, last name, email, some
| | 00:32 | credit card information, and
accounts and then hit Submit.
| | 00:36 | Doesn't seem too bad, so let's get started.
| | 00:39 | For my user account, I'll pick
lukew, this is what I usually use.
| | 00:42 | Hit Submit and notice any problems?
| | 00:46 | Might be a little difficult to see,
but there is an error on the screen that
| | 00:49 | tells me this user name is already in use.
| | 00:52 | That error is actually the same color
and size as the title of the form so it
| | 00:55 | doesn't really pop as much as it could.
| | 00:58 | Needless to say I still want to
get online, so I'm going to try again.
| | 01:01 | I need to pick a new username and
refill in a number of fields that have been
| | 01:05 | conveniently removed for me for
security, like my credit card information,
| | 01:09 | password, confirm password,
password recovery code.
| | 01:12 | So let's try again with lukewer.
| | 01:16 | Same problem, same fields erased.
| | 01:19 | After trying this two or three
more times, my flight starts to leave,
| | 01:22 | I don't get online, and we're still for Boingo.
| | 01:24 | They don't get the money I was willing
to pay them to jump onto the Internet.
| | 01:28 | What does this tell us?
| | 01:30 | Well, it's a simple lesson
and it's one that forms suck.
| | 01:34 | Forms suck, because they stand in
the way of what we actually want.
| | 01:38 | This was a lesson I learned the hard
way at eBay, where the process of selling
| | 01:42 | something online at eBay just
required a couple of input fields.
| | 01:48 | Well truthfully, they required a lot of
input fields, and some people would make
| | 01:52 | the case that this was actually quite painful.
| | 01:54 | Yet at the same time, eBay was the
30th largest economy in the world.
| | 01:58 | There are 700,000 people in the U.S.
making their full-time living selling on
| | 02:02 | eBay, and around $8,000 worth of
goods are processed on eBay per second.
| | 02:08 | So while this web form looked a bit
painful, it was extremely powerful and just
| | 02:12 | about anywhere we look online where
something interesting is happening, there is
| | 02:16 | a web form involved.
| | 02:17 | In commerce, like on eBay, somebody
wants to purchase something, a company wants
| | 02:21 | to sell something, what's standing
in-between them? You guessed it,
| | 02:24 | a web form.
| | 02:26 | In social and community based sites,
somebody wants to join a site or register
| | 02:30 | or converse with someone else on the
site, what's in the way? Yup, a web form.
| | 02:36 | Productivity, managing your
information, utilizing increasing amounts of
| | 02:40 | self-service applications on the
web, what's there? Yup, a web form.
| | 02:45 | Anywhere there is something happening
that's a value like money, community,
| | 02:50 | information, or self-service
solutions, a web form tends to be involved.
| | 02:54 | Therefore, the design of web forms
really matters. But can it have an impact?
| | 03:00 | Looking at YouTube, the popular video
sharing site on the web, we can see how
| | 03:04 | much attention they pay to form design details.
| | 03:06 | Here is a redesign from 2007 followed
up by another one, leading it to some of
| | 03:11 | the work they did in 2008.
| | 03:13 | And you can see as we go through the
years looking at the single video upload
| | 03:17 | form, drastic changes have been made,
small adjustments have been made, and a
| | 03:22 | lot of testing has been done to
get this form as optimal as possible.
| | 03:25 | So what was the impact of
all these design iterations?
| | 03:29 | In 2006, YouTube had about
65,000 videos uploaded per day.
| | 03:33 | In 2007 that number grew, in 2008,
the same story.
| | 03:38 | In 2009 all way up to 2011 what we're
seeing over a million videos being
| | 03:43 | uploaded per day on YouTube.
| | 03:45 | Now while their audience crew during
this time all that the attention to detail
| | 03:49 | that they pay to their web
forms also paid off very big.
| | 03:52 | And you see that's across
the board in form redesigns.
| | 03:55 | It's not uncommon for a form
redesign to see double-digit increases in
| | 03:59 | conversion in commerce, registration, and a
number of common use cases on the Internet.
| | 04:04 | Paying attention to the details really
does matter and can have an impact, but
| | 04:09 | form design doesn't just matter on the desktop;
| | 04:11 | it increasingly matters on the large
number of mobile devices that sit in
| | 04:14 | our pockets all day.
| | 04:16 | From commerce like Amazon doing over a
billion dollars via mobile devices and
| | 04:21 | Best Buy doubling their mobile Web users
each year, to Social where Facebook sees
| | 04:27 | 30% of their new posts happening on
mobile devices and Twitter sees 16% of their
| | 04:31 | new users signing up through
mobile even down the things like e-mail.
| | 04:35 | 70% of smartphone users are now
accessing e-mail on their mobile devices.
| | 04:39 | That's a lot of activity where input matters.
| | 04:42 | From commerce, to social to
productivity, people are increasingly using their
| | 04:46 | mobile devices to get things done
and get things done using forms.
| | 04:51 | As we've seen, web forms sit at the
intersection of business, community,
| | 04:55 | self-service, information management, and more.
| | 04:58 | Paying attention to the details of
form design can have a very big impact.
| | 05:01 | So let's examine those details
thoroughly starting with form organization.
| | Collapse this transcript |
|
|
1. Form OrganizationForm length| 00:00 | As we've seen, web forms sit at the
intersection of business, community, information
| | 00:04 | management, and more.
| | 00:05 | As a result, the details of
their design really matter.
| | 00:09 | So in order to examine those details,
let's start by looking at form organization.
| | 00:13 | One of the biggest questions in
form organization is around length.
| | 00:17 | Let me illustrate that by looking
at the Boingo form we saw earlier.
| | 00:20 | The Boingo form I filled out when I was
at the airport looked a little like this:
| | 00:24 | There's a Required Information
section at the top; Credit Card Information
| | 00:28 | following that; an Account Section;
and then a Terms and Agreement.
| | 00:32 | Boingo however, recently redesigned
their form, and they went from a single-page
| | 00:36 | solution, to a multi-page solution.
| | 00:39 | Here I'm showing you step 1
where you Select the Plan.
| | 00:41 | Of course, there's step 2, Setting Up
Your Account and it feels like Boingo has
| | 00:46 | actually added a significant amount
more input fields to this section.
| | 00:50 | Before we get to section 3,
let's take a step back.
| | 00:54 | This illustrates, as I mentioned, a
common question about Web form organization.
| | 00:59 | Is it better to put all my content on a
single web page, or across multiple web pages?
| | 01:04 | And if we are using multiple web
pages, what's actually the right length?
| | 01:08 | Well, in order to dig into
some answers, we did some testing.
| | 01:12 | In fact, we brought in about 24
participants and we ran them through standard
| | 01:15 | usability and eye tracking metrics.
| | 01:18 | We took the same form and
we tried a few variations.
| | 01:21 | One, we broke it up across
multiple pages, 1, 2, 3.
| | 01:26 | We then took all the same input
fields and put them on one long page.
| | 01:30 | Then we tried some dynamic solutions
where we used expandable and collapsible
| | 01:34 | sections on a single page, again,
containing the same information.
| | 01:39 | So what did we learn?
| | 01:40 | All four versions delivered a 100% pass rate.
| | 01:43 | That means conversion didn't really
change from a multiple Web page solution, a
| | 01:48 | single Web page solution, or a
dynamic inline form solution.
| | 01:53 | It didn't really seem to
impact things either way.
| | 01:55 | So really, what does impact conversion?
| | 01:58 | Well, let's look at a few case
studies that helped to tell the tale.
| | 02:02 | First up is a Quick Contact Us form.
| | 02:05 | The big change here in A/B testing was
going from an eleven-field Contact Us form
| | 02:09 | down to a four field Contact Us form.
| | 02:11 | When this happened, we saw 160%
increase in the number of forms submitted and
| | 02:15 | 120% increase in conversion ratio.
| | 02:18 | That's a pretty significant boost.
| | 02:20 | And where do we change?
| | 02:22 | Well, we removed actual requirements.
| | 02:24 | We went from eleven fields down to four.
| | 02:27 | Every question we forced people to
consider means they need to parse it,
| | 02:32 | determine the answer they want to input,
and then actually provide it inside the
| | 02:35 | affordance we give them.
| | 02:36 | That's a lot of thinking and a
little bit of time for each question.
| | 02:40 | When we remove requirements, we
actually are giving people the opportunity to
| | 02:44 | get through things faster and easier.
| | 02:46 | Additionally, the quality of
submissions in this example didn't really change.
| | 02:50 | It turned out, some of the
data that this form was asking;
| | 02:53 | either wasn't required or wasn't being used.
| | 02:56 | In fact, this is a pretty common situation.
| | 02:58 | Many times we'll port over a legacy
paper form or take a form that existed
| | 03:03 | earlier without really examining each question.
| | 03:06 | Does it have to be there?
| | 03:07 | When we do take a critical look at
every question, we can really boost
| | 03:10 | conversion, as this next example illustrates.
| | 03:14 | Here on Expedia's Purchase a Ticket form,
there was an optional field called Company.
| | 03:19 | Many people tripped up on this field
not understanding where to apply to.
| | 03:23 | In fact, the ones that did;
| | 03:25 | ultimately did not purchase a ticket.
| | 03:27 | Expedia noticed this in
testing and removed the feature.
| | 03:30 | From that they got $12
million of profit overnight.
| | 03:34 | Looking very judiciously at each of
the details in their web form designs,
| | 03:38 | Expedia found fifty to sixty of these kinds of things.
| | 03:42 | That's a pretty big improvement.
| | 03:43 | But it's not just actual removal of
requirements that can make a difference in conversion.
| | 03:48 | In fact, sometimes just a
perception of requirements is enough.
| | 03:52 | Looking at this case study, for a big-
box retailer, we see that the original
| | 03:57 | checkout form had two
actions: Login or Register.
| | 04:00 | It was possible to purchase something
on the site without creating an account,
| | 04:03 | where you wouldn't know
it from these two actions.
| | 04:06 | When the actions were changed to:
you do not need an account to buy, a
| | 04:11 | huge change happened.
| | 04:12 | That is, 45% increase in purchasing
customers and $300 million in revenue per
| | 04:19 | year, just from an alteration of
the perception of requirements.
| | 04:24 | It's not just perception of requirements.
| | 04:26 | The actual indication of
requirements can help a lot as well.
| | 04:29 | In this rather simple case study, all
that was changed was the word "optional" was
| | 04:34 | added to Phone Number on a
six-field contact us form.
| | 04:38 | The Phone Number field was always
optional, but the indication of it wasn't as
| | 04:42 | clear as it could be.
| | 04:44 | When this change was made, the
form had a 2x increase in conversion.
| | 04:48 | The required Phone Number field actually
turned out to have a 37% drop-off rate.
| | 04:53 | Lots of people fell off, even
though that field was not required.
| | 04:57 | So as we've seen, actual requirements,
perception of requirements, and the
| | 05:02 | indication of requirements are all
levers we have to pull when we look at
| | 05:06 | boosting form conversion.
| | 05:09 | To illustrate this even further, let's look
at an example of how a typical form gets made.
| | 05:14 | Let's say we want our customers
to be able to contact us online.
| | 05:17 | Giving that requirement to a design
team may result in the following form:
| | 05:21 | Who is contacting us; how can we contact
them; the message they're contacting us
| | 05:26 | about; and ability to submit
that message. Pretty simple.
| | 05:30 | But now the Sales team finds out we have
a means by which customers can contact us.
| | 05:34 | So they quite quickly add
Phone Number, Address, City.
| | 05:38 | After all, they do want to follow up
with these leads, (oh, and by the way, they
| | 05:42 | need to make sure that this message
gets routed to the appropriate salesperson
| | 05:46 | so better ask them about the
subject they're contacting us on.)
| | 05:50 | From there, the engineering team finds
out about the form and they quickly point
| | 05:54 | out that the way we store usernames
and addresses in the backend requires a
| | 05:58 | number of additional fields.
| | 06:00 | The username needs to be split up into
name and last name, and we have to have a
| | 06:04 | more structured set of inputs for the address.
| | 06:06 | Next up, marketing learns we're talking
to consumers, and they say, hey, we need
| | 06:11 | some demographic information here.
| | 06:13 | Are they male or female, when were
they born, oh, and by the way, I bet they
| | 06:16 | want to opt in to our marketing emails?
| | 06:19 | With all this information being
collected, the Legal team quickly finds out and
| | 06:23 | makes sure that an agreement to privacy
policy and terms of service is included.
| | 06:27 | So what's happened?
| | 06:29 | Our simple little form has
turned into a monstrosity.
| | 06:32 | Rather than just allowing people to
quickly send us a message, we now have them
| | 06:35 | jumping through hoops created by
engineering, sales, marketing, and legal team.
| | 06:39 | None of these teams themselves are wrong.
| | 06:42 | In fact, they're looking out for the
best interest of the company and taking
| | 06:46 | their particular point of view to the form.
| | 06:47 | The problem is, when somebody comes to
this form they don't see all these details.
| | 06:52 | What they see is the
company that the form represents.
| | 06:55 | They're looking at it from outside-in,
whereas each of these departments is
| | 06:58 | looking at it from inside-out.
| | 07:00 | And that's the
perspective change we have to make.
| | 07:03 | Our forms need to communicate with one
voice out to our customers, not with the
| | 07:07 | voice of a bunch of different groups.
| | 07:09 | So the philosophy that Caroline Jarrett lays
out in her Web Forms book is really applicable.
| | 07:15 | She urges people to Keep, Cut and
Postpone what's in their Web Forms. Keep means
| | 07:20 | stick with the fields that
you actually have to have.
| | 07:23 | Cut means get rid of everything
that's not entirely necessary.
| | 07:26 | And Postpone indicates that there maybe a
better time replace to ask some of your questions.
| | 07:31 | Maybe it's not at the point of first contact.
| | 07:34 | Somebody just wants to send you a message,
you may not need to route that to the
| | 07:37 | appropriate salesperson just yet.
| | 07:39 | That can be a series of follow-on questions.
| | 07:42 | Applying this methodology to the
Boingo form we saw earlier, can get us a
| | 07:45 | significant reduction in the amount of steps.
| | 07:48 | So instead of step one, step two, and step three,
and all the fields we have therein, we
| | 07:54 | can blow things down to a
much simpler set of questions.
| | 07:57 | When somebody wants to get online,
they really need to tell us two things.
| | 08:01 | One, how will they pay for it?
| | 08:03 | And two, whether or not they
actually need a receipt for it?
| | 08:06 | You can see that represented in
my redesign of the Boingo form.
| | 08:10 | First up, tell us how you're going to pay?
| | 08:12 | Second up, give us your email address
only if you want a receipt, much simpler,
| | 08:17 | very streamlined, and easier.
| | 08:19 | This sort of trimming is
especially important on mobile.
| | 08:22 | You can see again, Boingo has asked
the same questions they have on a desktop
| | 08:26 | now over a series of five pages.
| | 08:29 | When the constraints of mobile devices
are tight and providing text input is
| | 08:33 | hard, the type of consolidation we did
on the Boingo form was an even longer way
| | 08:37 | on mobile devices, as you can
see in this redesign example here.
| | 08:42 | Wrapping up on form length, it's
really important to be succinct.
| | 08:45 | Take the time to evaluate every question
you're asking people in your Web forms.
| | 08:49 | Every question you put in front of
someone requires them to think about it,
| | 08:53 | formulate an answer, and then put
that answer into whatever input field of
| | 08:57 | forms you've provided.
| | 08:58 | Not only does that add up to time,
it also adds up to mental load.
| | 09:02 | On the topic of one page, multiple pages,
or one really long page, if your form
| | 09:08 | naturally breaks down into a few short topics,
usually a single web page will do just fine.
| | 09:14 | If you find yourself with multiple
topics each with a decent amount of
| | 09:17 | questions, multiple web pages tend to do better.
| | 09:20 | And lastly, if your form contains a
large number of questions, but they're all
| | 09:24 | very related around a single topic,
| | 09:26 | one long web form usually will do best.
| | 09:29 | Overall, managing form length is
really about making sure you have the
| | 09:32 | minimum amount of questions
necessary, and not including things that don't
| | 09:36 | need to be there.
| | Collapse this transcript |
| Form structure| 00:00 | As we have seen, form length is an
important part of how we organize our web forms,
| | 00:04 | but form structure also plays a
role, particularly on mobile devices.
| | 00:08 | So let's look at a couple of
examples of form structure and some of the
| | 00:11 | considerations we think about when designing.
| | 00:14 | First is sequential.
| | 00:16 | I recognize this example from the Boingo
Get Online form I talked about earlier.
| | 00:21 | A sequential form is a series of
questions that have to be answered together in
| | 00:24 | order to complete a task.
| | 00:26 | You want to buy something, we
need to collect information.
| | 00:29 | You want to register we need
to collect some information.
| | 00:32 | Basically anything that requires answers
before getting to what someone's goal is.
| | 00:37 | We think about designing sequential
interactions, the idea is to guide people
| | 00:42 | from start to finish as painlessly as possible.
| | 00:46 | The other type of form that we might
think about though is a non-linear form.
| | 00:49 | A non-linear form is a form where there
is series of questions, but not all have
| | 00:54 | to be filled out at the same time.
| | 00:56 | Think about editing a set of existing
information, or adjusting some settings.
| | 01:01 | Here the goal is more to pick out one
or two things that you want to change
| | 01:05 | rather than go through every single
question one by one in order to get to a goal.
| | 01:10 | And when we design these, exposing
every single question in a non-linear form
| | 01:16 | especially on a smaller screen can be
problematic, instead we want to do our
| | 01:20 | best to conserve screen real estate and
actually show the output of these forms,
| | 01:24 | so that people can decide really
quickly where they need to engage.
| | 01:28 | Looking at the Edit Profile form on the
right here you can see that I'm looking
| | 01:32 | at the name, title, and web site of my profile.
| | 01:35 | If I want to edit any one of these
items we simply need to tap on it and I
| | 01:39 | enter a small interactive form right
then and there that allows me to make
| | 01:43 | changes and save them.
| | 01:45 | Once I've save those changes, I can be
done or I can move onto another piece of
| | 01:50 | the form such as my title, and go through
the same non-linear sequence within the form.
| | 01:57 | Each input can be selected and modified
without going through everything at once.
| | 02:01 | So when we design non-linear forms
especially on smaller screens, the idea is to
| | 02:06 | get people to the information they want
to modify, change, or remove quickly, and
| | 02:12 | easily which means making things more scannable.
| | 02:15 | We'll talk a bit more about this in
the section on input labels, but for
| | 02:19 | now just be aware that one of the possible
form structures we may consider is non-linear.
| | 02:24 | Another form structure that comes in
this play is the idea of an in-context form.
| | 02:30 | So an in-context form is a way for
people to really quickly contribute
| | 02:34 | information, without jumping into a full form.
| | 02:37 | In-context generally means where the
activity or information is more relevant.
| | 02:43 | So let's say you're looking at a
thread of comments on Q&A site like Carrier
| | 02:48 | here on the right and you want to
chime in yourself, contribute a bit of
| | 02:52 | information, leave a comment.
| | 02:55 | Sending this person off to a full
page web form probably is a bit of
| | 02:59 | overkill, instead they can simply tap
the comment button and right there a
| | 03:03 | little inline form pops up.
| | 03:06 | Now personally, I prefer a way to get
out of this form in case someone taps it
| | 03:10 | by accident such as with the cancel or
a little close action off-focus, but the
| | 03:15 | idea of giving you that input right
then in there drives immediacy and allows
| | 03:19 | people to contribute in the small quick bursty
ways that they tend to use their mobile devices.
| | 03:25 | Again in-context form applies to
anywhere we're doing web form design, but in
| | 03:30 | particular where somebody is looking
at a device really quickly just wants to
| | 03:34 | chime in real fast, this keeps him in the
action rather than taking all off to a separate form.
| | 03:39 | So looking at form structures in
general there is a couple structures that we
| | 03:43 | want to think about.
| | 03:44 | What's right for a sequential form
which is displaying all the labels and input
| | 03:48 | fields in a row so someone can go
through that as quickly as possible, is
| | 03:52 | different than what we might want to
do with the non-linear form where we
| | 03:55 | actually want to show the input and
allow people to really quickly find what
| | 03:59 | they're looking for.
| | 04:01 | Which also differs from an in-context
form where the primary goal is direct
| | 04:05 | inline editing, in and out as fast as possible.
| | 04:08 | When thinking about the types of forms
you're putting on your pages, it's good
| | 04:11 | to keep in the back of your mind
what structure is right for the type of
| | 04:15 | interaction I'm enabling.
| | Collapse this transcript |
| Unnecessary inputs| 00:00 | Every question we ask people
on a web form requires them A)
| | 00:04 | to understand what the question is B)
| | 00:07 | think about how they're going to
respond to it and then 3) put in their answer
| | 00:10 | in the affordance we've provided for them.
| | 00:13 | That's a lot of thinking for
every single question we ask.
| | 00:16 | As a result it makes a lot of sense
to be very vigilant about everything we're
| | 00:20 | putting in front of people.
| | 00:21 | As I mentioned earlier in talking
about form length, asking ourselves, Can
| | 00:26 | this question be removed?
| | 00:27 | Can this question be postponed?
| | 00:29 | Or, can it be inferred based
on information we already know?
| | 00:33 | In other words, what are the ways we can
really cut down on unnecessary inputs.
| | 00:37 | There are some obvious examples, but
there are also a few that take a little bit
| | 00:40 | of thought, but the benefits can be really big.
| | 00:43 | So let's look at an example from
eBay's original registration form.
| | 00:48 | This was pre-2004 so around 2003 and
when somebody actually signed up to use
| | 00:53 | eBay to either buy or sell something
of interest to them they were asked a
| | 00:57 | series of questions.
| | 00:59 | Some of these questions were pretty
standard like your email address, your full
| | 01:03 | name, not that confusing.
| | 01:05 | But right after that information was a
series of questions titled optional that
| | 01:10 | asked you, how did you
hear about eBay? Not too bad.
| | 01:14 | What's your date of birth?
| | 01:15 | Why did you need to know that?
| | 01:17 | Annual Household Income?
| | 01:19 | Hold on a second, why is this
information necessary for me to join eBay?
| | 01:23 | Even though the section was labeled
optional information at the top, it's
| | 01:27 | still crept people out.
| | 01:29 | In fact, this was a key point of
drop-off in this registration form.
| | 01:33 | So what the team did when they
actually redesign the eBay registration
| | 01:36 | process as they took these unnecessary
inputs and they ask them after someone
| | 01:40 | had already registered.
| | 01:42 | This change of context around these
questions actually dramatically increased
| | 01:46 | the percent of people who have filled these in.
| | 01:48 | If thought the thinking probably
would something like this okay, I've
| | 01:52 | registered now you're asking me for a
little bit of additional information I'm
| | 01:55 | happy to help out, or, ooo
| | 01:57 | this looks a little bit like the survey.
| | 01:58 | When the same questions were asked in
the actual registration form they felt
| | 02:02 | intrusive and out of place.
| | 02:04 | I'd need to know my household
income if all I'm trying to do is buy a
| | 02:08 | laser pointer on eBay.
| | 02:11 | So unnecessary inputs can be dictated
by context, but they can also be dictated
| | 02:15 | by things that we can infer.
| | 02:16 | There as an example, let's look at a
pretty standard payment form, this one
| | 02:21 | comes from PayPal and here they're
asking me for my billing information
| | 02:25 | associated with the credit card.
| | 02:26 | So it makes sense to ask, what
credit card I'd be paying with, right?
| | 02:31 | You can note that the third input
field is card type, I can pick MasterCard,
| | 02:35 | Visa, American Express.
| | 02:37 | Yet, it really turns out that this is
an unnecessary input and it's not one
| | 02:41 | that's glaringly obvious at first
sight, but in the redesigned PayPal form
| | 02:45 | you'll note that they put this payment
type information after the credit card
| | 02:49 | number, because based on the credit card
number that you enter, they can actually
| | 02:53 | tell what credit card you're using.
| | 02:55 | It's not necessary for them to ask
you to specify what credit card type
| | 02:59 | you're paying with.
| | 03:00 | They know a credit card that's
starts with 5 is a MasterCard.
| | 03:04 | This example has been applied to other
places and it's worth noting some of the
| | 03:08 | usability details that come
along with this type of solution.
| | 03:11 | On Apple, they're actually doing
something that I consider to be a no-no.
| | 03:15 | What happens here is they put the
pictures of the card that they support before
| | 03:19 | they ask you for the number.
| | 03:21 | So people when they see these images are
quite inclined to actually click on one
| | 03:25 | of them to select the type of card,
they see it as a question, even though it's
| | 03:30 | simply series of images.
| | 03:32 | Now when you enter your actual credit card
number the appropriate card number highlights.
| | 03:36 | Much better to manage it like this,
where the credit card number is the first
| | 03:41 | field you ask, then use that inferred
information to highlight the one below
| | 03:44 | it, thereby making that section really look
like a label as opposed to an input field.
| | 03:51 | In other words, which card have you paid with?
| | 03:53 | Now little shortcuts like this of
removing input fields can actually go a long
| | 03:56 | way on mobile device as well.
| | 03:58 | As I have mentioned earlier the
constraints of mobile are a lot tighter,
| | 04:01 | screens are smaller, inputs a little
bit harder, so every little detail we use
| | 04:07 | to make things simpler and easier on mobile
and to eliminate errors goes a really long way.
| | 04:12 | You note the same pattern on a very
small screen form here on this Railways site.
| | 04:17 | As you enter a credit card
type, it boiled it down to Visa.
| | 04:21 | Card that's starts with
42 can only be a Visa card.
| | 04:25 | Now on more advanced mobile devices here
we're looking at a pretty basic feature
| | 04:29 | phone running this form, but a
device like the iPhone can do a lot more.
| | 04:33 | So the native iPhone application for
the payment service square, this is how
| | 04:38 | credit card information is requested.
| | 04:40 | Your first step is to actually enter a
credit card number and you'll note, the
| | 04:43 | icon to the right of the sample
number is a generic credit card.
| | 04:47 | As you actually enter your credit card
number that graphic changes to represent
| | 04:53 | the card you're using to pay.
| | 04:55 | In this case let's switch to Visa.
| | 04:57 | Now the same input field here is
actually shifted a bit to allow you to enter
| | 05:01 | your month, year, and zip code, but
we'll save that topic for input masks later.
| | 05:07 | Now it maybe tempting to start looking
for unnecessary inputs all over the place
| | 05:12 | and while the credit card example we
looked at is a great model of something we
| | 05:15 | can infer and don't really need to
force people to take the time to consider
| | 05:19 | what we're asking to formulate
an answer and then to input it.
| | 05:23 | There is other places where we
maybe a little over zealous about
| | 05:26 | removing requirements.
| | 05:29 | Take for example from the same Apple
checkout form the idea of simply asking for
| | 05:34 | a ZIP code to infer a City and State.
| | 05:36 | Here when somebody enters a ZIP code a
little drop-down menu pops up that says
| | 05:40 | oh, you're in San Jose, California.
| | 05:42 | Now the reason they have a drop-down
menu is some ZIP code they are associate
| | 05:46 | with more than one city and state combination,
so it's necessarily sometimes for you to pick.
| | 05:50 | This doesn't seem like a very big
deal, but when you look at the same
| | 05:53 | implementation on Weber's checkout
form, you notice something interesting.
| | 05:58 | As an interface designer, I'm generally
tuned to areas of usability problems and
| | 06:03 | where I can see a usability problem in
the making or usually in existence is
| | 06:08 | where I see a bunch of help text.
| | 06:10 | The more help text, the
bigger the problem tends to be.
| | 06:13 | If that help text is red
probably an even bigger problem.
| | 06:17 | If that help text is big, red, and bold
usually a sign of a severe issue inside
| | 06:21 | a form or any other kind of web interaction.
| | 06:24 | So here on the Weber checkout form
you'll note that there is a whole block of
| | 06:28 | text explaining how this feature of
entering the ZIP code and getting your
| | 06:33 | city and address works.
| | 06:34 | I've expelled out after entering your
zip code above you must select click to
| | 06:38 | highlight your city state combination
from the left, after selection it will
| | 06:42 | autofill display in the category below.
| | 06:45 | Man, it's a lot of work.
| | 06:47 | Most people know the city and state
they either living, or they're shipping
| | 06:51 | something to and in fact
entering that is pretty simple.
| | 06:55 | This solution seems to make them think
an awful lot as indicated by the amount
| | 06:59 | of help text they have decided
they need to work people through it.
| | 07:02 | So it tried to be a quicker
solution by removing city and state as input
| | 07:07 | fields actually turns out to be
something a bit more complicated.
| | 07:11 | And the lesson here really on not
necessary inputs is, don't just remove things
| | 07:16 | for the sake of removing things,
because sometimes that complicate stuff.
| | 07:20 | Really look for opportunities where
unnecessary inputs make things easier and
| | 07:24 | streamline the process as we
saw with the credit card example.
| | 07:28 | Anywhere you're able to remove the need
for people to see a question, parse it,
| | 07:32 | formulate an answer, input their answer;
| | 07:35 | you've cut down not only in the time,
but on the mental load they needed to
| | 07:39 | think through your form.
| | Collapse this transcript |
| The path to completion| 00:00 | It's time for me to level with you guys.
| | 00:02 | Nobody really likes filling in Web forms--
| | 00:05 | well, maybe the guy who does my taxes.
But in general what people actually want
| | 00:09 | is to get to what's on
the other side of the form.
| | 00:12 | They want to buy something;
| | 00:13 | they want to join a site.
| | 00:15 | Filling in a series of questions in
linear order through labels and input fields
| | 00:19 | is not on their favorite list of things to do.
| | 00:21 | So, the goal of many Web forms is to get
out of the way, but to also show what I
| | 00:25 | like to call a path to completion.
| | 00:28 | That is how do I get
through this as fast as possible?
| | 00:31 | Where do I start and where does it end?
| | 00:33 | And this principle applies
to how we layout our forms.
| | 00:37 | Let's look at an example.
| | 00:39 | This is the form on PayPal as
redesigned by a company called 37signals.
| | 00:44 | Now what they have tried to do here is
insert a series of hierarchical blocks
| | 00:48 | that point you to the most
important information first.
| | 00:51 | Problem is when you try to scan this
form and see everything that's required in
| | 00:55 | order for you to actually send this money;
| | 00:57 | it's a bit of a complicated path.
| | 00:59 | So let's start at the top.
| | 01:01 | We are about to confirm this
transaction of $37, that will send to this e-mail
| | 01:06 | address, from this source of balance,
with this e-mail subject that will ship to
| | 01:11 | here and then well, let's finally
hit that button and make it happen.
| | 01:13 | As you can see the path to completion
isn't necessarily clear and while the
| | 01:18 | hierarchy has been attempting to
actually bring you to the most important
| | 01:21 | information first you don't have this
clear flow-through... boom boom boom boom.
| | 01:25 | Here is what I need to consider.
| | 01:28 | Contrast that too in the same exact
form with a very clear scan light.
| | 01:32 | Here once again you're about to pay
this person $37 from this source of funds
| | 01:36 | with this e-mail subject.
| | 01:37 | You are shipping it here and there's
a very big primary call to action that
| | 01:41 | ends everything for you.
| | 01:43 | So from the top, to the bottom a clear
path to completion has been illuminated
| | 01:47 | and I believe it's actually
accentuated a bit the visual strength of the
| | 01:50 | button on the bottom.
| | 01:52 | That's your shining light, the light
at the end of the tunnel the thing that
| | 01:54 | gets this form out of your way and gets
the payment details sent on their way.
| | 01:59 | When we look at eye tracking data
of how people use Web forms, we will
| | 02:03 | actually see this path.
| | 02:05 | So here is a simple form of just asking
somebody for their contact information.
| | 02:10 | The dark red areas are
where people gaze the most.
| | 02:14 | Where there are green spots people
looked maybe just once for essentially just
| | 02:18 | a single eye flicker.
| | 02:19 | In other words the more heat the
more visual attention on this form.
| | 02:23 | And as you can say it's a straight
linear shot from top to bottom, until
| | 02:26 | they smack on that button at the
end and this is the path of completion
| | 02:30 | that I am talking about.
| | 02:31 | The more we can help people move the way
their eyes naturally parse this type of
| | 02:35 | information, the better off we are.
| | 02:37 | Let's look at the way this PayPal
payment form looked not too long ago.
| | 02:42 | So now to complete our payment we are
going to start up here, check our shipping
| | 02:47 | address, see the item we are actually
paying for, see the quantity and the total
| | 02:52 | price, leave a note to the seller,
figure out how we are going to pay for it,
| | 02:56 | make sure there is no promotional
codes, and then jump all the way to Pay.
| | 02:59 | Really looks like the input fields
have just been scattered all over the page
| | 03:03 | and the problem here is, it's really easy
to miss something when it's not aligned
| | 03:06 | in this path to completion.
| | 03:08 | This design doesn't take into account
that what people actually want is what's
| | 03:11 | on the other side of this form.
| | 03:13 | They don't want to spend their
entire time playing hide and go seek with
| | 03:16 | all your form elements.
| | 03:17 | They want to start, go through
everything they need and get on their way.
| | 03:21 | There is one more counter example.
| | 03:23 | I don't know if you are
familiar with the HTML5 Attribute Bomb.
| | 03:27 | What it basically does is it scatters
all the input fields across your page.
| | 03:30 | I am teasing, but it really does
look like that's what's happening here.
| | 03:34 | Down on the bottom there's a random
checkbox at the end, all the information
| | 03:39 | about your drivers license, the make
and model of the car is scattered all over
| | 03:43 | the bottom part of this form.
| | 03:44 | Once again, hard to really parse what's required.
| | 03:47 | Now the examples that I have showed
earlier are relatively simple forms, sending
| | 03:52 | a payment, registering, providing your
contact information, but this principle
| | 03:56 | of path of completion applies
much more complex forms as well.
| | 04:00 | So here we see setting up a series of
network scans for a series of computers
| | 04:05 | on your local network. And the addresses
that you scan the details of that, the
| | 04:09 | schedule and your credentials once again are
really aligned to this clear path to completion.
| | 04:14 | This isn't a simple
e-commerce or registration form.
| | 04:17 | It's a relatively complex task but the
path to completion principle applies as well.
| | 04:22 | Show people what's required through
this tightly well lit path and again ending
| | 04:28 | on this primary call to action on the bottom.
| | 04:30 | There is another example we can look
at the process of buying a home online.
| | 04:34 | Obviously buying a home online is a
pretty involved thing, but again making sure
| | 04:39 | that you dot all the i's and cross
all the t's in that process can be aided
| | 04:43 | through a clear path to completion.
| | 04:45 | A mobile device is a clear path
to completion also plays a role.
| | 04:50 | Let's look at a really simple form.
| | 04:51 | So this is a two column form just for
indicating your interest in a particular
| | 04:56 | source of information.
| | 04:57 | Now when we tap on that first field
inside the form, here is what we see.
| | 05:02 | Not really clear what question we are
asking, so let's jump over the next field.
| | 05:06 | Oh, let's try that again.
| | 05:08 | Next field please, Next
flied please, Next field.
| | 05:13 | Really a lack of a clear path to
completion here and part of this is due to the
| | 05:17 | fact that this form has really been
optimized for a desktop layout and rather
| | 05:21 | designed for a desktop layout.
| | 05:23 | I would argue that the two column
layout isn't really an optimal solution.
| | 05:26 | And instead when you move to the
mobile form all of a sudden you are
| | 05:30 | really quickly lost.
| | 05:31 | The path to completion is gone.
| | 05:32 | Now just as a little side note, I want
to call out this little feature, Yes, I
| | 05:38 | would like to receive e-mail updates.
| | 05:40 | This is a single button
radio that is default checked.
| | 05:44 | Those of you who are familiar with
these types of controls know, there is no
| | 05:47 | way to say No here.
| | 05:49 | Little devious, Isn't it?
| | 05:51 | Now, maybe this problem with two column
grade on a mobile device can be solved
| | 05:54 | by flipping into landscape mode. So here we go.
| | 05:57 | Now we have got more screen real estate.
| | 05:59 | Let's try the same process again.
| | 06:01 | Oops, didn't work here.
| | 06:02 | Now, path to completion is about more
than strictly aligning your input fields in
| | 06:07 | a way that shows start to finish and
let's people get through the process.
| | 06:11 | It's also about letting people
know where they are within a process.
| | 06:16 | So going back to our example of buying
a house online, we would like to show
| | 06:19 | people where they are relative
to the scope of their efforts.
| | 06:23 | So this first arrow indicates your
position in a series of seven steps.
| | 06:29 | The overall scope is indicated by
how many steps they are actually are.
| | 06:32 | So your position is two of 7 steps.
| | 06:35 | And last but not least there
is also an indication of status.
| | 06:38 | Here it's saying the last time this
draft was saved was 10:18 AM, and that
| | 06:43 | saving process is ongoing.
| | 06:45 | So it let's you know that even though
you're making progress through the scope
| | 06:48 | and your position is
kind of in the early stages,
| | 06:50 | everything is being saved, don't worry about it.
| | 06:52 | Now the site that built this form
originally Redfin recently went through the
| | 06:55 | redesign and they have really
simplified their flow, at least the progress
| | 07:00 | indicator of the flow.
| | 07:01 | As you can see now they have three sections:
| | 07:03 | Introduction; Offer
Information; and Fine-Tune Your Offer.
| | 07:08 | While this seems easier, the problem is
that a lot of these types of progress
| | 07:12 | indicators actually lie about where
you are in the path to completion.
| | 07:15 | What do I mean by that?
| | 07:17 | Well, let's take a look at an example.
| | 07:20 | On Fidelity there's a real simply laid
out series of arrows at the top, Getting
| | 07:24 | Started, About You, About
Your Account, and Finish.
| | 07:27 | So we can see we are on step one, Account
Type, as indicated by the checkmark, and
| | 07:32 | it looks like the next step that we will
actually need to deal with is Personal Information.
| | 07:36 | So we click Next, and here's the
step that's not listed in that flow.
| | 07:40 | Do you have an account or
you are new to Fidelity?
| | 07:43 | If you're new to Fidelity, all of a
sudden there is a series three more steps
| | 07:47 | that you need to go through before you
can get to step that was promised to you
| | 07:50 | in that progress indicator.
| | 07:52 | Progress indicators of this type generally
do better when they are actually more generic.
| | 07:58 | So look at the example on Amazon.
| | 08:00 | Here: sign-in, Shipping and
payment, gift wrap, place order.
| | 08:04 | There are no promises being made of how
many steps are in this section because
| | 08:08 | there is no numerical labeling.
| | 08:09 | In fact shipping and payment could be a
single step if you're going to ship to
| | 08:13 | the address you usually ship to.
| | 08:15 | If you want to add a new address and
you want to save it to your address book
| | 08:18 | for later use, well that could
actually be two to three steps.
| | 08:21 | When you move to payment, if you are
just going to use the credit card you have
| | 08:24 | on file, it's a single step.
| | 08:27 | If you want to pay with a third party
service like PayPal, well, then you might
| | 08:30 | have to select PayPal, jump over to
PayPal, pick your source of funding,
| | 08:35 | if you don't have a source of funding
you may need to add an additional credit
| | 08:38 | card and there by the time you get
back five or six steps may have passed.
| | 08:43 | Sites like half.com that promise a
simple one, two, three yet have the same kind of
| | 08:48 | nonlinear paths I just described are
essentially setting you up for failure.
| | 08:52 | It's not through easy steps as this indicates.
| | 08:54 | It could be up to eight.
| | 08:56 | So progress indicators either should be
really generic and we are really tuned
| | 09:00 | in to the fact that they can't lie to you.
| | 09:03 | One of the things however to go back
to Fidelity that these guys are doing
| | 09:06 | right is telling you upfront to a
start page of what you'll actually need to
| | 09:10 | complete this process.
| | 09:12 | When there is a situation where
things are required that you're not likely
| | 09:15 | readily to have on hand,
let people know upfront.
| | 09:18 | For example, my bank account
information, my account statements for any
| | 09:22 | securities I wish to transfer,
my driver's license number.
| | 09:26 | Let's say I get going and I make it to
step five of the form and realize I need
| | 09:30 | my driver's license, which is
in the car, back somewhere else.
| | 09:34 | That's not a great experience.
| | 09:36 | Letting people know upfront what it's
going to take to get through the form,
| | 09:38 | through start page can help gear them
up for success, as they make their way
| | 09:42 | through the path to completion, as opposed
to frustration and failure as they go along.
| | 09:47 | To wrap up what we think about when we
think about a path to completion, the big
| | 09:52 | idea here is to really
illuminate that clear path.
| | 09:55 | Again people have personal goals.
| | 09:58 | They want to buy something, they want
to register for a site, they want to chat
| | 10:01 | with somebody, they don't want to
fill in your Web form, so making it clear
| | 10:05 | where that Web form starts and ends,
gives them the confidence that they can get
| | 10:08 | through that process, quickly and easily.
| | 10:11 | Usually multiple column layouts break
that process and random column layouts as
| | 10:15 | we saw on some of these examples are even worse.
| | 10:18 | On a mobile device or something with a
small screen, this problem is even worse.
| | 10:23 | So, to avoid that, we will use
a clear path to completion.
| | 10:27 | We also can lean on progress indicators
to communicate the scope, position and
| | 10:32 | status of your progress
through that path to completion.
| | 10:35 | Now be careful to not lie to people
through making it look like a series of
| | 10:38 | explicit steps, when there is a lot
of nonlinear path that they can take.
| | 10:43 | If you are going to require some
substantial time or very specific information
| | 10:47 | to fill in your form, start page might
be a good idea, to help lead people onto
| | 10:51 | that path to completion.
| | 10:53 | Those factors altogether will really
help shine a light on what it takes to get
| | 10:57 | through that form and give people more
confidence as they encounter the labels
| | 11:01 | and input fields that you put in their way.
| | Collapse this transcript |
| Tabbing| 00:00 | I've talked with people around the
world about how they use web forms, and every
| | 00:04 | time I do, I asked them all similar question:
| | 00:07 | How many of you use the mouse to move
between form fields, and how many of you
| | 00:12 | actually use your
keyboard by hitting the Tab key?
| | 00:14 | Usually, and this isn't a scientific
response, 60% of people say they use their
| | 00:19 | keyboard to tab between input fields.
| | 00:21 | Whatever the real number is, the fact
is there's a lot of people out there
| | 00:25 | hitting Tab to move
between the fields in the form.
| | 00:28 | As a result, it's something we need to
take into account when we lay out all of
| | 00:31 | things we're putting on a form.
| | 00:33 | So let's see what a problem
could be with tabbing behavior.
| | 00:37 | When we look at the Office Depot site,
we see again, a two-column layout.
| | 00:42 | Now as people move between these, the
first tab will jump you over here, then
| | 00:47 | you'll be moving through here, then
you'll be bopped over to the left, finally
| | 00:51 | jumping all the way up to a small
checkbox on the right only to make your way
| | 00:54 | down again over left, right,
up, down, you get the idea
| | 01:00 | This form really starts to jump all
over the place when somebody uses their Tab
| | 01:03 | key to move between it.
| | 01:05 | It's jarring and you don't have a sense
of where you're in the path to completion.
| | 01:09 | Remember, the path to completion is all
about letting people know where they are,
| | 01:13 | and how much more progress they have to go to.
| | 01:15 | Seeing your screen shoot up and then
shoot down as you hit the Tab key and move
| | 01:20 | between columns isn't a great way to
orient people in order to give them
| | 01:23 | confidence that they're making forward progress.
| | 01:26 | Now luckily, Office Depot
redesigned their site and they came back with
| | 01:30 | another two column grid.
| | 01:32 | Sadly, this has the same issues.
| | 01:35 | So for these reasons and for smaller
screen devices, once again, I think it's a
| | 01:39 | good idea to avoid two-column
grid layouts for your forms.
| | 01:44 | Not only is tabbing behavior more
difficult with it, but when you move to
| | 01:47 | a smaller screen, the multicolumn effect
has the same type of problems we saw earlier.
| | 01:53 | Other things to account for when you
think about how people tab through forms:
| | 01:58 | When you code your forms, the tabindex
attribute actually allows you to give a
| | 02:02 | little bit of control to how
people move through the fields,
| | 02:05 | Which one is first; which one
is second; which one is third.
| | 02:08 | That said, the best way to do it is
just literally to lay it out in source
| | 02:13 | order that is the first input field is first,
the second one is second, the third one is third
| | 02:18 | Tabindex, while useful for shifting
that order a bit through markup, isn't as
| | 02:24 | reliable as source order,
especially across lots of different devices.
| | 02:29 | And lastly, laying out your forms
with the expectation that people will tab
| | 02:33 | through them. In other words, avoiding
these big page jumps can go a long way
| | 02:38 | in keeping people focused and on task
as they use their keyboards to navigate
| | 02:42 | web forms.
| | Collapse this transcript |
| Label alignment| 00:00 | Web forms are basically a series of
questions, and how we ask those questions
| | 00:05 | generally falls on labels.
| | 00:07 | Labels inside of a Web form queue
up the information we need from people.
| | 00:12 | The way we ask those questions and the
way we lay those questions out is often
| | 00:16 | a topic of a lot of debate,
in particular, label alignment.
| | 00:20 | Let's jump back to that Boingo get
online form that I talked about much earlier.
| | 00:26 | Here, the way we're being asked every
question is with a little gray label
| | 00:31 | underneath the input field.
| | 00:33 | Now, bottom-aligned labels tend to be a
bad idea because it's not clear upfront
| | 00:38 | what question we're being asked.
| | 00:39 | Remember in the past the completion is
people start from the top and make their
| | 00:43 | way down, question; ability to
answer it; question; ability to answer it.
| | 00:47 | It works a bit better than answer;
question. Not really how we naturally work.
| | 00:53 | So what are our other options?
| | 00:55 | Well, if we rule out bottom-aligned
labels for these reasons, we are left with
| | 01:00 | top-aligned, left-aligned,
and right-aligned labels.
| | 01:03 | Let's take a look at each
one, and the advantages of each.
| | 01:06 | Left-aligned labels, as you can see in
the image on the left, are where we use
| | 01:11 | the left edge of the labels for
alignment and then place the corresponding input
| | 01:16 | fields to which the label
applies, in its own column to the right.
| | 01:20 | Now when data is required that's
unfamiliar to people, in other words, they
| | 01:26 | really need to think about or process
these fields, or more likely, dig up
| | 01:30 | one or two things that they need to
answer, a left-aligned solution can
| | 01:33 | actually work well.
| | 01:34 | The reason for this is it's quite
easy to scan the labels on the left.
| | 01:38 | Just go down the list, pick out the
one you're interested in, and answer it.
| | 01:43 | Why this works when the data is
required is unfamiliar to you is you can take a
| | 01:47 | real quick pass through those labels,
see what's in there, and decide whether or
| | 01:50 | not you can actually answer the
questions, or whether you need to go get some
| | 01:54 | information or ask
someone before you can proceed.
| | 01:56 | When we're asking people for
information they're likely to have answers to
| | 01:59 | instantly, like their payment
information, home address, phone number, then
| | 02:05 | they probably don't need to scan
through what's required, they could just jump
| | 02:08 | right into answering.
| | 02:09 | One of the problems with left-aligned
input fields is that the association
| | 02:13 | between the label and the input
field is not as great as it could be.
| | 02:16 | Meaning it takes a little bit to look
at the label, then look to the right of
| | 02:21 | the input field and make a
correlation between them.
| | 02:23 | It's not that people can't do this.
| | 02:25 | They're actually quite good at it.
| | 02:27 | The problem is it takes them a little while.
| | 02:29 | So forms with left-aligned labels
tend to be a little slower to complete.
| | 02:32 | We've seen this in small testing and also
in large-scale A/B testing on big sites.
| | 02:38 | When we just swap the labels
between let's say left-aligned labels and
| | 02:42 | top-aligned labels, the left-aligned
labels force people to slow down and take
| | 02:46 | their time a bit more.
| | 02:48 | In some cases, this can really be good,
like when we want them to consider every input.
| | 02:53 | When we're asking for familiar
information, and we want people to get through
| | 02:57 | that form as possible, slowing them down with
label alignment is probably not a good idea.
| | 03:02 | One more advantage of left-aligned
labels though is that they require less
| | 03:05 | vertical space on a form.
| | 03:07 | Meaning, we don't need to fill up a
Web page with a label; input field; label
| | 03:11 | input field; label input field,
like we do with top-aligned labels.
| | 03:14 | Instead, each of those sections has their own
column thereby making the page a bit shorter.
| | 03:20 | Now let's look at an example of
left-aligned labels in action.
| | 03:24 | Here they're applied to an Advanced
Settings dialog, perfect use case for
| | 03:28 | scanning through a list of labels and
pulling out the exact field that you need
| | 03:32 | to actually change or modify.
| | 03:33 | In this case, maybe I want to
change only the Share Book Field.
| | 03:36 | I look through those labels and
really quickly I know which one applies.
| | 03:40 | Right-aligned labels have a bit of a clear
association between the label input field.
| | 03:46 | Because the label is right-aligned
and the input fields are left-aligned,
| | 03:50 | they're much closer in proximity.
| | 03:52 | This means it takes a lot less
visual effort to align those two things.
| | 03:56 | Now again, with left-aligned labels
people can make that association no problem,
| | 04:00 | it just takes them a little bit longer to do so.
| | 04:02 | Right-aligned labels also don't
require a lot of vertical space on a page
| | 04:07 | because they again, have separate
columns for the labels and input fields.
| | 04:12 | However, with right-aligned labels,
it's a lot more difficult to actually scan
| | 04:16 | that column of labels because of
this rag that you see in the image here.
| | 04:22 | Jumping between this variety of text
makes it harder to read through and
| | 04:26 | actually find what's going on.
| | 04:28 | However, in a study that I'll get into a
bit more detail on in a second, when we
| | 04:32 | compared left-aligned labels to right-
aligned labels, we did reduce overall form
| | 04:37 | completion times by nearly half,
which is a pretty big deal.
| | 04:42 | So as an example of right-aligned
labels, here we see a field asking for your
| | 04:46 | First Name, Last Name, Email, User
Name and once again, right-aligned labels
| | 04:51 | right next to those input fields make
for a close proximity between the question
| | 04:54 | we're asking people and where
they need to answer that question.
| | 04:56 | Top-aligned labels, as it turns out,
actually have a lot more advantages and
| | 05:02 | for this reason, I tend to bias myself
towards using top-aligned labels when
| | 05:06 | laying out Web forms.
| | 05:08 | Now before you jump to
conclusions, let me explain myself.
| | 05:12 | In the testing we've seen, I
mentioned that right-aligned labels cut form
| | 05:15 | completion times down by nearly half.
| | 05:18 | Top-aligned labels cut that even further.
| | 05:21 | So they're much faster than left-
aligned labels and faster even than
| | 05:25 | right-aligned labels.
| | 05:26 | When you're asking people for data
they're likely to be familiar with and
| | 05:29 | you just want the form to get out of the way,
guess what, those seconds actually matter.
| | 05:33 | Fast completion times help people buy
something, register for a service, provide
| | 05:38 | the information you need, and get that
form out of their way. That's great.
| | 05:43 | But there's other advantages
to top-aligned labels as well.
| | 05:46 | One is flexibility for
localization and complex inputs.
| | 05:50 | When you're dealing with a two-column
system and also do you translate your
| | 05:53 | English text to a language like French
or Dutch, the line length can actually
| | 05:58 | get substantially longer,
sometimes even twice as long.
| | 06:02 | When you have more complex inputs
like a series of radio buttons or
| | 06:05 | checkboxes, a label above that group
of inputs tends to work better to bound
| | 06:11 | the questions you're asking people than
a label off to the left on the screen,
| | 06:15 | so top-aligned labels in terms of
flexibility for localization and complex
| | 06:19 | inputs, also have advantages.
| | 06:21 | Top-aligned labels are also easier to code.
| | 06:25 | Frankly, all you need to do is label input
field, label input field inside of your markup.
| | 06:30 | No fancy CSS floats or table layouts.
| | 06:34 | It's much easier just to go and
render the form as is described in markup.
| | 06:39 | This usually makes it a
bit more accessible as well.
| | 06:42 | Though you can manage things with tab
index, label and input field tends to be
| | 06:46 | the simplest and easiest for the
widest variety of devices to use.
| | 06:51 | And speaking of devices, as we
increasingly use more and more small screens and
| | 06:56 | mobile devices to get online and
access content and fill out Web forms, a
| | 07:01 | top-aligned label fits nice and snug
into a small screen that doesn't have much
| | 07:06 | opportunity for a left-aligned or
right-aligned column of just labels.
| | 07:11 | Now the disadvantage of course for top-
aligned labels is that they do require
| | 07:16 | more vertical space.
| | 07:17 | In other words, we're stacking a label
on top of an input field, on top of a
| | 07:21 | label, on top of an input field,
and that adds up vertically.
| | 07:24 | But personally I like to think
about that as an incentive to make your
| | 07:27 | forms even shorter.
| | 07:29 | And as we saw earlier with form length,
making your form shorter is a great way
| | 07:33 | to increase conversion and get people
through these processes down to the other
| | 07:37 | side of the thing that they actually want.
| | 07:40 | Now let's look at an example of a top-
aligned form, and you can see here we've
| | 07:44 | got this nice path to completion, label
above input field, leading you to a real
| | 07:48 | big button at the bottom that signals I'm done.
| | 07:51 | Now because the topic of label alignment,
top, left, or right-aligned tends to
| | 07:56 | be a little bit contentious.
| | 07:57 | I think it's worth actually digging
into the data that supports why some of
| | 08:01 | these things are faster than others.
| | 08:03 | In some eye tracking and usability
studies that Matteo Penzo did a few years
| | 08:07 | back, we can start to see some of the causes.
| | 08:09 | Looking at the left-aligned labels at
the top there, you can see things it takes
| | 08:14 | a couple eye saccades or movements to
make this association between the input
| | 08:17 | field and the label.
| | 08:19 | When you look at the top-aligned labels
on the bottom, people are able to take
| | 08:23 | in the label and the input field in a
single eye glance and you see this in the data.
| | 08:28 | From left-aligned labels to right-
aligned labels, the number of overall eye
| | 08:32 | fixations were cut nearly in half.
| | 08:35 | At the same time, form
completion times were cut nearly in half.
| | 08:39 | Odds are, there is a good correlation
between the amount of visual effort it
| | 08:42 | takes to parse the form and how
long it actually takes to complete it.
| | 08:45 | Top-aligned labels made things even faster.
| | 08:49 | Once again, there is a lot less
visual effort needed to determine what
| | 08:52 | question was being asked and how to
answer it because the label was stacked
| | 08:56 | right on top of the input field.
| | 08:57 | So people were able to get
through top-aligned labels much faster.
| | 09:01 | Now I mentioned there was another
advantage to top-aligned labels, and again,
| | 09:05 | because people tend to discuss this
topic a lot, I think it's worth diving
| | 09:08 | into a bit more detail.
| | 09:09 | This is the increased use of mobile.
| | 09:12 | So, when you look at what happens to a
typical Web form on a mobile device, in
| | 09:17 | mobile operating system that has any
amount of decent design in it will try to
| | 09:21 | make things better for you.
| | 09:22 | What do I mean by that?
| | 09:24 | Well, here's a desktop form on the iPhone.
| | 09:27 | When I tap that field to actually
access it, it does this thing called Field
| | 09:31 | Zoom, which is it zooms into that field
so you can actually see it in a bigger
| | 09:35 | state on a smaller screen.
| | 09:37 | In other words, you can see the
question you're being asked and how
| | 09:39 | you're answering it.
| | 09:40 | There's also a nice little Form
Helper on the right that allows you to move
| | 09:43 | between the previous and next fields,
auto-fill a form, and click Done.
| | 09:48 | A common theme that will keep coming
back to on mobile devices is any little
| | 09:53 | detail that we can do to make input
easier, faster, and more accurate goes a
| | 09:58 | really long way on mobile.
| | 10:00 | Now let's take a look at what happens
when a form encounters Field Zoom but uses
| | 10:06 | left-aligned labels.
| | 10:07 | So this registration form on Google
has left-aligned labels and once again, I
| | 10:12 | tap in the operating system on the
mobile device, it tries to do the right thing
| | 10:16 | by zooming in and giving me
more room, but the label is gone.
| | 10:20 | It's off to the left in a separate
column and the result, I'm left with asking
| | 10:25 | myself what's the question I'm
trying to answer here. No label, no idea.
| | 10:30 | Similar thing happens on Android devices.
| | 10:32 | Once again, you tap on that input field,
you have Field Zoom, and the question is gone.
| | 10:40 | So to reiterate why I think increasingly
the top-aligned labels make more sense.
| | 10:44 | we'll begin to live more on a cross-
device world where people will access
| | 10:48 | content not just through their
desktop or laptop at home, but through the
| | 10:51 | smartphone or mobile device or tablet
that they happen to have closest to them.
| | 10:55 | That means thinking about how our form
layouts work across all these devices
| | 10:59 | with varying screen sizes,
especially smaller screen sizes.
| | 11:03 | Once again, top-aligned labels
are a better format for mobile.
| | 11:07 | As we can see here in the Twitter
sign up screen, when I tap into my full
| | 11:11 | name and start entering it, the label is
clearly present as is help text, as is the keyboard.
| | 11:17 | Much better formatted for
a small a screen device.
| | 11:20 | Now you may be thinking what
about labels within input fields.
| | 11:24 | If the big disadvantage of top-aligned
labels is screen real estate and want to
| | 11:29 | make things tighter, wouldn't it
actually make sense to put those labels inside
| | 11:32 | the input field, that is, combine the question
we're asking with where people can answer it.
| | 11:37 | And at the surface, sure, this makes sense.
| | 11:40 | So if we take our Boingo, get online,
redesign a Web form on the left, and
| | 11:45 | transfer all of those labels except
for the section headers into the input
| | 11:49 | fields, you can see we get a
substantially shorter form.
| | 11:52 | We've actually condensed things a lot.
But there's a couple challenges and while
| | 11:57 | I think moving towards labels within
input field is a great idea, as we'll see
| | 12:01 | in a little bit, we really need to
be aware of the potential pitfalls.
| | 12:05 | Pitfall number one is there really
isn't a native solution inside of Web
| | 12:10 | browsers right now that
allows us to do this effectively.
| | 12:15 | Instead, we count on programmatic
solutions using JavaScript to sort of fake it
| | 12:20 | and when we do that, there are
some issues that might arise.
| | 12:24 | So on a site like LinkedIn, there is a
label inside input field that says Write
| | 12:28 | a personal note to all the recipients
you have selected for this invitation, and
| | 12:32 | a button to send invitation.
| | 12:35 | I find my inbox sometimes contains
messages that say hey, Write a personal note
| | 12:39 | to all the recipients you have selected.
| | 12:41 | This is a case where the label actually
became the answer and when pages don't
| | 12:46 | load or aren't coded necessarily
perfectly, something like this can happen.
| | 12:51 | I'm sure many of you have encountered
the situation when you try and run a
| | 12:54 | search, and the label search inside the
input field all of a sudden becomes part
| | 12:58 | of your search, same issue at play.
| | 13:02 | The other challenge with labels within
input fields, and I've seen this in many
| | 13:06 | instances of usability testing, is
that people get confused whether the label
| | 13:10 | is actually an answer.
| | 13:11 | They quickly look at the form, see
something is inside the input field, then
| | 13:15 | assume, hey, it's done, I
don't need to fill this in.
| | 13:18 | That's why it's really important when
you put labels inside of input fields or
| | 13:21 | even help text inside of input fields
to differentiate it strongly from what
| | 13:25 | looks like an answer.
| | 13:27 | So what you see on the left here is the
gray text with a ... at the end, trying
| | 13:32 | to not look like an answer and it's
also why on the right you see drop-down
| | 13:35 | menus put these little dash (--) marks
before and after a value that says select
| | 13:40 | or pick one, making really clear that
isn't actually a selected value, it is a
| | 13:45 | label or instruction for you.
| | 13:47 | Third point around labels within
input fields to recognize is that when you
| | 13:52 | actually tab in like here on the
threadsy sign up sheet, the label that was in
| | 13:57 | the input field usually by default is gone.
| | 14:00 | So what question am I answering, and
let's say I hit Tab...now what is this form
| | 14:05 | even asking me about?
| | 14:06 | A little side note, these things don't
really look like input fields anymore.
| | 14:11 | This is usually why it's better to
stick with the forms, it doesn't mean that
| | 14:14 | looks like an input field instead of
black boxes because encountering this, I'm
| | 14:17 | not entirely sure what I should be doing.
| | 14:21 | This issue isn't so bad on a small
form where it's just asking you for your
| | 14:25 | username and password, but imagine an
entire form where every time you answer a
| | 14:29 | question, the label is gone.
| | 14:30 | It makes it pretty hard to go back and
check your work because you don't know
| | 14:34 | the questions you were actually answering.
| | 14:36 | All you see are your answers.
| | 14:39 | Now there are situations where labels
within input fields can make a lot of
| | 14:43 | sense and this tends to be where we
have node input groupings and structures.
| | 14:48 | On the Apple Checkout form you see
that they're asking for a shipping contact
| | 14:52 | and shipping address.
| | 14:53 | The structure of a shipping
address is pretty common to most people.
| | 14:57 | In fact, I've observed through eye
tracking data when people encounter an
| | 15:00 | address block, they tend to not even
really look at the screen anymore and just
| | 15:03 | start entering all the pieces of their address.
| | 15:06 | They know how it's structured and
it's clear well how the pieces add up.
| | 15:10 | So on Apple's form, labels within input
fields have been used in these blocks,
| | 15:14 | but note they're still a grouping label,
in other words shipping address, so
| | 15:19 | that you know the information
you entered is about shipping.
| | 15:23 | The structure of the inputs makes it
clear it's an address, but how that address
| | 15:26 | is used still relies on this grouping label.
| | 15:31 | Let's look one more second at the
default behavior we get inside of Web browsers.
| | 15:35 | As I mentioned before that on mobile in
particular, labels within input fields
| | 15:39 | can really help you condense your form
and get more information on the screen,
| | 15:44 | but if you use the standard HTML5
placeholder attribute, it's been specified
| | 15:50 | to include tips and help text
inside of an input field, not labels.
| | 15:56 | So the default behavior is, when
you tab in, the label is gone.
| | 16:01 | Now this isn't how things work in native
operating systems on most mobile devices.
| | 16:07 | In fact, on the same device of the iPhone,
when you use an application like Mail
| | 16:12 | to set up your account and you tap into
an input field, the label stays there.
| | 16:18 | This is the default
behavior in the operating system.
| | 16:20 | It's not the default behavior in Web
browsers and this is common across not just
| | 16:26 | iOS, but also Android and even BlackBerry.
| | 16:29 | So hopefully this behavior makes its
way to the Web browser at some point,
| | 16:32 | but clearly it's valuable on mobile
devices since every native operating
| | 16:36 | system is using it.
| | 16:38 | Now in the Web browser, it is
possible for you to use again, JavaScript, to
| | 16:45 | control this behavior.
| | 16:46 | So on 37signals' sign Up screen, when you
tab into that input field, the label stays.
| | 16:53 | This isn't default behavior.
| | 16:54 | Again, they've actually done some
custom scripting to make this work.
| | 16:57 | The other thing that they've done to
make this work is introduce a lot of strong
| | 17:01 | contrast between a label and an input field.
| | 17:04 | So you can see where I've entered my
username, lukew, that appears in black,
| | 17:09 | whereas the label, password
appears in a really light gray.
| | 17:13 | It's debatable whether this has actually
enough contrast to convince people it's
| | 17:16 | not an answer, especially on a longer
form, but at least the effort is there to
| | 17:21 | really distinguish what's been
completed by you and what still remains.
| | 17:25 | Apple has done a similar thing again
programmatically in the Web browser for
| | 17:29 | their sign in to checkout.
| | 17:31 | On the Apple Store when you mouse in or
tab in to the input field asking you for
| | 17:36 | your iTunes or Apple ID, they're
keeping the label there until you actually
| | 17:40 | start entering in a value, getting
around this issue of labels disappearing as
| | 17:44 | soon as you start interacting with a field.
| | 17:47 | So while labels within input fields
hold a lot of promise, there's a couple
| | 17:51 | things to take into account and use as a
basis for decision about whether or not
| | 17:55 | you should go ahead and do
labels within input fields.
| | 17:58 | Number one is you need to be really
vigilant about that label not becoming part
| | 18:02 | of someone's answer.
| | 18:03 | As we saw in the search example I
discussed in the LinkedIn invitation, when a
| | 18:08 | label becomes part of your
answer, things can get pretty hairy.
| | 18:10 | Two, it's really difficult for people
to discern what's an answer and what's a
| | 18:15 | label when those two things look really similar.
| | 18:18 | So it takes a lot of effort to make
sure that labels really look different than
| | 18:23 | the answers you're providing in a form.
| | 18:25 | And last but not least, consider when
somebody starts answering a question or
| | 18:29 | when they've completed filling in a
question, that question in the form of a
| | 18:33 | label is gone when you
place it inside the input field.
| | 18:37 | All these things together add up to a
number of considerations that may or may
| | 18:40 | not make labels within input right for you.
| | 18:44 | To wrap up label alignment in
general, overall, I find myself and the
| | 18:49 | recommendations I'm making to others
to lean towards top-aligned labels.
| | 18:54 | If you're dealing with familiar input
and your goal is to get people through a
| | 18:57 | form, which is very often our primary
objective, top-aligned labels allow you to
| | 19:02 | get through that form quickly, have
advantages of coding, layout, and work
| | 19:07 | across lots of different devices.
| | 19:09 | If you're under really tight vertical
constraints and you still need some of
| | 19:12 | that speed, you might consider right-
aligned labels, but you'll have some
| | 19:16 | disadvantages especially
on smaller screen devices.
| | 19:20 | If you're dealing with really
unfamiliar advanced data entry where you want
| | 19:23 | people to really slow down or pick out
a label from a list, left-aligned labels
| | 19:28 | could be the way to go, but again,
increasingly in our multi-device world, that
| | 19:33 | may be outweighed by the advantages of
being operable across multiple devices
| | 19:37 | and smaller and smaller screens.
| | 19:39 | And last but not least, if you're
dealing with devices that support labels
| | 19:42 | within input fields, like these native
operating systems on iOS, Android, or
| | 19:47 | BlackBerry, by all means use them.
| | 19:49 | If that system has baked in all the
different controls that you need to make
| | 19:52 | that solution work, have at it.
| | 19:54 | Sadly, the Web browser isn't there yet,
but hopefully in the future it'll
| | 19:58 | get there soon.
| | Collapse this transcript |
| Help and tips| 00:00 | While labels ask people the questions
we need them to complete in the web form,
| | 00:04 | the questions we ask them might
not always make sense to everybody.
| | 00:08 | In those situations, we may turn to Help
and tips to help clarify what we mean.
| | 00:12 | In particular, if within a web form we
are asking for unfamiliar data or people
| | 00:18 | may question why we are asking them
for specific data or maybe there is
| | 00:21 | recommended ways of providing an answer
or if certain things are optional, help
| | 00:26 | and tips can really help clarify things.
| | 00:28 | While a little bit of help
in a web form goes a long way.
| | 00:32 | Examples where there's too much can
quickly overwhelm a form and turn people
| | 00:36 | off, and as I mentioned earlier, usually
examples of too much Help text are sign
| | 00:41 | of a broader usability problem that play.
| | 00:43 | In other words, people might not
understand the big concept or why they're being
| | 00:47 | asked for something and no
amount of Help text could help that.
| | 00:52 | When we do enter a situation though
where a lot of help is required, there
| | 00:55 | are dynamic solutions that we can
turn to, to help manage things through
| | 00:59 | automatic inline exposure, user activated
inline exposure or user activated section exposure.
| | 01:05 | Well, that's a lot of fancy terms, so
let's actually look at some pictures
| | 01:08 | that illustrate that.
| | 01:09 | Here where I am asked for my email
address, so a number of questions that pop up.
| | 01:14 | If I am going to be asked for my e-mail
so that Boingo can send me a receipt, I
| | 01:18 | might not only be willing to give them
my e-mail address, I am going to actually
| | 01:22 | think it makes a lot of sense.
| | 01:23 | However, if Boingo is going to be using
my e-mail address to send me promotions,
| | 01:27 | or worse yet, get send me promotions
from other parties, then there's no way I'm
| | 01:32 | putting my e-mail inside that input field.
| | 01:34 | Unfortunately, there is really no way
of knowing whether or not that email
| | 01:38 | address is going to be used for
promotions or for getting a receipt.
| | 01:41 | There is no help text on the screen.
| | 01:43 | This is another disadvantage
of these bottom aligned labels.
| | 01:47 | When the bottom aligned labels sits
underneath the input field, there is not a
| | 01:50 | lot of room for Help text.
| | 01:52 | Maybe we could fit a little bit to the
right, but in general that's the place
| | 01:56 | where help text goes and not labels.
| | 01:59 | The other place on the Boingo form
where a little Help text could go a long way
| | 02:04 | is the whole User Account Information section.
| | 02:06 | If I just want to get online for a
couple of hours at the airport, why do I need
| | 02:10 | to create an account on Boingo?
| | 02:12 | A User Name, Password, Confirm
Password, Password Recovery code, all those
| | 02:17 | things really seems unnecessary.
| | 02:18 | A bit of Help text could explain
why I am being asked that and what the
| | 02:22 | benefit to me could be?
| | 02:24 | So the other examples of where Help
text could be useful, now let's look at how
| | 02:29 | we actually can present it.
| | 02:31 | The easiest way to tackle Help text is
just a super simple line of text right
| | 02:36 | then and there on the form.
| | 02:38 | So on the Sign up screen for the
videoegg service, you'll see, where they're
| | 02:42 | asking me for a password, there is a
little bit of help explaining what kind of
| | 02:46 | format that password has to be in.
| | 02:48 | In this case, 4 or more characters, I
don't want to look very far or think about
| | 02:53 | it too much, the Help text is
right there helping me along.
| | 02:57 | Little bit further where they're
asking me for Email, they have put another
| | 03:00 | simple note that says, We don't spam.
| | 03:03 | Once again, getting a little bit of
reassurance around why this information is
| | 03:07 | being asked and what's going to happen with it.
| | 03:10 | In the case of the password I am being
given help text around formatting, in
| | 03:15 | the case of e-mail I am being in help
text around why this is required and what
| | 03:19 | will be done with it.
| | 03:21 | Similarly on mobile devices, placing
bit of help text right next to the input
| | 03:25 | field where it applies tends
to be the simplest solution.
| | 03:28 | So when I was signing up for Twitter,
you can see that my full name includes my
| | 03:32 | first and last name, and my username is
how I am going to be known on Twitter,
| | 03:38 | plus it needs to be at least 6 and no
more than 15 characters, super simple tips
| | 03:43 | right in place helping me a lot.
| | 03:46 | Now let's look at a counter example.
| | 03:48 | This is the first screen of selling an
item on eBay as it looked a little while
| | 03:52 | ago, and your first choice is simply the
selection of one of three radio buttons
| | 03:58 | where a default choice has been set for you.
| | 04:00 | Yet, if you really count them up, there are
about twenty ways of getting help on the screen.
| | 04:05 | If we count each line of help text and
then we start to count the actual links
| | 04:09 | to further information
you can see how they add up.
| | 04:11 | In fact, if we start counting through
the various ways of getting help starting
| | 04:16 | at the top with the Help link 1, the
Live Help link to the right 2, to Learn how
| | 04:20 | to sell, seller's checklist and
selling fees on the right-hand side, plus the
| | 04:25 | eBay Solutions Directory, we are
already at 6 items for getting help.
| | 04:29 | Now counting the each line of help text
and the links within it, gets us to 7,
| | 04:33 | 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
and finally, if you can't figure out how
| | 04:43 | to pick one of three radio buttons where
default choice is set for you, somebody
| | 04:47 | else will do it for you with the
Trading Assistant, leading us to number 18.
| | 04:51 | That's right, 18 different ways of
getting help selecting one of three radio
| | 04:56 | buttons where a default
choice has been set for you.
| | 04:58 | Now I mentioned before one of my tools
for interface design diagnosis, is
| | 05:03 | taking a look at where
there is a lot of help text.
| | 05:05 | Usually, that's a sign that
something else is going on.
| | 05:08 | In this case, people are being forced,
upfront, to make a decision between a
| | 05:12 | bunch of eBay formats they're not
familiar with, nor that they understand the
| | 05:15 | difference between.
| | 05:17 | What's really the difference between
an online auction, a fixed-price item, or
| | 05:21 | selling your items within an eBay store?
| | 05:23 | People coming to this form are new and
perhaps even more savvy sellers may not
| | 05:28 | know the difference.
| | 05:29 | Rather than not having people worry
about that and doing what's right for them
| | 05:33 | eBay forces them to make the choice
upfront and resorts these 18 different
| | 05:38 | ways of getting Help.
| | 05:39 | There are situations however where a
decent amount of Help text is required.
| | 05:44 | In those instances we can turn to
dynamic help solutions rather than littering
| | 05:49 | our page with lots and lots of help paragraphs.
| | 05:52 | Let's take a look at an example of one of these.
| | 05:55 | So here is the solution that
automatically exposes help text as people go
| | 05:59 | along completing a form.
| | 06:02 | Moving to the first input field or
your e-mail address as requested, we see a
| | 06:06 | little block of Help text pop up automatically.
| | 06:09 | This is how an automatic inline system works.
| | 06:12 | As you move between the input fields,
Help text automatically shows up directly
| | 06:16 | inline of the question you're being asked.
| | 06:18 | In this case you need to supply a
valid email address, which we will not
| | 06:22 | be selling to anybody. Great.
| | 06:23 | That gives me some reassurance
about how this information will be used.
| | 06:27 | Next, you can apply automatic
inline exposure to a section of inputs.
| | 06:32 | Rather than a single input, always
getting a line of Help text, which may not
| | 06:36 | makes sense for your form, this
example from Intuit, highlights an entire
| | 06:41 | section, such as first name, last
name, date of birth, social security
| | 06:44 | number and gives you information
about whether you want to change this in
| | 06:47 | your text, documents or not.
| | 06:49 | The dynamic inline exposure that shows up on
the right applies to more than one input field.
| | 06:55 | Another solution is User
Activated Inline Exposure.
| | 06:58 | Again, a similar concept of showing the
Help text that's relevant to the field
| | 07:02 | not automatically, but
when somebody requests it.
| | 07:06 | So here you're seeing a question
asking me for a PAC code IMEI code.
| | 07:10 | Let's say I don't know what one of those is.
| | 07:12 | There is a big question mark that I can
actually click that explains to me the
| | 07:15 | international mobile equipment
identity number and what it does.
| | 07:19 | I can also close that up and hide that
information and make my way through the form.
| | 07:24 | This highlights one of the
challenges of this method.
| | 07:27 | When you expose the stuff, the page
jumps around a little bit and you can get
| | 07:30 | disoriented to where the next step is,
especially if these blocks of help
| | 07:34 | tend to be pretty big.
| | 07:36 | So imagine you have clicked Help a few
times and now all of a sudden the input
| | 07:39 | field is separated by large blocks of
text, making it challenging to follow a
| | 07:43 | path to completion through the form.
| | 07:45 | To manage this, some forms have
applied user activated inline solutions
| | 07:49 | with on-hover effects.
| | 07:51 | So in this example of looking at Issuing
Banks and all the different sections of
| | 07:56 | this form, you can actually just move
your mouse cursor to the section number
| | 08:00 | that applies to each question
and get a sense of what's required.
| | 08:03 | What is the issuing bank?
| | 08:05 | Why do I need to fill it in?
| | 08:06 | Let me keep my mouse here
for a bit and get that data.
| | 08:09 | Now just as I described it
there are some challenges there.
| | 08:12 | You need to keep your mouse
steady, keep it over the field.
| | 08:15 | When that field is there this little
dialog window covers up other fields.
| | 08:19 | So again, not a perfect solution.
| | 08:21 | It also doesn't do a great job of
providing enough room for more detailed help text.
| | 08:27 | Let's say we want to
show some images or a chart.
| | 08:30 | One of these little tool tips isn't
really going to cut it and inserting that
| | 08:33 | information directly inline in between
fields could even make things messier.
| | 08:39 | So instead we can use user activated dialogs.
| | 08:42 | A user activated dialog solution is
a good bet when you have got a chart.
| | 08:46 | A large number of images are just a
big chunk of help text that's required.
| | 08:50 | Here somebody can quote how they get
to savings for college going and you can
| | 08:54 | see the labels or links right there in
that column, and when they click on one of
| | 08:58 | those they get this chart that really
gives them the projected cost of college
| | 09:01 | in detail, thereby allowing them to
make an informed decision on the question
| | 09:05 | they are being asked in the form.
| | 09:07 | User activated dialogs sometimes have
challenges with how they are implemented,
| | 09:11 | especially if you use separate browser windows.
| | 09:13 | So there are some
disadvantages to this approach as well.
| | 09:17 | In the redesign of the selling flow on
eBay, you see that the team has actually
| | 09:21 | taken different tact.
| | 09:22 | Rather than littering a page with lots
of blocks of Help text, they've actually
| | 09:26 | created a standalone Help frame.
| | 09:29 | This Help frame, as you see on
the right here in yellow, is default
| | 09:33 | activated for new users.
| | 09:34 | So if you are coming to eBay for the
first time or you haven't been back in a
| | 09:37 | while, this is exposed to
guide you along the way.
| | 09:41 | The content in the Help frame
changes based on the input field you're in.
| | 09:45 | So it's very similar to an
automatically activated inline solution, except,
| | 09:50 | rather than changing where the location
of the help text is with each field, it
| | 09:54 | stays consistently in this column.
| | 09:56 | You can also bring up this Help column
by clicking on the question marks (?)
| | 09:59 | to the right of any label on the form.
| | 10:01 | So if you need a little extra
information about how to create a good title when
| | 10:05 | describing your item,
click the question mark (?)
| | 10:07 | and the Help column will show
up with that information intact.
| | 10:10 | There are also global controls for
closing and hiding the column up at the top
| | 10:16 | and upper right of the
little column area itself.
| | 10:18 | People are completely in control of
whether or not this column shows up and the
| | 10:22 | type of information it displays.
| | 10:24 | If you leave it open as you go
through the form, the content will update to
| | 10:28 | reflect the field you are on, and by
default if you're new, or haven't been back
| | 10:32 | in a while, you'll get some of
this Help text to guide you along.
| | 10:35 | Now this solution actually proved
quite effective in the context of something
| | 10:39 | like selling on eBay, but I am not 100%
sure and automatic section makes a lot
| | 10:44 | of sense if you are asking
for very familiar information.
| | 10:47 | For example, on the Vizu Registration
form, several paragraphs explaining your
| | 10:52 | username, perhaps unnecessary.
| | 10:54 | The fact that every input field on this
form has several blocks of Help text is
| | 10:58 | probably also not a good idea.
| | 11:00 | For example, do we really need
three paragraphs and three bullet points
| | 11:04 | explaining what's going on with e-mail,
when on the Videoegg we saw simple
| | 11:08 | line, did the trick? We will not spam.
| | 11:12 | Usually, that type of Help text is
enough and we don't need this dedicated
| | 11:16 | automatic section of help for forms
asking us for common information like our
| | 11:20 | Name our e-Mail Address.
| | 11:24 | To wrap up what we do with Help and
tips in web forms, generally, our best
| | 11:28 | practice is to minimize the amount of
Help and Tips required to fill out a form.
| | 11:32 | So I have mentioned earlier, one of my
diagnoses for a form that has problems
| | 11:37 | usability wise, is looking
for large blocks of help text.
| | 11:41 | When you see a lot of help text, when
you see it in red, when you see it red
| | 11:44 | and bold, when you see it red, bold and
blinking, chances are there's an issue there.
| | 11:48 | So the less Help text in general your
form requires, the clearer your labels
| | 11:53 | are, and the easier time people
have making their way through the form.
| | 11:55 | If you do need a bit of help text,
visible and adjacent right next to the request
| | 12:00 | usually works best, but there are
situations where you do have a lot of Help and
| | 12:05 | you may want to consider a dynamic system.
| | 12:07 | If people are unsure about how or why
to answer a question, automatic inline
| | 12:13 | systems could be a good way to go.
| | 12:15 | For forms that tend to get reused,
putting people in control of that
| | 12:19 | User-Activated Help as we
saw in the eBay example;
| | 12:21 | tends to be a good idea.
| | 12:23 | Generally, you know how to fill it in,
but every now and then, you need to refer
| | 12:26 | back to something or need a bit of assistance.
| | 12:29 | Perfect opportunity for a
user activated solution.
| | 12:32 | Inline help that is showing help
information as close to the question as
| | 12:37 | possible works best in most cases
except when you have got a lot of stuff
| | 12:41 | like graphics or tables.
| | 12:43 | In that case you may want to move to a
dialog solution or some of these hover
| | 12:48 | effect solutions that we looked at earlier.
| | 12:50 | And last but not least, a consistent
help section is actually a great model for
| | 12:54 | keeping help text in a specific
area yet contextual at the same time.
| | 12:59 | So if you've got a situation where
there is a lot of help text, sometimes you
| | 13:02 | include images, sometimes include
charts, and contextually people can refer to
| | 13:07 | it, consider using a
consistent help text solution.
| | 13:11 | In aggregate, all these options are at
your disposal, which one is right really
| | 13:15 | depends on the type of form,
audience, and task you have ahead of them.
| | Collapse this transcript |
| Field length| 00:00 | While labels ask the questions people
need to answer in our forms and help and
| | 00:04 | tips can help them along, it's actually
the input fields that really provide the
| | 00:08 | forms where people
can provide their answers.
| | 00:11 | So one of the ways we can help people
along with what's an appropriate answer is
| | 00:15 | by creating the right
field length for our questions.
| | 00:18 | Field lengths, when appropriately sized,
help provide valuable cues about the
| | 00:23 | type of answer that makes sense.
| | 00:25 | When those field lengths are random, it
really doesn't do much to assist people.
| | 00:29 | Let's take a look at an example.
| | 00:31 | Here, the eBay registration form is
using a lot of meaningful field lengths.
| | 00:36 | What I mean by that is the ZIP Code is
generally the size of a ZIP code, the Phone Number;
| | 00:42 | three fields, three characters, three
characters, four characters is exactly the
| | 00:47 | size of an appropriate phone number.
| | 00:49 | Every other input field, whether it's
e-mail address, Create Password or Re-enter
| | 00:53 | Password is a consistent size with
enough room to enter a valid answer.
| | 00:57 | There is not really a default size for
how big your e-mail address should be as
| | 01:01 | compared to your Password.
| | 01:02 | So these fields are exactly the
same for some visual consistency.
| | 01:06 | Note, however, they've all been made big
enough for the input that was being provided.
| | 01:10 | Let's see what happens when a form
arbitrarily sizes every input field to
| | 01:14 | the exact same length.
| | 01:16 | Now we'll see here that First Name,
Last Name, Address, and ZIP Code are all
| | 01:21 | exactly the same size.
| | 01:23 | However, there's been a bunch of help
text added to the ZIP Code field letting
| | 01:26 | people know that they
should only enter five digits.
| | 01:29 | This is because the input field
doesn't have the right affordance.
| | 01:33 | You're not sure if you should use
the five digit plus the dash (-) and
| | 01:37 | additional four digit format of a ZIP code
or if you should only supply five digits.
| | 01:41 | As a result, the form has
had to rely on input text.
| | 01:46 | Contrast this to the eBay example we
saw earlier where the right size of the
| | 01:51 | input field help to guide people
to what the input should be like.
| | 01:54 | Here's another example.
| | 01:56 | In this case, on tick, all the input
fields seem to be sized arbitrarily.
| | 02:01 | Should your company name to be
significantly longer than the Web address
| | 02:04 | you pick for tick, is your e-mail
address really that much longer than your
| | 02:09 | first name or last name?
| | 02:10 | Of course, people might not necessarily
ask all of these questions explicitly,
| | 02:15 | but anytime you pause people and make
them think about the types of answers
| | 02:18 | they're providing, it's an
opportunity for confusion.
| | 02:21 | Rather than using arbitrary field
lengths, use meaningful ones and then provide
| | 02:26 | enough room for every other
one with the consistent lengths.
| | 02:30 | WordPress, same question;
| | 02:32 | my username is a significantly less
than my e-mail address and man, that's a
| | 02:37 | really long field for e-mail, probably
better off to just make these the same size.
| | 02:42 | Overall, field length best practices,
when possible use field length as an
| | 02:47 | affordance to help people
answer questions accurately.
| | 02:50 | Otherwise, just consider using a
consistent length that gives people enough room
| | 02:54 | to provide a valid answer.
| | 02:55 | Those two factors will help you guide
people towards the right types of input
| | 03:00 | into the fields you're providing for them.
| | Collapse this transcript |
| Required fields| 00:00 | Not every question in a web form
has to be answered by every person
| | 00:04 | that encounters it.
| | 00:05 | There are some questions that are
required, that is, they have to have an
| | 00:09 | answer, others that are optional.
| | 00:10 | Indicating which fields are required
is usually pretty useful when there are
| | 00:14 | lots of fields, but very few are required.
| | 00:16 | This lets people really scan the
form and see what they need to complete.
| | 00:20 | An indication of which fields are
optional is more useful when very few
| | 00:24 | fields are optional.
| | 00:25 | Again, allowing people to
really see where they can slack off.
| | 00:29 | Neither is really useful when
every single field is required.
| | 00:32 | Let's look an example here on
barnesandnoble.com, every question has this
| | 00:38 | little orange asterisks, if we look
over the top, we see that the orange
| | 00:41 | asterisk indicates Required.
| | 00:44 | Yet, there isn't a single field here
that doesn't have to be filled in, so
| | 00:48 | what's really the point of the indicator.
| | 00:50 | You'll note that when Barnes & Noble
went through a redesign, they kept the
| | 00:53 | asterisk on every question, but removed
the key that indicates what it's doing.
| | 00:58 | So now you have a little orange
asterisk to the right of every single question,
| | 01:02 | but no indicator what it actually means.
| | 01:05 | Luckily Barnes & Noble redesigned again,
sadly, they kept the indicator around.
| | 01:09 | Now I mention that, it's not really
that useful to say, everything is required,
| | 01:14 | when everything needs an answer.
| | 01:16 | It's much more useful to actually call
attention to the things that are optional.
| | 01:20 | So here on macys we see, First Name,
Last Name, Address, City, State, Zip Code,
| | 01:25 | all these things need an answer, but
the Attention field and the Phone Number
| | 01:30 | are actually optional.
| | 01:32 | Wal-Mart has a similar situation,
but they've inverted the way they
| | 01:36 | represent things visually.
| | 01:37 | Where there is actually an optional field,
such as Address Line 2, they've added
| | 01:42 | the word optional in parentheses
afterwards, but there isn't an indicator of
| | 01:46 | every other field being required,
because frankly, if you put a question in
| | 01:50 | front of someone, chances
are it should be required.
| | 01:53 | Overall, getting a rid of unnecessary
questions as we've seen time and again in
| | 01:57 | the examples we've looked at earlier,
is a great way to increase conversion and
| | 02:01 | to increase the rate of completion, so
don't put questions in front of people
| | 02:06 | that are optional, unless they really
make sense a decent amount of the time.
| | 02:10 | There are some addresses that have a
second line, but there are a lot of
| | 02:13 | addresses that don't, hence Wal-Mart
includes the field, but they label it
| | 02:17 | optional, right then and there.
| | 02:19 | Now the second question is, once you
get over: which things do we label as
| | 02:23 | optional; which things do you label
as required; how do we call that out?
| | 02:27 | On this form deliberately in Japanese,
so that we can focus on the indicators,
| | 02:32 | you see that the required indicator,
once again asterisks, is right to the
| | 02:35 | right of the label.
| | 02:37 | This allows you to really quickly
parse the form and see which fields have to
| | 02:42 | be filled and which ones don't.
Contrast that to another Japanese form and you
| | 02:46 | note that here the required labels
are put to the right of the input field,
| | 02:51 | making it very hard to actually
parse the form and see which things are
| | 02:54 | required and which are not.
| | 02:55 | The rag of the different input types
doesn't give you a clean column to scan and
| | 03:00 | see where there is or isn't a red
asterisk, instead, you've got to jump all over
| | 03:04 | the page and try make out
where that happens to be.
| | 03:07 | In both of these forms a little red
asterisk is what indicates that's required,
| | 03:12 | but it's not always the case that
little red Asterisks are used in web forms.
| | 03:16 | In fact, the Grooveshark registration
form uses a solid pink line ingredient to
| | 03:20 | tell you what you actually have to fill in.
| | 03:23 | Once again, there really isn't much of a
point for this indicator, because every
| | 03:26 | single question in the form is
required. So why the pink line ingredient?
| | 03:32 | Many cases people assume the asterisk means
required, but again, this isn't always true.
| | 03:37 | Here on the Hogan assessments form,
you'll note that Age and Gender has little
| | 03:41 | asterisk next to them.
| | 03:43 | If you're used to the convention of
the asterisks meaning required, you may
| | 03:46 | think that's all you need to fill in on
the form, instead, if you read down in
| | 03:50 | the gray text below, this is actually
Optional Information for Research only, so
| | 03:56 | we see the convention flipped on its head.
| | 03:58 | This is why it's generally better to
rely on explicit text than any kind
| | 04:02 | of visual indicator.
| | 04:03 | What does that pink line of
the gradient actually mean?
| | 04:06 | Doesn't mean required, doesn't mean optional.
| | 04:08 | What does that asterisks even mean?
| | 04:10 | Is that optional or is that required?
| | 04:12 | While many people think the asterisks
indicates required fields, simple text is
| | 04:16 | always going to be clearer. And once
again, when we look at the overall best
| | 04:20 | practices here, when most fields are
required, instead choose the label just a
| | 04:25 | few optional fields, because you are
only labeling a few fields, the opportunity
| | 04:29 | to use plain language texts right
there at the input is available to you, you
| | 04:34 | can just simply say optional.
| | 04:36 | If most fields are optional and just
one or two things that are actually really
| | 04:39 | required, much better to call
those out, rather than to inverse.
| | 04:44 | In both cases the idea is the same.
| | 04:46 | Highlight the things that are different,
rather than spending all your visual
| | 04:49 | communication energy on
the things that are the same.
| | 04:52 | At a high level though, optional fields
in general don't really provide a lot of
| | 04:56 | use. Unless there are situations where a
decent amount of people could use them,
| | 05:01 | try not to include them in your forms.
| | 05:03 | Every question you put in front of
people requires them to parse it, think about
| | 05:07 | formulating an answer and
actually input it into the field.
| | 05:10 | If they don't have to consider,
because it's optional, why bother making them
| | 05:13 | go through the effort?
| | 05:15 | And last but not least, associating
indicators with the actual labels of an
| | 05:20 | input field gives you a consistent
structure by which you can scan the list and
| | 05:24 | see what is required and what isn't.
| | 05:26 | After all, isn't at the point of these
indicators, if you place the indicators
| | 05:30 | to the right of the actual input field,
it makes it a lot harder to scan through
| | 05:35 | and see what you do or do not need to fill in.
| | Collapse this transcript |
| Input groups| 00:00 | Field length and required indicators
aren't the only ways we can help people
| | 00:04 | understand how to provide input.
| | 00:06 | The natural structure between a series of
input fields can actually communicate a lot.
| | 00:10 | Input groups are the way we
represent that structure inside of web forms.
| | 00:15 | Input groups can provide valuable
clues about how to answer a question about
| | 00:18 | organizing things in a
structure that makes sense to people;
| | 00:22 | most common of these
structures is the Address field.
| | 00:26 | From years of writing letters, receiving
letters, and encountering our addresses
| | 00:30 | in various contexts, we've come to
understand what the pieces of an address are,
| | 00:33 | and how they form a block.
| | 00:35 | So when you see a US postal address,
one in France or one in Spain, the
| | 00:42 | structure remains relatively similar.
| | 00:44 | People who lived in these countries for
years can simply look at that block and
| | 00:48 | understand it's an address
without necessarily seeing the labels.
| | 00:52 | When you break that
structure, challenges can emerge.
| | 00:55 | So looking at this form from Nintendo
Wii, you'll see that the Address block is
| | 00:59 | broken up across two lines and it
doesn't really look like the address you
| | 01:03 | encounter everywhere else in life.
| | 01:05 | When you break natural conventions,
you make people work a little bit harder
| | 01:09 | and thereby have to read all the
input fields in order to understand what
| | 01:13 | you're asking them.
| | 01:14 | Input groups can have different shapes;
| | 01:17 | there is Compound Input types as you can
see here in this example of a Scheduled
| | 01:21 | Start time of a day and time.
| | 01:23 | There is Related Inputs such as
specifying the number of something, and the
| | 01:28 | number of items in each of those,
in this case lots, and there is
| | 01:32 | Parent/Child relationships where you
have a Selling Format such as Online
| | 01:36 | Auction which contains some elements
that define it like the Starting Price,
| | 01:40 | Quantity, and Duration.
| | 01:42 | These different input groups again provide
valuable clues about how to answer a question;
| | 01:47 | the fact that a Schedule Start time
consists of a day and time helps you understand it.
| | 01:53 | The fact that there is Related Inputs,
or Parent/Child relationships help you
| | 01:57 | once again to provide the right kind of answer.
| | 01:59 | You can this in action
on this example from eBay.
| | 02:03 | Each of the different shipping services
you specify has a location you'll Ship
| | 02:07 | to, the Service you'll use and a Cost,
and there's three options available.
| | 02:12 | Further below, you can see that there
is a different kind of structure at play;
| | 02:15 | Parent/Child, Where Will you Ship to,
and specifying those countries in more
| | 02:21 | detail if you so choose.
| | 02:23 | When you use input groups
appropriately, you can help people understand
| | 02:28 | what's being asked.
| | 02:29 | When you use them inappropriately,
you can actually confuse people.
| | 02:33 | Looking at this example from Southwest
Airlines is the information below there
| | 02:37 | related to credit card payment
details or PayPal payment details.
| | 02:42 | The close proximity of the input fields
to the PayPal label makes it feel like
| | 02:46 | they are coming from PayPal, but if
you actually toggle that radio button, it
| | 02:50 | turns out they were actually
related to the credit card details above.
| | 02:55 | The proximity of these related input
fields draws people's attention and forces
| | 03:00 | them to think twice about what
am I actually entering in here.
| | 03:03 | One of the ways that we can
communicate more meaningful relationships is by
| | 03:06 | visually grouping elements that are related.
| | 03:09 | Now, there is a couple of
different ways of doing this.
| | 03:11 | What you see here on this example is a
lot of different visual elements being
| | 03:16 | used to individually wrap
nearly every single field.
| | 03:19 | That's a lot of visual noise that
starts to take attention away from labels
| | 03:23 | in the input fields.
| | 03:24 | In fact, when you look at this form,
you start thinking about its structure a
| | 03:27 | lot more than you start thinking
about the questions that are being asked.
| | 03:31 | There's a line between each field,
there are yellow colors, there are brown
| | 03:35 | colors, red colors, bold.
| | 03:37 | That stuff starts to take your
attention instead of the questions being asked.
| | 03:41 | Another example that's pretty common
is actually striping all the questions.
| | 03:45 | People resort to this type of visual
treatment when they want to make a clear
| | 03:48 | comparison between the left-aligned
label and the right-aligned input field.
| | 03:53 | People use this visual layout when they
want to make a clear connection between
| | 03:56 | a left-aligned label, and
the input field on the right.
| | 03:59 | Though people can quickly parse a
label and its input field in this format, a
| | 04:04 | little bit of visual
communication can help as well.
| | 04:07 | The problem is though this
introduces a lot of visual elements which
| | 04:10 | ultimately add up to noise.
| | 04:12 | Let's look at just how much
simple visual change like this adds.
| | 04:16 | So if we add two different background
colors and just separate them by single
| | 04:20 | pixel in order to separate out the
fields, we've actually created 15 different
| | 04:25 | visual elements in this simple little form.
| | 04:28 | And as people go down and say, Scan
the Labels, each instance of a change in
| | 04:33 | visual information stops them,
causes them to pause, and pairs scanning.
| | 04:38 | When you put something on the page
visual, people will look at it and try
| | 04:42 | interpret it, and try understand it.
| | 04:45 | So making those visual
distinctions meaningful goes a long way to
| | 04:48 | communicating what makes an input
group distinct and you can really use just
| | 04:53 | the minimum amount necessary.
| | 04:54 | Looking at this form, there are one, two,
three related sections, and a Submit button.
| | 05:00 | Each section of related input fields has
just a slight visual contrast to distinguish it;
| | 05:04 | the one at the top is white, the one in
the middle is light blue, another white
| | 05:08 | one and then light blue to finalize
the form and a Submit action button.
| | 05:13 | The fields in each of these sections
are related, but the amount of visual
| | 05:16 | information used to indicate
that relationship is minimal.
| | 05:19 | Here is another example back on eBay form.
| | 05:22 | Here, to separate information about
yourself and about the account you're
| | 05:25 | creating, they've used a single thin
rule, not a lot of visual way, just a
| | 05:30 | simple indicator that says okay, now
you're onto a different type of section and
| | 05:34 | these input fields are not related.
| | 05:36 | Input groups in general can be used to
communicate the relationship of different
| | 05:40 | input fields, but you really don't need
a lot of visual information to do that.
| | 05:44 | In fact, the minimum amount necessary
generally is better, because it doesn't
| | 05:48 | lead to confusion about
what's related and what's not.
| | 05:51 | If you apply too much of visual
information, or you group input fields in ways
| | 05:56 | that imply a relationship, people are
likely to read into that and assume those
| | 06:00 | things actually aren't
related in ways you may not intend.
| | 06:03 | So if you are using input groups,
make them meaningful, and use visual
| | 06:07 | communication to communicate that
meaning, so that it's deliberate,
| | 06:11 | not unintentional.
| | Collapse this transcript |
| International addresses| 00:00 | One of the most common types of input
groups in Web forms is the address block,
| | 00:04 | but even the address block has a number
of variations that we need to consider,
| | 00:08 | especially when we've start
talking about International Addresses.
| | 00:11 | As I've mentioned earlier when we
were talking about input groups, there is
| | 00:14 | natural structures among
certain types of input fields.
| | 00:18 | These natural structures can provide
valuable clues about how to actually answer
| | 00:22 | a question and that Visual
organization can represent that structure.
| | 00:26 | So when we look at how Address Blocks
are generally laid out we try to mimic the
| | 00:30 | structure that people are
most commonly familiar with.
| | 00:33 | When we break that structure we force
people to think a lot and perhaps make mistakes.
| | 00:39 | As we see here on the Nintendo Wii
form where the address block structure is
| | 00:42 | divided across two lines and really spread out.
| | 00:46 | International address block structure
follows a similar format and see here in
| | 00:50 | the US, French and Spanish version
though the input labels are a little
| | 00:55 | different the general structure stays the same.
| | 00:58 | So we start thinking about
International Addresses within Web forms this
| | 01:03 | structure plays a big role.
| | 01:04 | Luckily, there is a fair amount of
commonality between the elements that make
| | 01:07 | up an address around the world, looking
at the generic Address Structure here at
| | 01:11 | the top, you'll see that in most
countries the destination or the recipient is
| | 01:16 | first and the rest of the address really
progresses from most to least specific.
| | 01:21 | Russia and Iran are notable exceptions.
| | 01:24 | So when shipping to someone at a
Corporation the individuals names come first
| | 01:28 | then the Corporation name.
| | 01:30 | This line structure is a pretty reliable
baseline for all international address.
| | 01:34 | International address variations start
with the most specific destination to
| | 01:39 | whom an address actually belongs.
| | 01:42 | The next series of variations falls
in the Street Address, though names in
| | 01:46 | Street Addresses can have many
variations a single input for each usually
| | 01:50 | provides an adequate amount of room,
and is all that's really necessary.
| | 01:54 | Street number comes
before street name no problem.
| | 01:56 | Street Number comes after
street Name, also no problem.
| | 02:00 | When it comes to the City Line of
an address block we're not as lucky.
| | 02:04 | In addition to a city name in postal
code a City Line can also include a state,
| | 02:09 | a region, a province, or a county
depending on the country each of these can
| | 02:14 | have different names abbreviations
and locations in the address block.
| | 02:18 | There is also a slew of postal code,
format variations across countries,
| | 02:23 | including the use of spaces, numeric or
alphabetical characters and various lengths.
| | 02:28 | The order of these elements also
varies quite drastically. And you can see the
| | 02:32 | variations that we're talking on the
City Line here, again, not as lucky as a
| | 02:37 | street line China and India
town, province postalcode.
| | 02:41 | Brazil postalcode, town province Italy
postalcode town (provincia) you start
| | 02:47 | to see the challenge.
| | 02:48 | So how can we actually layout a series
of input fields that captures address
| | 02:52 | information knowing that we have these variance.
| | 02:55 | Well there is a of couple
options that we can turn to.
| | 02:57 | Option one is really providing a
very specific format for each country.
| | 03:02 | Specific format approach works best when
you can confidently either infer or ask
| | 03:07 | for somebody's country.
| | 03:08 | Using this approach you custom tailor the
address block specifically for each country.
| | 03:14 | You can see the difference
in this for France and Italy.
| | 03:17 | Note the variations in the line
placement and labels between the two.
| | 03:21 | If you know somebody's country at the
high degree of certainty, you can infer
| | 03:25 | this automatically otherwise
you can give people a choice.
| | 03:29 | In option two, the choice people
have about changing there format can be
| | 03:32 | configured with a drop down.
| | 03:34 | So here when you adjust your country from
Australia to Canada, the rest of the form updates.
| | 03:39 | Now one of the challenges with this
approach is that, in a standard address
| | 03:43 | block the country tends to come last.
| | 03:46 | So you may fill in all the
information only to realize that you can toggle
| | 03:49 | between Australia and Canada and change
the input fields and labels only at the end.
| | 03:54 | Luckily the entire form does not need to change.
| | 03:57 | Really only two fields the State province
region and the ZIP postalcode postcode areas.
| | 04:02 | In the case where somebody selects
Canada instead of Australia State/Territory
| | 04:06 | changes to province, and
postcode changes to postal code.
| | 04:09 | It's important to know that if the
user has filled in any information that's
| | 04:14 | common across both address structures
such as First name and Street address
| | 04:18 | we'll preserve that information when
they change countries that is we don't
| | 04:21 | remove any information
that they've actually entered.
| | 04:24 | Removing information that people have
already provided is likely to really upset people.
| | 04:30 | As a way to address some of the
shortcomings to the Changing Formats approach,
| | 04:34 | many people will try to
capture country information upfront.
| | 04:37 | Sometimes even before somebody enters a
web form. If we can infer a country and
| | 04:42 | we don't have a clue about where they
actually are using something like IP
| | 04:45 | address, we can ask them up front.
| | 04:48 | Here's an example of sticking the
country right at the top and then filling in
| | 04:51 | the information below.
| | 04:52 | What I don't like about this approach is
that it breaks this common address structure.
| | 04:57 | In fact, it aligns everything
vertically in a way that it doesn't represent
| | 05:01 | traditional address
structures as most people know them.
| | 05:04 | So while we capture country upfront,
we don't actually do a lot to take
| | 05:08 | advantages of how people
know and enter address info.
| | 05:13 | Option three takes a different stance.
| | 05:15 | This offers an alternative to
maintaining lots of different variations that
| | 05:18 | support country specific solutions.
| | 05:21 | If you remember option one was giving
people the specific country solution,
| | 05:25 | option two was allowing them to change
that format, option three is releasing
| | 05:29 | the generic format and tries to
support every variation possible.
| | 05:33 | What you run into here is that you
explicitly call out the variations and name,
| | 05:38 | street address and city lines by say
State/Province/ Region, Zip/Postal Code, as
| | 05:45 | a way to be forgiving and inclusive
of any type of variation you can have.
| | 05:50 | When you do so you have to make sure
that you account for alphanumerical
| | 05:53 | characters spaces and variations
and lengths infield like the ZIP or
| | 05:57 | postal code, otherwise something
that's valid in one country might not
| | 06:01 | work out in another.
| | 06:03 | While this kind of Generic Format can
provide a flexible set of input fields for
| | 06:07 | international address, error checking
can be a bit harder because several fields
| | 06:12 | can have multiple valid formats.
| | 06:14 | Also by virtue of its flexibility,
this Generic Format isn't optimized for
| | 06:18 | any country or culture, so it's likely to
be functional, but it's not necessarily ideal.
| | 06:24 | One small variation that a number
people have proposed is to actually create a
| | 06:27 | single open block for your address information.
| | 06:31 | While this seems good on the
surface there are actually a number of
| | 06:33 | potential problems.
| | 06:35 | One of which is that different parts of
the address need to go in the different
| | 06:38 | fields in the database and while it's
impossible to parse things out from a
| | 06:42 | single box it's considerably more difficult.
| | 06:46 | The other big down side is you can
make certain parts of the address mandatory.
| | 06:49 | For example if you're collecting
Billing Information you really need the ZIP
| | 06:53 | code to process someone's credit card,
enforcing that within a single address
| | 06:58 | field where everything is included in
one area is much more challenging than
| | 07:01 | having a separate ZIP code field that
you can respond to when it's left empty.
| | 07:05 | Also it's challenging to allow people
to leave things off such as in Australia
| | 07:09 | where people sometimes leave the
postcode off, if they feel it's not needed.
| | 07:13 | Having a single input field that you try
and parse for a valid format might have
| | 07:17 | a difficult time trying to
catch those types of variations.
| | 07:20 | In general, when dealing with
international addresses, it's good to stay focused
| | 07:25 | on what a common address block looks like.
| | 07:28 | Using more generic labels like Post/
Postal Code over specific country labels
| | 07:33 | like ZIP Code is generally a good idea.
| | 07:35 | Those postal codes are also need
to support numerical, alphanumerical
| | 07:39 | characters and spaces and there are
some situations where country don't have
| | 07:43 | codes or don't require them.
| | 07:45 | So you need to be a little bit
more fault-tolerant there as well.
| | 07:48 | Which option makes the most sense for
you, option one of a specific format;
| | 07:52 | option two of allowing people to
change the format; or option three being
| | 07:56 | flexible, really depends on the
situation you're most comfortable with.
| | 08:00 | Inferring a country with a high
degree of confidence might lead you to:
| | 08:04 | Option one, the fields will be
specific to a country and people have no
| | 08:07 | problem understanding the country that
they're commonly used to providing an address for.
| | 08:12 | Option two; may make a lot more sense
if you don't really have any confidence
| | 08:15 | about what country someone's in,
allowing them to specify and pick a format,
| | 08:19 | maybe the right way to go.
| | 08:20 | And option three; the flexible field's,
maybe a great solution for you if you're
| | 08:25 | comfortable managing all the
variations you have to deal within the form to
| | 08:28 | support any kind of address
within a single set of input fields.
| | 08:32 | Which choice is right?
| | 08:34 | Depends really on the situation you're in.
| | 08:37 | Last but not least there are a number
of resources that you can turn to for
| | 08:40 | further information on international addresses.
| | 08:43 | Particularly I've written the article
that explains many of the points I just
| | 08:46 | made and there is a lot of places
where you can get explicit data around how
| | 08:51 | postal addresses are structured around
the world and how to make use of them.
| | 08:54 | So if you would like to dive a little
bit deeper these are the places to go.
| | 08:58 | This point we have looked
a lot at form organization.
| | 09:01 | We talked about where replacing labels,
we talked about health and tips, we
| | 09:05 | talked about how we format input
fields and structure their lengths, they
| | 09:10 | are required indicators and even
their way be group them to indicate
| | 09:13 | meaningful structures.
| | 09:14 | All of these things add up to a lot of
great best practices for how to layout
| | 09:19 | and organize our web forms, but how we
structure, organize and layout web forms
| | 09:23 | is only part of the solution.
| | 09:25 | The other piece is how people
actually start to interact with our forms.
| | 09:29 | And for that, we'll turn to the
next chapter and form interactions.
| | Collapse this transcript |
|
|
2. Form InteractionInput types| 00:00 | Form organization gave us a sense of how we
structure the elements that make up a Web form,
| | 00:05 | the labels, the input fields, the actions,
where replace things and how we lay them
| | 00:10 | out across pages and even within the form.
| | 00:13 | Form interactions are really where
people start having conversations with us and
| | 00:18 | the services that we provide online.
| | 00:20 | There's a lot of back and forth and
a lot of interactivity that happens
| | 00:23 | inside of the form.
| | 00:24 | So let's look at some of the
details around what makes that happen.
| | 00:27 | We'll start with input types.
| | 00:30 | Input types are the bread and
butter of interactivity on the Web.
| | 00:34 | There are several input types that
are available to us inside of Web
| | 00:38 | browsers through HTML.
| | 00:40 | Many of these you're probably familiar
with, the checkbox, the radio button,
| | 00:44 | the password field, drop-down lists, ways
to pick files, submit, and plain text inputs.
| | 00:51 | These guys are the real work horses of
Web forms and we call on them in many
| | 00:55 | different situations to help people provide
the right kinds of answers in their forms.
| | 01:00 | Now, input types don't live on their own.
| | 01:03 | We're not just placing a single
checkbox on a form asking people to figure
| | 01:07 | it out for themselves.
| | 01:08 | They tend to live with a
number of different elements.
| | 01:11 | Here's an example of the different ways
an input type can live on a form and the
| | 01:16 | structure that they usually take.
| | 01:18 | No matter what input type we're using
and how it's being structured in a form,
| | 01:22 | generally there is a title through a label.
| | 01:25 | There's the actual data we're
collecting which may have a prefix or a postfix,
| | 01:30 | there maybe some associate actions, and some
indicators of what's require or how to get help.
| | 01:35 | So there's more going on around the
input field than just the input field
| | 01:39 | itself and all of this stuff really
helps people understand what should go
| | 01:42 | inside of that input field.
| | 01:45 | Selecting which input type we use is
also something that we need to take
| | 01:48 | into consideration.
| | 01:50 | So let's take the simple task of a
form that allows a novice, first-time
| | 01:54 | user coming to the site to select
up to six ticket totals from three
| | 01:59 | different classes of tickets.
| | 02:01 | The design that we develop should really
optimize for learnability, obviousness,
| | 02:05 | and error prevention.
| | 02:06 | One way we can do this is with an
open text field, a plaintext input.
| | 02:11 | Here, people can enter 0 to 6
tickets for each type of ticket:
| | 02:17 | General, Senior, or Child.
| | 02:19 | One of the challenges with this design is
that it's not very good at error prevention.
| | 02:24 | That is, I could enter 8 or -15, in
which case the form would have to respond
| | 02:29 | with an error state.
| | 02:31 | I also find myself having to move
between mouse and keyboard or strictly
| | 02:35 | moving between keyboard and tabbing through the
fields in order to make my way across the form.
| | 02:39 | Another way to solve the same problem
is by using a drop-down list input type.
| | 02:45 | Here we take a much more
aggressive stance against preventing errors.
| | 02:48 | In other words, each drop-down menu
only has options 0, 1, 2, 3, 4, 5, and 6.
| | 02:53 | You can't put in 8 through -15, so
errors are much less likely to happen.
| | 02:58 | However, the obviousness of the
solution and the usability of it is a little
| | 03:02 | tougher than the open text field.
| | 03:05 | In order to manipulate a drop-down menu,
somebody has to either move your mouse
| | 03:08 | to the little arrow, click, select the
field, let go, and repeat that process
| | 03:14 | across each drop-down field. Little
harder than tabbing between fields and
| | 03:18 | typing as you can do with
an open text box solution.
| | 03:21 | So while this solution provides more
aggressive error checking, the usability
| | 03:25 | takes a little bit of a hit.
| | 03:27 | Option three of solving the exact same
problem uses radio button input type.
| | 03:33 | Here I've only included the first four
ticket types as radio buttons and you can
| | 03:37 | see you can put 0, 1, 2, 3, or 4 for
again, three types of different tickets.
| | 03:42 | This solution again takes a pretty
aggressive stance against errors.
| | 03:46 | You can't really pick something that
would fall outside the range, but it
| | 03:51 | introduces a lot of visual elements to the
form, making things feel a bit more complex.
| | 03:56 | Imagine moving this out to 6 or 8 and
quickly the scalability of this approach
| | 04:00 | starts to break down.
| | 04:02 | So which input type is right?
| | 04:03 | Should we be using open text fields,
drop-down menus, or radio buttons?
| | 04:09 | Hopefully as this example illustrates,
there's a number of things to consider.
| | 04:13 | Not just error prevention, overall
usability, but also how things get
| | 04:17 | represented on the form.
| | 04:19 | Where the layout gets too dense,
where there's too many choices, all these
| | 04:22 | things play a factor in
picking the right input field.
| | 04:25 | When picking input types though, it's
important to stick with the standards.
| | 04:29 | Both browsers on the desktop and mobile
will do their best to make interactions
| | 04:34 | useful and usable when you
use a standard UI element.
| | 04:37 | Let's look at it on the iPhone.
| | 04:39 | So if I use a drop-down menu here,
standard select, and I tap that with my
| | 04:44 | finger, up pops a Device Optimized UI Control.
| | 04:47 | What I mean by that is, rather than the
small little drop-down menu you get on a
| | 04:52 | desktop which would be very hard to
manipulate with your fingers, you get a big
| | 04:56 | scrollable area with large touch targets.
| | 04:58 | Just flick the wheel to get to
the year you want and tap it.
| | 05:01 | The touch target is large and
the wheel can simply be scrolled.
| | 05:05 | Similarly on an Android device, the same
standard UI element of a drop-down menu
| | 05:11 | has a series of device-specific affordances.
| | 05:14 | So when I tap on a country drop-down
field on Android, I get a nice big dialog
| | 05:19 | window with again, scrollable
area and large touch targets.
| | 05:23 | Each device does its best to optimize
for its capabilities if you're using
| | 05:28 | a standard control.
| | 05:30 | Now, there are some limitations of this
series of standard inputs we looked at earlier.
| | 05:34 | Checkboxes, radio buttons, and plain
text boxes aren't necessarily going to do
| | 05:40 | all your heavy lifting for you.
| | 05:41 | Luckily, in HTML5 and beyond, there are
a number of new input types that can be
| | 05:47 | used to make things easier.
| | 05:48 | While support for these isn't huge,
there is no harm in using many of these
| | 05:52 | today, as browsers that don't
understand them will simply ignore them and
| | 05:56 | use input type text.
| | 05:58 | But browsers that do understand them can
start to do some really valuable things.
| | 06:02 | In particular input types like number,
range, and date give us a lot more
| | 06:07 | control over errors and of how people
could provide input inside of our fields.
| | 06:12 | Let's take a look at number.
| | 06:13 | With number I can now specify a minimum
value, a max value, a step function, and
| | 06:19 | an initial starting value.
| | 06:21 | The way a browser would represent this
is an input field that start with 6 and a
| | 06:25 | spinner control that allows me to step
that up by going 6, 8, 10, until I hit
| | 06:30 | the max value of 10.
| | 06:32 | Similarly, an input type of range can
also have a min, a max, a step value, an
| | 06:38 | initial value, but here a browser might
represent a range as a slider, same type of idea.
| | 06:44 | Specifying a more direct input type gives us
more control beyond just a plain text input.
| | 06:50 | Here is a more obvious one:
| | 06:52 | input type date, guess what kind of
control the browser will give you here?
| | 06:56 | That's right, a little date pop-up that
you can use to select not only a month,
| | 07:01 | a year, but a specific day as well.
| | 07:04 | How each browser represents this date
control is up to it, but it takes the
| | 07:08 | burden off of you from creating
JavaScript solutions or custom HTML to allow
| | 07:12 | people to select dates.
| | 07:14 | Simply specify the type and let the
Web browser take care of everything else.
| | 07:18 | Now as I mentioned before, there isn't
that much support for these things on a
| | 07:22 | desktop, but on mobile browsers,
there is a lot of advantages to already
| | 07:26 | starting to specify input types.
| | 07:28 | For example, specifying an input type
of number as we saw earlier on a text
| | 07:33 | field will bring up a numerical
keypad on a device like the iPhone.
| | 07:39 | This makes it a lot easier to
provide accurate input when you're being
| | 07:42 | requested for a number.
| | 07:43 | The keyboard is defaulted to
numerical values, there is a Period (.)
| | 07:46 | there in case you're doing prices, and
there's actually a punctuation mark like
| | 07:50 | Dollar Sign ($) and Colon (:)
| | 07:53 | that allow you to provide really
accurate numerical information.
| | 07:57 | Specifying input type instead of
email will bring up another custom
| | 08:01 | soft keyboard control.
| | 08:03 | Here we see a series of letters and at
the bottom an At (@) symbol and a Dot(.).
| | 08:08 | Most email addresses contain an at (@)
symbol and a dot (.), so there you have a
| | 08:11 | quick shortcut to providing that
input accurately and effectively.
| | 08:16 | One more example, let's specify an input
type of url and we'll see that the soft
| | 08:21 | key shows up with a dot (.), a slash
(/), and a shortcut feature of .com, once
| | 08:25 | again making it faster, easier on
mobile to provide input while reducing the
| | 08:30 | potential for errors.
| | 08:31 | And that's the great thing
about these new input types.
| | 08:34 | They make things easier for people.
| | 08:36 | If a browser doesn't understand
the input type of url, no problem.
| | 08:40 | It just defaults to a plain text input.
| | 08:43 | Text inputs on mobile devices can
also be enhanced with a couple of
| | 08:47 | additional attributes.
| | 08:48 | Specifying auto-capitalize and turning
it off on fields like e-mail, password,
| | 08:53 | and URL allow you to get rid of the
errors that come up when the first letter in
| | 08:58 | a word is automatically capitalized.
| | 09:00 | Auto-correct is another big one,
turning that off on e-mail, password, URL, and
| | 09:05 | other non-alphanumerical inputs help
save people the problem of having things
| | 09:09 | auto-corrected for them.
| | 09:11 | How often is the computer going to
know what your password should be
| | 09:14 | through auto-correct?
| | 09:15 | Not that often and if any you've
had things auto-corrected for you
| | 09:19 | automatically, you know that sometimes
that can be a frustrating experience.
| | 09:23 | Trimming the trailing spaces that
come through auto-correct features is
| | 09:26 | another important consideration,
especially when you start putting those
| | 09:30 | values into your database.
| | 09:32 | Additionally, you can specify other
things such as language mode and format,
| | 09:36 | where they're supported by devices.
| | 09:38 | The idea here is, do small things to
make the act of providing input on mobile
| | 09:42 | easier regardless of
whether each device supports it.
| | 09:46 | Those that don't understand it will
ignore it, and those that do understand it
| | 09:49 | will make these little details like
auto-capitalize and auto-correct much
| | 09:53 | better for your customers.
| | 09:55 | Additionally, mobile devices by their
nature are great at providing numbers.
| | 10:00 | So specifying numerical declarations
to resolve HTML5 or Wireless CSS can
| | 10:05 | also go a long way.
| | 10:07 | Even in cases where the mobile device
doesn't have a virtual keyboard, people
| | 10:11 | won't have to switch to numerical mode.
| | 10:13 | It'll happen for them by default so they
can just start tapping and have numbers
| | 10:17 | entered into the input field.
| | 10:18 | It's also common for numerical values
on forms on mobile to use a single line.
| | 10:25 | After all, these devices were
created for entering phone numbers.
| | 10:29 | Why break phone numbers across multiple
input fields when a single input field suffices?
| | 10:34 | Similarly on price fields, there's a dot (.)
| | 10:36 | right there on the keyboard and you
don't need to have two separate input
| | 10:39 | fields, but as I mentioned, sometimes
the standards aren't enough and there are
| | 10:44 | cases where defaulting to common
input types just doesn't get the job done.
| | 10:49 | Let's look at an example on
the Windows Live Hotmail account.
| | 10:52 | Here when I select a secret question
by which I can get back to my account, I
| | 10:57 | see the following list of questions pop
up in the Device Optimized UI Control:
| | 11:02 | Favorite... cal person.
| | 11:04 | I wonder what that could mean.
| | 11:06 | Here we're seeing that the Select menu,
as displayed inside of the scroll wheel,
| | 11:11 | is actually suboptimal.
| | 11:13 | In other words, there isn't enough
room to actually see the content.
| | 11:16 | And so when you encounter a situation
like this, it may actually better to think
| | 11:20 | about a custom control rather
than going with the default standard.
| | 11:24 | Here, because these questions can run
long and there's a decent list of them,
| | 11:28 | you may be better off with a separate
screen list where people can select rather
| | 11:31 | than using a drop-down menu.
| | 11:33 | Similarly on the American Airlines form
for selecting traveler information when
| | 11:39 | booking an airline ticket, you may
have a better option for actually picking
| | 11:43 | day, month, year, and setting some of
these defaults such as the number of
| | 11:46 | people traveling in each category.
| | 11:48 | Looking at the Mobile Web solution for
the hotel search site KAYAK, you can see
| | 11:53 | where they've applied some custom
controls in place of where American Airlines
| | 11:57 | uses standard drop-downs.
| | 11:59 | One place is with the Spinners.
| | 12:01 | The Spinners here are set to common defaults.
| | 12:04 | When booking a hotel room, most people
book a single room for a single guest.
| | 12:08 | If they need to change that value, one
tap on the Plus (+) sign is all it takes
| | 12:13 | and in fact, on KAYAK, you can only
book up to four rooms at any given time.
| | 12:17 | So at most, getting this value up to
four takes an additional one, two, three
| | 12:23 | clicks, which is roughly the amount of
clicks it takes to manipulate a single
| | 12:27 | drop-down menu on the American Airlines site.
| | 12:30 | You tap the drop-down menu, you move the
scroll wheel to the value you want, you
| | 12:34 | tap on that, and you click Done.
| | 12:36 | Four taps versus a single tap on a
Spinner to achieve the same effect.
| | 12:40 | When you have multiple questions like this,
these controls tend to be a lot more efficient.
| | 12:46 | Similarly, selecting a day
on KAYAK has a custom control.
| | 12:50 | When you tap on the little calendar,
you get Device Optimized Touch Targets,
| | 12:55 | that is the size of the controls are
designed for the size of your fingers.
| | 12:59 | So you can really quickly move
between months and tap the date you want and
| | 13:03 | again, without having to manipulate
multiple drop-down menus like you need to on
| | 13:07 | the American Airlines site where you
can see month, day, and time are actually
| | 13:12 | three separate drop-down menu fields.
| | 13:15 | On KAYAK, the date and the month
all happen with a single touch.
| | 13:18 | Now, just because custom input controls
make sense in some areas, it doesn't mean
| | 13:23 | they make sense everywhere.
| | 13:25 | Here's an example of a native iOS
control that is actually quite convenient.
| | 13:30 | So selecting a height which consists of
feet and inches actually brings up two
| | 13:34 | of these spinner controls.
| | 13:36 | You can select feet in
one and inches in the other.
| | 13:38 | Similarly, you can do this for a date,
month, day, and year each having their
| | 13:43 | own Touch Optimized Spinner Control.
| | 13:45 | The effort of taking this native
control though and putting it inside the Web
| | 13:48 | browser is a little extreme.
| | 13:51 | As we can see on Qantas airlines,
they've taken great steps to making this work
| | 13:56 | inside of a Web browser.
| | 13:57 | In fact, they've even got an
animation upfront that shows you how it works.
| | 14:00 | While I applaud the amount of effort
that went into creating the selector field,
| | 14:05 | this is a control that's
specific to Apple's iOS system.
| | 14:08 | Therefore on the Web, it may not make
sense on an Android device or a BlackBerry
| | 14:12 | device or a Palm device.
| | 14:15 | Native controls, just because they work
in a particular operating system, don't
| | 14:19 | necessarily make for a better
experience in the Web browser.
| | 14:23 | Wrapping up on input types, there's
definite pros and cons for each input type
| | 14:27 | and when you make decisions about
which one to use, consider not only error
| | 14:32 | prevention, usability, but also the overall
layout and density of information on the screen.
| | 14:37 | All these factors and more can lead you
toward the right solution for an input type.
| | 14:42 | Heavily favoring standard input types
gives you a lot of benefits as browsers
| | 14:46 | both on mobile devices and the desktop
will do their best to create the best
| | 14:50 | experience for people possible.
| | 14:52 | They'll create large-sized touch
targets, device optimized controls, and
| | 14:56 | anything within their power to make it
easier for people to select the values.
| | 14:59 | A custom solution should only come in to
play if the standard is really falling short.
| | 15:03 | As we saw earlier, when it's a lot
more work to manipulate a standard and you
| | 15:07 | can get things done to a single
action with a custom solution, that maybe a
| | 15:11 | good solve, but think twice about just
porting over native controls both on a
| | 15:15 | desktop and mobile.
| | 15:17 | What works well in a native solution
might not be the best experience in
| | 15:21 | inside of a Web browser.
| | Collapse this transcript |
| Smart defaults| 00:00 | Defaults are powerful things.
| | 00:02 | When we set them, there is a good
chance that they'll stick around.
| | 00:05 | As result, we want to be pretty smart about
the defaults we set inside of our Web forms.
| | 00:10 | When we are, we can help people allow, and
get them through forms faster and easier.
| | 00:14 | When we don't, it can create some problems.
| | 00:16 | Let's look at an example of
setting defaults in a form.
| | 00:20 | On the eBay sell your item form,
setting your shipping cost comes with a number
| | 00:24 | of different defaults.
| | 00:25 | First of all, the Shipping
Service is set to Standard.
| | 00:28 | This is the service that the vast majority
of people use when they sell things on eBay.
| | 00:32 | Therefore, it makes for a great default.
| | 00:34 | Most people will use it, set it, and forget it.
| | 00:37 | Another example of setting Smart
Default comes in Sales Tax area.
| | 00:41 | A vast majority of sellers on eBay don't
set a sales tax and so the default here
| | 00:47 | is again set to I don't charge tax.
| | 00:49 | Now, look at the difference in the UI.
| | 00:52 | Shipping Service, while Standard is
the default, is more likely to change.
| | 00:56 | Sales Tax is highly unlikely to
change, so the UI reflects that.
| | 01:00 | Shipping Service has a drop-down menu,
Sales Tax has an explicit called action
| | 01:04 | to click change wherein you actually
get the UI element to modify that value.
| | 01:09 | Depending on how certain we are that
the default is right, we can be more or
| | 01:13 | less aggressive with
allowing people to change it.
| | 01:16 | Defaults can also take a
number of different forms.
| | 01:20 | They don't always have to be
associated with the best solution for everyone.
| | 01:24 | In fact, defaults can be personalized,
associated for specific used case or
| | 01:30 | based on common used cases
as we talked about before.
| | 01:32 | Looking at the Kayak Hotel screen
illustrates three of these in action.
| | 01:37 | The first default, my home city
of San Jose is personalized to me.
| | 01:42 | This is where I generally start my
travel, and so the form remembers that and
| | 01:46 | allows me to get going quickly.
| | 01:48 | The next used case is associated with mobile.
| | 01:51 | That is, because I'm looking for a
hotel on my mobile device, chances are, I
| | 01:54 | probably want one tonight.
| | 01:56 | That's easy to change, but at least it
tries its best to take advantage of a
| | 02:00 | used case that maybe popular.
| | 02:01 | And then the most common is set below.
| | 02:04 | Number of guests in a hotel room and
number of rooms is set to something that
| | 02:08 | people are most likely to utilize.
| | 02:10 | This use of defaults for
Personalized, Mobile, and Most Common helps me
| | 02:15 | along with the form.
| | 02:16 | You can see some of these personalized
defaults in action on desktop sites as well.
| | 02:22 | Once again, looking at a travel site,
in this case Expedia, not only is my home
| | 02:26 | destination set when I come to the form,
it actually remembers the last set of
| | 02:31 | values I used while searching for tickets.
| | 02:33 | So leaving from San Jose to
Austin and the dates I'm traveling.
| | 02:37 | When I come back to Reset and redo a
search, having these defaults in place make
| | 02:41 | things a lot easier.
| | 02:43 | Now, there's a debate about how long
these things should stick around, because
| | 02:47 | if I come back after two weeks, perhaps
I'm no longer looking to book this trip,
| | 02:50 | or perhaps the defaults can
reset themselves after I book a trip.
| | 02:54 | But, keeping them around especially
during a session is a great way to help
| | 02:58 | people along through defaults.
| | 03:00 | Why do we care so much about these defaults?
| | 03:03 | As I mentioned before, a lot of them
are likely to stay, but they can also
| | 03:06 | really increase completion rates.
| | 03:09 | Looking at a study on automatic form
filling on mobile devices from a while
| | 03:12 | back, you can see the difference a
pre-filled form makes versus an empty
| | 03:16 | form, and the empty form takes nearly four
times as long to fill in as the pre-filled form.
| | 03:22 | Now, in this test, the pre-filled forms
were deliberately set up with a couple
| | 03:25 | of places where people had to change
values, but even when encountering a
| | 03:29 | mistake or two in a pre-filled form,
the amount of time it takes to complete is
| | 03:33 | substantially smaller.
| | 03:35 | That's kind of a duh moment, but it
does really illustrate through quantitative
| | 03:38 | information that defaults have
a role and are quite powerful.
| | 03:44 | So when thinking about defaults, make
sure that the ones you put in there are
| | 03:48 | the ones that make a lot of sense,
whether they're personalized, specific to
| | 03:51 | a used case, or just the most common
answer for people, they need to align
| | 03:56 | with everyone's goals.
| | 03:58 | Personalized defaults as I mentioned
before can actually help people along
| | 04:01 | especially in a single session where
they're likely to just modify one or
| | 04:05 | two values as they keep trying
different values such as searching for the
| | 04:09 | right price on a flight.
| | Collapse this transcript |
| Input masks| 00:00 | There are a number of situations where we
need a specific format or structure for
| | 00:04 | the questions we ask people.
| | 00:06 | When we do so, we want to try and
prevent the errors that they can make.
| | 00:10 | A technology that helps us along is Input Masks.
| | 00:13 | To talk about Input Masks let me first
illustrate the different ways we can ask
| | 00:17 | people for an input. We can:
| | 00:19 | One (1)
| | 00:20 | give them a blank text input and ask
them to specify the information in a
| | 00:24 | particular way, so at the top when we
ask for Phone Number here, you can see
| | 00:28 | there is a single input field and then
the structure of format that we need in
| | 00:31 | help text to the right.
| | 00:32 | We can also enforce a very strict
structure by dividing the phone number into a
| | 00:37 | number of input fields
| | 00:38 | The first one will only take three
characters, the second one three and the last
| | 00:43 | one four, or we can provide a single
input field and accept any of the valid
| | 00:47 | ways the Phone Number can be answered.
| | 00:50 | Now this requires a little bit of work
on our end to determine if the answer
| | 00:54 | that they enter is actually valid or not,
but it gives people the flexibility of
| | 00:58 | providing an answer in the format they see fit.
| | 01:01 | One of the questions that come up there
when we apply this Flexible Style to an
| | 01:05 | input field is, how will I know what the
right format is, and can we help people
| | 01:10 | with some tips to let them know
they're moving in the right direction?
| | 01:14 | Input Masks can do that and more.
| | 01:16 | Here's an example of a
simple Input Mask at play.
| | 01:20 | You'll see that there is a label e-mail
address and a little bit of help text
| | 01:24 | inside the field telling people the
format that they need to respond with.
| | 01:28 | In this case an e-mail
address that ends in @me.com.
| | 01:31 | Now when I start to enter an Email
Address into this field, the Input Mask will
| | 01:36 | actually keep the format
intact as I provide my answer.
| | 01:40 | So note, I enter an S the @me sticks
around, I enter a T the @me sticks around,
| | 01:47 | and so on, as I go through
entering my e-mail address
| | 01:51 | If I were to type an @, the Mask can
simply ignore that field and move me on.
| | 01:57 | So no harm done if I type @me.com,
it's not going to be duplicated into input
| | 02:02 | field, because the Input Mask ignores it.
| | 02:04 | This again maintains a consistent
structure and helps to cut down on errors.
| | 02:08 | In fact, I can't really make much of an
error here at least with the @me.com part.
| | 02:13 | I can still provide a wrong Email Address,
but, hey, we can only do so much, right?
| | 02:18 | Now input masks are used in a lot
of native applications on mobile.
| | 02:23 | So we can see here an Input Mask
doing the exact same thing inside the
| | 02:27 | iPhone address book.
| | 02:29 | I type in an l, luke and the @me sticks around.
| | 02:33 | Google's Android system also uses
Input Masks, but it uses a little bit of a
| | 02:36 | different technique to
enforce the formatting required.
| | 02:39 | Here after I enter my Username in the
Username field and move onto the next
| | 02:44 | input of Password, an @gmail.com
format is appended at the end.
| | 02:49 | This sort of formatting after the
fact isn't as effective as keeping that
| | 02:53 | formatting upfront, but it's
different enough that it begs the question"
| | 02:57 | What's the right way to do Input Masks,
should we be doing it the way iOS is,
| | 03:01 | or the way Android is?
| | 03:03 | Since in the Web browser we actually
need to implement these Input Masks
| | 03:06 | ourselves using JavaScript, there
really isn't native support yet.
| | 03:11 | We need to know the details
that make an Input Mask work.
| | 03:14 | So let's look at that and we'll
start by looking at a counter example.
| | 03:19 | In this case entering the Phone Number fields.
| | 03:21 | You'll see that again there's a little
bit of help and tips inside the input
| | 03:25 | field indicating what the
format of the Phone Number could be.
| | 03:28 | Now let's start actually
entering the Phone Number in here.
| | 03:30 | Wow, that's a pretty big difference
when the format that was promised.
| | 03:35 | In fact, as I go along entering
this Phone Number, you'll see that the
| | 03:38 | formatting gradually starts to reveal
itself from parentheses to dashes (--) to
| | 03:43 | <spaces>, all of this format
just sort of shows up as I go along.
| | 03:48 | I call this approach the gradual reveal.
| | 03:50 | We're not going to tell you what kind
of format you actually need to use, we're
| | 03:53 | just going to have it pop up as you go along.
| | 03:56 | This can be pretty disconcerting, kind
of like somebody grading or changing your
| | 04:00 | answer to a test, as
you're providing the answer.
| | 04:03 | The other problem with this approach is
that the expectations that are set with
| | 04:07 | the Input Mask are quite different
from what happens in the actual result.
| | 04:11 | The format promise at the bottom is
not the one that you end up with above.
| | 04:15 | So instead, as a good example,
let's look at providing a Tax ID.
| | 04:19 | Here, the format that we see upfront is
the one that sticks with us throughout
| | 04:23 | the process of answering this question.
| | 04:25 | So as I start entering numbers, the
dashes (--) and the format stays in place.
| | 04:31 | It's important to also now that
this Input Mask can do a lot more than
| | 04:34 | just enforce a format
| | 04:36 | It can strictly require me to use
numbers, and if I use an alpha character
| | 04:41 | such as A, B or C, it can ignore that,
knowing that only numbers constitute a valid tax ID.
| | 04:47 | Again, if I insert a dash (-) or slash (/) or a space
<space>, it can assume I meant dash and
| | 04:52 | just use that character, thereby
preventing me from making errors.
| | 04:57 | So maintaining a consistent format is a
really good way to start with the right
| | 05:01 | expectations and keep them
as you go through the form
| | 05:04 | The other interesting factor here is not making
that input field to look like an answer upfront.
| | 05:09 | So you'll see that what we were using
is underscores (_) and dashes (--) that
| | 05:12 | indicate what the format is going to
be, without actually providing values
| | 05:16 | that look like an answer
| | 05:18 | Having fields look like they have an
answer within them, is a good way to get
| | 05:21 | people to ignore them, assuming that that
answer has already been provided for them.
| | 05:25 | So the more you can make your Input
Mask format look like a question
| | 05:29 | rather an answer, the better you'll
be at prompting people to actually
| | 05:32 | provide the answer you need.
| | 05:35 | Looking at Input Masks in general, I
think there are very viable technologies,
| | 05:40 | especially on mobile devices for
helping people prevent errors and provide the
| | 05:44 | kinds of formats you need.
| | 05:46 | By being very fault tolerant, allowing
characters to be ignored and maintaining
| | 05:50 | a consistent format that you can see
throughout the process, Input Masks give
| | 05:55 | people a way to provide strictly formatted
inputs with confidence and a bit more precision
| | 06:00 | When you do use Input Masks though,
make sure that you provide that structure
| | 06:05 | upfront and not change it people as
they go along through a gradual reveal.
| | 06:09 | Also try to avoid cryptic Input Masks,
that give people more information
| | 06:14 | than they actually need.
| | 06:15 | Generally, something that looks like a
question is enough with the format that works.
| | 06:19 | There is no need to get into the
specifics of whether you support numerical
| | 06:22 | characters, alphanumerical characters,
punctuation points and all that, just use
| | 06:28 | what people's expectations are with
the type of question you're asking.
| | Collapse this transcript |
| Additional inputs| 00:00 | Not everyone using a web form has
the same needs, so not every input
| | 00:04 | field applies to them.
| | 00:05 | In fact, it's better to hide
irrelevant options from people so they don't
| | 00:08 | need to consider them.
| | 00:09 | To do so, we can turn to
additional inputs, let's look at an example.
| | 00:14 | Most people have a single manager, so a
form asking for that information usually
| | 00:18 | just exposes First Name and
Last Name of your manager.
| | 00:21 | In cases where you're in a matrix
organization or have two managers for another
| | 00:24 | reason, Additional Inputs allow you to
specify that second manager quickly and
| | 00:28 | easily, just click the Add another
manager link directly below the input field
| | 00:32 | and you get another First Name,
Last Name series of inputs.
| | 00:36 | Note that there is a quick way to
remove those inputs, if you click them in
| | 00:39 | error and decide you don't actually need them.
| | 00:41 | The Remove manager link to the right of
the input fields let's you do just that.
| | 00:45 | Now in situations where you happen to
have three managers, you can just click
| | 00:48 | Add Another Manager again to
expose another set of input fields.
| | 00:52 | In each of these cases the input fields
are showing up in line, that is directly
| | 00:56 | below the action that triggers them.
| | 00:58 | For most additional inputs, this is a
great way to go, because things stay
| | 01:01 | contextually relevant to where they apply.
| | 01:04 | They also are right in line with where
you click the action, giving you kind of
| | 01:08 | a reciprocal on/off behavior, meaning,
you don't have to look elsewhere to see
| | 01:13 | where this thing showed up.
| | 01:14 | Let's look at another example.
| | 01:17 | In the Product Management site Base
Camp, a new message can have a series of
| | 01:21 | additional inputs associated with it.
| | 01:23 | You can choose to Attach Files to
the message or you can Associate This
| | 01:26 | Message with a milestone.
| | 01:28 | Now most messages don't need to do
either of those, so both these options are
| | 01:32 | hidden behind the link.
| | 01:34 | When you do choose to expose these
additional inputs, let's say Associate This
| | 01:37 | Message With a Milestone, clicking the
link shows a series of additional inputs
| | 01:41 | that apply to that step, you can pick
the milestone that applies to, mark it as
| | 01:45 | complete and actually associate it.
| | 01:48 | Once again there's a way out with the
Cancel button, so if you click this link
| | 01:52 | an error or you decide you don't need
these additional inputs, you can get out.
| | 01:55 | And again, these links are showing up in line,
keeping context with the rest of the form.
| | 02:01 | Let's look at one more example, and this
time we'll do things a little bit differently.
| | 02:05 | On the invite service Renkoo there is a
series of Notification Preferences you can set.
| | 02:10 | You can choose to have your
notification sent to your e-mail address, your
| | 02:13 | instant messenger, your
mobile phone, whatever you like.
| | 02:16 | Some people however would like to have
more control over where the notifications go.
| | 02:20 | Most people don't, therefore, these
additional options are treated as additional inputs.
| | 02:25 | Clicking on the Advanced Notification
Settings brings up a little dialog window
| | 02:28 | that gives you a lot more control.
| | 02:30 | You can pick this specific
notification type you'd like on the left and set
| | 02:34 | where it's going to be sent to.
| | 02:36 | This level of control really
is for advanced users, so again.
| | 02:39 | we're not exposing it to everyone by default.
| | 02:41 | Note again there is a way
to get out of this mode.
| | 02:43 | There is Cancel link and a little X up
to the right of the dialog window and the
| | 02:47 | method that we're using here is no
longer in line. Because there is an extensive
| | 02:50 | set of options, putting things
directly below the input field that triggers
| | 02:54 | them would probably jump the page too
much and disorient you and also lose the
| | 02:58 | contacts of the form.
| | 02:59 | So instead we're using a little bit of a
dialog window to show more information.
| | 03:04 | Wrapping up on additional inputs, the
number one point here is to map additional
| | 03:08 | inputs to prioritize the user needs.
| | 03:10 | That is if there's something
everybody needs to consider, you don't want to
| | 03:13 | hide it behind an additional inputs link,
instead you want to expose it on the form for everyone.
| | 03:18 | There are things that only a subset of
people actually needs to engage with,
| | 03:21 | additional inputs are a great option.
| | 03:23 | They're most effective when they're user
initiated, that is, when somebody takes
| | 03:27 | the effort to say, hey, I need to
answer these additional questions, let me
| | 03:30 | click on a link open a
dialog or expose some more fields.
| | 03:34 | They're not as effective when you
automatically try and infer when people
| | 03:37 | need things, trying to guess what everybody
needs here and there, can lead to frustration.
| | 03:43 | Also, when you do use an in-line
solution, try to avoid excessive page jumping,
| | 03:47 | that is, if you're showing a lot of
additional inputs and the form is bumping up
| | 03:51 | and down that maybe time for a
different type of interface, like the dialog
| | 03:54 | window we saw in the Renkoo example.
| | 03:57 | And always maintain a way to get out,
that is when you show these additional
| | 04:00 | options, let people cancel out or
remove the additional fields they've added
| | 04:04 | into the form, just in case they've
decided they don't need them or click
| | 04:07 | that link in error.
| | 04:08 | And last but not least, a consistent
approach will usually do better than
| | 04:12 | lots of variations.
| | 04:13 | People begin to develop expectations
around how additional inputs will show up
| | 04:17 | in a series of forms and if you keep
bouncing between different interface
| | 04:20 | solutions, they may not know what
to expect and be hesitant to engage.
| | Collapse this transcript |
| Selection-dependent inputs| 00:00 | Sometimes a question we ask
people in a web form requires some
| | 00:03 | follow-up information.
| | 00:05 | This differs from additional inputs because
additional inputs are triggered by the user.
| | 00:09 | That is they say, hey, I want
to specify more information.
| | 00:12 | In a situation where we need follow-up
questions answered, it's actually the
| | 00:15 | system or us who are making that same request.
| | 00:18 | For that, we turn to selection dependent inputs.
| | 00:20 | Let's again look at an example.
| | 00:21 | Here's a simple form
applying selection dependent inputs.
| | 00:25 | The first initial question we ask people is,
"are you a new user or a returning user?"
| | 00:30 | If you're a new user, we're going to
actually ask you to create an account.
| | 00:33 | If you're a returning user, we're
just going to ask you to log in.
| | 00:35 | Note that the input fields that follow on
from this initial question are different.
| | 00:40 | So the first question triggers a
series of different questions after it, and
| | 00:44 | that's the basic idea behind
selection dependent inputs.
| | 00:48 | This little model that I was showing
you there is just one way of actually
| | 00:50 | designing these in UI.
| | 00:52 | There's actually a lot of different
variations and we'll look at a few.
| | 00:56 | Here's an example of actually
soliciting feedback for someone around a product.
| | 01:00 | Note that there is a
series of initial questions;
| | 01:02 | are you asking a question, sharing
an idea, reporting a problem? And then
| | 01:06 | follow-on question that comes from that.
| | 01:09 | Similarly on Google Apps page, you can
see the same UI being used for I want to
| | 01:13 | use an existing domain, or
I want to buy a new domain.
| | 01:17 | Once you make that initial choice, a series
of follow-up questions show up directly below.
| | 01:22 | One more example and I'll start to
illustrate some of the problems with some of
| | 01:25 | these approaches and talk about
how we can actually tackle them.
| | 01:27 | On Apple's Checkout form, you have a series
of selection dependent questions at the top.
| | 01:32 | Would you like to pay with a credit or
debit card, do you want to pay with an
| | 01:35 | Apple Gift Card, or do you
actually want to finance your purchase?
| | 01:39 | Selecting Apple Gift Card instead of
Credit/Debit card brings up a different set
| | 01:43 | of fields than the initial field.
| | 01:44 | You'll note on the right that we're
asking for an Apple Gift Card number or
| | 01:48 | Store Credit number.
| | 01:49 | At the top, we're actually asking for a Credit
Card Number, Expiration Date, and Security Code.
| | 01:54 | So the follow-on questions are different.
| | 01:56 | Now this example actually
illustrates one of the challenges with the
| | 01:59 | selection dependent inputs.
| | 02:01 | How do we know which fields are
mutually exclusive and which ones are not?
| | 02:05 | That is, if I fill in information about
my credit card and my Apple Gift Card,
| | 02:09 | will both be processed, or is only the
current active tab the fields that get
| | 02:14 | processed in the form?
| | 02:16 | This is one of the problems with this
top-level tab navigation interface and
| | 02:20 | we'll look at a few
other solutions to tackle it.
| | 02:23 | One way to try and solve this problem
is maybe to flip the tabs on the side and
| | 02:27 | give people a series of options directly below.
| | 02:30 | Here the question of mutual exclusivity
might not apply as much because it seems
| | 02:34 | more like a single selection is made
with information contained therein.
| | 02:38 | As I've illustrated through these
examples, there's a number of different ways
| | 02:41 | to solve the selection dependent inputs problem.
| | 02:43 | So we did some testing to see
which method actually works best.
| | 02:47 | Once again, we ran some usability
studies and we tried it on a couple
| | 02:50 | different techniques.
| | 02:52 | Let me illustrate some of these techniques
upfront to show you what we are looking at.
| | 02:55 | We looked at Page Level, Horizontal
Tabs, Vertical Tabs, Drop-down Menu,
| | 03:00 | Expose Below and Within solutions, and
Inactive Until Selected and Expose within Groups.
| | 03:05 | Here's an example of each.
| | 03:07 | Page Level solution puts
the initial choice on Page One.
| | 03:10 | So you can see here where we're
asking somebody to select a Notification
| | 03:14 | Preference, Contact me through
e-mail, Telephone, SMS, and so on.
| | 03:18 | Somebody selects one of these.
| | 03:19 | Then the next screen they go to
actually asks them the follow-on questions.
| | 03:23 | That is, the input field is
dependent on their first answer.
| | 03:27 | The Horizontal Tab solution we saw in a
few examples earlier, what we're doing
| | 03:31 | here is asking the same notification
preferences question, but we're doing so
| | 03:34 | with a series of horizontal tabs at
the top of the section of the form.
| | 03:38 | So once again, e-mail has a series
of follow-on questions as does SMS.
| | 03:43 | This method does bring up these issues
of mutual exclusivity which we'll talk
| | 03:46 | about in a little bit more depth.
| | 03:48 | Another option is Vertical Tabs.
| | 03:50 | So what we're trying to do here is
really align with the path to completion
| | 03:52 | through the form and bring a series of
choices once again around Notification
| | 03:56 | Preferences in line with First Name,
Last Name, Gender, and then coming down
| | 04:00 | through Contact Info.
| | 04:02 | We've also included radio buttons to try
and make it more clear that only one of
| | 04:05 | these options is selected, but when
you change from e-mail say to SMS, the
| | 04:10 | follow-on questions appear on the right.
| | 04:12 | Next method we'll look at is Drop-down Lists.
| | 04:15 | So what we're doing here is actually
containing a series of follow-on questions
| | 04:19 | within a section of the form
bounded by a drop-down list.
| | 04:22 | So if you switch from e-mail to SMS, you
can see that the information inside that
| | 04:27 | form field applies to what's
active in the drop-down menu.
| | 04:31 | Another technique is Expose-Below Radio Buttons.
| | 04:34 | Here we present the initial choice
pretty similarly to what we did on the page
| | 04:38 | level option at the beginning.
| | 04:40 | But instead of taking you to a
separate page to answer follow-on questions,
| | 04:44 | what we're actually doing is exposing
the follow-on questions directly below
| | 04:47 | the choice you make.
| | 04:48 | So when I pick SMS, you can see
directly below a series of choices I'm given, I
| | 04:53 | have my follow-on questions.
| | 04:55 | A very similar technique, we're here
actually exposing within a set of initial
| | 04:59 | choices, you can see the same
follow-on questions for SMS.
| | 05:03 | Note the big difference between this
approach and the previous one is that here
| | 05:07 | we're directly embedding the questions
below your initial choice rather than
| | 05:11 | presenting them in a separate
section down at the bottom consistently.
| | 05:15 | Two more techniques and then
we'll get to some of our results.
| | 05:17 | Exposed Inactive services all the
options with all of their follow-on questions
| | 05:22 | in one big form, but only
highlights the one that's currently active.
| | 05:26 | So you can see while you can select
between Telephone, SMS, and Instant
| | 05:29 | Messenger, all the follow-on questions
associated with that initial choice are
| | 05:33 | grayed out and inactive.
| | 05:35 | The one you've actually got selected,
in this case SMS, has a series of active
| | 05:40 | input fields, the follow-on questions for SMS.
| | 05:43 | And last but not least, here we're
exposing everything on the form, but
| | 05:47 | allowing people to select at the top level
which one they're actually going to interact with.
| | 05:51 | So the radio button for SMS indicates
the active choice and the fields below it
| | 05:56 | represent the follow-on
questions for that choice.
| | 05:59 | We tested these variations on 23
people using standard usability and
| | 06:03 | eye tracking metrics.
| | 06:04 | Participants were asked to complete
each of the eight designs in random order.
| | 06:08 | We did this to minimize familiarity bias.
| | 06:10 | We also asked people just to
complete the form fully and accurately.
| | 06:14 | So what did we learn?
| | 06:15 | The best performing was actually
the Horizontal Tabs shown here.
| | 06:19 | People were able to quickly go through,
pick the selection they wanted, and fill
| | 06:22 | in the subsequent follow-on questions.
| | 06:25 | In this particular study, the
mutual exclusivity issues I brought up
| | 06:28 | earlier didn't come up.
| | 06:30 | That is people weren't confused if
they filled out information under multiple
| | 06:35 | tabs whether or not each of
those fields would be counted.
| | 06:39 | Interestingly, we saw with the Vertical
Tabs, the one stacked on the side with
| | 06:42 | radio buttons that people actually
did have mutual exclusivity concerns.
| | 06:47 | That is, they felt they needed to fill
in each of the sections as they went down
| | 06:50 | the path to completion.
| | 06:51 | This is different from
what I've seen in other tests.
| | 06:54 | So the final consensus on my end is
both variations have that same issue.
| | 06:59 | That is, people may be confused whether or not
multiple options are counted in their results.
| | 07:03 | The second best performing of the
options was actually this; the Vertical Tabs.
| | 07:08 | I believe in both cases this is due to
people being able to quickly move through
| | 07:11 | a section, find what they
need to fill in, and get out.
| | 07:14 | Overall, we saw in each of the
examples we tested that hiding irrelevant form
| | 07:18 | controls from people until we needed
them resulted in forms that are easy on the
| | 07:22 | eyes and completed quite quickly.
| | 07:24 | That is when we didn't show all the
options to everyone, they were able to
| | 07:28 | use less eye gazes to see what information
is required and get through the form faster.
| | 07:32 | This was pretty consistent across all the tests.
| | 07:34 | The other thing that we saw was that
displaying inline options and their
| | 07:38 | selection dependent inputs in close
proximity to one another seemed to lead the
| | 07:43 | highest satisfaction scores.
| | 07:45 | So what that means is when the distance
between where the initial question was
| | 07:49 | and where the follow-on questions were,
when that distance is low, people tend
| | 07:53 | to have an easier time making the
association between that initial question and
| | 07:57 | the follow-on question.
| | 07:59 | The All Options Exposed as Inactive
or All Options Exposed in General were
| | 08:03 | basically nonstarters.
| | 08:05 | They had the lowest success rates,
highest number of errors made, and lowest
| | 08:09 | satisfaction of all the solutions.
| | 08:11 | Our eye tracking data showed that
participants made a whopping eighteen (18) more vexations
| | 08:15 | with their eyes using the Expose Group
solution than they did with any of the
| | 08:19 | inline exposure solutions.
| | 08:21 | That's a lot more time and effort
required to parse what's going on in the form.
| | 08:25 | The All Options Exposed as Inactive or
All Options Exposed also led to a lot of
| | 08:30 | filling in of irrelevant form fields.
| | 08:32 | That is, people started to fill in
fields that didn't apply to them because they
| | 08:36 | were just exposed and on the form,
once again leading us to that finding that
| | 08:40 | hiding irrelevant form controls
from people is generally a good option.
| | 08:44 | So how do we think about
selection dependent inputs in aggregate?
| | 08:48 | If there is lots of dependent
inputs, using the page level control is
| | 08:52 | generally a good idea.
| | 08:53 | You'll get average completion times,
average satisfaction scores, and things
| | 08:57 | will basically just be okay.
| | 08:58 | But the sheer fact that there's a
lot of follow-on questions from that
| | 09:01 | initial question leads us to using as much
screen space as possible, a.k.a. another page.
| | 09:08 | Vertical and Horizontal Tabs perform
really well, but can have these mutual
| | 09:11 | exclusivity issues in both solutions.
| | 09:14 | So if you're going down that direction,
at least be aware that there's that
| | 09:17 | opportunity for people to get confused.
| | 09:20 | If you have a long list of initial
inputs and just a few dependent questions for
| | 09:24 | each of those, drop-down menu can be
your friend, thereby stacking a number of
| | 09:29 | options inside of this drop-down
control and then bringing up those follow-on
| | 09:32 | questions right there in close
proximity to your initial choice.
| | 09:35 | If you have a short list of initial
options and just a few dependents, exposing
| | 09:40 | them inline in a series of radio
button choices could be a great way to go
| | 09:44 | because it maintains that close
proximity again of initial question and
| | 09:48 | follow-on questions.
| | 09:49 | In all cases, you want to maintain a
clear relationship between your initial
| | 09:53 | question and the follow-on questions.
| | 09:55 | You'll note in all the examples
we show we try to use this yellow
| | 09:58 | highlight color to accentuate which
things are actually associate with
| | 10:01 | your initial choice.
| | 10:02 | And last but not least, try to
avoid jumping that really disassociates
| | 10:06 | those initial options.
| | 10:07 | This usually happens when you have too
many follow-on questions and the form
| | 10:11 | skips up and down and people get
disoriented about where they are.
| | Collapse this transcript |
| Actions| 00:00 | While labels ask the questions that
people fill out in web forms, input
| | 00:04 | fields allow them to actually provide an answer.
| | 00:06 | Actions are the things that let people
tell us they are done, in other words
| | 00:10 | they are the final hurrah.
| | 00:12 | However, not all actions in
web forms are created equal.
| | 00:15 | In fact, some are primary, they lead to
success like Save, Continue, and Submit.
| | 00:20 | Others are secondary and can
sometimes lead to destructive actions like
| | 00:24 | Cancel, Reset, or Go Back.
| | 00:26 | Because these actions aren't
equal we don't want to represent them
| | 00:29 | visually equally either.
| | 00:30 | Here is a couple examples of how we
can represent primary and secondary
| | 00:34 | actions in web forms.
| | 00:36 | In the example at the top the big blue
button is the primary one, the light gray
| | 00:40 | one is a secondary action.
| | 00:42 | We can introduce even more contrast
by making the primary action a big blue
| | 00:46 | button and the secondary action just a link.
| | 00:49 | We can even go further by taking
that link and moving it far away from
| | 00:53 | the primary action.
| | 00:54 | Each of these instances creates
contrast between what's the main successful
| | 00:58 | action and what's secondary, you can
even see this type of contrast that's
| | 01:02 | introduced with text links at the bottom.
| | 01:04 | The bold blue icon is the primary
action and the light white icon is
| | 01:09 | the secondary action.
| | 01:11 | Generally what you want to avoid
the most is a situation like this.
| | 01:15 | Here we see Cancel, the secondary
action and Confirm the primary action
| | 01:19 | being treated equally.
| | 01:20 | In fact, to make matters worse the
Cancel, your secondary action is what's
| | 01:25 | directly aligned underneath the input field.
| | 01:27 | So simply following a primary path to
completion from label to input field
| | 01:31 | to button would lead you in a destructive
action, in other words canceling the form.
| | 01:36 | Here is another example.
| | 01:38 | It's been a long time on the site
trying to find the perfect flight.
| | 01:41 | After about 30 minutes of searching I
finally had it, I was ready to checkout
| | 01:46 | and here is the form that greeted me.
| | 01:48 | Now let's play find the primary action.
| | 01:51 | Looking at the top where the price and
flight information is? Nope, the only
| | 01:55 | thing I can find there is empty
shopping basket and start again.
| | 01:58 | Going all the way down to the
bottom of the form reveals one more Empty
| | 02:02 | shopping basket and start again, and then read
letters to the right is Continue to payment page.
| | 02:08 | Arguably Continue to payment page is
the most important action in this form.
| | 02:12 | I found the perfect flight, I'd like to
pay for it, the airline would probably
| | 02:15 | like to collect that money yet the
Empty shopping basket and start again link
| | 02:20 | not only is repeated twice it's even
got a red icon I think the visual way
| | 02:24 | should really be given to the Continue
to Payment Page Link, it's primary, it's
| | 02:29 | the most important, let's treat it that way.
| | 02:31 | Another example here and you'll find
that the primary action Checkout is all the
| | 02:35 | way in the right-hand column next to an ad.
| | 02:38 | Given many of us have banner ad
blindness putting the way to complete this form
| | 02:42 | right next to an ad is
probably not the best idea.
| | 02:45 | One more note that Start Over
secondary action that actually removes all the
| | 02:50 | information I just put into the form
is given a lot more prominence than go
| | 02:54 | which leads me to success.
| | 02:56 | Given there is all these variations in
how we can represent actions on a form,
| | 03:00 | we decided to take a look at which
one works best, so we ran some tests.
| | 03:05 | In fact, we ran six different options
past 23 people using standard usability in
| | 03:09 | eye-tracking metrics.
| | 03:11 | We gave people these options in random
order so there was no familiarity bias created.
| | 03:16 | On the right-hand side you can see the
variations we tested, we tried primary
| | 03:20 | action as a big button,
secondary action as a link;
| | 03:23 | in option B, we made both actions big buttons;
| | 03:27 | in option C, we varied the color;
| | 03:29 | option D, we aligned things to the right;
| | 03:31 | E, we'll space them out, and
F, we put them in the middle.
| | 03:35 | So what did we learn?
| | 03:36 | We saw that option B was the fastest
performing and had the least amount
| | 03:39 | of eye-fixations, that is, people spent
the least amount of time parsing it visually.
| | 03:44 | Option B of course is the one
that has both buttons equal.
| | 03:47 | However, when we dug into the
qualitative information we saw that people
| | 03:51 | actually preferred option C and A
where we made a distinction between primary
| | 03:55 | and secondary actions.
| | 03:56 | What we heard from people was, I really
appreciate that the form took the time
| | 04:01 | to tell me which button is the right one to hit.
| | 04:04 | In other words they saw the distinction,
it slowed them down and they thought
| | 04:08 | about what the click and made the right choice.
| | 04:10 | Now there is an argument to be made
about whether or not we should actually even
| | 04:13 | have a secondary action here.
| | 04:15 | After all what's the point of
canceling the form after you've inputted a lot
| | 04:19 | of information in it.
| | 04:20 | If you want to back out just click
back in your Browser Window or better yet
| | 04:24 | close the Browser Window entirely,
Cancel here might just be leading to errors.
| | 04:28 | We also learned a couple
of other things in the form.
| | 04:32 | When we tested a pretty common
situation, which is primary action on the
| | 04:36 | right, Continue, Submit, secondary
action on the left, Cancel and Go Back we
| | 04:41 | saw a lot of errors.
| | 04:43 | In fact six (6) out of twenty-three (23) people failed to
complete the form on the left, then we
| | 04:48 | start at the top, made their way down,
landed on a button, hit it, only to
| | 04:53 | realize that canceled all their work.
| | 04:55 | Now this is probably due to the
primary path to completion that we
| | 04:59 | talked about earlier.
| | 05:00 | People get going they moved straight
down and wherever they land they assume it
| | 05:03 | is going to lead them to success.
| | 05:06 | Option E was also six seconds
slower than our best-performing option.
| | 05:10 | On a simple form like this, that's a long time.
| | 05:13 | Option F also had some problems.
| | 05:16 | Though people successfully completed
this design there were a lot slower doing
| | 05:19 | so, and they were a lot more
efficient in other designs as indicated by the
| | 05:23 | amount of fixations that happened on option F.
| | 05:27 | A, B, and C were the clear winners,
qualitatively people preferred the
| | 05:30 | distinction in A and C where there is
either color variation or link variation
| | 05:35 | between the primary and secondary
action, but what all these options had in
| | 05:39 | common is that they really aligned with
the primary path to completion, that is,
| | 05:43 | you start at the top of the form, made
your way down and got dropped off where
| | 05:46 | you be led to success.
| | 05:48 | The heat map on the right illustrates this.
| | 05:50 | The dark red areas is where
people concentrate the most.
| | 05:53 | As you can see, it's a pretty linear
path straight down putting a secondary
| | 05:57 | action which cancels all their work
right at the bend of this path probably
| | 06:01 | isn't the best idea.
| | 06:03 | While the examples we looked at in
this test were around simple registration
| | 06:07 | forms, this principle applies to more
complex forms as well, you can see in the
| | 06:12 | example on the right is contrasted to
the one on the left the big red primary
| | 06:16 | action really sticks out and
guides people to a successful outcome.
| | 06:20 | One of the most common questions I
get asked about primary and secondary
| | 06:23 | actions is; What happens when a form
spans multiple pages and we really need
| | 06:28 | Next and Previous buttons?
| | 06:29 | How do we lay those out if we're also
trying to make sure that certain actions
| | 06:33 | are primary and other actions are
secondary, so let's look at these two things?
| | 06:38 | The one at the top utilizes a
traditional structure for moving forward on the
| | 06:42 | right and moving back on the left in
the form of Next and Previous buttons.
| | 06:47 | The one below really has one primary action,
Continue and a secondary action Go Back.
| | 06:53 | This is the debate, is the top
option better or is the bottom one better?
| | 06:57 | I think instead of trying to debate the
merits of each of these approaches it's
| | 07:00 | more useful to look at what we shouldn't do.
| | 07:03 | As you can see in the example above
dropping people off on an action that leads
| | 07:07 | them back is generally a bad
idea, we saw this in our testing.
| | 07:11 | When people landed on the button at
the end of the form that was not leading
| | 07:15 | them to success they often made mistakes.
| | 07:17 | So if you have a left-aligned or right-
aligned label form consider the option
| | 07:21 | below instead, you'll get dropped off
on a big Next button and the Previous
| | 07:26 | link just sits there small and as text, much
less likely that someone will hit that an error.
| | 07:32 | If you're going to go off the left-
right treatment, don't swap the ordering as
| | 07:36 | the third image here shows.
| | 07:38 | Previous probably belongs on the
left and Next belongs on the right.
| | 07:42 | Moving forward to the right, back to
the left is a common convention in user
| | 07:46 | interfaces and we shouldn't be
breaking it within our web forms.
| | 07:50 | Now if you're dealing with top-aligned
labels there are similar things to consider.
| | 07:54 | As you can see in the first two images
here dropping people off on a Previous
| | 07:58 | Button regardless of whether or not
there is space between it and the Next
| | 08:01 | Button one, it's probably not the best idea.
| | 08:03 | Instead, consider renaming your
buttons as Continue and Go Back and making
| | 08:08 | Continue the primary action.
| | 08:10 | This again drops people off on a
successful action, so they can continue moving
| | 08:13 | forward as opposed to going back.
| | 08:16 | To summarize what we talked about
with actions, in general we won't
| | 08:19 | avoid secondary actions.
| | 08:21 | How often do you really want to reset
or cancel our work, and if we do can we
| | 08:25 | just let the Web Browser handle that?
| | 08:27 | Secondary actions that are destructive
like this are often hit in error and we
| | 08:31 | don't want people losing all the hard
work they just put into our Web Form.
| | 08:35 | If you do find yourself needing
multiple actions make sure one's primary, the
| | 08:40 | thing that leads to success Submit,
Continue, all of that can be represented
| | 08:45 | through a clear visual hierarchy.
| | 08:47 | In other words, make it big, make it
bold, really make it stand out, leave the
| | 08:51 | secondary action behind and
then give it much less visual way.
| | 08:55 | You always want to align your primary
actions with the input fields in order to
| | 08:59 | maintain a clear path to completion.
| | 09:01 | As we saw in the eye-tracking data
people start at the top, make their way down,
| | 09:05 | and where they land is where they want to go.
| | 09:08 | Previous and Next actions, you find
yourself in a situation where you need
| | 09:11 | those, make sure you're not breaking
the expectations and consider the things
| | 09:15 | that won't work that we walked through earlier.
| | Collapse this transcript |
| Actions in progress| 00:00 | Sometimes even when we get to the end
of the form and hit the primary action,
| | 00:03 | things might take a bit.
| | 00:05 | That is, you may need to process
some information, calculate some data or
| | 00:09 | even upload a file.
| | 00:10 | In these situations we want to provide
feedback that actions are in progress.
| | 00:14 | Here is a situation we'd like to avoid.
| | 00:17 | Do not click the Submit button twice;
| | 00:19 | you may actually get your
credit card billed twice.
| | 00:22 | Look at the amount of
legal text in the second one.
| | 00:25 | We run the risk of having
our credit card charged.
| | 00:27 | The issue here is that the burden has
been put on the user, on our customer,
| | 00:32 | instead of being taken on us.
| | 00:34 | The system should instead of giving
this type of message, disable the primary
| | 00:38 | action so that people can't make a
mistake, and then provide a little bit of
| | 00:42 | feedback about what's going on.
| | 00:44 | Let's see how that can actually happen.
| | 00:45 | On the 37signals' site, Basecamp, we can
see an example of this principle in action.
| | 00:51 | When I click Post this message with an
attached file you'll note the primary
| | 00:56 | action turns into an animation.
| | 00:58 | That is, it's letting me
know that something is going on.
| | 01:00 | I can no longer click that button again;
| | 01:02 | therefore, I can no longer make a mistake.
| | 01:05 | Up at the top we see another animation that
actually tells us why things are in progress.
| | 01:09 | A file is being attached, that may take
a bit to upload, okay, now I understand
| | 01:13 | what's going on here.
| | 01:14 | The feedback and the disabling of the
Submit button actually let me know that
| | 01:18 | actions are in progress.
| | 01:20 | Disabling the Submit button doesn't mean
hiding things from people until they're ready.
| | 01:25 | So on this example of a form for getting
online, how do I actually submit the form?
| | 01:30 | That's right, the primary action has
been removed until I click a single radio
| | 01:34 | button, which then pops up this Activate link.
| | 01:37 | This isn't what I mean by
disabling the Submit button.
| | 01:39 | What I am talking about disabling the
Submit button, I mean, letting people know
| | 01:43 | that something's been in progress and
that their action has been registered.
| | 01:47 | Not that they need to hunt around
for how to actually complete a form.
| | 01:50 | While we are on the topic of
streamlining actions, a very common pattern at the
| | 01:55 | bottom of the form is the Agree and Submit.
| | 01:58 | That is, you need to agree to a series
of legal terms or privacy policies and
| | 02:02 | then hit a submit button.
| | 02:04 | Problem with this approach is that many
times the Accept and Agree Checkbox is
| | 02:08 | unchecked, because lawyers are
expecting us to actually take an affirmative
| | 02:12 | action indicating that we agree to that.
| | 02:15 | What happens is, people go through the
form, don't see that checkmark, click
| | 02:19 | Join Now, and get an error.
| | 02:21 | A much easier solution at least in terms of
streamlining, is to actually put in text like this.
| | 02:26 | By clicking on the button below,
I agree to the Terms of Service.
| | 02:30 | Therefore no checkbox to miss, and
there's still an affirmative action gained by
| | 02:34 | clicking on the button.
| | 02:36 | eBay Express has gone even further and
removed the I Agree type of language,
| | 02:40 | instead making the button really aligned
with what people are trying to achieve.
| | 02:45 | In this case they are trying to register.
| | 02:47 | So the text at top says, By clicking
"Register" you agree to the privacy
| | 02:50 | policy and terms of use.
| | 02:52 | But there is only a single button, no checkbox.
| | 02:54 | This opportunity to streamline things gets
people through forms more quickly and effectively.
| | 03:00 | In general, with Actions In Progress,
what we want to do is provide an
| | 03:03 | indication that something is going on.
| | 03:05 | We don't want to put the burden on our
customers by telling them, "Don't click
| | 03:08 | Submit twice or we will charge you twice,"
| | 03:10 | that seems really unfair.
| | 03:12 | Instead, we want to communicate
these actions in progress by disabling
| | 03:15 | Submit buttons, turning them into
animations, and giving a sense of what's
| | 03:19 | slowing things down.
| | 03:21 | A file is being uploaded, some data is
being calculated, whatever it may be.
| | 03:25 | Last but not least, while we are talking
about Streamlining Actions, consider an
| | 03:29 | opportunity to streamline legal requirements.
| | 03:31 | This is a common area where people get
tripped up in web forms and end up with errors.
| | 03:35 | You can simply move things to a single
action and have that action labeled, the
| | 03:39 | primary thing that
people are trying to complete.
| | 03:41 | Purchase, Register, that'll get people
through forms more quickly and on their
| | 03:46 | way to the good stuff.
| | Collapse this transcript |
| Errors| 00:00 | We can do our best with asking clear
questions using form labels, providing
| | 00:04 | great efforts as using Form Input Fields,
and laying things out appropriately,
| | 00:08 | but errors still may happen.
| | 00:09 | When they do, we want to do our best
to resolve them as quickly as possible.
| | 00:14 | Let's look at how we do that.
| | 00:15 | Not too long ago I was asked to
register for the Fairmont President's Club.
| | 00:19 | This is a club for people who
stayed at the hotel more than once.
| | 00:22 | I was given a card number and asked to
fill in this form, pretty much no problem.
| | 00:27 | Went through the form, and,
can you tell what happened?
| | 00:30 | Somewhere on this form is
actually an error message.
| | 00:33 | Down at the bottom of three paragraphs
of text, we see some bold text, which
| | 00:36 | tells me, hey, we are sorry, but we
can't actually find that card number.
| | 00:40 | Please verify the number and try again.
| | 00:43 | Well, how exactly do I do that?
| | 00:45 | It doesn't really seem like there is
an opportunity to do so on this page.
| | 00:48 | This indicates a number of problems with
the way that Fairmont has treated errors.
| | 00:52 | Number one, it's difficult to know
that an error has actually occurred.
| | 00:55 | There's not a lot of visual
contrast of this error message.
| | 00:58 | In fact, it's very below three
paragraphs of text and only made bold.
| | 01:02 | Two, the way they tell me to actually
correct the issue, is impossible, there is
| | 01:06 | no way to verify the number
and try again on this page.
| | 01:09 | The only choice I am left with this
to hit the Back button and try going
| | 01:12 | through the form again.
| | 01:13 | So how can we make the errors on
the Fairmont site more effective?
| | 01:17 | For starters, we can put a primary
message at the top of the page that indicates
| | 01:20 | an error has happened.
| | 01:21 | When there is an error on the form,
it's arguably the most important thing,
| | 01:25 | therefore, let's treat it that way
visually, really making it pop with bold
| | 01:29 | fonts and icon and even a red border.
| | 01:32 | Secondarily what we've done is
associate that primary message with the error
| | 01:35 | that's causing it, so you can see
red font is also used near the Fairmont
| | 01:40 | President's Club input field.
| | 01:41 | The association between that message
and the thing causing the error is a great
| | 01:46 | way to see, well, what's really wrong here.
| | 01:48 | And then the third what we've done is
given people ways to resolve the error,
| | 01:51 | both in the message at the top and at
the input field causing it, we have text
| | 01:55 | that says, Please try again or contact us.
| | 01:58 | Contact Us is a link that gets
you to help to fix the problem.
| | 02:02 | The actual point where we message an
error requires a doubling of visual language.
| | 02:06 | That is, we do more than one
thing to indicate where an error is.
| | 02:10 | We can do this in a number of
different ways, and here are some examples.
| | 02:13 | The first one uses an icon, bold text,
and a red color, and even a gradient to
| | 02:17 | indicate where there is an error.
| | 02:19 | Second one below uses an
icon and some additional text.
| | 02:22 | Third one below actually uses
a background color, and so on.
| | 02:26 | The idea here behind doubling visual
language is that it brings more attention
| | 02:30 | to the areas that have problems.
| | 02:32 | It also helps people who may have
colorblindness or who may not see a subtle
| | 02:36 | differentiation in just bold or just
color, find where an error is happening.
| | 02:41 | More than one change in visual
language creates more contrast helping people
| | 02:45 | find errors quickly and effectively.
| | 02:48 | Let's look at this technique on a form.
| | 02:50 | If you remember this form from our
previous discussion of Primary and Secondary
| | 02:54 | Actions, you'll note that
I've made one important change.
| | 02:57 | The Confirm action is now the primary
button and the secondary action of Cancel
| | 03:01 | has just been turned into a little link.
| | 03:02 | But let's say someone goes to this
form and doesn't fill in a Subtitle, but
| | 03:07 | hits the Confirm button. What do we do?
| | 03:09 | Well, here's the same
techniques around error messaging.
| | 03:13 | You'll note at the top we tell you that
you need to correct the information, we
| | 03:16 | point you to where the error is
actually happening, and again, we double the
| | 03:20 | visual language at the point where the
errors occurred, by turning the title
| | 03:24 | red, bolding it and inserting a line of
text directly below the input field that
| | 03:28 | tells you how to resolve the error.
| | 03:30 | This resolution of the error is the
third important piece of error messaging.
| | 03:34 | Enter a subtitle or click Cancel. Both
ways will get you out of this error state.
| | 03:39 | On forms where there is multiple points
of error, we can apply the same technique.
| | 03:43 | So on the eBay, Post to Want It Now
form, you can see Title, Description, and
| | 03:48 | Category are missing, and we've applied
the same treatment for indicating what's
| | 03:51 | wrong to each field.
| | 03:53 | Each one gets a doubling of visual
language, each one gets a set of text
| | 03:56 | that explains how to fix it and
everything is wrapped up at the top in an
| | 04:00 | overall error message.
| | 04:02 | Now some people may react to seeing a
form like this and say, hey, that's way
| | 04:07 | too much red text for a
simple little form like this.
| | 04:09 | Do you really need to highlight
every single input field in the same way?
| | 04:13 | Well, number one, it's unlikely that
somebody is going to go to a form not fill
| | 04:17 | anything in and click Submit,
this is kind of an artificial state.
| | 04:21 | But number two, especially on longer forms,
it really helps to know where the error is.
| | 04:26 | Consider this example on Jotspot.
| | 04:29 | Here, there is an error message at
the top that says, this e-mail address
| | 04:32 | is already registered.
| | 04:33 | Hey, there is not an association with
where the input field is, so I need to
| | 04:37 | look a little, but because it's a
short form that's not such a big deal.
| | 04:40 | The bigger problem is there is
really no way to resolve this error.
| | 04:44 | That is, what if that is my e-mail
address, what if I don't know if I've
| | 04:47 | already registered?
| | 04:49 | And assuming I already have
registered, how can I resolve this problem?
| | 04:52 | There is no way to get help doing so.
| | 04:54 | In fact, this form only contains one of
the three pieces of what I think makes
| | 04:59 | an effective error message.
| | 05:00 | That is, it has a primary message at
the top that tells you something is wrong,
| | 05:03 | but it doesn't associate that
message with what's wrong, and it certainly
| | 05:07 | doesn't give you a way to resolve the problem.
| | 05:09 | Especially on longer forms, the idea
of associating that primary message with
| | 05:13 | what's wrong is a big deal.
| | 05:15 | That is, the error may actually be off-
screen, and if there is multiple errors,
| | 05:19 | we can't just move the page to where
the error is, we need to give people an
| | 05:22 | overview of what's wrong.
| | 05:24 | So on this long Balance & Draws form,
having that error message at the top
| | 05:28 | really helps, and then doubling the
visual language with where the error
| | 05:31 | actually is, allows you to scan
through the form by scrolling and finding
| | 05:35 | where the problems lie.
| | 05:37 | Last but not least, we also need to consider
how to deal with error messages in dynamic forms.
| | 05:42 | That is, in places that don't have this page
model of Submit and Refresh the entire page.
| | 05:47 | So on Apple's Checkout Registration
form they are using an accordion model.
| | 05:51 | Let me illustrate what that means, and then
show how an error state can show up there.
| | 05:55 | We are filling in Shipping information,
and we click Continue, that section rolls up.
| | 06:00 | Note there wasn't a Page Load and
Refresh, everything is happening dynamically.
| | 06:04 | As we go through the payment
information and click Continue there, you'll note
| | 06:08 | an error pops up, the little
yellow field I am correcting right now.
| | 06:12 | Because we are not leaving the page, we
are actually dynamically inserting the
| | 06:15 | error state into the form as people go along.
| | 06:18 | This way we can manage errors without
having people actually leave the page.
| | 06:22 | To wrap up Errors Best Practices,
the first big deal is that we need to
| | 06:26 | communicate an error has happened.
| | 06:28 | When something is preventing you from
submitting a form, that's a big deal,
| | 06:31 | and usually the most important thing on the page,
therefore we should treat it that way visually.
| | 06:35 | Strong prominence, big message at the
top, bold, red icon, whatever it takes to
| | 06:40 | grab people's attention and tell
them they need to address the challenge.
| | 06:44 | Secondarily, we want to associate that
big message with the thing causing it.
| | 06:48 | So some level of visual
communication that is similar color, similar type
| | 06:52 | treatment similar icons that
lets you know where that error is.
| | 06:56 | Third, and perhaps most important, is
giving people a way to resolve that error,
| | 07:00 | that is, providing actionable remedies
that allow them either to get out of that
| | 07:04 | state or fix the problem.
| | 07:06 | And don't forget to double the visual
language where you're highlighting errors.
| | 07:09 | This will let people quickly find an
error without having to rely on a single
| | 07:13 | bit of color coding.
| | Collapse this transcript |
| Success messages| 00:00 | Here's where all of the hard work
we've put into input fields, labels, form
| | 00:04 | layouts, and interaction starts to pay off.
| | 00:06 | People have filled in all of the
information, they found the primary action,
| | 00:09 | they've hit it, no errors. Ta-Da!
| | 00:12 | Well, what kind of Ta-Da do we provide for them?
| | 00:15 | Success Messages point the way.
| | 00:17 | First of all, it's quite important to
let people know that they have submitted
| | 00:21 | a form successfully.
| | 00:22 | Just dropping them off back on the form
without an indication of what's happened
| | 00:26 | is usually a way to lead to confusion.
| | 00:27 | So you can see on this example what
we've done is put a message at the top that
| | 00:31 | says changes saved successfully
| | 00:34 | Now with a form where we're going
in to edit data and that's the entire
| | 00:37 | purpose may make sense to keep
people on the form page with the success
| | 00:40 | message at the top.
| | 00:42 | That success message may be permanent or you
can show it for a bit and then fade it away
| | 00:45 | The important thing here is
keeping people in context.
| | 00:49 | In the case of editing data records,
the context is the record you just edited.
| | 00:53 | In other situations though, you may
want to drop people off on where their
| | 00:56 | changes have taken effect. So I'm LinkedIn.
| | 00:59 | You can see, once I connect to somebody,
they drop me off on a message that says
| | 01:03 | me and this person are now connected
| | 01:06 | Then I'm given opportunities
to connect with other people.
| | 01:09 | This allows me to keep going that is
I can go on connect to other people.
| | 01:12 | Leaving people off at a dead end usually
isn't a great way to provide a Success Message.
| | 01:17 | We want to continue natural cycles and allow
people to keep going with what they started.
| | 01:22 | Here's another example of dropping
off people in a successful context.
| | 01:26 | When I create a new message on base
camp and I fill in the information Title,
| | 01:30 | Message body, click Save, you can see
that I'm dropped off where that message
| | 01:34 | will show up and the message is highlighted.
| | 01:37 | The yellow highlight begins
to fade as that message sticks.
| | 01:41 | Here I'm shown where the message
will show up and how it will look.
| | 01:44 | The little animation gives me an
indicator of where it's placed.
| | 01:47 | With Success Messages, the most
important thing is letting people know that
| | 01:51 | they're finally done and their
submission has been successful.
| | 01:53 | We want to drop them off in the right context.
| | 01:56 | If it's just about editing data in a form,
maybe the form is the right place.
| | 02:00 | If it's part of the natural flow, we
want to drop them off in a place where they
| | 02:03 | can continue doing what they're
doing and if the data they enter is being
| | 02:07 | rendered somewhere or reflected in the
different context, it may make a lot of
| | 02:10 | sense to actually put the Success
Message or animation on that page
| | 02:15 | Last but not least, the way we
represent Success Messages differs per site.
| | 02:20 | In some cases, we want to provide a
very prominent message if things are
| | 02:23 | important, in other cases, a little
yellow fade that we saw on 37 signals
| | 02:27 | will do the trick.
| | Collapse this transcript |
|
|
3. Moving Beyond Static FormsInline validation| 00:00 | At this point we have looked at why
web forms matter, talked about how to
| | 00:04 | organize them by looking at labels,
whether we divide them across multiple
| | 00:07 | pages, single pages, and even the structure.
| | 00:10 | We have also looked at form interactions,
that is the back and forth between our
| | 00:14 | customers and our service through web forms.
| | 00:17 | But now we've got another topic
ahead of us, which is actually moving
| | 00:20 | beyond static web forms.
| | 00:22 | That's right, while all the best
practices about Labels, Input Fields, Actions
| | 00:26 | and Layout we discussed, will go
a long way to boosting conversion.
| | 00:29 | There are a lot of different
opportunities for gathering input that don't
| | 00:32 | actually involve web forms.
| | 00:34 | Let's start off by looking at
one called Inline Validation.
| | 00:39 | Inline Validation is a relatively
simple technique, what basically means is
| | 00:43 | giving people feedback as they provide
information, that is not waiting till later.
| | 00:47 | So when I'm trying to find the username
here on Tweeter and I enter jim, I get
| | 00:51 | instant feedback that that's taken.
| | 00:53 | When I tried jimbo, same story, finally
getting the jimbones, the form tells me
| | 00:58 | that that's available and I can move on.
| | 01:00 | Note that I don't actually have to go
through the form, submit everything and
| | 01:03 | then click the button to get feedback,
it's happening right there inline.
| | 01:08 | Another example of Inline Validation that
we can turn to is around creating a Password.
| | 01:13 | Here, the Inline Validation is more
about the validity of the input, that is how
| | 01:17 | good it is, versus
whether it's available or not.
| | 01:20 | So if the Password we have got a
couple of constraints, and you can see as I
| | 01:24 | enter a password the little Password
strength meter down to the right moves from
| | 01:28 | red to yellow and
ultimately if I kept going, to green.
| | 01:33 | Now there is some debate about whether
or not this is a great technique, because
| | 01:36 | it can actually lead to passwords that
are little bit too strong, that is, we
| | 01:40 | might not remember what they are, but
the idea of having a meter that tells you
| | 01:43 | how good your input is, is another
example of Inline Validation in action.
| | 01:47 | And we can see that
illustrated in this sequence here.
| | 01:50 | You will note that the meter again on the
right moves along as your password changes.
| | 01:55 | Now let's look at the rest of the form
where this Password meter comes from?
| | 01:59 | Note that I've moved it all the way to
the right and got a real strong password.
| | 02:02 | Then I've been asked to repeat it.
| | 02:04 | Let's hope I got it right.
| | 02:05 | Looking at the security questions they
asked me next I've selected my Favorite
| | 02:09 | Teacher, which quite easily is Edna.
| | 02:11 | Going further down, I am asked for my
First Name, Last Name and Birth date.
| | 02:15 | Here I am going to put 2020,
because frankly, why do they need my birth
| | 02:18 | date, just to register?
| | 02:19 | Rest of the form looks pretty common,
including the Captcha and Terms and Service.
| | 02:23 | So I'll click Accept.
| | 02:26 | What happened, well, looks like I got
my grayed back and it turns out that
| | 02:29 | strong password I put in there, doesn't
match the one I put in next, that is, I
| | 02:34 | forgot how I got it all the way to
strong, and when I tried to repeat it, I
| | 02:37 | didn't do a very good job.
| | 02:39 | Then I see that my favorite teacher
can't actually be Edna, because her name
| | 02:43 | isn't five characters long, and last
but not least, my Birth date is not valid.
| | 02:47 | Please verify that I've
entered the correct date.
| | 02:50 | This is what a lot of form
interactions look like, that is we do our best to
| | 02:54 | fill things in, we click Submit, and then
we get back a score card, how we got graded.
| | 02:59 | In this case I've failed a bunch.
| | 03:01 | Let's look at how inline
validation differs. Here on the Yahoo!
| | 03:05 | registration form, similar situation,
but very different interactions.
| | 03:10 | As I actually go in and fill in my
First Name and Last Name, you will note a
| | 03:13 | little green tick mark shows up to the right.
| | 03:15 | This lets me know I'm on the
right track as I fill in the form.
| | 03:18 | I go through Gender, same thing.
| | 03:20 | Okay, you have supplied a valid answer.
| | 03:22 | Now we are back to Birth date and
remember I really don't like providing the
| | 03:26 | right information here, so I am
going to once again go with 2020.
| | 03:29 | Moving on to where I live, you will
note that an error message pops up right
| | 03:33 | there asking me if I'm really from the future.
| | 03:36 | Clearly I am not, they caught me,
and I've put in the right information.
| | 03:40 | Now as I go through Postal Code and
make my way to select ID and Password you
| | 03:44 | will note that a number of options just
pop up for me using the First Name and
| | 03:47 | Last Name I already entered.
| | 03:49 | This is a great technique for managing
situations where I may not know what's
| | 03:52 | available, like what User Names are there.
| | 03:55 | Moving on to Password, you can see I'm
entering my password up here, and once
| | 03:59 | again I decide to move
that Password meter forward.
| | 04:02 | Now the password below that I had
typed, can no longer match, so the form
| | 04:06 | removes it, thereby preventing me
from getting into an error state.
| | 04:09 | It's a small detail, but an
important one. Overall the Yahoo!
| | 04:13 | form is doing a lot of Inline
Validation as I complete the information.
| | 04:17 | It's telling me what's valid, it's
catching errors as I enter them, it's
| | 04:21 | offering new suggestions, such as the
user name, and it's helping me prevent
| | 04:25 | error states by removing duplicative forms.
| | 04:29 | Here is a little detail of how
that animation happens on the right.
| | 04:31 | You can see as my input is entered,
I get a little spinner dialogue;
| | 04:35 | it lets me know it's valid,
and then it fades away.
| | 04:37 | Now there are a number of different ways
of rendering Inline Validation and forms.
| | 04:42 | So let's look at another example.
| | 04:43 | Here on the Mint site I'm also asked
for my E-Mail address but as soon as I
| | 04:47 | enter the first character an error pops up,
that is, that's not a valid email address.
| | 04:52 | I know, I haven't even tried yet.
| | 04:54 | Please give me a chance.
| | 04:55 | Luckily, Mint redesigned and applied
Inline Validation a little differently.
| | 05:01 | Here we can see that now Mind waits
until you are actually done filling in a
| | 05:05 | question before they give you an
answer through Inline Validation.
| | 05:08 | So once I enter brian and then move
on, it gives me an error that hey,
| | 05:12 | that's not an e-mail.
| | 05:13 | But note, that when I type brian again in
the Confirm E-Mail dialog, it says that's okay.
| | 05:18 | This is because they're only checking to
see if the two fields match, not to see
| | 05:21 | if the second one is
actually a valid e-mail address.
| | 05:24 | With Password, we will see a similar
situation, that is, I enter a Password at
| | 05:29 | the top, match it on the bottom
and then change the one above it.
| | 05:32 | The two fields are both listed as
okay, even though they don't match.
| | 05:36 | So Mint really isn't doing its best
to prevent errors from happening here.
| | 05:40 | Now you'll see that when I actually go
through and enter an e-Mail address at
| | 05:43 | the top, the Confirm e-Mail address won't
match, because the two things aren't equal.
| | 05:47 | I am showing all these details to
illustrate one simple fact, which is Inline
| | 05:52 | Validation is really into details,
that is, the little nuances of how people
| | 05:56 | interact between form
fields actually matter a lot.
| | 05:59 | We saw in the Yahoo!
| | 06:00 | form that when I actually went through
and removed or changed my password, the
| | 06:05 | one below it went away as well. That is Yahoo!
| | 06:09 | doesn't want me to get into an error state.
| | 06:11 | Now given we have to be concerned
with all these little details when we do
| | 06:14 | Inline Validation, is it really worth it?
| | 06:17 | Can we just go with this traditional
Submit and Page Refresh model of telling
| | 06:21 | people what's wrong?
| | 06:22 | Why put in all this extra effort to
give people real time feedback as they
| | 06:26 | are filling in a form?
| | 06:28 | So once again, we did some
testing to see what's going on here.
| | 06:31 | We compared a traditional form,
simple registration with a Page Submit and
| | 06:37 | Refresh model, that is, somebody filled
in all the information, they hit Submit,
| | 06:41 | and the server came back with,
here's where your errors are.
| | 06:44 | We then also built a model that used
inline validation, which gave people real
| | 06:49 | time feedback as they filled in the
information, and we compared how people did.
| | 06:54 | What we saw was that a 22% increase in
completions on the Inline Validation model.
| | 07:00 | We saw 31% increase in
satisfaction scores, a decrease in completion
| | 07:04 | times, decrease in the number of error made,
and a decrease in the number of eye fixations.
| | 07:09 | That is people took a lot less effort
to visually parse the form than they did
| | 07:13 | with the Page Submit and Refresh model.
| | 07:15 | All of these statistics were great.
| | 07:17 | They were all turning in exactly the
right direction in pretty significant ways.
| | 07:21 | So yes, taking the time to do Inline
Validation right, can really pay off, which
| | 07:27 | begs a question, how do we
do Inline Validation right?
| | 07:30 | What are the design techniques and
those details I've been talking about a lot
| | 07:35 | that make the difference?
| | 07:36 | Well, through our testing we
tried to explore a number of these.
| | 07:40 | One of the things we learned was that
Inline Validation doesn't make sense
| | 07:44 | everywhere. In particular, at the top
part of our form where we are asking
| | 07:48 | people for their Name, Email
Address, Gender and Location.
| | 07:52 | We saw that only about 30% of people
actually interacted with the little
| | 07:55 | Inline Validation controls we put in
the form and when we asked them about
| | 07:59 | that, they said, well, I kind of saw
that, but I wasn't sure, do you know if
| | 08:05 | that's really my name.
| | 08:06 | Of course we couldn't really know if it
was their name, but just the fact that
| | 08:09 | they started to think about it, brought
up questions of, hmm, maybe this isn't
| | 08:13 | the right technique.
| | 08:14 | It also didn't prove very useful,
because as I said only a small portion of
| | 08:19 | people interacted with that
Inline Validation control.
| | 08:22 | In the second half of the form, we are asking
people to select the username and a password.
| | 08:27 | Nearly 100% of people noticed the
Inline Validation and interacted with it.
| | 08:32 | This is because these questions
really benefited from real-time feedback,
| | 08:36 | that is, how do I know what usernames are
available, how do I know what a valid password is?
| | 08:40 | Giving people feedback in real-time
help them to avoid error states in areas
| | 08:44 | where they are uncertain of how to answer.
| | 08:46 | So what this shows is that there are
places where Inline Validation is really
| | 08:49 | powerful and other places
where it's kind of just okay.
| | 08:54 | The next question we want to talk
about is when to show Inline Validation.
| | 08:57 | As we saw of the Mint and Yahoo!
| | 08:59 | examples, there are a couple of different
techniques out there, and we tested a few of them.
| | 09:03 | The first one we did was when somebody
enters an answer and then moves on, we'll
| | 09:07 | validate things after the fact.
| | 09:10 | Give us an answer, then we
will tell you how it did.
| | 09:13 | The second technique we tried was actually
validating things while people were answering.
| | 09:18 | So as they start to enter field we
are immediately providing them feedback.
| | 09:22 | This is most noticeable in
the e-Mail Address field below.
| | 09:26 | Here tony is not a valid email address,
neither is tony@, but tony@bass.com is,
| | 09:32 | so they get a correct validation.
| | 09:34 | Down on the bottom, we tested the
technique we saw on the first Mint form,
| | 09:39 | that is, as soon as somebody enters
some data, we tell them they're wrong,
| | 09:42 | until proven otherwise.
| | 09:44 | This is sort of the guilty until innocent model.
| | 09:47 | You don't have it right until you
finish up, again, most noticeable in the
| | 09:51 | e-Mail address field.
| | 09:52 | So what do we learn when we
try these three different models?
| | 09:55 | First of all the highest success rates,
lowest number errors and just general
| | 09:59 | all good metrics happen with the after model.
| | 10:02 | When we waited until we gave somebody a
chance to answer, and then told them how
| | 10:06 | well they did, that worked
the best across-the-board.
| | 10:09 | The second technique proved to be good
around a number of key metrics, except for speed.
| | 10:14 | Here, people were 7-10 seconds
slower on this simple form, which is quite
| | 10:18 | substantial, and what we saw happen,
was as soon as people noticed the Inline
| | 10:23 | Validation was happening while they were
entering their inputs, they would enter
| | 10:27 | a letter, check to see how they did,
enter another letter, check to see how they
| | 10:31 | did, which really slowed them down.
| | 10:33 | Again, 10 seconds is quite a lot.
| | 10:35 | The before model in contrast was
actually really frustrating for people.
| | 10:39 | That is they didn't react well to being
grayed before even being given a chance
| | 10:43 | to answer a question.
| | 10:44 | As soon as they saw red flashing and
they got frustrated, they weren't even
| | 10:47 | given a chance to answer.
| | 10:49 | Now with that said, there are places
where validating while makes a lot of
| | 10:53 | sense, in particular in User IDs.
| | 10:56 | You don't know what User IDs are available.
| | 10:58 | So giving people a chance to type a
character, see if it's available, type up
| | 11:02 | character, see if it's
available, goes a long way.
| | 11:05 | You can see this in action in
the User ID field at the top.
| | 11:08 | Similar thing with Password.
| | 11:09 | People don't know
necessarily what a valid password is.
| | 11:12 | So giving them feedback while they are
entering their input makes a lot of sense.
| | 11:16 | The next thing that we looked at in the
form was how to show Inline Validation.
| | 11:21 | So we talked about where Inline
Validation makes sense, we talked about when to
| | 11:25 | actually surface it, but how
do we represent it on the form?
| | 11:28 | Again, we tried a number
of different variations.
| | 11:31 | The first one, we represented a
validation check mark to the right of the form
| | 11:35 | field, as people move
throughout the form, that went away.
| | 11:39 | In the second instance, we went through
and did a similar placement, but we kept
| | 11:43 | the validation checkmark
visible even after they moved on.
| | 11:47 | And in the third one we tried to put the
validation checkmark inside of the text field.
| | 11:51 | The thinking here was, closer
proximity and making it part of the answer.
| | 11:55 | We also kept this
visible throughout the process.
| | 11:58 | So what did we learn?
| | 12:00 | We saw, which in retrospect is somewhat
obvious that many people are "hunt and peck" typists.
| | 12:05 | That is they look down at their
keyboard to provide input and aren't always
| | 12:09 | staring at their screen.
| | 12:10 | They are not touch typists.
| | 12:12 | So using a model of showing a
validation checkmark and then fading away,
| | 12:16 | didn't give these "hunt and peck"
typists a chance to actually see their
| | 12:19 | answers were right.
| | 12:21 | The persistent messages really
supported both, "check as you go" and
| | 12:25 | "check after strategies."
| | 12:26 | That is, someone looking at the screen
would see it, and someone that was looking
| | 12:30 | down and looked back up would also see it.
| | 12:32 | The approach of placing that
validation message inside the input field didn't
| | 12:36 | gain any noticeable benefits.
| | 12:37 | In fact, it was actually
harder for some people to find.
| | 12:41 | So when we talk about how to show Inline
Validation, usually a persistent marker
| | 12:45 | that sticks around after someone
completes an input field is a good way to go.
| | 12:50 | Where Inline Validation gets really
exciting though is not just in terms of
| | 12:54 | telling people that hey, you entered
a valid name or a valid e-mail address.
| | 12:58 | There are ways that we can use Inline
Validation to suggest what could be a right answer.
| | 13:03 | On the Kayak site, which is a travel
booking form, you will see that as I
| | 13:06 | enter the first few letters of Chicago,
I am given the option to select the
| | 13:11 | right airport code.
| | 13:12 | I may not know that's ORD, but really
quickly I can jump down the menu and find it.
| | 13:16 | The other interesting thing that
happens on the Kayak form is that after I
| | 13:20 | select the right airport, you'll note
that the message on the right actually
| | 13:23 | changes to a series of options.
| | 13:26 | Here, I can just postpone going to the
rest of the forms and jump right into a
| | 13:30 | price point and date that makes sense to me.
| | 13:32 | We are using inline validation, so
that people don't actually have to go and
| | 13:36 | fill in the rest of the form.
| | 13:38 | One more great example of that
comes to us from Yahoo! Answers.
| | 13:41 | Yahoo!
| | 13:41 | Answers is a service where human
beings answer questions for each other.
| | 13:45 | In order to get people to good
answers, it helps to ask a good question.
| | 13:50 | Over the years that Yahoo!
| | 13:51 | Answers has been live, the team has
analyzed what makes a good question,
| | 13:54 | and they've built an Inline Validation system
that allows anybody to ask a great question.
| | 13:59 | When you ask a great question, chances
are much higher that somebody will answer
| | 14:02 | it, leading to success on both sides.
| | 14:05 | So when you start out with the Ask a
Question form, there is a little message on
| | 14:09 | the right that tells you how
you can ask a good question.
| | 14:12 | Let's say you ignore it and
just write "growing carrots."
| | 14:16 | The message at the right changes to say,
hey, this is a little short, you might
| | 14:20 | want to be more descriptive.
| | 14:22 | Again, the data has shown that when
titles run below a certain character count,
| | 14:26 | they are much less likely
to get a quality answer.
| | 14:29 | If someone chooses to continue
without lengthening their question, it can
| | 14:32 | actually trigger an error state, which
says, hey, the question actually needs to
| | 14:36 | be at least 20 characters long.
| | 14:38 | So at this point someone will go in there
and just pile in a bunch of question marks (?)
| | 14:42 | and punctuation, to which we can
respond, woo, you used too much punctuation,
| | 14:46 | try revising your question.
| | 14:47 | At this point someone gets really angry
and goes to all caps HOW DO I GROW CARRORTS?
| | 14:52 | Once again we can respond by saying,
hey, did you leave the Caps Lock key on.
| | 14:56 | You really don't want to yell at
people if you are asking for their help in
| | 14:59 | answering this question.
| | 15:00 | Finally, we get down to a real question.
| | 15:02 | How do I grow carrots?
| | 15:04 | And this is where the magic happens.
| | 15:06 | Because there are over a billion
resolved question-and-answer pairs on Yahoo!
| | 15:09 | Answers, we already have
an answer to this question.
| | 15:11 | So you can ignore the next couple of
pages of the form, and you will note on
| | 15:15 | the right, the little spinner dialog
pops up, and tada, there are the answers
| | 15:19 | you're looking for.
| | 15:20 | Inline Validation works as a system on Yahoo!
| | 15:22 | Answers and you can see a number of
their pieces here From Tips to Messages to
| | 15:27 | Errors, even to
Misspelling Corrections. The Yahoo!
| | 15:30 | Answers' inline communication gives
you real time feedback about how good the
| | 15:35 | question you're asking is, so that
you can get real answers real fast.
| | 15:39 | We can use Inline Validation for more
than just verifying correct answers and
| | 15:44 | helping people with formatting.
| | 15:46 | Inline Validation can
also help communicate limits.
| | 15:49 | If you see in this example there are
1000 characters available for a message.
| | 15:52 | As someone actually enters their
message, we can count down the number of
| | 15:55 | characters left, thereby providing them
with real-time feedback around how good
| | 16:00 | their input actually is.
| | 16:02 | If we go over the limit, this toggle
changes to let you know that you've
| | 16:05 | passed what's possible.
| | 16:07 | Wrapping up on Inline Validation:
| | 16:09 | Generally we want to use inline
validation for areas where people can struggle,
| | 16:12 | that is where they may not know what a
valid answer is, or they may not know the
| | 16:16 | set of options available for them
when they're actually picking an answer.
| | 16:20 | We can also use Inline Validation to
disambiguate, that is to give people
| | 16:24 | suggestions of what a valid answer can
be, and as we just saw of the characters
| | 16:28 | left example, is also a great
technique for communicating limits, keeping
| | 16:33 | people within boundaries.
| | 16:35 | In each of these cases, we are using
real-time feedback to turn web forms into
| | 16:39 | more of a conversation.
| | Collapse this transcript |
| Dynamic inline forms| 00:00 | In situations where web forms span
multiple pages, dynamic inline solutions give
| | 00:05 | us an opportunity to pull that all into
a single page and dynamically expand and
| | 00:08 | collapse each section.
| | 00:10 | Let's see this in action.
| | 00:12 | The Apple Store's checkout
Form looks pretty typical for an
| | 00:15 | e-commerce situation.
| | 00:16 | Upfront we're asked if you're
a returning customer or new?
| | 00:19 | Next page asked us who you are and for your
Billing Information, in this case, Address.
| | 00:24 | Then we move on to where you want to
ship things, how you want to pay for them
| | 00:28 | and ultimately review all the
decisions you've made on the next page
| | 00:31 | In aggregate, Apple's Checkout flow
looks like this 1, 2, 3, 4 and 5 screens.
| | 00:38 | When I did a recent redesign
however, the Apple store pulled all this
| | 00:42 | information into a single form, that's
right, one dynamic solution that covers
| | 00:46 | everything we just saw in five pages.
| | 00:49 | Let's see it in action
| | 00:50 | The first section on the form
is the Shipping Information.
| | 00:53 | Here we specify where we're asking
our order to be shipped and how we would
| | 00:56 | like to see it shipped.
| | 00:57 | Once completed, we click
Continue and this section rolls up.
| | 01:00 | You'll see there is a little bit of a
snapshot about the data we filled in at the top.
| | 01:05 | Now we're on to the next
section Payment Information.
| | 01:07 | We're specifying how we're going to pay
and clicking Continue, you note there is
| | 01:11 | an error, so we fix it, and once again
this section rolls up exposing the next
| | 01:15 | section, Account Information.
| | 01:17 | This is the basic model
of a Dynamic Inline Form.
| | 01:20 | Each section is exposed one at a time
and once filled, rolls up to reflect the
| | 01:24 | information we've entered
and the next section comes out.
| | 01:27 | Once everything is filled in,
we can then place our order.
| | 01:30 | In order to see how effective this
model is in comparison to Apple's previous
| | 01:34 | design, we did a bit of testing
| | 01:37 | Once again, we did some standard
usability and eye tracking measures.
| | 01:40 | We asked 24 participants to take a
look at a number of variations of the same
| | 01:44 | e-commerce checkout flow, very
similar to what we saw in Apple's site
| | 01:48 | First we asked for Shipping Information,
then Payment Info, and finally we asked
| | 01:52 | people to Review what they had put it.
| | 01:54 | One version did this across multiple
webpages, the next version put all the same
| | 01:59 | input fields on a single form, then we
tested two Dynamic Inline form variations
| | 02:04 | The first version requires people to
actually interact with Section headers to
| | 02:08 | expose the next set of input fields.
| | 02:10 | So, once you filled in Shipping Info,
you'd click on Payment Info to expose the
| | 02:14 | next set of input fields.
| | 02:15 | This next version we tested actually put
the primary actions inside each section.
| | 02:21 | So here, once completing Shipping Info,
you click Continue, the Payment Info
| | 02:25 | would expose, and a primary action
would be within that section as well
| | 02:29 | When we put all of these variations
to the test, we learned a few things.
| | 02:33 | First, we didn't really see conversion
rates go up or down with any version,
| | 02:37 | that is, the Dynamic Inline Forms didn't
make things worse, but they didn't make
| | 02:41 | things much better either.
| | 02:42 | It is an interesting finding in of
itself, because usually when we introduce a
| | 02:47 | new interaction design there tend to be
usability problems, it's new to people,
| | 02:52 | they haven't seen it before, and as a
result they stumble as they figure it out.
| | 02:56 | Not so with Dynamic Inline Forms, people
were able to just jump right in and get going.
| | 03:01 | Another interesting finding we saw
was that Dynamic Inline Forms were
| | 03:06 | actually faster to complete.
| | 03:08 | That is when people use the option C and
D they completed the form much quicker.
| | 03:12 | This isn't really that important in
many cases, but if you're dealing with time
| | 03:15 | sensitive information, such as auctions
or limited time quantities, the benefits
| | 03:20 | of a Dynamic Inline Form can go a long way.
| | 03:23 | One area where we did see people
struggle however was of the Section headers, in
| | 03:27 | options C few people thought they
needed to interact with the header of a
| | 03:30 | section in order to expose
the next set of input fields;
| | 03:33 | instead, they faired much better
with option D, where the primary action
| | 03:37 | was within a section
| | 03:39 | There they could fill the information
they had, click the Continue button and
| | 03:42 | then see the next section pop up
with its own action to continue.
| | 03:47 | You can see this in the Club Nintendo form here.
| | 03:49 | As I fill in my Date of Birth and click
Continue, the information I just entered
| | 03:54 | is reflected back to me, the next
section shows up, and the next section has its
| | 03:58 | own set of continue actions.
| | 04:00 | Once I fill in an E-Mail Address and
then onto Username and Password, and again,
| | 04:04 | there is a series of
actions right there in there.
| | 04:07 | Some of the things Club Nintendo isn't
doing so well however, is limiting each
| | 04:10 | an each sections to in some
cases just the single input field.
| | 04:14 | Their actions also looked disabled,
gray text on a gray button doesn't
| | 04:17 | necessarily say click me.
| | 04:20 | Let's wrap up Dynamic Inline Forms.
| | 04:22 | These forms aren't likely to
impact conversion either up or down.
| | 04:26 | This is good, because we have a new
design tool at our disposal, but it's a
| | 04:29 | little bit bad as well, because this is not
going to necessarily get us more conversion.
| | 04:34 | Increased speed however is the benefit
we can get from a Dynamic Inline Forms,
| | 04:37 | and in situations where this matters,
like online auctions or time sensitive
| | 04:42 | material, that added boost
can go a long way Beware though,
| | 04:46 | section headers don't really act like
form elements, even when we try to make
| | 04:50 | them look like links or like buttons,
people didn't know they needed to interact
| | 04:54 | with the Section header to
expose the next set of input fields.
| | 04:57 | And last but not least, Action buttons
embedded within each section tend to do
| | 05:01 | a lot better than having them apply
to the entire form, as we saw in our
| | 05:05 | testing earlier.
| | Collapse this transcript |
| "Mad Lib" forms| 00:00 | We see so many forms on the web, that
sometimes just changing how a form looks
| | 00:04 | can make things more approachable.
| | 00:06 | Mad Libs forms do just that.
| | 00:08 | As you can see on the site Huffduffer,
this form looks like the kids' game Mad
| | 00:12 | Libs where there is a series of empty
fields that people filled in and created
| | 00:16 | humorous conversations as a result.
| | 00:18 | On Huffduffer though, this same technique
is being used to let people join the service.
| | 00:22 | Let's see it in action.
| | 00:24 | As you go into the form, you can fill in
your username, your password, e-mail address.
| | 00:30 | Note that you can still tab to this form as
you can with a traditional form. It all works.
| | 00:35 | You can also click on the labels
inside the paragraphs of text to jump to any
| | 00:39 | particular input field;
| | 00:40 | once again, keeping with mouth
behaviors that people expect in other places.
| | 00:45 | Yet, the layout of this form makes it a
lot more approachable. It doesn't feel
| | 00:49 | like the typical web form you
encounter everywhere else, and the result is,
| | 00:53 | well, let's just say it's kind of satisfying.
| | 00:55 | To quote Jeremy, owner of Huffduffer,
it turns out that people that use the
| | 00:59 | form actually love it.
| | 01:00 | He has received bucket loads of
Twitter messages and e-mails telling them how
| | 01:04 | much people actually
enjoyed the sign-up process.
| | 01:06 | Let me pause for a second and restate that.
| | 01:09 | How much they actually
enjoyed the sign-up process?
| | 01:11 | When was the last time anybody
actually enjoyed filling in a web form?
| | 01:15 | So this technique is out there and a
number of people have tried it in different
| | 01:18 | places to some interesting results.
| | 01:21 | The site vast.com recently
implemented a Mad Libs form in their testing.
| | 01:26 | They have a form where someone can
contact the car dealer to let them know that
| | 01:30 | they're interested in purchasing a vehicle.
| | 01:32 | This is what the form used to look like;
| | 01:34 | pretty typical, first name,
last name, street address.
| | 01:38 | When they redesigned to more of a Mad Libs
form, they made it a bit more approachable;
| | 01:42 | feels more like a letter,
a narrative if you will.
| | 01:44 | We're going to be sending this
information to a Buick dealer, we're telling
| | 01:48 | them who we are, which car we're
interested in, and we have the option to
| | 01:52 | personalize the message.
| | 01:54 | In a series of AB testing, vast.com
showed that conversion with the new Mad Libs
| | 02:00 | style design actually increased 25-40%.
| | 02:01 | Now, that's a pretty big deal, and as
a result we saw a lot more interest in
| | 02:07 | this form style structure.
| | 02:09 | Before we get ahead of ourselves though,
I don't think Mad Libs style forms are
| | 02:13 | applicable everywhere, they make
sense where things feel conversational.
| | 02:17 | When you're contacting a dealer
about a car, it makes sense to pet it as
| | 02:20 | a letter or a note. Hey,
| | 02:22 | I am Luke,
| | 02:23 | I'd like to find out more about this vehicle.
| | 02:25 | In other situations, it doesn't make much sense.
| | 02:28 | So let's see where Mad Libs forms have
been applied and where potentially they
| | 02:32 | could be problematic.
| | 02:33 | Here on the contact form for the
Boston Web Studio, once again a Mad Libs
| | 02:37 | form feels appropriate. Hi there,
| | 02:39 | My name is, my email address, and I'd like
to send this wonderful message. Feels right.
| | 02:45 | Once you get into a bit more extended
text, maybe it's not as appropriate.
| | 02:49 | When applying for a beta for a
VaultPress, there is a lot of form fields you
| | 02:53 | need to pick out of the text.
| | 02:54 | These aren't the short kind of interactions
we saw in Huffduffer and the Boston Web Studio;
| | 02:58 | it's a bit more involved.
| | 03:00 | There is also no question of
how these things get laid out.
| | 03:03 | The Bingo Card Creator did a real quick
test where they swapped out their form
| | 03:07 | which is traditional on the left,
with a little Mad Libs style paragraph.
| | 03:11 | The problem here is the simple two
field form had a real clear path to
| | 03:15 | completion in the left.
| | 03:16 | When they inserted the text, and broke
it up with Mad Libs style interactions,
| | 03:21 | that path to completion got lost.
| | 03:23 | In this testing, the Bingo Card Creator
folks saw that the standard form had a
| | 03:27 | 27% conversion rate, and the Mad Libs
style form had a 21% conversion rate.
| | 03:32 | So there is actually a drop in the conversion.
| | 03:34 | I think that actually makes sense because the
layout on the right is much harder to parse.
| | 03:38 | There hasn't been a lot of time and
attention spent to making Mad Libs work.
| | 03:43 | When you do this approach, don't simply
take your form and turn it into a block
| | 03:47 | of paragraph without really
thinking through the details of design.
| | 03:50 | Likely, that will actually
make things worse, not better.
| | 03:54 | To wrap up how we can think about
Mad Libs style forms, they're pretty
| | 03:57 | appropriate for conversational interactions.
| | 03:59 | When we want to loosen the room, and
remove some tension, this isn't a web form,
| | 04:03 | this is actually an introduction.
| | 04:05 | It's you saying the hi to us and
signing up or joining a new service.
| | 04:09 | This can really reduce anxiety.
| | 04:11 | If you're going to use a Mad Libs
style form, be aware that it actually is
| | 04:14 | breaking clear scan lines.
| | 04:16 | So long forms, probably not appropriate,
and when you do lay things out, make
| | 04:20 | sure there is an appropriate line length
between each of the input fields inside
| | 04:23 | the Mad Libs style form, so
people can make their way through it.
| | 04:27 | Last but not least, make
sure the form is accessible.
| | 04:30 | As we saw in Jeremy's Huffduffer example,
you could still tab through each input field.
| | 04:34 | You could actually click on each label
in the text and move to the appropriate
| | 04:37 | input field associated with that label.
| | 04:39 | This is how standard forms work.
| | 04:41 | This is how a Mad Libs
style form should work as well.
| | Collapse this transcript |
| Gradual engagement| 00:00 | Too many services online start the
conversation off with new users with a form.
| | 00:05 | That is, you find something new and
interesting, you want to become a part and
| | 00:08 | what greets you, well, a web
form. I think we can do better.
| | 00:12 | The principles behind Gradual
Engagement can get people involved in new
| | 00:16 | services and products;
| | 00:17 | I am actually starting to use them,
rather than filling our web form first.
| | 00:21 | To illustrate this principle in action,
let's look at the process of joining a
| | 00:24 | site where we can create family trees.
| | 00:26 | We can go to site like
Online Family Tree Maker.com.
| | 00:30 | The process of using this means filling
out this Registration Form, Name, Last
| | 00:35 | Name, Gender, Address, City,
Origin of family tree, you get the idea.
| | 00:40 | Nearly every field has little red
asterisk (*) which of course means
| | 00:43 | it's required, right?
| | 00:44 | Now we can apply a lot of the best
practices we talked about earlier in this
| | 00:48 | course under form
interaction and form organization.
| | 00:51 | And the My Heritage site, which also
allows you to create family trees has,
| | 00:56 | they've cut down the number of fields,
to maybe the minimum amount necessary,
| | 01:00 | they've introduced some messaging on
the right that make things more secure and
| | 01:03 | explains why they're collecting information.
| | 01:05 | And they actually have a big notable
primary called to action at the bottom
| | 01:09 | that allows you to continue.
| | 01:11 | Chances are making these sorts of
adjustments to the Registration Form for a
| | 01:15 | family tree site can actually boost
conversion, but there are other techniques.
| | 01:21 | If we look at the site Geni, we'll see
that they're taking a very different tact
| | 01:25 | to allowing people to
create online family trees.
| | 01:27 | Starting off on the front page of Geni, you'll
see, Create your family tree and stay in touch.
| | 01:32 | The way you get going here is entering
your First Name, Last Name and E-mail and
| | 01:36 | starting to make a tree.
| | 01:37 | The entire purpose of Geni
is to make a family tree.
| | 01:40 | So what's the first step in the process?
| | 01:42 | Not registering, but actually getting going.
| | 01:45 | Once I fill in my name, the next step
is adding my parents, and before I know,
| | 01:49 | I've actually got a family tree up and running.
| | 01:52 | Now in the background, Geni sends me an
email that says, I have an account and I
| | 01:56 | can go back to my family tree, and
once I finish completing it, I'm given the
| | 02:00 | option to save it or share it with
others, but you'll know there isn't a first
| | 02:04 | step called Register.
| | 02:06 | I'm not explicitly filling out a form
with no purpose other than signing up.
| | 02:10 | The input fields that are presented to
me are very explicit to what Geni does,
| | 02:15 | which is create online family trees.
I just get up and running right away.
| | 02:19 | After I do so, Geni will send me
occasional newsletters to remind me about my
| | 02:22 | tree and new features.
| | 02:24 | This approach is proved very
successful, given that they've established five-
| | 02:28 | million profiles in just five short months.
| | 02:30 | It's Gradual Engagement at its finest.
| | 02:32 | Let's look at another example.
| | 02:34 | The moviemaking site Jumpcut allows
you to register, but also allows you to
| | 02:38 | actually start making a movie this is
what the purpose of the site is, to create
| | 02:42 | movies right there in your
web browser and edit them.
| | 02:45 | So rather than having a first step of
register, we can just click Make a Movie,
| | 02:49 | site asks us for a title and some media.
| | 02:52 | We can grab pictures from our
desktop or from Facebook, then we upload
| | 02:56 | those images and we're up and running, we can
pick a style, we can edit it, we can publish it.
| | 03:01 | Again, you haven't seen any Registration Forms.
| | 03:04 | No one has asked me for my first name,
last name, email address or asked me to
| | 03:07 | agree to any terms of service.
| | 03:09 | Instead what I start doing is
through a few short steps getting into the
| | 03:13 | service and using it.
| | 03:14 | Through this process I learned what
Jumpcut does, it's a place to make movies.
| | 03:18 | In fact, I have already started making one.
| | 03:21 | Few more examples, and in this case
we'll look at a Before and After, this is a
| | 03:25 | site called Online Quiz.
| | 03:27 | With the Online Quiz maker, the example at the
top shows what their design used to look like.
| | 03:32 | You could take a tour, look at
the key features of the service.
| | 03:35 | When they redesigned and took a Gradual
Engagement approach, there is only one
| | 03:39 | action upfront, Create A Quiz, that's what the
site is for, why not just get up and running?
| | 03:44 | If you don't feel like doing that there
is still an option to explore below, but
-
| | 03:47 | the idea of getting someone up and
running with what the purpose of this site
| | 03:51 | is, through a few short interactions
is what Gradual Engagement is all about.
| | 03:55 | Now let's see how we can
actually use this approach.
| | 03:58 | How do we apply a Gradual Engagement
technique to our websites and services?
| | 04:04 | The first thing we need to do is
understand what the core service of our product is.
| | 04:08 | As an example, let's look at
patientslikeme, patientslikeme is a service where
| | 04:12 | people with serious medical conditions
can share the treatments, symptoms and
| | 04:17 | overall progress they're experiencing.
| | 04:18 | It's all about sharing real
results with real patients.
| | 04:22 | So how do we do this as a
gradual engagement approach?
| | 04:25 | Currently clicking Join Now brings up
a typical web form where we collect a
| | 04:29 | bunch of information, you agree to a
number of terms of service, and then you
| | 04:33 | jump in, but a Gradual Engagement
approach, instead, might look more like this.
| | 04:38 | Since the site is all about finding
people who have common treatments and
| | 04:41 | conditions to what you have, why
don't we make that the first step?
| | 04:44 | In other words, tell us a bit about yourself?
| | 04:47 | What condition you have? What age you are.
| | 04:49 | Just a small bit of information,
then click Find patientslikeme, and they
| | 04:54 | return data that tells you, hey, there
are actually 262 people like you in our
| | 04:58 | community that you can learn from, gather
new insights about, and actually connect with.
| | 05:03 | This Gradual Engagement approach introduces
you to the concept behind patients like me;
| | 05:08 | it's all around finding others who
share the same situations that you do.
| | 05:12 | Through a few short interactions with
Gradual Engagement you figure it out.
| | 05:17 | Now Gradual Engagement doesn't
necessarily mean taking all the input fields you
| | 05:20 | have in a form and just splitting
them out across a number of pages.
| | 05:23 | So while I applied what Fidelity has
been doing here with their retirement
| | 05:26 | planning tool, asking me upfront how
old am I, how much I have saved, and then
| | 05:31 | dropping me into where I can start to
manipulate that information, taking these
| | 05:35 | individual questions and breaking up
across multiple web forms isn't really
| | 05:38 | Gradual Engagement, but this
approach does have some potential.
| | 05:41 | When we think about Gradual Engagement,
the big idea is to consider using it as
| | 05:47 | an alternative to giving
people a registration form upfront.
| | 05:50 | That is, the first interaction with your
service shouldn't be sign-up, tell us about yourself.
| | 05:56 | Imagine walking into a store and
having a greeter at the door that asks you,
| | 06:00 | First Name, Last Name, E-mail
Address Agree to my Terms of Use, you'd
| | 06:04 | probably walk right out.
| | 06:05 | Yeah this is what happens in
most websites and services online.
| | 06:09 | Gradual Engagement instead can
reflect what the core services that you're
| | 06:12 | providing through a few short interactions.
| | 06:15 | Ideally those
interactions are pretty lightweight.
| | 06:17 | On Geni, it was just entering your First Name,
Last Name and getting the family tree going.
| | 06:22 | On patientslikeme, it was just telling us
the condition you had and how old you are.
| | 06:26 | These little lightweight interactions
and the results that happen afterwards can
| | 06:30 | really guide you into what value a
website or application has for you.
| | 06:34 | Ideally, they also make
you successful right upfront.
| | 06:38 | Will Wright, the creator of Spore
and the game Sims has a philosophy.
| | 06:42 | He says you should have a win within
the first five seconds of playing a game.
| | 06:46 | It makes you feel good, it boosts
confidence, and it keeps you going, same thing
| | 06:50 | with Gradual Engagement.
| | 06:51 | Right when I enter my name, I've
already got a family tree going. Right
| | 06:54 | when I tell patientslikeme what I'm
suffering from, I've already made some connections.
| | 06:58 | This instant win, success, is a nice
transition from what this service is all
| | 07:03 | about, "Hey, I can actually do this."
| | 07:06 | If you do auto-generate
accounts using Gradual Engagement;
| | 07:10 | be aware that people
might not know they have them.
| | 07:11 | So if you're just sending an email in
the background, double that up with the
| | 07:15 | ability for somebody to recover their
data on the site or give them a way to
| | 07:18 | actually create account after they
create an asset they're interested in.
| | 07:22 | And last but not least, Gradual
Engagement doesn't just mean taking all the
| | 07:25 | fields in your form and
separating them across multiple pages.
| | 07:29 | There has to be more of a purpose
involved that explains what the service is for
| | 07:33 | and how you can start using it moving forward.
| | Collapse this transcript |
| Common tools| 00:00 | Web forms are just one of the tools we
have for gathering information from people.
| | 00:04 | There is a whole number of common
tools that people use everyday that we can
| | 00:07 | actually use for getting input without
requiring them to come to our sites and
| | 00:10 | fill out our web forms.
| | 00:12 | Let's take a look at some of these common tools.
| | 00:14 | E-mail is a really big one, it's
about 247 billion emails sent per day.
| | 00:19 | SMS is another, 4 billion text
messages in the US alone per day.
| | 00:25 | Add up Instant Messaging, Twitter,
Facebook, and there is a lot of communication
| | 00:29 | tools out there that we can
use to gather input from people.
| | 00:33 | Web Browsers are another category of
tools. People will spend more time off your
| | 00:37 | site than on your site, no matter who you are.
| | 00:40 | There is an opportunity to use the Web
Browser to gather input as people spend
| | 00:44 | time across the rest of the web,
we're not limited to only a single tool.
| | 00:48 | We can use Multiple Tools for capturing input.
| | 00:50 | The general idea here is that input
can come from anywhere, not just from the
| | 00:54 | forms on our website. Consider e-mail.
| | 00:57 | When you get an email invitation to
a social network in your inbox, the
| | 01:01 | traditional process is click a link,
end up on a webpage, fill out a form.
| | 01:05 | When I got an email invite from Naymz,
I click the link here in my e-mail and I
| | 01:11 | ended up on a site that only required a
single input field to be filled in. How?
| | 01:16 | Well, the invite already had my name
and email address, so all I need to do is
| | 01:20 | choose a password and click Accept.
| | 01:22 | Note that the Accept button has also
been streamlined since we're not using the
| | 01:26 | checkbox to agree to terms
of service and privacy policy.
| | 01:29 | As we talked about the Actions In
Progress section this is a technique used to
| | 01:33 | get people through forms quicker and easier.
| | 01:35 | We can also use e-mail as a
much bigger set of input.
| | 01:39 | Here is a service called TripIt.
| | 01:42 | What TripIt does is allows you to
forward email confirmation messages from
| | 01:46 | places where you book travel, send
them over to them and they'll compile an
| | 01:49 | itinerary for you that you can use to
share with others, keep a record of where
| | 01:54 | you've been, and just connect over destinations.
| | 01:56 | When you click Get Started on TripIt,
the first thing that greets you is not a
| | 02:00 | web form, instead, it's a call to
action that says Email Us Your Travel Plans,
| | 02:05 | clicking on that link
takes you to your email client.
| | 02:08 | When you send over a confirmation trip
they'll respond with an e-mail that says
| | 02:11 | follow this link to see
your itinerary on TripIt.
| | 02:14 | Again in the background they'll create
an account for you, clicking that link
| | 02:18 | takes me to my trip to Cancun, Mexico.
| | 02:21 | As you can see they've taken the
e-mail I sent them and parsed out all the
| | 02:24 | important information.
| | 02:26 | The dates I'm leaving, where I'm flying
to and from, and they've added a number
| | 02:30 | of other features, they put in the
weather where I'm going, some maps of the
| | 02:34 | area, and generally
created a nice itinerary for me.
| | 02:38 | They've also created an account.
| | 02:39 | Since I just sent them an email they
know my email address and it's verified, so
| | 02:44 | my account is up and running.
| | 02:46 | One more example of using email as input.
| | 02:48 | This is a service called Posterous.
| | 02:50 | Right upfront they say, we don't need
to create an account, in order to get
| | 02:54 | going all you need to do
is e-mail something to us.
| | 02:57 | Now what posterous does is
allows you to create a blog.
| | 03:00 | If any of you have set up a blog
before you know it's usually a series of
| | 03:03 | multiple web forms collecting
a lot of information from you.
| | 03:07 | With Posterous, all you need to do is
send them an e-mail, so let's try it.
| | 03:11 | In this case I am going to click on
Gmail, which opens up my Gmail web client,
| | 03:15 | you'll see that the To field has been
filled out for me, a Subject has been put
| | 03:19 | in, and a little bit of text that tells
me to replace the subject line and body
| | 03:22 | with whatever I want.
| | 03:23 | So I want to go in here and change
that title to Hello World, I'll attach a
| | 03:27 | photo of a drunk bat, because why not,
and I'll put a little line of text that
| | 03:31 | says I'm going to post now.
| | 03:33 | Sending this e-mail over to
posterous results in a response.
| | 03:38 | You can see here that they've told me
my e-mail has been posted and I can click
| | 03:41 | on the link, Your new post,
to see what's happening.
| | 03:43 | Personally I'd like to see that link
have a lot more visual prominence, because
| | 03:47 | here the logo takes the cake,
but it's a minor detail.
| | 03:51 | Clicking on Your new post takes you to
your blog, let me kind of repeat that.
| | 03:55 | I just send an e-mail to posterous
and I have a blog up and running.
| | 03:58 | In fact, they've posted up that picture
of the drunk bat and my title and text.
| | 04:03 | Now if I wanted to do more of this blog,
take it over, adjust some settings, I
| | 04:08 | can click on this button, set myself up
with a custom URL and then go ahead and
| | 04:12 | manage things as much as I'd
like, but I don't need to do that.
| | 04:15 | All I need to do to create a blog using
posterous to send an e-mail and this is
| | 04:20 | the general principle at play.
| | 04:22 | Input can come from anywhere.
| | 04:24 | We all spent lots of time in our
email inboxes, in fact there's 247 billion
| | 04:28 | e-mails sent per day worldwide, that's a
lot of time spent in a lot of inboxes,
| | 04:33 | which is a big opportunity for input,
and this is paid off well for posterous.
| | 04:38 | Looking at their statistics they
had 700% Annual Growth. The quote from
| | 04:43 | their CEO says it all.
| | 04:45 | "We've always believed in avoiding
account creation as much as possible.
| | 04:48 | You can post without an account,
you can subscribe without an account.
| | 04:51 | Accounts just really get in the way."
| | 04:54 | In other words, the first step isn't a
form, it's actually using the service.
| | 04:59 | Let's look at another example, in this case SMS.
| | 05:02 | Twitter is a service where you can
follow along with your interests.
| | 05:05 | To get started using Twitter you can
either fill out a registration form on
| | 05:08 | their site or you can simply use
SMS to send a Tweet to the service.
| | 05:13 | In this case I'd like to follow
Notify New York City, one SMS message and I'm up and
| | 05:18 | running using the site.
| | 05:20 | This was released in August of 2010 by
Twitter and has seen tremendous growth.
| | 05:24 | Because people can utilize a
communication tool they are already really familiar
| | 05:28 | with. Remember 4 billion text messages
sent per day in the US alone people know
| | 05:33 | how to send a text message.
| | 05:34 | Here in order to get it going with
Twitter all they need to do is send a text.
| | 05:38 | But e-mail and SMS aren't
the only tools we can use.
| | 05:41 | People spend a lot of time off your
site when they are browsing the web no
| | 05:44 | matter what your site is, so the
opportunities the Web Browser for input is very real.
| | 05:49 | Consider a site like delicious.
| | 05:51 | Delicious allows you to save bookmarks
on the web and share them with others.
| | 05:55 | Now you can go to the delicious website,
add a URL you want to save, tag it,
| | 06:00 | categorize it, label it, there is
series of input forms, or you can use a
| | 06:05 | little bookmarklet inside of your Web Browser
to do the same thing much faster and easier.
| | 06:10 | So when I'm on a webpage I'm
interested in I can just tap the little bookmark
| | 06:14 | that I've added to my Web Browser to
post to delicious, up pops a little window
| | 06:19 | and all I have to do is click on one
of the popular tags or recommended tags
| | 06:23 | below to save this bookmark.
| | 06:24 | Note that the URL and the title has
already been filled in for me using the
| | 06:28 | little bookmarklet from my Web Browser.
| | 06:30 | The Web Browser can actually do a lot
more looking at a service like Notable
| | 06:35 | from the company Zurb when I click
the little bookmarklet that I have there
| | 06:39 | it captures the information from a webpage,
but much deeper information than delicious.
| | 06:44 | After it's complete, it's grab the
screenshot of the webpage which I can annotate
| | 06:48 | with notes, it's grab the code of the
webpage that I can discuss, comment on
| | 06:52 | and share with others.
| | 06:53 | It's grabed the copy from the
webpage and a number of SCO notes.
| | 06:57 | Imagine filling in all this
information using a series of web forms, it would
| | 07:01 | take quite a long time.
| | 07:03 | Using the Web Browser though I only
have to click one button and all this
| | 07:06 | data is captured for me.
| | 07:09 | Creating Web Browser extensions is
gotten easier-and-easier over the years.
| | 07:12 | We cannot use standard web development
tools like JavaScript, CSS, and HTML to
| | 07:18 | create Web Browser connectors
in Firefox, Chrome, and Safari.
| | 07:24 | These extensions can do an awful lot to gather
input wherever people happened to be on the web.
| | 07:30 | Once again the basic idea is the same;
use common tools that people are in
| | 07:34 | everyday like the Web Browser to gather input.
| | 07:37 | But we're not limited to just the Web
Browser or Email or SMS, in fact, we can
| | 07:42 | use a combination of tools to gather input.
| | 07:44 | Remember the milk does just that.
| | 07:46 | Remember the milk is a service where you can
create to-do lists and share them with others.
| | 07:50 | You can add a to-do item from your list
by sending remember the milk and Email.
| | 07:54 | You can send them a Twitter post, you
can put an event in your Calendar it will
| | 07:59 | add as a to-do item.
| | 08:01 | You can use your Google homepage or your Yahoo!
| | 08:03 | homepage or you can use a little Web
Browser bookmarklet to create it to do from
| | 08:07 | whatever webpage you happened to be on.
| | 08:09 | All these tools are supported by
remember the milk and they support gathering
| | 08:12 | input from just about anywhere.
| | 08:14 | Using common tools for input means
embracing an idea that input can come from
| | 08:18 | anywhere not just from
the forms on our websites.
| | 08:21 | People will always spend more time
off your site than on it, no matter if
| | 08:25 | you're Facebook, Yahoo! or Google.
| | 08:27 | An input can really come from all kinds
of different tools not just web forms,
| | 08:32 | e-mail, SMS, social networks,
calendars, you name it.
| | 08:36 | Remember, the basic idea is input
can come from anywhere not just in the
| | 08:40 | web forms on your site.
| | Collapse this transcript |
| Web services| 00:00 | Chances are when you ask somebody for
their name or e-mail address in a web form,
| | 00:04 | you're not the first.
| | 00:05 | That is, people have taken a lot of time to
provide information to websites and services.
| | 00:10 | There are ways that we can utilize that
in our own web forms using a number of
| | 00:15 | third-party solutions.
| | 00:16 | Let's take a look at that in action.
| | 00:17 | Here we have a pretty typical
web application, brightkite.
| | 00:22 | It's all about connecting
with People, Places, and Friends.
| | 00:25 | In order to get going you can
either Sign up or Learn more.
| | 00:28 | So let's try doing just that.
| | 00:30 | When we click Sign up, and let's take
a guess at what it's going to greet us,
| | 00:34 | that's right, a web form, but
digging in we see some details.
| | 00:38 | At the top we're asked for our Username.
| | 00:40 | This will be your username.
| | 00:42 | It must be alphanumeric, 3-15 characters
long, can contain underscores, but no spaces.
| | 00:47 | If you've already set it on
mobile, pick a different one.
| | 00:50 | E-mail, we're going to send you a
confirmation e-mail, so make sure it's right.
| | 00:54 | Password, got to be at least 3 characters
and retype it, so you don't make the mistake.
| | 00:59 | Go in a little bit further Are you a human?
| | 01:03 | Last, but not least agree and read
our Terms of Service & Privacy Policy.
| | 01:07 | Where are the Friends, Places, and
Fun I was promised on the homepage?
| | 01:11 | All I'm doing is being interrogated
here about information and it doesn't feel
| | 01:15 | like any of it's for me, it
feels like it's all for brightkite.
| | 01:17 | But let's say I even get through this
form and I fill in all the information
| | 01:22 | to all their strict standards, without the
typos they're suggesting I'm going to make.
| | 01:26 | Where do I land?
| | 01:27 | Well, it's kind of a ghost town.
| | 01:29 | You'll note that I don't have a
profile there is nothing really happening, in
| | 01:33 | fact, I'm given the couple choices.
| | 01:35 | I can read their FAQ or
I can send them feedback.
| | 01:39 | Other than that there is not much to do.
| | 01:41 | Now brightkite has redesigned and
they're really simplified their Sign Up form.
| | 01:45 | Again, applying a lot of the best practices
we looked at the beginning of this course.
| | 01:49 | We really cut things down to
the bare minimum necessary.
| | 01:52 | So now the Sign Up screen on the front
page only requires an e-mail address, a
| | 01:56 | username, and a password.
| | 01:58 | I bet this has boosted conversion a
lot, but brightkite made another change
| | 02:02 | recently that's a bit more significant.
| | 02:04 | Instead of having a Sign Up form on screen one,
| | 02:07 | they replaced it with a
Connect with Facebook button.
| | 02:10 | The ability to sign up with your email
address is still there, but it's a tiny
| | 02:13 | link below the Facebook button.
| | 02:15 | So what happens if we use Facebook
to actually sign up for the service?
| | 02:19 | Let's give it a shot.
| | 02:20 | Up pops a little dialog that asks
whether or not I want to connect this
| | 02:23 | service with Facebook.
| | 02:25 | Now given half of Facebook's 750 million
users are logged in any point in time,
| | 02:31 | chances are good, all I need is a
single click to get going with this service.
| | 02:35 | So I click Connect, and the first
thing I see is actually my friends from
| | 02:39 | Facebook that are already using brightkite.
| | 02:41 | Once I connect with them, I land
on a page that illustrates for me
| | 02:45 | what everybody is doing.
| | 02:47 | So contrast this to what happened earlier.
When I went through the Sign Up form,
| | 02:51 | I filled in a bunch of information
that brightkite required and I ended up
| | 02:54 | essentially in dead zone.
| | 02:56 | Nothing going on, just a
lot of work for me to do.
| | 02:59 | Here using the Facebook system my
profile information is already complete they
| | 03:03 | grab my photo from Facebook, my name
from Facebook, and my friends list.
| | 03:07 | So later I can see how
people I know are using the service.
| | 03:11 | There is a much different
experience from filling out the form.
| | 03:15 | When I went through that
process I ended up on a ghost town.
| | 03:17 | Here I actually see what people are
doing and how they're using the service.
| | 03:21 | This is the idea behind web services
making use of work people have done elsewhere.
| | 03:26 | I've already submitted my name, photo,
and friend list to Facebook why doesn't
| | 03:30 | brightkite just take that information I've
already put elsewhere and give me the benefit of it?
| | 03:35 | I don't need to go and restate my name and
interests to every single site on the Internet.
| | 03:39 | Let's look at another example of how
we can turn the information I've already
| | 03:43 | put online into a great
first-time start experience.
| | 03:47 | This is the Question and Answer site Quora.
| | 03:50 | As you can see the only way I can
get going is actually by connecting to
| | 03:53 | my Facebook account.
| | 03:54 | Once again, my profile information
from Facebook is pulled including my
| | 03:58 | name, e-mail address, and photo, and all I need
to do to get started is click Create Account.
| | 04:03 | Now where do I see on Quora.
| | 04:05 | I see the questions my friends are
following, the questions they have answered,
| | 04:09 | and I have a series of
suggestions on topic I maybe interested in.
| | 04:12 | Those topics come from either my
interests on Facebook, or with my friends on
| | 04:16 | Quora are already doing.
| | 04:18 | This is a great first-time experience.
| | 04:20 | Instead of starting with the blank slate,
I see the people I know and the things
| | 04:24 | I'm interested in right there on the front page.
| | 04:27 | Facebook has been experimenting even further.
| | 04:29 | When I come to a radio station site
like Pandora, it uses my likes on Facebook
| | 04:33 | to start playing music I already know.
| | 04:35 | In this case, we're going to start you off
with a station based on artists you like.
| | 04:39 | So Bob Marley kicks off
right when I land on the page.
| | 04:43 | When I come to the local review
site Yelp, I get a similar experience.
| | 04:48 | Here are the friends that I have on
Facebook and what they're doing on the site.
| | 04:51 | All this creates a much more personal
connection between me and the service that
| | 04:55 | I know nothing about.
| | 04:56 | Now while people may have concerns
around some of the privacy things here, I
| | 05:00 | think if you look strictly at user
experience perspective, having that direct
| | 05:04 | connection between a service, not
having to fill in more information about
| | 05:07 | yourself everywhere you go
creates a much better initial start.
| | 05:11 | We don't just have to use Facebook,
in fact, for services that are more
| | 05:15 | professional or focused on business,
something like LinkedIn might work better.
| | 05:20 | LinkedIn is a large professional social
network, so it makes a lot of sense for
| | 05:23 | a site like Elegant.ly which is
connecting designers with companies to use
| | 05:28 | LinkedIn as a starting point.
| | 05:30 | Again, signing in with LinkedIn is
the only way to start using Elegant.ly.
| | 05:34 | I click on Sign in, and
authenticate to LinkedIn.
| | 05:37 | The important thing to note here is that
LinkedIn is controlling these credentials.
| | 05:41 | That is I can go to LinkedIn at any
point in time and tell them, hey, Elegant.ly
| | 05:45 | can no longer have access to my
information, but when I Grant Elegant.ly Access,
| | 05:50 | my profile is all set up.
| | 05:52 | You can see my photo, my name,
my current titles, and my bio.
| | 05:55 | 90% of the information I've to fill-
in in order to create a profile on
| | 05:59 | Elegant.ly is there for me.
| | 06:01 | This saves a ton of time and
gets me up and running right away.
| | 06:05 | Once more I want to repeat the core
essence here, people have already done a
| | 06:08 | lot of work on the web.
| | 06:10 | why not take advantage of that instead
of having them start over every time they
| | 06:13 | encounter a new service.
| | 06:15 | This doesn't just apply to desktop sites,
| | 06:17 | it's even more evident on mobile.
| | 06:20 | On mobile I can use a
service like SCVNGR, when I do;
| | 06:24 | I can connect with Facebook right out the gates.
| | 06:27 | In doing so, once again, I can authenticate
with Facebook and allow them to access
| | 06:32 | my services, and I see
what my friends are doing.
| | 06:35 | SCVNGR misses a bit of an opportunity
though, because when I go to my Profile,
| | 06:39 | you can see that none of the
information has been collected, no photo, no name,
| | 06:43 | there is a lot that can be done here.
| | 06:44 | SCVNGR also has the option to
connect to my Twitter account.
| | 06:48 | So Facebook is an option, LinkedIn is
an option, Twitter is an option and more
| | 06:52 | and more of these
services are popping up everyday.
| | 06:54 | For example, on iOS, or an iPhone, or
iPod touch device, I can actually Autofill
| | 07:01 | form using information from my address book.
| | 07:03 | So when I signed up for service like
Gowalla, tapping one button will fill-in my
| | 07:07 | First Name, Last Name, and E-mail address.
| | 07:09 | That gets me on the way much faster on
mobile where typing things can be a bit hard.
| | 07:13 | There's another example on mobile, when
I purchase things from the Apple Store
| | 07:18 | and I Add to Cart, I'm able to Check
Out using my existing iTunes account.
| | 07:23 | All I need, to do here is provide a
Password and tada, I can buy something.
| | 07:28 | No more credit card information details,
shipping address, buying address, all
| | 07:32 | that stuff has been filled in already,
all I need is a password and I can buy,
| | 07:37 | different implementation but same concept.
| | 07:39 | The idea is I've already done work
elsewhere that this service can use, why
| | 07:43 | make me repeat myself.
| | 07:45 | Wrapping up around web services, I
think they're great opportunity to remove
| | 07:48 | barriers durring account creation.
| | 07:50 | We've already told the Internet our
name, we've already uploaded a photo,
| | 07:54 | given that our e-mail address, why do
we need to repeat that every time we
| | 07:57 | encounter a new service?
| | 07:59 | Using third-party solutions like
Facebook Connect, LinkedIn Connect, and a
| | 08:03 | few of the other examples I highlighted, we
don't have to require people that recreate things.
| | 08:08 | In fact, we you can deliver an
instant-on start experience or purchase
| | 08:11 | experience that makes things as
easy as clicking a single button.
| | 08:15 | When people do so, their profile is
filled in, their friends are there, or
| | 08:19 | their purchasing and shipping
information are already present.
| | 08:22 | This makes things really fast and
smooth especially on mobile devices.
| | Collapse this transcript |
| Device capabilities| 00:00 | Not all devices are created equally.
| | 00:02 | The different capabilities of emerging
class of devices, gives us new ways to
| | 00:06 | capture input from people.
| | 00:08 | If you go and do a search for mobile
input, you will see that the general
| | 00:12 | rule of thumb is to try and avoid it,
i.e. limit the use of text input and
| | 00:17 | forms on mobile devices.
| | 00:19 | Across the board, you see the same story,
this can be hard, time consuming and
| | 00:24 | frustrating for people.
| | 00:25 | As a result, we should not do it.
| | 00:27 | However, data tells a bit of a different story.
| | 00:30 | Looking at SMS use, we actually see
that people are using pretty remedial
| | 00:34 | devices to send a lot of information.
| | 00:36 | In fact in United States we've got
four-billion text messages sent today.
| | 00:40 | More surprisingly, one in every three
teenagers sends over 100 text messages a
| | 00:45 | day and it's not just the teens, 72% of
adults are sending and receiving texts
| | 00:51 | and feature phone and smart
phone users are involved as well.
| | 00:55 | So there is a lot of sharing and a
lot of content being created on phones
| | 00:59 | despite their limitations.
| | 01:00 | As a result, why should we limit
people just because they are on a smaller
| | 01:04 | screen or a less capable device?
| | 01:06 | In fact, since they have mobile
devices with them all the time, a new
| | 01:10 | opportunity is created for capturing input.
| | 01:13 | These devices are with us wherever
and whenever we are, therefore, any time
| | 01:17 | inspiration strikes, we can capture input.
| | 01:20 | Looking at where people actually use their
smart phones illustrates this opportunity.
| | 01:24 | 84% of smart phone users are using it
at home, through miscellaneous times
| | 01:29 | during the day, waiting in lines, at
work, all of these places are great, new
| | 01:34 | opportunities for capturing input.
| | 01:36 | So let's turn the
conventional wisdom on its head.
| | 01:39 | Rather than limiting the use of input on
mobile devices, let's try and encourage it.
| | 01:44 | Because people can access their mobile
phone anytime and anywhere an inspiration
| | 01:47 | strikes, new ways to collaborate,
create, share and comment can happen.
| | 01:53 | Using our designs to encourage that
instead of liming it, I think is the way to go.
| | 01:57 | So how do we do that, and what are some of
the new capabilities we have at our disposal?
| | 02:02 | First of all, touch.
| | 02:04 | Touch is a new capability making
its way in most portable devices.
| | 02:08 | Instead of using just a hard keyboard
or a cursor to interact with information,
| | 02:12 | we can actually use our fingers
to take care of lots of things.
| | 02:14 | Here is an example from Yahoo!
| | 02:16 | search, in order to find a restaurant
near me, I can type things in or I can
| | 02:21 | just draw a circle in a map.
| | 02:23 | Once that circle is drawn using my
finger, the app comes back here are
| | 02:27 | restaurants in that area.
| | 02:28 | I can also draw a line
and get similar information.
| | 02:30 | So the capability I am using to
provide input here is strictly my fingers.
| | 02:35 | Similarly on Google's Android, I can
draw a letter to run a search, I can change
| | 02:40 | that search up with another letter.
| | 02:42 | The touch gestures I am inputting are
how I am doing the search instead of
| | 02:46 | typing in through a virtual keyboard.
| | 02:48 | Touch gestures offer a rich palette
for us to actually provide input with.
| | 02:52 | I am not going to get into all the
specifics of what's available to you, but I
| | 02:56 | will reference the Touch Gesture
reference guide that I created a while ago
| | 02:59 | for few collaborators.
| | 03:01 | You can jump over to lukew.com/touch
and find out all the touch gestures that
| | 03:05 | are available to you and how they're
traditionally used. Next up is voice.
| | 03:10 | While we can use our fingers or our
keyboards or a number of other indirect
| | 03:15 | device capabilities, voice is
something that we can speak to.
| | 03:19 | What do I mean by that?
| | 03:20 | Well, let's look at the Google Nexus
One phone, anywhere there is an input
| | 03:24 | field, you can simply tap
the microphone and speak,
| | 03:29 | in this case, composing a message.
| | 03:30 | Google also allows you to simply
swipe your finger across the keyboard to
| | 03:35 | activate voice mode.
| | 03:36 | So flick across, and speak now.
| | 03:39 | This is great for the one-handed
use we find ourselves at in many
| | 03:42 | situations throughout the day.
| | 03:44 | You're walking down the street or in a
crowd environment, just swipe your thumb
| | 03:47 | and move into Voice Activated Mode.
| | 03:50 | You can also see this working on Amazon.
| | 03:53 | Here, to run a search,
once again we'll just talk.
| | 03:56 | In fact, the possibilities are endless.
| | 03:58 | Anywhere there is an input field, our
voices can provide the kind of data we
| | 04:02 | traditionally reserve for keyboards.
| | 04:03 | You want to update your status on
Facebook, same deal, just talk.
| | 04:08 | Touch and Voice are two
capabilities we have at our disposal.
| | 04:11 | Another one is location.
| | 04:12 | Traditionally on desktops or laptops
if we're dealing with a location based
| | 04:16 | task, we turn to our keyboard.
| | 04:18 | That is, we're going to type in the fact that
we're looking for restaurants near San Jose.
| | 04:22 | The local review service Yelp will
give us a listing of what's in San Jose.
| | 04:25 | Now that can span a pretty big area and
as a result there's a number of filters
| | 04:29 | for cities, distance, features, pricing
and category. In other words, we've got
| | 04:34 | to do a lot of work.
| | 04:35 | Contrast this experience to
using Yelp on an iPhone or iPad.
| | 04:40 | Here, the location of the device
is known, so all I need to do is tap
| | 04:44 | Restaurants and I get the places that
are closest to me displayed instantly.
| | 04:49 | Now, I can determine where I need to eat
within a radius of a mile or less, much
| | 04:53 | different than the location
information I was given on the desktop.
| | 04:57 | Similarly, location can be used to give
us a whole bunch of different data points.
| | 05:01 | Again, no real input involved.
| | 05:02 | Here, using the appware I can tell
that the cheapest price of gas near me is
| | 05:07 | $2.96, what the weather is where I am
currently at, local news, reviews about
| | 05:12 | restaurants nearby, or I can also get traffic
information, local events, movies and more.
| | 05:18 | Again, this data is coming to me. The
device knows my location and it can simply
| | 05:23 | use that as a filter for
all the information it has.
| | 05:26 | Knowing a bit about how location is
detected on these devices can help us.
| | 05:30 | Generally, GPS is the most accurate down
to 10 meters, but has a lot of problems
| | 05:34 | working indoors and can take quite
a bit of time to get up and running.
| | 05:38 | Wi-Fi beacons are much more instant
and they don't drain our battery life.
| | 05:42 | However, they are only
accurate down the 50 meters.
| | 05:45 | Going even further, we can rely on cell
tower triangulation or single cell towers.
| | 05:49 | As you can tell our accuracy goes
down the further we move on this list.
| | 05:53 | In the desktop or laptop, all we have
is IP and with IP detection, we can only
| | 05:59 | be 99% accurate that we are within a
particular country, not a lot of things
| | 06:03 | we can do with that.
| | 06:05 | We combine location detection with
another device capability called orientation.
| | 06:09 | We not only know where you are on the map,
we actually know the direction you are facing.
| | 06:14 | This allows us to do some
very interesting things.
| | 06:16 | In fact, you can look at the world like this.
| | 06:19 | Using your current position, we
can bring in most relevant digital
| | 06:23 | information for you.
| | 06:24 | Let me restate that, we know where you are
in the world and the direction you are facing.
| | 06:29 | Based on that, we can pull in
the digital information that's most
| | 06:32 | appropriate for you.
| | 06:33 | That's pretty powerful stuff
and it's actually available today.
| | 06:37 | Looking at the location service Yelp
that we saw earlier, we can see them giving
| | 06:41 | us information about local restaurants
and services right on our field of view.
| | 06:46 | Here, just point your smart phone camera
in any direction you please, and you'll
| | 06:49 | get the nearest services, how
they're rated and what they are.
| | 06:53 | Yelp originally launched
this feature as an Easter Egg.
| | 06:56 | In fact, they didn't think it would
get a lot of attraction, but when people
| | 06:59 | discovered it, they actually
saw a sustained 40-50% boost.
| | 07:03 | According to Yelp CEO Jeremy
Stoppelman, this was really beyond their
| | 07:07 | wildest imaginations.
| | 07:08 | So there is clearly something here.
| | 07:10 | While these interfaces aren't there yet,
the idea of relevant information based
| | 07:14 | on your current position and
orientation in the world is very powerful.
| | 07:18 | Again, no input required, just pull
out your device and point it in the
| | 07:22 | direction you feel most appropriate.
| | 07:24 | We also can use images as input.
| | 07:27 | Looking at an application like ShopSavvy,
we point it at a barcode of say a book;
| | 07:33 | it scans that and finds
the book we're looking at.
| | 07:35 | It will tell us how much it cost on the
web and how much it cost at local stores.
| | 07:40 | In fact, it will give us a full listing of
all the places we can purchase it online.
| | 07:44 | It will give us all the reviews of the book
online which we can filter by Best to Worst.
| | 07:49 | We can also look at where we can get
this book nearest and the prices there.
| | 07:53 | If we'd like to, we can look at that on
the map and see how long it will take us
| | 07:56 | to actually get the product we're looking at.
| | 07:58 | Or you don't even need to scan a barcode.
| | 08:01 | Using SnapTell, just point your camera at a
product, take a photo and it will identify it.
| | 08:06 | Once again we identify the same
designing web interactions book.
| | 08:09 | Google Goggles takes us even further and
allows you to use images for all types of input.
| | 08:14 | So you can also point Google Goggles
add a book, CD or movie and it will
| | 08:19 | identify it and allow you to
purchase it online or even see a sample.
| | 08:23 | You can point it at a wine label, it
will also identify that and give you
| | 08:27 | additional information, you can point
it at a business card, and using OCR, it
| | 08:31 | will scan the contents of the
card and add it to your address book.
| | 08:34 | Works of art also are fair game.
| | 08:36 | Just point Google Goggles at a
painting you're looking at and it will
| | 08:39 | identify it for you.
| | 08:40 | You can also point your camera at a landmark.
| | 08:43 | Using your location and the image, Google
Goggles will identify what you're looking at.
| | 08:47 | Pointing the same application at foreign
text will actually translate it for you.
| | 08:51 | So your days of ordering something
mysterious off a menu in a foreign
| | 08:54 | country are now behind you.
| | 08:56 | Once again we see Google pushing the boundaries.
| | 08:59 | What they've done with their Google
Maps feature is allow people to interact
| | 09:02 | with QR codes with any one of their
most popular locations from Google Places.
| | 09:07 | Popular location from Google Places
will place a QR code in their window which
| | 09:12 | again you just point your camera phone app.
| | 09:13 | It will scan the code and tell you
the restaurant you're looking at, along
| | 09:17 | with their phone number, average reviews,
details, menu, whatever information it has online.
| | 09:23 | This idea of interacting with a
physical place simply by capturing an image of
| | 09:27 | it, is pretty interesting.
| | 09:29 | QR codes though aren't
limited to physical locations.
| | 09:32 | In fact, Facebook is experimenting
with putting QR codes on profile pages.
| | 09:36 | The bottom-line is there are a lot of
modern device capabilities that allow us
| | 09:40 | to capture input in new
and very compelling ways.
| | 09:42 | We've talked a little bit about
multi-touch, location detection, device
| | 09:46 | positioning, orientation but as you can
see in this list, there's a large number
| | 09:50 | that I haven't even touched on yet,
who knows what ways of capturing input we
| | 09:54 | can use of these capabilities,
only the future will tell.
| | 09:59 | Device capabilities give us new ways
to rethink an input by taking advantage
| | 10:03 | of things like location detection, multi-
touch sensors, integrated video cameras and audio.
| | 10:09 | The ways we can use these capabilities to
capture input can move us way beyond web forms.
| | 10:14 | Instead of filling in input fields and
labels, just start talking to your device.
| | 10:18 | Instead of filling in a whole form,
just point your camera at something.
| | 10:22 | This really revolutionizes the ways we
can get input and moves us way beyond
| | 10:26 | static web forms which I for
one, think is very exciting.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | At this point, we have taken a real
deep dive ito web forms and beyond,
| | 00:03 | so thanks for sticking with me.
| | 00:05 | We looked at why web forms matter.
Whether it's e-commerce, registration, or any
| | 00:09 | other crucial flow online, web forms
are likely to be at the center of the
| | 00:13 | action, sitting between what our
customers want and what our businesses are
| | 00:16 | trying to achieve. As a result, even
the smallest details in web forms matter.
| | 00:21 | We looked at a lot of these details
when we talked about form organization.
| | 00:24 | How can we use labels, input fields,
actions and the overall structure and
| | 00:29 | layout of forms to get people through
tasks quickly and easily, we also saw how
| | 00:33 | form interactions can play a role.
| | 00:35 | The back and forth conversations we
have with our customers can really
| | 00:39 | define the type of experience they
have when they're signing up or buying
| | 00:43 | something from our sites.
| | 00:44 | Last but not least, we looked at
moving beyond static web forms;
| | 00:48 | device capabilities, web services and
existing communication tools can really
| | 00:53 | allow us to capture input wherever
people happen to be and not require them to
| | 00:57 | come to our sites and fill in our web
forms every time we have a data request.
| | 01:02 | Hopefully, you find these
details as useful as I have.
| | 01:05 | If you're ever interested in talking
more about web forms, you can find me on
| | 01:08 | Twitter at lukew or my own site lukew.com.
| | 01:11 | I am happy to keep the conversation going,
whatever your questions are about Web Forms may be.
| | 01:17 | Thanks, and best of luck with your own designs.
| | Collapse this transcript |
|
|
