Автор: Энджи Ли (ANGIE LI)

Оригінал статті: https://www.nngroup.com/articles/date-input/

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

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

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

Шаблони введення дати

Елементи для календарного вибору або календарі (Calendar pickers) – це елементи керування, які зображають повний календарний місяць за один раз. Зазвичай вони показують дні тижня зверху та відповідають метафорі настільних або настінних календарів.

Приклад calendar picker на мобільному телефоні, показаний у програмі Календаря Google.

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

Calendar pickers особливо корисні щодо вибору діапазону дат. У цих ситуаціях вони часто показують два місяці пліч-о-пліч.

Expedia використовувала м’яке синє підсвічування, щоб показати діапазон дат для вибраних дат вильоту та повернення. Дати вильоту та повернення у календарі пофарбовані по-різному.

Прокручування елементів для вибору дати (date pickers) на мобільних пристроях є звичайним явищем, але можуть дратувати, якщо елемент вибору (picker) містить багато дат. У таких ситуаціях прокрутка у невеликому просторі повільна та непродуктивна; краще надати користувачам можливість вводити дату безпосередньо.

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

Програма iPhone Todoist дозволяє користувачам прокручувати, а також вводити дату самостійно. (Зверніть увагу на перевагу позначення поточної дати “сьогодні”: вона усуває будь-яку невизначеність, якщо користувач не пам’ятає сьогоднішню дату.)

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

DeviantArt надав список, що розкривається, для кожного розділу поля дати.

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

Рекомендації по дизайну введення дати

Для обмеженої кількості варіантів дати зробіть перелік відповідних дат.

У деяких випадках користувачі мають лише кілька варіантів вибору дати. Наприклад, Google Express, онлайн-сервіс покупок, дозволяє клієнтам замовляти онлайн-продукти та планувати час доставки. Замість того, щоб пропонувати порожні поля дати або calendar picker з безмежними опціями, Google Express надає короткий список варіантів дати. Будь-які дати, які недоступні, були зафарбовані в сірий і відключені. (Альтернативний варіант – недоступні дати можуть навіть не включатися до списку.)

Google Express надав список, що розкривається, з варіантами доставки. Вибір, який недоступний, вимкнений та зафарбований у сірий.

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

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

Незалежно від того, який формат користувач вибрав для введення дати (тире, пробіли, косі риски, крапки між компонентами місяця, дня та року), їхній вхід має бути розпізнаний. Щобільше, крайні ліві нулі не повинні впливати на дату. У наведеному нижче прикладі Priceline дата 9-3-17 відхиляється, а приймається 09/08/17, хоча жодних вимог до формату не було видно перед відправкою форми.

Priceline відхилив дату 9-3-17, навіть не надавши пропозиції про те, як правильно її форматувати. Натомість він повинен був прийняти ії та проаналізувати для користувача.

Повідомте про помилки належним чином.

Якщо користувач вводить дату, яка, мабуть, є помилкою, наприклад, 11/81/17, не робить жодних припущень. Забезпечте зворотний зв’язок користувача та запропонуйте рекомендації щодо усунення помилки.

Усуньте нелогічні варіанти дат

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

Зберігайте роботу користувачів.

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

Зберігайте діапазони дат постійними.

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

Southwest Airlines змінили діапазон дат повернення, виходячи з вибору дати вильоту. Після вибору дати вильоту 8-16-16 із діапазону дат за липень-серпень діапазон дат повернення змінився, щоб показати серпень-вересень.

Якщо ваш сайт обслуговує міжнародних користувачів, ваш формат дати має бути ясним та зрозумілим.

Поля введення дат залежать від культури і можуть викликати серйозні проблеми для користувачів, які звикли до іншого формату. “10/11/2016” може означати 11 жовтня 2016 року для американця, але 10 листопада – для когось із Європи. Дотримуйтесь цих практичних правил розробки дизайну введення дати для глобальної аудиторії:

• Додайте мітки та розділіть поля, щоб було зрозуміло, які поля призначені для місяця, дня та року.

Цей таймер зворотного відліку відокремив компоненти дати та чітко визначив їх.

• Вкажіть назву місяця, щоб відокремити її від дня.

Сайт Tep Wireless, де користувачі можуть орендувати портативні Wi-Fi пристрої, вказав назву місяця для обслуговування своєї глобальної аудиторії.

Веб-сайт Eurostar, показаний англійською (США), підтримував кілька мов, але не сказав, який формат дати він очікував. Тут дату від’їзду можна прочитати як 2 липня або 7 лютого.

• Використовуйте елементи календаря (calendar pickers) з чітко визначеними назвами місяців.

Деякі фреймворки, такі як Bootstrap, надають елементи календарного вибору (calendar pickers) для підтримки однозначного вибору дати.

У календарі вибору (calendar picker) Bootstrap було вказано назву місяця, щоб було зрозуміло, яку дату вибрати.

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

Висновок

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