Содержание

Повышаем удобство использования html форм путем правильного использования placeholder-а

Правильное и неправильное использование placeholder-а

Placeholder используется в качестве атрибута практически в каждой веб-форме, и не стоит забывать о нем ни одному дизайнеру или разработчику. Легче всего подать справочную информацию в виде короткой заметки непосредственно в полях сложной формы, или даже заменить таким образом метки (label). Другое дело, что неправильное использование текстового input placeholder-а вызывает много проблем с удобством использования.

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

Placeholder как метка

Разместите пояснение над полем ввода вместо того, чтобы использовать placeholder в качестве пояснения

В целях уменьшения размеров формы или устранения визуального «шума», дизайнеры используют текстовый  form placeholder как пояснение к полю ввода. Это, конечно, красиво, но нагружает кратковременную память – стоит лишь пользователю поставить курсор в поле и/или начать набор, как placeholder пропадает, и для того, чтобы его увидеть, нужно удалить уже набранное содержимое.

Посему пояснение лучше разместить над полем ввода. Одно пустое поле ввода без информации после постановки курсора вводит пользователя в ступор – становится непонятно, что делать дальше, ибо подсказок нет.

Placeholder в качестве примера

Вынесите пример вводимого текста под поле ввода, а не используйте его как placeholder

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

Placeholder в качестве подсказки

Placeholder не стоит делать в качестве подсказки к полю

Часто placeholder используют для указания дополнительной информации о том, что нужно ввести в поле. Это тоже ошибочно – как по причинам, указанным выше, так и из-за количества текста в placeholder-е. Начинающие дизайнеры и разработчики часто ошибаются, используя placeholder как достаточно длинное текстовое предложение со справочной информацией. Благо дело, этому способу есть много альтернатив, три из которых указаны выше.

Placeholder как заголовок поля

Используйте label-ы как дополнительные заголовки полей, а не placeholder-ы

Сделать дополнительные заголовки в виде placeholder-ов – идея заманчивая, но лучше повысить простоту и удобство использования формы путем применения каких-то альтернатив вроде обычного label-а.

Обычно форма выглядит куда удобнее и красивее, если placeholder-ы не используются и/или заменены на указанные выше альтернативы. Но если они необходимы…

Placeholder-ы должны быть менее заметны, чем вводимый текст

Более светлый цвет делает текст placeholder—a менее отвлекающим и отличает его от уже введенного текста.

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

Placeholder должен быть виден на любом экране

Если цвет placeholder-а слишком светлый, он может быть незаметным на некоторых экранах.

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

Placeholder не должен исчезать при постановке курсора в поле ввода

Оставляйте placeholder до того момента, пока пользователь не начнет печатать

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

Как показывает практика, форма ввода более удобна без использования placeholder-ов.

Если эта статья показалась вам стоящей, нажмите «Like» ниже, дабы другие тоже могли найти для себя что-то интересное.

Источник: uxdesign.cc

Нужен ли сайту вспомогательный текст в полях ввода — Дизайн на vc.

ru

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

6493 просмотров

Изначально плейсхолдеры появились как атрибут HTML5. Они представляют собой слово или фразу внутри поля ввода, которая подсказывает, какие данные нужно ввести.

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

Технически корректны

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

Тем не менее соответствие программному обеспечению — не значит удобство: машина имеет ограниченный чек-лист и может не учесть важные детали. Дизайнеры делают интерфейс для людей, а не для программ, считает Бэйли, поэтому не стоит оценивать его только по набору критериев.

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

Проблемы

Перевод

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

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

По мнению Эрика, это веская причина отказаться от атрибута.

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

«Следите за тем, чтобы ваш контент был семантически описан — соседи будут вам благодарны», — напутствует Эрик Бэйли.

Совместимость

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

Чтобы программа могла взаимодействовать с введёнными данными, ей нужно объяснить пользователю, какие символы она сможет корректно обработать. Сделать данные совместимыми можно с помощью заголовка — этот элемент даёт семантическое описание того, что нужно ввести и в какой форме. На уровне программирования заголовок и поле ввода можно связать с помощью атрибута for со значением, соответствующим идентификатору ввода (id).

