neomorshizm 1160x620 - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности

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

Но давайте будем честными, это не самый практичный дизайн для реального использования. Попробуйте создать и выпустить продукт, использующий неоморфизм в качестве основного стиля, и вы, скорее всего, расстроите всех. Разработчиков, пользователей и пользователей с ограниченными возможностями (в настоящее время 57 миллионов американцев имеют какую-то инвалидность. А 54% взрослых пользователей с ограниченными возможностями выходят в интернет. Инвалиды – это НЕ миф). – [Источник: W3.org]

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

  • слуховые
  • когнитивные
  • неврологические
  • физические
  • речевые
  • визуальные

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

Давайте разберемся, почему неоморфизм и доступность не могут ужиться друг с другом.

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

Визуальный аспект: Неоморфизм тяжело сказывается на людях с проблемами зрения

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app

Согласно W3.org по вопросу мобильной доступности:

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

Рекомендации WCAG 2.0, связанные с проблемой контраста:

1.4.3 Контраст (минимальный) (уровень AA), требуется контрастность не менее 4,5: 1 (или 3: 1 для крупного текста);

1.4.6 Контраст (повышенный) (уровень AAA), требуется контрастность не менее 7: 1 (или 4,5: 1 для крупного текста).

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

Когнитивный аспект: неоморфизм заставляет пользователей думать

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/9592062-Neumorphism-Smart-Home

Обычно объекты с тенью часто выделяются больше, чем объекты без нее. Но с неоморфизмом, большинство элементов выделяется, конкурируя друг с другом на одном экране. Поэтому сложнее понять точную иерархию дизайна, из-за чего экран не имеет надлежащей точки фокуса и, таким образом, создает путаницу для глаз. Отсутствие иерархии на экране оказывает существенное влияние на процесс принятия решений пользователем, а также на его мыслительный процесс. Таким образом, множество элементов при отсутствии иерархии и фокуса дизайна создает барьер, который мешает пользователям понять, что происходит на этом экране. В конечном итоге, это может привести к путанице и неправильному суждению. Хороший UI / UX дизайн не заставляет пользователей думать.

Нарушения когнитивной способности и обучения влияют на то, как люди обрабатывают информацию. Например, они могут влиять на восприятие, память, язык, внимание, решение проблем и понимание. Терминология для категорий и состояний различна и включает в себя интеллектуальные нарушения, нарушения развития; синдром дефицита внимания и гиперактивности (СДВГ), аутизм, деменция, дислексия и многие другие.

Источник: W3.org
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/9916835-Neumorphism-Smart-Home-app

Физический аспект: неоморфизм создает путаницу

Могу ли я нажать на это?
Что выделено?
Что нет?
Это кликабельно?
Или нет?

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/9938821-Smart-home-app

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

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

Источник: W3.org
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Что такое неоморфизм? Давайте разберем неоморфизм с точки зрения доступности
https://dribbble.com/shots/9838619-Music-Player-Neumorphism-Rebound-shot

Тренд неоморфизма, который начался на Dribbble, должен закончиться на Dribbblе. Потому что, несмотря на несомненную привлекательность, он крайне непрактичный в реальном мире.

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

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

Спасибо.

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Тренды веб-дизайна на 2019 год от awwwards

Здравствуйте, дорогие читатели, мы рады представить статью, в которой совершенно по-новому освещаются…

Топ 19 трендов веб-дизайна 2019 года

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

Последние тренды в дизайне логотипов от Logo Lounge

Отчет Logo Lounge за 2019 год показывает, что в моде точки, крылья и двери