Ошибки в дизайне форм: шесть причин, почему с формы нет заявок

Форма оформления заказа. Имя, телефон, адрес доставки, поле для промокода, окно доставки, чекбокс с условиями и две кнопки внизу. Ничего не съехало, шрифт один на весь экран, поля одной высоты. Такие макеты принимают с первого раза и больше к ним не возвращаются.

А заявок с неё меньше, чем ждали. Не ноль — просто меньше. Аналитика показывает, что люди до формы доходят, что-то в ней делают и уходят. Жалоб нет, писем в поддержку нет, ругать нечего. Экран не сломан, он просто не работает.

Плохой экран редко бывает страшным. Он не разваливается и не пугает. Он чуть-чуть неудобный — шесть раз подряд.

Шесть проблем на одном экране

Каждый дефект по отдельности стоит доли секунды и капли сомнения. Никто не бросит заказ из-за того, что подпись поля бледновата. Но полсекунды на подпись, полсекунды на кнопку, ещё чуть-чуть на непонятную ошибку — и человек уже не заполняет форму, а разбирается с ней.

На приёмке этого не видно по простой причине: и дизайнер, и заказчик знают форму наизусть. Они смотрят на неё в двадцатый раз, на большом мониторе, мышкой, в помещении. Пользователь видит её впервые, с телефона, пальцем, часто на улице. Это два разных экрана.

Дальше — по одной проблеме. Все шесть с одной формы.

Подпись поля исчезает, как только его заполнили

Текст внутри поля — это подсказка, а не подпись. Начал печатать — подсказка пропала. Осталось поле с «Артём» и ноль информации о том, что там вообще спрашивали. Особенно весело в конце длинной формы, когда проверяешь себя перед отправкой.

Хуже всего это работает в паре с автозаполнением. Браузер подставляет всё разом, форма мгновенно оказывается заполненной, и человек смотрит на пять полей с данными, ни одно из которых не подписано. Проверить, что телефон встал в поле телефона, а не в поле квартиры, можно только по смыслу содержимого.

Лечится одной строкой: подпись живёт над полем и никуда не девается. Внутри остаётся только пример формата — плюс семь, девять цифр, вот в таком виде. Если очень хочется анимации, пусть подпись уезжает наверх и уменьшается, но не исчезает.

Технически это ещё и дешевле в поддержке. Настоящий label связан с полем, по нему можно попасть пальцем, его читает скринридер и понимает браузерный автозаполнитель. Плейсхолдер не умеет ничего из этого.

Серое на белом. Контраст 2,5 : 1

Светло-серый текст выглядит аккуратно на макете в тёмной комнате. На улице в солнце он пропадает совсем. Норма для основного текста — 4,5 : 1, для крупного — 3 : 1, и это не про эстетику, а про то, прочитают его вообще или нет.

Светло-серый почти всегда появляется из благих намерений. Строка «Доставка завтра, 10:00–14:00» кажется второстепенной, её хочется приглушить, чтобы она не спорила с заголовком. Но приглушают её цветом — самым грубым из доступных способов.

Иерархию можно построить и без потери читаемости: сделать строку мельче, поставить дальше от заголовка, снять с неё жирность. Все три приёма отодвигают текст на второй план и не мешают его прочитать. Цвет тоже можно менять — просто не ниже 4,5 : 1.

Проверять надо цифрой, а не глазом. Пипетка, любой калькулятор контраста, панель доступности в браузере — тридцать секунд на строку. Глаз в тёмной комнате врёт всегда в одну сторону.

Обе кнопки выглядят одинаково важными

Если два действия нарисованы одинаково, экран не отвечает на главный вопрос: куда вообще жать. Человек тормозит на полсекунды — и так на каждом шаге. Главное действие должно быть ровно одно, и оно тяжелее остальных по весу.

«Назад» и «Оформить» — это не пара. Это основное действие и запасной выход. Основное берёт заливку, вес и место, куда падает взгляд. Запасное становится контурной кнопкой или просто текстовой ссылкой. Разница должна читаться боковым зрением, без чтения надписей.