В статье говорится, что без связки for и id вспомогательные технологии не смогли бы донести до пользователя, какие данные нужно ввести. Она стала API-хуком, который могут использовать программы вроде скринридеров или распознавания голоса. Без for и id люди, которые полагаются на вспомогательные технологии, не смогли бы прочесть данные из поля ввода и взаимодействовать с ними.

Эрик Бэйли показывает, как заголовок (lable) связан с идентификатором ввода (id)

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

Пример любви к плейсхолдерам от Facebook

Плавающий эффект заголовка — близкий родственник этого явления.

Как только пользователь начинает вводить данные, плейсхолдер занимает место над текстом

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

Эрик Бэйли

Когнитивные нарушения

В статье приведены данные бюро переписи населения США за 2016 год — около пятнадцати миллионов человек имеют когнитивные нарушения.

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

Память

Под фразой «когнитивные нарушения» могут скрываться разные состояния, в том числе кратковременная потеря памяти, черепно-мозговая травма, синдром дефицита внимания и гиперактивности. Часто они влияют на запоминание информации.

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

«Не могу вспомнить, нужна дата в формате ММ/ДД/ГГ или ММ/ДД/ГГГ?»

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

Перевод плейсхолдера: «8-15 знаков, включая минимум три цифры и один символ». — «Подождите, сколько там минимум надо было знаков и цифр?»

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

Цифровая грамотность

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

Специально для читателей из США Эрик уточняет: «Новое — не всегда значит иностранное. Всё больше представителей старшего поколения осваивают онлайн. Они становятся более технически грамотными, но чем больше пожилых пользователей, тем больше проблем с доступностью приходится решать».

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

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

Удобство

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

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

Перевод плейсхолдера: «Вы можете найти этот код в…». Эрик: «Видимо, мы никогда не узнаем, где именно»

Визуальная составляющая

Контраст цветов

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

По мнению автора, такое решение неуместно как раз из-за проблем с цветовым контрастом.

Цветовая контрастность — это соотношение, определяемое путём сравнения яркости текста и значением цвета фона; в случае с плейсхолдером мы сравниваем его текст и фон поля ввода

Эрик Бэйли

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

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

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

Автор пишет, что для наиболее распространённого размера шрифта для полей ввода коэффициент контрастности должен быть 4.5:1. Эрик отмечает, что это не его личные предпочтения, а часть разработанных правил, придерживаясь которых вы обеспечите максимально большому кругу людей возможность взаимодействовать с продуктом. Сознательно игнорируя эти правила, можно потерять часть аудитории.

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

Плейсхолдер на GoFundMe выглядит как введённые данные. Уверенность в том, что ничего не нужно менять, добавляет иконка на кнопке «Request New Password»: галочка выглядит так, словно программа одобрила адрес электронной почты

Режим высокой контрастности

В операционной системе Windows есть функция «режим высокой контрастности». Если его активировать, система заменит исходные цвета на другие, взятые из ограниченной палитры контрастных цветов. Вот как это может выглядеть:

Режим высокой контрастности в Windows 10, тема номер один, браузер Internet Explorer 11

В режиме высокой контрастности плейсхолдер окрасился в цвет, который сделал его похожим на введённые данные. Интерфейс выглядит так, будто размер пожертвования (donation amount) уже определён, и его нельзя изменить.

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

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

Хьюго Гираудел

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

Минусы

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

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

Решение

Автор предлагает поместить текст плейсхолдера между заголовком и полем ввода.

Заголовок: «Ваш номер сотрудника».Текст плейсхолдера: «Его можно найти в вашем рабочем интранет-профиле. Пример: a1234567—89».

