Розробка шапки сайту: як створити гарний хедер

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

Що таке хедер сайту?

Хедер (header) – це елемент веб-сторінки, що знаходиться вище області контенту.

Якщо описати веб-сторінку «архітектурними» термінами, то футер – це підвал сайту, область контенту – стіни і вікна, а хедер – дах.

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

Як не назви, header – стратегічна область, яку прискіпливо оцінює кожен користувач перш, ніж почати скролінг і вивчення сторінки.

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

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

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

Чому хедер важливий для бізнесу?

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

Веб-дизайнери виділяють ряд причин, чому красивий хедер – життєво важливий елемент комерційних сайтів (до речі, бувають і без хедера – про них пізніше).

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

Ця схема була підтверджена експериментами компанії Nielsen Norman Group, і широко використовується в повсякденній роботі дизайнерів і фахівців UX.

Коли відвідувач вперше приземлився на домашній сторінці компанії, він швидко переглядає шапку – сканує її в надії зачепитися поглядом за цікавий об’єкт. Ви повинні надати такий об’єкт.

Дослідження в області ай-трекінгу свідчать, що погляд користувача «сканує» сторінку за трьома основними паттернам. Крім згаданого вище Z-патерну, це може бути F-патерн і так звана діаграма Гутенберга.

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

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

«Люди судять про якість веб-сайту за пару секунд, а «другого враження» в Інтернеті не існує. Сайт, який відразу не приковує погляд, буде провалом бізнесу», – вважає відомий продакт-менеджер Богдан Санду.

Не забувайте і про функціональну сторону шапки – вона містить меню.

Незважаючи на це, далеко не кожен сайт має header.

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

Що додати в шапку сайту?

Header може містити великий набір елементів:

• Символи ідентичності бренду: логотип, назву, слоган компанії, фотографії представників і офісу, корпоративні кольори
• Блок контенту, який презентує продукти або послуги компанії
• Посилання на основні розділи веб-сайту (навігація)
• Посилання на найпопулярніші соціальні мережі
• Контактна інформація (номер телефону, email)
• Перемикач мовних версій сайту
• Кнопка підписки по електронній пошті
• Поле для пошукових запитів
• Посилання на мобільний додаток
• Посилання для взаємодії з продуктом

Ми не говоримо, що всі ці елементи потрібно втиснути в header.

Деякі з них зовсім не рекомендуються в сучасному веб-дизайні.

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

А публікація адреси електронної пошти – мішень для спамових розсилок.

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

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

Читабельність і візуальна ієрархія

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

Мета проста: користувач повинен просканувати ключову інформацію і сформувати якомога кращу думку про сайт за якомога менший час. Інакше ваш інтерфейс можна обізвати non-user-friendly.

Також не забувайте, що header по-різному впливає на скролінг сторінки.

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

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

Гамбургер-меню

Найсмачніший елемент верхньої частини веб-сторінок – це гамбургер-меню.

Для новачків пояснимо, що так називають три горизонтальні смужки, що приховують меню. Погодьтеся, вони нагадують «хліб-м’ясо-хліб» в популярному бутерброді!

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

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

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

Подвійне меню в шапці сайту

Подвійне меню – це два шари навігації один під одним.

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

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

Поради з розробки шапки сайту

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

Header для брендингу особистості

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

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

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

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

Header для брендингу бізнесу

Якщо це черговий корпоративний сайт, то потрібно розуміти: логотип і назва компанії в шапці не “порве Інтернет”, як прийнято зараз казати.

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

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

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

Header для брендингу товарів і послуг

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

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

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

Веб-сайти без шапки

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

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

При розробці веб-сайту подумайте, чи дійсно потрібна шапка?

Чи є вона критичною для навігації? Або для воронки продажів?

Що буде з шапкою на мобільних пристроях? Вона все одно зникне або зменшиться настільки, що ніхто не зможе її розглянути?

Вас можуть здивувати власні висновки!