Хедер

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

Ми розповімо, що найкраще розміщувати в хедері сайту та електронного листа, дамо поради щодо оптимального дизайну та наведемо різні приклади.

Хедер: що це таке

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

Хедер і футер обрамляють контентну частину сайту, тому під час розроблення їм потрібно приділити особливу увагу. Відомо, що користувачі переглядають сторінку за принципом зигзага (діаграма Гутенберга): спочатку дивляться на верхній лівий кут вікна, яке відкрилося, потім на верхній правий кут, а тільки потім спускають погляд вниз.

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

Що розміщувати в шапці сайту

У хедер сайту можна додавати:

• елементи айдентики бренду — назву компанії, логотип, місію, слоган;
• контакти — адресу, телефон, email;
• меню з основними категоріями сайту — як горизонтальне, так і розширене вертикальне;
• вікно для пошуку на сайті (актуально для великих онлайн-магазинів, маркетплейсів, інформаційних ресурсів);
• форму підписки на email і пуш-розсилки;
• кнопку входу та реєстрації на сайті;
• актуальний офер компанії та інформацію про наявність знижок і акційних пропозицій;
• кнопку перемикання мов інтерфейсу, посилання на мобільну версію або версію для слабозорих;
• іконку кошика, де відображатиметься кількість доданих товарів (обов'язково використовувати для онлайн-магазинів);
• іконку з вибором країни і міста (актуально для агрегаторів, маркетплейсів, інтернет-магазинів);
• відповідну графіку і якісні картинки, які відповідають тематиці бренду і дають зрозуміти, про що цей сайт (опціонально).

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

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

Як зробити хедер для сайту: головні принципи

Для створення вдалої шапки сайту дотримуйтеся правил:

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

2. Дотримуйтеся рекомендованого розміру шапки. Для інформаційних ресурсів висота хедера має бути в межах 100-200 пікселів; для корпоративних сайтів, лендингів та односторінкових сайтів її можна збільшити до 300-500 пікселів.

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

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

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

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

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

Шапка сайту: приклади для різних ніш

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

Хедер для ніші HoReCa (кафе, бари, ресторани)

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

Хедер для інтернет-магазину

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

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

Хедер для сфери послуг

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

Хедер для сайтів SaaS

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

Хедер для персонального сайту

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

Як зробити хедер для email: головні принципи

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

• логотип бренду, який одразу дасть зрозуміти, від кого надійшов лист;
• меню найпопулярніших розділів сайту та категорій продуктів (цей прийом часто використовують в ecommerce);
• посилання на вебверсію листа, щоб одержувач зміг переглянути email у браузері, якщо в поштовому сервісі він не відобразиться;

• офер, який зацікавить підписників;
• слоган компанії, який використовують для позиціонування бренду;

• кнопки соцмереж для швидкого переходу на бізнес-сторінки компанії;
• контакти (номер телефону, адреса сайту, офісу, магазину тощо);
• картинку, що привертає увагу одержувачів.

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

Ви також можете створити дизайн емейла самостійно, скориставшись email-редактором CDP eSputnik. Аби полегшити створення листа, використайте вбудований штучний інтелект, який допоможе згенерувати текст емейла, виправити помилки, змінити tone of voice, перекласти меседжі тощо.