Плоский дизайн сайта — примеры удачных решений

Как улучшить пользовательский опыт, если вы используете flat дизайн
Перевод статьи Flat-Design Best Practices
Автор: Kate Meyer
Сайты в стиле плоского дизайна не всегда удобные. Например, пользователи могут не понимать, какие элементы кликабельные и теряться в навигации из-за этого. Но этой проблемы можно избежать, если вы будете последовательно и четко показывать разницу между активными и неактивными элементами дизайна.

Плоский дизайн сайта

Пик популярности плоского дизайна пришелся на 2012 год, но и до сих пор он применяется очень широко. Без него сейчас не обходится ни одна крупная компания: Apple, Amazon, Microsoft и даже IBM работают в стиле flat. Очевидно, что это уже не просто модная тенденция.
Плоский дизайн, особенно в сочетании с минимализмом — сильный эстетический инструмент в арсенале дизайнера. Flat дизайн создает ощущение дорогого и современного продукта, и в ряде случаев применяется для привлечения внимания молодых пользователей. Флэт дизайн отличает простой пользовательский интерфейс. Он легко адаптируется под любые устройства.

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

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

Подходит ли плоский дизайн для ваших целей?

Прежде чем перейти на стиль flat, решите, подходит ли он для ваших целей. Факторы, которые говорят, что результат будет успешным:
1
Небольшое количество текста и простота информационной архитектуры. Ультраплоский дизайн оптимален для небольших сайтов объемом 1−10 страниц.
2
Низкий уровень интерактивности и отсутствие сложных элементов. В случае использования ультраплоского дизайна пользовательского интерфейса сложные приложения или интерфейсы с необычными моделями интерактивности не смогут направлять действия пользователей.
3
Высокий процент постоянных посетителей. Сайты, куда заходит большое количество постоянных посетителей, как правило, более успешны, если они сделаны в стиле flat. В таких случаях посетители скорее интуитивно воспользуются интерактивными элементами.
4
Целевая аудитория пользователей уровня «эксперт в области технологий». Если ваша аудитория состоит исключительно из дизайнеров, разработчиков или опытных пользователей, они с легкостью разберутся с навигацией на вашем сайте с дизайном в стиле flat.
Но даже если характеристики, приведенные в списке, совпадают с вашими целями, мы рекомендуем дизайнерам избегать абсолютно плоского интерфейса. Конечно, при создании дизайнерского портфолио или простых маркетинговых вебсайтов он не повредит. Более того, подобные веб-сайты могут оказаться в выигрыше благодаря модному flat дизайну без потери удобства использования, «пользовательские» функции в таких вебсайтах минимальны.
focuslist.co: Единственная цель сайта – продвижение приложения для повышения производительности. Самые простые сайты, подобные этому, могут выиграть благодаря плоскому дизайну (хотя его нельзя считать полностью плоским из-за тени за скриншотом).
Большинство цифровых продуктов намного сложнее, чем одностраничный маркетинговый сайт. В таких случаях мы рекомендуем использовать полуплоский формат или формат Flat 2.0. Он представляет из себя эволюцию стиля, который, хотя и похож на плоский дизайн, однако включает полутени, блики и градиенты для создания эффекта глубины.

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

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

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

Визуальные изменения, вызванные действиями курсора, или изменения формы курсора (например, из стрелки он превращается в руку), означают, что на элемент можно нажать мышкой. К сожалению, подобные показатели кликабельности слабы и требуют усилий для взаимодействия. В результате, они фактически снижают целевую доступность сайта.
1. Никогда не делайте одинаковым обычный и кликабельный текст
Например, если для ссылок вы используете жирное начертание, или определенный цвет, то не следует использовать жирное начертание или такой же цвет текста просто так. Используйте визуальный дизайн, чтобы четко обозначить активные и неактивные кнопки и элементы. Будьте постоянны.
2. Четко обозначайте активные элементы
Активными элементами могут быть: текст, кнопки, изображения, графические элементы, вкладки и иконки.

  • Кнопки должны хоть немного быть похожи на настоящие.
  • Если вы выбрали дизайн в стиле flat, воздержитесь от использования прозрачных кнопок (они выглядят как текст, заключенный в тонкую прямоугольную рамку).
  • Мелкие элементы должны увеличиваться при клике мышкой.
  • В ссылках используйте стандартные, легко узнаваемые иконки. За редким исключением, эти иконки должны работать в паре с текстовым содержанием элемента.
