Юзабілітість мобільних форм - Блог Icons8
Переглянути всі повідомлення
Будь ласка, спробуйте іншу комбінацію.
Мобільні користувачі, які використовують ваш додаток або сайт, мають певну мету. Часто одне, що стоїть між користувачем та його метою, - це форму. Насправді форми часто вважають такими останній крок подорожі до досягнення цілей. Ось чому так важливо, щоб користувачі заповнювали форми якомога швидше і без жодної плутанини.
Зробіть форми швидкими та простими для заповнення, дотримуючись семи правил:
Правило №1: Форми повинні бути сумісними з тим, як користувачі вводять дані
Переконайтеся, що поля форми не перешкоджають огляду елементами інтерфейсу, такими як клавіатура. Коли користувач заповнює поля форми, автоматично просувайте кожне поле вгору по екрану.
Правило №2: мінімізуйте кількість полів введення та зусилля, що вводяться користувачем
Чим довшою або складнішою здається форма, тим менш імовірно, що користувачі хотіли б заповнити пропуски - особливо на маленьких екранах. Мінімізація кількості полів введення робить вашу форму менш завантаженою, особливо коли ви запитуєте багато інформації у своїх користувачів.
Зберігайте форму якомога коротше і простіше. Кредит зображення: lukew
Але мінімізації кількості полів введення недостатньо - вам слід також звернути увагу зусилля користувача для введення даних. Набір тексту має високу вартість взаємодії; це спричиняє помилок і займає багато часу навіть із повною клавіатурою (і тим більше на сенсорному екрані).
Таким чином, спробуйте мінімізувати введення тексту та запобігти помилкам користувачів:
Розумні за замовчуванням
Розумні за замовчуванням заповнюють форму користувача швидше та точніше. Наприклад, попередньо виберіть країну користувача на основі його геоданих.
Автоматичне визначення місцезнаходження може заощадити час для пошуку форми готелю
Радіогрупи для тісно пов’язаних, але взаємовиключних варіантів
Коли користувачеві потрібно вибрати зі списку параметрів, подумайте про використання горизонтального списку тегів, оскільки він краще використовує наявний простір на екрані.
Повзунки для мінімальної/максимальної ціни або діапазону бюджету
Розгляньте можливість використання повзунків для полів, які містять ціни або бюджети, щоб користувач міг пересунути повзунок для встановлення мінімального/максимального діапазону. Повзунок легко гортати горизонтально і забезпечує прості візуальні сигнали для налаштування цієї дії. Але майте на увазі, що цифри не слід приховувати під час роботи повзунка (жирними пальцями).
Подвійний безперервний повзунок AirBnB для цінового діапазону
Правило №3: Етикетки форм розташовані над полями форми або плаваючі мітки
Мітки повідомляють користувачеві призначення поля, а чіткий текст мітки - один із основних способів зробити інтерфейси більш доступними.
Чому ніколи не слід використовувати вбудовані етикетки
Вбудовані мітки (або текст-заповнювач як мітка поля) - це текст, розташований всередині поля форми, який зникає, коли користувач вводить поле.
Вбудовані етикетки. Кредит зображення: snapwi
Хоча вбудовані етикетки виглядають добре та економлять цінну екранність, ці переваги набагато переважають основні недоліки юзабіліті, найважливішим з яких є втрата контексту. Як тільки користувач клацає на текстовому полі, мітка зникає, і, таким чином, користувач не може подвійно перевіряти, що те, що він/вона написав, справді є тим, що було призначено для написання.
Текст заповнювача - погана заміна візуального ярлика. Кредит зображення: Amazon
Інша справа, що коли користувачі бачать щось написане всередині текстового поля, вони можуть припустити, що воно вже було попередньо заповнене і, отже, можуть проігнорувати це.