UXPUB

UXPUB - сообщество из 2,337 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Тренды UI / UX-дизайна на 2022 год. Скроллтеллинг, визаулизация данных, анимация и 3D
Редакция
Редакция

Опубликовано

Тренды UI / UX-дизайна на 2022 год. Скроллтеллинг, визаулизация данных, анимация и 3D

Был ли 2021 год лучше 2020 года? Да, если мы говорим о UI и UX дизайне. Были созданы новые удивительные сайты и приложения, выпущен новый софт для графических дизайнеров, казалось, творчество било фонтаном.

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

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

Бессмертный мем, иллюстрирующий последние пару лет

А что насчет трендов UX / UI дизайна на 2022 год? Глядя на то, как обстоят дела сейчас, мы уже можем предсказать большинство предстоящих тенденций, как мы это сделали (заметьте, довольно точно) на 2021 год. Тренды текущего года, конечно же, сохранятся и на следующий. Если вы хотите с ними познакомиться поближе, рекомендуем нашу прошлогоднюю статью. Также не пропустите нашу статью с прогнозом главных трендов в области мобильного UI-дизайна на 2022 год.

В этой статье вы узнаете:

  • Почему вы, вероятно, потеряете работу 3D-дизайнера, если не подготовитесь к сумасшедшему соревнованию
  • Как дизайнеры могут сделать сложные данные интересными даже для неподготовленных зрителей
  • Сколько новых потенциальных клиентов вы упустили из-за того, что ваш сайт не оптимизирован для мобильных устройств
  • Как скроллтеллинг будет править миром и увеличит конверсию в 2022 году (если вы не знаете, что это такое, см. ниже)

Скроллинг мертв. Да здравствует, скроллтеллинг

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

Газета The NY Times была одной из первых, кто использовал скроллтеллинг в своей статье «Снегопад»

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

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

Допустим, вы хотите пойти в спортзал. Вы найдете сайт местного тренажерного зала. Откройте его, и вы увидите слоганы вроде: «Приведи себя в форму вместе с нами!» – чрезвычайно интересно и оригинально, кстати, прокрутите вниз, чтобы найти биографию команды тренеров, фитнес-ценности, миссию... Это настолько распространенный сценарий, что пользователи больше не обращают на него внимание.

Мне нужно просмотреть 4 экрана, чтобы получить нужную информацию – это отстой

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

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

Потрясающий скроллтеллинг от IAmBinadam

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

А что насчет мобильных приложений? Приложение для знакомств Pure, создало историю, которую я бы назвал «таптеллинг» (она активируется, когда вы тапаете и открываете приложение в первый раз):

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

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

«Я борющийся актер, но если меня спросит незнакомец, что я делаю

Обычно я лгу, потому что мне нужно пройти через многое».

— Песня «Я бухгалтер» Рокки Патерра.

Как сделать достойный корпоративный сайт в 2022 году? Вы не хотите говорить пользователям, что вы «признанный лидер в ___, один из лучших в этой области». Это стандартное рекламное выражение не несет никакой конкретики.

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

Shakuro упростил данные об изменениях фондового рынка

Визуализация данных помогает передать правильное сообщение в увлекательной форме. Это также напрямую связано со скроллингом. Вот как IAmBinadam показывает данные:

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

Разные уровни данных разного размера, чтобы пользователи знали, куда смотреть в первую очередь

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

Некоторые графики на первый взгляд даже не выглядят как графики… Это делает их еще более яркими

Также существует такое явление, как похмелье от COVID. Covid оказывает долгосрочное влияние на компании и их сотрудников. По данным Управления национальной статистики Великобритании, в 2018 году средний балл стресса и тревожности составил около 2,7 из 10. С тех пор, как появился Covid, оценки выросли до 4,0 из 10 и редко опускались ниже этого уровня. Также из-за пандемии рабочая нагрузка за последние 2 года увеличилась на 4 часа.

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

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

Иллюстрация Mona Chalabi

Вот несколько вариантов, в которых мы рекомендуем представлять данные:

  • Диаграммы и графики
  • Иллюстрации (в том числе иллюстрации с рукописными фразами)
  • Статичная инфографика
  • Интерактивная инфографика

Иллюстрация Ink Factory

Как сделать так, чтобы инфографика выглядела хорошо?

Отличный график или любая другая форма визуализации данных должна иметь набор функций, описанных в книге «Визуальном отображении количественной информации» Эдварда Тафте. Тафте объясняет 3 принципа подлинного повествования с помощью диаграмм.

  • Соотношение графических элементов, отображающих данные, к общему количеству элементов на графике должно стремиться к единице. Говоря простым языком, не стоит увлекаться украшением графиков. Удалите. Ненужные. Вещи. ХОРОШО?

