Термин «плоский дизайн» (от англ. flat design) в настоящее время на слуху у каждого, кто занимается проектированием пользовательского опыта. В последние несколько лет этот вид дизайна превратился в мэйнстрим — даже крупнейшие компании применяют его при создании сайтов и лендингов.
В чем же причина возрастающей популярности flat дизайна? Если ответить в двух словах: он реально работает! Плоский дизайн может помочь вам усовершенствовать пользовательский опыт как на лендингах, так и в мобильных приложениях. Это, в свою очередь, положительно отразится на конверсии.
Рассмотрим подробнее преимущества данного метода.
Что такое плоский дизайн?
Плоский дизайн получил такое название в связи с тем, что он использует минималистичные двухмерные (плоские) объекты для веб и мобильных интерфейсов:
Концепция плоского дизайна не подразумевает излишеств в оформлении, например, элементов, которые создают иллюзию трехмерных объектов (градиент, различные текстуры, тени). Flat дизайн развивается в противовес концепции скевоморфизма, или дизайна, имитирующего реально существующие объекты.
Плоский дизайн подразумевает создание простых форм и очертаний с использованием как сдержанных, так и ярких оттенков. Основной шрифт, который используется при создании страниц — это sans-serif (шрифт без засечек).
Проблемы, свойственные плоскому дизайну
Как только появился flat дизайн, он был ориентирован исключительно на мобильные устройства. Минималистичность и отсутствие сложных элементов хоть и являются основными чертами этой концепции, однако это не единственные ее особенности.
Компания Microsoft была одной из первых, кто реализовал подход на практике — в виде так называемого Metro для Windows 8. Тем не менее, когда специалисты NN Group провели юзабилити-тестирование дизайна, выяснилось, что у пользователей возникали трудности с идентификацией некоторых элементов интерфейса.
На скриншоте ниже изображен пример интерфейса Windows 8. Исследования показали, что пользователи не могли понять, куда они могут кликнуть, ведь все иконки плоские. К тому же функция «изменить настройки компьютера» (Click PC settings), выглядит просто как подпись к группе иконок, а не как кликабельная область:
Вместе с этим, Windows 8 был скорее адаптирован под мобильные устройства. Большие разноцветные прямоугольники в меню «Пуск» выглядят очень мило на экране мобильного телефона — такой интерфейс отлично подходит для жестов на тач-скрине:
Однако на большом экране стационарного компьютера данное меню выглядит громоздко и аляповато. Кликать по цветным прямоугольникам мышью не совсем удобно с точки зрения юзабилити.
Flat дизайн. Версия 2.0
С течением времени плоский дизайн «эволюционировал». Были исправлены многие проблемы с юзабилити, описанные выше. Flat дизайн перестал быть абсолютно «плоским», а стал «плоским наполовину». Теперь для создания элементов дизайна используются слои, контрасты и едва различимые тени, чтобы дать пользователю понять, что данная иконка кликабельна. Ниже приведен пример «обновленного» flat дизайна:
Теперь пришло время разобраться в том, каким образом плоский дизайн способен «завоевывать» посетителей.
Flat дизайн улучшает читабельность текста
Ключевое преимущество плоского дизайна — читабельность текста. Посетители могут с легкостью просматривать и воспринимать контент сайта, независимо от типа устройства, которое они используют.
Плоский дизайн подразумевает использование четких шрифтов. Текст, на который делается основной акцент, обычно контрастирует с фоном, что делает его удобочитаемым. Кроме того, сложные изображения заменены на минималистичные иконки или векторы. Плоские визуальные элементы и яркий, четкий текст невероятно легки для восприятия.
Ниже приведен пример сайта Crazyegg в 2009 году:
А на данном скриншоте представлена обновленная версия того же сайта:
Сравнивая эти две версии сайта, можно увидеть, что информация на обновленном ресурсе более упорядочена и удобочитаема. Новый сайт четко и без лишних слов демонстрирует пользователям преимущества сервиса. Страница выглядит очень лаконично и минималистично.
Используя плоский дизайн, можно без лишних хлопот донести до покупателей нужную информацию. Если посетители будут знать больше о вашей услуге или продукте, они с большей вероятностью станут вашими клиентами.
Пользователя ничто не отвлекает
Плоский дизайн тесно связан с понятием минимализма. Дизайнеры избегают декоративных элементов, которые не несут никакой информационной ценности для пользователя. Их цель — привлечь внимание посетителей к основному контенту.
Если снова обратиться к примеру CrazyEgg, то можно лишний раз убедиться в том, что на странице пользователя ничто не отвлекает. Человек, оказавшийся на данном лендинге, концентрирует свое внимание на одном единственном действии.
Ничем не заполненное белое пространство — еще одна «фишка» flat дизайна. Этот эффект наглядно демонстрирует сайт GetWalnut.com:
Walnut — это приложение, позволяющее отслеживать свои расходы, ключевые функции которого отображены на странице. Плоские иконки и текст располгаются на белом фоне, а так как незаполненного светлого пространства на сайте предостаточно, поэтому пользователь без труда сосредотачивает свое внимание на контенте. Flat дизайн акцентирует контент, убеждающий в выгодности предложения.
Сокращается время загрузки сайта
Медленно загружающиеся сайты и «подвисающие» приложения раздражают пользователей. Из-за длительного времени ожидания вы рискуете потерять клиентов:
Если вы не можете сократить объем контента на сайте, но хотите, чтобы он загружался быстро, вам следует либо использовать изображения с более низким разрешением либо прибегнуть к flat дизайну. Второй вариант здесь, очевидно, более приемлем.
По сравнению с сайтами, на которых используются «тяжелые» элементы оформления, ресурсы, созданные при помощи плоского дизайна, загружаются намного быстрее. Благодаря отсутствию градиента, сложных шрифтов и прочих скевоморфных особенностей общий вес сайта имеет меньший размер. Так, недавно Google сменил свой логотип, упростив шрифт, что положительно повлияло на время загрузки страницы.
Плоский дизайн удобен и для разработчиков. Его компонентами являются векторные или основанные на программном коде графические элементы, что также сокращает время загрузки сайта. Если копнуть глубже, то flat дизайн способствует оптимизации конверсии, а следовательно, увеличивает прибыльность сайта.
Плоский дизайн способствует SEO-оптимизации
Время загрузки страницы играет существенную роль в ранжировании результатов поиска. Именно этот фактор является одним из ключевых для успешной SEO-оптимизации. Плоский дизайн положительно влияет на время загрузки сайта, а, следовательно, помогает ресурсу продвинуться в ТОП-10 в результатах поиска.
Сайты, созданные при помощи flat дизайна, имеют хорошие шансы появиться на первой странице результатов поиска и, следовательно, привлечь внимание наиболее заинтересованных в покупке пользователей.
Обратите внимание на то, что Google тестирует новый функционал для поисковых систем. Теперь медленно загружающиеся сайты будут помечены специальным значком на странице результатов поиска. Эта новая функция наглядно продемонстрирована на скриншоте ниже:
Современный внешний вид
Пользователи формируют свое мнение о сайте в течение 50 миллисекунд! Это означает, что проведя на странице всего лишь 0.05 секунды, человек уже понимает, нравится ему данный ресурс или нет.
Как же это происходит? Разумеется, невозможно изучить весь контент за столь короткий промежуток времени. Люди оценивают сайт по внешнему виду и ощущениям, которые он вызывает.
Flat дизайн, пожалуй, является самым современным трендом в интернет-индустрии на настоящий момент. Такие крупнейшие компании как Apple, Google, Microsoft и другие с энтузиазмом приняли эту новую тенденцию. Пользователи в скором времени, возможно, станут воспринимать подобные сайты как эталон, которому должен соответствовать любой ресурс в сети.
Заключение
Помимо того, что плоский дизайн является широко распространенным трендом при создании сайтов, он положительно влияет на пользовательский опыт благодаря целому ряду преимуществ: хорошей читабельности, ускоренной загрузки страниц, более эффективной поисковой оптимизация и просто приятному внешнему виду.
Крупнейшие компании уже используют его при оформлении своих страниц и приложений, извлекая соответствующие выгоды. Если вы ищете направления по увеличению прибыльности своего бизнеса, рассмотрите flat дизайн как возможный вектор для развития.
Высоких вам конверсий!
По материалам: vwo.com
