In this course, you will gain an understanding of the critical importance of user interface design. You will also learn industry-standard methods for how to approach the design of a user interface and key theories and frameworks that underlie the design of most interfaces you use today. Through a series of case studies on commercial systems - many of which you likely use on a regular basis - we will illustrate the benefits of good design. We will also demonstrate how the costs of bad design can often be severe (in user experience, money, and even human lives). You will then gain a high-level understanding of the user-interface design process. You will be introduced to common design scenarios - e.g. improving on existing designs and starting a new design from scratch - and the general design processes that tend to be used for each scenario. Finally, we will begin introducing the large body of existing knowledge on design by providing overviews of core user interface design theories and concepts. This key foundational information will help you avoid “reinventing the wheel” when you are designing your interfaces in this specialization.
Fitts' Law
Loading...
来自 University of Minnesota 的课程
Introduction to UI Design
644 个评分
从本节课中
Psychology and Human Factors for User Interface Design
与讲师见面
Loren TerveenProfessor
Computer Science and Engineering
Haiyi ZhuAssistant Professor
Computer Science and Engineering
Lana YaroshAssistant Professor
Computer Science and Engineering
Dr. Brent HechtAssistant Professor
Computer Science and Engineering
Joseph A KonstanDistinguished McKnight Professor and Distinguished University Teaching Professor
Computer Science and Engineering
Hey folks, welcome back.
Today we're going to be doing our first exploration of
the importance of human factors in psychology and user interface design.
Specifically we're going to be focusing on a case study on Fitts' Law, which really,
quite accurately describes how people move their hands and
do other sorts of pointing, and we'll get into that here in a second.
So what is Fitts' Law beyond a great first case study in the importance of
human factors.
Well it's a simple mathematical model, of human pointing performance.
And more specifically this model at a very high level looks like this.
It says that the time to complete a pointing task is a function
of the distance to the target from where you're starting your pointing operation.
The size of the target that you're pointing at, and
the pointing device that you're using.
And we'll expand this a lot in just a few moments.
But first we have a few more high level things to do.
And first and foremost in those high level things is to say this.
Fitts' Law has been incredibly influential in both the research and
practice of user interface design.
One great sort of encapsulation of this is from a paper by three
colleagues of ours at Google, and in this paper of these three colleagues wrote,
Fitts' Law has served as open of the quantitative foundations for
human-computer interaction, research and design.
And they go on to say that Fitts' Law has been used as a theoretical framework for
computer input device evaluation, we'll be unpacking that a bit.
It's been used as a tool for optimizing new interfaces,
we'll be unpacking that one quite a lot
It's been used as a predictive element in complex gesture recognition algorithms.
So it speaks not only to the passive user interface design but the future as well.
And it's been used as a logical basis for modelling more complex HCI tasks.
Okay, why has Fitts' Law been so influential?
Well, to put things very simply, when you're using a user interface, whether
that interface is hardware or software, you are pointing a heck of a lot of time,
and Fitts' Law is a mathematical model for how well people perform pointing tasks.
So these are just some examples of all the pointing we do when we use our
computing devices.
So you can point using a mouse of course.
I have my trackpad here.
And I'm doing all sorts of pointing on my trackpad.
And of course you can also point with your finger on smart phones and
tablet devices and these types of things.
Right? Pointing is central to so
many interactions that we have.
In a user interface, in our experience with the user interfaces.
And so it's very important for
us to understand how humans point when we're designing these interfaces.
Okay, so remember that we said that Fitts' law specifies the relationship
between the time to complete the pointing task and the distance to the target,
the size of the target and the pointing device that you're using.
Now let's get a little more specific, look at an actual equation, and
this is one of the simpler version of Fitts' Law.
Fitts' Law is quite old, as we'll talk about in a bit, and
all sorts of researchers come in and add in little tweaks here and there.
This is generally the basic form.
Very powerful still in practice or
is been shown to be useful in predicting certain new point tasks as well.
So this is both a basic equation, how to understand Fitts' Law,
as a law that's still pretty darn useful.
All right, lets unpack what all of this symbols mean.
T as you might guess, that's the time to complete the appointed task,
W, is the size of the target.
And what I mean by target, when we're talking about user interface design?
Well all of these here are targets.
So, for instance,
you can see that this button to create a new slide in Powerpoint, that's a target.
It's a bigger target then, say, the bold over here, right.
This icon here from my iPad,
that is a target when you're pointing at it with your finger.
But it's still a target for pointing.
And then also, of course, all web links, they're also targets.
They are differently shaped.
These tend to be more square.
This is more oblong, but they are still definitely pointing targets.
Okay A, here, is the distance to the target.
So if I'm starting out over here, and
my target is the A, the distance is really high.
That's a pretty simple notion.
And then, these are properties of the pointing device, and
we'll unpack that in a second.
One thing I like to do when I present equations in class,
is really talk about what happens when something goes up or something goes down.
What's the overall effect, right?
At least for me, it gives me a sense of how all this works.
It builds my mental model of the relationships described in the equation.
And what we can see here is that since W is in the denominator here, right.
As the target size goes up the time is going to go down.
This value here is going to go down.
So as the targets get bigger, as those icons get bigger,
the time to point at that icon is going to go down.
The opposite is true with distance, right?
So the further you are away from your target, say my target is the bottom left
there, all the way down here, the longer it's going to take me.
Okay, that step's pretty straightforward.
This stuff gets pretty interesting.
And specifically speaks to the pointing device.
We'll talk about that just in a second here.
But obviously a is some kind of intercept.
And if this is high, that's bad news.
That means there's a built in cost to pointing at anything
regardless of how big the target is or how far away it is.
And then b is the slope.
So if this is high, that means that no matter what this value is,
it's going to be quite a bit higher because b is high.
If it's low, that's going to dampen the effects of these variables.
It's a basic slope operation.
So let's talk about how all of these
relationships which are embedded into Fitts' Law.
Explain key decisions in user interfaces that probably
many of you are familiar with.
For instance, this here is a screen grab from Microsoft Word.
It has the ribbon there.
Everyone's kind of familiar with the ribbon.
You can see that it has made
things that people probably do more often bigger, right?
So I insert a picture a lot more than I insert a smart chart
into my Word document.
And that is manifest, that was a choice that Microsoft made, right?
It's because this target size is larger,
the picture icon is larger than the SmartArt icon.
Right, it makes sense, it's going to be easier to point at it.
So if Microsoft's saying okay, you know, we only have limited space in our ribbon,
how are we going to allocate this space?
What we can do is something to make people's pointing a lot easier by making
the icons bigger for things that they click on more often.
So Fitts' Law,
this is our first example of Fitts' Law sort of manifesting in these.
Maybe quiet, maybe understated ways in a user interface design, but
ways that can have a pretty important impact on the overall user experience.
For instance, if this icon were really small and
we had to click on pictures over and over and over again.
The time it would take to click on that tiny little icon,
that would begin to frustrate any normal computer user.
Okay, let's look at the same ribbon from Microsoft Word, but
let's look at the bold, italics, and underline.
Well, one hypothesis for
why these are close together is that you often click on them together.
So you're often bolding and underlining something next to each other.
We'll talk about other reasons why these are together as well,
later in this particular course.
But one reason is,
if Microsoft anticipates that you're going to be clicking on these together,
It can make that pointing task faster by reducing the distance right?
This is all explained in Fitt's Law.
Okay, moving to Mac OS now, this is one of my favorites.
The Mac menu bar is at the top of the screen right?
And this can be understood through the lens of Fitts' Law and I just love this.
The reason it's at the top of the screen is if I go
all the way to the top of my screen, here for instance, I can't go further.
Effectively, what this does is it means that, for instance, the Finder here,
if I go further past the Finder, excuse me, I can't go further past the Finder.
So, effectively, the target of that Finder menu is all the way up to infinity, right?
So I've made the target size effectively much, much,
much larger than if I put this somewhere in the middle of the screen, right?
So this actually a very large target,
even though it takes up relatively little screen space.
I love this, it's a great design decision.
Another Fitts' Law S design decision that you'll find in Mac OSX or
Mac OS now, excuse me, is the doc magnification.
So what this is does is when I move my pointer down here
in Mac OS I induct magnification is on.
We'll see that each icon will grow when my mouse gets closer to it.
And this is just a way of magnifying the target size,
which will make pointing faster, right, as predicted by Fitts' Law.
Okay, moving back to Windows here, you can see the pointer,
the Mouse Properties control panel, and the Pointer tab.
This feature here is also explainable with Fitts' law.
What this does is this will snap my pointer to the default button,
which in this case is okay.
What I'm doing there is effectively reducing distance to more or
less zero, unless I want to hit Cancel or Apply, but even those are closer.
So as soon as I open this and the pointer snaps here,
I have made pointing a lot faster when I have this feature enabled.
Now perhaps more impactfully, Fitts' Law is very famous for helping the folks at
XEROX Parc back in the late 1970s justify the commercial introduction of the mouse.
What they did was they found that the mouse had lower A and B values.
Remember in Fitts' Law, A and B are both the intercept and the slope.
If those are lower, that is fantastic for every single pointing
job, whether the target is large or small or the distance is large or small.
And what they found was that the mouse did better than the joystick or just using
your keys, I don't know if any of you are old enough to remember to do this.
I'm sure some of you are like myself,
where you're trying to point at something using the arrow keys.
They found that the A and B values for the mouse were
much lower than the joystick and the arrow keys, and they said, all right.
I think we have an excellent pointing device here.
Fitts' Law says that it will make pointing a lot faster for everyone.
Let's introduce this commercially.
Steve Jobs saw the mouse, introduced it in Apple, and now we all use mouses,
excuse me, mice, all the time.
There's a great website that can kind of help us demonstrate what went on
in 1978 as well as what goes on all the time
now when people are designing new pointing devices.
It's this website by Simon Wallner in Austria and
I'm just going to show you a quick demo here.
Okay, so here we are at this wonderful website.
And what this website does, it talks to you about Fitts' Law, and it's a great
additional reading resource, actually if you're interested in this material.
But this is the key part.
It lets you click on things.
And you can see how well Fitts' Law models your performance
as well as one other very important thing which we'll see in a bit.
So let's just do a quick demo of how this works.
Okay click, click, click.
I recommend you guys do this yourself, it can be kind of mindlessly fun.
And you're doing it in the service of science.
All right, so you'll see that the sizes change and the distances change, right.
It's because if you look in the right there,
I have randomize after round turned on.
Okay, so you can see I'm having trouble
clicking on the left hand side of my trackpad here, but these are big targets.
They're pretty far away, but they're big targets.
Fitts' Law suggests that I should be able to point on these more quickly.
This is the basic idea, like a good cooking show, or whatnot,
I did this a bunch earlier before I started recording.
So let's see what my results were specifically in one area.
All right, so what I did with that website was I did a whole bunch of rounds with my
track pad and I did a whole bunch of rounds with my mouse.
The blue here is my mouse.
The orange here is my track pad.
Which pointing device is better?
Okay, you just saw an end video quiz.
Hopefully you said the mouse is better.
And the reason you thought the mouse was better,
hopefully, is that the slope is lower.
Now both of these have roughly the same intercept.
That's our lowercase a, right, in Fitts' Law.
But you can see that the slope is higher, right?
What this means is that as the pointing task becomes more difficult,
you can ignore ID here.
This is basically a function of both A and W,
as the pointing task becomes difficult, time gets a lot longer with the track pad.
Whereas the mouse time is much less contingent
on the size and the distance to the pointer.
There still is a good slope, but it's not enormous.
Now note that both of these have roughly the same interceptor, A.
But it's the slope that's different.
Now this is, I did this for my class on the subject last semester,
and this is a separate run and the same thing happened.
And I also did it as an in class activity and everyone else saw the same thing.
One thing I think this helps us explain, and
I'm sure many of you have had this feeling.
When you're doing a task that requires a lot of pointing, for
instance, putting together PowerPoint slides, you're always pointing at
particularly small targets, making things bigger or smaller, right?
And expanding the size of objects.
You're dragging things around.
You're clicking on things.
It always feels a lot more frustrating for me to do that with a trackpad than it does
with a mouse, and Fitts' Law here, can help us explain why, right?
Everything actually just takes longer.
All right, so before we finish up our discussion about Fitts' Law,
I want to cover a few more pretty interesting points about Fitts' Law.
The first is, in the relation to Fitts' Law and accuracy.
Now when I taught this course last semester,
I taught our local user interface design course last semester.
My students loved Fitts' Law.
It's this really nice structured explanation of something that I think we
all have sort of struggled with and maybe implicitly wondered about over time.
But everyone was very confused as to why it just spoke to speed
rather than accuracy, right?
Pointing speed is important.
How fast can you click on things?
But also important is how often will you not click on the correct button, right?
I think we've all had that experience quite a bit.
Now Fitts' Law does indeed only directly speak to time but
it does imply something of a speed, accuracy trade-off.
And the way that this works is we have to think about size in a different way.
Let's think about a target size as a center-point and a threshold.
So what Fitts' law says is that if you increase your error threshold,
if you increase your target size, your time will go down.
W is in the denominator of the equation.
But if you decrease your target size, you lower your air threshold,
decrease your target size you're going to need more time.
So there's a speed Accuracy tradeoff.
So, that's sort of at a high-level of how Fitts's Law speaks to accuracy.
I will say, I did some additional research into this, because students had so
many questions and it turns out that there was a paper published at ACM SIGCHI,
which is the same publication venue as the Google paper was published that we
talked about earlier.
This is a paper by some of our colleagues at the University of Washington,
Microsoft and York University in Canada.
And what they found was that yes, Fitts's Law actually can be manipulated
to very specifically predict the accuracy of a pointing task.
The prediction accuracy was actually somewhat astonishing.
It was in the R-squared for those of you who understand what that means
was well above 0.9 and this is a nice little excerpt from their paper.
What you see here on the x-axis is the percent of the movement time or
the time to complete a pointing task,
that it took a participant to do it without any time pressure.
So here, it's 40% of the no time pressure pointing task.
And here, it's 140%.
And what this basically says here is if you rush people,
you're going to get pretty low accuracy.
So for instance, if with very small targets,
with 16 pixel targets, the error rate was 0.8 or
80% and the accuracy was 20% if you really rush people.
So Fitts's Law, they did this through manipulation of Fitts's Law and
it turns out that Fitts's Law actually can help us understand how many times you're
going to miss-click on something.
Basically, if you make your target size pretty small and people are in a rush,
doing things quickly, you're going to have a lot of miss-clicks.
The second thing I wanted to add about Fitts's Law is that is not only applies
to sort of older input devices and sort of things like mice and
track pads and so on and so forth, but it is also helping us do important
research on new types of input devices and developing new user interfaces.
We saw a bit of that here with gesture recognition algorithms, but
let's actually unpack this paper a bit more.
This Bi et al paper from three folks at Google.
They actually looked at how well Fitts's Law applies to pointing using your finger
on a touch input device.
So for instance, a smartphone.
And what they found was that Fitts's Law does indeed help us predict movement time,
time to complete a pointing task in this context when you're using your smartphone,
but it does require a slight modification and that's why you see over here.
It's not just Fitts's law, it's also FFitts's Law.
It's a slight modification and this is kind of a fun modification.
Basically, what FFitts law says is when you're pointing on your smartphone,
the movement time can be predicted by both FFitts's Law and
what's known as in scientific terms actually, the Fat Finger Problem.
And so the Fat Finger Problem is even if you give someone an infinite amount
of time to point out something accurately on their smartphone, oftentimes,
those targets are a lot smaller than your point device, which is your finger and
people will still miss it.
They'll still miss it even if you give people infinite time and
what they've found is that if you combine those two things,
the Fat Finger Problem or knowledge about the Fat Finger Problem and
modelling of the Fat Finger Problem in Fitts's Law, you can very accurately
predict how fast people can point at things with their finger on a smartphone.
The last thing I wanted to say about Fitts's Law is that it is
demonstrates very clearly the importance
of interdisciplinarity in user interface design.
Fitts's Law was not developed by a computer scientist.
It was developed by a psychologist over 60 years ago.
And despite this, it has become one of the most influential things
at least over the long-term in user interface design.
I think this is just a wonderful example of how important it is when we're doing
design work.
And quite frankly, when we're doing other work in computer science as well.
That we've look outside the walls of our discipline and
have reach out other disciplines and say, hey,
what do you know about this fundamental human process and I'm
trying to make easier or them trying to implement in my user for interface design.
And oftentimes, those disciplines will have answers.
A few closing thoughts.
In this video, we saw that Fitts's Law is a canonical example of how
understanding humans can help in user interface design.
And we also saw how Fitts's Law and as we'll see later,
other human factors can be key design shortcuts.
We don't need to think about how big to make our icons to make pointing faster,
because we have Fitts's Law.
We don't need to use a more complex design processes that we'll learn in
the rest of this specialization for that.
We already know that.
We don't need to ask questions about whether we need to put things closer
together, because how the impact of that will be on pointing these types of things.
We already know that from Fitts's Law.
There's no need to reinvent that particular wheel and this saves us a lot
of time, because as we'll see in this specialization, doing product-specific and
domain-specific design really will take up all of your energy and will take up all
of your creative will challenge all of your creative abilities, I should say.
So with that, that's all we will learn about Fitts's Law and
I'll be seeing you soon.
