Згадайте останній сайт, який вас роздратував. Найімовірніше, там було вікно: «Підпишіться на розсилку!» через три секунди після входу, банер cookie на пів екрана або меню, яке ніяк не закривається. Хороші спливні вікна ми не помічаємо. Погані пам’ятаємо роками.
Різниця між ними рідко в кольорі чи шрифті. Вона у виборі типу. Модальне вікно там, де вистачило б підказки, перетворює дрібницю на перешкоду. А підказка там, де потрібне підтвердження, — на ризик видалити важливе одним кліком.
У цьому матеріалі — короткий UX-словник: шість типів спливних вікон, просте правило вибору, типові помилки й живий телефон, на якому кожне вікно можна відкрити й закрити власноруч.
UX-словник: 6 типів спливних вікон
Дизайнери називають їх overlays — шари поверх інтерфейсу. Знати ці назви корисно не для того, щоб звучати професійно. Коли ви кажете розробнику «тут потрібен bottom sheet», а не «зроби якесь віконце знизу», ви економите годину листування й отримуєте саме те, що задумали.
Що таке спливне вікно
Спливне вікно — це елемент, який тимчасово з’являється поверх основного екрана. Воно завжди перериває людину. Питання лише в тому, наскільки сильно. Ось шість основних типів — від найлегшого до найсильнішого:
- Tooltip (підказка) — коротке пояснення біля іконки.
- Popover (спливне меню) — кілька дій, прив’язаних до кнопки.
- Drawer (бічна панель) — фільтри чи форма, що виїжджає збоку.
- Bottom sheet (нижня шторка) — дії на телефоні в зоні великого пальця.
- Modal (модальне вікно) — питання, яке блокує все інше.
- Full-screen (на весь екран) — окремий процес: оплата, реєстрація, онбординг.
Головний принцип: міряйте силу переривання
Уявіть шкалу. На одному кінці — легкий дотик: вікно шепоче й зникає, щойно ви відвели курсор. На іншому — повна зупинка: поки не відповісте, далі не підете. Кожен із шести типів має своє місце на цій шкалі.
Легкий дотик: Tooltip і Popover
Людина не втрачає контролю. Сторінка під вікном доступна, а щоб закрити його, досить відвести курсор або клікнути поруч.
Середня сила: Drawer і Bottom sheet
Вікно займає частину екрана, але контекст лишається на виду. Людина бачить сторінку, поки налаштовує фільтри чи обирає дію.
Повна зупинка: Modal і Full-screen
Усе інше недоступне, доки людина не зробить вибір або не вийде. Це сильний інструмент — тому й використовувати його варто рідко.
Обирайте найлегше вікно, яке розв’язує задачу. Усе сильніше — це податок на увагу вашого користувача.
Спробуйте самі: 6 вікон на живому телефоні
Нижче — інтерактивний словник. Перемикайте вкладки, натискайте «Показати на телефоні» або клікайте просто в макеті. Що варто помітити:
- Tooltip з’являється і від курсора, і від клавіші Tab.
- На вкладці Modal клікніть по темному фону: вікно не закриється, лише здригнеться.
- Bottom sheet можна стягнути вниз за ручку — як на справжньому телефоні.
Натисніть на рядок, щоб відкрити відповідний тип.
Як обрати тип вікна: 3 питання
Коли сумніваєтеся, поставте собі три запитання. Відповіді майже завжди підкажуть правильний тип.
1. Скільки інформації треба показати?
Одне речення — tooltip. Кілька дій — popover на комп’ютері або bottom sheet на телефоні. Форма з полями — drawer. Цілий процес із кроками — full-screen.
2. Чи має людина бачити сторінку під вікном?
Якщо так — обирайте popover, drawer або bottom sheet: вони залишають контекст. Якщо сторінка в цю мить лише заважає — modal або full-screen.
3. Яка ціна помилки?
Якщо дію не можна скасувати — видалення, оплата, надсилання, — доречно зупинити людину модальним вікном. Якщо помилку легко виправити, не блокуйте: краще дайте кнопку «Скасувати» в повідомленні після дії.
| Ситуація | Тип вікна |
|---|---|
| Пояснити, що означає іконка | Tooltip |
| Дії з рядком таблиці на комп’ютері | Popover |
| Ті самі дії на телефоні | Bottom sheet |
| Фільтри, деталі, редагування | Drawer |
| Видалення без можливості відновити | Modal |
| Оплата, реєстрація, онбординг | Full-screen |
5 помилок, через які людина закриває сайт
- Модалка без запиту. Вікно «Підпишіться!» через три секунди після входу. Людина ще не зрозуміла, де вона, а її вже зупиняють.
- Кнопки всередині tooltip. Підказка зникає, щойно курсор рушить, — влучити в кнопку майже неможливо. А на телефоні наведення курсора взагалі немає.
- Повний екран без виходу. Немає хрестика — людина почувається в пастці й закриває вкладку.
- «ОК» замість наслідку. Кнопка «ОК» у вікні видалення нічого не пояснює. «Видалити поліс» — пояснює.
- Вікно поверх вікна. Модалка відкриває ще одну модалку — і людина вже не пам’ятає, з чого почала.
Доступність: вікно має працювати для кожного
Гарне вікно зручне не лише тому, хто клікає мишею. Три правила, які варто перевірити в кожному проєкті:
Клавіатура і фокус
Вікно відкривається з клавіатури, Esc його закриває, а фокус після закриття повертається на кнопку, з якої все почалося. У модальному вікні фокус не «тікає» на сторінку позаду.
Видимий сигнал замість звуку
Глухі та слабочуючі люди не почують звукового сигналу. Тому кожна важлива подія має бути видимою: коротке повідомлення «Скопійовано», галочка, зміна стану кнопки. Це корисно всім — і тим, хто в навушниках, і тим, хто в транспорті з вимкненим звуком.
Не лише колір
Червона кнопка сама по собі не каже «небезпечно». Додайте зрозумілий текст та іконку: «Видалити» з кошиком прочитає кожен, незалежно від того, як він бачить кольори.
Великі інтерфейси будуються з маленьких рішень
Легко подумати, що спливне вікно — дрібниця. Але саме з таких дрібниць складається відчуття від продукту. Людина не скаже «тут правильно обрано тип overlay». Вона скаже: «Тут зручно». Або закриє вкладку й більше не повернеться.
Хороший дизайн рідко виходить з першої спроби. У історії Джеймса Дайсона було 5126 невдалих прототипів, перш ніж запрацював 5127-й. Вашим вікнам не потрібно стільки ітерацій — але потрібна та сама увага до деталей.
Дайте речам назви
Коли знаєте слово, бачите явище. Після цієї статті ви почнете помічати popover, drawer і bottom sheet у кожному застосунку — і оцінювати, чи доречно їх обрали.
Збирайте власну колекцію
Робіть скриншоти вдалих і невдалих вікон у застосунках, якими користуєтеся щодня. За місяць у вас буде власна бібліотека рішень — сильніша за будь-який підручник, бо зібрана вашими очима.
Почніть з одного вікна
Не треба переробляти весь інтерфейс. Оберіть у своєму проєкті одне вікно, яке перериває сильніше, ніж потрібно, і замініть його на легше. Один маленький крок цього тижня — і ваш продукт уже став ввічливішим.
Дизайн — це не лише те, як вікно виглядає. Це те, наскільки ввічливо воно перериває.
Головне за 30 секунд
- Основних спливних вікон шість: tooltip, popover, drawer, bottom sheet, modal і full-screen.
- Обирайте за силою переривання — від легкого дотику до повної зупинки.
- Починайте з найлегшого вікна, яке розв’язує задачу.
- Модальне вікно — лише для рішень, які не можна скасувати.
- Кожне вікно має закриватися з клавіатури й давати видимий сигнал.
Збережіть цю статтю — словник знадобиться в наступному проєкті. А яке спливне вікно дратує вас найбільше? Напишіть у коментарях — розберемо найцікавіші приклади в наступних матеріалах.