График от Hootsuite

  1. Используйте максимум графического пространства. То есть вам нужно упорядочить данные плотно и компактно.

График от Hootsuite

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

Мобильные приложения переоценены?

По данным We Are Social, в 2021 году мобильными телефонами будут пользоваться 5,22 миллиарда человек – это примерно 66% населения мира. С января 2020 года количество уникальных мобильных пользователей выросло на 1,8% (93 миллиона), а общее количество мобильных подключений увеличилось на 72 миллиона (0,9%) и к началу 2021 года достигло 8,02 миллиарда.

Леди Гага предпочитает мобильные телефоны стационарным

Количество пользователей социальных сетей за последний год увеличилось более чем на 13%. К началу 2021 года в социальных сетях зарегистрировалось почти полмиллиарда новых пользователей. По данным App Annie, пользователи Android проводят на своих телефонах более 4 часов в день. В 2020 году пользователи Android потратили более 3,5 триллиона часов на веб-серфинг.

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

  • Пользователи заходят на ваш сайт со своих мобильных устройств

Это важные данные, о которых вам следует знать. Чем дольше клиент с вами, тем больше у вас возможностей привлечь его, узнать об его привычках и дать ему, что он хочет.

  • Вам нужно сделать свои внутренние бизнес-процессы более эффективными

Если вы хотите повысить продуктивность своих сотрудников, улучшить рабочий процесс или увеличить прибыль, создайте мобильное приложение, которое поможет вам управлять бизнес-процессами. Да, ваше личное крутое маленькое внутреннее приложение.

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

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

НО…

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

  • Ваши конкуренты используют мобильные приложения

Важно понимать, чем занимаются конкуренты, есть ли у них мобильные приложения, что они могут делать и действительно ли они так полезны для покупателя. Посмотрите статистику в App Store и Google Play.

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

  • Повторные продажи

Приложение помогает удерживать тех, кто привык покупать у вас. Вы решили запустить акцию для постоянных клиентов? Отправьте им push-уведомление с призывом к действию. Планируете рождественскую распродажу? Дайте пользователям промокод со скидкой. Чем привлекательнее предложение в нужный момент, тем выше вероятность, что человек его купит.

Компании, предоставляющие услуги такси, имеют повторные продажи, и им обязательно нужно иметь приложение

  • У вас есть система лояльности

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

Мобильное приложение или мобильная версия сайта?

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

Отчасти это связано с появлением отзывчивого дизайна, который позволяет настроить сайт под экран того устройства, на котором он открыт. Что касается приложений, то их необходимо поддерживать и писать для многих мобильных платформ: Android, IOS, Windows и т. д.

Есть еще один небольшой тренд, который сохранится в 2022 году: приложения стали более похожими друг на друга. При этом они сохраняют некоторую степень уникальности.

Некоторые дизайнеры думают, что «веб-опыт на основе фронт-энда» – отличная возможность на 2022 год. Мы можем только согласиться!

Мать всея 3D

Мы не ставили его на первое место, потому что мир дизайнеров давно сошел с ума от 3D графики и анимации.

Cardi B рифмуется с 3D

Тренд 3D существует уже 4 года и в ближайшее время никуда не денется. Более того, мы прогнозируем, что 3D-графика станет более разнообразной и инклюзивной.

За последние несколько лет 3D-искусство и анимация были представлены на различных медиаресурсах в многочисленных обзорах трендов UI-дизайна. Это означает, что все больше и больше дизайнеров интегрируют их в свои сайты и целевые страницы.

3D, безусловно, заслуживает того, чтобы стать одной из главных тенденций и прогнозов на 2022 год, поскольку реалистичные 3D-формы в сочетании с движением всегда поражают по сравнению с классической анимацией.

Анимация целевой страницы от Conzeptzilla

Вот что мы говорили в статье о главных трендах мобильных интерфейсов на 2022 год в отношении 3D:

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

Многие дизайнеры стилизовали 3D-объекты, органично разместив их в 2D-пространстве. Это позволяет создавать более интересные композиции, но также служит отличным рабочим подходом с большим потенциалом.

Украинский правительственный сайт имитирует 3D руки из Матрицы

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

Метавселенные

- Facebook, ты готов к школе?

- Мама! Я сказал тебе, называй меня Meta!!

Дело в том, что логотип Meta не 2D и не 3D. Или и то, и другое? Его подвергли довольно жесткой критике, потому что его можно почти назвать стоковым изображением – настолько он простой. Это лента Мебиуса и кошка Шредингера наступающего 2022 года.

Варианты логотипов Meta в 3D

Вероятно, вам также стоит увидеть его версию для Reddit.

Balenciaga x The Simpsons: 2D наносит ответный удар

