Наш чек-лист для форм на сайтах

    Це друга частина наших чек-листів. У першій ми докладно розібрали вимоги до фільтрам . На відміну від фільтрів, вимоги до призначених для користувача формам більш універсальні. Однак нам потрібно декілька палких дискусій, щоб виробити більш-менш єдиний формат. Відео з HolyWarModeOn розповідає про типові помилки юзабіліті в проектах. Відразу під роликом шукайте докладний чек-лист для форм на сайті.
 
 
 
 
 Важливість: Extra High
 □ Збереження форми.
□ Форма зберігається у веб-формах (адмін-панелі) або SQL-таблицях.
 
 □ Зміна адреси відправки.
□ E-mail, на який приходять дані з веб-форми, можна змінювати в адміністративній панелі.
 
 Важливість: High
 □ Актуальність адреси відправки.
□ Прописаний реальний e-mail особи, яка відповідає за обробку заявок.
 
 Чому саме так. Ситуація з типових буднів техпідтримки: власник
інтернет-магазину рве і метає — немає заявок від клієнтів. Відкриваємо адмінку, дивимося: внесений адресу svetochek1988@mail.ru, куди і потрапляють всі запити. Далі пояснювати немає сенсу.
 
 □ Відправка форми.
□ Дані із заповненої форми відправляються адміністратору на e-mail.
 
 □ Відправка повідомлення користувачеві.
□ Опціонально. Користувач одержує повідомлення на свій e-mail про успішно отриманої заявці і наступних діях, які від нього потрібні.
 
 Навігація
 □ Передбачені плейсхолдери (placeholder) для полів.
□ Якщо назви полів не підписані, то всередині полів виводиться підказка, яка зникає при внесенні тексту.
 
 Чому саме так. Користувачам потрібні інструкції, а проектувальникам і дизайнерам — компактний спосіб надання інформації.
 
Приклад: Юнипласт .
 
 
 
 □ Прописаний атрибут autocomplete для полів, що підтримують це значення.
Атрибут autocomplete підставляє раніше введені користувачем дані в поле, якщо функція не відключена в браузері.
 
 Чому саме так. Чим швидше користувач заповнить форму, тим вище ймовірність, що він її відправить.
 
Приклад: Лабіринт .
 
 
 
 □ Правильна робота багатокрокових форм.
□ Навігація поруч з формою показує поточний етап і кількість залишилися кроків.
 Чому саме так. Невідомість лякає відвідувачів і знижує ймовірність повного заповнення об'ємної форми. Позитивний приклад — Asos. У формі зазначено п'ять кроків, але по факту реєстрація проходить в п'ять разів швидше — основні функції сайту доступні відразу після заповнення першого екрану реєстрації.
  
Приклад: Asos .
 
 
 
 Зауваження. На деяких проектах ми відмовилися від стандартної реєстрації на користь авторизації через соціальні мережі.
Приклад: Restlook .
 
□ Багатокрокові форми коректно працюють при навігації за допомогою кнопок «Вперед» і «Назад» в браузері.
 
 Валідація
 □ Для числових значень з певного діапазону прописані обмежувачі мінімального і максимального кількості символів.
□ Перевірте це для дат, часу та інших подібних характеристик.
 Чому саме так. Проста підстрахування від введення відвертої брехні або появи помилок через неуважність — дати народження в майбутньому або часу доставки завчасно заявки.
 
 □ Для полів, які передбачають завантаження файлів, прописаний атрибут accept, що визначає тип завантажуваних документів.
 Чому саме так. Якщо прописаний атрибут accept, при виборі з жорсткого диска користувач бачить тільки відповідні типи файлів для завантаження — наприклад, doc і txt. Це виключає відправку документів у форматі, що не відповідному для обробки.
 
 □ Для полів, валідація яких проходить через регулярний вираз, прописаний атрибут pattern.
Валідація — це перевірка введених користувачем даних на відповідність вимогам системи. Інформація перевіряється шляхом звіряння з регулярним виразом, заданому в спеціальному форматі.
Наприклад, регулярний вираз [0-9] {5,10} для пароля означає, що він може складатися тільки з цифр, а його довжина коливається від п'яти до десяти символів. Якщо для поля прописаний атрибут pattern, то форма не відправляється, поки дані не будуть введені вірно.
 
□ Необхідний формат даних, які повинен ввести користувач, очевидний для нього.
 Чому саме так. Користувач повинен розуміти, чого від нього чекають при введенні даних. Для цього призначені короткі пояснення на кшталт «Пароль складається не менше ніж з 8 символів і включає цифри та латинські літери».
 
