Ньюморфизм — тренд или очередная дизайнерская глупость?

Ньюморфизм — восходящий тренд в 2019–2020, стиль, появлению которого мы обязаны dribbble. Уже то, что этот стиль зародился на этой площадке, должно было бы насторожить думающего дизайнера: многим известно, что dribbble — сборник часто безумно красивых, но абсолютно не работающих дизайнов. Дизайн ради лайка — в этом весь dribbble. На мой взгляд, неудивительно, что ньюморфизм является совершенно нежизнеспособным, непрактичным и нереалистичным стилем в дизайне. На чём основывается моё мнение — в этом материале.

https://dribbble.com/shots/9527558-Freebie-Neumorphic-UX-UI-Elements

Ньюморфизм, или неоморфизм, скорее всего, произошёл от сочетания слов «новый» и «скевоморфизм». Скевоморфизм в эпоху своего расцвета был довольно интересным стилем: элементы интерфейса наследовали свойства реальных предметов — материалы, форму — и это выглядело очень привлекательно. Хотя и в настоящее время мы встречаем вокруг много интерфейсов в таком стиле: например, корзина в macOS, большинство интерфейсов плагинов для обработки музыки до сих пор очень «скевоморфичны».

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

Типичный ньюморфизм :)

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

Лишний параметр — лишняя нагрузка на пользователя

Эту проблему считаю довольно большой. В современных интерфейсах пользователю довольно легко разобраться: все элементы привычны, понятна их иерархия. Ньюморфизм добавляет нам новый параметр объекта — его толщину. Вспомните, как всё понятно в материал-дизайне: «Вот объект, он плоский и лежит на фоне; вот объект с тенью, он приподнят, сначала нажму его, потом доберусь до нижнего» — если говорить упрощённо.

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

https://dribbble.com/shots/10196092-Tesla-Smart-App

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

Хороший дизайн не взрывает мозг пользователю

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

https://dribbble.com/shots/9347404-Delivery-App-Skeuomorph

Микровзаимодействия

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

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

Ньюморфизм добавит много сложностей при реализации микровзаимодействий элементов интерфейса

Наверное, скоро мы увидим отлично анимированный интерфейс, полностью сделанный в стиле ньюморфизма. Но нет.

Контрастность и ограничения зрения

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

https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit

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

Если вы планируете сделать максимально неконтрастный интерфейс (а другим он не получится — объект и фон одного цвета, отделяемые бледной тенью), которым будет неудобно пользоваться, — смело делайте его в стиле ньюморфизма. Все пользователи с цветовой слепотой, дальтонизмом или какими-то ещё нарушениями зрения скажут вам спасибо. Да и все остальные, если будут пользоваться вашими интерфейсами в солнечные дни.

Визуальный мусор

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

https://dribbble.com/shots/9934278-Neumorphism-Style-Food-Ordering-UI

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

https://dribbble.com/shots/9188333-Trello-Managament-App-Neumorphism-UI

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

Уверен, ситуацию не спасёт даже частичное использование с другими стилями — все элементы в стиле ньюморфизма будут смотреться инородными, мультяшными и глуповатыми

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

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

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