Розробка макету форми: Вирівнювання

20

Від автора: нижче наводиться короткий уривок з книги Розробка UX: Форми, написаної Джесікою Ендерс. Це повне керівництво, в якому представлена розробка форм, ключовий елемент ефективного UX. Сьогодні ми поговоримо про вирівнювання форми.

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

Вертикальний шлях до заповнення

Прямий, безперешкодний маршрут є самим швидким для пересування на автомобілі, а також для заповнення форми. Отже, ваш наступний крок — вертикально вирівняти всі поля форми, а також основну кнопку форми (звану основною кнопкою дії):

Розробка макету форми: Вирівнювання

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

Не розміщуйте поля поруч один з одним

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

Розробка макету форми: Вирівнювання

У цій формі поля для введення секретного коду та поштового індексу були розміщені поруч з іншими полями. Це погана ідея з наступних причин:

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

Користувачі часто упускають з вигляду поля розташовані праворуч, тому що вони випадають з їх точки зору (в нього потрапляють лише дев’ять символів).

Це робить більш складним відображення форми на великих і малих екранах. (Докладніше про це нижче.)

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

Вирівнювання полів

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

Розробка макету форми: Вирівнювання

Кожен раз, коли поля є невеликими, ми можемо розмістити їх горизонтально. (Для цієї мети ми визначаємо три «маленьких» варіанти відповідей, з короткими позначками.) Така форма буде як і раніше працювати на сенсорних і невеликих екранах. Маркетинговий блок передбачає лише такі варіанти відповідей:

Розробка макету форми: Вирівнювання

Фактично, дата народження це також кілька полів, в яких можуть вводитися дуже короткі відповіді. Можливо, ви навіть не звертали на це увагу, і для вас природно, що всі вони розміщуються в одному рядку:

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Розміщення міток

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

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

Розробка макету форми: Вирівнювання

На мобільних пристроях мітки розташовані над полями, щоб вони були видні при заповненні поля. А ось як форма буде виглядати на великому екрані:

Розробка макету форми: Вирівнювання

Ось реальний приклад адаптивної форми — спочатку версія для великих екранів, а нижче приведено відображення форми на малих екранах:

Розробка макету форми: Вирівнювання

На великих екранах мітки розташовані зліва від полів, тому форма виглядає красивою і короткою.

Розробка макету форми: Вирівнювання

На менших екранах мітки розміщені над полями, тому вони завжди видно.

Як щодо підтвердження реальними дослідженнями?

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

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

Уникайте розривів

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Розробка макету форми: Вирівнювання

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

Вирівнювання кнопок

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

Розробка макету форми: Вирівнювання

Лівий край основний кнопки дії вирівнюється однаково з лівим краєм полів.

Багатоетапні форми

Якщо заповнення форми здійснюється в кілька етапів, вам необхідно надати кнопки для переходу від одного етапу до іншого. Один з варіантів — помістити кнопку «Next» на рівні з полями, також, як було описано для одноетапних форм:

Розробка макету форми: Вирівнювання

«Next» — це основна дія, тому воно вертикально вирівняне однаково з полями. Інший варіант — розмістити кнопку «Next» праворуч, а кнопку «Back» — зліва (для англомовних користувачів).

Розробка макету форми: Вирівнювання

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

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

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

Кнопки на мобільних пристроях

Для невеликих екранів, що ви можете зробити кнопки адаптивними, щоб вони:

групувалися в стек, причому кнопка основного дії розміщувалася вище

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

Розробка макету форми: Вирівнювання

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