🔍 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:
spreads
User Interface
User Interface
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.
Table of contents
Fundamentals 4
Interaction 4
Language 213
Screens 311
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.
Table of contents
Fundamentals 4
Interaction 4
Language 213
Screens 311
2
Interaction
Proximity
Aiming
Informativeness
Feedback
Paging and Scrolling
2
Interaction
Proximity
Aiming
Informativeness
Feedback
Paging and Scrolling
Aiming
Fitts conducted an experiment. There are two sensitive stripes, targets, placed on the board. 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 measuring the time, Fitts would change the distance between the stripes as well as their width. He then came up with a formula:
This is Fitts’s law. It connects the distance to an object with the object’s size and the time spent aiming at them in one‑dimensional space.
We are interested in applying 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 an intuitive determination is more important for us: the farther the object, the more time that’s needed for aiming; the larger the object, the less time that’s needed for aiming.
It was found that the law works independent of the movement conditions: whether it is executed directly or using a tool, by hand or foot, by a child or an elderly person.
Paul Fitts (1912—1965) worked as a psychologist at the Ohio State University and later at the University of Michigan. In 1954, he developed and published a model for rapid movement to a target area. Before working at the universities, Fitts served in the US Air Force. At the end of the Second World War, he studied the human factor in aviation and is considered one of the pioneers of safety enhancement.
Aiming
Fitts conducted an experiment. There are two sensitive stripes, targets, placed on the board. 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 measuring the time, Fitts would change the distance between the stripes as well as their width. He then came up with a formula:
This is Fitts’s law. It connects the distance to an object with the object’s size and the time spent aiming at them in one‑dimensional space.
We are interested in applying 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 an intuitive determination is more important for us: the farther the object, the more time that’s needed for aiming; the larger the object, the less time that’s needed for aiming.
It was found that the law works independent of the movement conditions: whether it is executed directly or using a tool, by hand or foot, by a child or an elderly person.
Paul Fitts (1912—1965) worked as a psychologist at the Ohio State University and later at the University of Michigan. In 1954, he developed and published a model for rapid movement to a target area. Before working at the universities, Fitts served in the US Air Force. At the end of the Second World War, he studied the human factor in aviation and is considered one of the pioneers of safety enhancement.
Let’s examine the consequences of Fitts’s law.
Too small
Sufficient
Dangerous
The sizes of objects and the space between them
Big buttons are easier to hit. But oversized buttons are not very practical: the relationship 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 a larger size manually.
It is best to keep extra space around dangerous buttons and links, otherwise it will be too easy to hit the wrong one.
Let’s examine the consequences of Fitts’s law.
Too small
Sufficient
The sizes of objects and the space between them
Big buttons are easier to hit. But oversized buttons are not very practical: the relationship 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 a larger size manually.
Dangerous
It is best to keep extra space around dangerous buttons and links, otherwise it will be too easy to hit the wrong one.
Wallet transfer
Prepaid
plastic cardsCash transfer
Transfers from other
payment systemsCash payment
through a terminal
When there is no distance between links in a list, it is easy to accidentally miss one. In addition, it is difficult to read a list like that.
Rendering the distances between them greater than standard line spacing solves both of these problems at once.
Wallet transfer
Prepaid
plastic cardsCash transfer
Transfers from other
payment systemsCash payment
through a terminal
When there is no distance between links in a list, it is easy to accidentally miss one. In addition, it is difficult to read a list like that.
Rendering the distances between them greater than standard line spacing solves both of these problems at once.
Size of hit areas
Sometimes, the desire to render user controls larger conflicts with the need to occupy less screen space. In that case, rather than increasing the size of the control itself, you can increase its hit area.
It was necessary to make
Electronic kiosk interface in ‘Mega’ shopping center, Moscow
Electronic kiosk interface in ‘Mega’ shopping center, Moscow
Size of hit areas
Sometimes, the desire to render user controls larger conflicts with the need to occupy less screen space. In that case, rather than increasing the size of the control itself, you can increase its hit area.
It was necessary to make
Bad
Good
Bad
Good
Menu items in operating systems can be clicked across the entire width of the line, including off to the side of the text. It is worthwhile to implement the same behavior in website menus. The feedback provided by item highlighting also helps with aiming.
On websites, not only should radio buttons or checkboxes be clickable but also their labels.
Bad
Good
Menu items in operating systems can be clicked across the entire width of the line, including off to the side of the text. It is worthwhile to implement the same behavior in website menus. The feedback provided by item highlighting also helps with aiming.
Bad
Good
On websites, not only should radio buttons or checkboxes be clickable but also their labels.
The iPhone increases the hit areas of links in the browser. If you open a page that is not adapted for a mobile screen, tapping a microscopic link within the text works flawlessly.
Even if there are several small links positioned nearby, you usually hit the correct one on the first try. Apparently, the hit areas are shifted in opposite directions to avoid overlapping yet still match the size of a finger.
The iPhone increases the hit areas of links in the browser. If you open a page that is not adapted for a mobile screen, tapping a microscopic link within the text works flawlessly.
Even if there are several small links positioned nearby, you usually hit the correct one on the first try. Apparently, the hit areas are shifted in opposite directions to avoid overlapping yet still match the size of a finger.
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. The arrangement of the keyboard doesn’t change.
Video from Apple’s website, 2007
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. The arrangement of the keyboard doesn’t change.
Video from Apple’s website, 2007
There is a problem in the design of the iPhone’s phone book.
Bad
Better
FaceTime is an internet calling service. On the right side of the line are two small icons: the 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, a video call begins, because the 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 segment of the line.
There is a problem in the design of the iPhone’s phone book.
Bad
FaceTime is an internet calling service. On the right side of the line are two small icons: the 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.
Better
Unfortunately, if you tap the right edge of the line, a video call begins, because the 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 segment of the line.
The pixel being pointed at
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 at the top. On Windows, the first item appears right 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 place the most of useful functions close to the cursor.
Context menu on the Mac
Such menus did not catch on beyond the world of 3D
Context menu on the Mac
Such menus did not catch on beyond the world of 3D
The pixel being pointed at
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 at the top. On Windows, the first item appears right 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 place the most of useful functions close to the cursor.
The corners of the screen
All the pixels on the screen are the same size. But when the cursor reaches the corner, you can continue moving the mouse until it falls off your desk and the cursor will stay in the same spot. So, for the cursor, the sizes of the corners are endless: to hit them, all you have to do is 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 them, screen corners stand after the pixel below the cursor.
If you are reading this book on a touch screen, there will be no such effect: your finger will not stop at the edge of the grey area. It is still a good idea to use the corners on phones and tablets from a habit point of view—we’ll talk about that in the end of the chapter. And of course one should remember that the elements in the upper part of a touch screen are harder to reach with your finger.
The circle simulates the behavior of the mouse cursor and does not go beyond the screen’s edges. Try it on a computer with a mouse in fullscreen mode
The corners of the screen
All the pixels on the screen are the same size. But when the cursor reaches the corner, you can continue moving the mouse until it falls off your desk and the cursor will stay in the same spot. So, for the cursor, the sizes of the corners are endless: to hit them, all you have to do is 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 them, screen corners stand after the pixel below the cursor.
If you are reading this book on a touch screen, there will be no such effect: your finger will not stop at the edge of the grey area. It is still a good idea to use the corners on phones and tablets from a habit point of view—we’ll talk about that in the end of the chapter. And of course one should remember that the elements in the upper part of a touch screen are harder to reach with your finger.
The circle simulates the behavior of the mouse cursor and does not go beyond the screen’s edges. Try it on a computer with a mouse 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.
The Mac has the Hot Сorners feature. Moving the cursor to the screen corners executes the selected command without even clicking.
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.
The Mac has the Hot Сorners feature. Moving the cursor to the screen corners executes the selected command without even clicking.
Screen sides
In terms of the ease of hitting them, the sides come after the screen corners. Objects at the edges have endless size 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 the titles they had, the buttons were very informative—we’ll talk more about that in the ‘Informativeness’ chapter.
Unfortunately, since Windows 7, the taskbar buttons have become small, like in the Mac’s Dock.
A maximized Word window or the window of any other program had its scroll bar at the right edge so it would be easier to click. And when the mouse with the scroll wheel was invented, the need to aim disappeared.
Informativeness
Screen sides
In terms of the ease of hitting them, the sides come after the screen corners. Objects at the edges have endless size 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 the titles they had, the buttons were very informative—we’ll talk more about that in the ‘Informativeness’ chapter.
Unfortunately, since Windows 7, the taskbar buttons have become small, like in the Mac’s Dock.
A maximized Word window or the window of any other program had its scroll bar at the right edge so it would be easier to click. And when the mouse with the scroll wheel was invented, the need to aim disappeared.
Informativeness
In most programs, the toolbar is under the window title.
Here, the toolbar has a left bleed. When the window is maximized, the width of the toolbar buttons is infinite. Scroll bars on the right are at the edge for the same reason.
In most programs, the toolbar is under the window title.
Here, the toolbar has a left bleed. When the window is maximized, the width of the toolbar buttons is infinite. Scroll bars on the right are at the edge for the same reason.
Interface of SPM image processing program at NT‑MDT company
‘Psychology’ should not be a link to the category
Headline of a comment in LiveJournal
One object—one link
In Fitts’s experiment, it is clear that you are supposed to 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 different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”
But sometimes the object on the screen consists of different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”
If you make the tag ‘Psychology’ a link to the category, there will be confusion. The headline is perceived as a single object with a small caption.
In the the comment’s headline, the ‘no subject’ link leads to the page the comment was left on, the icon of a man—to the author’s profile, and the user name — to the blog. But the line of blue links is perceived as a single object. Users will click it without studying its internal structure. Arriving at one of the aforementioned webpages is unpredictable.
Even if you remember where everything is, you can’t trust that line. You have to divide the object into pieces and decide where to aim every time.
There should only be on link left there, because there is only one object.
‘Psychology’ should not be a link to the category
Headline of a comment in LiveJournal
One object—one link
In Fitts’s experiment, it is clear that you are supposed to 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 different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”
But sometimes the object on the screen consists of different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”
If you make the tag ‘Psychology’ a link to the category, there will be confusion. The headline is perceived as a single object with a small caption.
In the the comment’s headline, the ‘no subject’ link leads to the page the comment was left on, the icon of a man—to the author’s profile, and the user name — to the blog. But the line of blue links is perceived as a single object. Users will click it without studying its internal structure. Arriving at one of the aforementioned webpages is unpredictable.
Even if you remember where everything is, you can’t trust that line. You have to divide the object into pieces and decide where to aim every time.
There should only be on link left there, because there is only one object.
Gmail
A particular case of the ‘One object—one link’ rule is a table row. In a list of emails, the link in the name could lead to all emails from that person, the subject of the email—to the message, and the date—to all emails for that day. That would be logical.
But if you divide the row into such parts, you will have to think before clicking and you will make mistakes. One row is one object.
Gmail
Gmail
A particular case of the ‘One object—one link’ rule is a table row. In a list of emails, the link in the name could lead to all emails from that person, the subject of the email—to the message, and the date—to all emails for that day. That would be logical.
But if you divide the row into such parts, you will have to think before clicking and you will make mistakes. One row is one object.
In the old design of Yandex TV guide, there was a TV show on 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 the shows and channels were clickable. The names lead to the shows’ webpages and the channels lead to the channels’ webpages. This created confusion: you clicked a line with a show and you'd be sent to a channel’s webpage. Also, there is no logic in the visual design: the links are not underlined and the colors are not related to behavior.
2011
2016
2011
2016
In the old design of Yandex TV guide, there was a TV show on 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 the shows and channels were clickable. The names lead to the shows’ webpages and the channels lead to the channels’ webpages. This created confusion: you clicked a line with a show and you'd be sent to a channel’s webpage. Also, there is no logic in the visual design: the links are not underlined and the colors are not related to behavior.
The classic forums are an egregious violation of the ‘One object—one link’ rule.
Imagine an overly complicated Fitts’s experiment where there are lots of black stripes, but you have to hit only some of them. Forum developers have exposed users to such challenges.
The classic forums are an egregious violation of the ‘One object—one link’ rule.
Imagine an overly complicated Fitts’s experiment where there are lots of black stripes, but you have to hit only some of them. Forum developers have exposed users to such challenges.
With gaps
Individuals
that didn’t pay taxes
should be informed
differently
No gaps
Individuals
that didn’t pay taxes
should be informed
differently
“Gapped” targets are a similar problem. Often, there are links divided up into several lines and clicking between the lines does not work.
As long as browsers themselves have still not learned how to “glue” such links into a single hit area, it’s web developers that have to do it.
Slowly scroll up and down
With gaps
Individuals
that didn’t pay taxes
should be informed
differently
No gaps
Individuals
that didn’t pay taxes
should be informed
differently
“Gapped” targets are a similar problem. Often, there are links divided up into several lines and clicking between the lines does not work.
As long as browsers themselves have still not learned how to “glue” such links into a single hit area, it’s web developers that have to do it.
Slowly scroll up and down
If a link is related to an adjacent picture, they should compose a common hit area.
If a link is related to an adjacent picture, they should compose a common hit area.
Projects on Ilya Birman’s website
Point‑and‑click is a single gesture
When we see an object, we move the cursor to it and then click the mouse button. But this is a single gesture: we do not change our decision to click while moving the mouse. Therefore, the elements that appear and obstruct the target while you aim are no good: you will click something you didn’t intend to click.
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, your 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 sometimes appeared and blocked the target?
Point‑and‑click is a single gesture
When we see an object, we move the cursor to it and then click the mouse button. But this is a single gesture: we do not change our decision to click while moving the mouse. Therefore, the elements that appear and obstruct the target while you aim are no good: you will click something you didn’t intend to click.
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, your 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 sometimes appeared and blocked the target?
Dropdown menus on websites ignore the fact that point‑and‑click is a single gesture. When you aim at the main menu item, a submenu drops down. You can’t predict such behavior: this element is not typical for the web and it looks like a usual line of links.
After clicking, you see that the menu has dropped out, but the browser is already loading the next webpage. Now, it’s useless to click: wait until the page loads.
Alfa‑Click online bank
Dropdown menus on websites ignore the fact that point‑and‑click is a single gesture. When you aim at the main menu item, a submenu drops down. You can’t predict such behavior: this element is not typical for the web and it looks like a usual line of links.
After clicking, you see that the menu has dropped out, but the browser is already loading the next webpage. Now, it’s useless to click: wait until the page loads.
Alfa‑Click online bank
Operating systems sometimes use multilevel menus.
Having spotted the Color Balance item we were looking for in the submenu that opens up, we move the cursor toward it using the shortest path, not thinking that the unneeded Layer Mask and Vector Mask items will be in 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 the movements and correctly determines the user’s intent: if you diagonally move the cursor fast enough, the submenu will not close.
Operating systems sometimes use multilevel menus.
Having spotted the Color Balance item we were looking for in the submenu that opens up, we move the cursor toward it using the shortest path, not thinking that the unneeded Layer Mask and Vector Mask items will be in 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 the 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 put some thought into the cursor movement direction as well. If you move the cursor to the right within the highlighed triangle, it will not switch you to the adjacent menu items.
The developers of Amazon’s two‑level menu put some thought into the cursor movement direction as well. If you move the cursor to the right within the highlighed triangle, it will not switch you to the adjacent menu items.
Force of habit
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 has to be spent on 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 state of the inteface, people will have to spend time looking for it. Therefore, important elements should not be moved.
Those who know touch typing, press the keyboard keys almost instantly. Advanced users like hot keys and tend to use a keyboard instead of a mouse whenever they can.
The corners of touch screens do not have an infinite physical area, unlike the corners of a computer screen. But those who are used to holding a device in their hands will be able to find the corners with their eyes closed, almost like a key on a keyboard. Therefore, it is important to use corners in any interface.
There is a place for every thing
Force of habit
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 has to be spent on 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 state of the inteface, people will have to spend time looking for it. Therefore, important elements should not be moved.
Those who know touch typing, press the keyboard keys almost instantly. Advanced users like hot keys and tend to use a keyboard instead of a mouse whenever they can.
The corners of touch screens do not have an infinite physical area, unlike the corners of a computer screen. But those who are used to holding a device in their hands will be able to find the corners with their eyes closed, almost like a key on a keyboard. Therefore, it is important to use corners in any interface.
There is a place for every thing