Вот вы создали форму регистрации на сайте. Добавили красивых кнопок, модных эффектов и подключили несколько jQuery-плагинов для анимации. Хватит ли этого, чтобы форма была удобной и посетители сайта остались довольны?

Хватит где-то на треть. На треть того, из чего состоит юзабилити веб-форм.

Почему юзабилити веб-форм жизненно важно для вашего сайта?

У каждого посетителя сайта есть вполне определенная цель, которой он хочет достичь, зайдя на ваш сайт. У владельца же, в свою очередь, есть своя.

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

Есть несколько типичных сценариев использования веб-форм:

Давайте рассмотрим примеры каждого из типов сценариев:

  Электронная коммерция Сообщества Онлайн-операции
Цель посетителя Купить вещь Присоединиться к сообществу Совершить операцию
Пример сайта Интернет-магазин Форум или социальная сеть Онлайн-банкинг
Пример формы Форма заказа Форма регистрации Денежный перевод

Многочисленные аналитические исследования показывают, что одна из наиболее распространенных причин ухода посетителей с сайта состоит в том, что они не смогли справиться с заполнением формы. Была ли она слишком длинной? Или человек не смог понять, что куда вписывать? А может, запутался в непривычных на вид кнопках и многочисленных всплывающих подсказках? Побоялся указывать подробные личные данные?

Так как же сделать так, чтобы форма помогала пользователю, упрощала нужную операцию, а не стопорила процесс? Соблюдение нескольких несложных и разумных принципов поможет вам создавать по-настоящему полезные и удобные формы.

Компоненты веб-форм

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

Метки

Эти ребята подскажут пользователю, что писать в соответствующем поле.

Поля ввода и выбора

Большая группа элементов, которая включает в себя текстовые поля, кнопки переключения, элементы типа «чекбокс» и прочие.

Кнопки-действия

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

Сообщения

Любые текстовые сообщения, основанные на данных, которые ввел пользователь. Например, сообщение о неправильном адресе e-mail.

Подсказки

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

Проверки

Блоки, сообщающие пользователю о правильности вводимых им данных.

Внешний вид компонентов

Метки

Краткость против подробных описаний

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

Не набирайте метки заглавными буквами

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

Поля ввода

Используйте соответствующие типы полей ввода

Каждый тип поля обладает своими особенностями, к которым привыкли пользователи.

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

Старайтесь не изобретать новых типов полей

Очень модные на заре Flash-сайтов фантастически-нестандартные поля обретают второе дыхание с приходом новых технологий. Очень важно соблюдать родственность ваших стилизованных полей с их стандартными предками из HTML.

Ограничение формата вводимых данных

Если вам необходимо ограничить формат вводимых данных, например, создать поле с вводом даты, то это лучше сделать с помощь выпадающего списка или календаря, а не простого текстового поля ДД/ММ/ГГ.

Обязательные и необязательные поля

Необходимо четко указывать пользователю на обязательные и необязательные для заполнения поля. Стандартным для этого символом является звездочка (* (asterisk)). На практике, символ может быть любым, если в форме присутствует легенда, обьясняющая его предназначение.

Кнопки-действия

Первичные и вторичные действия

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

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

Названия кнопок

Хорошим тоном является отказ от общих названий кнопок в формах, типа «Отправить» и «Очистить» в пользу точных и говорящих, например, «Оформить заказ», «Присоединиться к форуму» или «Очистить поля».

Сообщения

Сообщения об ошибках

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

Сообщения об успешных действиях пользователя

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

Подсказки

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

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

Проверки

Проверка там, где это необходимо

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

Результат проверки

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

Отправка формы

Возможность отправить форму должна появляться у пользователя только после заполнения обязательных полей. Если во время отправки формы все-таки произошла ошибка – данные в полях не должны удаляться.

Вперед, читатель!

Теперь, вооружившись теорией, вы можете смело начинать свой путь в мир веб-форм, которые помогают, продают и просто работают. Работают так, как должны. Убедитесь в этом сами!