Как правильно пользоваться плоским дизайном

29 май

Время чтения: 12 минут

Плоский дизайн начал свое победоносное шествие в начале десятилетия и окончательно закрепился в качестве стандарта в 12-14-х годах, вместе с релизом Windows 8 и появлением материального дизайна от Google. Сегодня в основе интерфейсов большинства сайтов крупных корпораций – язык плоского дизайна.

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

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

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

Нужен ли вам полностью плоский дизайн?

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

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

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

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

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

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

Избегаем неопределенности кликов

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

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

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

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

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

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

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

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

Не забывайте про контраст

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

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

Глубина необходима

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

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

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

В любой непонятной ситуации привязывайте к элементу ссылку

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

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

Выводы

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

Checklist

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