Как использовать пустое пространство в дизайне интерфейсов

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

«Пробелы следует рассматривать как активный элемент, а не пассивный фон» — Ян Чихольд

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

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

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

Супрематизм
«Супрематизм. Автопортрет в двух измерениях» кисти Казимира Малевича. «Негативное пространство» — это пространство между элементами композиции.
Хотя мы называем это «белым пространством» (whitespace), это не значит, что фактическое пространство должно быть белым. Пустое пространство может быть заполнено любым цветом, если оно не содержит таких элементов, как текст или изображения. Поскольку нет реальной связи с белым цветом, термины «пробел» и «негативное пространство» могут использоваться взаимозаменяемо.
В дизайне ToyFight много негативного пространства
«Белое пространство» не должно быть белым. В дизайне ToyFight много негативного пространства, окрашенного в красный цвет.

Почему пробелы важны

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

Макро пробел vs. Микро пробел
Макро пробел vs. Микро пробел
Существует два типа пробелов:

  • Микро. Пробелы между строками текста и внутри сетки и т. д. Этот пробел делает контент разборчивым и удобочитаемым.
  • Макро. Пробел между основными элементами на странице. Например, левый и правый столбцы на странице Medium. В отличие от микро-пробелов макро-пробелы действуют как контейнер всего дизайна

7 способов улучшить пользовательский опыт с помощью пустого пространства

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

1. Выделите определенные элементы

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

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

Чем больше пустого пространства вокруг объекта, тем больше он привлекает глаз.

Как вы можете видеть в приведенном ниже примере, Google является большим сторонником пустого пространства в своих проектах. Оно помогает сразу понять цель этого проекта: основное внимание уделяется главной цели страницы.

Главная страница поиска Google
Когда посетители приходят на главную страницу поиска Google, их взгляд сразу же падает в центр страницы, где Google имеет свою форму поиска. Это все благодаря пустому пространству.
Тот же метод используется для целевых страниц, особенно для выделения кнопок призыва к действию. Если вы посмотрите на домашнюю страницу MailChimp, вы заметите, что кнопка «Зарегистрироваться бесплатно» почти сразу привлекает ваше внимание.

Mailchimp главная страница

2. Соедините связанные элементы

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

Соедините связанные элементы

Скорее всего, вы видите две группы точек, а не просто 12 точек. Все точки одинаковые, и единственное, что их отличает — это пробел, который разделяет их.

Этот закон может применяться к элементам дизайна взаимодействия. Давайте рассмотрим, как это работает в контексте веб-форм:

  • Поместите подписи ближе к соответствующим полям. Как известно, предметы, расположенные рядом друг с другом, связаны между собой. Можно четче передавать информацию, когда подписи расположены ближе к полю, к которому они относятся. Регулируя расстояние, можно упростить просмотр контента и увеличить шансы на успешное завершение пользователем задачи.
    Инпуты
    Слева: Кажется, что подпись и поле ввода не связаны между собой. Справа: Подпись и поле ввода кажутся одним целым
    • Группируйте связанные поля. Известно, что длинные формы, со множеством полей для заполнения кажутся огромными. Пользователи не решаются заполнять такие формы. Объединяя связанные поля вместе, вы можете помочь пользователям понять информацию, которую они должны заполнить. Обе формы в приведенном ниже примере имеют одинаковое количество полей. Но есть отличие — все поля в форме, расположенной справа, разделены на три группы. Количество контента одинаковое, но производимое им на пользователей впечатление сильно отличается.
NNgroup формы
Форма справа облегчает процесс ввода данных. Изображение: NNgroup

3. Не допускайте визуальный беспорядок

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

Если вы не думаете, что это проблема, взгляните на картинку, расположенную ниже. Это вопиющий пример, когда слишком большое количество объектов, конкурирует между собой за внимание пользователя.

