Законы юзабилити продающих сайтов: веб-формы и micro UX элементы

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

Юзабилити веб-форм

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

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

Длина текстовых полей пусть соответствует объему вводимого текста. Настройте такую длину поля, чтобы пользователь мог полностью видеть вводимую информацию.
Отметьте красной звёздочкой графы, которые нельзя пропускать при заполнении формы, и добавьте пояснение: «Поля, отмеченные звездочкой, являются обязательными для заполнения».
Верификация данных должна проводиться в момент заполнения формы, а не после. Технология ajax поможет организовать динамические запросы к серверу без визуального обновления страницы. В результате пользователи смогут видеть свои ошибки и корректировать введенные данные в режиме реального времени до отправки формы.
Поля формы должны быть выстроены в определенном порядке. Недопустимо, чтобы пользователю приходилось постоянно менять способ ввода информации. Избавьте клиентов от необходимости частого переключения между мышью и клавиатурой.

Метки и названия полей должны чётко объяснять пользователю, какой тип данных необходимо ввести. Тогда вероятность ошибки сведется к минимуму.
Если форма очень длинная, то вопросы нужно сгруппировать, а группам дать понятные заголовки. Форма с большим количеством полей требует логической упорядоченности. Создайте разделы, снабдите каждую секцию заголовком.
Организуйте автофокус. Поместите курсор в поле, которое клиент будет заполнять первым. Избавить клиентов от лишних кликов можно при помощи HTML5.

Юзабилити micro UX элементов

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

Лента товаров обновляется одним действием. Достаточно провести пальцем по экрану вниз.
В поисковой строке уже в процессе ввода запроса всплывает подсказка из нескольких возможных фраз.
Механизм «экранной лупы» при наведении указателя мыши на изображение продукта позволяет увидеть увеличенный фрагмент товара.
На странице с описаниями товара при выборе цвета платья автоматически меняется изображение модели.
Сервис доставки еды предоставляет удобный блокнот. Стоит внесьти в него список необходимых продуктов и запустить поиск, как сервис разом найдет все необходимые товары.
В чате появляется пишущий карандашик, в тот момент, когда собеседник набирает сообщение.
При прокрутке страницы появляется изображение жизнерадостного самолетика с рекламой бесплатной доставки.
При добавлении товара в корзину всплывает окошко с подпрыгивающей тележкой. Тележка облизывает губы и сообщает: «Один предмет добавлен в мой переносной животик! Я все еще хочу есть».
Анимированные указатели, улыбающиеся антропоморфные предметы, кнопки-тумблеры, реагирующие как переключатели, и другие неожиданные элементы дизайна пригодятся при проектировании лендингов и интернет-магазинов.