Такое решение:

  • связывает визуальную и структурную иерархию: сначала указано, для чего нужно поле ввода, потом данные, которые нужно знать, чтобы его правильно заполнить, и в конце сама пустая графа;
  • будет переведено вместе со всей страницей;
  • не воспринимается как заранее введённые данные;
  • легко разобрать даже в условиях плохой видимости;
  • не исчезнет, как только пользователь начнёт заполнять графу;
  • может включать в себя семантические теги и быть стилизовано с помощью CSS.

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

Когда плейсхолдер находится внизу, его не видно из-за экранной клавиатуры

Разработка

Вот как решение автора будет выглядеть в виде кода.

Это не слишком отличается от традиционной связки атрибутов for и id: элемент label программно связан с input с помощью id со значением employee-id. Элемент p, расположенный между label и input, заменяет атрибут placeholder.

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

Эрик Бэйли

Используя атрибут aria-describedby для связывания элементов input и p, можно задать порядок прочтения для скринридера. С ним можно быть уверенным в том, что контент p будет озвучен последним, а заголовок и тип информации, которые надо ввести, — первыми.

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

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

Если включить подсказку в заголовок, это сделает его слишком громоздким. Такой объём текста может быть трудно запомнить, а переслушивать его будет долго и нудно. В доказательство своей позиции автор ссылается на «Руководство по обеспечению доступности веб-контента»: критерии 2.4.6 и 3.3.2 говорят то же самое.

Пример

Эрик показывает, как его решение использовано в коде.

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

Мнения пользователей

Чем меньше интерфейс требует от пользователя, тем он доступнее.

Элис Боксхолл

В конце автор предлагает задуматься над вопросом: а нужна ли вообще информация из плейсхолдера?

Хорошие фронтенд-решения делают так, чтобы пользователю не пришлось вдумываться и тратить своё время, разбираясь в том, как работает сайт. Автор пишет, что для этого нужно использовать специальные атрибуты ввода и проверять достоверность данных.

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

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

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

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

Эрик Бэйли

перевод на русский, синонимы, антонимы, произношение, примеры предложений, транскрипция, определение,значение, словосочетания

They’re always used as a placeholder for something else, but they are never the real thing.

Они всегда используются как заменитель чего — то, а не само что — то.

If you are inserting a placeholder field, type the text that you want to display as a help tip when you rest the mouse pointer over the field.

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

Inserts a line over a placeholder .

Используется для вставки линии над меткой — заполнителем .

Adds a slide number placeholder to the slide master.

Добавление метки — заполнителя номера слайда в мастер — слайд.

Another set of physicists think that the past hypothesis, while better than nothing, is more likely to be a placeholder than a final answer.

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

In PowerPoint 2007, click the placeholder on the slide or notes page that you want to insert the chart on.

В PowerPoint 2007 щелкните заполнитель на слайде или на странице заметок, куда вы хотите поместить диаграмму.

I right-click the text placeholder and click Format Shape.

Я щелкаю заполнитель правой кнопкой мыши и выбираю пункт «Формат фигуры».

In this case, the area code section uses the 9 placeholder , so area codes are optional.

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

Similarly, if you enter %message% in the email template, that placeholder will be replaced with the text found in the Work item instructions field.

Аналогичным образом, если ввести %message% в шаблон электронной почты, заполнитель будет заменен текстом, указанным в поле Инструкции рабочего элемента.

In the Slide pane, select and hold the page number placeholder until you see the four-headed arrow, and drag it to a new location.

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

That’s the result of AutoFit; it adjusts the line spacing and font size to fit all list items into the placeholder .

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

When I select the placeholder , think of it in a horizontal orientation, and you can see the text is centered.

Выделим заполнитель и представим, что он горизонтальный. Теперь сразу видно, что текст центрирован.

If you’re connected to Xbox Live but the automatic download didn’t occur, you can uninstall the placeholder file that represents your game, and then reinstall it.

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

I have a placeholder so set up it, makes analogies look like punchlines.

У меня есть наполнитель настолько сетапный, что он делает аналогии похожими на панчлайны.

The man’s always been something of a placeholder for you.

Мужчина всегда был для тебя чем — то вроде заполнителя .

You’re a big part of the reason that he and I aren’t together and I had to settle for this placeholder .

