Юзабілітість мобільних форм

Нік Бабіч

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

Зробіть форми швидкими та простими для заповнення, дотримуючись семи правил:

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

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

Але мінімізації кількості полів введення недостатньо - вам слід також звернути увагу на зусилля користувача щодо введення даних. Набір тексту має високу вартість взаємодії; це спричиняє помилок і займає багато часу навіть із повною клавіатурою (і тим більше на сенсорному екрані).

Таким чином, спробуйте мінімізувати введення тексту та запобігти помилкам користувачів:

Розумні за замовчуванням

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

Радіогрупи для тісно пов’язаних, але взаємовиключних варіантів

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

Повзунки для мінімальної/максимальної ціни або діапазону бюджету

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

Мітки повідомляють користувачеві призначення поля, а чіткий текст мітки - один із основних способів зробити інтерфейси більш доступними.

Чому ніколи не слід використовувати вбудовані етикетки

Вбудовані мітки (або текст-заповнювач як мітка поля) - це текст, розміщений усередині поля форми, який зникає, коли користувач вводить поле.

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

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

Чому вирівняні мітки полів погано підходять для мобільних пристроїв

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

Етикетка над полем або плаваюча етикетка

Етикетки форм повинні бути над полями форми, щоб користувачі могли легко побачити, що вони заповнюють і чому. Основною перевагою розміщення мітки над полем на мобільному пристрої є те, що ви можете дозволити полям форми розширити всю ширину екрана, зробивши їх достатньо великими для відображення всього вводу користувача (пристойним розміром шрифту, наприклад 16 пікселів). Додатковою перевагою є набагато краща можливість для написання чітких та значущих міток полів, оскільки ми не повинні обмежуватися 1–2 словами.

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

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

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

Якщо відповіді потрібні у певному форматі, заявіть це заздалегідь, повідомляючи нав'язане правило (специфікація формату) без додаткового прикладу.

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

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

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

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

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

Як правило, не перевищуйте 100 символів пояснення.

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

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