Як за допомогою дизайну керувати увагою користувачів
Про можливість візуального контенту керувати увагою користувачів говорять досить рідко, але це є важливим аспектом ефективного веб-дизайну. Кожен відвідувач оцінює новий сайт на першій завантаженій сторінці – свідомо чи несвідомо.
Оригінальність має значення, але набагато важливіше загальне враження від дизайну. На нього впливає порожній простір, шрифт, симетрія та взаємовідносини між елементами сторінки.
Дизайнери хочуть, щоб відвідувачі залишалися на сторінці якнайдовше і прокручували сторінки до кінця. Саме тому дуже важливо фокусуватися спочатку на функціях, а потім на формі. Це означає, що дизайн має вигідно подавати контент, а не робити його другорядним елементом.
У сьогоднішній статті ми розглянемо, як можна покращити розташування елементів та потік візуального контенту на вашому сайті.
Звертайте увагу на композицію
Кожен елемент сайту є частиною загального макету. Цей макет і створює композицію, причому важливіше, ніж сума його частин.
Блоки сторінки об'єднуються, щоб створити щось ціле. Завдання елементів дизайну у цьому випадку – створити потік контенту. Усі складові сторінки повинні вести відвідувача до її низу.
Ось чому взаємини між різними частинами контенту (зображення, текст, кнопки і т.д.) відіграють таку важливу роль у дизайні.
Домашня сторінка Monkop – чудовий приклад візуальної ієрархії тексту та візуального контенту. Між елементами багато порожнього простору, шрифт успішно доповнює ілюстрації бренду.
У міру прокручування відразу впадає в око горизонтальний блок, виділений кольором, межами та графікою.
Далі виділяється двіколонки із зображеннями з одного боку та текстом з іншого, які чергуються. Це привертає увагу і робить сторінку не такою монотонною.
Далі ви помітите анімацію, яка зробить процес прокручування цікавішим.
Загалом, сторінка видається відкритою та зрозумілою. Контент розділений на горизонтальні блоки з яскравим шрифтом та іконками.
Зверніть увагу, як усі елементи сторінки перебувають у балансі один з одним: порожній простір, контраст кольорів та форм. Всі ці деталі відіграють роль у загальній композиції. Таким чином сайти вигідно подає контент.
Рецепту ідеальної сторінки просто не існує, оскільки всі різні сайти. Наприклад, іноді краще, щоб кнопки навігації були величезними, іноді щоб невеликими.
Вивчіть сайти своєї індустрії, проаналізуйте їхню композицію, постарайтеся зрозуміти, що поєднує всі елементи в єдине ціле.
Друкарня важлива
Дизайн друкарні безпосередньо впливає на керування увагою користувача на вашому сайті. Особливе значення в цьому випадку має ієрархія та стиль різних елементів сторінки: абзаців, заголовків, списків, цитат та колонок чи таблиць.
Візуальний контент також впливає на макет, тому при створенні дизайну краще враховувати натуральну прогресію. Пишіть контент так, щоб він поступово вів до кінця сторінки та привертав увагу користувача до кожного абзацу.
Найкращим інструментом у цьому випадку будуть ваші очі. Навчіться помічати різницю між елементами типографіки та оцінювати їх вплив на інші елементи. Створіть зв'язок між секціями сторінки, щоб виділити контент.
Зверніть увагу на:
- розмір тексту
- сімейство шрифтів
- контраст кольорів
- взаємини міжрізними секторами сторінки
- висоту рядків та краю абзаців
- відстань між літерами та регістр
Інші заголовки на сайті більші і набагато помітніші, вони привертають увагу. При цьому відразу видно, де використовується заголовок, а звичайний текст абзацу.
Друкарка Campaign Monitor ідеально вписується в макет. Щоб досягти такого результату, потрібно практикуватися, але згодом буде все простіше і простіше.
Напрямний контент
Різні типи сайтів використовують різні методи керування увагою користувачів. Наприклад, на посадкових сторінках часто використовуються невеликі блоки контенту, іконки, скріншоти та відгуки.
На інших сайтах (наприклад, блогах) користувачі не опиняються одразу на домашній сторінці. Багато хто переходить за посиланням на певну статтю. І тут заголовок повинен привертати увагу відвідувачів, викликати інтерес до контенту. Тут найважливішу роль грає майстерність копірайтингу, завдяки якому читач не пропустить жодного слова.
Давайте порівняємо дизайн посадкової сторінок та блогу, щоб побачити різницю.
Домашня сторінка Cactus багато в чому повторює стиль дизайну Apple – багато порожнього простору та лаконічні шрифти sans-serif.
Контент організований у колонки тексту із простою графікою. Користувачі Mac точно оцінять такий дизайн.
Сторінку цікаво гортати, унікальний контент, прості іконки та блоки контенту, що чергуються, радують око.
Основна мета сторінки – надати інформацію наявним користувачам та продати потенційним покупцям ідею Cactus.
Тепер звернімося до дизайну домашньої сторінки The Next Web. Контенту тут набагато більше.
Прямокутники створюють сітку, якаорганізує безліч постів на єдиний макет. Мета цієї сторінки – змусити відвідувача прочитати контент. Важливо, щоби відвідувачі затрималися на сайті.
Зацікавити користувача допомагають яскраві фото та привабливі заголовки. Щоб відвідувачі затрималися довше, в основному меню та після контенту використовуються посилання на схожі пости.
Управління увагою користувачів на кожному сайті працює по-різному. Але навчитися цьому можна, вивчаючи своїх успішних конкурентів.
Довіряйте своїм очам
Деякі характеристики дизайну не можна пояснити з погляду аналітики, їх використання може бути виграшним для одних сайтів та невдалим для інших.
Навчання дизайну - багато в чому візуальний процес. Ваш погляд має вирішальне значення. Ви повинні навчитися звертати увагу на деталі, щоб визначити візуальну ієрархію. Якщо ви це бачите на інших сайтах, то зможете повторити і на своєму.
Просто довіряйте своїм очам. Створіть список своїх улюблених сайтів та проаналізуйте кожен із них. Визначте найвдаліші елементи та їх вплив на весь дизайн. Це допоможе оцінити ці концепції з точки зору UI/UX, а не користувача.
Не бійтеся експериментувати. Ніхто ще не досягав успіху, просто читаючи статті про дизайн. Вони допомагають, але без практики не можна зрозуміти, що працює, а що ні.
Навчіться аналізувати макети сайтів та відтворювати їх. Згодом у вас накопичиться ціла бібліотека елементів, яка значно спростить процес створення нових сайтів.