Flat 2.0 и как он решает проблемы юзабилити Flat Design

Плоский дизайн существует с 1950-х годов, когда был разработан международный типографский стиль. В последнее время он приобрел широкую популярность с момента запуска нового Microsoft Геометрия и типография Метро дизайн язык, сначала в новом Windows Phone в 2010 году, затем в Windows 8 в 2012 году.

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

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

Проблемы юзабилити плоского дизайна

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

Нет визуальных признаков кликабельности

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

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

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

Почему это проблема? Давай попробуем эксперимент.

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

Снижение обнаруживаемости из-за отсутствия оси Z

Люди в реальной жизни находят объекты и движутся в трех измерениях: оси X, Y и Z. Когда они сталкиваются с минималистичным дизайном плоского веб-сайта без 3D-эффектов, они получают опыт, который отличается от того, к чему они привыкли, с чем они в основном знакомы.

Это означает, что им нужно приложить больше усилий, чтобы обнаружить отношения между объектами, а также понять визуальную иерархию сайта. Например, нам нужно больше времени проводить на домашней странице Microsoft Developer Network, чтобы визуально декодировать информацию и назначение различных элементов на сайте..

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

Низкая Плотность Информации

Эксперт по UX Nielsen-Norman Group также подверг критике плоский дизайн за низкую плотность информации.

В своей критике юзабилити Windows 8 они использовали примеры приложений для Магазина Windows и веб-сайт Los Angeles Times, чтобы показать проблемы, низкая плотность информации (наличие нескольких историй на начальном экране, заголовки без резюме, едва узнаваемая группировка и т. д.) может стать причиной с точки зрения удобства использования.

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

Восстание Флэт 2.0

По мере того, как все больше и больше дизайнеров признают недостатки юзабилити плоского дизайна, появилась новая, более зрелая версия, названная “Flat 2.0” или же “Почти плоский” дизайн. Хотя переход от скейоморфизма к плоской был радикальным, эволюция плоского дизайна гораздо более неуловима.

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

Материал Дизайн

Новый язык дизайна Google, названный Material Design, вероятно, является наиболее ярким примером стиля Flat 2.0. Google выпустил Material Design с Android L в 2014 году. Хотя Material Design сохраняет основные характеристики плоского дизайна, он использует определенные метафоры из физики, чтобы помочь пользователям быстро находить аналогии между реальным миром и цифровым миром..

Материал Дизайн использует ось Z, дает тонкая глубина к дизайну, и разумно использует слои отделяя их с тенями а также анимации. У Google есть описание supercool о том, как это работает, и его действительно стоит прочитать, чтобы понять его основные принципы и правила..

Заключение

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

Flat 2.0 дает ответы на воспринятые проблемы плоского дизайна. Это разумный компромисс между функциональностью, эстетикой и удобством использования. Конечно, нам не нужно использовать комплекты Material UI везде, но понимание философии, лежащей в основе этого, может дать нам твердое представление о как разработать собственный стиль в соответствии с последними результатами в дизайне пользовательского опыта.