Курс
Дизайн у цифровому середовищі

19. Функціональні елементи Landing Page

Лекції

Вступ

1

Основні етапи роботи над веб-проектом

Завдання та ідея

2

Дизайн-мислення

3

Емпатія

4

Майндмеп

5

Скетчбук

Дизайн-дослідження та фокусування

6

Види досліджень

7

Тренди веб-дизайну

8

Розвиток візуального смаку та отримання нового досвіду

9

Флэт-иллюстрация

Оcновы графического дизайна

10

Композиция

11

Цвет

12

Шрифт

13

Типографика

14

Модульные сетки

Прототипирование

15

Психофизиология интерфейсов

16

Прототипирование

Контент

17

Цифровой сторителлинг

Дизайн

18

Веб-друкарка та функціональні елементи статті

19

Функціональні елементи Landing Page

20

Як оформити портфоліо

Закладки

designspiration.net

booooooom.com

Курс

Профіль

Вийти

Аналіз формату Landing Page. Функціональні компоненти

Щоб зробити Landing Page, потрібно зрозуміти, з яких блоків вона складається, чим вони наповнені, та як їх оформити.

Микита Обухів

Засновник Tilda Publishing , креативний директор студії FunkyPunky

Цей матеріал – ключ до розуміння принципів роботи Landing Page. Щоб його написати, ми з колегами провели велике дослідження продуктових та сервісних сторінок, виділили типові конверсійні елементи, скомпонували їх у категорії та проаналізували формат загалом.

Landing page (лендінг пейдж, посадкова сторінка) - сторінка, що презентує продукт або сервіс.

Головне завдання Landing Page — переконати користувача здійснити певну дію: зателефонувати, підписатися на розсилку, купити товар, поставити лайк, і т. д.

Landing Page завжди має на меті, тому часто російською мовою назву формату перекладають як «цільова сторінка».

Де дивитися приклади хороших лендінгів

land-book.com

onepagelove.com

Крім цього, потрібно звертати увагу на сторінки продуктів, послуг стартапів: Dropbox, Stripe, Google Photo і т.д.

Як з'явився формат Landing Page

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

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

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

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

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

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

Ті принципи, що склалися у форматі Landing Page , стали поширюватися і на головні сторінки загалом.

Ярослав Шуваєв

Product owner Альфа-Мобайл, підрозділи Альфа-Банку.

Лендінг – еволюційний крок розвитку цифрових комунікацій. У певний момент прийшло розуміння, що користувач потрапляє з пошуковця безпосередньо на картку продукту або послуги, минаючи головну сторінку. Такі розділи, як «Послуги» або «Каталог», у певний момент розвалилися на моносервісні або монопродуктові лендинги.

Що буде далі?

Безумовно, підхід до дизайну «посадкових сторінок» стане ще раціональнішим. Вже зараз з'являються такі напрямки в дизайні, як Conversion Centered Design. Набирає популярності персоналізація лендінгів, коли сторінка підлаштовується під пошуковий запит та історію користувача.

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

Функціональні компоненти Landing Page

Обкладинка ~ Загальний опис продукту або послуги ~ "Фішки" ~ Сценарії використання та вигода ~ Цільова аудиторія ~ Ціни та тарифні плани ~ Форми для реєстрації або підписки ~ Відгуки клієнтів та користувачів ~ Логотипи клієнтів або партнерів ~ "Як це працює" ~ Галерея ~ Відео ~ Навігація на сторінці ~ Кнопки соціальних мереж ~ Заклик до дії та мотивуюча кнопка

1

Перший екран або обкладинка

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

Обкладинка має свій алгоритм:

Заголовок і підзаголовок — класні фрази, що надихають. Емоційні та відбивні суть продукту чи послуги. Потрібно дуже ретельно подумати, що написати в заголовку і в описі. Це важливі елементи, які задають основне посилання.

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

Логотип компанії чи продукту . Фонове зображення .

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

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

Кнопка "гортати вниз" . Наразі від неї все частіше відмовляються, бо всі й так розуміють, що треба робити.

Likes і shares . Не дуже хороша ідея ставити ці кнопки прямо на обкладинку, бо навряд чи хтось вирішує поділитися одразу, як зайшов. Цей блок повинен з'явитися нижче або в кутку.

2

Загальний опис послуги або продукту

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

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

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

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

Сергій Попков

Партнер агентства aic .

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

При створенні лендінгу ви вкрай обмежені у творчості. У вас є один продукт і одна сторінка для влучення в ціль.

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

Вам доведеться більше працювати із контентом. Часті тексти від замовника не цукор. Додайте більше логіки та сенсу, при цьому постійно скорочуйте кількість тексту. Залишайте тільки найсолодше та найцінніше.

Не соромтеся часто повторювати кнопки заклику до дії. Закріплюйте call-to-action елементи у шапці. Іноді це здається нав'язливим, але ви ніколи не знаєте навмання, наскільки неуважним виявиться користувач.

Не ігноруйте аналітику . Вивчайте конверсійні вирви та поведінки користувачів на лендінгу. Тільки так ви зможете покращити свій результат. Проведення А/Б тестів, аналіз всіх цих даних дасть вам можливість побачити те, про що ви навіть не могли припустити.

Наприклад, лендинги всім відомого нам сервісу Booking.com перебувають у постійних тестах. І така дрібниця, як переміщення кнопки «Оформити заявку» на 40 пікселів вліво, може збільшити конверсію на кілька десятих відсотків. У таких масштабах це завжди чималий додатковий прибуток. А отже, цей дизайн працює краще.

