Стандарти правильного розміщення та визначення дій елементів сайту

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

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

Типи інформації 

Як відомо, кожна сторінка в мережі Інтернет наповнена певною інформацією з конкретною метою. Загалом, більшу частину цієї інформації можна розділити на 4 умовних типи: 

• інформаційна;
• напрямна;
• спрямована на продажі;
• комунікативна.

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

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

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

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

Визначальні вимоги до ключових елементів

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

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

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

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

Унікальна торговельна пропозиція (УТП) – це блок інформації, який дає відвідувачеві розуміння, чому даний ресурс є краще, аніж його  аналоги. Іншими словами, «Чому ми?». Правильна УТП досить інформативна і різнобічна, але в той же час не переобтяжена та лаконічна. Вона дає чітке розуміння переваг компанії, виділяючи її серед конкурентів. УТП може також супроводжуватися ілюстраціями на додачу до текстового вмісту.

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

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

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

Види кнопок

Види кнопок можна розглядати в двох площинах: класифікація за дією і класифікація за стилем.

Кнопки дії поділяють на:

1. Кнопка заклику до дії – це пропозиція ресурсу здійснити цільову або близьку до цільової дію – зареєструватися, подати заявку, авторизуватися, купити зараз та ін. Її натискання відкриває безпосередньо конверсійну форму або попередню сторінку. Як правило, вони характеризуються яскравим кольором, що привертає увагу.

2. Кнопка первинної дії, як правило, відповідає за ключову дію або її перший крок (створити, почати, далі, завершити, відправити). Найчастіше вона є закінченням або підсумком одного з етапів конверсійної дії. Зазвичай такі кнопки характеризуються суцільною заливкою.

3. Кнопка вторинної дії є альтернативою первинної дії. Інакше кажучи, вона надає користувачеві право вибору (назад, скасування, змінити, редагувати). Як правило, кнопки даного типу є контурними або навіть просто активним посиланням.

4. Кнопка третинної дії – це кнопки не ключового функціоналу (наприклад, поділитися, додати нове, читати далі, докладніше). Це набагато менш помітні елементи, які характеризуються непомітним кольором і/або формою.

Що стосується стилів, то тут виділяють наступні види кнопок: 

1. Контурна кнопка ‒ це фігура (прямокутник в різних варіаціях, рідше – коло або інша фігура) з текстом всередині без заливки або з прозорою текстурою. Зазвичай це кнопки вторинної або третинної дії.

2. Суцільна кнопка – коли контурна кнопка залита кольором, найчастіше акцентуючим. Найпоширеніший вид кнопок, який використовується практично на кожному сайті/екрані/сторінці.

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

4. Текстове посилання – це найбільш спрощений вид кнопок. Фактично, це слово-посилання без заливки і рамок. Активність посилання відображається кольором тексту, підкресленням, місцем розташування або навіть самим текстом посилання. Найчастіше це кнопки третинної дії, рідше – вторинної.

5. Кнопка «значок з написом» характеризується присутністю перед текстом кнопки відповідного значка (піктограми). Як приклад – кнопка кошика, додати друга, написати лист.

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

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