Бренд Facebook продемонстрировал рекордный годовой прирост стоимости
Previous
выбрать за меня
Сообщества Вконтакте смогут зарабатывать на собственных видео
Next
веб-дизайн, интерфейс, юзабилити, контент, UX
Юзабилити

Минимализм в веб-дизайне: за и против

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

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

Ведь то, как развивается веб-дизайн, отчасти сравнимо с процессом формирования и развития языка, — и первое и второе зависит от способа применения.



Минимализм — широко употребляемый термин, но определить границы этого стиля в веб-дизайне достаточно сложно. Nielsen Norman Group попыталась выяснить его характерные черты, проанализировав подборку из 112 сайтов. Сайты эти отбирались по двум критериям: если независимый эксперт относил их к минималистским, или же если они присутствовали в галереях интернет-ресурсов, посвященных этому направлению, например, siiimple.

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

Поиск отличительных особенностей минимализма

Авторы исследования условились считать конкретную черту минимализма таковой, если она встречается у двух третей (75%) сайтов.

Плоские формы и текстуры 

Присутствует у 96% подобных интерфейсов (и часто без особой надобности)  

В последние годы веб-дизайнеры массово отходят от традиции скевоморфизма: наблюдается резкий крен в сторону сугубо цифрового отображения предметов, без каких-либо намеков на знакомый физический объект.



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

Есть мнение, что тренд плоского веб-дизайна возник на волне популярности минимализма. Эти стили хорошо сочетаются: отсутствие излишних теней и плавных переходов между цветовыми оттенками хорошо ложится в один ряд с основной задачей минимализма — убрать все лишнее и оставить самое необходимое. 96% сайтов, которые исследовала NN/g, оказались плоскими.

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

веб-дизайн, интерфейс, юзабилити, контент, UX

У начальной страницы Jeet.gs сеточная система API, совершенно плоский интерфейс, включая кнопки-призраки для копирования кода. (Кнопки-признаки — пустые кнопки с тонким прямоугольным обрамлением и текстом). У плоских кнопок-призраков могут возникать проблемы с разборчивостью, к тому же это противоречит сложившимся представлениям о том, как должна выглядеть кликабельна кнопка. Но в данном конкретном случае кнопки становятся заметными при наведении курсора. Клик сопровождается небольшим 3D-эффектом, что оставляет некоторое ощущение физического объекта. Таким образом, интерактивность UX отчасти углубляет плоский интерфейс.       

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

Ограниченная или черно-белая цветовая палитра

Присутствует у 95% исследовавшихся веб-страниц



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

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

Многие минималисты выбирают монохромные схемы или же делают акцент на каком-то одном цвете, чтобы выборочно подчеркнуть важность элементов. Подобные элементы обычно кликабельны.

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

Почти у половины этих сайтов (49%, 55 сайтов) монохромная палитра. Примерно столько же веб-ресурсов акцентировали внимание на одном/двух цветах в преимущественно монохромной палитре (46%, 52 сайта). Из этих 55 монохромных сайтов 51 выдержан в серых красках.

веб-дизайн, интерфейс, юзабилити, контент, UX

Резкая эстетика страницы Frêres d’Encre (французский тату-салон) достигается за счет черно-белой цветовой гаммы.

веб-дизайн, интерфейс, юзабилити, контент, UX

Дизайнеры сайта Solo, ПО для управления проектами, использует монохромную схему, но без оттенков серого.

веб-дизайн, интерфейс, юзабилити, контент, UX

В метапоисковой системе Kayak оранжевым выделен логотип и кнопка поиска.

Цветовой палитре не вредит ее скудность, если в расчет принимаются некоторые нюансы:

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

Присутствует у 87% интерфейсов

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

  • элементы меню
  • ссылки
  • изображения
  • графика
  • линии
  • подписи под иллюстрациями
  • текстура (градиент)
  • цвета
  • шрифты
  • иконки

Чтобы выяснить, содержит ли интерфейс сайта что-либо лишнее, можно напрямую спросить дизайнеров, могут ли они ещё что-то убрать. Также для этого необходимо четкое представление о целевой аудитории и задачах конкретного проекта. За неимением таких сведений сотрудники NN/g в своих поисках ориентировались на наличие в интерфейсе графических элементов, которые не выполняют какой-либо очевидной функции. Как оказалось, 87% минималистских сайтов обходятся без немотивированных графических деталей.

веб-дизайн, интерфейс, юзабилити, контент, UX

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

Чем больше элементов в интерфейсе, тем больше визуальной информации посетителям приходится обрабатывать. «Если отсутствие элемента не станет серьезной проблемой — избавься от него.» – так можно сформулировать кредо дизайнеров-минималистов. Но здесь важно не увлечься, пытаясь сделать чистый, современный, минималистский интерфейс, и не удалить действительно важный контент.

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

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

Максимум негативного пространства

Присутствует у 84% интерфейсов

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

Но удивительно, что только на 84% участвующих в исследовании сайтов присутствует достаточный объем негативного пространства.

веб-дизайн, интерфейс, юзабилити, контент, UX

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

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

  • Каким образом усечение/расширение негативного пространства отобразится на иерархии коммуникационных эффектов?
  • Как негативное пространство повлияет на то, какой контент будет вверху страницы? Сгиб страницы также играет важную роль: пользователи пролистают вниз, если посчитают нужным. Но все-таки основной объем внимания достается верхней части страницы.
  • Как негативное пространство повлияет на усилия, расходуемые на взаимодействия: не придется ли пользователям с трудом пробираться к нужной информации?
  • Насколько понадобится изменить негативное пространство с учетом разных экранов?
