Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Использование плейсхолдеров - подсказок внутри поля для ввода текста - является частым явлением в современной веб-разработке. При этом многочисленные исследования показывают, что подсказки, сделанные в виде плейсхолдеров, затрудняют работу с формами для ввода текста, поскольку пользователям приходится также запоминать информацию, которая находится в нём. Кроме того, плейсхолдеры создают дополнительную нагрузку для пользователей с нарушением зрения и когнитивных способностей. Мы перевели статью Кэти Шервин из Nielsen Norman Group - о неоднозначности плейсхолдеров, а также об их правильном использовании.

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

3 <h2>Содержание</h2>

4 <ul><li><a>Плейсхолдеры и лейблы</a></li>

5 <li><a>Лейбла нет, но есть плейсхолдеры</a></li>

6 <li><a>Использование плейсхолдера вместе с лейблом</a></li>

7 <li><a>Плавающие плейсхолдеры</a></li>

8 <li><a>Плейсхолдеры и их доступность для всех пользователей</a></li>

9 <li><a>Итог</a></li>

10 </ul><h2>Плейсхолдеры и лейблы</h2>

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

12 <h2>Лейбла нет, но есть плейсхолдеры</h2>

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

14 Самый плохой вариант - использование только плейсхолдера

15 <h3>7 причин, почему нельзя использовать плейсхолдер вместо лейбла</h3>

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

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

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

19 2. Отсутствие лейбла мешает пользователю проверить правильность введенных данных

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

21 3. При появлении ошибки пользователю сложнее понять, что именно нужно исправить

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

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

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

25 5. Поля, в которых уже есть какой-то текст, менее заметны

26 Многочисленные исследования<a>показывают</a>, что человеческий глаз лучше воспринимает пустые поля, чем формы, в которых уже есть какой-то текст. Использование плейсхолдеров приведет к тому, что пользователь будет дольше искать необходимое поле для ввода данных, либо вовсе не заметит его и уйдет со страницы, что негативно скажется на конверсии.

27 6. Плейсхолдеры похожи на данные, которые были введены автоматически

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

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

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

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

32 <h2>Использование плейсхолдера вместе с лейблом</h2>

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

34 Использование двух элементов уже улучшает качество восприятия

35 <h2>Плавающие плейсхолдеры</h2>

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

37 <h2>Плейсхолдеры и их доступность для всех пользователей</h2>

38 Еще одна проблема плейсхолдеров - они доступны для восприятия не всех пользователей.

39 <ol><li>Не все сервисы чтения с экрана могут воспринимать плейсхолдеры - это приводит к тому, что слабовидящие пользователи просто не смогут самостоятельно заполнить необходимые формы.

40 </li>

41 <li>Стандартный цвет плейсхолдеров практически не контрастирует с большинством фонов. Их использование становится проблемой даже для людей с ослабленным зрением.

42 </li>

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

44 </li>

45 </ol><h2>Итог</h2>

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

47 Лучше всего: лейбл и подсказка находятся за пределами поля и всегда видны пользователю

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

49 Адаптированный перевод<a>статьи</a>Place holders in Form Fields Are Harmful с сайта Nngroup by Katie Sherwin. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.