Реєстрація - неминуче зло
Скільки людей люблять заповнювати форми? Я думаю, не так багато. Це не те, що користувачі хочуть від сервісу - вони просто хочуть купувати квитки, спілкуватися з друзями і т. Д. І реєстрація - це як щось неминуче зло, з яким їм доводиться мати справу. Так в чому ж проблема сотправкой форм?
Форми мають вирішальне значення для успіху бізнесу, і вони можуть привести до низької конверсії та догляду клієнтів. Але це також місце, де користувачі найбільше відчувають труднощі. Так як дизайнер може допомогти в цьому випадку? Як створити дійсно чудову форму? Ось кілька порад.
Зберігайте введені дані
Одна з найбільш корисних функцій в формах - запам'ятовування даних введення, які користувач уже заповнив. У разі, якщо щось піде не так, користувачеві не потрібно знову вводити всю інформацію. Ця функція особливо корисна для довгих форм. Garlic.js дозволяє автоматично зберігати значення текстового поля ваших форм локально, поки форма не буде відправлена.
Намагайтеся, щоб форма була якомога коротше або, розділіть її на кілька етапів
Додайте тільки необхідні поля в свою форму - це заощадить час і зменшить кількість помилок. Якщо поле необов'язково, краще не показувати його взагалі. Обмежте форму тільки 1 або 2 необов'язковими полями і чітко позначили їх як необов'язкові. Також видаліть всі поля підтвердження, крім тих, які вам дійсно потрібні. Якщо ви не можете уникнути довгої форми, розділіть її на кілька кроків і згрупуйте пов'язані поля.
Авто-фокус першого поля введення в формі
Автофокусування направляє користувачів до вихідної точки вашої форми. Перейдіть до першого поля кольором кордону, кольором фону або обома.
Уникайте прапорців для підтвердження Політики конфіденційності
Ви можете використовувати одну форму для реєстрації та входу (але будьте обережні)
Розміщуйте поля в одну колонку
Утримуйте користувачів в процесі, дотримуючись однієї колонки, щоб уникнути переорієнтації. (Винятки: короткі і пов'язані поля, такі як місто, штат і поштовий індекс).
Забезпечте чіткий заголовок
Хороший дизайн починається з тексту, хороша форма починається з назви. Короткий і акуратний заклик до дії демонструє користувачам переваги заповнення цієї форми, а також мотивують їх. Щоб заручиться довірою покажіть, що інформація користувача захищена, створіть значки безпеки. Зображення: New York Times
установка введення
Поле введення - це основний елемент будь-яких форм. Простий введення складається з декількох частин: поле введення, підпис, позначка-заповнювач.
Поле введення
Зазвичай в текстовому полі 6 станів: за замовчуванням, наведення курсору, фокус, помилка, успішно і не активно.
Золоте правило - вирівнювати по верху підпису, так як вони швидше Новомосковскются. У коротких формах НОРМАЛЬНО використовувати виразні іконки замість підписів. Інший спосіб -використовувати спливаючі підказки, як в матеріальному дизайні. У підписів повинні бути короткі і зрозумілі мікрокопії. Капіталізація початкової літери тільки перше слово або капіталізація початкових букв усіх слів у реченні - вирішувати вам, але зберігайте системність в назвах підписів. Групуйте пов'язані підписи і поля - пишіть підписи поруч з полями, до яких вони належать. підписи полів
Мітки-заповнювачі
Мітки-заповнювачі - це підказки, які допомагають користувачам зрозуміти, який тип і формат даних можна ввести. Уникайте використання наповнювачів в якості підписів, що робить форму компактної. Це добре підходить для коротких форм з 2-3 полями, але не для довших форм. Коли користувач вводить інформацію в поле, заповнювач зникає, і користувач може не мати можливості перевірити, вводить він правильний тип даних. Уникайте використання міток-заповнювачів як підписів
Будьте обережні з полем пароля
Я звернув увагу на поле пароля, тому що у нього є свої обмеження і хитрості.
Дозвольте користувачам бачити свої паролі
Це допомагає користувачам перевіряти свої паролі перед відправкою.
Показуйте надійність пароля
Хороші паролі важко вгадати. Покажіть користувачам, наскільки складний і надійний у них пароль, і чи потрібно їм зробити його більш складним.
Показуйте вимоги до паролю перед відправкою
Якщо ваш сервіс потребує особливих вимогах до паролів, покажіть їх перед відправкою форми.
Попереджайте користувачів, чтоCapsLockВКЛЮЧЕН
Це допомагає запобігти такій поширену помилку, як раптове натискання клавіші Caps Lock з клавішею Shift.
Створюйте функцію 'Забули пароль?' для форм входу
Люди часто забувають свої паролі (і я теж), тому полегшите нагадування або відновлення пароля.
Створюйте функціональні кнопки
Називайте кнопки правильно
Замість того, щоб використовувати загальну підпис Submit, кнопка форми повинна точно описувати, що конкретно робить користувач - Створити обліковий запис, Увійти в систему і т. Д.
Робіть кнопку неактивній, поки всі необхідні дані введення не будуть заповнені
Це ще один спосіб візуально перевірити дані введення перед відправкою.
Правильно використовуйте первинні і вторинні кнопки
Якщо у вас є дві кнопки - первинна та вторинна, ви повинні візуально розрізняти їх, щоб зменшити число потенційних помилок. Основна кнопка, зважаючи на свою важливість, повинна бути більш помітною.
Уникайте кнопок «Скидання» і «Очистити»!
Автоматизація введення
Автоматизація введення даних користувача запобігає помилки, скорочуючи поля, які необхідно заповнити.
- Заповнити форму текстових полів міста і штату на основі поштового індексу або даних геолокації.
- Вибір типу карти по введеному номеру кредитної картки.
Форматування полів за допомогою масок введення
Для виправлення проблем введення використовуйте маски введення в форматованих полях даних. Маски введення автоматично вставляють правильний формат в поле.
обмеження полів
І пам'ятайте про перевірку помилок
1. Використовуйте вбудовану перевірку
Уникайте зведення про помилки, розміщуйте повідомлення про помилки поруч з полем введення. Показуйте повідомлення про помилки по одному полю за раз.
2. Використовуйте зрозумілу мікрокопій для повідомлення про помилку
Вона повинна повідомити користувачам, чому їх інформація відкидається і як її виправити. Тон повідомлень про помилки повинен бути ввічливим і професійним.
3. Перевіряйте поля з декількома вимогами перед відправкою
4.Виделяйте поля з помилками кольором, значками і текстом
Зробіть повідомлення про помилку розбірливим, використовуйте різні способи, щоб виділити його - колір, текст і іконку.
висновок
Як ми бачимо, гарна форма реєстрації - складна річ, це не просто хороший дизайн користувальницького інтерфейсу. Щоб поліпшити роботу користувачів, розробнику необхідно подумати про всі деталі процесу. Правильно оформлена форма може збільшити конверсію і зменшити догляд клієнтів.