Как использовать пустое пространство в дизайне интерфейсов
Пробел (или пустое пространство, иногда можно встретить кальку с английского — белое пространство, а газетчики на сленге называют его «воздух») является одним из самых ценных активов интерактивного дизайна. Пробелы на странице, хотя они часто упускаются из виду, могут быть настолько же важны, как пространство, занимаемое элементами пользовательского интерфейса.
«Пробелы следует рассматривать как активный элемент, а не пассивный фон» — Ян Чихольд
В этой статье я хотел бы объяснить, как использовать пробелы в дизайне для улучшения пользовательского интерфейса. Однако, прежде чем я смогу сделать это, нам нужно четко понимать, что мы подразумеваем под пустым пространством (пробелом).
Знакомство с пробелом
Пробел — это пустое пространство на странице между элементами и вокруг них. Когда дизайнеры говорят о пробелах, они на самом деле имеют ввиду негативное пространство. Термин «негативное пространство» происходит от традиционного искусства, где он более точно фиксирует форму объекта.
Хотя мы называем это «белым пространством» (whitespace), это не значит, что фактическое пространство должно быть белым. Пустое пространство может быть заполнено любым цветом, если оно не содержит таких элементов, как текст или изображения. Поскольку нет реальной связи с белым цветом, термины «пробел» и «негативное пространство» могут использоваться взаимозаменяемо.
Почему пробелы важны
Пробел является фундаментальным элементом дизайна не без причины. Подобно традиционному искусству, объекты в графических пользовательских интерфейсах также требуют негативного пространства — текст, кнопки, логотипы и другие объекты нуждаются в свободном пространстве. Все хорошие пользовательские интерфейсы включают правильные значения пробелов во всех элементах страницы сверху вниз.
Существует два типа пробелов:
- Микро. Пробелы между строками текста и внутри сетки и т. д. Этот пробел делает контент разборчивым и удобочитаемым.
- Макро. Пробел между основными элементами на странице. Например, левый и правый столбцы на странице Medium. В отличие от микро-пробелов макро-пробелы действуют как контейнер всего дизайна
7 способов улучшить пользовательский опыт с помощью пустого пространства
Пробел — отличный инструмент для балансировки элементов дизайна и лучшей организации контента для улучшения визуального общения.
1. Выделите определенные элементы
Выделить на странице конкретный элемент или контент является одной из наиболее распространенных задач для дизайнеров. В то время как дизайнеры могут использовать множество визуальных методов для выделения определенных элементов, одним из способов достижения хороших результатов является регулирование количества пустого пространства вокруг точек фокуса.
Между расстоянием и вниманием есть связь — большее расстояние привлекает внимание — отсутствие других элементов сильнее выделяет существующие элементы. Дизайнеры могут использовать это свойство пробелов, чтобы выделить важные элементы. Добавление пробелов к определенному сегменту контента заставляет обратить внимание пользователя на эту область просто потому, что на экране больше нет ничего, чтобы привлечь внимание.
Чем больше пустого пространства вокруг объекта, тем больше он привлекает глаз.
Как вы можете видеть в приведенном ниже примере, Google является большим сторонником пустого пространства в своих проектах. Оно помогает сразу понять цель этого проекта: основное внимание уделяется главной цели страницы.
Тот же метод используется для целевых страниц, особенно для выделения кнопок призыва к действию. Если вы посмотрите на домашнюю страницу MailChimp, вы заметите, что кнопка «Зарегистрироваться бесплатно» почти сразу привлекает ваше внимание.
2. Соедините связанные элементы
Когда мы рассматриваем макет, мы обычно рассматриваем его как компоновку объектов. Это происходит потому, что наш мозг создает модель отношений между различными объектами, основанную на относительном расстоянии между ними. Законы гештальта определяют, что объекты в непосредственной близости будут казаться одной «единицей», в силу чего пробелы действуют как визуальная метка. Взгляните на эту картинку:
Скорее всего, вы видите две группы точек, а не просто 12 точек. Все точки одинаковые, и единственное, что их отличает — это пробел, который разделяет их.
Этот закон может применяться к элементам дизайна взаимодействия. Давайте рассмотрим, как это работает в контексте веб-форм:
- Поместите подписи ближе к соответствующим полям. Как известно, предметы, расположенные рядом друг с другом, связаны между собой. Можно четче передавать информацию, когда подписи расположены ближе к полю, к которому они относятся. Регулируя расстояние, можно упростить просмотр контента и увеличить шансы на успешное завершение пользователем задачи.
Слева: Кажется, что подпись и поле ввода не связаны между собой. Справа: Подпись и поле ввода кажутся одним целым - Группируйте связанные поля. Известно, что длинные формы, со множеством полей для заполнения кажутся огромными. Пользователи не решаются заполнять такие формы. Объединяя связанные поля вместе, вы можете помочь пользователям понять информацию, которую они должны заполнить. Обе формы в приведенном ниже примере имеют одинаковое количество полей. Но есть отличие — все поля в форме, расположенной справа, разделены на три группы. Количество контента одинаковое, но производимое им на пользователей впечатление сильно отличается.
3. Не допускайте визуальный беспорядок
Многие приложения и веб-сайты страдают от переполнения большим количеством информации и элементов. Обычно это происходит, когда разработчики приложений или веб-сайтов хотят одновременно передавать слишком много информации. К сожалению, пользователи имеют ограниченное внимание, и чем больше элементов борются за их внимание, тем меньше внимания пользователь уделяет макету.
Если вы не думаете, что это проблема, взгляните на картинку, расположенную ниже. Это вопиющий пример, когда слишком большое количество объектов, конкурирует между собой за внимание пользователя.
Многие сайты страдают от подобной проблемы. Отсутствие пробелов напрягает глаза посетителя и испытывает его терпение. Сайты, заполненные текстом и фотографиями, расстраивают посетителей и заставляют их в спешке покинуть его.
Если загромождение вашего интерфейса перегружает пользователя слишком большим количеством информации, то уменьшение беспорядка улучшит понимание: удалив отвлекающие факторы, вы заставите пользователей сосредоточиться только на том, что сразу видно. Вы можете использовать пробелы, чтобы свести к минимуму перегрузку. Подумайте о пробелах в качестве регулятора громкости для отвлекающих моментов интерфейса — больше свободного пространства равно меньше шума, что упрощает фокусировку. Когда макет устанавливает правильный баланс пробелов, легче обрабатывать и понимать текст, проще расшифровывать иконки и изображения и обеспечить лучший пользовательский опыт.
Совет: Чтобы убедиться, что ваш дизайн не загромождён, попробуйте «пятисекундный тест»: посмотрите на веб-страницу в течение пяти секунд и запишите, что вы помните. Это поможет вам понять, достаточное ли у вас количество пробелов на странице.
4. Направляйте пользователя через интерактивный контент
Если вы хотите, чтобы взгляд вашего пользователя перетекал с одной точки на другую, вам нужно дать ему причину сделать это. Причиной может быть пустое пространство. Когда пустое пространство используется надлежащим образом, оно позволяет странице создавать естественный поток.
Отрегулируйте пробелы, чтобы обеспечить эффективный просмотр содержимого и поддерживать интерес читателей. Как вы можете видеть ниже, именно это делает Dropbox, направляя пользователей через несколько ключевых функций продукта, используя Z-образный паттерн.
Z-образный паттерн в дизайне интерфейсов
Асимметрия — это еще один метод пробелов, который можно использовать для направления взгляда в сторону нужного участка страницы. Когда элемент использует асимметричное пространство, он выделяется на фоне других окружающих элементов. Он кажется более ярким, что особенно полезно, если у вас есть области страницы, где одна ссылка / кнопка требует большего внимания, чем другие.
5. Улучшение чтения текста
Контент — это король. Контент — это то, что обеспечивает ценность большинства приложений и веб-сайтов. Вот почему ключевым аспектом хорошего удобства использования является читабельность вашего контента. Множество факторов может способствовать читабельности, включая размер шрифта и его цвет, или использование заголовков. Пробел — еще один ключевой момент, который стоит учитывать, поскольку он оказывает прямое влияние на четкость и читаемость контента:
- Межстрочный интервал или высота строки может значительно улучшить удобочитаемость текста. Как правило, чем больше высота строки, тем лучше опыт пользователя во время чтения. Хотя ее слишком большое значение может сломать единство и сделать дизайн разобщенным.
