- Статьи
- 4 мин на чтение
40
Наиболее эффективный способ предоставить контекст для полей ввода
Примечание. Help Text (справочный текст) — небольшое пояснение или инструкция, которая помогает пользователям понять, как правильно заполнить определённое поле или выполнить конкретное действие. Это может быть текст, который поясняет, что ожидается от пользователя в данном поле, какие форматы данных принимаются или какие правила следует соблюдать.
Обычно такой текст отображается рядом с полем ввода или в непосредственной близости от него, чтобы при необходимости пользователь мог легко получить доступ к информации.Tooltip (тултип, или всплывающая подсказка) — небольшое всплывающее окно или текстовая подпись, которая появляется при наведении курсора мыши на определённый элемент интерфейса или объект. Она предназначена для предоставления дополнительной информации о функции, объекте или элементе интерфейса, с которым она связана.
Тултипы обычно используются для объяснения иконок, кнопок, ссылок и других интерактивных элементов, чтобы помочь пользователям понять, что произойдёт, если они совершат определённое действие или взаимодействие с элементом.Названия не всегда достаточно, чтобы объяснить пользователям суть сложного поля ввода в форме для заполнения. У людей могут возникнуть и другие вопросы, которые помешают им ввести данные.
Вы можете сами выбрать, как объяснить им контекст неоднозначных полей: с помощью справочного текста или всплывающих подсказок.Однако дизайнеры часто задаются вопросом, что лучше для опыта взаимодействия с пользователем: справочный текст или всплывающая подсказка. Чтобы принять правильное решение при проектировании формы, важно понять, когда лучше использовать каждую из этих подсказок.
Справочный текст
Большинство контекстных сообщений состоит из 1-2 текстовых строк, которые занимают всю ширину поля. В этом случае нет необходимости использовать всплывающую подсказку. Лучше выбрать справочный текст, чтобы люди могли быстро просмотреть его вдоль поля.
Всплывающие подсказки — не всегда лучший выбор, поскольку они требуют от пользователя дополнительных действий. Представьте себе, что человек, заполняя форму, вводит данные с помощью клавиатуры. Чтобы активировать всплывающую подсказку, ему придётся переместить руку к мыши, а это дополнительное усилие.Справочный текст позволяет пользователям сканировать информацию вдоль поля, поэтому им не нужно взаимодействовать с дополнительным компонентом. Это эффективнее и не отвлекает от клавиатуры при заполнении формы.
Всплывающая подсказка
Иногда объём контекстного сообщения может превышать 1-2 строки. Отображение больших текстовых абзацев в виде справочного текста может перегрузить пользователей. Люди не хотят читать большие тексты, чтобы не перенапрягаться.
Кроме того, объёмный текст подсказки может нарушить композицию, особенно если в форме несколько колонок. По этим причинам для отображения текста, объём которого превышает две строки, лучше использовать всплывающие подсказки.Однако у всплывающих подсказок может быть ещё одна проблема. Поскольку они скрывают информацию за иконкой, пользователи, которые не заметят её, могут заполнить поле, не прочитав контекстное сообщение. Эта ошибка может привести к вводу неверной информации.
Люди не замечают иконки тултипов по двум основным причинам. Первая — как правило, они маленькие, поэтому их легко пропустить на фоне других элементов страницы. Другая причина заключается в том, что часто они несут некую двусмысленность, что заставляет пользователей по незнанию игнорировать их.
Справочный текст + тултип = справочный тултип
Хотя всплывающие подсказки могут хорошо отображать длинные контекстные сообщения, не перегружая пользователей, люди не всегда будут с ними взаимодействовать. Лучший способ быть уверенным в том, что человек увидит контекстное сообщение, — использовать гибридный подход — справочный тултип.
Справочные тултипы сочетают в себе лучшее из этих двух типов подсказок, не перегружая пользователей и не скрывая от них информацию. Вместо того чтобы показывать всё контекстное сообщение целиком, люди видят только его суть в виде заголовка.Например, пользователям нужно найти серийный номер, чтобы заполнить поле «Серийный номер». В подсказке вместо всего сообщения будет отображаться фраза «Как его найти». Этот короткий, ёмкий заголовок — сильная визуальная подсказка, которая помогает взаимодействию.
Когда пользователь нажмёт на заголовок, во всплывающей подсказке появится контекстное сообщение.Справочный тултип также содержит иконку “i”, которая обозначает, что в заголовке есть дополнительная информация. Иконка с заголовком рядом с полем делают справочный тултип удобным для чтения и взаимодействия. Она не перегружает пользователей, как справочный текст, и не скрывает информацию, как всплывающая подсказка.Согласно результатам исследованияпо субъективным оценкам пользователей интерфейсы работают лучше, если объединить текст и иконку, а не применять что-то одно. Однако текст работает эффективнее иконки, но всё-таки хуже, чем их сочетание.
Всплывающее окно с изображением
Вам может понадобиться показать не только текстовую подсказку, но и изображение. Это позволит предоставить пользователям больше информации, чтобы они быстрее поняли, как заполнить поле. Картинки также можно показывать в виде справочного тултипа.На примере ниже внутри подсказки есть скриншот, который помогает пользователям сразу найти серийный номер в меню. Изображение проясняет контекст и устраняет возможность совершить ошибку.
Представление контекста
Большинство людей не заполняют поля ввода потому, что не понимают, какую именно информацию нужно вводить. Такая путаница возникает при неправильном представлении контекстных сообщений. Чтобы они были интуитивно понятными, для коротких сообщений выбирайте справочный текст, а для длинных — тултип. Такой подход гарантирует, что пользователи прочитают их и примут к сведению то, что в них написано.
Загрузка...