Если на экране два одинаковых по весу действия, значит решение за пользователя не принял никто.

Заодно проверь надписи. «Оформить» лучше, чем «Отправить», потому что называет результат, а не механику. Хорошая кнопка отвечает на вопрос «что произойдёт, если я нажму», и отвечает глаголом.

Ошибка не говорит, где ошибка

«Проверьте правильность заполнения» — это сообщение самому себе, а не человеку. Оно не называет поле и не говорит, что именно не так. Полезная ошибка отвечает на два вопроса: где и что сделать. И появляется у поля, а не внизу экрана.

Формула короткая: место, причина, способ исправить. «Телефон: введите 10 цифр после +7» закрывает все три пункта одной строкой. «Ошибка валидации» не закрывает ни одного.

Момент показа важен не меньше текста. Ругаться на поле, пока человек в нём печатает, — значит подсвечивать красным каждое незаконченное слово. Проверять стоит, когда человек ушёл из поля, и повторно — при отправке. После неудачной отправки экран сам прокручивается к первому проблемному полю и ставит в него курсор, а не оставляет человека искать красное пятно.

И не крась форму целиком. Если из семи полей ошибка в одном, красным должно быть одно поле.

В крестик 26 пикселей пальцем не попасть

Подушечка пальца — это примерно сантиметр, а не курсор в один пиксель. Иконку увеличивать не обязательно, увеличить нужно зону нажатия вокруг неё. Промахнулся по крестику — попал по строке, и это уже другое действие.

Минимальная цель по касанию — 44 px. Крестик в поле промокода может остаться визуально мелким: 26 px рисунка внутри 44 px кликабельной области выглядят ровно так же, а работают иначе. В вёрстке это делается отступами внутри кнопки или невидимой областью вокруг иконки.

Отдельно посмотри на соседей. Две мелкие цели, стоящие вплотную, промахиваются друг в друга: жмёшь удалить промокод — попадаешь в поле ввода. Между целями нужен зазор, иначе увеличенная зона нажатия одной кнопки съест соседнюю.

Проверка бесплатная: открой макет на телефоне и нажми всё большим пальцем одной руки, как это делают в реальной жизни. Мышкой на десктопе такие места не находятся никогда.

Отступы взяты на глаз

По отдельности разница в четыре пикселя незаметна. Вместе она даёт то самое ощущение, что экран «сыроват», хотя придраться вроде не к чему. Отступы берут не из глаза, а из шага — 4, 8, 12, 16, 24.

Дальше начинается интересное. Расстояние важнее рамок: оно и объясняет, что к чему относится. Подпись прижата к своему полю, поля внутри группы стоят ровнее, между группами воздуха заметно больше — и форма читается блоками, без единой линии и заголовка. Когда отступы случайные, эта подсказка ломается: подпись оказывается ближе к чужому полю, чем к своему.

На проектах я держу шаг в переменных и не ставлю в вёрстку произвольные числа. Это скучное правило, но оно снимает целый класс правок: никто не спорит, 21 тут или 24, потому что 21 просто нет в наборе.

Что с этим делать

Открой свою форму и пройди по списку. Занимает минут пятнадцать.

1. 1.

   Подпись поля видна, когда поле заполнено?

2. 2.

   Контраст текста не ниже 4,5 : 1?

3. 3.

   Сразу понятно, какая кнопка главная?

4. 4.

   Ошибка называет поле и способ исправить?

5. 5.

   Любая цель по касанию — от 44 px?

6. 6.

   Отступы взяты из шага, а не на глаз?

Проходить лучше не на макете, а на живом экране, с телефона и не в комнате с задёрнутыми шторами. Половина проблем видна только там.

И заполни форму сам, целиком, с настоящими данными. Не глазами по макету, а пальцами: с автозаполнением, с опечаткой в телефоне, с промахом по крестику. Все шесть пунктов вылезут за одну попытку — их для того и собирали в список, чтобы не искать причину, когда заявок вдруг стало меньше.