Как создать интерактивную форму без программирования
На портале статистики Statista мы нашли цифры, почему это происходит:
- Неожиданные дополнительные траты – 56%;
- Просто смотрел – 37%;
- Нашел лучшую цену в другом месте – 36%;
- Слишком высокая общая цена – 32%;
- Передумал покупать – 26%;
- Слишком запутанная навигация по сайту – 25%;
- На сайте случился сбой – 24%;
- Процесс слишком затянулся – 21%;
- Слишком много проверок безопасности платежа – 18%;
- Сомнения в безопасности платежа – 17%;
- Не устроили варианты доставки – 16%;
- Превышение лимита времени на сайте – 15%;
- Цена указана в иностранной валюте – 13%;
- Отклоненный платеж – 11%.
С точки зрения web-дизайна из этого списка можно контролировать пункты 6 и 8. Для лендингов и быстрых заказов 6 пункт не актуален, так как нажатие на CTA-кнопку приводит к заполнению простой формы. Каков должен быть дизайн и функционал формы, чтобы нажатие на CTA-кнопку приводило к конверсии? В этой статье мы попробуем ответить на этот вопрос. Ведь форма является основным элементом взаимодействия с пользователем в момент совершения заказа и очень важно обеспечить комфорт ее заполнения.
Шаг 1. Дизайн формы
Элементы формы должны быть релевантными стандартным представлениям об их назначении. Не стоит использовать текстовую область для ввода логина, а 10 радио-кнопок можно заменить одним выпадающим списком.
Дизайн должен учитывать опыт пользователя. Можно сколько угодно рассуждать, что зеленый – цвет спокойствия, а красный тревоги. Истина в том, что за несколько лет пользователи привыкли к зеленым кнопкам подтверждения и красным отказа. Если вы меняете привычный дизайн – изменения должны быть очевидными для пользователя.
Представим, что все дизайнеры договорятся и поменяют цвет привычных кнопок – через год изменится и пользовательский опыт.
Иногда рекомендуется устанавливать размер элементов формы таким образом, чтобы он давал представление об объеме данных, необходимых для ввода.
Нам кажется, что это лучше делать для одиночных полей или полей, расположенных в одну строку. Пользователь приучен к тому, что поля в многострочных формах выровнены по ширине. При этом Якоб Нильсен рекомендует делать поля достаточно длинными, чтобы пользователь видел весь введенный текст.
Шаг 2. Разделение шагов заполнения формы
Самая большая ошибка разработчика – форма с большим количеством полей. Большинство посетителей не будут без острой необходимости их заполнять. Что сработает на сайте банка при оплате счетов, то не будет работать при заказе. Если же вам нужны дополнительные данные – адрес доставки, запасной контактный телефон и т.д. – разделите заполнение на шаги. Иногда форма делится на разделы в пределах одного окна, но нам кажется, что лучше добавить еще одну-две страницы, каждая из которых содержит три-четыре поля. Количество шагов должно быть минимальным! Максимум три. Дальше пользователь не пойдет.
Все данные, которые можно получить автоматически должны быть выведены на экран. Геолокация, регистрационные данные – все это должно быть в форме, чтобы пользователь мог изменить в случае необходимости. Подключите виджет автозаполнения – он тоже поможет при заполнении данных. Самый плохой вариант для заполнения города или страны – выпадающий список. Особенно для жителей Якутска.
Создавая прототип, учитывайте, что для лендингов редко используются формы более чем из трех полей – они созданы для ускорения целевого процесса. Если форма в лендинге содержит разнородные поля, например, контактные данные и описание проблемы или заметки, разделите их визуально.
Интерактивные формы
Создавая платформу PIXLI, мы заложили некоторый функционал «по умолчанию».
- Установка для поля свойства «Обязательно для заполнения».
- Сообщение об ошибке для незаполненных полей после нажатия на кнопку отправки.
- Подсказка в поле.
- Подсветка активного поля.
Также дали возможность визуально создавать небольшие фрагменты интерактивности для автоматизации программирования событий. Например, скрытие и появление элементов, изменение текста в виджете «текст», переход по адресу и т.д. Для более сложной обработки события можно добавлять и удалять собственные классы.
Далее мы расскажем, как можно расширить функционал формы без программирования с помощью триггеров.
Шаг 3. Своевременная проверка и реакция на ошибку
Когда пользователь заполняет форму, каждое поле должно быть проверено. Минимум – обязательность заполнения. Максимум – формат ввода. Проверку обязательного поля мы предусмотрели на уровне платформы – разработчик просто ставит галочку при создании формы.
Для детальной проверки необходимо привязывать к полю формы программный код.
Шаг 4. Подсказка
С помощью триггеров редактор позволяет показывать подсказку, когда пользователь начал набор данных и поле очистилось. Покажем, как это можно реализовать.
Расположим в форме виджет «текст» для подсказки. Пока он должен быть пустой. Высота текстов должна быть одинаковой. Для первого блока текста установим выравнивание по левому краю, для второго – по правому. У текстового поля отменяем обтекание. В итоге блоки будут расположены как нам надо.
Создаем для текстового поля триггер. Если вы не нашли в выборе события нужного – ничего страшного. Триггеры PIXLI поддерживают все события JavaScript. Только следует их указывать без приставки «on». Так как подсказка в поле пропадает, когда пользователь начинает печатать, воспользуемся событием keypress.
Когда пользователь покидает поле, подсказка должна исчезнуть. Создадим триггер, где в качестве события пользователя укажем blur, и очистим текст подсказки.
Попробовать сделать это можно здесь.
Шаг 5. Помощь
Если пользователю не понятно, зачем он вводит данные, он не станет заполнять поле. Покажите около поля, зачем вам нужен адрес или телефон.
В редакторе платформы PIXLI можно вывести подсказку около поля, сделав видимым блок текста. Это делается с помощью простого триггера, аналогично предыдущему пункту.
Заключение
Мы показали не все возможности для форм в редакторе платформы PIXLI. Но, как видим, реализовать минимальные интерактивные действия может даже разработчик, не знакомый с javascript. С редактором PIXLI программирование форм перестало быть уделом избранных. Он позволяет стать дизайнером, верстальщиком и программистом в одном лице и создать интерактивную привлекательную страницу.
______________________________________________________________________
Материал создан агентством контент-маркетинга Текстотека.
Хотите самостоятельно внедрить контент-маркетинг в свой бизнес? Подписывайтесь на наше сообщество ВКонтакте, там много бесплатного обучающего материала.