Сила белого пространства

Как незаполненное пространство влияет на дизайн сайта
Перевод статьи The power of white space
Автор: Mads Soegaard
Белое пространство — фундаментальный инструмент проектирования пользовательского опыта. Значимость свободного пространства может вас поразить, так как его часто недооценивают. Так же, как тишину между музыкальных нот. Тем не менее, он настолько мощный, что от него может зависеть, останется пользователь на вашей странице или нет.
Структуру веб-страницы задают много разных визуальных объектов. Заголовки, тексты, иконки, изображения и так далее. Белое пространство (негативное пространство, «воздух») — это фон, который объединяет в дизайне все элементы вместе, позволяя им выделиться.

Давайте посмотрим, почему белое пространство так важно.

Что такое верстка с белым пространством

Белое пространство (или контрформа) — это область между элементами дизайна. Это также пространство внутри самих элементов, включая промежутки между типографическими знаками.
Вопреки своему названию, белое пространство не обязательно белое. Это может быть какой угодно цвет, текстура, паттерн и даже фоновое изображение. Главное, чтобы на этом фоне хорошо считывался контент.
Незаполненное пространство часто вызывает много вопросов. Теория дизайна настаивает на том, что белое пространство — это изящно, к тому же повышает качество пользовательского опыта.

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

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

Виды белого (пустого) пространства: микро и макро

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

Пожалуй, лучший пример сайта, который интенсивно (и эффективно) использует макро-белое пространство — google.com. Страница замечательно проста, но заметили ли вы что-то еще? Эта простота еще и успокаивает. Там нет беспорядка, там меньше работы для глаз и разума. Вы спокойно можете сконцентрироваться на том, зачем вы сюда пришли: погуглить!
Есть отличная история, почему Google остановился на таком решении домашней страницы. Google.com был первым из сайтов, начавших использовать обширное негативное пространство (контрформу). Когда они начинали, скорость Интернета была гораздо медленнее, чем сейчас.

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

Как определить какое белое пространство нужно использовать?

Использование микро- и макро- пространства зависит от нескольких факторов:
1. Контент
Чем больше в макете информации, тем меньше макро-белого пространства. Но микро-белого, соответственно, становится больше. Этот компромисс имеет огромное значение, иначе страницы будут просто «кусками» информации, которые будет крайне трудно прочитать.

К примеру, новостные сайты полагаются на микро-незаполненное пространство для обеспечения пользователям удобочитаемости контента. Комфортное восприятие информации читателем имеет критическое значение.
Использование негативного пространства в онлайн-журналах:
2. Общая стилистика проекта
Дизайн пользовательского интерфейса значительно влияет на соотношение между микро- и макро- контрформой в макете. Выбор стилистического решения является решающим фактором при выборе того или иного преобладающего пространства.
3. Пользователь
Для определения правильного баланса макро- и микро- белых пространств для конкретной аудитории проводится тестирование пользовательского опыта. Нет теории, которую можно применить ко всем пользователям. Как всегда в User Experience мы должны основываться на данных, полученных в результате исследования целевой аудитории.
4. Позиционирование бренда
Использование контрформы может говорить о бюджете компании и, соответственно, о качестве продукта. Подумайте о брендинге таких компаний, как Apple, Mercedes Benz и IKEA. Как они подтверждают эту теорию?
www.apple.com

Активное и пассивное использование белого пространства

Другой подход: делить контрформу на активную и пассивную.
Активное белое пространство
Используется для упорядочения структуры страницы и для того, чтобы помочь пользователю на ней ориентироваться.
Пассивное белое пространство
Используется для улучшения эстетического восприятия страницы через конкретное чтение и расположение контента. Например, негативное пространство между строками и абзацами функционирует таким образом:
Изображение сверху показывает разницу между текстом без использования белого пространства, текстом с пассивным его использованием и текстом с активным использованием негативного пространства.
1
В первом тексте белое пространство практически отсутствует между строками и абзацами. Видно, что отсутствие «воздуха» делает текст дробленым и сжатым. Его очень тяжело читать.
2
Во втором тексте есть небольшое пассивное (и микро-) пространство. Вы заметили, насколько легче этот текст читается по сравнению с первым?
3
В последний пример добавлено активное белое пространство, что позволяет лучше ориентироваться в тексте. Та «стена текста» из первого примера становится текстом, к формату которого мы привыкли. Белое пространство повышает общую удобочитаемость и усваиваемость текста, но оно также необходимо для сохранения здоровья глаз и душевной уравновешенности!

Три ключевых параметра дизайна, на которые влияет белое пространство

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

Помните последний пример с текстами? Использование пустого пространства в дизайне влияет на удобочитаемость и общее впечатление пользователя. Счастливые читатели скорее всего останутся на вашей странице.
2. Тональность дизайна и брендинг
Негативное пространство задает тон всему дизайну. Веб-сайты с большим количеством макро-белого пространства отражают минимализм и утонченность. Сайты с меньшим количеством макро-белого пространства чаще всего бывают информативными, как в случае новостных сайтов.

Эти признаки не «высечены на камне». Всегда лучше протестировать использованную контрформу на ваших пользователях. Только они смогут сказать, как они воспринимают ваш дизайн.
3. Фокус и внимание
Контрформа помогает пользователю сориентироваться в контенте. Она также определяет точки фокуса и направляет внимание пользователя на конкретные части страницы.
На этапе проектирования сайта важно определить приоритеты — что на странице самое главное.

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

Резюме

1
Контрформа — область среди и вокруг всех элементов дизайна. Это инструмент дизайнера в проектировании пользовательского опыта.
2
Белое пространство не обязательно белое. Это просто наименование для определения мест, где нет никаких элементов контента.
3
Меняйте пропорции контрформы в зависимости от 4 факторов: контент, стилистика, пользователь и бренд.
4
Используйте макро-белое пространство для организации контента на макете и направления пользователя через блоки контента. Используйте микро-белое пространство между элементами контента: текстом, изображениями и прочим.
5
Мы также можем подходить к контрформе с точки зрения ее активности и пассивности. Пассивное белое пространство улучшает пользовательский опыт, оно нужно для удобства восприятия контента. Активное белое пространство управляет фокусом внимания пользователя. Оно помогает контенту выделиться и создать его «образ».

Оригинальный текст: Mads Soegaard
Перевод, иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!