Почему текстовые поля Material Design плохо спроектированы?

Где разместить метку в веб-форме? Раньше мы говорили о метках с выравниванием по левому краю и о метках с выравниванием по верхнему краю. Теперь мы говорим о плавающих метках (floating labels). Давайте разберемся, почему их не стоит использовать и что выбрать вместо них.

Я проектирую формы более 20 лет и тестировал их для крупных компаний, таких как Boots, Just Eat и Gov.uk. При этом часто возникает вопрос: «Где разместить метку?». Раньше мы выбирали между меткой с выравниванием по левому краю и меткой с выравниванием по верхнему краю.

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

Почему текстовые поля Material Design плохо спроектированы?
В текстовых полях Material Design используется паттерн плавающей метки

Некоторые считают, что плавающие метки лучше всего подходят, потому что они используются в руководстве Material Design. Вместо этого я рекомендую использовать обычные текстовые поля, в которых есть:

  • Метка за пределами поля ввода (чтобы сообщить пользователю, какую информацию вводить),
  • Четкая граница по периметру (чтобы было понятно, где печатать).
Почему текстовые поля Material Design плохо спроектированы?
Обычное текстовое поле

В этой статье я объясню, почему я всегда рекомендую обычные текстовые поля и почему Google ошибается, используя плавающие метки.

Плавающие метки лучше, чем альтернатива, но все еще имеют ряд проблем

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

Почему текстовые поля Material Design плохо спроектированы?
Метка-плейсхолдер

Я видел, как множество людей взаимодействуют с формами, и знаю, что метки-плейсхолдеры имеют ряд проблем:

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

Например, размер метки должен быть крошечным, чтобы она могла поместиться внутри поля, что может затруднить ее чтение. А длинные метки использовать нельзя, поскольку они будут обрезаны полем ввода:

Почему текстовые поля Material Design плохо спроектированы?
Длинные метки обрезаются текстовыми полями Material Design

Обычные текстовые поля лучше, чем метки-плейсходеры или плавающие метки

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

Почему текстовые поля Material Design плохо спроектированы?
Обычные текстовые поля могут содержать длинные текстовые метки

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

Тест Google не включал обычные текстовые поля

В статье Google «Эволюция текстовых полей Material Design» показано, что были протестированы только 2 варианта, и оба использовали плавающие метки.

Почему текстовые поля Material Design плохо спроектированы?
2 варианта текстовых полей, протестированных Google: плавающие метки с подчеркиванием и белым прозрачным фоном (слева) и плавающие метки с серым фоном (справа).

Важно отметить, что в тест не были включены обычные текстовые поля, что означает, что они фактически не сравнивали юзабилити дизайна плавающих меток с обычными текстовыми полями. И, прочитав ответы Google на комментарии к их статье кажется, что юзабилити не было их главным приоритетом.

Google непреднамеренно сделали метку важнее юзабилити

Я изучил, почему в Material Design используются плавающие метки, и обнаружил комментарии Майкла Гилберта, дизайнера, который работал над ними.

Они указывают на то, что Google пытались найти баланс между меткой и юзабилити.

Комментарий Мэтта Эрикссона:

Похоже, акцент был сделан на форме, а не на […] функциях, или даже на желании просто отличить компоненты Material от проверенных (скучных) полей ввода. […]. Было ли проведено исследование, которое подтвердило, что они достигли цели, которая не была недостижима с обычными полями ввода? Есть ли ценность в новом решении?

Ответ дизайнера Google:

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

Комментарий Дениса Лесака:

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

Ответ дизайнера Google:

[…] цель исследования заключалась не в том, чтобы просто определить, что одна версия лучше другой […]. Исследование было сосредоточено на определении характеристик дизайна, которые привели к наиболее полезному и прекрасному опыту.

Несмотря на то, что Google стремился к балансу, в конце концов они непреднамеренно пожертвовали юзабилити в пользу «минимализма» и «прекрасного опыта».

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

Почему текстовые поля Material Design плохо спроектированы?
Пример формы с использованием обычных текстовых полей, которые хорошо выглядят и хорошо работают

Вывод

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

Эстетика важна, но метка внутри поля не делает форму красивой. Вместо этого, она затрудняет ее использование.

Примечание

На момент написания этой статьи, Smashing Magazine использует паттерн плавающей метки, который автор жестко критикует в этой статье. Проведя тесты юзабилити, мы можем подтвердить, что плавающие метки – не самая лучшая идея, и вскоре мы планируем скорректировать дизайн, перейдя к обычным текстовым полям.

Благодарности

Спасибо Caroline Jarrett и Amy Hupe за помощь в написании этой статьи. И спасибо Maximilian Franzke, Olivier Van Biervliet, Dan Vidrasan, Fabien Marry за фидбек на черновик статьи.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Дизайн умных уведомлений в мобильных и веб-интерфейсах
Подробнее

Дизайн умных уведомлений в мобильных и веб-интерфейсах

Бесконечное количество статей, компаний, продуктов и конференций посвящены это теме. Есть масса доказательств того, что уведомления явно отстали от сегодняшних потребностей пользователя, но так же не может длиться вечно. Как можно исправить ситуацию? Каким будет будущее уведомлений?

Лучшие статьи, раз в неделю, с доставкой на почту

Total
18
Share