Як створити лендінг? Ч. II - хитрощі проєктування

Якщо ти ще не знаєш, як створити лендінг з нуля, тоді розпочни з нашої статті: “Як створити лендінг? Ч. I”, в якому ми детально описуємо весь процес.

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

Трюк 1 - Чотири точки сили

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

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

Трюк 2 - Закон Хіка

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

У ході дослідження Марк Леппер і Шин Айенгар виявили, що стіл, на якому 24 різновиди варення є менш привабливий, ніж стіл з 6 видами варення. Коли людина має надто багато вибору, ймовірність щось купити знизилась майже в 10 разів. Як це використовувати при створенні лендінгу? Обмеж кількість CTA ґудзиків і зосередьтеся на одній меті. Розглянь всі можливі варіанти користувачів на сторінці та зменши їх, наскільки це можливо.

Трюк 3 – модель «F».

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

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

Трюк 4 - правило 8 секунд

У тебе є всього 8 секунд, щоб зацікавити користувача (і навіть менше, згідно з останніми дослідженнями). На жаль, але саме стільки здатна людина концентруватися на чомусь одному. Отже, як привернути увагу користувача за 8 секунд?

Трюк 5 - закон подібності

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

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

Трюк 6 - Соціальний доказ

Соціальний доказ - це різноманітні сертифікати, дипломи та відгуки. Останнє особливо важливо. Дослідження Data Insight і AliExpress показало, що 9 з 10 покупок довершуються після того, як клієнт прочитає відгуки. Як це використовувати при створенні сайту? Додайте відгуки клієнтів на свій вебсайт.

Трюк 7 - Лінія занурення

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

Скоріш за все, тебе не здивує те, що з кожним роком люди читають все менше. Зазвичай, це  виглядає так, ніби ми лише скануємо статтю очима. Дослідження The Nielsen Norman Group Research довели, що вміст, розміщений над лінією занурення, сприймається користувачами на 84% краще, ніж вміст під нею.

Чому? Відповідь проста - перегляд вмісту нижче лінії занурення вимагає додаткових зусиль (прокручування сторінки). Суть полягає в тому, що чим довший твій вміст, тим менша ймовірність того, що користувачі заглибитися у твій текст.

Лендінг - Дизайн i UX

Першим кроком у виборі дизайну вебсайту є визначення того, хто належить до твоєї цільової авдиторії. Жінки чи чоловіки? Що вони роблять? Що вони роблять у вільний час? Яка їх мета і чого вони очікують? Відповідаючи на такі питання, ти полегшуєш собі завдання. Ти знаєш, чи використовувати пастельні та спокійні кольори, чи, можливо, темні та загадкові. Коли ти дізнався про основи свого вебсайту та маєш початкове бачення, дотримуйся наведених нижче правил.

Правило №1 - Висока якість графіки

Одне з досліджень Bright Local показало, що 60% людей віддають перевагу результатам пошуку, які містять зображення. У свою чергу дослідження Skyword показало, що цікаві графіки отримали в середньому на 94% більше висвітлень. Тому при виборі графіки намагайся уникати нудного і шаблонного, знайди щось оригінальне і цікаве. Зазвичай така графіка є платною, але є багато сайтів, які пропонують безліч високоякісних зображень безкоштовно. Нижче я підготував для тебе список таких сайтів:

Розмір графік

Ще один важливий фактор, який впливає на UX, — швидкість вебсайту, а отже, розмір графіки та відео. Вони повинні бути максимально легкими без втрати якості.

Ми рекомендуємо стискати фотографії користувачам Windows в:

Ми рекомендуємо стискати фотографії користувачам MacOS:

У стисканні фотографій онлайн допоможе:

Розмір відео

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

Найкращі компресори відео:

Правило №2 - Кольори

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

Пам’ятай, що кольори бренду мають відповідати його місії, і, перш за все, вони мають подобатися твоїй  цільовій групі. Але найголовніше – твоя пропозиція та якість послуг.

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

Правило № 3 - Чіткі та зрозумілі заголовки

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

Правило №4 – Доступність для людей з обмеженими можливостями

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

ALT описи 

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

Субтитри до фільмів

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

Правильно відредаговані та позначені посилання

Замість того, щоб ховати посилання за словами «Натисни тут», краще написати «Для отримання додаткової інформації відвідай [адреса вебсайту]», це дуже допоможе незрячим людям. Крім того, виділи гіперпосилання кольором, відмінним від звичайного тексту. Завдяки цьому користувачам не доведеться шукати їх курсором.

Розмір ґудзиків

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

Навігація за допомогою клавіатури

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

Правило №5 - Простір

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

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

Правило №6 - Чітке меню та симетрія

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

Правило №7 - Колонтитул

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

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

Лендінг - текстове наповнення

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

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

Ти вже тут?

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