4 форми дизайну UX поради ви повинні знати (з прикладами)

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

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

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

Передбачити потреби користувачів

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

• Форми входу
• Реєстраційні форми
• Форми профілю користувача
• Форми реєстрації розсилок
• Оформити замовлення
• Опитування користувачів
• Контактні форми
• Форми коментарів
• Форми пошуку

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

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

Приклад: соціальні логіни націлювання на потреби користувачів

Форма для входу до Codepen містить три соціальних входу з Github у верхній частині. Цей вибір був би нерозумним для більшості сайтів.

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

Подумайте про мобільний перший

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

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

Приклад

Високоякісних мобільних форм неможливо уявити без видимі елементи керування на якому мобільні користувачі можуть легко торкнутися пальцями.

Форма реєстрації інформаційного бюлетеня конференції веб-дизайну Event Apart адаптується до способу доступу мобільних користувачів до екрану - він містить два простих поля введення а кнопка розміру пальця.

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

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

Приклад: Витратний вхід

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

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

Коли користувач виходив з поля, він стискається, і додаткова інформація зникає.

Приклад: Кнопка Morphing

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

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

Полегшити введення вхідних даних

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

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

Багато сайтів електронної комерції (наприклад, Amazon) використовують це рішення для того, щоб знизити рівень залишення кошика.

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

Приклад: Персоналізований вибір вводу

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

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

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

Приклад: перетягування

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

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

WordPress.com надає елегантний і інтуїтивно зрозумілий інтерфейс вводу даних користувача у формі редактора повідомлень. The маленькі мініатюри і візуальне представлення вже завантажених файлів допомагає користувачам швидко виконувати завантаження.

Приклад: накладання для видалення відволікаючих елементів

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

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

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

Надайте Відгуки Користувачам

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

За формою оформлення є два види зворотних зв'язків користувачів:

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

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

Приклад: Tracker прогресу

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

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

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

Приклад: перевірка в реальному часі

Магазин косметики Body Shop використовує перевірка в реальному часі у формі профілю користувача, щоб усунути помилки та покращити UX процесу завершення форми.

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

Приклад: Виразні підказки

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

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

Підказки приховані за маленьким? іконки не відволікати користувачів хто знає, як заповнити форму для входу, але бути завжди присутнім для користувачів, які не впевнені.

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