IntroductionWelcome| 00:00 |
(MUSIC).
Hello, and welcome to Applied Interaction Design.
| | 00:06 |
I'm Dave Hogue.
In this course, we're going to use the
| | 00:09 |
essential principles of interaction design
to create a better, more engaging, and
| | 00:12 |
more interactive website.
We'll start by reviewing the five
| | 00:17 |
interaction design principles and a few
other key concepts, such as understanding
| | 00:20 |
the context of a user experience.
Then we'll create a scenario or a use case
| | 00:25 |
to help guide us through our review of the
original website.
| | 00:29 |
We'll also use that scenario to help
inform our design recommendations, to make
| | 00:33 |
an improved website that is more
effective, more engaging, and more interactive.
| | 00:39 |
As we review the original website, we'll
identify weaknesses and discuss in more
| | 00:42 |
detail why they are problems.
Then we'll look at how we improve the site
| | 00:47 |
and discuss what we changed and why.
Although, we may discuss some more
| | 00:50 |
technical issues in this course, we're not
going to delve into coding and review how
| | 00:54 |
the improvements to our website were
developed.
| | 00:58 |
We'll be focused on how to create better
interactive experiences.
| | 01:01 |
So, let's start applying our interaction
design skills.
| | 01:06 |
| | Collapse this transcript |
| Who is this course for?| 00:00 |
So, who is this course for?
Well, it's for students, designers, and developers.
| | 00:05 |
Anyone who wants to craft better, more
interactive websites and applications by
| | 00:09 |
applying core interaction design
principles and practices.
| | 00:13 |
We're going to look at an existing website
to discuss its strengths and weaknesses in
| | 00:17 |
terms of what we know about what people
think and behave.
| | 00:21 |
We'll explore some alternatives, make
recommendations for improvement, and craft
| | 00:25 |
a better overall design all while keeping
the user in mind.
| | 00:30 |
As interaction designers, we are often
charged with making the user experience
| | 00:34 |
better in many ways, but we also need to
be able to explain why problems are
| | 00:37 |
problems and why one design may be a
better solution than another in a
| | 00:41 |
particular situation.
As members of multidisciplinary teams, we
| | 00:48 |
need to be able to speak the language of
design, explain complex concepts clearly
| | 00:52 |
and concisely to clients and to
collaborate closely with developers by
| | 00:55 |
understanding the limitations and
opportunities of different technologies.
| | 01:02 |
In short, we need to be able to apply our
skills and knowledge to create the best
| | 01:06 |
experiences possible.
And remember, interaction design is not
| | 01:10 |
about the behavior of the interface, it's
about the behavior of people, so let's get started.
| | 01:16 |
| | Collapse this transcript |
| Reviewing the interaction design principles| 00:00 |
Before we get started, let's quickly
review some key concepts that we
| | 00:03 |
originally introduced in the interaction
design fundamentals course.
| | 00:08 |
We talked about the principles of
interactive design and identified five
| | 00:11 |
essential principles.
Perceivability, predictability, feedback,
| | 00:17 |
learnability, and consistency.
And you'll remember that these 5
| | 00:22 |
principles form a system.
Let's start with when we arrive at a website.
| | 00:29 |
The first thing is perceivability.
If we perceive the opportunity to
| | 00:33 |
interact, then we will do so.
However, if we don't understand what we
| | 00:39 |
can do or what is available to us, then we
fail to interact.
| | 00:45 |
If we are able to predict what the result
of our interactions will be and if it's
| | 00:50 |
what we want to have happened.
Then we interact with the website, or with
| | 00:55 |
the application.
And once we've interacted with the website
| | 00:59 |
or application, it provides feedback to
us.
| | 01:03 |
This feedback helps us understand what has
happened.
| | 01:06 |
When we get good feedback that we
understand, we're able to learn, and we
| | 01:11 |
get better at the experience.
And as we repeat these experiences with
| | 01:16 |
practice, We observe what is happening.
So, with repeated practice, our skills get better.
| | 01:25 |
Eventually, we're able to transfer what we
have learned into other similar
| | 01:29 |
experiences, because when an experience is
similar to something we have already
| | 01:33 |
learned, when it is consistent, we're able
to apply our past experience.
| | 01:40 |
And so we end up with this large loop.
All of our past experiences influence how
| | 01:46 |
we understand new experiences.
We look for opportunities to interact if
| | 01:51 |
we perceive them, and we predict
accurately, we choose to interact.
| | 01:56 |
Feedback tells us if we've gotten the
result we wanted, if we understand it.
| | 02:00 |
And we learn new experiences.
And the cycle simply keeps repeating.
| | 02:06 |
Additionally, we mentioned in the
interaction design fundamentals course,
| | 02:10 |
that understanding the context of an
experience, is critical.
| | 02:15 |
We have to know what do people need to
accomplish?
| | 02:17 |
Why are they there?
What are they trying to do?
| | 02:20 |
And there's a series of questions that we
can ask ourselves to understand the
| | 02:24 |
context scenarios, such as who is the
person or people who are actually using
| | 02:28 |
the interface.
What do we know about them?
| | 02:33 |
What do they need to achieve or
accomplish?
| | 02:35 |
What is it that they are trying to do?
What is their goal?
| | 02:40 |
What is their situation or their
environment?
| | 02:43 |
Where are they actually interacting with
the interface?
| | 02:47 |
Is it on a laptop at home?
On a smartphone standing in line at the
| | 02:50 |
grocery store?
Or while riding a train?
| | 02:54 |
How urgent or important is their need?
Is this something that they have to
| | 02:59 |
complete right now?
Or is it a more casual experience and if
| | 03:02 |
they don't finish it they can come back to
it later?
| | 03:06 |
What are their expectations of the
experience?
| | 03:09 |
What is going to satisfy these needs?
How much time do they have available.
| | 03:16 |
Is this going to be a long, extended,
multi-part, multi-step experience?
| | 03:21 |
Or is it just a few minutes, and they need
to find out quickly, such as what's the
| | 03:25 |
address of the restaurant, and are they
open this evening?
| | 03:30 |
And how much attention are they able to
dedicate to this interaction, are they
| | 03:34 |
focussed or are they distracted.
Is this one of many things they are trying
| | 03:40 |
to do or is it the one thing they need to
do and finally what is their tolerance for complexity.
| | 03:47 |
How simple does this experience need to
be, if they have little attention and
| | 03:51 |
little time and in urgent need.
Their tolerance for complexity is going to
| | 03:57 |
be very low.
They need a simple experience.
| | 04:01 |
Asking ourselves these questions will
really help us understand the context of
| | 04:05 |
the experience, and the answers to these
questions will influence our design decisions.
| | 04:11 |
| | Collapse this transcript |
| Defining a customer scenario| 00:00 |
Before we begin evaluating the original
website, we need to establish a scenario,
| | 00:05 |
or a story that represents a common
customer experience.
| | 00:10 |
Now this is an important technique in user
research, because we need to understand
| | 00:13 |
how people are actually going to interact.
What are they going to be looking for on
| | 00:18 |
the site?
And this guides us through our evaluation.
| | 00:22 |
It also helps inform our design decisions.
We know that the original site was not
| | 00:27 |
working well, so we identified a common
customer scenario to help us evaluate the
| | 00:31 |
experience, identify what the problems
were, and to recommend some solutions.
| | 00:37 |
Hansel and Petal is an online flower shop,
so customers are going to be looking for
| | 00:41 |
flower arrangements and bouquets.
In this case, our target customer is going
| | 00:46 |
to be a husband who is seeking two
bouquets.
| | 00:50 |
He's looking for one for his mother for
Mother's Day and one for his wife for
| | 00:53 |
Mother's Day.
He arrives at the Home page, he's going to
| | 00:57 |
view some arrangements and mixed
arrangements.
| | 01:00 |
He's going to identify a product that he
wants to purchase.
| | 01:03 |
Such as a rose bouquet for his mother.
He's going to seek information about how
| | 01:08 |
to care for flowers, on the site.
To try and figure out which flowers are
| | 01:13 |
going to be best for him to purchase, he's
actually going to customize a bouquet for
| | 01:17 |
his wife.
He'll review the selections that he has
| | 01:21 |
made and then finally he'll make his
purchase.
| | 01:25 |
So this customer scenario is going to be
used for us to evaluate the web site, and
| | 01:29 |
then we'll be able to compare the original
site and the improve site to see how much
| | 01:33 |
better the interaction design is.
| | 01:37 |
| | Collapse this transcript |
| Using the demonstration sites| 00:00 |
Unlike many lynda.com courses, we do not
have exercise files.
| | 00:04 |
But we do have demonstration websites for
the original and improved versions, so
| | 00:08 |
that you can experience them for yourself.
These are not complete websites and are
| | 00:13 |
for demonstration only, so many links do
not work and features may not be available.
| | 00:18 |
These sites are intended to be viewed in
conjunction with this course and following
| | 00:22 |
the customer's scenario we just described.
From the Hansel and Petal landing page,
| | 00:28 |
you may visit the 3 demonstration website
and link back to this course.
| | 00:32 |
The three demo sites are the original
site, which had interaction design
| | 00:36 |
problems and two versions of the improved
site, each with their own way of building
| | 00:40 |
a custom bouquet.
For your convenience, we've added hidden
| | 00:46 |
links to the copyright notice in the
footer of all of the demonstration
| | 00:49 |
websites as a quick way to return to this
landing page.
| | 00:53 |
| | Collapse this transcript |
|
|
1. HomepageUnderstanding the header| 00:00 |
Okay.
So let's start from the landing page for
| | 00:02 |
the Hansel and Petal demonstration web
site for this course.
| | 00:05 |
We're going to open both the original
design and the improved design.
| | 00:09 |
And before we start talking about some of
the things that maybe problems or that
| | 00:12 |
we're going to change on this site, let's
just take a quick look at both of the home pages.
| | 00:16 |
And then, we'll come back this one and
talk about what some of the problems are
| | 00:19 |
and what we've done about it.
Now, as we look at this page, you probably
| | 00:23 |
are noticing some things that you think
might not be working very well but the
| | 00:27 |
design is pretty good.
And the content is pretty good.
| | 00:31 |
Once again, we're going to be focusing on
the interaction design.
| | 00:33 |
So we're going to try to preserve as much
as the visual design and branding as we can.
| | 00:38 |
But here's the homepage of the improved
site, and clearly there are some
| | 00:41 |
differences here.
It's the same content and the same
| | 00:45 |
branding, but we've strived to create a
much better interactive experience.
| | 00:50 |
Right, let's go back on to the original
homepage and let's start with the header.
| | 00:55 |
We're going to work our way down through
the page here and the first thing that we
| | 00:57 |
notice is really the header is very
simple.
| | 01:00 |
It's just the logo and a series of text
links across the top of the page.
| | 01:04 |
And although these text links look like
the things that we would expect to see,
| | 01:07 |
one of the first things that I notices is
that we're not using any hover or rollover states.
| | 01:12 |
So the underline between these text links
is the only thing that tells me that these
| | 01:16 |
are links, that and the fact that they're
located in the header.
| | 01:21 |
Now one of the issues that arises here is
with this search button.
| | 01:25 |
People expect to find search in the header
but they don't expect to find it this way.
| | 01:30 |
Let's talk about the issue of click depth
for a second.
| | 01:34 |
Most of the time when we're talking about
click depth it's because we're counting
| | 01:37 |
the number of clicks or taps that it takes
us to finish a task.
| | 01:41 |
And most often we're concerned that we
have too many clicks that we're going through.
| | 01:46 |
In fact, though, as long as each step
feels meaningful, and I feel like I'm
| | 01:49 |
moving forward, then the click depth is
appropriate.
| | 01:53 |
But if people feel like they should've
reached there goal and they're not there
| | 01:57 |
yet, then the click depth is too deep.
Let's go back to the original website for
| | 02:01 |
a moment.
So, here we are back on the original
| | 02:05 |
hansel and petal website, and we see one
click for search.
| | 02:09 |
Now, how deep could one click possibly be?
The problem is, in this situation, one
| | 02:14 |
click is probably too much, because people
expect to see the search bar visible at
| | 02:18 |
the top of the page.
So let's take a look at what we did on the
| | 02:23 |
modified website, and this is the new
header for Hansel and Petal.
| | 02:27 |
The content is the same, we've got the
same links for account, customer service.
| | 02:32 |
But now we've exposed the search bar, now
all I have to do is click and type in my
| | 02:35 |
search terms, I don't have to go to a
search page in order to do it.
| | 02:40 |
You'll also notice that we've added some
additional information and functionality.
| | 02:44 |
This is a retail site after all, so these
promotional messages are very important,
| | 02:48 |
and the header is an important place to
put that.
| | 02:52 |
We've added a visual cue for the shopping
basket, and we've added some additional
| | 02:56 |
informations, such as the subtotal of the
price in the basket.
| | 03:00 |
And finally, we've added a button for the
checkout, we now have a quick way to get
| | 03:03 |
to the checkout process for when we are
finished shopping.
| | 03:07 |
So on the original site, we had the basics
of what we needed.
| | 03:11 |
We had access to our shopping basket, we
had access to search, but it was just a
| | 03:14 |
little too far away, and not very
informative.
| | 03:18 |
And in fact, some really important
shopping functionality such as the promo
| | 03:21 |
message and the check out button were
completely missing.
| | 03:25 |
So we've added those in.
| | 03:27 |
| | Collapse this transcript |
| Working with navigation| 00:00 |
Okay, so we're back on the original page.
Let's focus on the navigation bar here.
| | 00:04 |
How it's located in a very traditional
position.
| | 00:07 |
It's a horizontal navigation bar at the
top of the page.
| | 00:10 |
But one of the first things that we notice
once again is that we're not getting any
| | 00:13 |
feedback on the hover or the rollover
here.
| | 00:16 |
We know that they're links, because it's
at the top of the page and it looks like a
| | 00:19 |
navigation bar.
But we could be providing some additional feedback.
| | 00:25 |
Before we go too far into talking about
the navigation bar, let's just quickly
| | 00:28 |
review some best practices for navigation
bars, for links and for buttons.
| | 00:33 |
We've already seen that there were some
problems with links in the header.
| | 00:36 |
Throughout the site, we want to make sure
that we're using labels that help people
| | 00:40 |
understand where the link or button is
going to go or what it's going to do.
| | 00:44 |
We want to make sure that we avoid being
vague or ambiguous or confusing with any
| | 00:48 |
of the labels that we put on navigation
and buttons.
| | 00:52 |
It also is often helpful to use active
verbs.
| | 00:56 |
We find that that encourages people to
interact more often.
| | 00:59 |
It lets them know what they're going to be
doing.
| | 01:01 |
Not just what they are going to be seeing,
or looking at.
| | 01:05 |
And finally, it is very helpful to use
different visual states to indicate the
| | 01:08 |
availability and a selection.
This is really important feedback.
| | 01:13 |
And remember, feedback is one of the five
essential principles of interaction design.
| | 01:19 |
Now that we know what our best practices
for navigation are, and we've identified
| | 01:22 |
some of the problems that we have here,
let's just quickly run over to the
| | 01:25 |
modified homepage and take a look at what
we did in terms of providing some
| | 01:28 |
additional feedback.
This is not really a dramatic change, but
| | 01:33 |
it's a subtle visual cue that let's people
know.
| | 01:34 |
Yes, this is the navigation element that
you are thinking of clicking on.
| | 01:35 |
Now you've probably noticed that the
navigation between the two pages behaves a
| | 01:36 |
little bit differently and in fact the
original navigation is a little bit of a problem.
| | 01:38 |
Yes, this is the navigation element that
you are thinking of clicking on.
| | 01:42 |
Now you've probably noticed that the
navigation between the two pages behaves a
| | 01:46 |
little bit differently and in fact the
original navigation is a little bit of a problem.
| | 01:52 |
First thing, as soon as I mouse over the
navigation bar, you see these drawers they
| | 01:57 |
pop into view instantly.
But there are also nested navigation.
| | 02:02 |
What we are seeing here is what's called a
flyout navigation So whenever there are
| | 02:06 |
choices within a category it flies out to
the side.
| | 02:10 |
The problem that we have is I have to keep
my mouse within this very narrow space in
| | 02:15 |
order to access my additional choices.
So if I'm interested in mixed
| | 02:20 |
arrangements, and I want to go say look at
mixed roses, oop, I just moused out of
| | 02:24 |
that space and the navigation disappears.
Or anytime I move, like orhcids?
| | 02:30 |
No, not orchids, nope.
Not spring, nope.
| | 02:32 |
I want roses.
Okay, there we go.
| | 02:35 |
That narrow little area is what's often
referred to as a mouse channel.
| | 02:39 |
It's that skinny little region that you
have to very carefully move your mouse
| | 02:43 |
through in order to get to content on the
other side, As soon as you move your mouse
| | 02:47 |
out of that space, the content disappears.
And this is obviously not a good experience.
| | 02:55 |
They're often found in nested navigational
systems and menus.
| | 02:58 |
So unfortunately, we run into these quite
often on the internet.
| | 03:02 |
Closely related to the mouse channel
problem in this navigation bar, is our
| | 03:05 |
ability to actually get our mouse
accurately to the next link, or hitting a target.
| | 03:12 |
In the previous Interaction Design
Fundamentals course, we talked about Fitts
| | 03:15 |
Law and Meyer's Law.
Which essentially is a mathematical set of
| | 03:19 |
formulas that tells us that it's easier
for us to click or tap on things that are
| | 03:23 |
larger and nearer.
And although that navigation drawer is not
| | 03:28 |
very Far away, we have to get to it
through a very small space.
| | 03:32 |
That's what makes it much more difficult
for us to accurately hit that target.
| | 03:37 |
So let's just quickly review the nav bar
from here on the original site.
| | 03:43 |
It's exactly where we think it should be.
We do have nested navigation, but it is
| | 03:47 |
tricky to use.
We have to be very careful with our mouse.
| | 03:51 |
But, it's not providing very much feedback
for us.
| | 03:54 |
Let's take a look at how we improved that.
So, over here on the modified site, once
| | 03:58 |
again because of best practices, for
navigation links and buttons you see that
| | 04:02 |
we've got hover states.
We added them to the header, we added them
| | 04:06 |
to the navigation bar, but you'll also
notice now that we've changed the way we
| | 04:10 |
access the nested navigation Within the
arrangements navigation option.
| | 04:16 |
Instead of having flyout menus, we now
have a large drawer navigation.
| | 04:20 |
This has two benefits.
One, it's very easy for us to mouse into
| | 04:23 |
this space, I have a very large channel in
which to move my mouse.
| | 04:29 |
You'll also notice that it exposes all of
my options so I don't have to look at just
| | 04:33 |
one set of menus at a time.
I can open up this one drawer and I can
| | 04:37 |
see oh popular flowers, and tropical
flowers, and orchids, and mixed arrangements.
| | 04:43 |
I can easily move my mouse to get to any
of those.
| | 04:47 |
Now there's one additional change that we
made here on this site and it's a subtle one.
| | 04:51 |
You may not have noticed it.
Let's go back and look at the original
| | 04:55 |
site for a moment.
And as soon I move my mouse into the
| | 04:58 |
navigation bar that menu appears.
In fact if I move my mouse quickly over it
| | 05:04 |
you see it blink into view.
Now if I'm moving my mouse from somewhere
| | 05:09 |
in the body of the page and I'm trying to
get to a link that 's up in the header.
| | 05:14 |
As soon as I cross over I get that blink
and that blink can be distracting On the
| | 05:18 |
modified version, we have an improvement.
If I mouse over, notice the drawer doesn't
| | 05:24 |
pop into view.
Only the arrangements hover state shows up.
| | 05:28 |
I actually have to slow down and pause in
order to open that drawer.
| | 05:33 |
That means this drawer is not going to get
in the way by blinking into view when I am
| | 05:36 |
not trying to open the drawer.
That technique of pausing briefly before
| | 05:43 |
we show or open a navigation drawer is
called hoverintent.
| | 05:48 |
And it's a coding technique, and it allows
us to display the content after a brief delay.
| | 05:53 |
So I can mouse over the navigation bar,
without the drawer popping into view.
| | 05:58 |
I only show it when people are slowing
down and placing their mouse over that area.
| | 06:04 |
This minimizes that undesirable display of
extra content or additional content Simply
| | 06:09 |
because the mouse has moved close to the
active zone.
| | 06:13 |
So, on the modified home page, we've
implemented hover intent.
| | 06:18 |
I actually have to slow down my mouse and
pause before the draw comes into view.
| | 06:22 |
So, let's just briefly talk about what we
did here to make the navigation bar a
| | 06:26 |
better experience.
On the original site, it's all the same
| | 06:30 |
navigation options.
But, the fly out menu was difficult.
| | 06:35 |
So, we've added feedback, we've added
timing delays, and we've added a large
| | 06:38 |
navigation drawer to make it easier for us
to mouse into and make a navigation selection.
| | 06:44 |
| | Collapse this transcript |
| Enhancing the carousel| 00:00 |
Okay.
Moving further down the page a little bit
| | 00:03 |
here, the first thing that we encounter is
this auto rotating banner thing at the top
| | 00:07 |
of the page.
When it first loads, I have no idea how
| | 00:11 |
many slides there are.
They're goin' by really, really quickly,
| | 00:15 |
so I have to be a very fast reader or I
have to sit here and wait for them to
| | 00:17 |
cycle through several times to see what's
going on.
| | 00:21 |
And in fact, I've got to watch this a few
times before I understand that there's
| | 00:24 |
even three different slides in messages
here.
| | 00:28 |
I don't have any way of knowing what
content is in this.
| | 00:31 |
And one of the things I might be worried
about is that maybe there's a big sale and
| | 00:35 |
I haven't noticed that slide yet.
I don't have a sense of control.
| | 00:39 |
I don't know how to make this carousel
stop or pause or how to get access to that information.
| | 00:46 |
In fact this is an issue that we call
locus of control.
| | 00:49 |
This is the extent to which people feel
they are in control of what is happening
| | 00:52 |
around them or things that are going to
affect them.
| | 00:57 |
When we have an internal locus of control,
we feel like we're in control of what's
| | 01:01 |
going on but when we have an external
locus of control, we feel like we don't
| | 01:05 |
control that and that we're being
subjected to whatever is around us.
| | 01:12 |
Back on the the original website, that's
the problem we have with this carousel.
| | 01:16 |
I'm not in control of it.
I can't say, pause.
| | 01:20 |
I want to see this message.
Or what's the next one, and I have no idea
| | 01:23 |
how many slides there are.
So, we made some improvements.
| | 01:28 |
Let's hop over to the modified site, and
take a look at this carousel.
| | 01:31 |
It still starts on the page with an
autoplay.
| | 01:34 |
The motion can be used to draw our
attention.
| | 01:38 |
You can decide if you want the carousel to
autoplay or not.
| | 01:41 |
Because now we have controls.
Now I can click and say, go back one.
| | 01:46 |
Or I have this little indicator at the
bottom of the carousel that says there are
| | 01:49 |
three slides here and you can jump to
whichever one you want.
| | 01:54 |
And when I click to control the carousel
myself we've coded it so that it stops auto-rotation.
| | 02:00 |
That way I have as much time as I need to
read the message, look at the photo, and
| | 02:04 |
make a decision is this is a product that
I am interested in.
| | 02:09 |
So I feel in control of this experience.
I can say I want the next slide or the
| | 02:14 |
previous slide.
Unfortunately, on the original experience,
| | 02:19 |
it was just so fast and I had no control.
I'm very likely to just scroll right on by
| | 02:24 |
and pretend it didn't even exist.
| | 02:27 |
| | Collapse this transcript |
| Working with content in grids| 00:00 |
Okay, we're back on the home page of the
original Hansel and Petal website.
| | 00:04 |
Let's continue scrolling a little bit
farther down to see what we might be able
| | 00:07 |
to improve on on this page.
Now down here, we get into the content of
| | 00:11 |
the website or the grid area.
And this is where we start exposing people
| | 00:14 |
to the products that are available on the
site.
| | 00:17 |
And it looks pretty good.
I mean, these are really pretty flowers.
| | 00:20 |
But one of the first things that we notice
is that we're missing feedback about what
| | 00:23 |
can I click on.
Until I mouse over and see my cursor
| | 00:27 |
change to a hand.
I'm not sure if I can click on the image,
| | 00:31 |
or if I have to click on the text link.
So, we want to make sure that people
| | 00:35 |
understand what is clickable.
Where can I click on the page and go
| | 00:38 |
somewhere for something I'm interested in?
You'll also notice we that have these
| | 00:42 |
little text badges on top of the products.
An item that's on sale, and even this
| | 00:47 |
"New!" announcement.
Now, that's great information to present,
| | 00:51 |
but it's just a text overlay.
You can imagine that for some of these
| | 00:54 |
colorful bouquets, that "New!" or sale
announcement could completely disappear
| | 00:58 |
into the photography.
So, in this case, we've got a new bouquet,
| | 01:03 |
it's under Bouquets and Arrangements for
someone special, but we might not notice that.
| | 01:09 |
We want to do something to draw attention
to those badges.
| | 01:13 |
A very important thing that we do as
interaction designers is we help guide the
| | 01:17 |
attention of the visitor to the website,
but we have to remember that attention is
| | 01:21 |
a limited resource.
We've only got so much of it, we can't pay
| | 01:26 |
attention to everything.
And since, we can't pay attention to
| | 01:30 |
everything, we end up distributing it
across all of the things that we think are
| | 01:34 |
most important.
And if we think something isn't important
| | 01:38 |
or if something is not noticeable to us,
well then we don't pay attention to it.
| | 01:43 |
Or worse yet we get distracted by things
that pull our attention away from what is
| | 01:47 |
important to something that isn't.
In this particular case, we want to draw
| | 01:53 |
attention to those badges.
We want people to notice that the product
| | 01:57 |
is on sale, or is new.
So, in this case, how can we modify the design?
| | 02:03 |
Well, this is just a simple visual cue.
In fact, it's not really about
| | 02:06 |
interactivity in this case.
This is about drawing attention where
| | 02:10 |
attention is necessary.
And so, with some additional graphical
| | 02:14 |
treatment, 'New' and 'Sale' are suddenly
visible to us, and they are much more noticeable.
| | 02:21 |
But you'll also notice now that we have
great feedback.
| | 02:24 |
Yes, you can click on these photos.
You can go learn more about the heirloom
| | 02:28 |
roses, or yes, you can buy this product.
So, we've added feedback, we've drawn
| | 02:33 |
attention with badges.
And although, we're using exactly the same
| | 02:38 |
content and photography, with just two
simple changes, it becomes much more clear
| | 02:42 |
what can I shop for and what is going to
draw my attention.
| | 02:48 |
| | Collapse this transcript |
| Exploring the footer| 00:00 |
And here we are back on the original
homepage one last time.
| | 00:04 |
We've got just a little bit of content at
the bottom of the page, let's take a look
| | 00:06 |
at how we can make this better.
These banners, they're actually working
| | 00:10 |
fine, we're not going to make any changes
to those.
| | 00:13 |
This is good content.
But the footer, we have some issues down here.
| | 00:17 |
Now it's a very simple footer, and in fact
we're just repeating the navigation at the bottom.
| | 00:22 |
We could actually make the search engine
optimization, or SEO, a little bit better
| | 00:26 |
for this website.
By exposing more of the deeper navigation,
| | 00:30 |
particularly for the most popular areas,
or the most commonly visited areas.
| | 00:35 |
But the real problem with the footer here
is this Sign Up link.
| | 00:39 |
One, it's just very vaguely labeled.
Now remember one of the best practices for
| | 00:44 |
navigation and for buttons is to be very
clear and let people know what is going to happen.
| | 00:49 |
In this case, we just have Newsletter Sign
Up.
| | 00:52 |
But the worst part of this is that, when I
click into this field to add what I assume
| | 00:57 |
is my email address, it's pre-populated
with Newsletter.
| | 01:02 |
And in fact, I now have to completely
backspace over and delete that text before
| | 01:06 |
I can put in my own information.
So now I can Sign Up.
| | 01:13 |
But I had to delete the newsletter text in
order to do that.
| | 01:16 |
Clearly, we don't want to make people work
to sign up for a newsletter.
| | 01:20 |
So how can we improve the footer on this
website?
| | 01:23 |
Let's take a look at what we did on the
modified version of this site.
| | 01:27 |
And once again, we're using the same
content, but we've added some
| | 01:30 |
functionality here.
You'll also notice that we added in some
| | 01:34 |
social media and social networking.
This has just become so prevalent
| | 01:38 |
throughout the experiences on the web.
When people see things that they like or
| | 01:43 |
that they want to share, we just have
instant access on every page to do that.
| | 01:48 |
We've also changed the way the sign up for
special offers works.
| | 01:51 |
We're using a much more descriptive label
and now I can sign up and I don't have to
| | 01:56 |
erase that place holder text.
I can just start typing directly.
| | 02:01 |
And finally we'v added some more
information to our footer in these links
| | 02:05 |
by repeating the navigation.
Exposing some commonly requested links or
| | 02:11 |
common destination.
And so our search engine optimization may
| | 02:15 |
be improved by having a more meaningful
footer as well.
| | 02:20 |
So, on the original site, we took a very
simple footer, and we made it a better,
| | 02:24 |
more meaningful footer with better
functionality.
| | 02:28 |
And with added functionality .
for social media and social networking.
| | 02:32 |
| | Collapse this transcript |
|
|
2. Category PagesEstablishing a sense of place| 00:00 |
Here we are back on the original Hansel
and Petal website.
| | 00:03 |
Now, remember in our customer scenario we
have a husband who wants to buy a
| | 00:07 |
two-flower bouquets for mothers day.
One for his wife and one for his mother.
| | 00:12 |
And in order to do that, we're going to
need to look and see what types of
| | 00:14 |
bouquets are available and that means
navigating more deeply into the site.
| | 00:19 |
So lets check out and what Hansel and
Petal offer in terms of their flower
| | 00:22 |
arrangements and.
We're just going to go to the arrangements
| | 00:25 |
page and sure enough here we are.
Floral arrangements for any occasion.
| | 00:30 |
Now we've got some of the same problems
we've already discussed.
| | 00:33 |
We're not in control of the carousel.
I see the hand cursor so I know I can
| | 00:37 |
click on it, but I'm not getting any
feedback.
| | 00:41 |
The text badge is not drawing my
attention.
| | 00:44 |
But the biggest problem as we start to
navigate into this site is I move down one
| | 00:48 |
more level into mixed arrangements.
And I see from the page header that I'm on
| | 00:53 |
mixed arrangements.
But the navigation bar isn't telling me
| | 00:57 |
which section of the site that I'm in.
And now I don't know how deeply I have
| | 01:02 |
moved into the site.
I'm actually two clicks in, but there's
| | 01:06 |
nothing to tell me where I am on the
website relative to the home page.
| | 01:11 |
So, let's take a look at the modified
website, and see what recommendations
| | 01:15 |
we're making to improve that.
First off, we're going to go to the
| | 01:19 |
Arrangements page.
We're going to see floral arrangements for
| | 01:22 |
any occasion.
You'll see now I'm in control of my carousel.
| | 01:26 |
But you'll also notice two changes at the
navigation bar.
| | 01:29 |
One, is that we now have a selected state
for the navigation.
| | 01:33 |
It's telling me, you are in the
arrangements section.
| | 01:37 |
We've also added a breadcrumb.
You are one page deeper than the homepage.
| | 01:42 |
You are on the arrangements page.
Now we went ahead and made the other
| | 01:46 |
improvements to the site, so we improved
the badge in order to draw attention.
| | 01:50 |
And we added feedback for the rollovers.
So the people know that this is clickable.
| | 01:55 |
But the most important changes are the
sense of place.
| | 01:58 |
So let's dive in just a little bit deeper.
We're going to go to the mixed
| | 02:02 |
arrangements page.
And sure enough, our bread crumb has now
| | 02:05 |
extended to show me that I am two levels
deeper into the site from the homepage.
| | 02:11 |
I've passed the arrangements page, and I'm
now at the mixed arrangements page.
| | 02:16 |
This sense of place is very important in
interaction design because as we're
| | 02:20 |
navigating more deeply into the site, we
need to know where we are.
| | 02:26 |
People have sense of place when they know
where they are, when they understand how
| | 02:30 |
they got there, and are able to accurately
predict where they might be able to go next.
| | 02:35 |
Now the sense of place is closely related
to the concept of the scent of information.
| | 02:39 |
We talked about both of these topics in
more detail in the Interaction Design
| | 02:43 |
Fundamentals course.
The scent of information though is when we
| | 02:47 |
identify a trail of information.
It's when we are following a sequence of
| | 02:51 |
links because those links are meaningfully
related to one another.
| | 02:56 |
I know that I am looking for some flower
arrangements.
| | 02:59 |
And I know that I want to get mixed flower
arrangements rather than all of one flower.
| | 03:06 |
So when we added this navigation highlight
to say you're in the arrangements section,
| | 03:10 |
and we added the breadcrumb to say you're
two levels deeper than the homepage and
| | 03:14 |
currently on the mixed arrangements page,
we added more information to help people
| | 03:18 |
understand where they are.
| | 03:22 |
| | Collapse this transcript |
| Working with traditional pagination| 00:00 |
So back on the mixed arrangements page for
the original Hansel and Petal website.
| | 00:05 |
We can tell once again because we don't
have any navigation states, and we don't
| | 00:08 |
have a breadcrumb.
As we scroll down through the page we
| | 00:12 |
notice somewhat discretely over here on
the right hand side, Previous and Next links.
| | 00:18 |
Now initially I wasn't quite sure If this
meant that I could control the carousel or
| | 00:22 |
if it was related to the content in the
grid down below.
| | 00:26 |
And as we scroll down, I see there's about
12 bouquets here for me.
| | 00:30 |
But when I click on Next, I think it
reloaded the page, are these the same bouquets?
| | 00:38 |
Let's see, go back, Burst of Yellow
Tulips, go forward not press okay, so
| | 00:43 |
Previous and Next are actually showing me
additional bouquets.
| | 00:49 |
So you see the problem here right?
Not only do I not have a good sense of
| | 00:53 |
place I really don't have any idea of how
many mixed arrangement bouquets Hansel and
| | 00:57 |
Petal offers to me.
All I know is that I can go Previous and
| | 01:02 |
Next and I can see more.
And I'm going to have to click that until
| | 01:07 |
I reach the end I suppose.
Now, why is this a problem?
| | 01:13 |
Status and Progress information is a form
of feedback.
| | 01:16 |
And remember feedback is one of those
essential principles of interaction design.
| | 01:21 |
And it's progress information and status
information about how many arrangements
| | 01:24 |
are available on the Hansel and Petal
site, that we're missing.
| | 01:29 |
So, if I am in the middle of a process or
an interaction, and something is ongoing.
| | 01:34 |
I want a status indicator that says to me,
I'm still working, please be patient.
| | 01:39 |
On the other hand, if I am moving through
something that may have multiple steps or
| | 01:44 |
multiple pages, I need a progress
indicator.
| | 01:47 |
I want to know, how much have I seen?
How much have I done?
| | 01:51 |
How much remains?
How many more pages of flowers could I
| | 01:55 |
possibly be looking at?
There is an additional problem with the
| | 01:59 |
way pagination is currently working on the
Hansel and Petal site.
| | 02:04 |
That type of really vague pagination
actually places a lot of strain on your memory.
| | 02:10 |
Now, your working memory is what you're
actively thinking about at any one given
| | 02:13 |
moment in time, and unfortunately, it's
limited.
| | 02:17 |
There's only so much that we can put into
our memories, and then we start to forget things.
| | 02:22 |
So, how many pages have I clicked into the
mixed arrangements bouquet?
| | 02:26 |
I don't know, there's no bread crumb,
there is no page number, I don't remember.
| | 02:33 |
Long term memory, on the other hand, it
lasts a very long time, and it's got a
| | 02:36 |
very large capacity.
But it requires effort to put information
| | 02:40 |
into the long term memory.
And people just aren't going to do that on
| | 02:44 |
a website.
They're not going to write down how many
| | 02:47 |
pages have I clicked into.
They're not going to load a new page and
| | 02:51 |
then try to memorize what the first
product is.
| | 02:54 |
So, that they remember which page they're
on when they see it again.
| | 02:57 |
We can do better.
So this grid of products, I see 12 lovely
| | 03:01 |
bouquets, but I don't know how many
bouquets there are.
| | 03:06 |
And I can click Next and Previous until I
reach the end.
| | 03:09 |
But unfortunately I have no sense of
progress, and this is taxing my memory.
| | 03:15 |
We need a better solution.
Let's take a look at what we could do, in
| | 03:19 |
the next movie.
| | 03:20 |
| | Collapse this transcript |
| Adding infinite scrolling| 00:00 |
So, how can we fix the pagination problems
that we had on the original Hansel and
| | 00:03 |
Petal website?
We're over here now at the improved
| | 00:07 |
version of Hansel and Petal.
And once again, we're on the Mixed
| | 00:11 |
Arrangements page, where we know there are
at least 24 different bouquets.
| | 00:15 |
So, among the improvements that we've made
up in the navigation and the control of
| | 00:19 |
the carousel, as we scroll down on the
page, the first things you notice is the
| | 00:23 |
pagination is missing, so how am I going
to get to my next set of twelve flowers?
| | 00:29 |
Does that mean it's a very long page?
Well, no, I'm still showing this twelve at
| | 00:34 |
a time but now across the bottom of the
page we have a really large clickable bar
| | 00:37 |
that says, show me twelve more.
In fact when we click it, we simply extend
| | 00:43 |
the length of the page so I add in the
next twelve bouquets.
| | 00:48 |
I have a much better sense of place on
this page, and a much better sense of
| | 00:52 |
depth, how many products are there now.
So, I know which page I'm on.
| | 00:59 |
I know my first set of 12 bouquets.
I see my second set of 12 bouquets, in
| | 01:04 |
fact, I can show a third set of 12
bouquets.
| | 01:08 |
And I've also added functionality now,
where we could quickly take ourselves
| | 01:12 |
right back up to the top of the page.
This is a technique called Infinite
| | 01:17 |
Scroll, it's when we extend the length of
the page we add content to it, so the page
| | 01:21 |
gets longer and longer.
Either as we scroll lower or as we tell
| | 01:27 |
the website to add more content.
Now, there's two ways that we can do
| | 01:31 |
Infinite Scroll.
We can do it continuously or we can do it segmented.
| | 01:37 |
Continuous pages are automatically
extended while I am scrolling.
| | 01:41 |
So, as I scroll lower on the page, It's
been coded, so that it loads more content
| | 01:45 |
in from the server and I never really
quite reach the bottom of the page.
| | 01:51 |
So, sites like Facebook, or Twitter, or
Pinterest, they use this technique.
| | 01:56 |
The farther you scroll, the more content
you see.
| | 01:58 |
You never have to tell it, I want you to
load more.
| | 02:02 |
Segmented pages, on the other hand, they
are extended on demand, and this is what
| | 02:06 |
we're doing on the Hansel and Petal site.
I make sure that you've seen that set of
| | 02:12 |
12 bouquets, I tell you there's more.
We click on a link, and then I show them
| | 02:17 |
to you.
And it's segmented in sets of 12.
| | 02:21 |
There's a green bar across the page that
says: you're in section one, you're in
| | 02:24 |
section two, you're in section three.
So, I'm extending the length of the page
| | 02:29 |
only as I want to see more information.
Now, another key thing to remember about
| | 02:35 |
Infinite Scroll, is that continuous pages,
it's sometimes possible for you to never
| | 02:39 |
reach the footer.
So, a page like Twitter or Pinterest may
| | 02:43 |
not actually have a footer, which means we
can't put important information in the footer.
| | 02:50 |
Now, if you remember on this Hansel and
Petal site, the footer actually does have
| | 02:55 |
some important information.
It's got the social networking and social media.
| | 03:01 |
It's got popular links, and it's got the
sign up for the newsletter.
| | 03:05 |
So, Infinite Scroll in a continuous form
may not have been a good solution for this website.
| | 03:11 |
We had to understand what did people
expect, what did they want their
| | 03:15 |
experience to be and what information do
they need?
| | 03:19 |
Remember we had to understand the context.
So, we chose segmented Infinite Scroll for
| | 03:24 |
a good sense of place to have control over
the display of content on the page.
| | 03:29 |
And to make sure the people still had
access to all of the important content and
| | 03:33 |
features that are located in the footer.
| | 03:37 |
| | Collapse this transcript |
| Finding and discovering| 00:00 |
Let's hop back to the homepage for the
original Hansel and Petal website for a moment.
| | 00:05 |
We've navigated a few levels deeper into
the site and we've looked at arrangements
| | 00:08 |
and mixed arrangements.
And, one of the things that we've been
| | 00:12 |
talking about on each one of the pages
we've seen so far, is the content, the information.
| | 00:18 |
And that's what we're using to expose what
is offered on this website.
| | 00:22 |
It's not just through the navigation, but
on each of these pages we've seen an
| | 00:26 |
increasing amount of detail.
So on the Home page we're looking at the
| | 00:31 |
fact that we have popular flowers, that we
have bouquets and arrangements.
| | 00:36 |
We even sell live plants.
So we're showing content at a very high
| | 00:41 |
level to expose the breadth of the
information.
| | 00:44 |
But as we navigate more deeply into the
site, it starts to get more specific.
| | 00:50 |
We're starting to see specific flowers,
roses, tulips, lilies.
| | 00:54 |
We start to see specific types of
arrangements.
| | 00:56 |
A mixed arrangement of spring pastels, all
white and so on.
| | 01:00 |
And then finally when we get down into our
Mixed Arrangements page and we have
| | 01:04 |
specific bouquets, polka dot pail and
burst of yellow.
| | 01:10 |
This type of hierarchical content
structure is really important for
| | 01:13 |
Findability and Discoverability.
Now, Findability is your ability to
| | 01:18 |
navigate through a website or an
application, or to use search, in order to
| | 01:22 |
find the information that you are looking
for.
| | 01:26 |
You know what you're looking for, you're
trying to find it, you want to know where
| | 01:30 |
it is.
And as long as there is a good scent of
| | 01:33 |
information and as long as the information
architecture is well structured, you can
| | 01:37 |
get to that information.
Discoverability is when the design of a
| | 01:42 |
website or application helps or it leads
us to the information or the functionality
| | 01:46 |
we seek.
Sometimes, we don't know exactly what
| | 01:51 |
we're looking for.
We have a vague idea or sometimes we're
| | 01:54 |
just exploring to see what is there, such
as browsing for bouquets on the Hansel and
| | 01:59 |
Petal site.
I want to be able to discover the
| | 02:03 |
different types of flowers and the
different types of arrangements that are
| | 02:06 |
available for purchase.
It's a combination of findability and
| | 02:10 |
discoverability that helps move people
forward through the site.
| | 02:15 |
We do that through the navigation, and
through the content.
| | 02:18 |
So, I know that I am getting increasingly
closer to the types of bouquets that I am
| | 02:23 |
interested in, by looking at the options,
having a strong sense of place.
| | 02:30 |
The page header tells me where I am and I
know that I'm on the path to the right content.
| | 02:37 |
| | Collapse this transcript |
|
|
3. Detail Page and Mini-CartUnderstanding motivation| 00:00 |
So here we are on the home page of the
original Hansel and Petal website and,
| | 00:03 |
remember we're, shopping for a, set of
bouquets.
| | 00:07 |
And the first one that we're looking for
is, a mixed flower arrangement.
| | 00:11 |
This is going to be the husbands, gift for
is mother, for mothers day and, he's
| | 00:14 |
decided that he is going to buy some mixed
roses for her.
| | 00:19 |
So lets just go ahead and jump into our
Mixed Roses page.
| | 00:22 |
Now, when we land on this Rainbow Rose
Collection page.
| | 00:27 |
The first thing we really want to talk
about is what does this page need to do
| | 00:30 |
for the customer?
What are their expectations of the
| | 00:34 |
information and the functionality that
they're going to see?
| | 00:38 |
What's the context of the user experience?
And what's motivating the person?
| | 00:43 |
In fact, let's talk about that for just a
second.
| | 00:46 |
What is motivation?
Well, we define it as a force that
| | 00:49 |
initiates, directs, and sustains our
behavior.
| | 00:52 |
It's what drives us.
It's what makes us do things.
| | 00:56 |
It makes us behave and it's what makes us
interact.
| | 01:00 |
Now, people can be motivated for a lot of
different reasons and for many different things.
| | 01:05 |
In this particular case, our customer is
motivated to buy a series of gifts for
| | 01:10 |
people that he loves.
And there's going to be certain pieces of
| | 01:15 |
information that he is going to be looking
for, to determine whether or not this is
| | 01:19 |
an appropriate gift.
And as we look at this page, we start to
| | 01:24 |
see not very much, right?
Rainbow Rose Collection, it's 30 long stem
| | 01:30 |
roses, six of each, of each, what?
I assume that these are the colors over
| | 01:36 |
here, but what are those colors?
I get to select a vase clearly.
| | 01:41 |
I've gotta look kind of hard to figure
out, oh there it is, there's the price, it
| | 01:46 |
starts at $29.95.
We're not setting up the information in
| | 01:51 |
this particular page to help people make a
decision.
| | 01:55 |
We're not even talking about interactivity
at this point, we are just talking about
| | 01:59 |
whether or not we can support the behavior
of the visitor to the site.
| | 02:04 |
We're not giving them enough information
or enough of the information that they need.
| | 02:10 |
Let's take a look at how we can change
that.
| | 02:13 |
We'll go over to the improved version of
the website, and once again, we're
| | 02:16 |
going to drop directly into our Mixed
Roses.
| | 02:20 |
And the first thing that we notice, other
than the fact that we have a much better
| | 02:23 |
sense of place.
Is there's the price, nice and big, I can
| | 02:26 |
tell this is a reasonable price.
I'v got more detail, I now know that the
| | 02:31 |
roses are cut and packaged and shipped all
in the same day.
| | 02:36 |
I see the colors, Peach, Blush, Pink, and
Red and White and rose.
| | 02:41 |
I still get to select my vase, they've
even included some Care Instructions here
| | 02:45 |
on the site for how to take care of the
roses once they've arrived.
| | 02:50 |
And they know that I'm shopping for
different types of flower bouquets.
| | 02:54 |
And so they even offer some suggestions at
the bottom of the page for other things I
| | 02:58 |
may be interested in.
Clearly, the amount of content on these
| | 03:03 |
two pages sets a much different context.
We have to understand what the person
| | 03:10 |
expects, what is driving them, and what
they need.
| | 03:13 |
On the original website, we simply failed
to provide a sufficient amount of information.
| | 03:19 |
But on the modified website, we're able to
provide much more information and its much
| | 03:23 |
more likely that this information will
help the customer make a decision.
| | 03:28 |
| | Collapse this transcript |
| Creating smarter experiences| 00:00 |
Here we are on the detail page for the
rainbow rose collection.
| | 00:03 |
On the original hansel and petal website.
And despite the fact that we don't have
| | 00:07 |
very much information here, I think our
customer is going to make the decision
| | 00:11 |
that this rose bouquet is going to be the
right product for him.
| | 00:16 |
But there are still some changes that we
can make to this page to make it more
| | 00:19 |
interactive and more effective.
We've already discussed the content
| | 00:23 |
changes, but one of the things you may
have noticed is that we've got multiple
| | 00:27 |
colors in the flower bouquet, but we've
only got one, large rose image I don't
| | 00:31 |
have the opportunity to see a close up of
these other rose colors to see if I really
| | 00:35 |
like them or not.
So, we want to add some functionality to
| | 00:42 |
the page.
Let's take a look at the improved version here.
| | 00:45 |
Once again, we've got more content, but
now you'll notice I get nice closeup views
| | 00:50 |
of each one of these different rose
colors.
| | 00:54 |
So, I have a much better sense of what the
product is.
| | 00:58 |
Now I'm more comfortable in making that
purchase decision, and this is relatively
| | 01:02 |
simple functionality where we're simply
swapping out the images and people expect this.
| | 01:08 |
Remember, We bring our past experience
with us, we learn from those experiences,
| | 01:12 |
and if this site is consistant with other
past experiences, then we apply what we
| | 01:17 |
have learned.
People shop all over the internet, and in
| | 01:22 |
this case, they expect to be able to see
alternate views.
| | 01:27 |
That was their expectation.
There's a couple other problems on this
| | 01:31 |
page, the original page, unfortunately.
One of them is on the ability to select a vase.
| | 01:37 |
You'll notice that we've got a pair of
check boxes here.
| | 01:40 |
I can choose a round vase or a square
vase, or I could actually choose both of
| | 01:44 |
those vases.
Now we know that's probably not the
| | 01:49 |
intention of this particular retailer.
They want you to choose round or square.
| | 01:55 |
But we've used the wrong form fields and
in this particular case we actually are
| | 01:59 |
making people stop and think.
Oh, do I get both vases?
| | 02:04 |
Or do I have to check just one of these
vases?
| | 02:09 |
Now it might seem like a minor thing but
when we force people to slow down, pause
| | 02:13 |
or even stop to think about what they are
supposed to do, we are interfering with
| | 02:17 |
their interaction.
Another problem that we have here is this
| | 02:24 |
quantity box.
Although it works as we would expect, it's
| | 02:27 |
unfortunately starting at zero.
And if I'm on this page, and I know I'm
| | 02:31 |
interested in this product.
Chances are I want to buy at least one of them.
| | 02:37 |
So the fact that that was set to zero, in
advance means I now have to go in and edit
| | 02:42 |
that value to turn it into 1.
I want one of these bouquets, and that
| | 02:48 |
leads us to a discussion of smart
defaults.
| | 02:52 |
We want to pre-populate forms or inputs
with information that is known or highly
| | 02:57 |
likely selections.
In order to save that person some time.
| | 03:02 |
This default information, however.
It does need to be easy to override or
| | 03:06 |
undo in case the default isn't correct.
We never want to complicate the
| | 03:12 |
experience, we don't want to make people
work harder.
| | 03:16 |
In fact, one of the most important things
that we can do when we're designing highly
| | 03:20 |
interactive experiences is that we find
ways to make the computer work for the person.
| | 03:26 |
We want to reduce the person's effort.
Don't make the person do something that a
| | 03:31 |
computer can do for them.
We want to avoid redundant effort.
| | 03:36 |
Don't ask a person for information the
computer already knows, or which they've
| | 03:40 |
already typed in.
And finally, we want to respect the
| | 03:44 |
person's time.
Don't make them wait for something that
| | 03:47 |
the computer can do in the background, or
don't make them take lots and lots of
| | 03:51 |
steps to do something that could have been
done more quickly.
| | 03:56 |
So, the computer doesn't mind doing this
extra work.
| | 04:00 |
We might as well have the computer do it
for the person.
| | 04:03 |
How can we improve this website?
What can we do to modify it, so that we're
| | 04:08 |
doing more work for the person, and that
we're being smart about the experience?
| | 04:13 |
Well, we've already seen that we can
change the colors.
| | 04:15 |
We've already added content.
But now we're using the correct form fields.
| | 04:21 |
It's a radio button, and it's
pre-selected.
| | 04:23 |
Round may be the most popular.
I don't have to choose it.
| | 04:27 |
I only need to change it if I want
something else.
| | 04:30 |
We've also pre-selected a quantity of one.
I know if you're on this page, you may be
| | 04:34 |
interested in the product.
And if you want to buy it, one is probably
| | 04:38 |
the most common quantity that you're going
to order.
| | 04:41 |
So why make you change a zero to one.
It might seem like these are just minor
| | 04:46 |
things to change, but a whole series of
small changes where we use smart defaults
| | 04:50 |
and do the work for the person, it adds
up, and we save a few seconds here and a
| | 04:55 |
few seconds there, and the whole
experience feels easier and more efficient.
| | 05:03 |
And that means people enjoy the
interactions much more as well.
| | 05:07 |
| | Collapse this transcript |
| Showing information in drawers| 00:00 |
We've struggled to see the colors that are
available in this rose bouquet.
| | 00:04 |
We've paused to try and figure out how we
select a vase shape, and we've taken the
| | 00:08 |
time to change the quantity.
So that we can buy one Rainbow Rose
| | 00:12 |
Collection for the hard to find price of
$29.95.
| | 00:15 |
So, I've decided I want this, and I click
Add To Basket.
| | 00:19 |
Did I get it?
Has this been purchased, or is it in my cart?
| | 00:24 |
It didn't tell me.
I didn't get any feedback.
| | 00:27 |
So now, I really have to stop and think,
did this work, or I might even click the
| | 00:31 |
button multiple times.
And in fact, if you take a look up at the
| | 00:36 |
header you'll notice that Basket no longer
says Basket zero, it was empty before, it
| | 00:40 |
now says Basket one.
And we completely missed that.
| | 00:46 |
There was no solid information that said,
yes, I know you want this product, and you
| | 00:51 |
have added it to your shopping basket.
Feedback is one of the essential
| | 00:56 |
principles of interaction design.
And it's one of the most important things
| | 01:00 |
that we do as interaction designers.
We provide information that acknowledges
| | 01:05 |
the person has interacted.
It provides status and progress
| | 01:09 |
information, that your action was heard,
or something is ongoing.
| | 01:15 |
Without feedback, people may not
understand the results of their interactions.
| | 01:19 |
They may not know that anything has
happened at all.
| | 01:22 |
I clicked Add to Basket and I did not know
whether or not that mixed rose bouquet was
| | 01:27 |
added to my Shopping Basket.
And because of that, I may be less likely
| | 01:32 |
to interact in the future.
And in this particular case, it may mean
| | 01:36 |
that I actually leave this website.
So, how can we improve this page?
| | 01:42 |
Well, let's take a look at the modified
version of the Hansel & Petal website.
| | 01:46 |
So just a quick review.
We've got the ability now to see close ups
| | 01:49 |
of all of the different colors.
We've added content, the price is much
| | 01:53 |
easier to find.
I can select a Round or a Square vase.
| | 01:58 |
We're using the correct radio buttons
here.
| | 02:00 |
I can quickly add the basket without
having to edit the quantity because it
| | 02:04 |
defaulted smartly to number one.
And you'll also notice we've got some
| | 02:09 |
feedback here, on the button, a rollover
state.
| | 02:11 |
So, yes, this button is active.
Let's go ahead and buy our Mixed Rose
| | 02:15 |
Bouquet and, hey, now that is feedback.
Your flowers are in the basket.
| | 02:21 |
One rainbow rose collection.
In fact, it's even giving me additional
| | 02:24 |
meaningful information, such as my
subtotal and my estimated shipping and handling.
| | 02:29 |
This is feedback that's hard to miss.
Not only is it acknowledging my
| | 02:33 |
interaction, but it's providing additional
information that increases the value of
| | 02:39 |
this feedback.
And there's one more little piece here.
| | 02:44 |
Notice that the basket icon at the top now
indicates that there are flowers in your basket.
| | 02:49 |
And we've also got the information that
there's one item and your subtotal is 29.95.
| | 02:56 |
So not only did we have a nice big drawer
slide into view that says, this item's
| | 03:00 |
been added to your cart.
We also have persistent feedback in the
| | 03:04 |
header that says how many items are in
your basket and what's your current item subtotal.
| | 03:10 |
Now this is feedback that is valuable.
| | 03:12 |
| | Collapse this transcript |
|
|
4. Content PagesUsing tooltips| 00:00 |
We have successfully added our Rainbow
Rose Collection to our shopping basket.
| | 00:05 |
We are halfway through our customer
scenario.
| | 00:08 |
We have picked one boquet, the husband's
mother's boquet.
| | 00:11 |
We still have one more to go.
But while we were looking at this Rainbow
| | 00:15 |
Rose Collection webpage, we noticed at the
bottom that they were giving credit to
| | 00:18 |
their designer.
It's like, hey, these brilliant colors
| | 00:21 |
were selected by Debra Wisdom, so who is
Debra and maybe what other arrangements
| | 00:25 |
has she done?
Maybe there is something that she's done
| | 00:28 |
that I also like and that could be the
next bouquet that I purchase.
| | 00:32 |
So, let's go ahead and click through to
find out what we've got.
| | 00:35 |
Here we are, Our Favorite Arrangements
From Our Talented Designers.
| | 00:39 |
Now, unfortunately, one of the things
about this page.
| | 00:42 |
And we've already discussed, Is that it
doesn't provide me with a sense of place.
| | 00:47 |
I have no idea which section of the site
this page is located in.
| | 00:51 |
There's no indicator in the navigation
bar, and there's no breadcrumb.
| | 00:55 |
So, if there's information on this page
which I think is interesting or important,
| | 00:59 |
and I navigate away from this page, I
might not be able to find it again.
| | 01:04 |
Now, I came over here because i wanted to
see more of what Debra Wisdom was doing,
| | 01:08 |
and so I look for her name, and there she
is.
| | 01:11 |
But I'm not entirely sure what I can click
or what information is available to me.
| | 01:16 |
And as I move the mouse around, I can see
well the images at least appear to be
| | 01:20 |
clickable but.
Oh, I didn't expect that.
| | 01:24 |
If I roll over her name, there's a tool
tip and it gives me information about her.
| | 01:28 |
In fact, I can get information about all
of the designers just by rolling my mouse
| | 01:33 |
over their name.
Now, there was no visual cue to tell me
| | 01:37 |
that that information was available to me.
So, I kind of had to discover it by accident.
| | 01:44 |
But I'm glad I did.
And it's using a technique that is called
| | 01:48 |
a Tool Tip.
And Tool Tips are a common way of
| | 01:51 |
presenting information that is
contextually relevant.
| | 01:56 |
Tool Tips work by presenting information
in layers.
| | 01:59 |
This is additional relevant content or
information that is displayed in a way
| | 02:03 |
with visual cues that makes it appear like
it is above the original page.
| | 02:09 |
It suggests that there is depth.
The fact that we layer up information also
| | 02:15 |
provides us some time cues.
If we close layers and we move down
| | 02:20 |
through a stack of layers, it's analogous
to moving back in time.
| | 02:25 |
So, just as we use the back button in our
browser to return to previous pages, we
| | 02:30 |
will close layers in order to move down to
a prior page as well.
| | 02:38 |
So what can we do to improve this page?
Well, we know we need to add the sense of
| | 02:42 |
place up here at the top, but we also want
to give people visual cues for what is clickable.
| | 02:48 |
Let's go head over and take a look at the
Debra Wisdom link, and here we go, Our
| | 02:52 |
Favorite Arrangements.
And, oh, now we know that it's in the Our
| | 02:56 |
Designers section.
So, we are just one click deeper into the site.
| | 03:02 |
Here, now, we have very clear cues.
So, each one of our designer names has a
| | 03:06 |
dashed underline, and there's a little
question mark icon.
| | 03:10 |
These two visual cues draw my attention.
They say hey there is something here.
| | 03:16 |
You can click on this, or you can rollover
this, and so people don't have to
| | 03:20 |
accidentally discover that there is
biography information in Tool Tips for
| | 03:24 |
each one of these designers.
| | 03:27 |
| | Collapse this transcript |
| Working with lightboxes| 00:00 |
Here we are back on the Our Designers page
on the original Hansel and Petal website.
| | 00:05 |
And one of the things that we noticed, as
we were moving our mouse around, is that
| | 00:08 |
these images appear to be clickable.
I don't know what's on the other side, so
| | 00:13 |
let's find out.
I get a nice, big view of Brenda's Lilac
| | 00:18 |
bouquet, so I can take a look at some of
the others, not bad.
| | 00:23 |
These Irises are pretty.
So one of the things that they're doing
| | 00:26 |
well here, at least, is that they are
showing us truly larger images.
| | 00:30 |
People really appreciate that.
But unfortunately, one of the problems
| | 00:34 |
that they have here is that every time I
open up one of these images.
| | 00:39 |
I then have to close it In order to go see
the next image.
| | 00:43 |
So I find myself going open, close, open,
close, open, close.
| | 00:49 |
This type of interaction is what has been
nicknamed Pogo-Sticking.
| | 00:53 |
Because we're forcing a person to move
back and forth between pages or up and
| | 00:57 |
down among layers in order to view
additional content.
| | 01:02 |
Now I know from that page that there are
eight designers and they each have a bouquet.
| | 01:07 |
And if I want to see each one of those
bouquets, I have to open and close open,
| | 01:12 |
close, open, close, and I pogo-stick.
I go up and down in order to see all of
| | 01:18 |
this content.
Now clearly, we can make this a much more
| | 01:21 |
efficient experience.
Let's take a look at how we've improved
| | 01:26 |
this site.
So we'll come over to the modified version.
| | 01:30 |
One again, we know that we can get
information in tool tips about the authors.
| | 01:34 |
But now, I'm getting additional feedback.
Look, I mouse over this image, and I get a
| | 01:37 |
little bit of a description.
It says, The scent of lilacs and the soft
| | 01:41 |
purples are a sure sign of Spring.
I get a highlight that tells me I can
| | 01:44 |
click on this, and I do.
Now this is a much better lightbox.
| | 01:49 |
There's a few difference that we see here.
First off is that you'll notice that
| | 01:53 |
there's this gray layer that is dimming
the original page so that it draws more
| | 01:57 |
attention to the flower image itself.
We have a darker box that is framing the
| | 02:03 |
flower image, so we have a much greater
visual separation between the enlarged
| | 02:07 |
image and the original page content.
We have additional information that has
| | 02:13 |
been added about the bouquet itself.
We sill have the Close icon.
| | 02:17 |
We also have the ability to hide this
information and see just the photo.
| | 02:22 |
But the key thing here that we've added in
order to prevent pogo-sticking, is we now
| | 02:27 |
have controls to advance to the Next and
Previous.
| | 02:32 |
And since Brenda is the first designer,
one of eight.
| | 02:36 |
There are no designers in the list ahead
of her, so the previous indicators are
| | 02:40 |
grayed out.
But I can click Next and I can see Eric's
| | 02:44 |
or I can click the arrow and I can see
Audry Cecilia's.
| | 02:48 |
The use of both text links for next and
previous and the arrows that go back and
| | 02:52 |
forth is a technique called Multiple
Signals.
| | 02:57 |
And we can do this in two different ways.
We can provide multiple cues for
| | 03:01 |
interaction, such as color, form, and
shape.
| | 03:05 |
Like yellow arrows that point to the right
that draw people's attention and say hey,
| | 03:09 |
you're going to go to the next step.
Or, we can use interactions that occur
| | 03:14 |
from multiple points.
Such as in our light box where we've got a
| | 03:18 |
text link and we have an arrow.
Both of them do the same thing, so we can
| | 03:23 |
choose at which point we want to interact.
So we've made the Our Designers page
| | 03:29 |
better, and more interactive, by making it
much easier to navigate among all of the
| | 03:34 |
images for all of the designers.
We've also supplemented the content,
| | 03:40 |
there's now more information, and we've
given more than one way to navigate.
| | 03:45 |
I no longer have to open one image, close
it, and then open another.
| | 03:50 |
And finally, we've made some visual
improvements.
| | 03:53 |
So that we really drawn attention to the
imagery itself by using that gray layer,
| | 03:58 |
and the nice dark border around the image.
People know exactly where to look.
| | 04:03 |
They know exactly what they are reading
about.
| | 04:05 |
And they know exactly how to get to the
next piece of information.
| | 04:08 |
| | Collapse this transcript |
| Working with panes and panels| 00:00 |
We still have one bouquet that we need to
purchase, but we're not quite sure what we
| | 00:03 |
want to get.
Now earlier when we were navigating
| | 00:06 |
through the site, we noticed that they
sell orchids.
| | 00:09 |
But you know I'm not so sure that an
orchid is a good idea, I'm worried that it
| | 00:12 |
might be a little too much to care for.
So let's see if we've got some caring
| | 00:17 |
information, there we go, Caring for
Orchids.
| | 00:20 |
Let's see if this is going to be a problem
or not.
| | 00:23 |
So here we are.
We've got some information here about
| | 00:25 |
Light, Water, Fertilizer, Air Movement.
Wow, there's a lot of information in here,
| | 00:32 |
and these are a lot of topics, and this is
a really tiny little window for me to read
| | 00:38 |
all of this stuff.
And, you know, I think this is probably
| | 00:43 |
just going to be a little too much effort
for me to try and figure out if I want to
| | 00:46 |
buy an orchid or not.
There's gotta be a better way to present
| | 00:50 |
this information.
Well, yeah, let's take a look at the
| | 00:52 |
modified version of the site and see what
we did to improve this design.
| | 00:57 |
We've got the same information, but now
it's presented in a very different manner.
| | 01:03 |
So each one of the same sections, we've
got information about Light, and Water,
| | 01:07 |
and Fertilizer.
But we're able now to see all of the
| | 01:11 |
information at once.
I don't have to scroll in that tiny little
| | 01:15 |
window, and I can open multiple panels at
the same time.
| | 01:21 |
The original technique was using Accordion
Panes, and the new technique is using
| | 01:25 |
Collapsable Panels.
The difference between them is an
| | 01:29 |
accordion pane can display one section of
information at a time.
| | 01:34 |
But a collapsible panel can be opened and
closed independently.
| | 01:37 |
So I can open more than one panel at a
time, and collapsible panels have
| | 01:42 |
independent heights.
So some may have more content and some may
| | 01:46 |
have less content.
We've already seen drawers they slide into
| | 01:51 |
view and we're including them here because
panels and accordions often have drawer
| | 01:55 |
like behavior.
In fact, let's go back and look here at
| | 01:59 |
the modified care tips page.
This is the improved version.
| | 02:03 |
And you'll notice that these panels are
actually sliding up and down and it's a
| | 02:07 |
little bit like opening and closing a
drawer.
| | 02:11 |
So on the original site, we had accordion
panes open one at a time.
| | 02:16 |
It's a fixed height area and regardless of
the amount of content, if there's more
| | 02:20 |
than can be seen, then I've got this
internal scroll bar.
| | 02:25 |
And I have to work for my content.
But on the improved page, now I can open
| | 02:30 |
these panels, I can see all of the
content, I can open them as needed.
| | 02:35 |
In fact, I can open all of them and create
a very long page.
| | 02:41 |
But this is a much better reading
experience.
| | 02:43 |
I can scan through this, I can answer my
questions much more effectively.
| | 02:48 |
| | Collapse this transcript |
| Designing for context| 00:00 |
There are a few other things happening on
this page that make it a less than ideal experience.
| | 00:05 |
Although all of the information about
caring for orchids is here.
| | 00:09 |
There's a few other things that I just
don't understand.
| | 00:12 |
Like, I don't know if I can actually buy
these orchids or not.
| | 00:16 |
Or, if these are just different types of
orchids, that this is information on how
| | 00:19 |
to care for them.
And then there's this odd little floating
| | 00:23 |
Download link off to the side to the page,
and I'm not entirely sure what I'm going
| | 00:26 |
to be downloading.
Am I getting a copy of this information,
| | 00:31 |
or I'm getting a copy of these images.
I don't know.
| | 00:36 |
So we need to clarify this.
We're making people work too hard to
| | 00:40 |
understand the information on this page,
and to understand what they can do.
| | 00:47 |
Cognitive Load is a term that we use to
describe when we make people work to
| | 00:51 |
understand information, make decisions, or
solve problems.
| | 00:56 |
In fact, we make them work too hard.
Especially when the computer or the design
| | 01:01 |
has the opportunity to do the work for the
person.
| | 01:04 |
Closely related to the idea of cognitive
load is cognitive friction.
| | 01:08 |
This occurs when we have to put in more
effort than we should and it slows us down.
| | 01:15 |
This page is a really good example of
cognitive load and cognitive friction.
| | 01:20 |
I can read all of the content, but I have
to do a lot of scrolling to see it.
| | 01:25 |
I can guess that I can buy these orchids.
But I have to click through to find out.
| | 01:30 |
I can guess what I'm going to download.
But I actually have to click the link to
| | 01:35 |
see if my guess is accurate.
We're forcing people to think too much
| | 01:39 |
about the experience, so how do we improve
this?
| | 01:42 |
Well, let's take a look at the modified
site and see what we're able to do.
| | 01:46 |
Once again, we're establishing a much
better sense of place.
| | 01:49 |
I know I am in the Care Tips section.
We've got a good bread crumb, and we've
| | 01:53 |
got the page header.
But now notice I have Print this Page and
| | 01:58 |
Download care instructions as a PDF.
Now I know exactly what's going to happen here.
| | 02:05 |
We understand in this case, the context of
the experience.
| | 02:09 |
This is the type of information that
people may need to take with them, not
| | 02:13 |
just come to the website and look up.
If you're buying the orchid as a gift for
| | 02:18 |
someone, you may want to print this out
and give it to them with the orchid.
| | 02:23 |
So they know how to care for it.
I no longer need to guess if these orchids
| | 02:27 |
are for sale.
The prices are indicated, so I know I can
| | 02:31 |
buy it, and how much it's going to cost.
I'm able to open and close all of the information.
| | 02:37 |
Making for much better reading experience
or I can simply open the one section that
| | 02:42 |
I'm most interested in.
Such as do I live in a cold environment
| | 02:47 |
that is not good for orchids?
So I can quickly get to that one piece of
| | 02:52 |
information or see all of it.
This design, although these changes are
| | 02:57 |
relatively subtle.
Reduce the cognitive load and the
| | 03:00 |
cognitive effort necessary to understand
the content on this page.
| | 03:04 |
And the fact that we understand the
context of the experience that I may need
| | 03:07 |
to take this information with me.
Has influenced the links that we are
| | 03:12 |
presenting, as well as the presentation of
the content.
| | 03:16 |
This is simply a much more convenient page
for people to interact with.
| | 03:21 |
| | Collapse this transcript |
|
|
5. Build-a-BouquetUsing Build-a-Bouquet (original)| 00:00 |
We are just about finished with our
customer scenario.
| | 00:03 |
We have one more product that we need to
purchase, and you remember that the
| | 00:06 |
husband has decided that orchids are
probably a little too much to care for, so
| | 00:10 |
he's going to opt for creating a custom
bouquet.
| | 00:14 |
Something that is special and made just by
him.
| | 00:16 |
So we're going to click on the original
website.
| | 00:19 |
Now, remember this is the website that is
having some problems and which we're
| | 00:22 |
trying to fix.
So, we're going to come into this Build a
| | 00:25 |
Bouquet functionality and check out what
we have here.
| | 00:27 |
I see that I get to choose the flowers
that I want.
| | 00:30 |
I get to choose colors if there are colors
available.
| | 00:33 |
So, this is kind of nice, I get to pick my
own bouquet.
| | 00:36 |
So, let's see.
We're going to add some Calla Lilies
| | 00:38 |
maybe, how about a bunch of Irises here.
We'll add some Gerbera Daisies, Lilies,
| | 00:43 |
those are always really nice, so I'll add
some lilies as well.
| | 00:47 |
And how about tulips?
It's a spring time, that's very popular
| | 00:50 |
right now.
And for some of these, oh, look, I do get
| | 00:53 |
to choose colors, so let's get a purple
Calla.
| | 00:57 |
We'll get some nice warm yellow.
We'll get some Lilies, Let's stay with pink.
| | 01:02 |
And what do you say, for the Tulips, we'll
go ahead and get some white Tulips.
| | 01:07 |
All right,so I've set up a bouquet here.
That was pretty straight forward I
| | 01:11 |
suppose, but, you know, there are some
issues with this interaction.
| | 01:15 |
For example, we have all of these images
at the top of the page that are probably
| | 01:18 |
the flowers that I can choose from.
But I was kind of tempted to click on
| | 01:23 |
those and say, you know, I want the
Sunflower or I want the Daffodil or I want
| | 01:27 |
the rose.
And I'm not sure what some of these
| | 01:31 |
flowers are, so I don't know what this one
is.
| | 01:34 |
I'm not quite sure what this one is, and I
don't know if these flowers are pictures
| | 01:38 |
of what I can actually choose for the
bouquet.
| | 01:43 |
We've got a little bit of a problem here
that we can address with some content.
| | 01:47 |
And in fact, it's going to rely on the
Gestalt principles to help us fix that.
| | 01:52 |
You remember from the first Interaction
Design Fundamentals course, when we talked
| | 01:55 |
about the Gestalt principles.
That they are a way to help us make sense
| | 01:59 |
of these sensory world around us.
And in fact, there were several principles
| | 02:04 |
that were very important.
Two in particular come into play when
| | 02:07 |
we're talking about interaction design.
The first is the Gestalt Principle of Proximity.
| | 02:13 |
Objects that are near one another in space
or time are perceived as belonging together.
| | 02:17 |
So, on the right side we see groups of
four elements even though both of these
| | 02:21 |
images have the exact same numbers of
circles.
| | 02:25 |
A second principle, which is very common
in interactive design is dealing with similarity.
| | 02:30 |
Objects with similar attributes such as
shape, color, size, or brightness are
| | 02:34 |
perceived as belonging together.
So we see the green circles as forming one
| | 02:39 |
group, and the squares as another, and the
light blue circles as a third group.
| | 02:45 |
Now, we did discuss some additional
Gestalt Principles, including closure,
| | 02:48 |
common fate, continuity, and symmetry.
If you're interested in learning about
| | 02:52 |
those, I suggest you check out the
Interaction Design Fundamentals course.
| | 02:56 |
So, what do the Gestalt Principles tell us
about this particular page?
| | 03:01 |
Well, the thumbnails are similar and they
are near one another.
| | 03:04 |
They are in proximity to one another, so
they are perceived as a group.
| | 03:08 |
That's not surprising.
The form field are similar to one another
| | 03:11 |
and they are near one another so they are
perceived as a second group.
| | 03:16 |
However, the problem is that we want to be
able to pair the Calla Lily's image with
| | 03:21 |
the Calla Lily label and the Calla Lilly
controls, so what we have are two groups
| | 03:25 |
that actually make sense, perceptually,
but they do not make sense meaningfully.
| | 03:33 |
So, one of the things that we need to fix,
is how do we associate the image of the
| | 03:37 |
flower, with the flower name, and with the
form fields for that flower.
| | 03:42 |
We'll take a look at some of the
improvements in the next movie.
| | 03:46 |
Now let's go ahead.
We're going to buy this particular bouquet.
| | 03:50 |
And we click through.
So, I'm not entirely sure why I had to
| | 03:53 |
click through to a second step for a page
that is just showing me everything I've
| | 03:57 |
just selected, other than to say, oh, it's
a $60 bouquet.
| | 04:02 |
What we have here is another great example
of how just one click may be perceived as
| | 04:07 |
too much.
Remember when we talked about click depth.
| | 04:11 |
Why couldn't we have seen the total number
of flowers and the total price all on the
| | 04:15 |
previous page.
Why did we have to click through for one
| | 04:18 |
additional step?
Just to see a list of what we selected,
| | 04:21 |
and the opportunity to add that to my
shopping cart.
| | 04:26 |
Additionally, we're including items in
this list which I did not select.
| | 04:31 |
So, I have no Daisies, no Lilac, no roses,
etc.
| | 04:34 |
there are elements in this list with zero.
And for example, roses has no color
| | 04:38 |
selected because I have no roses.
This is additional content that just
| | 04:42 |
complicates the experience.
It makes it harder for people to see which
| | 04:46 |
are the flowers I selected, the colors I
selected, and the number of each type of
| | 04:50 |
flower that I selected.
This is easily, in experience, that we can
| | 04:55 |
improve, but lets go ahead and just add
this custom bouquets our basket.
| | 05:00 |
Oh, and remember this is the original
site, the one that is having problems, I
| | 05:03 |
just clicked add to basket but I need to
scroll back up to the top of the page to
| | 05:07 |
check to make sure the basket now has two
items in it.
| | 05:12 |
Remember, we're not getting appropriate
feedback from this website and that's
| | 05:15 |
something that we've already fixed.
| | 05:17 |
| | Collapse this transcript |
| Using Build-a-Bouquet (version 1)| 00:00 |
So let's take a look at the modified
version of the Hansel and Petal site.
| | 00:04 |
And see what improvements we've been able
to make to the Build a Bouquet functionality.
| | 00:08 |
Remember, we're trying to build a custom
bouquet as a gift for mother's day.
| | 00:12 |
So here we are on the new Build a Bouquet,
and you'll notice right away that one of
| | 00:16 |
the changes that we've made.
Is that each of the flowers is now
| | 00:20 |
associated with its name, its price, its
color, and its quantity.
| | 00:25 |
So we have now been able to create new
groups.
| | 00:29 |
Remember when we spoke about the Gestalt
principles just a moment ago, that we said
| | 00:33 |
we want the image to be associated with
the flower name.
| | 00:37 |
So although the images are themselves
similar we are now using proximity to our advantage.
| | 00:43 |
Each image is located near the name, the
price and the color and the quantity.
| | 00:48 |
So we get the perception that this is a
group and it makes it much easier for us
| | 00:52 |
to understand now what I am seeing.
So let's go ahead and build our bouquet again.
| | 00:59 |
I think we wanted to get the purple Calla
Lilies.
| | 01:02 |
Oh, now this is another change that we've
made.
| | 01:05 |
We are now able to actually see the color
of the flower when we change the color in
| | 01:08 |
the selector, and we're going to go ahead
and get ourselves four Calla Lilies.
| | 01:13 |
We're going to order six Irises and we're
going to buy some Gerbera Daisies, let's
| | 01:17 |
get the yellow Gerbera Daisies here, and
we'll get four of those.
| | 01:22 |
Once again, we have a color change.
This is very, very nice feedback for customers.
| | 01:27 |
They're able to see exactly what it is
that they are buying.
| | 01:31 |
They see the color, because we're changing
it dynamically.
| | 01:33 |
And we're going to go ahead and get six
White Tulips here.
| | 01:36 |
So, this is great.
I can see the image of the flower, the
| | 01:39 |
images associated with the name.
I can change the color and the quantity
| | 01:43 |
right here.
I even have a running total at the bottom
| | 01:46 |
of the page.
I don't have to go to a second page in
| | 01:49 |
order to see what my bouquet contains, and
what the price of that bouquet is.
| | 01:55 |
We've been able to reduce the cognitive
friction and the memory load on this
| | 01:59 |
experience by making sure all of the
information.
| | 02:04 |
Using the Gestalt Principle of Proximity,
is clearly associated in individual groups.
| | 02:10 |
Unfortunately, there is one issue
remaining with this, and that is if I want
| | 02:14 |
to review what I have made for my bouquet.
I still have to scroll up through the
| | 02:19 |
page, and I still have to look for the
flowers that have a quantity that is not zero.
| | 02:25 |
I ordered Calla Lilies, but not
Sunflowers.
| | 02:27 |
So, we still do have a little bit of
cognitive friction going on here.
| | 02:32 |
This is something that we may be able to
improve.
| | 02:34 |
But let's go ahead and just add this
custom bouquet to our basket.
| | 02:38 |
Oh, and there we go, once again, the great
feedback that says, you've added the
| | 02:42 |
Rainbow Rose Collection.
And you now you've added the
| | 02:45 |
build-a-bouquet and we have a new running
Subtotal.
| | 02:48 |
| | Collapse this transcript |
| Using Build-a-Bouquet (version 2)| 00:00 |
We're going to take a look at a third
version of Build a Bouquet.
| | 00:03 |
Even though we've already created an
improved version, there were still a few
| | 00:07 |
little issues that we wanted to try to
address.
| | 00:10 |
So let's take a look at how we've been
able to reduce the cognitive friction even more.
| | 00:15 |
So here we are, Build a Bouquet number
three.
| | 00:17 |
This is going to be a different way of
interacting with the information.
| | 00:21 |
So, we know that we like the Calla Lilies,
so I'm going to select those, I like
| | 00:25 |
Irises, I like Gerbera Daisies.
We know we like the Lilies and we like the Tulips.
| | 00:32 |
Notice what we've done here now is I have
this array of flowers.
| | 00:36 |
Choose the flowers for your bouquet, step
number one.
| | 00:39 |
And as soon as I click on a flower it
reduces that image size, and it shows me a checkmark.
| | 00:44 |
This is great feedback.
It says you have selected this flower, but
| | 00:47 |
it does more than that.
It also creates a running list of all of
| | 00:51 |
the flowers that I have placed in my
custom bouquet, so now we've reduced that
| | 00:55 |
cognitive friction.
We've been able to say, these are the
| | 01:00 |
flowers that you've selected.
We're using multiple signals here as well.
| | 01:05 |
On the right-hand side, we have our list
of flowers.
| | 01:08 |
And on the left-hand side, we have check
marks and resized images that say, this
| | 01:13 |
flower has been selected.
We're also taking advantage of a method
| | 01:18 |
called Direct Manipulation.
Direct manipulation is when we allow
| | 01:22 |
people to interact directly with interface
objects, such as clicking the flower and
| | 01:27 |
having it appear in the list.
Or dragging and dropping photos from our
| | 01:32 |
list into an album.
We do this rather than interacting
| | 01:36 |
indirectly which has happened in the
previous Build a Bouquet functionality.
| | 01:41 |
This is when we perform an action in one
place such as choosing a flower that
| | 01:45 |
causes it to get listed in another place
or to appear on a second page.
| | 01:51 |
So with Direct Manipulation, people feel
like they are selecting the information directly.
| | 01:57 |
Not like they are clicking in one place to
make an action appear somewhere else.
| | 02:02 |
So, direct manipulation is making this a
much easier way for us to build our bouquet.
| | 02:07 |
And we've got a compiled list now that is
much, much easier for us to understand
| | 02:11 |
these are the flowers I've selected.
So, let's go ahead and we'll modify our bouquet.
| | 02:17 |
Notice we also have instantaneous
recognition of the changes.
| | 02:22 |
So I changed color from Blush to Purple,
and it swapped out the image, showed me
| | 02:27 |
right away.
I put in four, but let's say I want six of
| | 02:31 |
these and my price instantly changes.
So I know I wanted four of those let's go
| | 02:36 |
ahead and get these.
We're going to get six of the Irises.
| | 02:40 |
We're go ahead, let's just get four of the
Gerbera Daisies, but I think we like the
| | 02:43 |
yellow of those.
These Lilies, let's go ahead and get four
| | 02:46 |
of those.
And then for the tulips, let's go ahead
| | 02:49 |
and get six, and I think we like the White
on those.
| | 02:53 |
Now let's just quickly review the page
here, so that we see what other flowers if
| | 02:56 |
there's anything else we wanted to add.
And, hey, look, something else that you'll
| | 03:02 |
notice is that this step number two,
Select Color and Quantity, actually locked
| | 03:05 |
up to the top of the screen.
So that I am able to scroll through all of
| | 03:10 |
the flowers that are available to me.
While I see my current bouquet, and it
| | 03:15 |
remains visible on screen, we've reduced
the cognitive friction in the memory load again.
| | 03:21 |
We don't have to remember which flowers
have already been selected.
| | 03:26 |
They're shown to us right there on the
side of the screen.
| | 03:28 |
And the design makes sure that they are
always visible even when I am scrolling
| | 03:33 |
the main list of flowers.
So that's a very nice technique to use,
| | 03:37 |
and it is doing the work for the person.
Remember, we're making the person efficient.
| | 03:44 |
So let's go ahead and add this bouquet to
our basket now, and there we go.
| | 03:49 |
My flowers are in the basket, my original
Rainbow Rose Collection, my custom
| | 03:53 |
Build-a-Bouquet, and once again, my
running Subtotal.
| | 03:58 |
| | Collapse this transcript |
| Optimizing interaction designs| 00:00 |
In the Interaction Design Fundamentals
course, we discuss the three types of models.
| | 00:05 |
The first is a Mental Model and this the
way a person thinks that something should work.
| | 00:10 |
This is the expectation and the experience
that they bring with them.
| | 00:14 |
I have an idea about how it should work to
build a custom bouquet.
| | 00:20 |
The Conceptual Model is the way the design
and development team approaches the functionality.
| | 00:26 |
In other words, how they design it to
work.
| | 00:29 |
How is this actually going to happen in
the interface, and then the System Model
| | 00:33 |
is the way it actually works we could say
under the hood.
| | 00:37 |
This is behind the scenes, the data model,
the JavaScript, the functionality, whether
| | 00:41 |
or not things are updating in real time.
Is it one step or two steps?
| | 00:45 |
Remember now, the Mental Model is what the
customer or the visitor brings to the
| | 00:49 |
site, the Conceptual Model is how it was
designed to work, and the System Model is
| | 00:53 |
how it works technically behind the
scenes.
| | 00:57 |
We don't want people to be exposed to the
System Model especially, if it's confusing.
| | 01:04 |
We want to make sure that we are designing
for the way that people think something
| | 01:08 |
should work.
That way it feels simple, easy, and intuitive.
| | 01:13 |
So, with Mental Models in mind, let's take
a look at the three sites and compare the
| | 01:17 |
changes that we made.
The Mental Model coming into
| | 01:21 |
Build-a-Bouquet is that I am going to see
an array of flowers, which I do.
| | 01:26 |
I'm going to be able to choose the ones
that I want, which I can.
| | 01:30 |
The number that I want, which I can, and
the color that I want.
| | 01:33 |
So, it works in the sense that it's doing
the things that people think it should do,
| | 01:37 |
but it's not doing it in the most
efficient way possible, and in fact, this
| | 01:41 |
may not be the way they expect it to work.
The functionality is here, we see the
| | 01:48 |
System Model behind the scenes The
Conceptual Model is pick the flower
| | 01:52 |
quantity and pick the flower color.
But it just doesn't quite match the Mental Model.
| | 01:58 |
Remember when we talked about the Gestalt
principles of proximity and similarity, we
| | 02:02 |
just don't have the information grouped
the right way.
| | 02:06 |
So, we made some improvements to the site.
We regrouped the information, so that
| | 02:11 |
people can say, this is the flower that I
want.
| | 02:14 |
We made it much easier for them to
understand exactly what they were selecting.
| | 02:18 |
We are closer to the Mental Model here.
I want this flower.
| | 02:22 |
I want this color.
I want this quantity.
| | 02:24 |
And at the bottom of the page, we're
showing them a flower total, and a total price.
| | 02:29 |
This is definitely closer to the Mental
Model, but there was still that one problem.
| | 02:33 |
If I'm building a custom bouquet in
person, I'm probably walking along and I'm
| | 02:37 |
literally picking up the flowers that I
want and putting them together in bunch in
| | 02:42 |
my hand.
I see the flowers that I have selected together.
| | 02:47 |
That's the mental model, so we made a
third version of build a bouquet where we
| | 02:52 |
tried to create that type of an
experience.
| | 02:56 |
Here are all of the flowers you can
include in your bouquet, here are the
| | 03:00 |
flowers you have included in your bouquet.
And this version now using Gestalt
| | 03:06 |
proximity and the similarity and using
Mental Models of I have gathered these
| | 03:10 |
flowers into a bunch.
We now have an experience that is much
| | 03:15 |
closer to what people would expect.
Now, all three of these versions of Build
| | 03:20 |
a Bouquet were functional.
You could build and purchase a bouquet in
| | 03:24 |
any one of them.
And there were some design decisions that
| | 03:28 |
we had to make along the way.
There were some trade-offs.
| | 03:32 |
This particular version of Build A
Bouquet, has very, very strong
| | 03:36 |
associations between the imagery, the
name, the color and the quantity.
| | 03:41 |
And there's only one instance of it on the
screen.
| | 03:44 |
So, that's very, very clean.
This version has flowers where you can
| | 03:48 |
select and flowers you have selected.
But there are two pictures of Calla
| | 03:52 |
Lilies, two names of Calla Lilies and two
different prices here.
| | 03:58 |
This still works because these are clearly
the flowers I have selected.
| | 04:02 |
But we made a trade-off.
We decided that showing this information
| | 04:06 |
together was more valuable than having
duplicate information on the screen.
| | 04:12 |
These are design decisions that we have to
make all the time.
| | 04:16 |
The customer scenario, understanding the
context, and understanding the interaction
| | 04:20 |
design principles, all help us understand
what are the benefits and what are the
| | 04:24 |
potential weaknesses in different design
decisions.
| | 04:29 |
| | Collapse this transcript |
|
|
6. Cart and CheckoutWorking with design patterns| 00:00 |
So here we are on the original Hansel and
Petal website, and we've created, with a
| | 00:04 |
little bit of difficulty, a Custom
Bouquet, and we've added it to our Cart.
| | 00:09 |
At least we have the indicator up here.
Let's go ahead to the Cart page and make
| | 00:12 |
sure that everything is there.
Yes, we've got our Rainbow Rose
| | 00:16 |
Collection, and yes, we've got our Custom
Bouquet.
| | 00:19 |
Now, you may notice that this cart is just
the minimal amount of information.
| | 00:25 |
Well, everything that we need is here, but
it's not quite what people expect to be here.
| | 00:31 |
Remember we have mental models and prior
experience things like I would like to see
| | 00:35 |
an image of the product that I purchased
here.
| | 00:39 |
I'd also like maybe a little bit more
information, such as what are the shipping
| | 00:43 |
fees, or might I pay tax?
And, from this Shopping Basket page how do
| | 00:48 |
I go back to shopping?
Is it just up to me to navigate, or can I
| | 00:52 |
return to the previous product, or can I
edit my custom bouquet?
| | 00:57 |
Things like that, that may be part of
people's expectations are not present.
| | 01:02 |
One of the things that can help us make
better design decisions are Design patterns.
| | 01:08 |
Design patterns are optimal solutions to
recurring problems.
| | 01:12 |
In other words we do it the same way
whenever we face the same problem, and a
| | 01:16 |
shopping cart is a great example of a
design pattern.
| | 01:21 |
There are things that people expect to be
there.
| | 01:23 |
Conventions and standards and guidelines
have been written for how to make a more
| | 01:27 |
effective Shopping Cart.
So, we could go and look at Design
| | 01:31 |
Patterns for what is a good shopping cart
experience.
| | 01:35 |
What information and functionality needs
to be here.
| | 01:39 |
But we have to be careful when were using
Design patterns, because, there are two
| | 01:42 |
other types that we may encounter.
One of them is an Anti-pattern.
| | 01:46 |
These are commonly reinvented or reused
patterns, but they're not optimal solutions.
| | 01:53 |
In fact, they may be inefficient or may
even lead people to make errors.
| | 01:58 |
The problem with an anti-pattern is, we've
just copied it from somewhere else without
| | 02:01 |
really thinking about whether or not it's
a good solution.
| | 02:05 |
So don't just copy what you see somewhere
else, you need to think about, is this an
| | 02:09 |
appropriate solution for the problem that
I am facing?
| | 02:14 |
And then a third type of pattern is a Dark
pattern.
| | 02:17 |
Now these are malicious designs, and I
know you're not doing dark patterns in
| | 02:20 |
your designs.
But we encounter them as we are surfing
| | 02:24 |
the web, because they're designed to
intentionally mislead people.
| | 02:29 |
And getting them to do things they
wouldn't have chosen to do otherwise.
| | 02:33 |
So we want to avoid the dark patterns.
We can reduce the probability that we
| | 02:38 |
include anti-patterns by really thinking
critically about whether or not this is
| | 02:42 |
the best solution.
And then we can leverage the good design
| | 02:46 |
patterns by finding existing solutions to
problems that we are facing.
| | 02:52 |
So we could make a better shopping cart by
following more of these standards and
| | 02:56 |
conventions and design patterns for good
shopping carts.
| | 03:00 |
Let's take a look at how we did that on
the Hansel and Petal improved site.
| | 03:05 |
So now here we are, we've built our custom
bouquet.
| | 03:08 |
I know I've added it to my cart because my
information is right up there in the header.
| | 03:12 |
I see it in the little mini cart and now,
I can go ahead and view the basket.
| | 03:17 |
Now, this is closer to what we would
expect to find in a shopping basket.
| | 03:22 |
And image of the product, the ability to
modify my cart, I've got a Subtotal,
| | 03:25 |
whether or not there's sales tax.
If there's shipping and handling fees,
| | 03:31 |
even the ability to apply a Coupon Code.
This looks like a Design pattern that is
| | 03:36 |
for an effective shopping cart.
| | 03:39 |
| | Collapse this transcript |
| Improving form structure| 00:00 |
We've confirmed that all of our boquets
are in our shopping basket, the mixed rose
| | 00:04 |
collection and our custom boquet.
Let's go ahead and proceed to check out, I
| | 00:09 |
know that these are the items that I want
to purchase.
| | 00:13 |
And so we move forward.
Now, checkout is one of the most common
| | 00:16 |
form experiences that people have online.
And so it's really easy for us to talk
| | 00:21 |
about form structure by looking at a
checkout process, because we've already
| | 00:24 |
got expectations and mental models for how
this should work.
| | 00:29 |
Let's briefly talk about good form field
practices first.
| | 00:33 |
There is a tremendous amount of
information available to tell us how to
| | 00:37 |
create better forms on web applications
and on websites.
| | 00:41 |
So this is going to be just a really quick
overview.
| | 00:45 |
We did talk in more detail about form
structure in the Interaction Design
| | 00:48 |
Fundamentals course, and there are many,
many resources available online.
| | 00:53 |
As well as books that help you understand
how to do this more effectively.
| | 00:57 |
But first we always want to make sure that
we are using this correctly for the data collected.
| | 01:02 |
Remember we don't want to make people work
too hard entering the information that is
| | 01:06 |
necessary to complete some task.
We want to make sure that we are using
| | 01:10 |
descriptive labels and that they are near
the associated form field.
| | 01:15 |
People have to know what type of
information is being requested.
| | 01:19 |
We want to make sure that we are placing
the form fields in a logical and
| | 01:22 |
meaningful sequence.
In other words, we're asking for
| | 01:25 |
information in the ordered people are
accustomed to giving it.
| | 01:29 |
We don't typically ask for a last name
before first name, State before City or
| | 01:32 |
the last four digits of your phone number
before the area code.
| | 01:37 |
So just make sure that the sequence is
correct.
| | 01:40 |
Also we can use structured inputs to help
us reduce formatting errors.
| | 01:44 |
If complex data entry is necessary, then
we can help people make sure that the
| | 01:48 |
format is accurate and the information is
complete.
| | 01:53 |
We also want to indicate what's required
and what's optional.
| | 01:56 |
There is no need for people to enter
information that is not really necessary
| | 02:00 |
for them to complete there task.
And remember, never ask for more
| | 02:05 |
information than is absolutely necessary
typing is effort.
| | 02:10 |
And so we don't need to ask for
information that is not necessary for the
| | 02:14 |
task people are trying to complete.
So what are some of the issues with the
| | 02:19 |
original Hansel and petal website?
Check out.
| | 02:23 |
Well, first off, the labels are okay.
They could be more clear.
| | 02:27 |
We have to assume first name, last name,
and 2 address lines That's okay.
| | 02:32 |
We're hoping that we're asking for zip
code first because maybe we'll be smart
| | 02:36 |
and be able to use zip code as a look up
and then pre-populate city and state.
| | 02:42 |
But you'll also notice that all of these
form fields are exactly the same width.
| | 02:47 |
They look like they're going to take the
same amount of information.
| | 02:51 |
A good general rule is create your form
field at a size that indicates how much
| | 02:56 |
information may be entered into it.
So address lines tend to be longer than
| | 03:02 |
name fields because we tend to have more
characters in our addresses.
| | 03:08 |
And zip code is only 5 digits.
So we don't have to have a field that
| | 03:12 |
could hold 20 or 30 digits.
So, we could actually provide some
| | 03:17 |
additional cues to people by changing the
size of the fields.
| | 03:21 |
We also have shipping method over here.
And you'll notice we're just showing grand total.
| | 03:26 |
Well, as a design pattern this is not very
good.
| | 03:30 |
The grand total, $89.95, when people are
checking out, they expect to see a list of
| | 03:34 |
the things that they have purchased.
Not just a total of their costs.
| | 03:40 |
And we've already encountered this problem
once before on this site, we're using the
| | 03:43 |
wrong form filled type for the
information.
| | 03:46 |
So FedEx two day service.
Well one I don't know how much that's
| | 03:50 |
going to cost but it also appears that I
could choose all four of these shipping methods.
| | 03:55 |
Now clearly I don't want to pay for all
four.
| | 03:58 |
This makes people think a little bit
harder, and work harder, to say oh, this
| | 04:01 |
is the one that I want, and uncheck the
others that I don't want.
| | 04:06 |
And then, oh, unfortunately, we still have
this problem of, if I have a coupon code,
| | 04:10 |
and I can get a discount, as soon as I
give this field focus, I have to manually
| | 04:13 |
remove all of the text Input is in there.
So, once again, we're really making people
| | 04:20 |
work for this information, and to complete
this form field.
| | 04:24 |
So let's see what we can do to actually
improve this.
| | 04:28 |
If we jump over to the improved Hansel and
Petal site.
| | 04:32 |
Once again, here's our shopping basket
with our items.
| | 04:35 |
We've got the better information in
summary, and we move forward to checkout.
| | 04:40 |
Okay, now you'll see there are several
things going on here that are better.
| | 04:44 |
First, we have included some additional
status and progress information.
| | 04:49 |
I now know exactly how many steps its
going to take for me to get through the
| | 04:52 |
checkout process, and I know that I am on
the first one.
| | 04:57 |
We've improved the label names so that I
do know that it's first name, last name,
| | 05:00 |
and address line.
Now this might seem like a minor change,
| | 05:04 |
but we also need to be thinking about
accessibility and whether or not there are
| | 05:08 |
disabled people using this website.
And if they're using a screen reader,
| | 05:14 |
first, last, address, address, doesn't
make as much sense.
| | 05:18 |
But first name, last name, address line
one, and address line two, does.
| | 05:23 |
So, even minor changes in content can
improve the usability.
| | 05:28 |
We're using variable width fields here, so
that we can say, zip code is a small
| | 05:32 |
amount of data.
Address is a larger amount of data and
| | 05:36 |
first name is an average or medium amount
of data.
| | 05:40 |
We've also got optional indicators.
I don't have to have a second address line.
| | 05:45 |
I don't have to include a gift message.
We've also moved our shipping methods to
| | 05:49 |
be in line with all of the other form
fields.
| | 05:52 |
In other words, everything that I have to
choose is grouped together, the Gestalt
| | 05:56 |
Principle of Proximity, so that I do all
of my work in one space.
| | 06:01 |
I've also included pricing, so that I
know, exactly how much each one of these
| | 06:05 |
methods will cost, and, I can only choose,
one.
| | 06:10 |
Finally we have a much improved summary
over here.
| | 06:13 |
The items that I am buying, an itemized
list of my pricing, and even the ability
| | 06:17 |
to put in a coupon or promo code without
having to delete all of the information
| | 06:22 |
that was already there.
| | 06:25 |
| | Collapse this transcript |
| Using structured inputs| 00:00 |
So I've gone ahead and entered some of my
information to place this order.
| | 00:04 |
There's just a few pieces of information
left to add to this.
| | 00:08 |
I need to specify my state.
This is a really common drop-down
| | 00:11 |
selector, so I can just say California.
I'm sending these to myself because I'm
| | 00:16 |
going to give them as gifts.
That's our scenario, remember?
| | 00:19 |
And so I want the date.
Hmm, when can I get this?
| | 00:23 |
It says only available Monday through
Friday.
| | 00:26 |
Now, I need to actually go find a calendar
somewhere else and look up a date that I
| | 00:30 |
might want to get delivery for.
Let's see.
| | 00:34 |
Why don't we just guess somewhere around
the middle of May, maybe.
| | 00:38 |
That sounds alright.
We'll just take May 15th, 2013.
| | 00:43 |
Now, you're probably thinking to yourself,
how do I know that this is going to be a
| | 00:47 |
valid date?
How do I know that shipping is available
| | 00:51 |
on this day?
Or, how do I know that this is the
| | 00:54 |
appropriate format in which to enter a
date?
| | 00:57 |
We've all experienced that on the web.
We've been entering data into a form, we
| | 01:02 |
type in what we think is accurate, we hit
next and then we get an error message.
| | 01:07 |
And it says that's not the right format,
you need to use this format instead.
| | 01:12 |
Well, there is something that we can do
about that.
| | 01:16 |
We can use what are called Structured
Inputs.
| | 01:19 |
These reduce input errors by using a
Structured Input mechanism that controls
| | 01:23 |
the type of data, the range of that data,
and even the format of the information
| | 01:27 |
that is being entered.
Things such as datepickers and calendar
| | 01:32 |
widgets, that would have been really
helpful to have on this form.
| | 01:36 |
These work because they only show us dates
that will be valid and their going to
| | 01:40 |
enter the data in the appropriate format.
Some other Structured Input methods
| | 01:46 |
include sliders, they control the range
and the increments, so zero to one hundred
| | 01:50 |
in increments of ten.
Drop-down lists such as the state selector.
| | 01:57 |
There were 50 states in that list and as
soon as I open it up all I needed to do is
| | 02:00 |
find California.
And even radio buttons and check boxes and
| | 02:04 |
be used to control the available options.
So, rather than have people type open data
| | 02:10 |
in any format they want into a text field,
We can control the input.
| | 02:16 |
We can use Structured Inputs to make sure
that we're getting the data that we want,
| | 02:20 |
and this is going to reduce the number of
errors or mistakes that they may make.
| | 02:27 |
So, we're concerned about this date field.
Let's go ahead and see how we have
| | 02:31 |
improved this check-out page.
So here we are now on the improved site.
| | 02:36 |
Once again, I've entered my data.
I'm getting ready to make this purchase.
| | 02:40 |
Here is a Structured Input.
This is a drop-down.
| | 02:43 |
I simply choose California.
I can't type in the wrong two letter state code.
| | 02:49 |
We're using Structured Inputs properly
over here.
| | 02:52 |
We've got radio buttons for the shipping
method.
| | 02:54 |
These are the four choices.
I can't add my own, I can't change the
| | 02:57 |
price, I just choose what I want.
But most importantly now, we see a
| | 03:02 |
completely new delivery date mechanism.
When I click to get focus into this field,
| | 03:08 |
I have a calender widget.
I've got a Datepicker that's being shown
| | 03:12 |
to me now.
And this is going to use real date information.
| | 03:18 |
Once we get this implemented and connected
to the real website, we'll be able to do
| | 03:22 |
things like you can't select Saturday and
Sunday.
| | 03:26 |
As shipping days, it's only available
Monday through Friday.
| | 03:29 |
You won't be able to select dates in the
past, because I can't ship you flowers
| | 03:33 |
yesterday, and you won't be able to select
holidays, such as May 27th, Memorial Day,
| | 03:38 |
because there's no shipping on that day.
So, we can restrict the range of data and
| | 03:45 |
we can specify the format of that data
without having to force the customer to
| | 03:49 |
think about, how do I have to type this
and is this a valid piece of information?
| | 03:56 |
| | Collapse this transcript |
| Handling errors and error messages| 00:00 |
We're back on the first step of the
checkout process on the original Hansel
| | 00:03 |
and Petal website.
And we were just talking about the fact
| | 00:07 |
that this Date selector down at the
bottom.
| | 00:10 |
I have to type in this information, and I
just manually typed in May 13, 2013.
| | 00:16 |
I'm worried that this might not be valid
information, it might be a mistake.
| | 00:22 |
Actually, let's talk about that for a
second.
| | 00:25 |
Let's make a distinction between mistakes
and errors.
| | 00:29 |
Most of the time, when we're talking about
Interaction design, we're very worried
| | 00:33 |
about errors.
When something happens that actually stops
| | 00:37 |
or interferes with the completion of a
process, we don't go any further forward.
| | 00:43 |
Everything comes to a grinding halt.
On the other hand, a mistake is an
| | 00:47 |
incorrect choice or wrong information.
It doesn't prevent the process from moving
| | 00:53 |
forward, but the outcome may not be what I
desired.
| | 00:57 |
Just give you a quick example.
If I have say, a $1,000 in a bank account,
| | 01:01 |
and I'm trying to transfer a $100 to you,
if I accidentally type in one $1,000 as
| | 01:06 |
the transfer, the bank will do that.
It was not my intention, it was a mistake,
| | 01:13 |
but I had enough money in my bank account
for that transfer to occur.
| | 01:18 |
On the other hand, if I have $500 in my
bank account and I want to transfer $100
| | 01:23 |
to you.
But I type a $1,000, then an error is
| | 01:27 |
going to occur because I don't have enough
money in the bank account for a $1,000 transaction.
| | 01:35 |
So the bank will send a message back and
say, sorry, we can't do that you don't
| | 01:39 |
have enough money.
So the error stopped the process but a
| | 01:43 |
mistake went forward and I just had the
wrong outcome, it was not what I expected.
| | 01:51 |
In this particular case, I am not sure if
this is a valid date or if this is the
| | 01:55 |
correct date format but I'm pretty sure
that if I don't have a correct, it will
| | 01:59 |
tell me.
So, if we click Next to move forward,
| | 02:04 |
well, I kind of am still here.
But if you notice at the very top of the
| | 02:09 |
page, something seems to have, yes, we
have an error.
| | 02:13 |
So we've got a couple problems going on
here.
| | 02:15 |
One is that I almost missed that error
message.
| | 02:20 |
It appeared at the top of the page but I
made the mistake down here.
| | 02:25 |
We want the error message to be in a
noticeable position.
| | 02:28 |
You can image that I might not have seen
this at all.
| | 02:32 |
There are some best practices for handling
error messages and making sure people see them.
| | 02:39 |
When an error occurs, we need to tell
people what has happened and we need to
| | 02:42 |
make sure that they notice it.
There's a few things for the error
| | 02:47 |
messages that we need to remember.
One, we should use natural language and
| | 02:51 |
don't blame the person.
The error can be corrected, we need to
| | 02:56 |
describe what went wrong, explain why it
went wrong, and recommend how to resolve
| | 03:02 |
the error.
In other words we need to provide assistance.
| | 03:07 |
We need help people understand what
happened, and what they can do about it in
| | 03:11 |
order to continue moving forward.
So, the problems that we have on this
| | 03:16 |
particular page now, are that the error
message, was not immediately visible to me.
| | 03:22 |
If I hadn't noticed just a slight shift in
the content of the page in that little
| | 03:25 |
peak of yellow, I may not have seen that
error message at all.
| | 03:29 |
It would of been much better to place the
error message, right next to the date
| | 03:33 |
field, so that it was immediately visible
to me.
| | 03:38 |
Or better yet, use the calendar widget, so
that I'm only able to select from valid dates.
| | 03:45 |
But the message that we have in this error
message is not clear, Invalid date.
| | 03:51 |
Does that mean that you can't ship on the
15th?
| | 03:53 |
Or does that mean that I typed the 15th
in, in the wrong format?
| | 03:58 |
If it's the wrong format and I have to put
it in a particular way such as 05152013.
| | 04:05 |
Well then you should at least show me what
the format for the data should be in the
| | 04:11 |
error message.
Or better yet, if I have to type it in in
| | 04:16 |
a particular format, show me the format
that I have to use right next to the form
| | 04:21 |
field before I even start typing that
information in.
| | 04:28 |
Once again, our best solution would be the
calendar widget.
| | 04:31 |
If I can't use the calendar widget, and
there's a required format, show me the
| | 04:35 |
format right here.
So that I understand from the beginning
| | 04:39 |
how I need to enter that information.
That's a situation where we're making
| | 04:43 |
people work harder than they need to.
We should be able to be smart.
| | 04:48 |
If we're not going to use the calendar
widget, allow people to put the date
| | 04:52 |
information in however they want.
And then reformat it however you need it,
| | 04:57 |
for your database.
They can enter the information in multiple
| | 05:01 |
formats, you simply translate it to the
format that you need.
| | 05:04 |
| | Collapse this transcript |
|
|
ConclusionComparing the original site to the improved site| 00:00 |
So we made a lot of improvements to the
original Hansel and Petal website.
| | 00:04 |
And before we go it might be helpful to
just step back and take a look at the full
| | 00:07 |
experience of the original website.
And compare that to the improvements that
| | 00:12 |
we made.
Now remember at the very beginning, we
| | 00:14 |
created a customer scenario for ourselves,
a husband who needs to buy two bouquets as gifts.
| | 00:19 |
And that guided our evaluation of the
site, and it actually also helped inform
| | 00:23 |
our design decisions.
So, on the original site now, we wanted to
| | 00:28 |
buy some arrangements.
We decided to buy Mixed Roses, and so we
| | 00:32 |
eventually navigated to the Rose page.
We noticed that there was information
| | 00:37 |
about the designers, and so we were able
to learn about the designers who work at
| | 00:40 |
Hansel and Petal.
We were concerned that maybe buying an
| | 00:45 |
Orchid would not be a good idea, because
there was a lot of care involved in Orchids.
| | 00:51 |
So we decided to build a custom bouquet.
And we created a custom bouquet, we added
| | 00:56 |
it to our cart.
We confirmed that these were the items
| | 01:01 |
that we wanted, and we proceeded into the
Checkout process.
| | 01:05 |
This was a functional experience.
This worked, this web site was able to
| | 01:09 |
make transactions and sell flowers to
people.
| | 01:12 |
But this was not an optimized or an
efficient, or even a really good
| | 01:15 |
interactive experience.
So, the changes that we made.
| | 01:20 |
Do you remember on the homepage we gave
people control of the carousel?
| | 01:25 |
We allowed them to choose which slide they
were looking at.
| | 01:28 |
We used multiple signals, the arrows and
the dots can be used to navigate.
| | 01:33 |
We drew attention with the badges on the
bouquet so that people know what is new
| | 01:37 |
and what is for sale.
And we improved the functionality and the
| | 01:42 |
content in the footer for search engine
optimization.
| | 01:45 |
And for signing up for the newsletter.
We also made it much easier to navigate
| | 01:50 |
through the site.
Remember, we originally struggled with
| | 01:53 |
mouse channels.
And we had to keep our mouse in those tiny
| | 01:56 |
little spaces.
But now we're able to see the full array
| | 01:59 |
of flowers and arrangements that are sold.
And we can navigate easily now into the
| | 02:04 |
Mixed Roses page.
We also improved the content on the
| | 02:08 |
arrangements and on the mixed arrangements
pages.
| | 02:12 |
We gave people control of the carousel,
and we implemented infinite scroll.
| | 02:16 |
So that we don't have to go from page to
page to page and remember, where was that
| | 02:19 |
bouquet that I liked?
I think it was on page three, now it's all
| | 02:23 |
right here in front of us.
On the Mixed Roses page, we added
| | 02:28 |
additional content to help people
understand better what they were buying.
| | 02:33 |
And we added the functionality that allows
them to see the alternate colors, so they
| | 02:37 |
know exactly what they are buying.
On the Designers page, we made it easier
| | 02:43 |
for people to navigate from one designer's
story to another, and to see all of the
| | 02:47 |
images in nice large views.
We eliminated pogo-sticking and we used
| | 02:53 |
layers, much more effectively for the
content.
| | 02:57 |
On the Care Tips page, when we were trying
to figure out if we wanted to buy an
| | 03:01 |
Orchid or not, we used a more readable
layout for the content.
| | 03:06 |
And instead of using the tiny little
accordion pane that caused a lot of
| | 03:10 |
cognitive friction and memory load.
We gave people the ability to control how
| | 03:14 |
much content they were viewing at a time
by using collapsible panels.
| | 03:19 |
Now, we also understood the context of the
experience by allowing them to download a
| | 03:23 |
PDF of the instructions, or even print all
of the instructions.
| | 03:28 |
Because we recognized, people may want to
take this information with them.
| | 03:33 |
On the Build a Bouquet, we made the
functionality much closer to what the
| | 03:37 |
mental model is.
What are the flowers that I can choose,
| | 03:41 |
what are the flowers that I have chosen.
And so we were able to much more easily
| | 03:47 |
create a custom bouquet and add that to
our shopping basket.
| | 03:52 |
And on the Shopping Basket, we were able
to improve the information that was
| | 03:56 |
presented, by including images of the
flowers that were to be purchased.
| | 04:01 |
And including an itemized summary of the
costs for this purchase, even the ability
| | 04:05 |
to add a coupon code.
And finally when we entered the checkout
| | 04:10 |
process, we added status and progress
indicators.
| | 04:13 |
How many steps are there, where am I now,
how much more is there to go.
| | 04:18 |
We improved the order summary information,
we made more meaningful form field labels.
| | 04:23 |
We even changed the size of the form
fields, and we added a calender wizard
| | 04:27 |
using structured inputs.
To make sure that people don't try to
| | 04:31 |
choose a date that we couldn't actually
ship their flowers to them.
| | 04:37 |
So, from start to finish, the Hansel and
Petal website is now much more
| | 04:41 |
interactive, much more effective, and a
much more enjoyable experience.
| | 04:48 |
| | Collapse this transcript |
| Reviewing the principles and methods applied| 00:00 |
In this course, we review the five
essential principles of Interaction
| | 00:04 |
Design, Perceivability, Predictability,
Feedback, Learnability, and Consistency.
| | 00:09 |
And we discussed how they form a system in
which people have expectations and apply
| | 00:13 |
their past experiences.
We also defined the context of the
| | 00:18 |
experience, and with the help of a
customer scenario.
| | 00:21 |
We took a closer look at an original
website, that was not working well and
| | 00:24 |
which had some problems.
We discussed the weaknesses we found and
| | 00:28 |
described why the original design and
interactions were ineffective.
| | 00:33 |
Once we identified and understood the
problems, we applied the interaction
| | 00:37 |
design principles and our interaction
design skills, to improve that site.
| | 00:42 |
The end result is a much better user
experience.
| | 00:45 |
Interaction design is more than just
creating wire frames and prototypes and
| | 00:49 |
knowing where to put the buttons.
If we understand how people think, what
| | 00:53 |
they need and expect, how they learn and
remember.
| | 00:57 |
What motivates them, and how they react
and feel, then we can identify and deliver
| | 01:01 |
effective designs and experiences.
And remember, interaction design is not
| | 01:06 |
about the behavior of the interface, it's
about the behavior of people.
| | 01:10 |
| | Collapse this transcript |
| Next steps| 00:00 |
Where do we go from here?
Well, Interaction Design is a big field
| | 00:03 |
and shares many methods and much
information with other fields.
| | 00:07 |
Such as Visual Design, User Experience
design, User Research, Content Strategy,
| | 00:11 |
Prototyping, and these others.
If you're new to Interaction Design, focus
| | 00:17 |
on your course skills.
Learn more about UX Design, Information
| | 00:20 |
Design, and Information Architecture, and
become proficient with your design tools.
| | 00:25 |
If you're already working as an
Interaction Designer, start to develop
| | 00:28 |
more advanced skills.
And use the Research, Content Strategy,
| | 00:32 |
Prototyping, and even Coding.
As designers, we are obligated to
| | 00:36 |
understand the medium in which we work.
Just as a sculptor needs to understand
| | 00:40 |
wood or stone in order to carve beautiful
statues.
| | 00:44 |
Interaction Designers need to have at
least a basic understanding of HTML, CSS
| | 00:48 |
and JavaScript.
As well as touch, Jesters and mobile
| | 00:52 |
devices in order to design elegant and
effective experiences.
| | 00:56 |
There are many excellence courses here on
Lynda.com to help you learn more and
| | 01:00 |
improve all of these skills.
And there are several professional
| | 01:04 |
organization and many online resources and
communities.
| | 01:07 |
We live in a world when there is much more
than just the web on a laptop.
| | 01:11 |
Smartphones, tablets, kiosks, our cars,
even the appliances in our homes are all
| | 01:16 |
offering us opportunities to interact with
each other.
| | 01:20 |
With our information and with the machines
around us.
| | 01:23 |
Now, take these essential principles of
Interaction Design and put them to good use.
| | 01:30 |
Go create something awesome.
| | 01:32 |
| | Collapse this transcript |
|
|
