Протоптуємо стежку до успіху: юзабіліті для шапки сайту

35

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

Протаптываем тропу к успеху: юзабилити для шапки сайта

Шапка інтернет-ресурсу — що це таке?

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

Отже, ми зрозуміли, що шапка розташована вгорі веб-сторінки і, поряд з футером, позначає її межі для відвідувачів. Її можна порівняти з колонтитулами на друкованих сторінках.

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

Хочу відразу зазначити, що «верхівка» не обов’язково повинна зливатися з іншими елементами веб-ресурсу, вона може бути виконана в абсолютно іншому стилі. Висоту ви вибираєте самі.

Протаптываем тропу к успеху: юзабилити для шапки сайта

Роль шапки в просуванні сайту

Друзі, якщо ви думаєте, що головну роль в розкручуванні сайту грає його контент, то прошу мене вибачити за зруйноване світогляд :) . Перше враження про веб-ресурсі завжди визначає його зовнішній вигляд, а особливо його «header». Він впливає не тільки на загальну привабливість інтернет-сторінки, але і на юзабіліті сайту. Тому при розробці свого веб-ресурсу, поставтеся з усією серйозністю до питання того, як зробити красиву шапку сайту.

Якщо у вас достатньо коштів, щоб найняти професійного дизайнера для розробки хэдера для свого ресурсу, то зробіть це без зволікань, і високу якість вам гарантовано. У випадку, коли кожна копійка на рахунку, не поспішайте засмучуватися. Ви можете самі навчитися робити графічні елементи для інтернет-проектів, наприклад, пройдіть відеокурси по веб-дизайну або навчіться темізаціі WordPress. Тут ви витратите набагато більше часу, зате знайдете корисні навички, які 100% знадобляться вам в майбутньому.

Створюємо модний і зручний «головний убір» разом

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

Логотип.

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

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

Уникайте подібних моментів, адже ймовірність того, що користувач покине сайт, не придбавши товари та послуги, збільшується в рази! Запам’ятайте: логотип розміщуємо у верхньому лівому куті!

Протаптываем тропу к успеху: юзабилити для шапки сайта

Контактний номер телефону.

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

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

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

Меню з навігацією.

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

Лаконічний заголовок.

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

Протаптываем тропу к успеху: юзабилити для шапки сайта

Зображення, що відповідає тематиці веб-ресурсу.

Тематичне зображення можна розмістити біля тексту «головному уборі» сайту або ж зробити фоном. Не обов’язково зациклюватися на статичному зображенні, можна розмістити тематичний відеоматеріал. Практика показує, що якісні фото — і відеоматеріали в шапці сайту викликають у відвідувача бажання що-небудь придбати і скористатися послугами, пропонованими ресурсом.

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

Зручна форма зворотного зв’язку.

Найчастіше, на підсвідомому рівні, після перегляду верхній частині ресурсу, відвідувач одразу приймає рішення придбати той чи інший товар, а сторінку продивляється вниз просто так, за звичкою. Тому, важливу роль в юзабіліті вашого сайту буде грати проста і зручна форма замовлення. Вона повинна містити не більше 2-3 полів.

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

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

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