С момента своего подъема к популярности, около 2012 года, плоский дизайн оказывал влияние на визуальный дизайн. Плоский дизайн сейчас повсюду — Apple, Amazon, Microsoft, и даже IBM. Теперь это не просто один из трендов веб дизайна.
Плоский дизайн, особенно в комбинации со стратегическим минимализмом, может быть мощным эстетическим инструментом. Он может передавать ощущение роскоши или модных тенденций, и в некоторых случаях, может использоваться для обращения к пользователям подросткового возраста. Его легковесные UI легко реализуются на девайсах самого разного размера.
К сожалению, в плоском дизайне есть один существенный недостаток: он часто приводит к неуверенным кликам и снижению эффективности пользователя. В плоском интерфейсе отсутствуют те определители, которые подсказывают пользователю на что нужно нажимать. Но вы можете с этим справиться — используйте следующие стратегии, чтобы убедиться в том, что ваши пользователи не станут жертвами несовершенного плоского дизайна.
Подходит ли вам совершенно плоский дизайн?
Прежде, чем вы начнете заниматься плоским дизайном, подумайте над тем, удовлетворяет ли он целям вашей организации. Эти факторы помогут достичь успеха:
- Небольшое количество контента и простота информационной архитектуры: ультра-плоский дизайн лучше работает на очень маленьких сайтах (1-10 страниц)
- Низкий объем интерактивности и отсутствие сложных функций: сложные приложения или интерфейсы с необычными шаблонами взаимодействий не смогут направлять своих пользователей, если будут абсолютно плоскими.
- Высокий процент возвращающихся пользователей: сайты, с большим количеством часто возвращающихся пользователей будут более успешными с плоским дизайном. В этих случаях, пользователи будут полагаться, скорее, на память, чем на визуальные подсказки.
- Целевые пользователи из разряда специалистов в информационных технологиях: если ваша целевая аудитория — продвинутые пользователи (дизайнеры или разработчики), они смогут лучше понять плоский дизайн.
Даже если ваша организация удовлетворяет всем вышеперечисленным характеристикам, мы не советуем использовать полностью плоский интерфейс. Есть варианты, в которых полностью плоский дизайн не сможет сильно навредить, например, в дизайнерских портфолио или на очень простых маркетинговых сайтах. От использования плоского дизайна такие сайты могут только выиграть, при этом не особо жертвуя удобством использования, хотя бы потому, что на них почти нечего «использовать».
Большинство цифровых продуктов намного более сложны, чем одностраничный маркетинговый сайт. Для таких интерфейсов мы рекомендуем использовать полу плоский, или плоский дизайн 2.0 — эволюцию стиля, которая очень похожа на плоский дизайн, но применяет мягкие тени, подсветку, и слои, создавая глубину.
И последнее предостережение: то, что плоский дизайн кажется простым, не значит, что его легко реализовать. Создание любого вида плоского дизайна, как ультраплоского, так и 2.0, потребует наличия талантливого визуального дизайнера.
Стратегии, которые помогут избежать неуверенных кликов
Если вы уверены, что плоский дизайн хорошо подходит вашему продукту, то задумайтесь над тем, как вы будете передавать кликабельность каждого интерактивного элемента — ссылок, кнопок, полей форм, слайдеров, и т.д.
Никогда не используйте одинаковое визуальное поведение для статичного текста и ссылок. Не используйте одинаковый цвет для кнопок, предназначенных для выполнения основных действий и фона на статичном заголовке. Используйте визуальный дизайн, чтобы подсказать пользователям что кликабельно, а что нет.
- Убедитесь, что ваши кнопки хотя бы отдаленно похожи на настоящие
- Избегайте призрачных кнопок — текста, с тонким прямоугольным контуром
- Убедитесь, что мелкие детали будут увеличиваться по нажатии
- В ссылках, используйте стандартные, узнаваемые иконки. За некоторым исключением, эти ссылки должны сопровождаться текстовыми подписями.
Как можно чаще используйте стандартные шаблоны UI и традиционную разметку. В этом случае, пользователи легко поймут назначение каждого элемента, даже если они не имеют традиционных, сильных определителей. Комбинирование стандартной разметки с чистым визуальным дизайном и достаточным количеством белого пространства, сделает каждую секцию сайта более характерной и понятной.
Уделите внимание контрасту. Убедитесь, что ваш текст и элементы легко различимы и заметны. Светло-серый на темно-сером — это популярный подход, но он редко приносит хорошие результаты. Кроме того, будьте осторожны, используя фоновые изображения под текстом.
Добавьте глубины. Плоский дизайн не обязан быть абсолютно плоским. Чтобы разъяснить отношения между элементами, добавьте мягкие 3D тени или слоистые эффекты.
Материальный дизайн Google внес значительный вклад в эту концепцию. Что хорошо в материальном дизайне, так это то, что он наделил тщательно продуманную платформу определенными правилами, поведениями, и визуальными свойствами. К сожалению, он не всегда правильно реализуется — зачастую, тени и слои применяются только для улучшения эстетики, а не для поддержки ментальных моделей пользователей и создания определителей. Для получения всех этих преимуществ, вам не нужно применять материальный дизайн — создайте свой собственный язык с полу-трехмерными свойствами.
Сомневаетесь? Пролинкуйте! В ситуациях, когда пользователь может предположить, что нечто является ссылкой — оно должно ей являться. Например, если ссылка снабжена описательным текстом, заголовком, и изображением одновременно, то все эти ассоциированные элементы должны ссылаться на одну и ту же страницу.
Заключение
При правильном использовании, плоский дизайн может стать мощным инструментом. Помните, что неуверенные клики — это проблема не только для пользователей, которые пытаются выполнить задачу, это также означает, что они могут пропустить какое-либо важное действие, способствующее достижению их бизнес целей. Никогда не жертвуйте юзабилити с целью улучшения эстетической составляющей, и всегда проводите пользовательские тестирования, чтобы убедиться в том, что они понимают ваш интерфейс.
Чтобы проверить юзабилити любого плоского интерфейса, сверьте его с этим чеклистом:
- На всем сайте присутствуют визуальные подсказки, говорящие о кликабельности
- Связанные элементы выделяются, имеют соответствующий контраст, и заметны
- Связанные элементы расположены там, где пользователь ожидает их найти
- Отсутствуют разного рода ложные цели — элементы, выглядящие кликабельно, но таковыми не являющиеся.
- Все элементы, ассоциированные с одинаковым контентом (иконки, изображения, текст) связаны, и указывают на одну и ту же страницу.
- Предоставляйте визуальный фидбэк всегда, когда имеет место задержка между кликом и результирующим действием.
Перевод статьи Кейт Мэйер
