Як ми вразили користувачів KFC глибинним скролом у стилі Apple

Ми зробили для KFC промосайт, який розповідає коротку історію через глибинний скрол у стилі Apple, а відкривають його з телефона через QR-код на кіоску самообслуговування. Кожен UX-дизайнер шукає одне: цифровий досвід, який людям справді подобається. Коли ми взялися за цей проєкт, то розуміли, що звичайним лендингом тут не обійтися.

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

• 01Рух працює на історію. Паралакс доречний, коли сторінка розповідає коротку послідовну історію. Він заважає, коли людина прийшла швидко щось знайти.
• 02Спершу зміст, потім рух. Кожен екран має читатися й без анімації: для людей, які просять зменшити рух, і для пошукових систем.
• 03Бюджет задає телефон. Анімуйте лише transform і opacity, тримайте зображення шарів легкими й перевіряйте Core Web Vitals на телефоні середнього рівня.
• 04Візит із QR-коду веде до однієї дії. Людина біля кіоску хоче отримати пропозицію. Покажіть її швидко і зробіть промокод єдиною метою сторінки.

ГоловнеРезультат: дизайн, що став вірусним, побудований на глибинному скролі в дусі Apple.

Що таке глибинний скрол?

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

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

Apple використовує варіації цього прийому на сторінках своїх продуктів: прокручування керує анімацією пристрою, заголовка чи фону. Саме тому його часто шукають як «анімацію скролу як в Apple». На практиці це поєднання паралаксу, закріплених секцій і анімації, прив'язаної до скролу.

Навіщо KFC промосайт під QR-код?

KFC потрібна була мобільна сторінка, яка зачепить відвідувача прямо в ресторані, в момент вагання перед замовленням, і дасть привід діяти: промокод.

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

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

Як працює паралакс-скрол у стилі Apple?

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

Разом із маркетологами з Idealers ми шукали, як зачепити аудиторію KFC так, як ще ніхто не робив. Сторінки продуктів Apple були орієнтиром, до якого ми постійно поверталися.

Ми надихнулися паралакс-скролом Apple: кілька шарів рухаються з різною швидкістю, і з'являється відчуття глибини.

Технічно секція з глибинним скролом складається з кількох частин:

• 01Шари. Кожен план глибини це окремий елемент: фонове зображення, середній шар з об'єктами, передній план із продуктом чи текстом. Трьох шарів зазвичай досить, щоб відчувалася глибина. Більше шарів означає більше зображень для завантаження і більше роботи для телефона.
• 02Коефіцієнти швидкості. Фон зсувається на частку від відстані прокручування, передній план рухається з повною швидкістю або трохи швидше. Невелика різниця виглядає природно. Велика створює враження, що сторінка розвалюється.
• 03Шкала скролу. Щось має пов'язати прокручування з рухом. Сучасні браузери вміють це в CSS через scroll-driven animations, а конструктори сайтів пропонують взаємодії на основі скролу. Перевірте актуальну підтримку браузерами й залиште запасний варіант для тих, де її немає.
• 04Закріплені сцени. Для відчуття «як в Apple» секцію часто закріплюють на екрані, поки скрол керує тим, що відбувається всередині, а потім відпускають, і сторінка гортається далі.

Як ми зробили сайт KFC із глибинним скролом

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

Спершу ми працювали зі сторінкою як із розкадровкою, а вже потім як із макетом. Кожен екран мав одну думку й одне зображення, і ми вирішували, який шар несе цю думку, ще до того, як додали рух. Рух з'явився останнім, як спосіб зшити сцени між собою.

Як спроєктувати промолендинг для QR-коду?

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

На сайті KFC сценарій короткий: відвідувач вагається біля кіоску, сканує код, гортає сайт, дізнається про переваги й отримує промокод. Правила нижче взяті з цього проєкту і з рекомендацій NN/g щодо QR-кодів.

• 01Скажіть, що дає код. Поставте поруч із QR-кодом короткий рядок на кшталт «скануй і отримай промокод». Люди сканують, коли знають, що отримають.
• 02Ведіть одразу на сторінку акції. Ніколи не ведіть скан QR-коду на головну. Сторінка має продовжувати те повідомлення, яке надруковане на кіоску.
• 03Зробіть перший екран легким. Перший екран має відмальовуватися з одного оптимізованого зображення і живого тексту. Важчі шари паралаксу для наступних сцен довантажуйте після цього.
• 04Одна мета, без реєстрації. Кожна сцена має вести до промокоду. Зайві форми, реєстрації й меню відсіюють людей, які ось-ось зроблять замовлення.
• 05Зробіть код зручним. Покажіть промокод великим шрифтом, додайте кнопку копіювання й підкажіть, куди його ввести. З ним людина повернеться до кіоску чи застосунку.
• 06Позначте посилання. Додайте до URL у QR-коді параметри кампанії, щоб скани в аналітиці йшли окремим джерелом трафіку. Вирішіть, як вимірюватимете кампанію, до запуску, а не після.
• 07Сплануйте завершення акції. Надруковані коди живуть на кіосках довше за акції. Коли пропозиція закінчиться, посилання все одно має відкривати щось корисне.

