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


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

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


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

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

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

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

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

1) Іконки

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

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

2) Приклади

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

3) Пояснення

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

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

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

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

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

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

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

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

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

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

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

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

Ховайте секретні дані

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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