{"id":14290,"url":"\/distributions\/14290\/click?bit=1&hash=bece6ae8cf715298895ba844b6416416882fe02c5d18dab2837319deacd2c478","title":"\u041a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u043d\u044c\u0448\u0435 \u0445\u043e\u0442\u044f\u0442 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0430\u0442\u044c \u0441 \u043c\u0430\u043b\u044b\u043c \u0431\u0438\u0437\u043d\u0435\u0441\u043e\u043c","buttonText":"","imageUuid":""}

Пять трендов 2021 года и одна вечная классика в UI/UX-дизайне

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

Продуктовая страница для Maserati MC20, которая вобрала в себя почти все тренды

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

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

1. Темный режим: самый часто упоминаемый тренд

Про темную тему пишет каждый. Причем который год подряд. В чем магия dark mode?

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

Темный интерфейс для оборудования микробиологической лаборатории

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

Как использовать

По нашим наблюдениям, есть два повода использовать темную тему в продукте:

1. Это действительно улучшает UX для интерфейсов с большим количеством данных. Например, для аналитических дашбордов, CRM-систем или интерфейса лабораторного оборудования.

2. Вы хотите не упустить тренд и знаете, что вашим пользователям нравится темная стилистика.

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

2. Анимации: теперь это не просто понты, а необходимость

Еще пару лет назад анимации и хорошего UX были антонимами. Моушн-элементы тормозили загрузку сайта, отвлекали все внимание на себя или их просто лепили не к месту.

Теперь же анимация — полноценный инструмент для управления вниманием пользователя, навигации и повышения конверсии.

Bike Shop Interaction by Den Klenkov

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

Как использовать

Продуктовая страница для Maserati MC20
  • Продемонстрировать товары со всех сторон
  • Помочь сориентироваться в сложной функциональности с большим количеством информации
  • Привлечь внимание к конверсионным элементам интерфейса: нужному разделу сайта, важной информации или форме обратной связи
  • Увлечь пользователя и дать ему «поиграться» с товаром через интерактивное взаимодействие: повертеть, поменять цвета и конфигурацию.
  • Доставить эстетическое удовольствие и дать пользователю «залипнуть на сайте».
  • В конце концов, хорошо отрисованая и сверстанная анимационная графика — это красиво.

3. Голосовые интерфейсы: похоже, Google был прав

Voice visual design by Gleb Kuznetsov

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

Развитию этого тренда способствует популярность голосовых помощников вроде Алисы, Siri, Алексы и умных колонок, таких как Яндекс.Станция.

Как использовать

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

Особенно актуально для ecommerce-отрасли: представьте, что пользователь сможет найти вас в поиске, выбрать товар и добавить в корзину через голосовой помощник, который будет работать как консультант.

Важно помнить: для большинства людей голосовые интерфейсы все еще не привычны, хоть это и удобно для других. Как быстро управление голосом станет привычным паттерном взаимодействия для большинства людей, зависит от разработчиков цифровых продуктов и того, насколько грамотно спроектирован Voice User Interface (VUI).

4. Иммерсивность: стираем грань между реальным миром и цифровыми девайсами

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

Пример иммерсивного дизайна — промосайт мебельного бренда Moooi.

Через тканевые текстуры и анимации компания демонстрирует новую коллекцию, которую не получилось презентовать офлайн из-за отмены мероприятия Milan’s Salone del Mobile.

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

Как использовать

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

5. 3D-реализм: тренд, рожденный VR-технологиями

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

3D-модель часов от TAG Heuer можно рассмотреть со всех сторон в мельчайших деталях

Особенно актуально для компаний, которые используют AR/VR-технологии в UX своих мобильных приложений или интернет-магазинов. Ведь разработка 3D-моделей стала гораздо дешевле, чем видеосъемка множества товаров с нескольких ракурсов.

Как использовать

Этот прием хорошо зайдет для e-commerce и m-commerce, особенно в сочетании с дополненной реальность. Он позволит покупателю рассмотреть товары со всех сторон и составить полное представление о покупке, не выходя из дома.

3D-визуализация продукта для CHILE20 collection by adidas Originals

Главное, не переусердствовать в создании реализма и помнить, что основная цель — совершение покупки, а не максимальная правдоподобность.

Главный тренд, который будет актуален всегда

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

Отсюда — главный тренд в UI/UX, который никогда не выйдет из моды: бизнес-подход и критическое мышление при разработке дизайна интерфейса.

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

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

0
16 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Илья Карбышев SEO бренд-медиа

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
LabO

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

Ответить
Развернуть ветку
Макс Мухарёв

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ol Ka
Анимации: теперь это не просто понты, а необходимость
Ответить
Развернуть ветку
Илья Карбышев SEO бренд-медиа

Истинно вам говорю, земля налетит на небесную ось!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Serge Sokolov

- В будущем году будут носить все узкое  и широкое.
- Мрак! 

Ответить
Развернуть ветку
Never Again

Я бы даже вынес главный тренд в начало статьи

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Решили  удержать интригу :) А вообще поддерживаем

Ответить
Развернуть ветку
Кирилл Олейник

Про иммерсивный дизайн, может не так банально, но Mooi на самом деле Moooi. 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

О, спасибо!

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

Ну, только на OLED-дисплеях, все таки

Ответить
Развернуть ветку
13 комментариев
Раскрывать всегда