Как потерять клиента на форме обратной связи

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

Ошибки в форме обратной связи, которые снижают конверсию на сайте
Ошибки в форме обратной связи, которые снижают конверсию на сайте

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

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

Рассмотрим на примерах типичные ошибки формы обратной связи и рекомендации по их исправлению.

Типичные ошибки формы обратной связи на сайте

❌ Негативный пример 1

Вот так выглядит типичная форма обратной связи (Рисунок 1 ниже).

Рисунок 1. Пример формы обратной связи с сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.belveb.by%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://www.belveb.by/</a>
Рисунок 1. Пример формы обратной связи с сайта https://www.belveb.by/

Казалось бы, в чём тут проблема?

Ну, кроме того, что используется стоковое фото (Рисунок 1.1), которое снижает уровень доверия к сайту и компании, номер телефона (Рисунок 1.2) только с кодом Белоруссии (хотя банк заявляет, что работает и с российскими клиентами) и нет согласия на обработку и хранение персональных данных (Рисунок 1.3), основная проблема возникает далее, когда пользователь заполняет данные и отправляет их.

Окно после нажатия на кнопку “Отправить” в форме обратной связи на сайте <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.belveb.by%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://www.belveb.by/</a>
Окно после нажатия на кнопку “Отправить” в форме обратной связи на сайте https://www.belveb.by/

Описание проблемы

В окне обратной связи написано, что менеджер свяжется с вами в ближайшее время.

Как вы думаете, в течении какого времени с вами свяжется менеджер?

Будете ли вы ждать неопределенное время или пойдете на другой сайт, где с вами свяжутся в течении какого-то более определенного интервала времени? А если с данного сайта не позвонили в течении часа или даже дня?

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

Обоснование проблемы

На данном примере мы видим нарушение сразу двух особенностей восприятия пользователей:

Во-первых, мы не любим догадываться и делать логические умозаключения. А нас заставляют разгадать шараду “когда же с нами свяжутся”?

Во-вторых, нарушается наш “цикл мышления: цель → действие → оценка результата”. Пользователь на каждом шаге строит в голове свой план достижения целей, затем совершает определенные действия и потом оценивает насколько он приблизился к их достижению. Именно в этом состоит цикл мышления. В данном случае, пользователь не может оценить результат, так как не знает когда с ним свяжутся и он оказывается в ситуации неопределенности.

А также тут нарушаются два золотых правила проектирования сайтов:

Во-первых, нарушается золотое правило №9 – задачи пользователя, а именно его дополнительный принцип “не заставляйте пользователей догадываться о том, как сайт себя поведет”.

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

❌ Негативный пример 2

Приведем ещё один пример формы обратной связи с ошибками.

Рисунок 2. Пример формы обратной связи с сайта: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fstroyinwest.ru%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://stroyinwest.ru/</a>
Рисунок 2. Пример формы обратной связи с сайта: https://stroyinwest.ru/

Тут во-первых, слишком много данных запрашивается у пользователя: электронная почта (Рисунок 2.1), номер телефона (Рисунок 2.2).

Это нарушение золотого правила №7 – минимализм и обоснованность, которое в разделе для форм гласит "Запрашивайте только самую необходимую информацию".

А во-вторых, непонятно какие поля обязательны для заполнения.

Это снова нарушение особенности восприятия "мы не любим догадываться и делать логические умозаключения".

И нарушение золотого правила №3 – понятность, которое в разделе для форм гласит "Должна быть представлена вся необходимая информация по формату и объему вводимых данных".

Из плюсов – есть подтверждение обработки персональных данных и ссылка на политику конфиденциальности (Рисунок 2.3).

Далее, когда пользователь заполняет форму и нажимает на кнопку "Отправить", он видит то же окно с маленькой подписью внизу "Your submission was successful." (Рисунок 3.1).

Рисунок 3. Пример формы обратной связи с сайта: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fstroyinwest.ru%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://stroyinwest.ru/</a> после отправки сообщения.
Рисунок 3. Пример формы обратной связи с сайта: https://stroyinwest.ru/ после отправки сообщения.

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

Это снова нарушение особенности восприятия "мы не любим догадываться и делать логические умозаключения".

И нарушение золотого правила №3 – понятность, которое в разделе для текста гласит "Содержание текстов, заголовков, названия команд должны быть понятны пользователю".

✅ Позитивный пример

А вот и положительный пример.

Рисунок 4. Пример формы обратной связи с сайта: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcdcar.ru%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://cdcar.ru/</a>
Рисунок 4. Пример формы обратной связи с сайта: https://cdcar.ru/

Как мы видим тут запрашивают минимум информации (Рисунок 4.1) и есть ссылка на политику конфиденциальности (Рисунок 4.2).

Далее, когда пользователь заполняет форму и нажимает на кнопку "Отправить", он видит следующее окно, в котором говорится "Мы перезвоним в течении 5 минут и поможем вам с решением вашего вопроса".

Рисунок 4. Пример формы обратной связи с сайта: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcdcar.ru%2F&postId=1133167" rel="nofollow noreferrer noopener" target="_blank">https://cdcar.ru/</a> после отправки сообщения.
Рисунок 4. Пример формы обратной связи с сайта: https://cdcar.ru/ после отправки сообщения.

В данном примере пользователю сообщают, что свяжутся в течении 5 минут и это очень обнадеживает, если это действительно правда.

Подводим итоги

Пользователи, которые готовы оставить свои данные в форме обратной связи:

  • Ожидают, что им сообщат, когда с ними свяжутся и по какому каналу.
  • Не хотят оставлять слишком много данных о себе.
  • Хотят быть уверены, что их данные будут в сохранности.

Именно поэтому, мы рекомендуем в форме обратной связи:

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

Завершение

Если вы хотите проверить насколько ваш сайт прост, понятен и удобен для ваших клиентов, оставьте заявку на бесплатный юзабилити-аудит: https://docs.google.com/forms/d/e/1FAIpQLSdI7pIc1ikPEXmmfb3u0GIwYvbPbbP_JgrdUnCBYRIgwxY2mw/viewform

Полезные материалы

А также мы публикуем бесплатные материалы по теме обучения UX и юзабилити от экспертов международного уровня, материалы тренингов, вебинаров и выступлений на конференциях и в СМИ, предложения о сотрудничестве на нашем телеграм канале “UX-школа от Ю-эксперт”: https://t.me/ux_school. Присоединяйся!

55
5 комментариев

После прочтения статьи начал кстати обращать внимание на детали в форме обратной связи

Ответить

Отлично!

Ответить

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

Ответить

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

На своем сайте в форме ОС допускаете из статьи ошибки. Сколько тут UX-ошибок в форме обратной связи?

Ответить

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

Ответить