Розробка макету форми: Відступи

27

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

Віддаленість

Люди сприймають розташовані поруч речі, як пов’язані. І навпаки, речі, які не пов’язані між собою, зазвичай розташовуються через певний відступ між ними.

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

Розробка макету форми: Відступи

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

Розробка макету форми: Відступи

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

Пам’ятайте, що фокус зору користувача захоплює близько дев’яти символів? Ну, це означає, що підказки для полів питань, які знаходяться праворуч від поля, часто не будуть потрапляти в поле зору користувача:

Розробка макету форми: Відступи

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

Розробка макету форми: Відступи

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

Найкраще місце для підказки — між міткою й полем (як показано на малюнку нижче). Інструкції по форматуванню — наприклад, ДД ММ РРРР для дати народження — повинні розміщуватися вище поля:

Розробка макету форми: Відступи

Інструкції щодо форматування, розташовані над полем.

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

Розробка макету форми: Відступи

Інші підказки розташовані нижче мітки.

Нарешті, коли ми використовуємо чек-бокси і перемикачі, ми повинні забезпечити, щоб мітки розташовувалася поруч з правою кнопкою або полем. Якщо вони занадто далеко, все стає заплутаним, особливо якщо ви не затеняете область блоку:

Розробка макету форми: Відступи

Відстань між мітками «Yes» and «No» і відповідними їм радіо-кнопками означає, що користувач повинен зупинитися і подумати. Ось ще одна ілюстрація погано розташованих міток для радіо-кнопок:

Розробка макету форми: Відступи

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

Ширина текстових полів

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

Розробка макету форми: Відступи

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

Розробка макету форми: Відступи

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

Порожні текстові поля

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

фоновий колір

текст заповнювача.

Не додавайте колір фону

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

Розробка макету форми: Відступи

У цій формі колір фону робить поля схожими на кнопки, і навпаки.

Простий кордону з чотирьох сторін достатньо, щоб показати користувачам, де їм вводити дані, буде достатньо:

Розробка макету форми: Відступи

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

Розробка макету форми: Відступи

Межі полів у формі настільки світлі, що їх майже неможливо помітити.

Не додавайте текст заповнювача

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

Розробка макету форми: Відступи

Ці мітки форми виводяться всередині полів.

Іноді це підказки:

Розробка макету форми: Відступи

Підказки відображаються всередині полів.

Іноді це просто непотрібний текст:

Розробка макету форми: Відступи

Безглузда інформація всередині полів.

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

подумають, що на це питання вже була дана відповідь

залишать текст заповнювача в якості відповіді, що спотворить дані

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

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

забудуть, що свідчила мітка

забудуть, що свідчила підказка

знайдуть текст занадто маленьким для зручного читання

не зможуть переглянути свої відповіді

будуть мати проблеми з виправленням помилок

Крім того, текст всередині полів часто недоступний, а атрибут placeholder точно не підтримується у всіх браузерах. (Коли-то було необхідно вказувати текст-заповнювач з міркувань доступності, оскільки екранні диктори не завжди анонсували поле форми. Тепер екранні диктори послідовно використовують елемент label для зазначення мети поля.)

«Але це економить простір!» — заперечують деякі дизайнери. Це так. Але це простір економиться за рахунок зручності заповнення форми. Не роби цього. Просто додайте текст за межами полів.