Кирило Лазарєв, засновник та CEO агенції Lazarev.agency.
Lazarev.agency — українська дизайн-агенція діджитал продуктів, яка працює з Web3, SaaS та FinTech стартапам над дослідженням ринку, створенням продуктової стратегії, дизайном інтерфейсу та масштабуванням. Агенція отримала 70+ світових нагород у дизайні, зокрема престижну The Webby Award 2022 разом з Netflix, Nike, Google, Spotify.
SEO та UI/UX мають працювати разом. Коли ми говоримо про те, як користувачі користуються сайтом, зазвичай просто контенту недостатньо і тому саме UI дизайн класно допомагає конвертувати користувача який приходить на ваш сайт. Неможливо просто зробити класні продукти, потрібно потім конвертувати людей у продаж тому що основна кінцева ціль – це зробити продаж.
SEO практики підвищують рейтинг сайту в пошукових системах. UI/UX дизайн фокусується на поведінці користувача після переходу на сайт. Ціль дизайну – підвищити конверсію.
SEO та UI/UX – це потужна синергія, яка гарантує, що вона не тільки збільшить трафік, але й збільшить конверсії, тому що конверсії – це основне, що нам потрібно.
Структура сайта та навігація – це така штука, яка потрібна щоб зрозуміти сайт не тільки роботам, але й людям. Але зазвичай сеошники пропускають цей момент. Зрозуміла навігація – це та штука, яка допомагає користувачу швидше знаходити свою останню ціль.
Наприклад, багато незгрупованих та неструктурованих посилань у футері, перевантажують користувачів. Рішення – розділити категорії на підкатегорії та згрупувати елементи за темами та типами сторінок.
Або порушені пропорції тексту і зображень при зміні ширини екрану, контент не вміщується в області перегляду. Рішенні – забезпечити щонайменше 50% ширини екрану для текстового контенту або змінити лейаут.
Інший приклад – це коли сторінки мають незрозумілу навігацію. Рішення – додати закріплену навігацію на довгих сторінках, теги для перенаправлення користувача на пов’язаний контент та можливість повернутися на попередню сторінку.
Кожен з таких нюансів має доволі маленьку вагу, але якщо позбутись цих проблем, то конверсія збільшиться. Разом це все будується в одну воронку.
Існує дуже популярна концепція: потрібно завжди збільшувати тривалість сеансів на сайті, бо це може позитивно вплинути на ранг сайту в пошукових системах. Це дійсно так, але треба обов’язково враховувати те, що це все одно залежить від стадії воронки. Людина дуже рідко заходить і купує продукти одразу і чим вище ціна чеку, тим частіше людина буде заходити на сайт.
С точки зору дизайну, правильно оптимізовані лотті анімації допомагають інтерактивно донести інформацію та спростити розуміння для користувачів. Також вони ранжуються як окремі файли, якщо правильно зробити описи.
Беклінки дуже допомагають в SEO. Користувачі дійсно діляться сайтами, які їм подобаються в медіа та соціальних мережах, створюючи тим самим додаткові вхідні посилання. Якщо ви запускаєте проєкт для якогось ком’юніті і робите це якісно, люди будуть постійно ним ділитись і таким чином генерувати трафік. Формально ви отримаєте безкоштовні беклінки.
Дизайн також привертає увагу користувачів до того, що має значення. Інформаційна ієрархія – те, що керує увагою користувачі і направляє їх зробити потрібні нам дії.
І перший момент, який досить часто ігнорують – це сітка. Ми рекомендуємо використовувати сітку з великою кількістю дрібних та великих елементів, що гармонійно поєднуються. Наприклад, лівий стовпчик можна використовувати для навігації або СТА-блоків. Інші колонки – для контента.
Другий момент – це композиція. Наприклад, текст нелогічно вписується в область перегляду. Користувачеві доведеться прокручувати вгору і вниз для того, щоб прочитати інформацію. Рішення – поділити велики блоки на менші або згорнути великий обсяг інформації.
Ми рекомендуємо використовувати принцип гештальту. Це принцип за яким групуються елемента та інформація на сайті. Секції мають доповнювати одна іншу. Так ви зможете зробити секції, які будуть керувати увагою користувача.
Це сума минулих концепцій. Ми маємо виділяти інформацію таким чином, щоб юзера підбодило до акцентів. Наприклад, елементи, структуровані сіткою та білим простором, можуть спрямовувати людське око до потрібних повідомлень та дій.
Частою помилкою є інтерфейс, коли всі кнопки мають однаковий пріоритет. Рішення – використовувати різні стилі кнопок, щоб сфокусувати увагу користувача за пріоритетами.
Рекомендуємо подивитись приклади рейльних кейсів від Кирила, які починаються на 29:26. Вони більш наглядно продемонструють, як використовувати всю цю інформацію, яка здається базовою та зрозумілою, але насправді такою не є.
