Чужие мысли

Переводы и статьи по дизайну интерфейсов, юзабилити и web-разработке

Инструкции и подсказки в пользовательском интерфейсе

Instructional Text in the User Interface: Some Counterintuitive Implications of User Behaviors
Автор: Mike Hughes
Источник: UXmatters

Помощь пользователю должна оказываться в пределах контекста действия (то есть, в приложении с которым работает пользователь) и располагаться в непосредственной близости от центра этого действия. Оптимальное место для размещения помощи – непосредственно на самом пользовательском интерфейсе. Мы называем такой вид помощи обучающим текстом (instructional text).

Поведение пользователей

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

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

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

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

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

Есть еще один принцип. Мне придется рассказать небольшую историю, чтобы объяснить его.

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

Пример контекстной помощи пользователю

Давайте рассмотрим простую форму авторизации, состоящую из текстового поля, двух радио-кнопок и кнопки отправки запроса. Сделаем, также, в рамках данного примера следующие предположения:

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

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

Инструкции и подсказки в пользовательском интерфейсе

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

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

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

Инструкции и подсказки в пользовательском интерфейсе

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

Некоторые принципы, касающиеся обучающего текста

При размещении обучающего текста, используйте следующие принципы:

  • Разделите одну большую инструкцию по объектам действия.
  • Поместите инструкции рядом с соответствующими объектами – лучше ниже или справа от объекта действия.
  • Если текст инструкции слишком большой и такое размещение может разрушить дизайн формы (например, нарушится группировка радио-кнопок), поместите на то же место ссылку, которая будет открывать pop-up с инструкцией или вести на соответствующий раздел FAQ.

Заключение

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






Комментарии



Евгений 15.11.2007 01:18

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

Ярослав Бирзул 22.11.2007 10:23

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

2Евгений: Жень, и ты тут :) Внутренняя песочница юзабилистов :)

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

[...] пиктограмм, от которых и так уже голова болит, - скажем, подсказки в формах - как они должны располагаться? Или файловые инпуты, [...]



Оставьте комментарий

You must be logged in to post a comment. Log in