Тренды UI/UX-дизайна 2024

как создавать вовлекающие интерфейсы

Понятность и читаемость интерфейса — два главных правила для любого UI/UX-дизайна, отвечающего за пользовательский опыт. Но логичное расположение инфоблоков, комфортный шрифт и наличие контекста — не всё, чем должен обладать хороший современный интерфейс. Как и в любой другой динамично развивающейся сфере, в UI/UX-дизайне появляются тенденции, за которыми важно следить, чтобы побуждать пользователей вновь и вновь возвращаться к вашему продукту и рекомендовать его другим.

Тренды UI/UX-дизайна 2024
Денис Шокин
руководитель отдела реализации цифровых проектов СберМаркетинга
Елена Ковалева
ведущий UX/UI-дизайнер СберМаркетинга

Тренд №1. Эмоциональность

Источник: vk.com/app51821221
Источник: vk.com/app51821221

Раньше эмоциональное воздействие на пользователей через интерфейс было вершиной пирамиды, основу которой составляли удобство и понятность. Сегодня же в условиях высочайшей конкуренции в бизнес-среде устойчивое позитивное впечатление от взаимодействия с платформой стало одной из важнейших задач сайта или приложения. Интерфейс должен помогать запоминать продукт, вовлекать в коммуникацию и стимулировать пользователя возвращаться. Для выполнения этих задач дизайнеры используют соответствующие цвета, принимая во внимание культурные особенности своего региона. А ещё — маскотов. Графические персонажи помогают быстро создать эмоциональную связь с брендом и его продукцией.

Кейс: В рамках продвижения услуги открытия брокерского счёта Сбера команда СберМаркетинга запустила интерактив «Идеальная пара», по механике напоминающий популярное приложение для знакомств. Участники просматривали привлекательные профили и описания инвестиционных продуктов, выбирая понравившиеся. После трёх взаимных мэтчей пользователь попадал на лендинг с подарочным мерчем и call-to-action-кнопкой, ведущей на сайт банка. Таким образом, сочетание геймификации с призами, яркими образами и цветовой палитрой клиента привлекли большое количество пользователей и позволили нативно прорекламировать продукт бренда.

Тренд №2. Геймификация и игровые интерактивы

Источник: ai.sbergraduate.ru
Источник: ai.sbergraduate.ru

Интеграция игровых элементов в UX — эффективный метод вовлечь и установить прочную связь с аудиторией. Геймификация интерфейса привлекает новых пользователей и удерживает существующих, помогает в преодолении негативных эмоций, связанных или не связанных с продуктом, повышает лояльность к бренду и мотивирует продолжать пользование продуктами и сервисами. Однако разработчикам важно помнить, что интерактивы и геймификация должны быть для пользователей добровольными и приносить реальные награды/чувство удовлетворённости, иначе ощущение навязчивости и отсутствие поощрений может вызвать неприятные эмоции.

Кейс: Весной 2024 года Сбер и СберМаркетинг запустили HR-кампанию с использованием AI-симулятора, чтобы найти таланты в студенческой среде и привлечь их внимание к программе оплачиваемых стажировок Sberseasons. Студенты получили возможность самостоятельно в три шага обучить одну из двух нейросетей — сверхмилую или сверхразумную. Целью обучения ИИ было найти секретный промокод и указать его в анкете, что давало право пропустить первичный этап конкурса и сразу приступить к тестированию.

Тренд №3. Нейросети

Источник: sberbusiness.live/specprojects/karta_zhelani
Источник: sberbusiness.live/specprojects/karta_zhelani

Искусственный интеллект помогает автоматизировать некоторые рутинные процессы, среди которых — подготовка концепт-макетов, проверка гипотезы, анализ кода. Применение нейросетей позволяет дизайнерам генерировать иллюстрации, создавая более вариативный контент для интерфейса и ускоряя производство.

Кейс: В рамках кампании по продвижению бизнес-карты Сбера UX-дизайнеры СберМаркетинга создали веб-страницу продукта, используя концепцию целеполагающего инструмента «карта желаний» и генеративные нейросети для производства иллюстраций к ней. В итоге на странице продукта появился раздел «Держите мечты под рукой», где каждый пользователь может составить свою собственную карту желаний из подходящих визуализаций, а затем скачать её на ПК или смартфон.

Тренд №4. Человекоцентричность

Источник: sberbank-insurance.ru/strahovka-po-chasam#faq
Источник: sberbank-insurance.ru/strahovka-po-chasam#faq

