Тренды UX & UI дизайна в 2020 году

ТОП 12 трендов UI/UX дизайна на 2020 год

I. Значимая ценность

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

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

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

Причина, по которой вы делаете что-то, будет важнее того, что вы делаете.

II. Ассиметрия и разделенный экран

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

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

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

III. Неброские градиенты

Gif_01

2018 год был годом синих и фиолетовых градиентов. 2019 год аналогично, но с более мягкими оттенками. Ожидаем увидеть больше разбавленных цветов в 2020 году.

IV. Гармоничные цвета

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

Gif_02

Animation от Zhenya Rynzhuk.

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

V. Смешанный опыт

Gif_03

Animation от Кофейная компания Allpress Culture

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

VI. Desveloper (Дизайнер разработчик в одном лице)

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

Эта дихотомия должна прекратиться в 2020 году, благодаря таким инструментам будущего, как Webflow. По сути, это визуальный инструмент, который позволяет вам создавать все, что угодно, до тех пор, пока это можно сделать с помощью HTML и CSS. Каждое движение пикселя является изменением кода, что делает этот подход идеальным способом для дизайнеров начать кодить.

Gif_04

Веб-сайт электронной коммерции, сделанный в Webflow. Дизайн Ryan Morrison.

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

VII. Пустое пространство

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

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

Gig_05

Домашняя страница творческой студии Hello Monday с большим количеством пустого пространства.

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

VIII. Тяжелые изображения

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

Потрясающая презентация / целевая страница Apple AirPods Pro.

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

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

IX. Перекрывающаяся типографика

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

Gif_06

На домашней странице Orkestra заголовки перекрывают изображения

X. Полноэкранные визуальные эффекты

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

Домашняя страница сайта Brand Studio– это глазок в безумный мир.

XI. Непрерывный UX

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

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

А что, если бы, сайту для отправки покупки было нужно только ваше намерение совершить покупку. Одна кнопка для управления всем процессом. Мобильный телефон использует этот прием, интегрируя в платежи простые жесты и Face ID. Нам еще предстоит увидеть рост этого тренда в Интернете.

Gif_07

BikeConfigurationот Den Klenkov является потрясающим примером опыта покупок-онлайн, сплетенного в исследование и опробование продукта.

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

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

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

XII. 3D-графика

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

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

Преимущества 3D-дизайна:

  • повышает конкурентоспособность;
  • упрощает восприятие информации пользователем;
  • детализирует визуализацию продукта;
  • упрощает внедрение новых тенденций дизайна;
  • исключает необходимость создания физических прототипов.

Это небольшой подбор в 11 трендов на 2020 год, которые несомненно оставят свой след в UX & UI дизайне в этом году и не только!

В заключение я приведу цитату из книги Марти Ноймайера «46 правил гения: руководство по креативности для новаторов»: «Творчество – это дисциплина, которую вы используете, когда не знаете ответов, когда путешествуете в неизведанное. В таком путешествии ошибочные шаги тоже шаги. Каждая ошибка приближает вас к решению».

Всем добра и креатива !:)