Ты — одна из главных причин, почему мы с ним больше не вместе, и почему мне пришлось довольствоваться этим заменителем.

I don’t see her as a placeholder .

Но она для меня не заменитель.

She’s like a placeholder to you, George.

Она для тебя заменитель, Джордж.

Unless you can tell me that I’ll ever be anything more than just Carter’s placeholder .

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

What if the blue door in Brandt’s memory was a visual placeholder for non-visual information?

Что если синяя дверь в воспоминаниях Брандта Была видима, но ее нет визуальной информации.

They were placeholder names, used in the early ’70s, for personnel that went into deep cover or witness relocation.

Этими именами госслужащих пользовались в начале 70 — х те, кто работал под прикрытием, или при защите свидетелей.

This fiscal collaboration, though necessary now, is just temporary, as is your service on the council, though I couldn’t ask for a better placeholder .

Не смотря на сегодняшнюю важность, это финансовое сотрудничество лишь на некоторое время. Как и твое место в совете, хотя о лучшем кандидате на него я не мог и просить.

I had a set up about a story that was so placeholder , the punchline came five words early.

У меня был сетап про линию, которая была настолько наполнителем, что панчлайн появился пятью словами ранее.

We believe God is just a placeholder .

Мы верим, что Бог — это просто исполняющий обязанности.

Yeah, it seems our little show was a nice little placeholder …

Похоже, наше шоу было неплохим проектом…

I’m just using it as a placeholder till I become Jewish and I can pin it on Hitler.

Я использую его временно, пока не стану еврейкой и смогу обвинять Гитлера.

I will not be a placeholder president, Claire.

Я не буду временно замещающим президентом, Клэр.

I thought I was just a placeholder .

Я думал, я временная фигура.

Genius! Teabing added. The letter Vav is often a placeholder for the vowel sound O!

— Гениально! — снова воскликнул Тибинг. — Буква Vav из алфавита часто замещает гласный звук О!

A placeholder can only store a value of the given type and not an arbitrary SQL fragment.

Заполнитель может хранить только значение данного типа, а не произвольный фрагмент SQL.

To apply a substitution to an expression means to consistently replace its variable, or placeholder , symbols by other expressions.

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

I’ve added a brief summary that should suffice as a placeholder until someone can come up with something better.

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

In a case in which a ghost note is deemphasized to the point of silence, that note then represents a rhythmic placeholder in much the same way as does a rest.

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

Some continue on to the length of the longest list, and for the lists that have already ended, pass some placeholder value to the function indicating no value.

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

Each digit was at separated by only a space, but by the time of Alexander the Great, they had created a symbol that represented zero and was a placeholder .

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

  In each of these two cases, had a placeholder been added to mainspace before I started to work, my time would not have been wasted.

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

The title Project X was initially a placeholder for a final title, but interest generated by the secretive title kept it in place.

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

He also suggested the term data science as a placeholder to call the overall field.

Он также предложил термин data science в качестве заполнителя для обозначения общей области.

Create a Drafts Template or Drafts Portal that is placed on mainspace pages as a placeholder .

Создайте шаблон черновиков или портал черновиков, который будет размещен на страницах mainspace в качестве заполнителя .

Above, T is a placeholder for whatever type is specified when the list is created.

Выше, T является заполнителем для любого типа, указанного при создании списка.

A jokoid is a placeholder joke, which will eventually be superseded by a funnier joke.

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

The Babylonian placeholder was not a true zero because it was not used alone.

Вавилонский заполнитель не был истинным нулем, потому что он использовался не один.

Zero is also used as a placeholder in the Bakhshali manuscript, portions of which date from AD 224–383.

Ноль также используется в качестве заполнителя в рукописи Бахшали, части которой датируются 224 — 383 гг. н. э.

Alice and Bob are fictional characters commonly used as placeholder names in cryptology, as well as science and engineering literature.

Алиса и Боб — вымышленные персонажи, обычно используемые в качестве имен — заполнителей в криптологии, а также в научной и технической литературе.

