User Interface
Interactive handbook

In childhood, I used to try to light a gas stove with a match. I was striking a match, then pushing and turning a knob⁠—the match was burning my fingers, I was smelling the gas, but the gas hob was not lighting up anyway. It turned out that I was misinterpreting the icons on the stove and turning the wrong knob. Back then, I decided it was just a stove with unclear icons.

During my youth, I used to watch TV at night in my first rented apartment. On the remote control, there were three rows of buttons with digits and a fourth row with control buttons that was basically identical to the first three. This meant I couldn’t fumble for the digits in the dark. Volume and channel controls were identical and adjacent rocker buttons, so instead of setting the volume, I changed channels. Turning the TV off before going to bed was anything but simple: the on/off button was one of four similar buttons in the upper row. I realized that it was a bad remote control.

When I started working with computers, I hated errors jumping out because of a wrong keyboard layout. The layout indicator was placed somewhere in a corner, so it was impossible to check it every time. Clearly, there was something wrong with this interface.

Recently, I got a motorcycle license. While still training, I experienced terrible discomfort when getting into neutral gear. Unlike a car, where you get into neutral with a simple gesture from any other gear and instantly feel it by the free movement of the handle, neutral on a motorcycle is an unsteady transitional state between the upper and lower position of the pedal that you need to catch with a filigree foot movement. Neutral mode is indicated only by a green light on the panel. Unfortunately, on my battle‑scarred training motorcycle, that light worked only half the time. But then it turned out that it was even harder to get into neutral on a brand new bike⁠—the first time I used it, I could not release the clutch for five minutes while I was pulling the pedal up and down, because the light refused to lit. Getting into neutral on a motorcycle is uncomfortable.

A couple of years ago, iOS introduced a small button that returned the user from the current app back to the parent app. Unfortunately, not only this button is too small, but also placed in the same corner as the standard ‘Back’ button in the current application. Because of this I often tap the wrong button and experience irritation, as well as, I’m sure, millions of other users.

When I was becoming an interface designer, I read a book by Donald Norman and learned that the problem with stoves was not about bad icons, but about natural mapping.

When I worked on the design of the remote controls for BBK television sets, I established requirements for all remote controls in the series: the on/off button should have a special position on top, there should be no functional buttons near the buttons with digits, volume and channel rocker buttons should be perpendicular, and playback controls should be recognizable blindly, by their shape.

The problem with keyboard layout switching is that unperceived modes cause mode errors. It is hard to track a keyboard indicator, so a user should instantly see which layout is enabled during typing.

If a designer understands what gestures are and how habits are formed, he will spot a problem with the neutral gear on a motorcycle⁠—it is a modal interface with ambiguous gestures. If you are in the first gear, you get into neutral by moving your toe up, if in the second⁠—by moving down. But if the movement is too sharp, you can instantly get into the second gear, or into the first⁠—from second. As a result, in the head and in the body, three different tasks (get into neutral, first and second gear) are associated with four different habits (push down carefully, push up carefully, push down confidently, push up confidently).

A user interface designer at Apple familiar with Fitts’s law hardly would have made a mistake when placing the ‘Back’ button knowingly and voluntarily. Evidently, it is a result of a corporate compromise.

For nearly ten years, this and similar knowledge about user interface design has been accumulated in our bureau from personal observations, books and projects. When we were preparing our user interface course in 2007, I was even feeling a bit confused that I was telling about things we learned from books⁠—about the Fitts’s law, habits, and gestures.

In these ten years, a new industry of mobile apps and user interfaces has emerged, while plenty of user interface designers still have no idea about the principles of user interface design. I believe that aesthetics is an essential product requirement, but, unfortunately, modern Dribbble design culture has reduced the quality of everything else.

Therefore, I am happy to present the interactive handbook ‘User Interface’ penned by my colleague Ilya Birman. This handbook explains the basics through examples of classic and modern products, webpages and apps. We begin with the general principles of interface design, explain peculiarities of human‑product interaction, and then we describe elements by which an interface interacts with a user.

There is also original research in the book. The User Interface Syntax theory is an important contribution of the bureau to interface knowledge. It is a way to approach graphical user interface design as a language. The theory answers the question: why some menu items’ or radio buttons’ captions are perceived coherent, while others make you stumple and doubt your understanding. The theory explains why the caption “Enter” next to an input field looks naïve (even though it could help a novice).