- Статьи
- 3 мин на чтение
- 11
Как упростить поля ввода времени без применения выпадающих списков
Экономьте время, не выбирая время
Вид многочисленных выпадающих списков у любого отобъёт желание заполнять форму. Поэтому дизайнерам стоит перестать использовать выпадающие списки для выбора времени.
Эта ошибка в UX увеличивает время выполнения задачи и разочаровывает пользователей. К счастью, есть более эффективный подход к дизайну, который упрощает ввод времени и не требует прокрутки большого количества меню.
Неоднозначное состояние по умолчанию
Это форма для установки рабочего времени. В ней есть несколько проблем. На первый взгляд состояние по умолчанию кажется неоднозначным. Непонятно, что делать, если бизнес в этот день не работает. Пользователю нужно снять галочку с чекбокса, чтобы указать «Закрыто», но чтобы это понять, нужно немного разобраться в форме.
Кроме того, неясно, какое поле выбора отвечает за время открытия и закрытия. На них есть только надпись «Выбрать» (“Select”), что вынуждает пользователей гадать. Хотя они могут угадать верно, неопределённость всё равно добавляет когнитивную нагрузку.
Длинный список меню
В меню есть 24 варианта для выбора. В этом списке есть временные интервалы: равные часу и полчасу, а минуты отсутствуют. Включение минут привело бы к экспоненциальному увеличению размера меню.
Заставлять пользователей просматривать и прокручивать такой длинный список – процесс, который требует максимум времени. Кроме того, им придётся прокручивать список как для времени открытия бизнеса, так и для времени его закрытия, для каждого рабочего дня. Пользователям с нарушениями двигательных функций, которые не в состоянии хорошо управлять мышью, будет крайне трудно справиться с этой задачей.
Уберите выпадающие списки и чекбоксы
Выпадающие списки и чекбоксы – не лучшие компоненты для выбора рабочего времени. Вместо них лучше использовать переключатели и управляемые текстовые поля, потому что они более интуитивно понятные и уменьшают время выполнения задачи.
В этом случае пользователи сразу понимают, что делать, если их бизнес работает или не работает в определённый день. С помощью переключателя «Открыто/Закрыто» (“Open/Closed”) это видно и понятно. Если пользователь выбирает «Закрыто» (“Closed”), поля для ввода времени отображаться не будут.
Управляемые текстовые поля уникальны тем, что они позволяют пользователям контролировать ввод часов, минут и AM/PM по отдельности. Значение по умолчанию в подсказке начинается с «ЧЧ:ММ» (“HH:MM”), чтобы указать час и минуту.
Когда люди выбирают поле, оно выделяет ввод «ЧЧ» (“HH”), чтобы они могли ввести час. После этого пользователи переходят к «ММ» (“MM”), чтобы ввести минуты. Наконец, они переходят к AM/PM и выбирают его, нажимая стрелки вверх и вниз или вводят “P” или “A”. Не нужно вводить двоеточие, потому что оно автоматически появится в поле ввода.
Преимущество такого подхода в том, что пользователи могут вводить абсолютное время с точностью до конкретной минуты, а не только до получаса. Ещё один плюс — текстовые поля уточняют время закрытия и открытия с помощью названий «С» (“From”) и «До» (“To”). И самое большое преимущество состоит в том, что пользователям больше не нужно просматривать и прокручивать длинные списки меню для ввода времени.
Такой дизайн также позволяет сэкономить больше горизонтального пространства. Два текстовых поля займут меньше места, чем четыре выпадающих списка. Также можно сэкономить место, если сократить названия дней недели и использовать кнопку «+» для добавления временных интервалов. Иконки и сокращения там, где это возможно, — умный способ упростить дизайн.
Ещё одна деталь дизайна — межбуквенный интервал в поле ввода времени увеличен, чтобы облегчить чтение и выбор. Дополнительное пространство необходимо, чтобы разместить синюю подсказку выбора между каждым значением времени. Если всё расположено слишком плотно, подсказка может коснуться двоеточия. Небольшое увеличение межбуквенного интервала облегчает ввод данных и считывание значений.
Сравнение форм для указания рабочего времени
Когда вы сравниваете две формы, заметно, что более качественный дизайн занимает больше вертикального пространства. Этот недостаток незначителен, потому что преимущества нового дизайна в UX существенны.
Выбор состояния «Открыто/Закрыто» (“Open/Closed”) становится более понятным благодаря переключателям. Кроме того, ввод времени закрытия и открытия проще и удобнее для ввода и просмотра. С таким дизайном пользователи могут указать своё рабочее время без лишних сложностей и без выпадающих списков.
Перевод статьи How to Fix Apple’s Illegible White Button Labels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