Необычная типография

Присутствует у 75% сайтов

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

Вариации с размерами шрифтов и стилистикой оказывают существенную помощь в понимании иерархии и важности соответствующего текста.

Из 112 сайтов, 75% использовали типографические возможности, чтобы передать определенный смысл или создать визуальный эффект.

веб-дизайн, интерфейс, юзабилити, контент, UX

минимализм в веб-дизайне

В портфолио арт-директора Александра Энгзеля подзаголовок выполнен размашистым шрифтом, чтобы вызвать интерес посетителя, не применяя дополнительных графических элементов. Но картинка с текстом загружается слишком долго. В отличие от портфолио Томаса Баффета, здесь не разъясняется, чье это портфолио, и чем этот человек занимается. Чтобы это выяснить, нужно кликнуть вкладку INFO в верхнем правом углу.

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

Широкие типографические мазки уместны лишь тогда, когда посредством текста можно донести информационный посыл.

Не стоит заходить слишком уж далеко в том, что касается вычурной типографии: посетители попросту проигнорируют текст, если он будет похож на рекламное объявление. Между эффективной типографией и той, которая просто отвлекает внимание, тонкая грань. Хороший дизайнер прекрасно её чувствует. Но если у вас недостаточно опыта по типографической части, лучше идти путем наименьшего сопротивления.

Другие тренды

Крупные фоновые изображения или видео

 У 57% интерфейсов

Присутствие в качестве фона крупного изображения или видеоролика (благодаря возможностям HTML5) — один из самых обсуждаемых трендов в минималистском веб-дизайне. В теории, масштабные фоновые изображения противоречат основным принципам минимализма. Но, как бы то ни было, видео и изображения, формирующие фон, пользуются популярностью; они обнаружились у 57% сайтов.

веб-дизайн, интерфейс, юзабилити, контент, UX

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

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

Важные моменты:

  • Изображения или видеоролики должны выполнять какую-то функцию, помогать людям. В противном случае их наличие будет только отвлекать от фактического контента.
  • Текст должен быть разборчив и читабелен, чтобы люди могли понять, о чем речь. Разборчивость — то, насколько легко можно разобрать отдельные буквы. Читабельность в лингвистическом смысле — то, насколько легко воспринимается текстовый материал: понятны ли слова, отдельные фразы, не сложно ли быстро просмотреть текст по диагонали. Если на сайте используется карусель или видео, не помешает протестировать каждый фон, каждое изображение или кадр видеозаписи на экранах с разным разрешением.
  • Изображения и видео не должны влиять на работу сайта. Стоит позаботиться о мобильных пользователях, чтобы им не приходилось ждать, пока загрузится фотография.
  • Автовоспроизведение видео — чаще всего перебор. Многим людям доставляют неудобства видеоролики, которые воспроизводятся без их согласия, в особенности, если присутствует и аудиосопровождение.
Сетка

Используется в 43% интерфейсов

В ходе исследования NN/g было установлено, что у 43% интерфейсов контент организован «сеткой». И хотя это указывает на то, что такая техника достаточно популярна, все-таки сетки не совсем мейнстрим.

Обычно они присутствуют в минималистском интерфейсе по нескольким причинам:

  1. Это эффективный способ организации однородного контента на странице, безо всяких визуальных эффектов;
  2. Сетки особенно уместны в контексте адаптивного веб-сайта — еще один тренд, часто идущий в одной упряжке с минимализмом.

веб-дизайн, интерфейс, юзабилити, контент, UX

Дизайнерское агентство Paprika использует сетку для своих проектов, но это не адаптивный дизайн.  

веб-дизайн, интерфейс, юзабилити, контент, UX

Фотостудия Sea Chant разместила фотографии в своем портфолио сеткой; снимки шириной с экран настольного компьютера.

минимализм в веб-дизайне

веб-дизайн, интерфейс, юзабилити, контент, UX

Снимки шириной 400px уменьшаются до одной колонки, эффекты при наведении курсора отсутствуют. 

Сферические элементы

Присутствуют у 16% интерфейсов

Некоторые дизайнеры высказываются в том духе, что сферические и шарообразные детали графики — это вполне допустимые компоненты минимализма, но по результатам исследования NN/g, их используют только 16% сайтов.

веб-дизайн, интерфейс, юзабилити, контент, UX

На главной странице Gesture Theory множество сферических элементов.   

Скрытая глобальная навигация

Используется для 13% интерфейсов

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

веб-дизайн, интерфейс, юзабилити, контент, UX

На сайте дизайнерского агентства Visual Soldiers элементы глобальной навигации скрываются под иконкой гамбургер.

веб-дизайн, интерфейс, юзабилити, контент, UX

За счет сокрытия некоторых элементов меню достигается радикально-минималистский эффект.

Распространенные признаки минималистских интерфейсов

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

  • Плоские, а не скевоморфические образы и текстура
  • Ограниченная или же монохромная цветовая палитра
  • Максимизация негативного пространства
  • Резко очерченная типография, чтобы показать иерархическую структуру и спровоцировать интерес

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

NN/g удалось обнаружить и некоторые другие, родственные тенденции. Среди прочего это:

  • Объемные фоновые изображения или видео
  • Сетка
  • Сферические элементы графики
  • Скрытая глобальная навигация
Итог

В нулевые годы интерфейсы сайтов большей частью были достаточно хаотичными и крайне перегруженными веб-элементами. Поэтому многие отраслевые издания уже давно предостерегают от такого рода «максимализма». Избыточный и бесполезный контент — это всегда плохо с точки зрения пользователя.

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

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.