Как использовать UX-UI-тренды в 2022 и надо ли

Всем привет! Мы — Сергей Шило и Денис Рябоштанов — Lead UX/UI Designers в LeverX Group, группе компаний, в состав которой входят LeverX и Emerline. За свой многолетний опыт мы поработали с разными методиками, инструментами и технологиями, и пришли к главному выводу: польза от трендов в UX/UI-дизайне сомнительна.

Почему? На этот вопрос мы ответим ниже, а также детально рассмотрим приемы и технологии, на которые сегодня активно вешают ярлык трендовости.

О трендах в общем и полезных ориентирах для дизайнеров

Изучая различные подборки и списки «трендов» современного UX/UI-дизайна, мы сделали вывод, что их можно разделить на три основные категории:

1. Дизайн-тренды, которые выделяют один параметр из системы или философии дизайна и часто стимулируют его бездумное использование среди новичков и «не-дизайнеров». Проблема здесь — в отсутствии понимания, зачем создан этот параметр, как он может улучшить дизайн, в каком контексте его лучше применять и какой целевой аудитории (ЦА) он «зайдет».

Пример глассморфизма, использование которого в данном контексте вызывает вопросы.

2. Тренды для Dribbble, применять которые на реальных проектах вы вряд ли будете. Причин для этого — уйма. Например, в реальном интерфейсе прием не работает или работает некорректно; итоговый интерфейс не соответствует стандартам доступности. Или использование тех или иных приемов может быть просто невыгодным.

3. Тренды доступных технологий, когда ранее недосягаемая технология вдруг стала доступной для широких масс и по этой причине получает статус трендовой.

Поэтому польза от статей о трендах для людей, которые работают в сфере UX/UI-дизайна, сомнительна: вы либо не используете некоторые из них, либо, если используете, регулярно сталкиваетесь с этими приемами и подходами в своей повседневной работе.

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

Мы попытались сделать стандартное перечисление дизайн-трендов максимально полезным с точки зрения информации, подкрепив ее ссылками на различные ресурсы. Надеемся, это позволит вам получить корректную картину происходящего (то, как ее видим мы, исходя из нашего профессионального опыта).

#1. Визуализация данных

Вряд ли это можно назвать трендом. Создание удобной и репрезентативной визуализации данных — одна из базовых задач UX/UI-дизайнера.

Глубже погрузиться в тему нестандартных решений в контексте визуализации данных можно с помощью книги Эдварда Тафти «Представление информации». Да, написал он ее в далеком 1990 году, однако она дает понимание фундаментальности вопроса и знакомит с вариативностью решений на примере разных эпох и стран.

Из книги Э.Тафти «Представление информации»: Келлом Томлинсон «Искусство танца в текстах и картинках», Лондон, 1735

Часто в подборках трендов для удобства визуализации данных советуют «избавляться от лишнего». Нам кажется, в данном случае авторы говорят о таком базовом параметре интерфейса как информативность, одним из ключевых принципов которого является «удаление лишнего».

Подробнее об этом можно прочесть в книге Ильи Бирмана «Пользовательский интерфейс» (обязательна к прочтению всем начинающим дизайнерам и не только).

Из книги «Пользовательский интерфейс» Ильи Бирмана

#2. Глассморфизм

Действительно популярный прием, для которого характерны полупрозрачная подложка и размытие элементов под ней. Его сегодня называют новым стандартом, однако его популярность просто объяснить: глассморфизм используют такие гиганты, как Apple и Microsoft.

Он позволяет:

  • сделать подложку накладного (плавающего) элемента контрастной по отношению к содержимому плоскости, на которой он расположен, даже если цвет этой плоскости неоднородный и/или динамичный;
  • оставлять содержимое внутри плавающего элемента контрастным и хорошо считываемым при корректном подборе степени прозрачности и уровня размытия подложки.

Пример использования глассморфизма в интерфейсе

Этот прием достаточно эстетичен и универсален. Схожего функционального эффекта можно добиться отделением объекта тенью, различным цветом бордера и заливки подложки и их комбинацией.

Как использовать глассморфизм — вопрос контекста, целей такого дизайна и ЦА. Например, Apple в своей программе Finder использует этот эффект только в левом меню, вся основная функционально-нагруженная часть окна находится на непрозрачной подложке однородного цвета.

MacOS, интерфейс программы Finder

