Читайте також: Проєктування checkout форми
Цей матеріал – корисний результат дослідження. Використовуйте його як шпаргалку, але обов’язково перевіряйте інформацію перед застосуванням. Дизайн текстових полів взято з попередньої версії Material Design. З новою версією можна ознайомитись тут.
Логіка полів введення:
Текстове поле може бути представлено в 4 станах:
Коли користувач заходить на сторінки з декількома порожніми текстовими полями, наприклад, для введення адреси, бажано робити перше поле одразу активним і відкривати клавіатуру, якщо це додаток. При успішному заповненні поля і переході на наступне, воно стає заповненим.
Існує два типи валідації даних:
Активна і «сіра» кнопка
Сіра кнопка – неактивна кнопка дії. Вона виключена, коли не відповідає умовам для її активації. У випадку з полями введення – кнопка сіра, якщо користувач не ввів всі обов’язкові поля, або ж заповнив деякі поля з помилкою.
Є практика – робити сіру кнопку повністю позбавленою функціоналу. Я вважаю це неправильним. Програми аналізують поведінку користувачів та фіксують, що якою б сірою не була кнопка, користувачі все одно тиснуть на неї, сподіваючись просунутися далі без заповнення поля, або без розуміння, чому вона сіра.
Для таких користувачів необхідно поміщати на сіру кнопку функціонал валідації, або ж використовувати будь-який інший формат пояснення, чому користувач не може йти далі. Наприклад, якщо користувач не ввів свою вулицю в адресі доставки і натиснув на сіру кнопку – над нею з’являється фраза «Поле вулиці не заповнено» і незаповнене поле стає червоним.
Довжину полів бажано адаптувати під передбачувану довжину контенту. Наприклад:
Слід використовувати максимально короткі слова і фрази, оскільки кількість місця обмежена. Намагайтеся писати не «В імені повинні використовуватися тільки латинські символи», а «Тільки латинські символи» або навіть «Тільки латиниця».
Часто зустрічається фраза «Мінімум 5/16/25 символів». Простий спосіб – міняти цифру не змінюючи слова. Однак, щоб зробити це грамотно, необхідно використовувати скасування для чисел. Детальніше про те, як це працює в коді, можна подивитися в цій статті.
Список пунктів, за якими можна перевірити зручність полів введення для користувачів:
У цьому блоці зібрані технічні специфікації для полів введення. Я використовувала свої кольори, ви можете використовувати свої. Однак пам’ятайте про колірний код: активне – кольорове, неактивне – сіре.
1. Порожнє поле з хінтом (підказкою)
Це неактивне поле. У ньому немає введеної інформації, присутній тільки хінт з даними, які потрібно буде ввести в це поле (Наприклад «Ім’я:» «Країна:»);
3.1 Активне поле помилок (помилка в процесі введення):
3.2 Неактивне поле з помилкою:
Поле з помилкою забарвлюється червоним в процесі введення тільки при введенні:
Помилку, що сигналізує про порожнє поле і занадто маленьку кількість символів (червоний хелпер-текст «Повинно бути мінімум n-символів»), ніколи не виводимо в процесі введення, тільки якщо користувач активував поле, нічого не ввів або ввів мало символів і вручну перейшов до наступного поля;
У всіх інших випадках він ставав червоним при переході до наступного поля введення, або при натисканні на сіру кнопку. (Наприклад, помилка Required field *);
При натисканні на сіру кнопку відбувається анімація незаповнених полів:
У сірої кнопки є функціонал. В даному прикладі кнопка має Elevation, однак я рекомендую робити неактивну кнопку очевидно неактивною.
4. Активне поле:
Так виглядає активне поле – хінт піднявся нагору і зменшився, з’явився хелпер і лічильник (каунтер), смуга і хінт забарвилися в основний колір програми. У моєму випадку це помаранчевий, в вашому випадку – колір вашого застосування. Раджу вибирати такий колір, який би контрастував з червоним кольором помилки.
Тут я наводжу приклад правил для поширених типів полів. Я використовувала обмеження, які діють в нашій компанії. При використанні орієнтуйтеся на свої. Наприклад: якщо можна використовувати нелатинські букви в імені, то підберіть фразу замість зазначеного Only latin characters, відповідну вашим обмеженням.
1. Ім’я-прізвище
2. Поле назви компанії
6. Пароль
3. Як ввести свій номер телефону
4. Поле введення пошти
5. Zip-code
Зверніть увагу на розмір поля – воно менше/вужче, оскільки індекс не може бути довгим
У хелпер-тексті відображається підказка формату індексу в залежності від обраної країни (сайт з індексами www.statkod.ru), наприклад:
Підсвічується червоним приклад заповнення в хелперах при використанні невірних символів або букв для деяких країн, і * Required field при порожньому полі.
6. Місто
7. Адреса
8. Tin
Приклад оформлення специфіки форматів для Tin:
– Італія:
Кількість: 16
Хелпер: LLLLLL99L99L999L
Сайт ЕU з правилами
9. VAT
Назва поля введення VAT (ПДВ) змінюється в кожній країні. Міняємо назву в залежності від обраної країни, відповідно міняємо хелпер і максимальну кількість символів. Назва цього текстового поля не перекладається на інші мови, тільки змінюється в залежності від країни додатки. Джерело тут.
Приклад таблиці форм VAT для кількох країн (країна / назва VAT для цієї країни / формат / максимальна кількість символів):
Помилки: підсвічується червоним приклад заповнення в хелпері при неправильному форматі, і * Required field при порожньому полі.
10. Номер карти
Програма мінімум (реалізовано):
Програма максимум:
11. Ім’я на карті
12. Дата
13. CVC
Своєму інтересу в проектуванні полів введення я зобов’язана статтям Дмитра Коваленка. Ця стаття – адаптації рекомендацій Дмитра для компанії, в якій я працюю.
Раніше Telegraf.Design писав про 16 дизайн принципів, які спростять заповнення будь-якої форми.
Користувацький досвід для всіх і кожного особисто
Ліки від нудних дзвінків
Неоморфізм: український внесок у світовий UI-дизайн
Як ставити цілі та досягати їх
Шпаргалка: перевірте, чи не використовуєте ви російські шрифти у своїй роботі
Киньте 10 гривень: як закривати збори з невеликою аудиторією в соцмережах