🔍 Start typing to search the book or go directly to a page by its number
It is convenient to navigate not only by scrolling, but also with the arrow keys:
Introducing the book released by Bureau Gorbunov Publishing—a practical guide to user interface. This interactive handbook is intended for web and user interface designers, editors, managers and everyone who is involved in product development.
Fitts conducted an experiment. On the board, there are two sensitive stripes—targets. When one of these stripes is tapped with a special pen, “target hit” is registered. The participant of the experiment quickly taps both stripes one after another. After having measured time, changed the distance between the stripes and their width, Fitts came up with a formula:
This is Fitts’s law. It connects distance to object, object size and aiming time in one‑dimensional space.
We are interested in the application of this law to interfaces where the user aims at objects on a two‑dimensional screen. The shape of the objects and the fact that the person doesnt’t move to the target in a straight line somewhat complicates the law. But intuitive definition is more important for us: the farther the object, the more time for aiming; the larger the object, the less time for aiming.
It was found that the law works independently of the movement conditions: whether it is executed directly or by using a manipulator; by hand or foot; by child or aged person.
Let’s examine the consequences of Fitts’s law.
Big buttons are easier to hit. But oversized buttons are not very useful: the dependence is logarithmic, that is, the more we increase, the less effect we get.
The tag <button> makes buttons “tight” by default. You have to specify larger size manually
It is good to put additional distance between dangerous buttons and links, otherwise it will be too easy to hit the wrong one.
Transfer from a wallet
Transfer from other
through a terminal
When there is no distance between links in a list, it is easy to accidentally miss. In addition, it is difficult to read such a list.
By making the distances larger than standard line spacing, both problems are solved.
Sometimes, the wish to make user controls larger conflicts with the requirement to occupy less screen space. Then, you can increase not the control itself but its hit area.
It was necessary to make
Menu items in operating systems can be clicked across the entire width of the line, including places without text. It is useful to have the same behavior in website menus. Feedback in the form of highlighting also helps aiming.
On websites, not only radio buttons or checkboxes but also their labels should be clickable.
The iPhone increases hit areas of links in the browser. If you open a page that is not adapted for mobile screen, tapping the microscopic link within the text works flawlessly.
Even if several small links stand nearby, you usually hit the correct one on the first try. Apparently, hit areas are shifted to be proportionate to the finger and avoid overlapping.
The iPhone keyboard dynamically adjusts the size of the buttons so that it would be easier to write an existing word rather than to make a typo. Externally, the keyboard does not change.
There is a problem in the design of the iPhone’s phone book.
FaceTime is a service for internet calling. On the right side of the line, there are two small icons: camera is for video calls and handset is for voice. Since a video call is the default behavior, tapping the rest of the line is interpreted as one.
Unfortunately, if you tap the right edge of the line, the video call begins, because hit area of the handset is limited to the size of the icon. It would be better to extend the hit area to the whole right part of the line.
A user can click that spot on the screen instantly, because the distance to it equals zero. It is the place where the context menu appears.
In a well‑organized context menu, the most important items are on top. On Windows, the first item appears directly under the cursor—Fitts is happy. On the Mac, you have to slightly move the cursor to hit the first item—not so good.
In 3D modeling software, “bunches” are popular: a number of menus appears on different sides of the cursor. The idea is to put the most of useful functions close to the cursor.
All pixels on the screen have the same size. But when the cursor reaches the corner, you can continue moving the mouse until it falls off the table—the cursor will stay in the same spot. So, for the cursor, sizes of the corners are endless: to hit them, it is enough to decisively move the mouse in the desired direction and click.
Try to use the cursor to hit the circle in the center, and then try to hit any of the corners.
When it comes to the ease of hitting, screen corners stand after the pixel below the cursor. But if you are reading this book on a touch screen, there will be no such effect: the finger will not stop at the edge of the grey area. It is still useful to use the corners of the iPad—we’ll talk about that later.
The circle simulates the behavior of the cursor and does not go beyond screen edges. The example works best if the book is in fullscreen mode
In Windows 95, there was one pixel between the Start button at the lower left corner, making it hard to click the button.
In one of the following versions, the problem was fixed by pushing the button to the very corner. Meanwhile, the button that closes the maximized window has always been in the upper right corner, and Windows users know how easy it is to click it.
On the Mac, there is the Hot Сorners feature. Moving the cursor to the screen corners executes the selected command without even clicking.
By ease of hitting, after screen corners come its sides. Objects at the edges have endless sizes in the direction of the border of the screen.
On the Mac, the menu is at the top of the screen, regardless of the position of the current app’s window. It is much easier to click it than the menus of separate windows in Windows.
Windows XP had a good taskbar. Applications’ buttons were at the bottom of the screen and were also wide. Thanks to titles, the buttons were very informative—we’ll talk more about that in the ‘Informativeness’ chapter.
Unfortunately, after Windows 7, taskbar buttons have become small, like in the Mac’s Dock.
A maximized Word or any other program’s window had its scroll bar at the right edge, so that it would be easier to click. And when the mouse with the scroll wheel was invented, the need to aim disappeared.
In most programs, the toolbar is under the window title.
Here, the toolbar has a left bleed. When the window is maximized, toolbar buttons have infinite width.
Scroll bars on the right are at the edge for the same reason.
In Fitts’s experiment, it is clear that you should aim at the solid black rectangle. The button on the screen is an obvious target too.
But sometimes the object on the screen consists of parts: a headline, a caption, an icon and a date. When you see such a constellation, the question arises: is it clicked entirely or are there any separate stars?
If you make “Psychology” tag a link to the category, there will be mistakes. The headline is perceived as a single object with a small caption.
In the headline of the comment, “no subject” link leads to the page of the comment, the icon af a man—to the author’s profile, and user name—to the blog. But the line of blue links is perceived as a single object. Users click it without studying its internal structure. Getting to one of the mentioned webpages is unpredictable.
Even if you remember what’s where, you can’t trust that line. You have to divide the object into pieces and decide where to aim every time.
One link should be left because there is only one object.
In the old design of Yandex TV guide, there was a TV show in each line. The name served as a link to the show’s webpage, which was evident due to the underlining.
In the next version of the design, both the names of shows and channels were clickable. The names lead to the shows’ webpages and the channels lead to the channels’ webpages. There was a confusion: you clicked the line with a show and got to a channel’s webpage. Also, there is no logic in the visual design: the links are not underlined, the colors are not related to the behavior.
The classic forums violated the “One object—one link” rule maliciously.
Imagine an overly complicated Fitts’s experiment, where there are lots of black stripes, but you need to hit only some of them. Forum developers exposed users to such challenges.
When we see an object, we move the cursor to it and then click the mouse button. But this is one gesture: we do not change the decision to click while moving. Therefore, the elements that appear and obstruct the target when you aim are no good: you will click something you didn’t need.
Let’s suppose you want to click a link in Telegram messenger. You already saw it in the text and started moving the mouse towards it.
But while you move the cursor, a pop‑up panel with stickers suddenly appears under it.
Even if you have time to notice it, the hand will continue to move “by inertia” to get to the link. As a result, you will click and send a sticker.
What would the results of Fitts’s experiment be if an obstacle would sometimes appear and block the target?
In an operating system, there can be multilevel menus.
Having seen the required Color Balance item in the opened submenu, the user moves the cursor to it using the shortest path, not thinking that there are unneeded Layer Mask and Vector Mask items on the way.
To avoid these items, we would have to make an “L‑shaped move”: shift the cursor horizontally to the right and then down. But the Mac analyzes movements and correctly determines the user’s intent: if you diagonally move the cursor fast enough, the submenu will not close.
The developers of Amazon’s two‑level menu have also thought about the direction of cursor movement. If you move the cursor to the right within the highlighed triangle, you will not switch to the adjacent menu items.
Having repeatedly hit a certain target, a person gets used to doing it faster. No time is spent on understanding where the target is; less time is spent aiming. It’s easier to get used to hitting targets that do not change their location.
Microsoft Word users know that ‘Save’ is the third icon on the toolbar. If the location of the icon changes depending on the inteface’s state, people spend time looking for it. Therefore, important elements should not be moved.
Those who know touch typing press keyboard keys almost instantly. Advanced users like hot keys and try to use a keyboard instead of a mouse.
The corners of touch screens do not have an infinite physical area, just like the corners of the computer screen. But those who are used to holding a device in their hands will find keys with closed eyes, almost like buttons on a keyboard. Therefore, it is important to use corners in any interface.
There is a place for every thing