067 607 57 84
заповніть форму нижче:
У веб-дизайні немає другого шансу справити враження. При розробці шапки сайту (хедера) потрібно пам'ятати, що це перший елемент веб-сторінки, який бачать відвідувачі. Від нього залежать конверсії та прибуток.
Хедер (header) - це елемент веб-сторінки, що знаходиться вище області контенту.
Якщо описати веб-сторінку «архітектурними» термінами, то футер - це підвал сайту, область контенту - стіни і вікна, а хедер - дах.
Або, як його називають в нашому середовищі - шапка сайту.
Як не назви, header - стратегічна область, яку прискіпливо оцінює кожен користувач перш, ніж почати скролінг і вивчення сторінки.
Шапка сайту показується в перші секунди взаємодії, тому вона стала справжнім випробувальним полігоном для психологів і маркетологів.
Будучи своєрідним привітанням, цей елемент повинен доносити ключову інформацію про веб-проект, допомагати в навігації і одночасно робити гарне враження на підсвідомому рівні.
Звучить складно, чи не так? Сьогодні ми розкладемо все по поличках і познайомимо вас з ключовими принципами розробки та оптимізації шапки сайту.
Почнемо з того, навіщо створюються всі комерційні сайти. Бізнесу необхідне залучення уваги, утримання відвідувачів, високі конверсії та продажі.
Веб-дизайнери виділяють ряд причин, чому красивий хедер - життєво важливий елемент комерційних сайтів (до речі, бувають і без хедера - про них пізніше).
Основна причина в тому, що при першому зоровому контакті зі сторінкою очі людини роблять характерний зигзаг (як на малюнку). Перші враження мозок формує на підставі елементів 1 і 2 - у верхній частині екрану.
Ця схема була підтверджена експериментами компанії Nielsen Norman Group, і широко використовується в повсякденній роботі дизайнерів і фахівців UX.
Коли відвідувач вперше приземлився на домашній сторінці компанії, він швидко переглядає шапку - сканує її в надії зачепитися поглядом за цікавий об'єкт. Ви повинні надати такий об'єкт.
Дослідження в області ай-трекінгу свідчать, що погляд користувача «сканує» сторінку за трьома основними паттернам. Крім згаданого вище Z-патерну, це може бути F-патерн і так звана діаграма Гутенберга.
У всіх випадках сканування починається з шапки - горизонтальної області у верхній частині екрану. Використання хедера для розміщення важливої інформації і брендингу допомагає утримати користувача і схилити його до конверсії.
Саме тому розробка хедера - найважливіший предмет вивчення для фахівців з юзабіліті, контенщиків та онлайн-маркетологів.
«Люди судять про якість веб-сайту за пару секунд, а «другого враження» в Інтернеті не існує. Сайт, який відразу не приковує погляд, буде провалом бізнесу», - вважає відомий продакт-менеджер Богдан Санду.
Не забувайте і про функціональну сторону шапки - вона містить меню.
Незважаючи на це, далеко не кожен сайт має header.
Деякі дизайнери розміщують функціонал шапки сайту в інших областях сторінки, надаючи відвідувачам досить незвичайний досвід.
Header може містити великий набір елементів:
Ми не говоримо, що всі ці елементи потрібно втиснути в header.
Деякі з них зовсім не рекомендуються в сучасному веб-дизайні.
Наприклад, посилання на соціальні мережі у верхній частині сторінки можуть бути відволікаючим чинником і відводять відвідувачів з ресурсу.
А публікація адреси електронної пошти - мішень для спамових розсилок.
І взагалі, уникайте перевантаженості хедера за всяку ціну. Чим більше об'єктів одночасно борються за увагу користувача, тим менше її залишиться.
Вибираючи, що прибрати, а що включити в шапку сайту, веб-дизайнерам варто порадитися з маркетологами компанії. Це серйозне рішення!
Щоб правильно вибрати колір фону і шрифти хедера, дизайнери проводять глибокі дослідження і А/В тестування. Даний аспект розробки грає критично важливу роль в UX, і прорахунки неприпустимі.
Мета проста: користувач повинен просканувати ключову інформацію і сформувати якомога кращу думку про сайт за якомога менший час. Інакше ваш інтерфейс можна обізвати non-user-friendly.
Також не забувайте, що header по-різному впливає на скролінг сторінки.
Деякі веб-сайти використовують фіксований (липкий) хедер, який завжди залишається у верхній частині екрану і готовий допомогти користувачеві своїми посиланнями.
Інші вважають за краще приховувати шапку в процесі скролінгу. Існують і такі, де header зменшується при прокручуванні, залишаючи тільки найважливіше.
Найсмачніший елемент верхньої частини веб-сторінок - це гамбургер-меню.
Для новачків пояснимо, що так називають три горизонтальні смужки, що приховують меню. Погодьтеся, вони нагадують «хліб-м'ясо-хліб» в популярному бутерброді!
Гамбургер-меню звільняє багато місця, дозволяючи зробити інтерфейс мінімалістичним і стильним, повним негативного простору. Раніше ми писали, що гамбургер залишається актуальною тенденцією веб-дизайну закордоном.
Незважаючи на те, що у гамбургер-меню в мобільних додатках та веб-розробці є табір прихильників і противників, він широко застосовується всюди.
Єдиний аргумент проти гамбургера грунтується на тому, що він малопомітний і може заплутати неуважного відвідувача. За деякими даними, «невидимий бутерброд» збільшує відсоток відмов.
Подвійне меню - це два шари навігації один під одним.
Сенс такого рішення очевидний: хедер будь-якого сайту є стратегічною галуззю взаємодії, а тому повинен бути максимально інформативним.
Доцільність подвійного меню в шапці сайту не можна назвати безперечною, тому для кожного конкретного проекту потрібно проводити А/В тестування.
Підхід до розробки і оформлення верхньої частини веб-сторінки великою мірою залежить від цілей, які переслідує ваш сайт. Брендинг особистості вимагає одного дизайну, брендинг товару або послуги - іншого. Давайте розберемося.
Якщо ви представляєте приватну фірму імені себе, є авторитетним фахівцем або зіркою - відвідувачі повинні дізнатися про це з першого погляду. Ви - бренд, тому header присвячується вам.
Найшвидший спосіб досягти почуття причетності, прискорити побудову стосунків і побудувати визнання - розмістити щасливу, усміхнену фотографію людини в шапці сайту.
Навіть якщо відвідувач ніколи не зустрічав вас, неодноразове споглядання вашого обличчя з часом змусить відчути, що ви хороші знайомі.
При розробці хедера веб-сайту для брендингу особистості доцільно використовувати фотографії, логотип, ім'я.
Якщо це черговий корпоративний сайт, то потрібно розуміти: логотип і назва компанії в шапці не "порве Інтернет”, як прийнято зараз казати.
У багатьох випадках кращою стратегією є мінімізація заголовку, щоб підняти область контенту вище. Або взагалі не використовувати хедер, тому що (давайте будемо чесними) ваш логотип - це не те, що повинно переконати потенційного клієнта, покупця, партнера.
При розробці веб-сторінки для брендингу бізнесу подумайте про те, щоб зберегти шапку простою і мінімалістичною. Увімкніть тільки ваш логотип і tagline, не захаращуючи місце непотрібними, пафосними речами.
Переконайтеся, що хедер 100% виконує свої функції і миттєво повідомляє відвідувачеві про призначення онлайн-ресурсу.
Для брендингу товарів, подій, програм і послуг продумайте логотип, що доносить ключову пропозицію. Коротка заява про переваги допомагає відвідувачам моментально зрозуміти, чи знаходяться вони в потрібному місці.
При розробці хедера для продажу квитків на захід (концерт, вечірка) постарайтеся емоційно передати його атмосферу.
Розгляньте можливість включення фотографій, логотипу товару, короткого опису і лаконічного, інформативного підзаголовку.
Header займає дорогоцінні пікселі у верхній частині екрану, що не завжди виправдано.
Для деяких компаній краще зовсім відмовитися від традиційного хедера, використовуючи замість цього, скажімо, логотип.
При розробці веб-сайту подумайте, чи дійсно потрібна шапка?
Чи є вона критичною для навігації? Або для воронки продажів?
Що буде з шапкою на мобільних пристроях? Вона все одно зникне або зменшиться настільки, що ніхто не зможе її розглянути?
Вас можуть здивувати власні висновки!
повернутись