Использовать концепцию UX, в основе которой удобство пользователя, — самая выигрышная стратегия, которой придерживается компания СберМаркетинг. Сложность решений UI/UX-дизайна в том, что они должны закрывать потребности и пользователей, и бизнеса одновременно, при этом сталкиваясь с техническими ограничениями. Часто возникают противоречия, и проектировщикам нужно выбирать чью-то сторону — бизнеса или пользователя. Некоторые компании прибегают к «тёмным паттернам» в дизайне, неочевидным на первый взгляд манипуляциям, в числе которых ложная срочность, навязывание, мелкий, неразборчивый шрифт, спрятанная кнопка удаления товара из корзины. Бизнес, возможно, выигрывает от этого в моменте. Но в перспективе теряет доверие клиентов, которые уходят к конкурентам, лучше понимающим их боли. Этих ошибок можно избежать, если оценивать интерфейс глазами пользователя и приоритезировать его удобство и комфорт.

Кейс: Пример продукта, созданного с максимальной персонализацией и заботой о клиенте, — «Страхование по часам» от СберСтрахования жизни. Услуга позволяет самостоятельно выбрать время для страховой защиты и управлять им в зависимости от обстоятельств. Команда СберМаркетинга разработала страницу продукта, на которой подробно и просто разъяснены условия программы, тарифы, инструкция, ответы на частые вопросы, а также веб-приложение с возможностью отслеживания страховых часов и инструкциями, которые выполнены в формате историй с визуализацией. В дополнение разработчики поместили на страницу информационно-развлекательный тест с занимательными фактами, чтобы пользователю было легче сориентироваться и выбрать в своём графике часы, когда полис страхования может действительно понадобиться.

Тренд №5. Дополненная реальность и metaverse

Источник: sbermarketing.digitalavatars.ru
Источник: sbermarketing.digitalavatars.ru

Благодаря развитию и интеграции технологий у интерфейсов появляется глубина — пользователи не просто смотрят на экраны, а оказываются в другом мире в виде цифровых трёхмерных двойников себя или кастомизированных аватаров — работают, общаются, играют и делают покупки. Новый подход превратит виртуальную реальность в бесконечную сеть впечатлений, в которой каждому бренду также придётся побороться за внимание своей аудитории.

Кейс: Один из кейсов, воплощающих принципы коммуникации в виртуальной реальности через метатехнологии, — диалоговая страница, где каждый пользователь может пообщаться в реальном времени, задать интересующие вопросы и даже сыграть в мини-игру с тремя цифровыми аватарами представителей группы компаний Сбер: Максима Козлова, руководителя центра технологий метаверса Сбера, Станислава Андреева, основателя и генерального директора СберМаркетинга, а также бизнес-ассистента Арины. Коммуницировать с диджитал-копиями экспертов можно голосом или с помощью текстового чата.

Тренд №6. Концентрация внимания

Источник: sberbank.com/promo/zpif
Источник: sberbank.com/promo/zpif

Из-за информационной перегруженности пространства выигрывают интерфейсы, следующие правилу «один экран — одна мысль». Подчеркнуть УТП, выделить крупным шрифтом или цветом главное, упаковать исчерпывающую информацию в лаконичный и ёмкий текст, который не нужно скроллить, — такой подход к размещению контента позволяет быстрее и точнее донести ключевую идею до конечного пользователя и побудить его совершить желаемое действие, не рассеивая внимание на множество мелких деталей.

Кейс: Именно этим принципом команда руководствовалась при создании промостраницы СберИнвестиций с предложением закрытых паевых инвестиционных фондов (ЗПИФ). Сложный финансовый продукт требует максимальной сосредоточенности пользователя на каждом из этапов ознакомления и прозрачных ответов на важные вопросы, среди которых: зачем инвестировать в коммерческую недвижимость (КН)? Как с помощью фонда стать совладельцем КН? как это работает и в чём удобство? Каждому из этих вопросов дизайнеры посвятили отдельный блок, снабдив его чётким и ясным ответом, подкреплённым цифрами и данными. Чтобы информация не смешивалась и смысл не размывался, блоки разграничили фоновым цветом, который не перетягивает внимание на себя, но позволяет сфокусироваться на смысловой части сообщения.

Подписывайтесь на наш Telegram-канал, чтобы быть в курсе важных новостей маркетинга, следить за лучшими практиками и получать советы от топовых экспертов рынка. А ещё сейчас можно поучаствовать в конкурсе и выиграть ценные призы.

22
Начать дискуссию