Monday, July 10, 2000

Making Sure Usability 'Fitts' Flash (editorial)

Chris' First Law of Usability:
Usability makes everything easier except for the job of the Designer.

For a few months now I have been looking at Flash on the Web in terms of user experience. I have been continuously seeking answers to the question, 'What makes a good user experience in regards to Flash files?' In truth, there is no simple answer. Creating a good user experience in Flash is challenging because each problem has different interpretations. A Flash interface that works well for your Web savvy customers may be totally confusing for someone new to the Web. Other areas of design, like typography or magazine layout, benefit from a history of best practices. Designers working in these fields need only look to a few reference books for rules and examples of what works and what doesn't. In the field of Flash design there are few rules, and even fewer examples of good user experience.

We Flash designers have to look outside our field for guidelines to help us make usability decisions. One field that I think can be helpful is interface design; in particular, the simple, absolute, and immutable rule of interface design that has stood the test of time, Fitt's Law (pronounced Fitizez). Flash designers can apply this law to our field because it involves the way people use their mouse (or other pointing device) to interact with the computer. Flash designers have much to gain from understanding the applications of Fitt's Law.

Fitt's Law states: The time to acquire a target is a function of the distance to and size of the target. What this means is that the bigger an item is, the easier it is to click, and the easiest item to locate on the screen is one that is closest to the mouse pointer and largest in size. Other than size and proximity, position on the screen is also an important factor in 'ease of click.' Fitts went into a great deal of depth about his law. He developed formulas to measure the impact of different velocities, distances, and target sizes on a user's 'ease of click.' Fitt's Law seems like common sense, but it is stunning how often it is ignored.

By applying Fitt's Law to a Flash presentation running full screen we can understand many useful factors that should influence the placement of important elements. If the user's mouse pointer is about 20 units from the center of the presentation, we can determine the five easiest single unit targets (buttons) for the user to hit. The first is the easiest. It is the unit that is the current location of the mouse pointer. Anyone experienced with interactive design should know that one. The second through fifth targets are the four corners of the screen. Why? Well, because if you were to 'throw' your mouse with enough velocity, you would end up at one of those four corners. Even though the four corners of the screen are the furthest from the mouse pointer, they are very easy to hit because they are bordered by the screen boundaries on two sides.

Designers tend to put navigation elements on the sides of the screen because of the boundary created be the edges of the screen. By applying Fitt's Law we understand that the boundaries of the screen help to improve the 'ease of click' for these targets. The sides of the screen are an infinitely deep target. No matter how hard you try, you will not be able to move your mouse past the left-most edge of your screen. Make sure your targets are on the edge, no border between them and the side of your screen (if possible). Trying to hit a target just one pixel away from the edge of the screen takes just that much longer.

Figure 1. Target areas of buttons increase the 'ease of click.'

Another mistake that I have seen frequently in Flash files across the Web is small target sizes for buttons. Take for example the two buttons in Figure 1. When you mouse over the buttons, the red area highlights the target for that particular button. The button on the left has a very small target, just a one point outline of the letters. According to Fitt's Law, this can be very difficult to target without making mistakes, unless your mouse pointer is within close proximity. The button on the right has a much larger target area, and therefore has a better 'ease of click.' You can see for yourself how Fitt's Law applies to these two buttons by moving your mouse back and forth to select them. You have to pay much more attention to selecting the button on the left.

Another important lesson to learn from the above example is about the appearance of buttons. For both buttons, the design suggests that the clickable area will be within the blue border. What the design suggests should always be what you give the user. If your buttons are separated by lines, make sure that the target for each button goes from line to line. You cannot expect your user to have the time to poke around your page looking for buttons. When users have to poke around a file looking for buttons, chances are they will not come back.

Figure 2. Small target areas with gaps between buttons makes for a poor 'ease of click.'

Small buttons that are close to one another are also going to hinder your design's 'ease of click.' Give the sample calendar in Figure 2 a try. Targeting a specific day of the month is difficult in this example because the design goes against so much of what we learn from Fitt's Law. Not only are the buttons small, but the target areas leave a 'dead area' between each button. This makes the act of targeting the fourth Monday in July that much harder.

Figure 3.Use ActionScripting to dynamically improve the target area of buttons as the mouse approaches.

Chris' Second Law of Usability:
Understanding usability makes the job of the designer easier, and the end product better.

Understanding and applying Fitt's Law is a major step toward improving the user experience of your Flash files. You can see how even small changes make a vast difference. Flash also offers some dynamic abilities that I do not see used in most interface applications: smooth scaling of graphics. Understanding the techniques for improving the 'ease of click' Flash designers can dynamically improve the target area of buttons as the mouse pointer approaches (see Figure 3). That alone can improve the user experience of Flash files by an incredible amount. All you have to do is implement it.

Ciao,

CHris

Further Reading:

A lengthy explanation of Fitt's Law.

A fantastic article on applying Fitt's Law to OS interfaces from AskTog.com.

Another good introduction to Fitt's Law from Joel Spolsky. [via Glish]

I'd love to hear your thoughts. Feel free to post on the Flazoom.com Message Board.