And again, a placeholder for the anonymous crowd.

И опять же, заполнитель для анонимной толпы.

His first draft was used as the script for recording placeholder voiceovers, which helped the team to judge the atmosphere in the game.

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

The ‘Map image/placeholder image’ headline seems misleading considering the direction of the above discussion, so I’m making a new one here.

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

I mean, it’s a placeholder , and it’s the last one.

Я имею в виду, что это заполнитель , и он последний.

The little marriage, however, is just a placeholder until the couple can afford the ada, or grand marriage.

Маленький брак, однако, является всего лишь заполнителем , пока пара не сможет позволить себе ada, или Великий брак.

When a spring remained in the placeholder , the workers knew that they had forgotten to insert it and could correct the mistake effortlessly.

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

As the rough cut ended, the placeholder credits read blah-blah-blah-blah, so he sang those words and it remained in the film’s score.

Когда грубая нарезка закончилась, заполнители титров читали бла — бла — бла — бла, поэтому он пропел эти слова, и они остались в партитуре фильма.

The use of 0 as a number should be distinguished from its use as a placeholder numeral in place-value systems.

Использование 0 в качестве числа следует отличать от его использования в качестве заполнителя числительных в системах местоимений.

Because it was used alone, not as just a placeholder , this Hellenistic zero was the first documented use of a true zero in the Old World.

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

Big/Little-L issue… seems like an obvious placeholder for a lack of a better introduction.

Большой / маленький — L выпуск. .. кажется очевидным заполнителем для отсутствия лучшего введения.

Since it is improper to remove others’ comments, allowing users to delete without inserting a placeholder could mean something like this.

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

I’m moving the following statement here as a placeholder .

Я перемещаю сюда следующее утверждение в качестве заполнителя .

Является ли текст заполнителя достаточным доступным ярлыком для полей формы

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

Используемый код




Выводы

Результаты для пользователей программы чтения с экрана, когда текст вводится поверх текста-заполнителя

  ЧЕЛЮСТИ 2018 НВД 2018. 1 VoiceOver
Firefox 61 Заполнитель не читается Сначала считывается заполнитель, а затем значение Н/Д
ИЭ 11.165 Сначала читается заполнитель, а затем значение Сначала читается заполнитель, а затем значение Н/Д

Край 42,17

 Сначала читается заполнитель, а затем значение Сначала считывается значение, а затем заполнитель Н/Д
Chrome 67 на WIN 10 Сначала считывается значение, а затем заполнитель Сначала читается заполнитель, а затем значение Н/Д
Сафари MacOS Н/Д Н/Д Сначала считывается значение, а затем заполнитель
Chrome на Mac Н/Д Н/Д Не считывается заполнитель
Сафари iOS Н/Д Н/Д Не считывается заполнитель

 

Для программ чтения с экрана поддержка неравномерна. В некоторых стеках атрибут-заполнитель будет заполнять Доступное имя в API специальных возможностей, поскольку другого Доступного имени нет. Когда пользователь вводит свое имя, этот текст заполняет корзину значений Accessible API, а заполнитель продолжает чтение. Вычисление доступного имени загружает текст-заполнитель и поддерживает его на протяжении всего жизненного цикла задач. Однако на некоторых системах мы видим, что метка постоянно не читается.

Пользователи с когнитивными нарушениями

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

Что говорит WCAG?

3.3.2 Этикетки или инструкции:  Ярлыки или инструкции предоставляются, когда контент требует ввода данных пользователем. (Уровень A)

SC сообщает этикетки ИЛИ инструкции. На практике за 10 лет я ни разу не видел, чтобы вместо этикетки использовались инструкции, хотя технически их можно было бы использовать вместо этикетки.

Определение метки в WCAG
этикетка

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

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

Примечание 2.  Термин label не ограничивается элементом label в HTML.

