Путеводитель: Часть 1. Вступление ● Часть 2. Речевой барьер ● Часть 3. Ошибки в формах ● Часть 4. Ошибки на сервере ● Часть 5. Рука помощи
01 Важным элементом взаимодействия сайта с пользователем являются формы ввода данных (или просто формы), а также отдельные их элементы. Форма может быть представленна одной кнопкой OK или же целым набором текстовых полей, списков выбора, чекбоксов и радиобаттанов. Сегодня я буду говорить именно о втором случае, когда элементов много.
«Хорошая форма — это форма, которая заполняется быстро и легко, даже если в ней много элементов»
02 Что представляет из себя хорошая форма? Хорошая форма — это форма, которая заполняется быстро и легко, даже если в ней много элементов. Быстрота заполнения формы зависит от того, насколько хорошо пользователь понимает, как её заполнять. Это сравнимо с заполнением бланков в какой-нибудь организации. Только, если в случае с бумажками, вам помогает красивая девушка, то здесь должна помоч правильная подача ошибок и их предотвращение.
03 Я разделяю все формы на активные и пассивные. Отличие этих форм в том, что активные сразу предупреждают пользователя о допущенной ошибке, а пассивные выдают ее только после отправки запроса. Сказать, какие из них лучше, будет плохим тоном, потому что и те и другие актуальны на данный момент. Пассивные формы используются обычно в сервисах, рассчитанных на широкий контингент пользователей, т. к. некоторые пользователи умышленно отключают поддержку технологий, на которых основываются активные формы (JavaScript). Для каждого вида есть свои правила подачи ошибок, которых я отчасти касался в предыдущих статьях и о которых я вспомню сегодня. Ну что ж, приступим.
«Каждая ошибка по возможности должна быть предотвращена»
04 Предотвращение ошибок в пассивных формах. Недавно я опять переосмысливал устройство регистрационной формы в Gmail. В этой пассивной форме меня привлекли следующие вещи. Во-первых, в ней отсутствует выделение обязательных для заполнения полей. Совершенно ясно, что здесь должно заполняться каждое поле (хотя зачем я должен указывать свою фамилию?), тем не менее, это может породить ненужные ошибки и затянуть процесс заполнения формы. Возможно, стоило написать на видном месте, что все поля обязательны для заполнения. Во-вторых, Google перепутали пояснительный текст с ошибкой:
Форма регистрации аккаунта в Gmail
Примеры, это, конечно, хорошо, но их явно не достаточно. Как вариант, текст ошибки должен был выглядеть следующим образом: «Поле заполнено неправильно», а то, что выдает Gmail сейчас, должно было быть написано под или над полем. С одной стороны это хороший метод, но с другой есть риск превратить интерфейс в нечеловечный. Представьте себе, что все ошибки будут вида: «Поле заполнено неправильно»,— брр:
Форма регистрации аккаунта на Free-lance.ru
По сему, рекомендую использовать это только в маленьких пассивных формах, а для больших форм применять другое решение. Взгляните на неправильно заполненное поле пароля:
Форма регистрации аккаунта в Gmail
Зачем дублировать информацию? Суть второго метода в том, чтобы подсветить красным пояснительный текст и выдать его за ошибку. Таким образом пользователь не будет думать, как верно заполнить поле, а сразу узнает это. Мне кажется, если бы дизайнеры Gmail использовали эти рекомендации, то я бы заполнил форму быстрее. Каждая ошибка по возможности должна быть предотвращена. Запомните это.
05 Подача ошибок в пассивных формах. Здесь действуют рекомендации, приведённые в предыдущих статьях (во Вступлении и Речевом барьере). Давайте вспомним их:
— необходимо использовать привязанность ошибок к их причинам или размещать их в ожидаемом месте (иначе: размещать их с неправильно заполненным полем);
— если нет возможности использовать привязанность, использовать цветовое кодирование (иначе: выделять одним цветом ошибочное поле и выноску);
— писать текст ошибки только на языке интерфейса сайта;
— формулировать ошибку четко, не используя литературных оборотов и неправильных словесных последовательностей.
«Главное правило активной формы: она должна посылать запрос лишь один раз за случай»
06 Организация активной формы. Итак, начнем с хорошего примера:
Форма загрузки изображений на Flickr.com
Главное правило активной формы: она должна посылать запрос лишь один раз за случай. Это достигается путем анализа на лету введённых в форму данных и мгновенной выдачи ошибки, а также выключением кнопки Отправить. Если кнопка отправить включается до того, как все ошибки исправлены, то такая форма не представляет большой ценности и не намного улучшает процесс её заполнения:
Форма отправки заяквки в Бизнес-линч
Я узнал о том, что моя фотография больше, только после того, как нажал на Отправить, которая почему-то включилась.
07 Предостерегать же пользователя от ошибок в этом случае можно по-разному. Использовать ли навороченные поп-ап окна, в которых, при наведении на поле будет показываться пояснение, для придания больше заметности или просто написать снизу, что в логине можно использовать только латинские буквы от A до Z, зависит от ваших задач и фантазии:
Первый шаг регистрации на Photobucket.com
08 Основные правила подачи ошибок в активной форме не отличаются от правил пассивной формы. Единственное, у вас появляется возможность для эксперементов и создания новых интересных решений подачи ошибок. Это, опять же, зависит от вашей фантазии.
Оригинал статьи можно найти в моём жж.
Роман Горшков (FUEL)