#3. Dark Mode

Темная тема была трендовым явлением в прошлом году, однако, похоже, ее популярность пошла на убыль. Да и популярной она была преимущественно благодаря Dribbble.

Dribbble-пост из аккаунта UI8

Да, этот тренд применим на реальных проектах, но не везде и не всегда. Здесь тоже необходимо отталкиваться от нужд конечного пользователя: если проект предполагает чтение больших текстовых материалов или постоянное сканирование большого объема числовых данных (например, решение для отслеживания рынка акций), и необходимо снизить нагрузку на глаза пользователя в условиях низкой освещенности, использование темной темы полностью оправдано. Более того, в таких продуктах она становится необходимой функцией.

Темная тема в Webull и Medium

Однако примеров проектов, где бы темная тема была острой необходимостью, немного. Чаще всего это «nice to have» функция, денег на которую у большинства стартапов и молодых компаний нет.

Поэтому отталкивайтесь от нужд конечного пользователя и бизнеса и учитывайте текущее состояние рынка.

#4. 3D-модели и виртуальная/дополненная реальность

Нам кажется, 3D-модели — хороший пример тренда доступных технологий. Сегодня появляются все новые и новые плагины для Figma, многие UX/UI-дизайнеры постигают азы Blender, а такие приложения, как Spline, выводят доступность 3D-объектов и -анимации на новый уровень. Это одна из причин, почему они все чаще сегодня встречаются в интерфейсах.

Проморолик приложения Spline

Если говорить о виртуальной реальности (VR), она не выглядит как тренд этого года. Различные VR-устройства не показывают ожидаемых продаж, поэтому ПО и игры делать для них сейчас не торопятся. Но перспективным кажется направление метавселенных. Сейчас с технологией блокчейн у них есть все, что нужно для создания виртуальной оболочки для самых различных онлайн-сервисов в том формате, который кажется более близким новому поколению.

Наша команда активно работает в направлении 3D-дизайна. Мы уже используем его в приложении GoDog, где есть режим дополненной реальности. Он позволяет пользователю взаимодействовать с 3D-моделями собаки и ее владельца. Также в нашем аккаунте на Dribbble можно найти примеры 3D-иллюстраций, созданных нашим 3D-специалистом.

Dribbble-пост из аккаунта LeverX Group

#5. Дизайн-системы и стайлгайды

Говоря о дизайн-системах, хочется сперва внести ясность в терминологию. Дизайн система — это полноценный набор стандартов дизайна, описание принципа их работы, документация кода. Стайлгайд или библиотека компонентов — это неотъемлемая часть дизайн-системы, но только часть.

Почему мы так заостряем на этом внимание? Потому что когда говорят о дизайн-системе как тренде, часто имеют в виду библиотеку компонентов или стайлгайд, удобство создания и возможности которых действительно увеличились.

Идеологическая база Material. Источник

Многие дизайнеры, привыкнув к удобству библиотек компонентов, уже не представляют свою работу без них даже на мелких проектах. Такая тенденция ведет нас к качественной систематизации разработки продукта.

Однако если мы говорим о дизайн-системах с продуманной концепцией/идеологией, описанными паттернами поведения и использования в разных условиях, документациями кода и т. д., становится очевидно: большинство продуктов не имеют таких систем.

И не факт, что они им нужны. Сегодня поддержка и развитие дизайн-системы — трудоемкий процесс, который может быть совершенно неоправдан для среднего, а иногда и большого бизнеса. Но с постоянным развитием ПО для дизайнеров и Frontend-разработчиков, возможно, в будущем даже небольшие решения смогут себе их позволить.

#6. Scrollytelling и scroll-hijacking

Есть тонкая грань между аккуратной кастомизацией поведения сайта при скролле и так называемым scroll-hijacking. Первый подход активно набирает обороты как дополнение к привычному поведению сайта/приложения. Хороший пример — магазин Google: здесь часто товары презентуются через историю.

Источник

Вторая технология сегодня умирает, так как пользователи обычно не ожидают такого поведения сайта или приложения, что создает проблемы с восприятием контента. Помимо этого, большинство scroll-hijacking-решений являются дорогими для реализации и поддержки, что подводит нас к нецелесообразности применения этой технологии.

Пример Scroll-hijacking решения от Reputation Squad. Источник

#7. Динамика и анимация