Загромождение интерфейса Microsoft Word
Загромождение интерфейса перегружает пользователя слишком большим количеством информации. Пользователь не может выбрать важный контент, когда все выглядит одинаково.
Многие сайты страдают от подобной проблемы. Отсутствие пробелов напрягает глаза посетителя и испытывает его терпение. Сайты, заполненные текстом и фотографиями, расстраивают посетителей и заставляют их в спешке покинуть его.
Захламленная страница
Захламленная страница непривлекательна и не позволяет пользователям читать ее содержимое, особенно если нет визуальной иерархии.
Если загромождение вашего интерфейса перегружает пользователя слишком большим количеством информации, то уменьшение беспорядка улучшит понимание: удалив отвлекающие факторы, вы заставите пользователей сосредоточиться только на том, что сразу видно. Вы можете использовать пробелы, чтобы свести к минимуму перегрузку. Подумайте о пробелах в качестве регулятора громкости для отвлекающих моментов интерфейса — больше свободного пространства равно меньше шума, что упрощает фокусировку. Когда макет устанавливает правильный баланс пробелов, легче обрабатывать и понимать текст, проще расшифровывать иконки и изображения и обеспечить лучший пользовательский опыт.
На этом скриншоте страницы сайта MR PORTER
На этом скриншоте страницы сайта MR PORTER есть много пустого пространства. Посмотрите, как страница разделена на блоки, каждый из которых отделен от других. Все хорошо видно и легко читается.
Совет: Чтобы убедиться, что ваш дизайн не загромождён, попробуйте «пятисекундный тест»: посмотрите на веб-страницу в течение пяти секунд и запишите, что вы помните. Это поможет вам понять, достаточное ли у вас количество пробелов на странице.

4. Направляйте пользователя через интерактивный контент

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

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

Z-образный паттерн в дизайне интерфейсов

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

5. Улучшение чтения текста

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

  • Межстрочный интервал или высота строки может значительно улучшить удобочитаемость текста. Как правило, чем больше высота строки, тем лучше опыт пользователя во время чтения. Хотя ее слишком большое значение может сломать единство и сделать дизайн разобщенным.

Изображение: Apple

  • Пробелы между абзацами и вокруг блоков текста на самом деле помогают людям лучше понять, что они читают. Согласно исследованию, проведенному в 2004 году, этот вид пробелов увеличивает понимание почти на 20%.

Если вы хотите улучшить типографику своего дизайна, рекомендуем прочитать статью «10 советов по типографике в веб-дизайне»

6. Используйте его в качестве визуального разделителя

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

Приложение Yelp для Android
Приложение Yelp для Android. Каждый пункт в списке разделяется разделителем без полей. Линия поперек ощущается как остановка — она отчетливо отделяет предметы. В результате, макет ощущается тяжелым.
По мере того, как предпочтения пользователей смещаются к более простому интерфейсу, разделение пользовательского интерфейса на простые, необходимые элементы является ключом к успеху. Можно разделить по элементам и интервалу, а не по линиям. Чем меньше линий и разделителей, тем чище, современнее и функциональнее выглядит ваш интерфейс. Изобилие пустого пространства может заставить любой интерфейс выглядеть привлекательным и простым. Реальная причина такого изменения заключается в том, что происходит смещение акцента на контент и функциональность, устраняя лишние элементы.
Goutham
Использование пустого пространства вместо рисования линий помогает ненавязчивым образом определять разные разделы сайта. Изображение: Goutham

7. Создайте чувство изысканности и элегантности

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

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

Tom Ford
Пробел может добавить чувство изысканности и роскоши, создавая ощущение, что продукт более важен, чем пространство, в котором он живет. Изображение: Tom Ford

Несколько слов о заинтересованных сторонах

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

Используйте такие просьбы, как возможность обучить их. Наша обязанность, как дизайнеров, помогать другим понять, почему пробелы являются важной частью пользовательского опыта. Организуйте совещание и объясните свои соображения. Если это не сработает, вы можете провести A / B тестирование. Испытайте две версии дизайна: один предложенный вами и другой, предложенный клиентом. Пользователи, скорее всего, предпочтут менее загроможденную версию.

Вывод

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

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