3. Используйте традиционные макеты и стандартные шаблоны сайтов
При стандартной раскладке пользователи смогут легко догадаться о цели каждого элемента даже при отсутствии традиционных индикаторов. Сочетание стандартного макета с чистым визуальным дизайном и большим количеством свободного пространства сделает каждый раздел сайта заметным и понятным.
На карте фиксированных точек по результатам изучения движения глаз пользователя показаны первые несколько секунд после захода пользователя на сайт teavana.com. (Синие круги означают точки фиксации). Так как Teavana использует простой визуальный дизайн с достаточно традиционным макетом онлайн-магазина, сайт удобен в использовании, несмотря на флэт дизайн. Белое пространство и соответствующее ожиданиям расположение верхней строчки меню помогают пользователям легко распознать цель и задачи сайта.
4. Уделите внимание контрасту
Убедитесь, что текст и все элементы имеют четкую и заметную форму. Использование светло-серого на темно-сером фоне — популярный прием в плоском дизайне, но редко дает хороший результат. Кроме того, не увлекайтесь использованием фоновых изображаний с текстовым наполнением.
Главная активная кнопка 'See more' на первом экране уже не так заметна, и на фоне крупного изображения она «потеряна» для пользователя. Улучшить дизайн страницы можно, добавив цветовой акцент, например, более темный оттенок голубого, который уже используется в пользовательском интерфейсе.
5. Добавьте глубину
Плоский дизайн необязательно должен быть совсем плоским. Добавьте слабые трехмерные тени или градиенты. Так вы четко обозначите взаимосвязь между элементами.

Материальный веб-дизайн (Material Design) — визуальный язык, созданный компанией Google, был представлен в 2014 году. Лучшее качество материального дизайна — это тщательно продуманная структура с четкими правилами, действиями и визуальными свойствами. К сожалению, его не всегда правильно применяют на деле. Например, зачастую тени и градиенты используются для улучшения визуального ряда, а не для того, чтобы поддержать пользователей и создать для них четкие индикаторы.
Вам необязательно пользоваться принципами материального дизайна, чтобы получить все его преимущества. Создайте собственный язык при помощи полутрехмерных элементов.
Скриншот приложения LiquidText
В довольно плоском по форме приложении для аннотаций для iOS используются едва видимые тени. Они попадают под интерактивные элементы и панель инструментов и разделяют элементы пользовательского интерфейса от текста.
6. Сомневаетесь? Добавьте ссылку
Когда пользователи закономерно предполагают, что видимый ими элемент — это ссылка, это действительно должна быть ссылка. Например, если ссылка содержит описательный текст, заголовок и уменьшенное изображение «в одном флаконе», то все связанные элементы должны вести на одну и ту же страницу.
В обзоре «Наши приоритеты» на сайте пользователи должны навести курсор на уменьшенное превью сайта, чтобы увидеть текст и ссылку. К сожалению, на самом деле ссылку имеет только иконка, изображающая маленькую стрелку. В таком случае добавьте ссылки в каждый связанный элемент.

Подведем итоги

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

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

Рассмотрите каждый элемент на соответствие этому чеклисту, чтобы проверить удобство пользования:
Чек-лист:
1
Подсказки, какие элементы кликабельные, постоянны по всему сайту.
2
Кликабельные элементы выделяются, имеют достаточный контраст и заметны.
3
Кликабельные элементы находятся именно там, где пользователи ожидают их найти.
4
Отсутствуют элементы, которые выглядят кликабельными, хотя таковыми не являются.
5
Все элементы, относящиеся к одному и тому же фрагменту контента (иконка, изображение, текст), связаны и указывают на одну и ту же страницу.
6
Существует обратная связь всякий раз, когда между щелчком мыши и последующим действием возникает задержка.

Оригинальный текст: Kate Meyer / nngroup.com
Перевод: Светлана Граудт
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также: