Не изобретай чекбокс

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

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

Оригинальность — это бюджет

Закон Якоба уже это сказал: ожидания людей собраны на других продуктах. Каждое нарушенное соглашение стоит переучивания, непонимания и обращений в поддержку.

Это не довод за отсутствие идей. Это довод о распределении:

Изобретай там, где твой продукт другой. Везде остальное будь скучным.

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

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

Как выбрать элемент управления

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

Радиокнопки — один выбор из нескольких, все варианты видны, взаимоисключающие. Примерно до пяти вариантов. Всегда с выбранным значением по умолчанию.

Чекбоксы — независимые включатели; истинными могут быть сразу несколько. Одиночный чекбокс — для бинарного признака, который применяется при сохранении.

Выпадающий список — один из многих, когда варианты знакомы и место дорого. Стоит клика и прячет всё, поэтому для малых наборов он хуже радиокнопок — но куда лучше тридцати радиокнопок. Свыше примерно пятнадцати вариантов бери поле с поиском.

Переключатель-тумблер — настройка, которая действует немедленно. Это правило нарушают постоянно: если на экране есть кнопка «Сохранить», тебе нужен чекбокс, а не тумблер. Тумблер, требующий сохранения, — это обещание, которого интерфейс не сдержал.

Сегментированный переключатель — два-четыре взаимоисключающих вида, все на виду, переключение мгновенное. Отличен для «День / Неделя / Месяц», плох для всего, чему нужно пять.

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

Степпер — небольшие целочисленные правки (количество 1–10). Совмещай с полем для ввода, чтобы заказывающий сорок штук не тыкал сорок раз.

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

Краткая сводка: до 5 вариантов — радиокнопки; от 5 до 15 — список; больше 15 — поиск. И: действует сразу — тумблер; применяется при сохранении — чекбокс.

Формы, где происходит основной ущерб

На формах продукты теряют людей, а правила давно известны и повсеместно игнорируются.

Одна колонка. Многоколоночные формы ломают путь чтения и заполняются не в том порядке. Честное исключение — по-настоящему парные поля вроде города и индекса.

Подписи над полями и всегда видны. Подпись вместо плейсхолдера — самый живучий плохой паттерн отрасли: подпись исчезает ровно тогда, когда нужна (при наборе и при проверке), проваливает доступность и делает заполненные и пустые поля неразличимыми.

Спрашивай меньше. У каждого поля есть цена в конверсии. Для каждого спроси: можно ли его вывести, подставить или спросить позже. Удалённое поле работает лучше укороченного.

Отмечай редкое. Если большинство полей обязательные, отмечай необязательные; если наоборот — обязательные. Звёздочка у каждого поля не сообщает ничего.

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

Ошибки живут рядом с полем. Сводка вверху длинной формы означает прокрутку и охоту. Если сводка всё-таки есть, каждый пункт ведёт ссылкой к своему полю.

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

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

Никакого «сбросить» рядом с «отправить». У этой кнопки нет плюсов и есть один катастрофический минус.

Кнопки говорят, что они делают

Подписывай результатом, а не механизмом. «Создать аккаунт», «Отправить приглашение», «Удалить 3 файла» — и никогда «Отправить», «ОК» или «Да». Человек должен, прочитав только кнопку, понимать, что произойдёт. Особенно это важно в диалогах, где «ОК» рядом с вопросом вида «Отменить изменения?» действительно двусмысленно.

Одна главная кнопка на вид. Всё остальное вторично или является простой ссылкой. Две главные означают, что решение не принято.

Разрушительные действия выглядят иначе и стоят в стороне. Другое оформление, физическое расстояние от частого действия и, желательно, отмена вместо подтверждения.

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

Навигационные паттерны, которые надо знать

Вкладки — параллельные виды одного объекта; переключаться можно свободно, ничего не теряется. Не для шагов.

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

Аккордеон — длинный список, где человеку нужен один раздел за раз. Плох для содержимого, которое сравнивают, потому что два раздела одновременно не видны.

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

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

Когда всё-таки нарушать соглашение

Не «никогда». Три условия, и все сразу:

1. Соглашение активно мешает основной задаче — не «выглядит устаревшим», а доказуемо медленнее или ошибкоопаснее для того, ради чего продукт существует.
2. Ты проверил альтернативу на живых людях, которые с тобой не работают, и она выиграла.
3. Это выучивается один раз и остаётся выученным. Новшество, которое приходится разгадывать каждый визит, — постоянный налог.

Большинство по-настоящему великих изобретений в интерфейсах — прямое манипулирование, «потяни, чтобы обновить», смахивание строки для удаления — проходят все три. Круговой выбор даты не проходит ни одного.

На практике

Проверь свои тумблеры. Найди каждый тумблер на экране, где есть кнопка «Сохранить». Каждый из них либо чекбокс в чужой одежде, либо отсутствующее мгновенное сохранение.

Убей подписи-плейсхолдеры. Перенеси каждую подпись-плейсхолдер над своим полем. Час работы и починенный реальный провал доступности.

Удали на этой неделе одно поле формы. Выведи, подставь или спроси позже. Померь эффект, если можешь.

Перепиши каждое «Отправить», «ОК» и «Да». Вынеси на кнопку результат. Прочитай диалог, видя только кнопки, и проверь, остаётся ли он понятным.

Посчитай главные кнопки на экран. Больше одной — непринятое решение.

Замени модалку встроенной панелью. Возьми наименее оправданную и посмотри, что сломается. Обычно ничего.

Проверь себя

Закрой статью и ответь своими словами:

1. Почему оригинальность — это бюджет и куда его надо тратить?
2. Что достаётся бесплатно вместе со стандартным элементом и что теряется при собственном?
3. Когда нужны радиокнопки, когда список, а когда поле с поиском?
4. Какое правило отличает тумблер от чекбокса?
5. Назови три причины, почему подпись-плейсхолдер — плохой паттерн.
6. Почему заблокированная кнопка часто хуже активной, которая объясняет себя?
7. Какие три условия оправдывают нарушение соглашения?

Коротко

• Оригинальность — фиксированный бюджет: трать его на то, чем продукт отличается, в остальном используй соглашения.
• Стандартные элементы приходят с поддержкой клавиатуры, скринридеров, мобильных и автозаполнения, которой у самописного нет.
• До 5 вариантов — радиокнопки, 5–15 — список, больше 15 — поиск. Мгновенный эффект — тумблер, применение при сохранении — чекбокс.
• Формы: одна колонка, видимые подписи над полями, меньше полей, отмечай редкий случай, проверяй при уходе из поля, ошибки рядом с полем, не дроби одно значение на три ввода, дай браузеру автозаполнить.
• На кнопке результат, а не «Отправить». Одна главная на вид, разрушительное в стороне, заблокированную кнопку обычно заменяют объяснением.
• Вкладки для параллельных видов, шаги для настоящих последовательностей, аккордеон, когда достаточно одного за раз, модалки только для действительно блокирующих решений.
• Нарушай соглашение, только когда оно доказуемо мешает основной задаче, твоя альтернатива выиграла на тесте и выучивается один раз навсегда.