16 August 2008

Подача ошибок. Часть 3. Ошибки в формах.

Interfaces



Путеводитель: Часть 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)
Tags:юзабилитиформысайтыправильноошибки
Hubs: Interfaces
+9
3k 19
Comments 13