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

Всі користуються полями вводу, але не всі дбають про їхню юзабіліті, тож, давайте розберемося!

Джерело: Material Design

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

Введення даних

Відповідність клавіатури до типу даних

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

  • Номери: номер телефону, номер кредитної картки, PIN-код
  • Текст: власна назва, ім’я користувача
  • Змішаний формат: адреса електронної пошти, поштова адреса, пошуковий запит

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

Джерело: Google

Налаштування автокапіталізації

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

  • Просять назвати щось, наприклад, ім’я або прізвище користувача
  • Мають повідомлення-речення, такі як текстові повідомлення

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

Джерело: Baymard

Відключення автоматичного виправлення

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

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

Джерело: Baymard

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

Фіксований формат вводу

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

Джерело: Google

Значення за замовчуванням і автозаповнення

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

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

Джерело: Material Design

Читайте наступну частину!

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

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

email рассылки

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

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

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

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