Мы - сертифицированные партнеры Google
Обратный звонок

Основні принципи правильного UX дизайну

Время чтения: 10 минут
03.02.17

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

Не забувайте про правила візуальної ієрархії.

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

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

Правильне візуальне розташування елементів краще допомагає визначити користувачеві, куди далі йому йти: скролл, клікати на сторінку, переходити в інший пункт меню та ін. Саме правильна візуальна ієрархія повинна відокремлювати важливе від другорядного на сайті, вона допомагає орієнтуватися в структурі ресурсу і спрямовує користувача на вчинення конверсії.
Хорошим прикладом діючої візуальної ієрархії може стати офіційний сайт Apple – подивіться, наскільки лаконічно і вдало винесені на титульний слайдер флагманські продукти (в даному випадку – iPhone 7). Завдяки лаконічній подачі інформації та правильної ієрархії форм на сайті заблукати практично нереально: слайдери клікабельні, нагорі розділи сегментовані по продукції.

iphone 7 slider

Дозвольте сайту «дихати»

Так званий white space несе величезну цінність для UX дизайну. Він дозволяє користувачеві краще зорієнтуватися в інтерфейсі і приймати рішення. Всі важливі елементи і якоря візуальної ієрархії розділені від другорядного контенту. Вільний простір не обов’язково має бути білим або чорним, воно просто має легко відділятися від основних конверсійних елементів сторінки.
Відмінний приклад – у Samsung. При скролінзі можна побачити кілька секцій тільки із зображенням продукту, коротким заголовком і майже «невагомою» кнопкою докладніше. Дизайн не перевантажений елементами, достатня кількість простору допомагає сконцентрувати увагу на продукті і допомагає користувачеві прийняти правильне рішення, не відволікаючись на другорядну інформацію.

screenshot samsung site

Навігація повинна бути максимально простою і зрозумілою

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

Не забувайте про адаптивність

Все більше людей використовують смартфони для пошуку інформації в інтернеті. Навіть якщо конверсія відбувається переважно з ПК, то шукають вас зі сфери мобайла, а потім цілеспрямовано переходять на цікавий ресурс через запит в пошуковій системі. За останніми даними, більше половини користувачів стверджують, що в разі незручного мобільного сайту або відсутності адаптивного інтерфейсу в принципі, бажання переходити на «повнорозмірну версію» пропадає зовсім.
Дуже важливо опрацювати зручну навігацію і призначений для користувача досвід у всіх версіях сайту, адаптивний дизайн – це вже не перевага, а проста необхідність. Не потрібно виносити на мобільну версію всі пункти з повноцінного десктопного варіанту – все повинно бути максимально зрозуміло і лаконічно, пункти меню повинні знаходитися один від одного на відстані, достатній для того, щоб ідентифікувати дотик і перенаправляти користувача на необхідний йому розділ меню.
Стандартна схема – переміщення меню на ліву (або праву) сторону екрану. Як приклад, фул і мобайл версія сайту інтернет-магазину косметики Makeup.

makeup mobile version

makeup desktop version

Послідовність – головне правило

Ключовим принципом юзабіліті сайту визнається і послідовність. Вона означає, що всі елементи дизайну повинні бути витримані в одному стилі. Забудьте про бурхливі ​​фантазії при виборі шрифтів або відтінків. Обмежтеся одним стилістичним набором – буйство фарб і форм тільки збиває користувача зі шляху конверсії.
Є «непорушні» елементи дизайну, відступати від яких не слід.
Найчастіше бажання бути в усьому краще, креативніше і оригінальніше всіх може зіграти з вами злий жарт: користувачі просто не зрозуміють подібних поривів. Стандартних патернів потрібно дотримуватися, а якщо ви дуже хочете спробувати щось нове, то обов’язково попередньо протестуйте це.

Чесність – понад усе

Дизан і інтерфейс сайту повинен залучати, але не повинен обманювати. Продукт або компанія повинні викликати позитивні емоції і стовідсоткову довіру. Візуальне підтвердження якості або відгуки – все це не завадить. Відмінним рішенням стане відеоконтент, що розповідає про особливості товару і його основні характеристики (задумайтеся, навіщо на і без того успішній «Розетці» з’явилися відеоогляди гаджетів?).
За статистикою, більше 70% людей позитивно реагують на відеоконтент і вирішуються на конверсію.

Без тестів – нікуди

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

karta klikov yandex

KISS на сайті просто необхідний!

Під такою кумедною назвою ховається чи не основний принцип UX- дизайну – «keep it simple, stupid!». Посадкова сторінка повинна бути максимально проста, користувач не зобов’язанний думати – він повинен протягом перших кількох секунд на сайті вже розуміти, що цей товар йому потрібен. На лендінгу детально опрацьовується тільки один шлях – шлях, який веде до конверсії.
Для дотримання принципу KISS ви повинні орієнтуватися на гармонійне співвідношення кольорів і шрифтів. Квітів на сторінці повинно бути від трьох до п’яти. При цьому, один з них буде основним, другий – допоміжним, а 10% відведіть на колірний акцент.
Шрифти повинні бути читабельні, краще використовувати два види шрифту – один для тексту, інший підійде для оформлення заголовків.
Додаючи новий елемент дизайну або навігації на посадковій сторінці, задайте собі питання про те, чи вплине він на ефективність ресурсу і чи принесе користь? Тільки позитивна відповідь означає необхідність присутності елемента в інтерфейсі.

Появились вопросы ?

У нас есть ответы

Любые вопросы относительно нашей деятельности и предлагаемых продуктов мы с радостью обсудим в теплой атмосфере. Мы будем рады вам и вашим вопросам, задачам, проектам.

Обсудить проект

ОБСУДИМ ПРОЕКТ?

заполните ваши контактные
данные, мы вам перезвоним и уточним все детали

Это поле обязательное для заполнения

Некорректный ввод

Это поле обязательное для заполнения

Некорректный ввод

данные не передаются 3-м лицам

заполните ваши контактные
данные, мы вам перезвоним

Это поле обязательное для заполнения

Некорректный ввод

Это поле обязательное для заполнения

Некорректный ввод

данные не передаются 3-м лицам