Действительно ли ярлыки с плавающей точкой действительно проблематичны?

Это ответ на статью Адама Сильвера от 25 мая 2017 года, озаглавленную «Плавающие ярлыки являются проблематичными».

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

Оригинальный дизайн с плавающей надписью, который я разместил в Dribbble в 2013 году

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

Адам делает много замечательных замечаний в своей статье, и в некоторых случаях я бы согласился.

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

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

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

Но просто помните, что одна форма не будет повышать уровень конверсии через крышу. Вы должны создать достаточно ценности и решить достаточно большую проблему с вашим контентом, чтобы пользователь действительно заинтересован в использовании вашей формы в первую очередь.

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

Но я могу сказать, что недавно я использовал плавающие надписи в форме курса от Intro до Icon Design, и коэффициент конверсии превысил 30%. Согласно моим быстрым исследованиям, это в 10 раз выше, чем в среднем по форме, что дает только 3% конверсий.

Из бесплатного видеокурса «Введение в иконки»

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

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

1. Там нет места для подсказки

В статье говорится:

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

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

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

Спорить о размещении подсказок бесполезно, если только у вас нет предельно четкой картины точной проблемы, которую вы пытаетесь решить с помощью формы.

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

2. Они трудно читаемые

В статье говорится:

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

Это действительно зависит от размера текста. А «трудно читаемый» - это переменная, а не константа, основанная на зрении пользователя.

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

Если текст отображается в стандартном размере 16–18 пикселей, он обычно приемлем для чтения. Возможно, больше, чем, скажем, размер 12–14 пикселей.

Итак, давайте на минутку согласимся, что 18px на самом деле легче читать, чем 12px ...

Неужели это слишком непостижимо, чтобы предположить, что легко читаемые 16–18 пикселей, контекстно масштабированные до 12–14 пикселей после того, как пользователь начинает печатать, внезапно окажутся слишком маленькими для чтения?

Я не отрицаю, что 12px может быть труднее читать, чем 18px, но я вижу метку с плавающей точкой как артефакт прошлого, а не ключ к будущему.

Это остатки, а не инструкция о том, что делать.

3. Им нужно пространство для въезда

В статье говорится:

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

Это правда, абсолютно.

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

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

НО…

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

И с меньшим размером текста, скажем, 12px вместо 16px, вы эффективно сэкономите 4 или более пикселей пространства. Возможно, даже 8px, так как вам не нужно будет добавлять дополнительное поле ниже метки в традиционном смысле.

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

Таким образом, если вы сохраняете 8px на 5 полях ввода в форме, вы сохраняете в общей сложности 40px. Это примерно такая же высота кнопки на экране мобильного телефона.

Будет ли это полезно для вашего проекта? Я не знаю. Вы, как дизайнер, должны будете решить, что для каждого случая использования вы сталкиваетесь.

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

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

Приведенные ниже формы - это скриншоты проектов «в процессе», которые я вытащил из архива.

Левая форма использует комбинацию выровненных по верху меток и выровненных по левому краю меток. Мы экспериментировали - пытались найти идеальное решение.

Затем я спроектировал форму справа в качестве альтернативы сдвиговому количеству сумасшествия, происходящего в форме. Мы все согласились с тем, что он чувствовал себя более чистым, менее подавляющим и лучше в целом.

Изображение взято из проекта Shiplify, над которым я работал в 2014 году

Вы можете видеть, что, хотя только половина полей была выровнена сверху, это все равно привело к сохранению более 420 пикселей по вертикали.

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

Я знаю, что это не на 100% достоверное и статистически убедительное тестирование, но, тем не менее, это начало.

Я хотел бы получить что-то вроде этого должным образом проверено однажды, но до тех пор это интуиция, а не факт.

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

4. Анимация проблемная

В статье говорится:

Анимация, даже если она работает хорошо, может отвлекать и дезориентировать, особенно для пользователей с низким уровнем доверия или слабовидящих. И при увеличении метка может исчезнуть с экрана.

Подожди секунду. Если анимация сделана хорошо, то она по определению «хорошо», «хорошо», «удовлетворительно», «желательно» и т. Д.

Поэтому фраза «отвлекает и дезориентирует» не может сосуществовать с «сделано хорошо».

Анимация форм из бесплатных учебных примеров Learnaiux.com

Я знаю, что я невероятно предвзят, но когда я заполняю форму, которая действительно привлекает анимацию Float Label, я получаю крошечный крошечный прилив допамина, когда анимация разрешается, и я перехожу к следующему полю. Небольшое чувство завершенности, которого раньше не было.

Это напоминает мне игру, в которой что-то визуально происходит на пути вашего персонажа. Как след.

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

Я все равно с радостью буду использовать вашу форму, если другой конец вашей формы решит мою проблему.

5. У них плохой контраст

В статье говорится:

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