Модный дом Balenciaga в сотрудничестве с создателями The Simpsons представил новый эпизод мультсериала на Неделе моды в Париже, чтобы показать свою новую коллекцию весна-лето 2022:

В этом эпизоде ​​классические 2D-Симпсоны получают новые детали, нарисованные в 3D. Конечно, одно из них – платье. Эпизод вызвал неоднозначную критику со стороны фанатов сериала, но сообщение Balenciaga было одним из самых громких в этом году.

Анимация

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

Сколько анимации вы хотите? Да.

Анимация – важный тренд веб-дизайна на 2022 год. В следующем году без нее ваш продукт, скорее всего, будет выглядеть незаконченным и безвкусным. Все большую популярность набирает смешанный стиль анимации: сочетание покадровой анимации и 3D, 2D и 3D-анимации. Дизайнеры делают это для получения необычных стилистических решений, а также для улучшения качества конечного продукта.

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

По мере роста числа профессионалов в этой области растут и возможности для реализации новых идей.

Как использовать веб-анимацию в 2022 году?

  • Рассказать историю

Анимация может передать определенное сообщение, создав эмоциональную связь между интерфейсом и пользователем.

Анимация загрузки от Yoichi Kobayashi

  • Сделать загрузку интересной

Клиенты не любят ждать. За исключением тех случаев, когда экран загрузки веселый. Анимация с процентами не только развлекает пользователя, но и сообщает ему, сколько времени потребуется на загрузку страницы. Не любите проценты? Используйте индикатор выполнения. Или что-нибудь еще, чтобы показать течение времени.

Анимация загрузки с использованием векторных часов

  • Очаровывать эффектами курсора

Пользователь смотрит точно в то место, где стоит курсор. Заставьте его изучить сайт, добавив умную интерактивную анимацию, которая реагирует на этот курсор. Подобные эффекты были безумно популярны в 2000-е годы. Как известно, мода повторяется каждые 20 лет.

Анимация наведения курсора

  • Посеять хаос с помощью кинетической типографики

Вы когда-нибудь думали о том, чтобы заставить буквы танцевать?

Klim

Кстати о буквах… Вы знали, что есть номинации на Эмми за дизайн титульного кадра фильма? Посмотрите потрясающую анимацию титульного кадра сериала «Ход королевы» (номинант на премию 2021 года):

Анимированные иллюстрации для придания характера

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

Анимация истории лошадиных сил от BMW

Такие работы часто используются в 2-х случаях:

  • Для поясняющих видеороликов
  • В качестве рекламы

Иллюстрация Creative X

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

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

Микровзаимодействия, макро-влияние

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

Очень милый эффект наведения курсора от Awwwards

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

Важно достичь гармонии в элементах, а не разбрасывать внимание во все стороны монитора. Значительную часть микровзаимодействий составляют цвета. Они придают смысл элементам интерфейса. Лучше вспомните, как использовать холодные и теплые цветовые палитры до наступления 2022 года.

Анимированный призыв к действию

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

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

Анимированные логотипы

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

Анимированный логотип Toridori

Есть ли у анимированных логотипов какие-то маркетинговые преимущества? Да, вот список:

  • Они привлекают внимание. Это означает, что они способствуют повышению узнаваемости бренда.
  • Они помогают улучшить SEO. Так уж получилось, что Googleотдает предпочтение динамическому контенту, а страницы с движущейся графикой быстрее привлекают аудиторию.
  • Они хорошо смотрятся на мобильных устройствах. Броская анимация выглядит интереснее статичного логотипа.
  • Главное, что они демонстрируют историю. Идея статичного логотипа развивается в анимации. Благодаря этому за несколько секунд вы сможете показать не только миссию бренда, но и его ценности!

Логотип компании по производству стиральных машин

Вы можете анимировать существующий логотип – дизайнеры могут переосмыслить его динамику на основе исходных файлов. Вы можете легко сделать анимированный логотип с помощью шрифтов:

Анимированные шрифты от Shabello, Bobby Voeten

Вывод

Чего ждать в 2022 году? Множество интересных новых брендов, сайтов и приложений!

Интересно узнать, как цифровой дизайн со временем улучшился? Эти статьи о трендах UI / UX дизайна могут пригодиться: 2021, 2020, 2019.

Помните, что дизайн всегда меняется. Но суть дизайна остается прежней. Если вы не в состоянии понять, что это такое, никакая статья о трендах не поможет вам удержаться на плаву. Если вы не знаете, что делать, свяжитесь с нами – и пусть профессионалы подготовят ваш бренд к 2022 году.

P.S. А вот и самая старая кошка в мире, которую мы обещали. Ей 34 года (160 человеческих лет):


Перевод статьи uxplanet.org

Обсуждение (0)