🗂️ 🔂 🗻 Form design patterns. Book Review 🛌🏿 🕐 🙃

Introduction by review author

The book reveals, sometimes not obvious to designers and front-end developers, the themes of field design, the concept of working with data types and usability. The book will be useful for both beginners and interface-savvy designers, since the first will give an understanding of the basics, and the second will give food for thought on, sometimes controversial, design patterns. The review will be presented in the form of short abstracts from the book and brief comments by the reviewer.

Part one. About the fields

1. A label on top is better than a label on the left.

Why: The thesis has become a classic of the genre. A lot of articles have been written on this topic, for example , this one and hundreds of similar ones. Also, placing the label on top we get more space if the label is long. It would seem obvious, but many designers stubbornly put labels on the left.

2. Placeholders not to describe filling rules

Why: Placeholders disappear when clicked + crop in the field.

3. Do not ask for a password again

Why: Enrages to enter twice.

4. Error text to write between the label and the field

Why: It will not be closed by an autocomplete or keyboard on a mobile phone.

Opinion: It seems that the thesis is understandable, but it looks really super unusual. For all the time of designing interfaces (9+ years), I only met this once and only in the layouts of one designer. But perhaps it is worth taking this pattern into service.

5. Selects are better not to use

Why: Hide options, do not zoom on some devices, an extra click, someone is trying to write to them.

Opinion: I try not to use selects if the points are less than or equal to 3rd. If so, it’s easier to make tags or a radio group. Perhaps the fact that some people believe that this is an input field, not a select and try to write there, gave rise to a hybrid of input and select in the form of a drop-down menu, but the first item of which is the input field (most often a search). This is both a solution and a crutch at the same time.

6. When you do not need a calendar to indicate dates

A calendar is not needed for:

Dates of birth, because everyone remembers this date by heart and is easier to enter by hand;
Card expiration dates;
The dates that are written in the documents and you just need to retype them without hesitation.

7. Create a “passphrase”

Why: There is an opinion that the phrase is easier to remember.
Opinion: ¯ \ _ (ツ) _ / ¯

8. Use "- / +" instead of selects

Rule: Use plus and minus if the numbers are not large. A good example is the choice of the number of passengers per flight. The book says that there were tests on this subject and the plus / minus showed themselves better.

9. The size of the field should be under the content

Why: Yes, because it is logical! And it doesn’t matter that this way the fields are not even. But in half a second it is clear what type of content there should be.

10. Speak right where the mistake is

Why is it usually not so: It is believed that this is not a security, after all, saying that the password is not correct, we hint that the login is correct. But in fact, hackers will not check all the passwords that exist in the world if they find out that the Login, which is most often an email address. mail and is open information suitable.

Part two. About buttons

1. Align the buttons to the left

Why: Look goes from left to right. An exception may be a modal window in which there are no input fields. For example, in Google's material design of the button in the modals on the right.

2. Do not disable the button

Why: It will not be possible to go to it by pressing Tab, it will not be read by some screen readers and it is poorly visible due to dullness.

Opinion: Until recently, I preferred to design a button to make it clear to users that they were underfilling something in the form. And somehow he didn’t even doubt that this might not be obvious. Tests on users showed that users see a gray color, but not everyone understands that it means that something is wrong. It is as if you first saw a traffic light and were able to distinguish its colors, but simply did not know what each color means. You would have no matter what is burning now.

3. Write on the buttons a verb

Why: It’s more clear what will happen.

4. Do not put the link “I do not remember the password” in front of the button

Why: For those who go through the fields through the Tab, this may work as going to a link instead of a button and out of habit, he will press Enter, running an unnecessary password recovery script.

5. With a long form, do not be ashamed to put a button on top

Opinion: Some kind of nonsense. It’s better to fix the button from below so that it is always visible when scrolling. But, for example, Yandex.Mail puts a button on top.

Part three. Browsers and Automation

Do not make automatic transitions from one field to another when entering the required number of characters. It can confuse users
HTML5-enabled browsers have built-in form validators and each browser has its own logic. It makes sense to disable default validation
It is necessary to disable auto error correction and auto-increase the first letter. Otherwise, it seems to users that this was a mistake and the data would not be accepted
According to statistics, auto-completion in Chrome is used 9 billion times a month. This, on average, saves the user 12 seconds, which gives 1,250,000 days per month. Fun fact
Do not filter without clicking on the "Filter" button. A button is needed, for example, if there are not only radio and checkboxes, but also input fields (cost, some intervals, etc.). But they themselves continue to write about tests, where users believed that the filter does not work without realizing that you need to click on the "Filter" button. ¯ \ _ (ツ) _ / ¯

Part Four. About everything

At some point, the book moved from forms to describing the usability of icons and other things that are not relevant to the topic. They write in the book that it’s rather strange to see texts about icons here, but icons are also part of the interface, like forms, and therefore it can be described. But I nevertheless found quite interesting things among the little useful information. About them below.

1. Spreading the Login and Password fields on different pages is not a shame

On the GOV.UK website, in the form of authorization, they made a Login on one page, and the Password on another (now not so) and users did not notice anything strange.

Opinion: Now I increasingly notice this approach. From Google to various services like Abstract.

2. Showing steps is optional

There is no point in showing progress bars with steps. They take up a lot of space. The British government removed the bar and the conversion has not changed.

3. The topic with memorizing 7 ± 2 elements is no longer relevant

Why: Because no one remembers anything on the sites. You can simply scroll up if you forget something.

4. Put the address fields in the order accepted in a particular region

This is not from the book, but from my essay. The International Postal Association has written rules. For example, Russia has adopted the following procedure:

Ivanov Ivan
st. Lesnaya, house 5, apt. eleven
Moscow
Russia
Postcode

Form design patterns. Book Review