Низкий контраст не имеет ничего общего с плавающей меткой и имеет отношение к размеру и цвету.

Минимальный WCAG 2.0 (Рекомендации по доступу к веб-контенту) гласит, что коэффициент цветовой контрастности 4,5: 1 необходим для соответствия рекомендациям AA для обычного размера текста ниже 18 ~ px.

Самый светлый шестнадцатеричный код серого цвета, который дает приемлемый коэффициент контрастности АА, равен # 767676 или # 757777 на фоне #ffffff (белый). Это если вы используете обычный шрифт весом менее 18 пикселей. Если вы используете жирный шрифт с размером шрифта 14 пикселей, вы можете отложить на большую контрастность, которую обеспечивает WCAG, которая составляет 3,5: 1 и в итоге получается # 898989 на #ffffff. Примечание: это мой любимый контраст.

Sidenote: Я разработал проекты для банков, которым требуется минимальный рейтинг контрастности АА для их цифрового продукта. Лично я не сталкивался с клиентом, которому требовалось больше, чем AA, но мы поставили AAA в качестве цели (и достигли ее), когда разрабатывали систему Unity Design Exxon.

Хорошо, я понял, что такое не так, но я хочу сказать, что это проблема цвета и дизайна, а не проблема с плавающей надписью.

6. Они могут быть приняты за значение

В статье говорится:

Люди могут пропустить поле, думая, что оно уже заполнено. Когда они отправят, они увидят ошибку, которую нужно исправить. Это расстраивает и отнимает много времени.

Это очень важный момент, а также то, почему цвет и иерархия имеют первостепенное значение при разработке интерфейсов.

Более темные метки над пустыми полями ввода довольно сложно принять за что-то, уже находящееся в поле.

Если вы установите прецедент для пользователя, включив плавающие метки при вводе пользователем, а цвет текста пользовательского ввода будет намного темнее, чем цвет заполнителя - скажем, # 767676 по сравнению с # 222222 - тогда вероятность путаницы может быть намного ниже.

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

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

7. Они неправильно расположены

В статье говорится:

Радиокнопки, флажки и поля выбора имеют статические метки и легенды. Где как текстовые поля имеют плавающие метки. Это создает противоречивый опыт.
Например, при просмотре текстового поля пользователь должен заглянуть внутрь элемента управления. Для окна выбора они должны смотреть за его пределы.
Изображение взято из справочной статьи

Это проблема дизайна, а не проблема плавающей метки. Shopify делает невероятную работу с плавающей надписью на их полях ввода и полях выбора.

8. Этикетка может быть обрезана

В статье говорится:

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

Это не проблема меток с плавающей точкой как таковая, это проблема дизайна плохой формы.

Никто не должен иметь такую ​​длинную метку-заполнитель.

И если вам действительно нужно задать вопрос в две строки в качестве метки ввода, то я на 100% рекомендую НЕ использовать метку с плавающей точкой.

Это просто не имеет смысла для этого варианта использования.

9. Они игнорируют стандарты

В статье говорится:

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

Это стандартная ссылка на статью. Это читает:

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

Хммм, «Слово или короткая фраза, предназначенная для помощи пользователю» звучит так, как будто оно может описать ярлык!

Теперь в стандартных документах также сказано:

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

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

Я согласен на 100%, что отсутствие метки и только данных-заполнителей - плохая идея. Вот почему существует лейбл float!

Этикетка была создана ПОСЛЕ того, как был написан этот стандарт. Не стоит ли оспаривать первоначальные предположения в старых документах после появления новых идей? Особенно те, которые принимаются так быстро.

Разумно ли проявлять любопытство к этому, а не пренебрегать?

Должна быть какая-то веская причина, по которой Google принял этот шаблон в качестве стандарта в Рекомендациях по проектированию материалов.

В дополнение к Google, следующие компании приняли шаблоны меток с плавающей точкой в ​​своих приложениях.

  1. Shopify
  2. слабина
  3. Цифровой океан
  4. дельта
  5. Форум
  6. Много больше я не могу вспомнить ...

Резюме

В статье говорится:

Формы не являются источником развлечений. Плавающий ярлык не заставит пользователей пользоваться формами. Пользователям все равно. Они просто хотят результата.

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

Я добавлю предостережение, что вы не должны ставить развлечения выше функциональности и ясности.

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

Я определенно согласен с первым предложением, и иногда улучшение дизайна формы - это удаление полей или переосмысление, если форма даже необходима.

Но разве мы не должны тратить время на ВСЕ аспекты улучшения дизайна формы?

Эта статья была первоначально опубликована на mds.is, потому что теперь, очевидно, вам нужно публиковать в своем блоге И на средних, потому что кто хочет форматировать только один пост в блоге?

Дополнительную информацию о происхождении шаблона метки с плавающей точкой смотрите в этом посте.