Ми все це переживали — гарячково натискали на кнопку, яка відмовлялася працювати, з силою ударяли пальцями по сенсорному екрану або випадково натискали на те, що не хотіли, тому що вікно, що спливає, раптово вирішило «вилізти» на весь екран. Тому як UX-дизайнери, ми найменше хочемо, щоб користувачі зганяли своє роздратування на мишці (або, що ще гірше, взагалі відмовилися від програми). Так що давайте поговоримо про найсерйозніші помилки в UX, які змушують користувачів божеволіти, і, що ще важливіше, про те, як їх виправити.
1. Велике зникнення кнопок
Ви знаєте, що має бути кнопка. Ви шукаєте цю кнопку. Але з якоїсь причини вона ховається у всіх на очах.
Можливо, вона зливається з тлом, як хамелеон. Можливо, це «примарна» кнопка, настільки непомітна, що її можна вважати невидимою. У кожному разі, користувачі змушені примружуватися, дивлячись на екран, і гадати, куди ж натиснути.
Чому це дратує користувачів:
- Люди прийшли сюди не для того, щоб грати у «Де Волдо?» з вашими кнопками вони просто хочуть виконати завдання.
- Коли вони не можуть відразу знайти те, що їм потрібне, вони починають сумніватися у всьому. «Я що, осліп? Я що, пропустив? О ні, я що, дурний? (Ні, вони не дурні. Просто ваша кнопка відстійна.)
Рішення:
- Зробіть помітними кнопки дії (CTA). Використовуйте контраст, розмір та розташування, щоб вони виділялися.
- Дотримуйтесь принципу закону Фіттса – чим більше і ближче, тим краще.
2. Навала спливних вікон
Уявіть, що ви зайшли в магазин, і, не встигнувши навіть озирнутися, до вас підбігає продавець і кричить: «ПІДПИСУЙСЯ ЗАРАЗ!» Саме так сприймаються спливні вікна, коли вони з’являються в ту ж секунду, як користувач потрапляє на сайт.
І як тільки користувач думає, що закрив його, з’являється ще одне: «ПІДПИСУЙТЕСЯ НА НАШУ РОЗСИЛКУ!», за яким слідує винувате почуття провини спливне вікно «НЕ ЙДІТЬ!».
Чому це викликає у користувачів роздратування:
- Це схоже на засідку, ніби хтось соває вам в обличчя блокнот. І давайте будемо чесні, нікому це не подобається
- Користувачі навіть не встигають зацікавитися, як їх уже бомбардують пропозиціями, знижками та відчайдушними закликами на кшталт «Почекайте, не йдіть!».
- І давайте будемо чесні – у половині випадків крихітну кнопку «X» спеціально неможливо знайти. (Ми вас бачимо, хитрі дизайнери.)
Рішення:
- Використовуйте спливні вікна з розумом. Вибирайте час для появи розумно (наприклад, після деякої взаємодії, а чи не відразу).
- Надайте користувачам просту та помітну можливість відмовитися (без прихованих трюків з «X»).
- Перевірте, чи дійсно спливне вікно підвищує залучення або просто дратує людей і змушує їх йти.
3. Скелетон — екран, який не зникає
Скелетон екран – це сіра заглушка, яка відображається під час завантаження контенту. Вона чудово працює у помірних кількостях.
Але коли вона залишається на екрані надто довго, користувачі починають панікувати. «Це що не працює? Може, оновити сторінку? Або просто… піти?»
Чому це викликає роздратування у користувачів:
- Скелетон екрани покликані заспокоїти користувачів, що контент незабаром з’явиться, а не змусити їх засумніватися у реальності.
- Простий індикатор завантаження у відсотках або час може розв’язати всю проблему. Нікому не подобається застрявати у цифровій «кімнаті очікування», де кінця не видно.
Як це виправити:
- Зменшіть час завантаження до трьох секунд.
- Використовуйте індикатори прогресу (відсоткові показники, смужки або кумедні анімації).
- Розумне відкладене завантаження контенту – не змушуйте користувачів чекати, поки завантажиться все одразу.
4. Нестримна карусель загибелі
Мова йде про класичну карусель пропозицій, що автоматично обертається. Ви нарешті помічаєте щось цікаве, і як тільки збираєтесь натиснути… Пуф! Воно вислизає, замінюючись на щось інше.
Ви поспішаєте, намагаючись знайти це знову, але тепер ви застрягли в нескінченному циклі слайдів, що рухаються надто швидко для людських рефлексів.
Чому це викликає роздратування у користувачів:
- Користувачі не готуються до Олімпіади — вони просто хочуть натиснути на цю одну річ, доки вона не зникла.
- Коли контент обертається дуже швидко, вони почуваються безпорадними. Це як намагатися наздогнати поїзд, що мчить — тільки поїзд тут являє собою рекламу зі знижкою 10%.
- Якщо немає можливості поставити на паузу або переміщатися вручну, вони не залишаться — вони підуть.
Як це виправити:
- Дозвольте користувачам контролювати темп — автовідтворення рідко буває гарною ідеєю.
- Використовуйте зрозумілу навігацію (стрілки, точки, свайпи).
- Уникайте каруселі для важливої інформації — більшість користувачів не переглядають далі за перший слайд.
5. Ефект несподіванки «Чому це змістилося?!»
Ви вже збираєтеся натиснути «Надіслати», але в останній момент завантажується реклама, і ви натомість натискаєте «Скасувати».
Вітаємо, всі ваші зусилля зникли.
Чому це викликає у користувачів роздратування:
- Це як наступити на килимок, а тут хтось висмикує його з-під ніг. Нікому не подобається таке відчуття.
- Користувачі очікують, що кнопки залишаться на місці. Якщо ваш макет постійно зсувається під час виконання дії, не дивуйтесь, що користувачі залишають сайт.
Як це виправити:
- Запобігайте зсуву макета — зарезервуйте місце для динамічних елементів.
- Забезпечте стабільність кнопок — особливо таких важливих, як «Купити зараз» або «Надіслати».
6. Пастка нескінченного прокручування
«О, я просто прокручу хвилинку…» Через дві хвилини вони занурені в прірву контенту, відчайдушно намагаючись знайти той єдиний пост, до якого хотіли повернутися — але він зник назавжди.
Чому це викликає у користувачів роздратування:
- Вони прокручують, прокручують, прокручують… знаходять щось цікаве… але ой! Вони прокрутили надто далеко і втратили це назавжди. Тепер вони гарячково прокручують назад, але вгадайте, що? Контент завантажувався динамічно і тепер його немає. Зник у порожнечі.
- Це змушує користувачів витрачати занадто багато часу в додатку — поки вони не усвідомлюють, що витратили час марно, і почуваються в пастці, а не залученими.
Як це виправити:
- Забезпечте чіткі розриви між розділами чи пагінацію.
- Додайте кнопку «Повернутися на початок».
- Дозвольте користувачам призупиняти прокручування або переміщатися за вмістом на свій розсуд.
7. Незрозуміла навігація
Іконки без підпису. Меню, які з’являються лише при наведенні курсора. Структура навігації, що виглядає так, ніби її розробив майстер загадкових головоломок.
Чому це викликає у користувачів роздратування:
- Якщо користувачам доводиться гадати, що означає та чи інша іконка, то це вже провал. Не всі інтуїтивно розуміють, для чого потрібна якась випадкова закарлючка або абстрактна фігура.
- Приховані меню, опції, доступні тільки при наведенні курсора, або іконки без підписів створюють у користувачів відчуття, що вони вирішують головоломку, а не просто користуються програмою. І якщо ваші користувачі не фанати квест-кімнат, це не на добро.
Як це виправити:
- Позначте важливі значки (не всі знають, що означає абстрактний символ).
- Уникайте прихованих меню, якщо це не потрібно (на мобільних пристроях меню типу «гамбургер» цілком підійде, але на комп’ютері просто показуйте потрібні опції).
- Зробіть навігацію передбачуваною – користувачі не повинні гадати, де що знаходиться.
Завершальні думки
Робіть користувачів щасливими, а не викликайте у них «запеклі клацання»
«Клацання люті» — це не просто кумедний інтернет-феномен, а ознака поганого UX. Якщо користувачі в гніві б’ють мишкою, значить, щось не так.
Ось ваш чек-лист UX без «клацання люті»:
- Зробіть кнопки зрозумілими та клікабельними
- Розумно використовуйте спливні вікна (і зробіть так щоб їх можна було легко закрити)
- Забезпечте швидке та прозоре завантаження
- Дозвольте користувачам контролювати навігацію
- Зберігайте стабільність макетів (ніяких кнопок, що зсуваються)
- Зробіть прокрутку навмисною
- Використовуйте інтуїтивну навігацію з підписами
Хороший досвід користувача не змушує людей боротися з інтерфейсом — він дає їм відчуття контролю. Адже єдиний випадок, коли користувач повинен затято кликати, — це коли він у пориві захоплення натискає кнопку «Купити зараз».
Автор: Мусієнко Тимофій