Як ми збільшили відсоток реєстрацій на 68% за допомогою дизайну форм

Технології 10 січня 2025

Поради та приклади в дизайні форм логіну та реєстрації.

Таби
Окремі сторінки
Попапи
Всі на одній сторінці
Покроковий процес
Як зробити реєстрацію більш ефективною
Як це зробили ми
Результати

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

З чого складається механізм реєстрації та входу користувача в систему?

Форма входу
Форма реєстрації
Форма нагадування або скидання пароля
Повідомлення після нагадування або скидання пароля
Реєстрація через соцмережі

Це необхідний мінімум. Його треба якось скомпонувати і отримати єдиний і зрозумілий механізм входження користувача.

Способи реалізації

Таби

Окремі сторінки

Попапи

Всі на одній сторінці

Покроковий процес

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

Як зробити реєстрацію більш ефективною

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

Витрачений час. Покажіть у секундах наскільки реєстрація швидка, якщо це дійсно так. Ніхто не хоче витрачати свій дорогоцінний час. Курсор повинен автоматично вставляти в перше поле форми.

Підписи. Писати назви полів краще над ними, а не поруч. Так погляд людини ковзає зверху вниз, а не «перевернутою ялинкою».

Якщо Ви не підписуєте назви полів поруч з ними, а використовуєте плейсхолдер, прибирайте його тільки після того, як людина почне щось вводити. Інакше він може забути, що тут потрібно було писати. Особливо якщо перемикаєшся між полями клавішею Tab. Ще плейсхолдер можна не прибирати, а зменшувати і зрушувати вгору.

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

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

Пароль. Запитуйте пароль максимум один раз. Якщо людина опечаталася і не змогла увійти, вона відновить пароль. Або взагалі не питайте пароль, а генеруйте його і висилайте на пошту. Якщо Ви все-таки його питаєте, то дайте можливість бачити його при введенні. Нечасто у нас хтось стоїть за спиною.

Соцмережі. Давайте можливість входити через соцмережі. Відразу. Це швидко і зручно. Можна взагалі залишити для входу тільки соцмережі. Цей варіант позбавляє можливості зробити купу помилок, але він для молодої аудиторії. Можна «відгребти» якщо ваша цільова аудиторія старше 40.

Чекбокси. Найчастіше ми зазвичай користуємося своїм пристроєм, а не чужим. Тому, щоб не змушувати користуватися постійно логінитися, потрібна галочка «Чужий комп'ютер». І якщо людина її натискає, то при закритті Вашого сайту її автоматично розлогінує. Формулювання може бути різним, наприклад, «Залишатися в системі» з активною галочкою. Мені особисто більш логічним здається перший варіант. Не підписуйте на типові листування.

Візуальні образи. Фотографії людей притягують погляд і «оживляють» сторінку. Але тут треба бути обережним. Не використовуйте стокові картинки - вони відштовхують і створюють ефект чергової непотрібної реєстрації. Використовуйте фотографії своїх клієнтів або своїх співробітників (це залежить від специфіки порталу). Не наймайте фотомоделей. Люди повинні бачити собі подібних.

Тестування. Відкривайте в різних браузерах, пристроях. Емулятори не завжди працюють так, як реальний пристрій. Користуйтеся самі і давайте іншим людям пробувати. Кількість багів зменшиться.

Як це зробили ми

Людей, які сидять в інтернеті, але при цьому не користуються соціальними мережами одиниці. Тому, ми вирішили зробити акцент на вхід за допомогою соцмереж і залишити можливість класичної реєстрації через e-mail.

Перше вікно - це вибір способу реєстрації: Вконтакте, Facebook, Google +, E-mail

Реєстрація за допомогою соцмереж нічого від дизайнера не вимагає, якщо не потрібна додаткова інформація. Наприклад, у нашому випадку потрібно було додатково запросити нікнейм користувача. Він виступав як піддомен його сторінки. Так виглядає вікно класичної реєстрації через e-mail (додатково продублюємо соцкнопки, на випадок якщо людина, все таки, обере спосіб швидше).

Вікно логіна - це пошта (або нікнейм) і пароль. Ставимо галочку «чужий комп'ютер» і посилання на нагадування пароля. У разі кількох невдалих спроб входу поспіль з'являється капча.

І, у висновку, вікно нагадування пароля. Тут нічого нового, головне витримати загальну стилістику з іншими формами.