Які тренди UX/UI дизайну у 2024 році, і як їх можна застосувати вже зараз? Ми поспілкувалися з Head of UX/UI Promodo Антоном Чеботаренком, зібрали ключові тенденції цього року та на прикладах показали, як вони працюють на практиці.
Mobile first
Звіт DataReportal за 2024 рік показав, що 98,1 % опитаних використовують мобільні пристрої для доступу до інтернету. Рік до року ця цифра лише збільшується, тоді як використання ноутбуків, десктопів та планшетів у 2024 році зменшилося на 3 %.
Мобільна версія все частіше стає першою точкою контакту з інтернет-магазином та сайтом бізнесу. Тому зовсім не дивно, що одним із трендів UX/UI дизайну, який тримається останні декілька років, — це глибоке пропрацювання мобільного дизайну. Ідея тренду mobile first у вебдизайні полягає в тому, щоб розробляти дизайн, орієнтований на користувачів мобільних пристроїв, після чого адаптувати його під інші девайси.
Тут важливо враховувати поведінку користувачів, які надають перевагу мобільним пристроям для взаємодії із сайтом, адже вона може відрізнятися від користувачів, які використовують десктоп. Телефоном користуються поза домом — у дорозі, під час руху, у місцях із поганим інтернетом, освітлянням тощо. Тому дизайн повинен бути спрощеним та зрозумілим, а швидкість завантаження сайту — високою.
.avif)
На що потрібно звертати увагу:
- Усувайте рекламу або поп-апи, які можуть відволікати. Мобільні екрани значно менші за десктопні, тому юзери будуть агресивніше ставитися до спливаючих банерів або діалогових вікон, які заважатимуть їм взаємодіяти із сайтом. Переконайтеся, що вони не закривають важливі елементи дизайну та не покривають більшу частину екрану, інакше користувач може просто покинути ваш сайт.
- Усі елементи повинні бути зручними в користуванні. Одне з досліджень показало, 66% сайтів для мобільних пристроїв розміщують елементи надто близько один до одного, а 32% сайтів мають занадто малі елементи. Це дратує — коли ви не можете натиснути на бажаний елемент або вам потрібно збільшувати екран, щоб це зробити.
- Не забувайте про опцію «пошуку». Ще один цікавий інсайт дослідження — 22% вебсайтів не розміщують поле пошуку на домашній сторінці, ускладнюючи досвід юзерів та можливу покупку.
Звучить смішно, але можливість дотягнутися великим пальцем до певного елементу на екрані стала ключовим фактором при виборі дизайн-рішень. Основні елементи навігації переносяться вниз (пошукові рядки в браузерах, меню навігації в застосунках та на сайтах). Еволюція інтерфейсів переходить від «адаптувати під мобільний» до «спроєктувати під мобільний і адаптувати під усі інші пристрої».
Accessibility та інклюзивність
Інклюзивність — це світовий тренд вебдизайну, який компанії використовують у маркетингу та комунікації брендів. Але стратегія інклюзивності не може бути відірвана від такої важливої точки взаємодії, як інтерфейс вебсайту. Термін accessibility означає «доступність», коли інтерфейси створюються водночас для всіх людей, хто має фізичні, сенсорні та когнітивні обмеження або інвалідність. Це можуть бути порушення зору, проблеми зі слухом, моторикою тощо — постійні або тимчасові — де людині потрібна додаткова допомога для взаємодії з вебресурсом.
Познайомитися зі стандартами вебдоступності можна на сайті Web Content Accessibility Guidelines (WCAG). Його створив Тім Бернерс-Лі, чоловік, який винайшов інтернет та заснував організацію World Wide Web Consortium, яка розробляє посібники з доступності в інтернеті. Фішка їхніх рекомендацій — в адаптивності. Організація займалася тестуванням разом із різними людьми, зокрема, з тимчасовими фізичними порушеннями, тому стандарти інклюзивного вебдизайну, які вони пропонують, будуть зручними для всіх людей.
На що потрібно звертати увагу:
- Підтримка технологій допомоги. Наприклад, сумісність сайту з «екранними читачами», якими користуються незрячі люди. Це спеціальна програма, яка за допомогою синтезатора мови озвучує текст на екрані, а користувач може може переміщатися та взаємодіяти із сайтом, використовуючи команди на клавіатурі. Серед інших технологій — можливість збільшувати текст, управляти голосом, сумісність сайту з брайлевими дисплеями тощо.
- Контрастність, шрифти та кнопки. Базово — це те, що може полегшити користування сайтом будь-якій людині. Але також текст можна адаптувати за розміром або додати можливість його зміни, створити режим високої контрастності та перевірити зручність розташування та натискання всіх кнопок.
- Альтернативний текст зображень. Незрячі люди не можуть побачити картинку або фотографію, тому велика частина «доступного» вебдизайну передбачає роботу з альтернативним текстом.
- Навігація сайтом. Дизайн сайту чи мобільного застосунку повинен бути інтуїтивно зрозумілим, без великої кількості навʼязливих поп-апів, які можуть збивати з пошуку необхідної інформації чи товару.
Найкраща практика для проєктування доступного та інклюзивного дизайну — юзабіліті-тестування. Щоби переконатися, що ваші рішення для бізнесу дійсно будуть зручні в користуванні для реального юзера.
(Гіпер)персоналізація та АІ
Гіперперсоналізований в UI/UX — це використання штучного інтелекту для створення користувацьких інтерфейсів, адаптованих до потреб, уподобань і поведінки кожного окремого користувача. Це тренд UX/UI дизайну у 2024 році, за яким буде майбутнє користувацького досвіду. Оскільки ми використовуємо ширший діапазон даних, включно з демографічною інформацією, поведінкою та психографічними даними, які аналізує ШІ, цей підхід виходить за межі звичної персоналізації.
Ключову роль відіграє штучний інтелект — він опрацьовує масиви даних, щоб ідентифікувати закономірності та прогнозувати поведінку користувачів, дозволяючи динамічно коригувати UI/UX у реальному часі.
Час, проведений користувачами на сайті та в застосунках скорочується. Але аналіз попереднього досвіду користувача, підсилений моделями штучного інтелекту дає можливість сформувати новий підхід до користувача: від персоналізованих рекомендацій і вибору теми (світлої/темної залежно від часу) до адаптації інтерфейсу. Це значно скорочує шлях до виконання цільової дії, покращує користувацький досвід та сприяє збільшенню часу сеансу.
На що потрібно звертати увагу:
- Конфіденційність даних. Користувачі повинні надати згоду на збір та обробку персональних даних, а бізнес — бути прозорими щодо їх використання.
- Не всі компанії зможуть дозволити собі роботу з гіперперсоналізацією. Малому та середньому бізнесу буде складно конкурувати з технологічними гігантами, які можуть виділяти більші кошти на впровадження моделі ШІ в бізнес та аналізування обʼємів даних.
Приклад Spotify
Spotify показує одразу два тренди UI/UX — дизайн, створений для користувачів мобільних пристроїв, та персоналізацію, завдяки якій сервіс може створювати індивідуальні добірки та пропозиції для кожного клієнта. На головній сторінці ви можете одразу отримати доступ до найголовніших розділів — власної бібліотеки, пошуку та пропозицій Spotify. Усі пропозиції формуються з ваших вподобань, останніх пошуків та прослуховувань, пропонуючи досліджувати нових музикантів та жанри.
Автоматизація
Окремо збільшується тенденція на мінімізацію дій на сайті за рахунок автоматизації процесів. Дизайнер має спроєктувати інтерфейс так, щоб усе, що може бути автоматизованим (автоматична швидка автентифікація, вибір міста, мови і т.д.) було автоматизованим, а користувач залишався сконцентрованим на тому, заради чого він звернувся до діджитал-продукту.
Читайте також: Механіки персоналізованих та автоматизованих пропозицій в Retention-маркетингу
Автоматизацію, як тренд, ми вловили достатньо давно і проєктуючи інтерфейс завжди намагаємось автоматизувати всі рутинні процеси користувача, щоб сконцентрувати його на тому, де його участь реально потрібна.
Наприклад, у чекаутах інтернет-магазинів ми зазвичай проєктуємо автоматичну автентифікацію за номером телефону — людина вводить номер, підтверджує його через SMS і все. Якщо була зареєстрованою, то ми підтягнемо всі її дані з бази і їй не доведеться заповнювати всю форму, а якщо це її перший візит, то дані збережуться в неї в кабінеті без необхідності запамʼятовувати пароль і наступного разу автоматично підтягнуться у форму. Такий функціонал ми реалізували на сайті Aurum.ua
Імерсивність та доповнена реальність
Інтеграція з AR та VR технологіями в інтерфейсах виводять досвід користувача на новий рівень. Взаємодія з ними дарує юзерам нові враження, але також вони покращують досвід користування, якщо можуть вирішити певну проблему або допомогти прийняти рішення.
Онлайн-примірочні у фешн eCommerce, навігаційні підказки в застосунках для туризму, розміщення меблів у своїй квартирі — усе це руйнує барʼєри та робить користувацький досвід у диджиталі максимально наближеним до реальності.
Приклад IKEA
IKEA розробила застосунок, що використовує AR та VR, і допомагає користувачам у режимі реального часу візуалізувати, як меблі та декор будуть виглядати у їхньому просторі. Для цього вони сканують своє приміщення за допомогою камери смартфона, а застосунок створює точну 3D-модель кімнати, включаючи деталі, такі як розміри, розташування вікон і дверей. Після сканування, користувачі можуть вибирати меблі та аксесуари з каталогу IKEA та віртуально розміщувати їх у своїй кімнаті.
Робити покупки для оселі буває важко, особливо коли визначитися потрібно не між різними кольорами ваз, а габаритними меблями. Тож рішення IKEA полегшує процес підбору та підвищує ймовірність того, що споживачі вгадають із покупкою та будуть нею задоволені.
Приклад Pinterest
Соцмережа Pinterest — одна з платформ, де бренди активно використовують AR- та VR-технології. Наприклад, користувачі можуть віртуально приміряти різні косметичні продукти, такі як помади та тіні для повік, використовуючи камеру свого мобільного пристрою.
Технології для примірки в реальному часі також використовують бренди товарів для дому, меблів та одягу, які представлені на Pinterest.
Гейміфікація
Для того, щоб розбавити рутинний досвід користувача, дизайнери все більше й більше занурюються в тему гейміфікації своїх інтерфейсів. Динамічні програми лояльності з лічильниками досягнень, предмети колекціонування та міні-ігри — усе тренди UX/UI дизайну у 2024 році. Вони можуть збільшити залучення користувача в продукт, забезпечити лояльність до продукту та полегшувати виконання цільової дії.
Кейс Promodo x Telemart
Для залучення нових та поточних користувачів, ми запропонували клієнту Telemart розбробити гейміфіковану активність під назвою Battle Pass. За основу взяли ігрові механіки від компанії Supercell та Wargaming, а саме систему лутбоксів за виконання певних квестів/дій з Telemart.
Юзери за певні дії (наприклад, підписка на соцмережі, пошук багу на сайті, відгук, купівлю акційного товару тощо) отримували віртуальну валюту під назвою Телекойн. Вони могли витрачати її на купівлю бокса/ящика, з якого з певним шансом випадали подарунки — від донату в 10 грн на фонд Повернись Живим до відеокарти.
Кожен Battle Pass приурочений певній події протягом року (Новий рік, Геловін, початок літа тощо. Наприклад, зимовий івент мав наступну історію: Допоможи Санті забрати награбоване!
Також на цю тему:
- SMM-тренди для бізнесу 2024-2025: аналіз та прогнози фахівців Promodo
- Брендинг, власна айдентика та логотипи: у чому різниця?
- Customer Journey Map: як бізнесу розумно інвестувати у клієнтський досвід
- Censydiam: інструмент для вивчення мотивації споживачів і побудови позиціонування
- Гейміфікація, персоналізація та автоматизація: тренди retention-маркетингу 2024
Також на цю тему:
на розсилку
