Розумні форми: як покрокові й адаптивні поля піднімають конверсію

Форма – остання точка, де сайт втрачає людей, які вже вирішили звернутися. Усе інше вже спрацювало: людину привели, вона прочитала, повірила, натиснула кнопку. І побачила чотирнадцять полів.

Порада «скоротіть форму» правильна, але неповна. Іноді дані справді потрібні, і питання не в тому, скільки полів, а в тому, як їх показувати.

Чому довга форма відлякує

Справа не в кількості хвилин на заповнення. Справа в оцінці, яку людина робить за секунду, побачивши форму цілком: «це надовго». Рішення про відмову ухвалюється до того, як заповнене перше поле.

Звідси випливає неочевидне: та сама кількість полів, розбита на кроки, дає більше відправок, ніж показана одразу. Змінилася не робота, змінилася оцінка обсягу.

Покрокова форма: коли допомагає

Правила, без яких кроки шкодять:

• Видимий прогрес. «Крок 2 з 3» знімає головне заперечення – невідомо, скільки ще.
• Легке поле першим. Ім’я або вибір із двох варіантів. Той, хто зробив перший крок, з набагато більшою ймовірністю дійде до кінця.
• Можливість повернутися. Без втрати введеного.
• Не більше трьох-чотирьох кроків. Далі втома переважує виграш.
• Контакт до деталей. Якщо людина кине форму на третьому кроці, у вас хоча б буде як із нею зв’язатися.

Останній пункт найважливіший і найчастіше зроблений навпаки: спершу запитують подробиці задачі, а контакт залишають наостанок. У результаті кинуті форми не залишають нічого.

Адаптивні поля

Показувати треба тільки те, що стосується конкретної людини. Найпростіший робочий приклад: перше питання – тип задачі, і залежно від відповіді далі йдуть різні набори полів.

Це прибирає ситуацію, коли клієнт бачить п’ять нерелевантних полів і намагається зрозуміти, обов’язкові вони чи ні. Заодно скорочує форму без втрати даних: ви питаєте те саме, але тільки в тих, кому це питання має сенс.

Обережно з одним: адаптивність не повинна бути непередбачуваною. Поля, що з’являються й зникають при кожному кліку, дратують сильніше за довгий список.

Миттєвий зворотний зв’язок

Перевірка при виході з поля, а не після натискання кнопки відправки. Різниця принципова: у першому випадку людина виправляє одну помилку одразу, у другому – бачить п’ять червоних полів і закриває вкладку.

Що має бути в повідомленні про помилку:

• Яке саме поле.
• Що не так конкретно.
• Як має бути.

«Некоректний формат» не проходить жоден із трьох пунктів. «Телефон має містити 10 цифр» проходить усі.

Технічний мінімум, який дає найбільше

Дрібниці, які майже нічого не коштують і помітно впливають на мобільних:

• Правильний тип поля. Для телефону й пошти браузер покаже потрібну клавіатуру. Це економить людині кілька дотиків на кожному полі.
• Автозаповнення. Атрибути автозаповнення дозволяють підставити ім’я, телефон і пошту з пам’яті браузера одним дотиком.
• Підпис над полем, а не всередині. Підказка всередині зникає при введенні, і людина забуває, що тут писати.
• Достатній розмір областей натискання. Особливо для перемикачів і чекбоксів.
• Робота з клавіатури. Перехід між полями клавішею табуляції в логічному порядку, видимий фокус.
• Захист від подвійної відправки. Кнопка блокується після натискання, інакше в базу падають дублі.

Що вимірювати

Кількість відправлених форм нічого не пояснює. Корисні три інші показники:

Різниця між першим і другим показником – це і є реальна проблема форми. Якщо починають заповнювати сто людей, а доходять двадцять, справа не в трафіку.

З чого почати

1. Порахуйте обов’язкові поля. Більше чотирьох – подивіться, які з них справді потрібні до першої розмови.
2. Перенесіть контакт на перший крок.
3. Додайте перевірку при виході з поля з конкретними повідомленнями.
4. Перевірте типи полів і автозаповнення.
5. Увімкніть подію на початок заповнення, щоб побачити відсів.

Це робота на кілька годин, і вона майже завжди дає більше, ніж зміни на сторінці вище форми. Причина в тому, що тут ви працюєте з людьми, які вже прийняли рішення, а не намагаєтеся їх переконати.