3

Features («Фішки»)

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

Features – це те, що робить продукт чи послугу класною.

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

Важливо подумати над стилем іконок, бо дуже легко зіпсувати все. Шаблонні іконки так зуміли, що на них неможливо сфокусуватися («інтерфейсна сліпота»). Стиль іконок повинен повідомити людину, що це не перший кліпарт, що попався. Важливо все: як намальовані, яка товщина, наскільки вони гармонійні та цікаві. Не потрібно ставити іконки заради ікон. Вони мають бути особливими.

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

Інтерфейсних рішень багато, починаючи з найпростіших і закінчуючи тим, що ви самі винайдете.

Вам потрібно розповісти, що унікальне є у вашому продукті або послузі. Це і є блок із «фішками».

5

Сценарії використання та користь продукту

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

Схоже на Features, але є нюанс. Цей блок говорить про те, яку користь отримає користувач. Що з ним станеться, якщо він скористається продуктом — він стане багатшим, щасливішим, успішнішим, ефективнішим, заощадить час, завжди буде на зв'язку.

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

Користування можуть бути перераховані окремо або у вигляді ланцюжка дій, де на кожному кроці користувач отримує унікальну вигоду.

6

Цільова аудиторія

Тут позначаємо на кого насамперед розрахований продукт чи послуга.

7

Ціни та тарифні плани

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

Як правило, всі Landing Pages пов'язані із зароблянням грошей. Правильне рішення показувати реальні ціни, скільки це коштує. Не треба боятися і залишати телефон, щоб людина зателефонувала і дізналася. Незнання ціни зупиняє людей. Наприклад, вказані ціни на тарифний план: $10, $20 та за домовленістю. Це скільки – $30 чи $500?

Часто на лендингах акцент зроблено на пробну версію — зареєструйся, а потім вирішиш. Коли людина реєструється, вона перетворюється на «лід» — потенційного клієнта, який відреагував на маркетингову комунікацію. Він залишає email і потім його можна наздогнати та повернути.

Поширений прийом – виділяти конкретний план. Той, який куплять із найбільшою ймовірністю. Щоб користувач не думав і не сумнівався, йому кажуть — бери цей. І це працює.

Якщо є опція платити за місяць або за рік, то можна зробити перемикач між річною та місячною оплатою. За щорічної оплати ціна нижча. Користувач може сплатити один місяць і піти, а якщо він придбає відразу рік, то ви заробили в 12 разів більше. Тому можете дозволити поставити ціну нижче.

8

Форма реєстрації або передплати

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

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

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

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

9

Відгуки клієнтів чи користувачів

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

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

Найпоширеніший формат: заголовок, текст відгуку, фото, ім'я прізвище, посада та компанія.

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

Дуже класно працює, якщо зняти на відео відгук реальної людини. Живі люди, які діляться досвідом використання, кажуть, що це круто працює, заряджають та мотивують.

Відмінний формат - відеоінтерв'ю.

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

10

Логотипи клієнтів чи партнерів

Якщо серед користувачів сервісу є відомі компанії, то їх логотипи виносяться на сторінку.

Логотипи клієнтів чи партнерів підвищують кредит довіри. Єдиний мінус — можна поставити логотипи нікому не відомих компаній, і тоді буде лише гірше.

Можна поєднувати відгук та логотипи.

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

Який довжини має бути Landing Page

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

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

Тому потрібно експериментувати, робити А/Б тестування, щоб у конкретному випадку підбирати оптимальне поєднання.

Докладніше про те, як довжина сторінки впливає на конверсію, читайте на http://siliconrus.com/2015/03/short-long-landing/

11

Галерея чи схема

У деяких випадках скріншоти програми або деталі продукту відображаються у вигляді галереї.

Найочевидніше на макеті комп'ютера показати скріншоти інтерфейсу, щоб продемонструвати, як усе влаштовано.

Якщо Landing Page зроблено для предмета, можна виділити деталі і підписати.

12

"Як це працює"

Коли необхідно виділити особливості роботи продукту, процес використання описується кроками.

Часто в Landing Page використовується схема як працює продукт. Можна відобразити частину інтерфейсу по кроках. Або описати послідовність дій.

13

Відео

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

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

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

14

Меню для навігації на сторінці

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

Останнім часом стали відмовлятися від меню, яке залипає під час скролінгу. Замість нього залипати стала клавіша call to action.

14

Заклик до дії та мотивуюча кнопка

Наприкінці сторінки зазвичай міститься повторення заклику до дії та мотивуюча кнопка.

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

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

15

Кнопки соціальних мереж

Landing page націлена на виконання основної дії, але не варто забувати і про соціальні мережі. База лояльних передплатників допоможе просувати продукт.

Є два типи соціальних кнопок: поділитися та посилання на профайли. І ті, й інші важливі. Соціальні кнопки популяризують ваш продукт. Не забувайте їх розміщувати.

Максим Павлов

Notamedia , креативний директор, партнер.

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

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

Також у цьому курсі

18

Веб-друкарка та функціональні елементи статті

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

Попередня

20

Як оформити портфоліо

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

Наступна

Зміст

Нова закладка

Назва закладки

© Обухів Н.В., 2015 Всі права захищені. Передрук та цитування матеріалів — лише з дозволу автора.

З усіх питань пишіть на [email-masked]

[ ] -

Оригінальний текст

Запропонувати кращий переклад