Динамика и анимация становятся нормой: многие решения не только используют иллюстрации, но и оживляют их с помощью анимации.

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

Анимация загрузки сайта компании Emerline, которая входит в состав LeverX Group

Есть много исследований, которые доказывают: для людей с расстройством внимания (таких по разным данным от 4% населения в узком и до 20% в расширенном толковании) даже микроанимация, например, сдвиг лейбла при нажатии на поле для ввода, может создавать проблемы.

Узнать больше по этой теме можно здесь:

#8. Неоморфизм

Dribbble-пост из аккаунта harwen

Неоморфизм оказался трендом одного дня и с самого начала был приемом для Dribbble. Это подтверждают и неубедительные результаты его использования в средне- и высоконагруженных интерфейсах как с эстетической и информативной точки зрения, так и с точки зрения доступности (достаточной различимости объектов).

Более подробно о том, почему у неоморфизма нет будущего, мы уже рассказывали в материале на Medium.

Советуем обратить внимание

Здесь мы собрали перспективные тренды индустрии, которые, на наш взгляд, будут популярны в 2022 году.

Персонализация

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

Пример того, как Netflix адаптирует обложки на основе предпочтений пользователя. Источник

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

Неотъемлемой частью этого глобального тренда является визуальный дизайн. Переключение системы на Dark Mode по расписанию, смена резких цветов на более мягкие на iOS при включении Night Shift и возможность настраивать интерфейс в Jira под нужды компании — все это примеры персонализации в визуальном дизайне.

Большой шаг в этом направлении в 2021 году сделала компания Google, выпустив новую версию Material UI для Android-устройств. В ней основной функцией стала именно персонализация интерфейса.

Промо ролик Material You. Источник

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

Принятие UX-исследования

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

Воркшоп с клиентом в LeverX Group. Исследование опыта пользователей и построение дорожной карты проекта

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

Нам кажется показательным то, что сегодня клиенты все чаще сами приходят с запросом на UX-исследование, и мы верим, что оно станет общепринятым и неотъемлемым этапом работы на проекте.

На что опираться при выборе методик и подходов

Дизайнеру в первую очередь следует руководствоваться потребностями конечных пользователей. Вам необходимо понимать вашу ЦА, ее болевые точки, цели и преимущества, которые она хочет получить. Также важно учитывать цели бизнеса и технические возможности. Как правило, на пересечении этих факторов и получается хороший продукт.

Например, мы в LeverX Group придерживаемся методологии дизайн-мышления и в тесном сотрудничестве с компанией SAP создали на базе одного из наших офисов The AppHaus — креативное пространство, где конечные пользователи, клиенты, представители SAP и наши партнеры могут вместе работать над решениями тех или иных вопросов.

И в качестве заключения хотим сказать: бездумное следование трендам никогда не принесет пользы. Всегда помните один из «10 принципов хорошего дизайна» Дитера Рамса: хороший дизайн — вне времени.

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось15
До обраногоВ обраному2
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

стаття корисна, але нічого нового. принцип «золотої середини» вічний.

А вот эта невменяемая музыка, которую не понятно где отключить — это тоже современный UX тренд?

Для тех, кто все еще хочет прочесть статью, видео отключается в пункте #4.

Спасибо за обратную связь, во время предварительного тестирования, по прямой ссылке, такой проблемы не выявили, сейчас поправили. Приносим извинения за неудобства.

Юикс исследования — это часть процесса проенктирования, продавать услугу без исследований — нонсенс, это как продавать лечение без сбора и изучения анлизов.

Темная тема была трендовым явлением в прошлом году, однако, похоже, ее популярность пошла на убыль. Да и популярной она была преимущественно благодаря Dribbble

Ні
Вона популярна, бо від неї очі не вилазять

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

У ютуба, фб і тп також персоналізація
І обдві вищеназвані платформи можуть за один неправильний клік зробити з людини фріка, який вірить в пласку землю чи pro-plague

На что опираться при выборе методик и подходов

Bootstrap

Когда за 5 лет меняется всё, а за 30 лет — ничего. Я один из олдфагов, у которого до сих пор на ноуте интерфейс 98 винды, и ≈1000 приложений на все случаи жизни.

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

За музику\відео яке автоматично відтворюється при переході на сторінку треба бити по пальцям і шеймити.

Підписатись на коментарі