Привет!

Формы на сайте: ошибки и как их исправить [digital note for ecommerce #45]

Валерия СластенниковаВалерия Сластенникова

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

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

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

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

Форма в один столбец

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

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

Надпись в верхней части формы

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

Группировка названий со строкой ввода

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

Это крайне актуально в больших формах. Иначе пользователи могут запутаться, какому полю соответствует какое название.

Нет - заглавным буквам

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

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

Не используйте поля ввода в качестве названий

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

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

Укажите, где находятся ошибки ввода

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

Минимальные подсказки в открытом виде

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

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

Выделите кнопки с призывом к действию

Если вы предлагаете два варианта, выделите кнопку с призывом к действию, которая принесет вам большую пользу. Сделать это можно с помощью цвета или размера. Цель - направить внимание. Если вы считаете, что второй вариант менее полезен, просто удалите его. Это улучшит пользовательский опыт. Пользователю легче будет выбрать, а дизайнеру не нужно будет придумывать, как расставить акценты.

Избавьтесь от всего ненужного

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

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

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