Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this section we are going go to talk about how the design of something makes it easier or harder to click on. I am going to start by giving you an example from web-based email clients. What's the big difference between how these two email clients implement the button for writing a new email. In case you missed them, here are the buttons. Which system makes it easier for users to write a new message? Based on just the button the size alone, we can probably say it's the one on the left. How can we be so sure? Well, it's all about Fitt's Law. Fitt's Law states that it's faster to hit lager targets closer to you, than it is to hit smaller targets further away from you.
Now you are thinking that it should be easy enough to go off and find another equally apparent statement and make a law about it that you can attach your name to. The thing is, Mr. Fitts didn't just make the law. He backed it up with science, making an equation that explained how much easier it would be depending upon all the variables. We don't care so much about the equation; we do care about the implications of the law. And you can see those implications all around you. The brake pedal in cars is bigger than the accelerator pedal. It's also closer to you and that make it faster and easier to hit in an emergency. The button for switching on heavy machinery is small and recessed; the button for stopping it is large and prominent.
You don't want people to starting machines by accident, but you do want them to be very easy to stop if there is a problem. In the computer world, you see the results of Fitt's Law too. Here is a dialog window, notice how the preferred options are big targets. The less preferred is smaller and it is also designed as the link rather than as a button. So here is a quiz for you. You can even pause the video to think about the answer for bit if you want. What's the easiest location on the screen to use as a target? Pause now and give it some thought. Okay, here is the answer. The position under your mouse is easiest.
That's why we use it for context menus. If you said the corners of the screen, you were close. Think about what happens to the mouse at the edges of the screen? It doesn't wrap around, it just stops, so you have the equivalent of an infinitely sized target. It doesn't matter if you overshoot, because there is nowhere to overshoot to. The corners stop horizontal and vertical movement, so you don't have to be very accurate at all. You just lurch in the general direction and still hit the target. Apple actually makes use of mousing in the corners to makes things happen in the Operating System. How should you use Fitt's Law? Think about the size of the screen elements you create.
Are they a suitable size for how they'll be used? Radio buttons are tiny. So you have to make the radio button text label into a target as well. Similarly, hyperlinks that are just one word long will be harder to click on than if you link a whole phrase. Think about the location of the screen elements you create. Are the ones that people use most are likely to be on the path of the user's cursor takes. People tend to move through screens from top left to bottom right. So it makes sense to put important elements on that axis. That's one reason for putting commit buttons on the bottom right of dialog boxes.
If you are developing for touch interfaces, have left enough space between the targets, so that it is simple enough to stab at one with a finger and be sure to hit the right one. So that's Fitt's Law. It's faster to hit lager target closer to you, than smaller targets further from you.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.