Формы на сайте… Ну, это, конечно, такая штука, с которой каждый из нас сталкивается постоянно. И вот что я заметил: большинство людей вообще не задумываются о том, насколько они важны для бизнеса. Формы — это же не просто набор полей, это, по сути, мостик между вами и вашим потенциальным клиентом. Вот человек заходит на ваш сайт, ему что-то нравится, и он готов сделать следующий шаг — зарегистрироваться, оставить заявку, купить что-то. И тут он видит форму. Если она неудобная, запутанная, длинная, он, скорее всего, просто плюнет и уйдет. И все. Вы потеряли клиента, а он потратил время впустую. Оптимизация форм, понимаете, это не какая-то там прихоть дизайнеров, это прямой путь к увеличению продаж и лояльности. Это, так сказать, инвестиция в ваш бизнес. Как улучшить пользовательский опыт — это вопрос, который должен быть в голове у каждого, кто работает над сайтами.
Почему UX форм так важен
Ну вот смотрите. Вы же не хотите терять клиентов, верно? А плохая форма — это, по сути, сито, через которое проваливается большая часть трафика. Это так работает: пользователь заходит, видит форму, начинает заполнять, спотыкается на каком-то моменте и уходит. Это называется «процент отказов», и он для форм, к сожалению, часто бывает очень высоким.
А ведь каждая заполненная форма — это же не просто данные, это потенциальный лид, это деньги. Когда мы делаем форму удобной, мы, по сути, облегчаем жизнь нашему клиенту. Мы говорим ему: «Эй, приятель, мы ценим твое время, давай сделаем это быстро и безболезненно». И он это чувствует. Он видит, что о нем заботятся. В итоге, он не просто заполняет форму, он начинает лучше относиться к вашему бренду.
Да и вообще, согласитесь, все мы люди. И мы не любим лишних сложностей. Если форма просит у нас какие-то немыслимые данные, которые нам вообще не хочется оставлять, или если там десять полей, а нам нужно только два, мы начинаем испытывать негатив. Это чисто человеческая реакция, понимаете? Чем меньше усилий мы прикладываем, тем лучше мы себя чувствуем. Это психология. И, на мой взгляд, очень важно это учитывать. Нужно думать не как владелец сайта, а как человек, который его посетил.
Принципы хорошего UX для веб-форм
Вообще, когда делаешь форму, надо всегда помнить, что самое важное — это человек, который её заполняет. Если ему не нравится, он просто уйдет, и все ваши усилия насмарку. Вот почему существуют определенные принципы, которые реально работают. И это не какие-то там абстрактные идеи, а вполне конкретные вещи.
Краткость и ясность. Начну, пожалуй, с самого главного — не надо просить у людей лишнего. Каждый раз, когда вы добавляете новое поле в форму, спросите себя: а это действительно нужно прямо сейчас? Понимаете, если вы продаете, скажем, футболку, то зачем вам знать, в какой школе учился покупатель? Или его семейное положение? Чем короче форма, тем лучше. Это золотое правило. А ещё, названия полей должны быть, ну просто максимально понятными. Никаких там заумных «идентификаторов» или «артикулов». Просто: «Имя», «Телефон», «Электронная почта». Все, что непонятно, заставляет мозг напрягаться, а люди этого, к сожалению, не любят.
Визуальная иерархия и разметка. Так, дальше. Как форма выглядит, это тоже очень важно. Она должна быть аккуратной и структурированной. Вот что я имею в виду:
- Заголовки и подписи. Они должны быть четкими и легко читаемыми. Лучше, чтобы подписи к полям стояли сверху, это, кстати, сильно облегчает сканирование.
- Выравнивание. Большинство людей читает слева направо. Поэтому, выравнивание всех полей по левому краю — это самый оптимальный вариант. Когда поля прыгают то вправо, то влево, это выглядит, ну, так себе, и читать становится сложнее.
- Группировка. Если у вас длинная форма, разбейте ее на логические блоки. Например, «Личные данные», потом «Адрес доставки» и так далее. Это, как бы, разбивает большую задачу на несколько маленьких, и психологически это воспринимается намного легче. Ну, знаете, как с большим тортом: его легче съесть по кусочкам.
Помощь пользователю. Люди могут ошибаться, это нормально. Важно им в этом помочь.
- Подсказки и плейсхолдеры. Они нужны, но надо понимать, когда и как их использовать. Плейсхолдер — это текст внутри поля, который исчезает при вводе. Он хорош для примеров, типа «ivanov@mail.ru», но не должен быть единственной подписью к полю. А вот подсказки, которые видны постоянно, помогают пользователю не забыть, что ему нужно вводить.
- Валидация в реальном времени. Это вообще крутая штука. Зачем ждать, пока человек заполнит всю форму, чтобы сказать ему, что он ошибся в имени? Дайте ему обратную связь сразу, как только он закончил вводить данные в поле. Например, он вводит email, и тут же рядом появляется маленькая зеленая галочка или красный крестик.
- Обратная связь об ошибках. Если ошибка все-таки случилась, то сообщение об этом должно быть, во-первых, понятным, а во-вторых, оно должно находиться прямо рядом с тем полем, где произошла ошибка. Не надо где-то там сверху писать «Ошибка!». Это сбивает с толку.
Адаптивность. Ну и, конечно, сейчас без этого никуда. Огромное количество трафика идет с мобильных. Должна быть произведена оптимизация UX форм на сайте с учетом использования сайта на маленьких экранах. Используйте подходящие типы ввода, чтобы на телефоне сразу всплывала нужная клавиатура: для номера — цифровая, для имейла — с собачкой.
Советы по практической реализации
Все эти принципы — это, конечно, хорошо, но давайте поговорим о том, как это все применить на практике. Вот несколько моментов, которые я всегда держу в голове.
- Кнопка отправки. Сделайте её заметной. Ну вот прямо очень заметной. Она должна выделяться на фоне всего остального. И, кстати, что писать на кнопке, это тоже важно. Забудьте про «Отправить». Лучше что-то более конкретное: «Зарегистрироваться», «Оформить заказ», «Скачать». Это как бы говорит пользователю, что произойдет после нажатия. И еще, когда человек нажал кнопку, и форма отправляется, покажите ему, что что-то происходит. Например, кнопка может поменять цвет, а текст на ней — на «Отправка…». Это успокаивает и не заставляет кликать по ней десять раз.
- Обязательные и необязательные поля. Это тоже важный момент. Обязательные поля нужно обязательно как-то выделять. Обычно для этого используется звездочка (*). Это, как правило, все понимают. А если поле не обязательное, может, его вообще не стоит делать? Ну, серьезно, если информация не критична для вашего бизнеса, то уберите поле. Это сильно сократит форму.
- Сохранение данных. Современные браузеры умеют запоминать данные. Не мешайте им в этом. Это очень сильно облегчает жизнь, когда пользователь заполняет форму во второй раз. Помните, что люди не любят делать одну и ту же работу дважды.
- Сообщения об успехе. Ну вот, человек заполнил форму, нажал кнопку, и… что дальше? Ему обязательно нужно показать, что все прошло успешно. Не просто «Спасибо», а что-то более конкретное: «Ваша заявка принята, мы свяжемся с вами в течение часа». Это создает ощущение завершенности и профессионализма. Ну и, конечно, хорошее сообщение должно быть позитивным. Никто не любит, когда ему сообщают об успехе как о чем-то обыденном и скучном.
