8 найкращих практик дизайну мобільних форм UXmatters

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

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

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

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

1. Використовуйте єдине поле введення, де це можливо.

Для мобільних користувачів форми з кількома полями введення можуть бути справжньою проблемою, особливо коли їм доводиться перемикатися між різними режимами введення - деякі вимагають використання клавіатури, яка закриває більшу частину екрана. Форми, що розділяють дані на кілька полів, надмірно збільшують розчарування користувачів та ризик залишення. Наприклад, форма оформлення замовлення для Domino’s Pizza запитує ім’я та прізвище користувача в окремих полях, як показано на малюнку 1.

Рисунок 1 - Форма оформлення замовлення піци Domino’s

практик

Хоча цей користувальницький інтерфейс може задовольняти потреби маркетологів, він не задовольняє потреби користувачів. Крім того, для глобальної електронної комерції окремі поля імен можуть заплутати в деяких культурах. Наприклад, у багатьох азіатських культурах прізвище передує даному імені. Але в М'янмі, на ринку приблизно 36 мільйонів користувачів смартфонів, люди мають лише одне ім'я, тому два обов'язкові поля імен будуть проблематичними. Щоб переконатися, що ваші мобільні форми є одночасними та заощаджують час для користувачів, використовуйте єдине поле введення імен користувачів, як у мобільній контактній формі Justinmind, як показано на малюнку 2.

Рисунок 2 - Форма мобільного контакту Justinmind

2. Створіть розмовний, але не надто дружній потік.

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

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

Щоб побудувати довіру, слід дотримуватися цих вказівок щодо вмісту та потоку форми:

  • По можливості базуйте форми на профілі цільового користувача та попередньо заповнюйте значення.
  • Розміщуйте поглиблені або особисті питання в останню чергу. Користувачі, швидше за все, відповідатимуть їм після встановлення взаємозв'язку.
  • Одночасно звертайтеся лише до однієї теми.
  • Дозвольте двостороннє спілкування. Наприклад, a На звязку або Телефонуйте кнопка дає змогу користувачам мобільних пристроїв знати, що вони можуть бути частиною двосторонньої розмови, та сприяє підвищенню довіри користувачів до програм електронної комерції.

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

3. Автоматично попередньо заповнювати значення в полях.

У 2016 році, проведеному роботою з AnswerLab, Google виявив, що користувачі мобільних пристроїв набагато більше орієнтовані на цілі (PDF), ніж користувачі настільних ПК. Тому найкраще вирізати жир із форм, автоматично заповнювати значення і дозволяти користувачам швидше досягти своїх цілей. Мобільні пристрої мають датчики та інформацію про користувача, за допомогою яких заповнення форм стає менш обтяжливим для користувачів. Наприклад, Skyscanner використовує GPS-датчики для виявлення місцезнаходження пристрою, що дозволяє додатку попередньо заповнити місто відправлення, як показано на малюнку 3.

Малюнок 3 —Skyscanner

Під час оформлення замовлення ви можете використовувати GPS-датчики, щоб запропонувати клієнтам електронної комерції альтернативи онлайн-покупкам. Недавнє опитування дослідницького центру Pew показує, що 64% ​​американських користувачів все ще вважають за краще купувати в магазинах цегли та розчину. Мобільний сайт Ikea, показаний на малюнку 4, використовує GPS-датчики, щоб повідомити клієнтам, чи є товар, який вони переглядають, доступний у найближчому магазині

Рисунок 4 - Мобільний сайт Ikea

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

4. Зробіть форми доступними.