Як і коли відображати прихований контент

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

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

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

Сьогодні ми сфокусуємося на механіці процесу показу контенту, прихованого від поглядів користувачів.

Приклади прихованого контенту

Найбільш поширений приклад – це мега-меню. Цей інструмент найкраще ілюструє головну проблему прихованого контенту. Іноді користувачам здається, що мега-меню має «власний розум»: воно може зненацька з'явитися і так само раптово зникнути.

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

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

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

Як дізнатися, чого хоче користувач?

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

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

Анімація може включати в себе частину часу «зупинки курсору»: наприклад, можна налаштувати її так, щоб при зависанні курсору в певній зоні починався показ анімації, а закінчувався в той момент, коли курсор залишає курсор.

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

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

Якщо курсор миші залишає цільову область після показу прихованого контенту, блок не повинен зникати миттєво. Необхідно налаштувати невелику затримку, яка дозволить визначити, чи був вказівник переведений в іншу частину екрана навмисно, чи це сталося випадково. Ігнорування цієї рекомендації призводить до виникнення так званої «проблеми діагоналі» (diagonal problem) мега-меню.

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

Існують інші підходи до «проблеми діагоналі». Так, наприклад, 1986 року фахівці з Tog розробили новий інтерфейс Apple. Вони вирішили, що найбільш ефективний спосіб переконатися в намірах користувача полягає в тому, щоб перевірити, чи курсор залишається в трикутній області (яквершин «контрольного трикутника» береться стартова позиція курсору, а також верхня та нижня точки підменю).

Можна зробити і по-іншому (цей варіант використаний компанією Amazon): необхідно постійно аналізувати переміщення курсору. В даному випадку система відстежує його траєкторію та оцінює ймовірність того, що курсор прямує до певної мети. Цей підхід також передбачає більш тривалі затримки перед закриттям меню, які дозволяють людям, які не мають блискавичної реакції, добре орієнтуватися на ресурсі.

Налаштування часу відображення прихованого контенту

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

Поява прихованого контенту може бути ініційована або клацанням миші, або зупинкою курсору в цільовій області приблизно на 0,3-0,5 секунди (протягом цього часу може починатися завантаження анімації). Однозначним сигналом до скасування показу контенту служить клацання (натискання клавіші) за межами цільової області, або той факт, що користувач перемістив курсор на більш ніж 0,5 секунди.

Налаштувати показ елементів, які з'являються після натискання або кліка, досить просто:

Протягом 0,1 секунд після кліка активуйте візуальний фідбек і починайте демонстрацію прихованого змісту.
Продовжуйте показувати контент доти, доки користувач не натисне на клавішу (або не клацне кнопкою миші) замежами цільової області.

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

Протягом 0,1 секунди після потрапляння курсору до цільової області активуйте візуальний зворотний зв'язок.
Зачекайте 0,3–0,5 секунд.
Якщо курсор все ще знаходиться в цільовій області, виведіть прихований контент на екран протягом 0,1 секунд.
Продовжуйте показ контенту до того моменту, поки користувач не перемістить курсор у бік від цільової області та елемента, що демонструється, більш ніж на 0,5 секунди.