Чи слід дотримуватися принципів дизайну верхньої частини сторінки?
Сфера веб-дизайну та розробки готує для вас багато дилем: використовувати чистий стиль чи ні, включати останні тенденції на свій сайт чи ні, робити акцент на візуальному фронті чи функціональності, робити дизайн адаптивним чи ні тощо.
Ми не можемо відповісти на всі ці питання відразу; натомість ми почнемо з одного дуже важливого аспекту: складка.
Що означає складка?
Складка – це термін, який використовується власниками та розробниками веб-сайтів для визначення частини вмісту сайту, яка відображається без прокручування вниз. Це область, видима відразу, коли користувач заходить на веб-сайт.
Походження газети
Звідки взялися витоки? Все просто: преса ввела цей термін задовго до того, як веб-дизайн став настільки важливою і розвиненою сферою. Друковані газети містили найсенсаційніші статті у верхній частині сторінки, щоб заохотити читачів гортати всю газету.
Різноманітність роздільної здатності екрану
Проблема фолду сьогодні полягає в роздільній здатності. IPad має роздільну здатність 1024 × 768, iPhone 4 має роздільну здатність 960 × 640, мій 22-дюймовий монітор має роздільну здатність 1920 × 1080, і все ще найпоширенішим сьогодні є 1280 × 720. Це вже не один тип комп’ютера, який є у всіх, але сьогодні існує маса дизайнів і розмірів комп’ютерних моніторів, тому важко створити загальний дизайн у верхній частині екрана. Все одно одні користувачі побачать більше, інші менше, де ж тоді золота середина? Я припускаю, що це заперечення, тому що загальний термін зараз мертвий.
Мобільні пристрої змінюють склад
Про роздільну здатність екрану ми розповіли кілька рядків вище, але варто також зазначити, що ми не знаємо, які пристрої з’являться завтра, через місяць або через пару років. Сьогодні люди користуються планшетами та смартфонами, але кілька десятиліть тому вони були поза межами нашої свідомості.
Епоха прокручування
Понад усе прокручування – так сьогодні створюють веб-сайти. Зазвичай було переглядати веб-сайт у верхній частині сторінки і не знати, як діяти далі, коли веб-браузери були невивчені. Сьогодні користувачі живуть онлайн, спілкуються, роблять покупки, рекламують і ведуть бізнес в Інтернеті, і знають про це все. Інша справа, що користувачі не люблять читати і приділяють занадто багато уваги одному розділу сайту, тому гортають, гортають і ще раз гортають. Ваше завдання змусити їх зупинитися на тому чи іншому елементі, і, як ви розумієте, справа не в складці. Лише кілька секунд, коли користувачі дивляться на головну область сайту, тому вам не потрібно розміщувати все на одній зоні сторінки. Ви повинні розмістити правильну пропорцію вмісту на всій сторінці, і таким чином ви подвоїте свої шанси бути поміченим і прочитаним.
Приклади того, як залучити користувачів до прокручування
Коли ви вирішите зробити свій сайт активним для прокручування, вам потрібно продумати всі можливі варіанти, щоб він працював і був привабливим. Як користувачі зрозуміють, що їм потрібно прокручувати? Навіщо їм прокручувати? Що вони отримають, якщо прокрутять?
Шляхи для прокручування – це коли ви використовуєте деякі елементи, щоб показати шлях через свій веб-сайт. Тут я маю на увазі як елементарні стріли, так і креативні рішення, такі як повітряна куля, підкрадання, все, що тільки можна уявити.
Веб-сайт пляжного кабана з ракеткою для настільного тенісу
Студія Sparks
Розмітка стовпців – ця функція може дуже допомогти заінтригувати користувачів, особливо коли один зі стовпців розбитий згином. Потім користувачі починають прокручувати, щоб прочитати розділ до кінця, і тому мимоволі переходять до нижнього колонтитула та отримують ще одну порцію інформації, яку ви підготували.
Навігація є наріжним каменем будь-якого веб-сайту, і не дивно, що вона повинна мати найкращу позицію та максимально зручну функціональність. Найкраща позиція – у верхній частині сторінки, без сумніву. чому Тому що користувачі можуть не захотіти прокручувати всю домашню сторінку, але вони мають конкретну мету та потребують переглянути певну сторінку, як-от про нас, контакти, оплату, портфоліо тощо. Якщо ви змусите їх прокручувати, щоб переглянути більше сторінок, вони все віддадуть і знайдуть інший сайт. Багато розробників роблять помилку, створюючи величезні зони для героїв із зображеннями, які займають весь простір над згином (і велика зона для героїв сьогодні в тренді). Вам краще розмістити панель навігації над цим зображенням у верхній частині, а не робити її під розділом і видимою лише після невеликого прокручування.
Дизайн веб-сайту з верхньою навігацією
Де заклики до дії більш ефективні?
Відповідь на це питання залежить від багатьох факторів: який тип послуг/продуктів ви пропонуєте, клієнт може прийняти рішення відразу чи йому потрібно буде прочитати більше, перш ніж у вас є один або кілька закликів до дії, які будуть розміщені на сайті. сторінки. Тепер опишемо кожен пункт по черзі.
Кнопка заклику до дії (CTA) діє у верхній частині сторінки, коли ви надаєте вичерпну інформацію про свій продукт у заголовку. Це може бути слайд-презентація, марковані списки з перевагами вашого продукту, будь-яка статика тощо. Отже, у користувача склалося враження про вашу компанію, і він може прийняти рішення. У цьому випадку кнопки над згином зіграють на вашу користь.
Односторінковий веб-сайт із кнопкою CTA у верхній частині сторінки
Якщо у вас є довга історія, яку ви можете розповісти своїм клієнтам, і ви хочете, щоб вони знали всі переваги та недоліки вашого продукту, вам потрібно розмістити CTA у нижній частині сторінки, а краще – у нижньому колонтитулі. Таким чином, коли клієнти впевнені, що вони їм потрібні, вони побачать поштовх прямо перед собою. Однак ви повинні зробити свою історію привабливою, цікавою, захоплюючою та цілеспрямованою, інакше ви не отримаєте нульової відповіді.
Коли можна використовувати кілька закликів до дії? Лише тоді, коли ви робите їх різного призначення та розміщуєте в різних розділах вмісту. Крім того, краще створювати різні дизайни для всіх, щоб відрізняти один від одного. Якщо у вас скрізь розміщені однакові кнопки, це зіпсує вашу присутність в Інтернеті та погіршить кінцеві результати.
Веб-сайт із кількома закликами до дії
Як поставити CTA посередині? Є кілька хитрощів, які вам варто знати:
- розмістіть заклик до дії на бічній панелі, бажано зліва, тому що ми зазвичай читаємо зліва направо, і все, що знаходиться зліва, спочатку впадає в очі:
- зробити дизайн заклику до дії помітним, розфарбувати його яскраво та використовувати великий шрифт;
- використовуйте пробіл навколо свого заклику до дії, щоб виділити його серед іншого вмісту.
Найбільша помилка, яку ви можете зробити, це змішувати CTA з іншими елементами контенту. Тому ніколи не розміщуйте його на захаращеному та безладному макеті, це точно не спрацює.
Контактна інформація: у верхній чи нижній частині сторінки?
Не всі користувачі люблять переглядати довгі веб-сайти з великим вмістом, деякі з них знаходять ці сайти лише для того, щоб отримати контакти компанії, щоб здійснити дзвінок. Тому контакти краще розташовувати у верхній частині сторінки, це може бути один рядок з номером телефону або компактний блок з більш детальною інформацією. Крім цього, не забудьте про окрему сторінку Контакти, вона обов’язкова для будь-якого сайту.
Верхня сторінка все ще важлива: домашня сторінка та цільова сторінка
Принцип дизайну верхньої частини не є однаковим для всіх сторінок веб-сайту. Хоча це неважливо і непотрібно на сторінках із вмістом, це дуже важливо для дизайну домашньої сторінки та цільових сторінок. Тут у вас є шанс залучити глядачів красивим розділом героїв із зображеннями або слайд-презентацією. Тим не менш, дотримуйтеся правил дизайну всіх дій і навігації, які ми обговорювали раніше.
Останні поради: елементи для розміщення у верхній частині сторінки та під нею
Сподіваємося, ви не заплуталися зі статтею; у будь-якому разі ми коротко розповімо вам про ключові моменти дизайну у верхній частині сторінки та підсумуємо все в простих порадах, яких слід дотримуватися:
- Позначте своє ім’я у верхній частині сторінки. Логотип має великий вплив на впізнаваність бренду, і власне для цього веб-сайт створено – щоб рекламувати ваше ім’я/компанію.
- Використовуйте верхню навігацію. Це найважливіший елемент багатосторінкового веб-сайту, тому принципи згортання тут дійсно важливі.
- Розмістіть головні новини у верхній частині сторінки. Нехай клієнти одразу дізнаються про ваші події та нові продукти, не змушуйте їх здогадуватися.
- Кнопки соціальних мереж добре працюють як у верхній, так і в нижній частині сторінки. Якщо сторінка вашого веб-сайту довго прокручується, не вибирайте – просто розмістіть кнопки публікації в соціальних мережах угорі та внизу. Кнопки заголовка підходять для відвідувачів, які вже знають вас і шукали ваш веб-сайт саме для того, щоб знайти ці кнопки слідування. Кнопки нижнього колонтитула чудові, тому що якщо користувачі зацікавлені у вашому вмісті, вони все одно прокрутять вниз.
- Знайдіть відповідну позицію заклику до дії для вашого конкретного веб-сайту. Кожна компанія та постачальник послуг має різні цілі щодо створення веб-сайту, тому заклики до дії для них теж різні. У цьому дописі ми надаємо хороші роз’яснення щодо цього питання дизайну, ми сподіваємося, що ви прочитали його уважно, поверніться, якщо ні.
- Не ставте все наверх. В іншому випадку ви отримаєте жахливий сайт із захаращеним макетом, до того ж із порожнім і нудним дизайном нижньої частини.
- Нехтуйте принципами верхньої частини, якщо ваш веб-сайт використовується переважно мобільними користувачами. Люди звикли прокручувати, коли переглядають сайти за допомогою смартфонів або планшетів.
- Прокручування в тренді, тож краще висвітлюйте його, ніж дизайн верхньої частини, що не є обов’язковим у сучасному цифровому світі.