Виталий Филатов

о тексте, смысле и красоте

Форма обратной связи

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

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

Выбор способа общения с пользователем зависит от задач сайта. Для срочных и быстрых вопросов пользователю удобнее заказать звонок или открыть чат с оператором, но нужно, чтобы кто-то дежурил на линии. Форма обратной связи работает как почта, просто с ней удобнее: не нужно копировать адрес, открывать почтовый сервис и нажимать лишние кнопки.

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

Взаимодействие с формой состоит из четырёх этапов:

  1. Пользователь замечает кнопку обратной связи и решает посмотреть, что там.
  2. Страница проматывается на форму или открывается модальное окошко. Пользователь читает-заполняет или уходит с формы и дальше ничего не происходит.
  3. Форма отправляет сообщение.
  4. Пользователь читает подтверждение об отправке, диалог завершается.

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

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

Элементы формы

  1. Модальное окошко с подложкой, которая затеняет страницу. Если форма большая, её можно разворачивать на весь экран с анимацией. Окошко должно влезать в экран и блокировать прокрутку страницы, чтобы после закрытия формы пользователь оказался там же, где начал диалог.
  2. Заголовок, чтобы было понятно, чего форма хочет от пользователя.
  3. Призыв к действию, объясняющий что и зачем писать, какая от этого будет польза, кто ответит и когда.
  4. Поля ввода, которых должно быть как можно меньше. Согласно модным представлениям о психической энергии, мозг охотнее выделит энергию на простое действие с понятным смыслом.
  5. Кнопка «Отправить». Неактивна, пока обязательные поля пусты.
  6. Подтверждение об отправке. Если отправка занимает полсекунды, показываем спиннер, чтобы пользователь не подумал, что всё сломалось.
  7. Крестик, закрывающий форму. Кнопка «Закрыть» не нужна, форма закрывается по крестику или клику за пределами окошка.
  8. Предупреждение со ссылкой на политику конфиденциальности. Если юрист разрешит, её можно её убрать в подвал.

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

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

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

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

Кнопка про всё сразу на странице вымышленной компании

Вот как вся эта красота может выглядеть у компании с широким профилем:

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

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

Телефон и почта — традиционные каналы связи в деловой среде, но если целевая аудитория предпочитает мессенджеры, уместнее спрашивать логин в Телеграме/Скайпе или аккаунт ВК/ФБ.

Обязательные поля. Пока пользователь не указал почту или телефон, кнопка «Отправить» неактивна. Другие поля для первого контакта не особо важны: имя и вопрос можно узнать в разговоре. Заставляя пользователя заполнять на себя досье, мы решаем не его задачу, а свою. Не надо так.

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

Чтобы пользователь заполнил побольше, мотивируем его разумными объяснениями: укажите почту, чтобы не диктовать её по буквам, мы вышлем вам презентацию.

К обработке формы можно прикрутить CRM и квалифицировать заявки по заполненным полям. Например, если пользователь указал имя, почту, сообщение и приложил файлы, ставить заявку в приоритетные лиды. Заявки с одним номером телефона — как запрос звонка, а в ответ на имя и почту автоматически высылать презентацию. А потом подключить нейронную сеть, чтобы она определяла вес лида по тексту сообщения и отвечала на типовые вопросы.

Для начала можно научить форму определять день недели и выводить корректную подпись под полем телефона:

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

Телефонный номер приводим к нужному формату после ввода, чтобы не сбивать пользователя и не мешать вставлять номер автоподстановкой или по Ctrl + V.

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

Если страница короче получившегося окна, можно скролить само окно относительно неподвижной страницы.

Ничего не мешает изложить дело обстоятельно

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

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

Фрагмент формы с недопустимым файлом

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

Форма может понимать, что именно пользователь сообщил, и показывать соответствующее подтверждение. Указал почту — когда напишем, для телефона — когда ждать звонка. А если указал всё и приложил файлы, расскажем, что будет дальше.

Мы позвоним вам на этой неделе до 17:00 по Москве.

Мы позвоним вам в понедельник с 10:00 по Москве.

Мы изучим материалы и напишем вам в начале следующей недели.

А теперь немного прагматичного реализма.

Почему такую форму сложно сделать. Причины две: конечность ресурсов и ограничения движков и виджетов.

Форму нужно спроектировать, нарисовать, согласовать, сверстать, написать логику и отладить. Задач набирается на десятки часов, а экономический эффект не так уж и очевиден, чтобы срывать разработчиков с коммерческих задач. Если форма обратной связи не ваш основной инструмент продаж, вкладываться в неё стоит по остаточному принципу. Хватит и того, что форма опрятна, понятна и не требует заполнять всех полей.

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

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

Обращайтесь к нам ;3

 794   2019   UX
1 комментарий
Анатолий Тарасенко 2019

Спам каменты в таком месте, серьезно?

Виталий Филатов 2019

В другой заметке вообще 800 насыпалось. Закрою комменты обратно, видимо :(

Пишите мне в ВК: https://vk.com/dottore_editore