Примечания к определению ясно дают понять, что рабочая группа WCAG намеревалась сделать метку видимой, указав, что она представлена ​​ВСЕМ пользователям, и сопоставив ее с «именем», которое можно скрыть. Как член команды, которая писала WCAG 2.0 с 2002 года, я могу подтвердить, что это было нашим намерением.

Решение

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

Первый Имя *

Фамилия *

См. также

Тестовый aria-describedby с текстом-заполнителем

Не стесняйтесь оставлять комментарии в Twitter @davidmacd

Информация об авторе:

Дэвид Макдональд — ветеран WCAG, соредактор книги «Использование WAI ARIA в Член рабочей группы HTML5 и специальных возможностей HTML5. Мнения мои собственные.

Все статьи блога


Пропустить Твиттер Лента
твитов от davidmacd

Заполнители в полях формы вредны

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

Этикетки и заполнители

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

Заполнители, заменяющие метки

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

Худшее: в этом примере вместо метки используется текст-заполнитель.

 

Ниже приведены 7 основных причин, по которым заполнители не следует использовать в качестве замены меток полей.

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

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

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

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

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

3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

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

4. Текст-заполнитель, который исчезает при помещении курсора в поле формы, раздражает пользователей, использующих клавиатуру.

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

5. Поля с вещами менее заметны.

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

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

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

7. Иногда пользователям приходится удалять текст-заполнитель вручную.

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

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

Текст-заполнитель в дополнение к меткам

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

Better: здесь текст-заполнитель используется в качестве подсказки в дополнение к метке.

Заполнители и специальные возможности

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

  1. Светло-серый цвет текста-заполнителя по умолчанию плохо контрастирует с большинством фонов. Пользователям с нарушениями зрения плохой контраст цветов затрудняет чтение текста. Поскольку не все браузеры позволяют стилизовать текст-заполнитель с помощью CSS, решить эту проблему сложно.
  2. Пользователи с когнитивными или двигательными нарушениями несут большую нагрузку. Как мы видели, заполнители могут создавать проблемы для всех пользователей: исчезающие заполнители увеличивают нагрузку на память; постоянные затемняемые заполнители вызывают путаницу, когда они выглядят кликабельными, но на самом деле ими не являются, а заполнители, которые не исчезают, требуют большего взаимодействия с клавиатурой или мышью для удаления. Эти трудности усугубляются для людей с когнитивными или двигательными нарушениями.
  3. Не все программы чтения с экрана читают текст-заполнитель вслух . Слепые или слабовидящие пользователи могут полностью пропустить подсказку, если их программное обеспечение не озвучивает замещающий контент.

Плавающие этикетки

Основанный на минималистском веб-дизайне шаблон с плавающей меткой представляет собой модифицированный подход к заполнителям, который смягчает некоторые недостатки традиционных заполнителей. Этот шаблон существует уже много лет, но, наконец, он появился на основных веб-сайтах и ​​даже был официально принят в Material Design Google.

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

Хорошо: Плавающие метки перемещаются в верхнюю часть поля формы, когда пользователь выбирает их, чтобы начать печатать (Warbyparker.com).

Этот подход имеет два основных преимущества:

  • Это может сэкономить место на мобильных устройствах, поскольку не требует дополнительного вертикального пространства для размещения метки над полем.
  • Видимая этикетка служит средством запоминания, пока люди печатают. Таким образом, это касается пунктов 1-4 из приведенного выше списка подводных камней.

Тем не менее, проблемы № 5 и № 6 выше по-прежнему являются проблемой : поля с текстом в них менее заметны, и пользователи могут подумать, что в поле уже введено значение по умолчанию. Кроме того, проблемы со специальными возможностями, описанные ранее, могут по-прежнему возникать, поскольку некоторые браузеры и вспомогательные технологии неправильно или надежно считывают текст-заполнитель.

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

Заключение

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

Best: Метка и подсказка размещаются за пределами поля формы и всегда видны пользователю.

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

Инструкции по форме | Инициатива веб-доступности (WAI)

в учебнике по формам

Обзор

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

Важно: средства чтения с экрана часто переключаются в «Режим форм» при обработке содержимого в элементе

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