Як зберегти паралакс швидким і доступним на телефоні?

Щоб паралакс був швидким, анімуйте лише transform і opacity та використовуйте легкі зображення. Щоб він був доступним, вимикайте рух для людей, які ввімкнули на пристрої зменшення руху.

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

• 01Анімуйте лише transform і opacity. Браузер може зсувати їх на GPU без перерахунку макета. Анімація top, margin, width чи background-position змушує сторінку перераховуватися або перемальовуватися на кожному кадрі.
• 02Не читайте розміри в обробниках скролу. Якщо використовуєте JavaScript, оновлюйте позиції всередині requestAnimationFrame і зупиняйте шари, яких не видно на екрані. Де браузер підтримує CSS scroll timelines, віддавайте перевагу їм.
• 03Стежте за Core Web Vitals. Core Web Vitals від Google вважають добрим результатом Largest Contentful Paint до 2,5 секунди, Interaction to Next Paint до 200 мілісекунд і Cumulative Layout Shift до 0,1. Великі шари першого екрана першими б'ють по LCP. Шари без заданих розмірів спричиняють зсуви макета.
• 04Обмежте вагу зображень. Експортуйте шари в сучасних форматах, обрізайте їх до того, що справді видно на телефоні, і відкладайте завантаження всього нижче першого екрана. Перше зображення відкладати не можна.
• 05Поважайте зменшення руху. Використовуйте медіазапит prefers-reduced-motion, щоб людям, які ввімкнули зменшення руху, показувати статичні шари. Рух, прив'язаний до скролу, може викликати запаморочення й нудоту в людей із вестибулярними розладами. WCAG прямо згадує паралакс у критерії 2.3.3 Animation from Interactions.
• 06Текст має бути текстом. Заголовки й пропозиція мають бути HTML-текстом, а не частиною зображення шару. Тоді сторінку прочитають і екранні читачі, і пошукові системи, і AI-асистенти. Це основа нашого підходу до SEO та AEO.
• 07Тестуйте на реальному телефоні середнього рівня. Ноутбук дизайнера ховає проблеми. Відкрийте сторінку на звичайному Android-телефоні через мобільний інтернет і прогорніть її швидко.

Коли паралакс допомагає, а коли шкодить?

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

Nielsen Norman Group перевіряла паралакс на користувачах і побачила реальні втрати: контент довго з'являється, текст пролітає раніше, ніж його встигають прочитати, а ефекти люди просто не помічають. Їхню статтю про паралакс варто прочитати, перш ніж ухвалювати рішення. Наше правило:

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

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

Що вийшло з проєкту KFC

Промосайт KFC став вірусним: люди ділилися ефектом скролу в соцмережах, а наша співпраця з KFC триває.

Щойно сайт запрацював, про нього швидко заговорили в мережі. Глибинний скрол у дусі Apple помітили і звичайні користувачі, і поціновувачі дизайну. Живий сайт можна подивитися за адресою kfc-promocode.webflow.io.

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

Ще два сайти, де рух пояснює продукт: 3D-око для офтальмологічного стартапу і перший екран play-and-earn гри. Нижче відгук клієнта на Clutch.

One Right EyeОфтальмологічний стартап з Австрії. Бренд і сайт на Webflow з нуля, з 3D-оком, яке пояснює продукт.Nyan HeroesPlay-and-earn гра на Solana. Виділена команда дизайну для бренду й сайту.

Чекліст перед запуском промосторінки з паралаксом

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

• 01Історія. Кожен екран має одну думку, а послідовність закінчується потрібною дією.
• 02Запасний варіант. Із увімкненим зменшенням руху всі сцени видно, і вони йдуть по порядку.
• 03Швидкість. Перший екран легкий, а Core Web Vitals проходять на телефоні середнього рівня.
• 04Читабельний зміст. Заголовок і пропозиція набрані живим текстом із правильними заголовками, тож їх прочитають пошукові системи й AI-асистенти.
• 05Вхід і вихід. Біля QR-коду написано, що він дає, посилання позначене, і є план, що робити зі сторінкою після завершення акції.