□ Доступна інструкція по формату даних, що вводяться на людській мові.
 Чому саме так. Очевидна і зрозуміла підказка дозволяє швидко розібратися в причинах помилки і не відчувати себе тупим при заповненні полів форми.
 
Приклад: ЛітРес .
 
 
 
□ Користувач не бачить регулярного виразу як підказки до дії.
 Чому саме так. Підказка у поля індексу, що представляє собою регулярний вираз [0-9], малоинформативна. Фраза «Індекс складається з цифр від 0 до 9» набагато зрозуміліше користувачеві.
 
 □ Повідомлення про помилки зрозумілі звичайним користувачам і логічні.
 
Приклад: ZimZum .
 
 
 
 Важливо . Типова помилка — регулярне вираження в повідомленні про невірний заповненні форми.
 
 Інше
 □ Форма запитує у користувача тільки необхідні дані.
Відкрийте форму, візуально переконайтеся, що потрібно внести тільки необхідний мінімум інформації.
 Чому це важливо. Об'ємні форми вбивають конверсії. Реєстрація, купівля або зворотний зв'язок повинні бути максимально простими, щоб не плутати користувачів.
 
Приклад: Сампрінт .
 
 
 
 □ Якщо всі поля обов'язкові для заповнення, поруч з їх назви не виводяться зірочки — символ *.
Відкрийте форму і переконаєтеся в цьому візуально. Бажано наявність поясняющего тексту про обов'язкове заповненні всіх полів.
 
 □ Для авторизованого користувача в поля форми автоматично підставляються всі відомі про відвідувача дані.
Переконайтеся візуально, що вказана користувачем в профілі інформація автоматично виводиться в полях форм, що запитують ці дані.
 
 □ Текстове багаторядкове поле при введенні об'ємного повідомлення змінює висоту або в правій частині з'являється скроллбар для перегляду всього вмісту.
Відкрийте форму з текстовим багаторядковим полем, введіть у нього максимально велику кількість символів.
 Чому саме так. Багато користувачів перечитують написане перед відправкою. Потрібно дати їм можливість скористатися скролл-баром або переглянути всі повідомлення в розширеному поле замість переміщення по тексту за допомогою стрілок клавіатури.
 
Приклад: Мех-експо .
 
 
 
 □ В полях форми прописаний коректний атрибут TYPE, повідомляє браузеру тип елементів форми.
□ Правильно вказані типи дат, часу, телефонів, діапазонів, url, e-mail, чисел.
 
 □ Під час відправки форми на повільному каналі користувач не може змінювати в ній дані.
 Важливо. Дійсно для ajax-форм.
 Чому саме так. При невисокій швидкості з'єднання форма ajax відправляється не відразу, деякий час залишаючись на екрані з усією внесеної інформацією. Користувач не повинен у цей момент передумати і поміняти всі дані. Точніше, передумати він якраз може, але реалізувати свою задумку — вже немає: необхідна блокування від змін до моменту отримання відповіді від сервера.
При цьому бажано візуально показати, що форма заблокована. Один з варіантів — прелоадер:
 
 
 
 Важливість: Low
 □ Висновок підказок і помилок зроблений з анімаційним ефектом.
 Зауваження. Цей параметр залежить від дизайну і не є обов'язковим.
 
Далі — три спірних історії, які потрібно вирішувати з менеджером на етапі проектування.
 
 □ Кнопка відправки даних неактивна, поки не активований чекбокс «Погодитися з правилами», «Угода».
 
Приклад: Ebazaar .
 
 
 
 □ Кнопка відправки даних неактивна, поки всі введені дані не пройшли позитивну валідацію.
Відкрийте форму з полями для введення, введіть некоректні дані, перевірте, активна чи кнопка.
 Це важливо. У деяких випадках некоректність — поняття відносне. Підставі подстав — валідація номерів телефонів у формі зворотного зв'язку. Якщо коротко — відключайте її.
 
 □ Якщо дані не пройшли позитивну валідацію, при наведенні курсору на кнопку для відправки даних виводиться інформаційне повідомлення.
Відкрийте форму, введіть некоректні дані, наведіть курсор на кнопку відправки даних, перевірте, чи виводиться повідомлення.
 
Список можна роздрукувати — користуйтеся для тестування юзабіліті. Те ж саме — в документі Google .
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.