Як поліпшити інтерфейс: поради не лише для дизайнерів. Частина 1. Поля введення і радіокнопки


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Ділимося з Вами порадами з поліпшення інтерфейсів додатків і веб-сайтів. Якщо у Вас є бажання залишити свої рекомендації, залишайте їх у коментарях!


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

Найосновніше правило, як і скрізь – ставте себе на місце відвідувача: “Чи все зрозуміло? Чи можна з першого погляду усвідомити, що треба ввести в поле? Чи адекватно реагує поле на введену інформацію?”.

Пишіть описи і підказки

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

Є декілька типів підказок:

1. Іконки

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

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

2. Приклади

Найпростіший спосіб розповісти, як заповнити поле – навести приклад. Як-от: “mail@mail.ru”

3. Пояснення

Цей тип описів служить для пояснення, як сайт використовуватиме дані й для чого вони потрібні. Наприклад: “Пошта потрібна нам для повідомлення Вас про статус замовлення. Ми не надсилатимемо Вам спам”.

Використайте маски

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

Наведу приклади різних масок:

Виділяйте обов’язкові поля

Якщо серед необов’язкових полів є поля, обов’язкові для заповнення, то їх слід виділяти серед інших і робити акцент на обов’язковості заповнення. Як правило, обов’язкові поля показують значком зірочка – *.

Усі обов’язкові поля краще групувати і розташовувати їх на початку форми.

У прикладі вище, до речі, також показані 2 типи підказок: приклади і пояснення.

Фокус і клавіатура

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

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

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

Приховуйте секретні дані

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

Використайте вже введені дані

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

Групуйте поля введення

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

Пам’ятайте про розмір поля

Розмір поля у більшості випадків служить для оцінки об’єму даних, які потрібно отримати від користувача. Інакше кажучи там, де треба вводити довгу адресу – поле велике. Там, де потрібний шестизначний індекс – поле маленьке.

Дизайн полів введення не такий простий, як здається на перший погляд. Треба пам’ятати багато нюансів і постійно ставити собі запитання: “Чи все буде зрозуміло користувачеві?”.


– радіобатон, перемикач або радіокнопка. Кнопка, що дозволяє вибрати один параметр з групи. Служить для уточнення параметрів і відповідає на запитання: “Що саме?”, “Який саме?”. На відміну від чекбоксів, у групі радіобатонів можна вибрати тільки один параметр, тому вони часто використовуються для опитувань.

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

Не розміщуйте радіобатони по горизонталі

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

Радіобатони мають бути групою

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

Збільшуйте робочу область

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

У бінарному стані, коли вибір складається з двох пунктів (наприклад, вибір між пунктами “Самовивезення” і “Доставка кур’єром” в інтернет-магазині) радіобатон можна перетворити на перемикач.

Вибирайте за умовчанням найпопулярніший варіант

Радіобатон не може перебувати в невизначеному стані. Завжди має бути вибраний якийсь варіант. Доцільно вибирати найпопулярніший варіант “за умовчанням”.

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

За матеріалами серії “Як поліпшити будь-який інтерфейс”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *