Сегодня на повестке очень узкая тема. Но мне она очень интересна, потому что не так давно я сама столкнулась с вопросом: сделать единое поле ввода или разделить его на несколько. В результате все-таки пришла к единому полю.
Сегодня я разберу статью о поле ввода (input). Авторы сравнивают единое поле ввода с multiple (я его буду называть "разделенное"). Выводы к которым пришли авторы: разделенное поле имеет много недостатков, из-за которых использовать его не стоит. Но если очень хочется, то можно. Но надо помнить и учитывать его минусы.
Итак, приступим.
Разделенные поля ввода имеют следующие недостатки:
Они не дают людям пользоваться копипастой
Конечно, можно запариться и сделать так, что вставляемый текст будет посимвольно разделять по полям при вставке, но не всегда хочется тратить силы разработчика на такие мелочи. Соответственно, проще сделать единое поле и уже под капотом обрабатывать введенные данные так, как это нужно сервису.
Между полями надо переключаться
И далеко не на всех сайтах есть удобное переключение с помощью клавиатуры.
Ну и само перемещение требуется в основном тогда, когда человек исправляет ошибки в написанном. Тут и так когнитивная нагрузка высока. А еще и в нужные поля надо метко попадать.
Конечно, можно вместо пользователя автоматически перемещать курсор из одного поля в другое. Но и это имеет свои недостатки:
- Это может быть неожиданным поведением и пользователь, не имеющий подобного опыта, просто потеряется. Потребуется время, чтобы понять, куда делся курсор и что делать дальше.
- Не всегда курсоры перемещаются вовремя. Это происходит из-за того, что пользователь и система имеют разные ожидания относительно того, что должно быть введено в поле. Например, пользователь в первое поле для ввода мобильного телефона хочет ввести 8921. А система ждет от него три цифры – 921. 8 система и так подставит. И в итоге введенная пользователем единица оказывается уже не в том поле, в котором он ожидал ее увидеть.
Единое поле для ввода данных решает эти проблемы.
Разделенные поля сложно подписывать и валидировать
Сначала про подписи. Конечно, не везде требуется подписывать каждое отдельное поле. Но такое вполне может быть. И тогда стоит подумать, насколько это может упростить жизнь пользователю? Кажется, мы только все усложняем и заставляем пользователя читать то, что он с радостью бы читать не стал.
Теперь о валидации. Это мой личный кейс, моя личная боль. Мы делали поле ввода времени и разделили его на три разных поля. Но при вводе значений пользователь всегда может ошибиться. И нам надо ему подсказать, где ошибка и что именно неправильно. И для разделенных полей эти подсказки были ту мач.
Но есть в этих полях и хорошее. Почему-то ведь они используются. И вот почему:
Разделенные поля решают за пользователя, какой формат и разделитель использовать
Частая проблема многих сайтов заключается в том, что они тебе дают единое поле для ввода даты и ждут, что ты введешь ее в определенном формате. Например, в формате дд.мм.гггг. А еще часто сайты тебе никак не сообщают о своих ожиданиях. И ты, ничего не подозревая, вводишь дд.мм.гг или дд/мм/гг. Или на американский манер мм/дд/гг. И система ругается. А ведь ты ничего плохого не сделал.
В этом случае разделенные поля действительно помогают пользователю. Они решают всю неоднозначность, наглядно показывают, как формат ввода ждут от тебя и берут на себя выбор нужного разделителя.
Но этот факт не отменяет перечисленные выше недостатки разделенных полей. Поэтому все равно стоит найти способ решить проблему с помощью единого поля. Например, сделав его нечувствительным к разделителю. Пусть пользователь вводит, что угодно, а мы это сами обработаем под капотом.
Разделенные поля помогают пользователям проверить правильность введенных данных
Людям сложно считывать и запоминать длинные комбинации цифр без разделителей. Гораздо сложнее считать и запомнить мобильный телефон или номер банковской карты, если комбинация цифр написана без разделителей. Куда проще, если цифры разделены на группы по 2-3-4 штуки.
Так и здесь. Такие поля проще проверить. Но, кажется, есть и другие способы помочь пользователю. И для них не потребуется внедрять разделенные поля со всеми их недостатками. Например, вспомните, как вы вводите номер банковской карты при оплате чего-либо онлайн. Вы не ставите пробелов, но они сами появляются. И вам уже гораздо проще проверить правильно того, что вы ввели.
В статье приводится другой пример того, как можно помочь пользователю проверить правильность ввода:
Многим из вас, как и мне, пришло в голову мысль про маски в полях. Почему бы не использовать их? Тогда и думать о разделенном поле не придется.
В статье еще говорится, что маски в полях ввода – зло. Люди не ожидают, что в поле есть маска – маски сбивают их с толку.
В целом, я, наверное, с этим согласна. Чтобы сделать маску действительно полезной, нужно продумать много разных кейсов, учесть разные варианты ввода и сделать так, чтобы во всех ситуациях маска отрабатывала правильно. Это не так просто. Поэтому лучше без нее.
И как раз в этом случае (когда маска нужна, но ее польза не до конца ясна), по мнению авторов, стоит использовать разделенные поля. Авторы говорят, что разделенные поля помогают тогда, когда пользователю будет сложно угадать правильный ответ, который ждет от него система. Хороший пример в данном случае – поле даты или времени. Формат ввода этих полей может быть абсолютно разный, поэтому пользователь может ошибиться, даже введя логически правильно значение.
Вот с этим я, конечно, уже не совсем согласна. Как я писала выше, разделенные поля будет сложно валидировать. Потребуется учесть разные условия, придумать разные тексты. Конечно, можно просто запретить пользователям вводить определенные символы, но и это может стать непредсказуемым поведением (почему я не могу ввести цифру 7?).
В качестве выводов из своей статьи и статьи-источника я напишу следующее:
- Однозначного ответа на вопрос "что лучше: единое поле или разделенное" у меня так и не появилось. И, как мне кажется, его и нет
- Но в большинстве случаев вам подойдет единое поле
- Если вы не уверены в том, будет ли людям удобно работать с тем полем, что вы сделали, то просто протестируйте. Либо на макете, либо уже в проде
- И, что самое главное, не усложняйте:) Лишние условия, тексты валидаций, бесконечные подписи никому не нужны