Парад интерфейсных калек: Почему ваши инпуты скачут, как усопшие бабки в свои лучшие дни, и как это лечится за 5 минут
Смотришь на современные формы регистрации на крупных рунетовских проектах и понимаешь: версткой там занимаются люди, у которых вместо рук — непарные конечности, а вместо понимания UX — пустота. Кажется, их главная цель — сделать так, чтобы пользователь забил на регистрацию и ушел плакать.
Давай разберем классический пример клинического идиотизма, который до сих пор встречается на каждом втором legacy-сервисе. Излюбленный аттракцион говноделов: «Дата рождения из трех отдельных селектов».
В чем анатомия этого интерфейсного преступления
Когда «верстальщик» решает, что дата рождения должна состоять из трех независимых тегов , в мире грустит один Senior-архитектор. На скриншоте мы видим эталонный каскадный коллапс:
- Отсутствие базовой линии (Baseline Alignment): Посмотрите на эти поля. Одно уехало вверх, второе утонуло, третье вообще держится на честном слове. Они даже не смогли прописать элементарный align-items: center или настроить нормальный flexbox в CSS. Из-за разной высоты плейсхолдеров и корявых внешних отступов (margin) форма выглядит так, будто её пожевал дворовый пес.
- Скачущая валидация: Появляется красная плашка с текстом ошибки (кстати, формулировка «Да ну хватит уже!» — это отдельный привет выгоревшим копирайтерам), и... весь интерфейс подпрыгивает! Ошибка выплевывается в статический поток документа, раздвигает блоки и ломает верстку намертво. Пользователь пытается кликнуть на «Месяц», а поле в этот момент улетает вниз. Симулятор охоты на инпуты объявляется открытым.
- Мобильный ад: На смартфонах эти три селекта превратятся в кашу. Юзеру придется трижды тапать по экрану, вызывать три нативных системных барабана ОС, чтобы просто указать, что он родился в июне 1995-го. Это не UX, это пытка.
Как это должно быть спроектировано нормальным человеком
Я никогда не заставлю пользователя страдать на этапе банального ввода даты. Если перед тобой стоит задача собрать день рождения, у тебя есть два пути, и оба они лежат через чистую инженерию, а не через костыли.
- Вариант А: Единое маскированное поле ввода. Один нормальный текстовый инпут типа <input type="text"> с жесткой, контролируемой маской на стороне фронтенда (DD.MM.YYYY). Пользователь просто тапает один раз и вбивает 8 цифр со своей клавиатуры. Всё! Никаких кликов по трем выпадашкам. Браузер сам подставит точки, а валидация отработает на лету.
- Вариант Б: Нативный календарь с умом. <input type="date"> с кастомной стилизацией под строгий минимализм или glassmorphism, если это уместно в визуальном стеке. Современные браузеры прекрасно рендерят нативные календари, которые на мобилках открываются идеально под палец.
- Изолированные ошибки: Любой текст валидации должен иметь свой зарезервированный слой в DOM-дереве (через absolute positioning или фиксированную высоту контейнера ошибки). Когда вылезает предупреждение, интерфейс должен стоять как вкопанный. Никаких прыжков.
P.S. Будучи «хабро-разработчиками» с десятилетним стажем, имейте в виду: если вы до сих пор не научились выравнивать три инпута в ряд и прятать ошибки так, чтобы верстка не устраивала эпилептический припадка — грош цена вашим статьям про «highload» и микросервисы. Научитесь сначала кнопки ровно ставить, детки.