Текстові поля у мобільних додатках: як робити правильну валідацію?

Сьогодні ми розглянемо найголовнішу тему щодо текстових полів з погляду 😉

➡ ➡ ➡ Читайте попередню частин – про текстові поля у мобільних додатках

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

Перевірка у режимі реального часу

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

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

Зображення: Google

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

Зображення: Dribbble

Зрозумілі повідомлення

Повідомлення про помилку повинні давати пряму відповідь на питання користувача: “Що тільки що сталося і чому?” Ваше повідомлення має чітко пояснити:

  • Що пішло не так і, можливо, чому.
  • Який наступний крок користувача повинен виправити помилку.

Знову ж таки, слід уникати використання технічного жаргону. Правила прості, але чомусь вони дуже часто ігноруються.

Правильний колір

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

Попередження поля вводу пароля

Ще один гарний приклад із використанням кольору є обмеженням символів для текстового поля вводу. Лічильник символів з червоною лінією, показує, що обмеження було перевищене.

Зображення: Material Design

Але не покладайтеся тільки на колір для повідомлень перевірки! Переконайтеся, що інтерфейс доступний для користувачів, це дуже важливий аспект добре виконаного візуального дизайну.

Висновки

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

________

kazhut-dyzajnery-ne-vmiyut-pysaty-5

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь