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

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

Перевод статьи Negative Space in UI Design: Tips and Best Practices, автор Tubik Studio.

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

Что такое негативное пространство в дизайне?

По сути, негативное пространство или белое пространство, как его часто называют, — это область макета, которая остается пустой. Она может быть не только вокруг объектов, которые вы размещаете на макете, но также между ними и внутри них. Негативное пространство не только определяет границы объектов, но также создает необходимые связи между ними в соответствии с принципами гештальта и создает правильный визуальный образ. Поэтому пустое пространство является законным элементом дизайна, который имеет большое влияние на удобство его использования. «Белое пространство похоже на холст: это фон, который скрепляет элементы в дизайне, позволяя им выделиться», — говорит Mads Soegaard из Interaction Design Foundation.

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

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


Концепция материального дизайна

В чем разница между белым пространством и негативным пространством?

Ответ прост: никакой разницы. Эти понятия полностью взаимозаменяемы.

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

Почему негативное пространство важно?

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

Как клиенты, так и некоторые дизайнеры время от времени хотят разместить как можно больше элементов и функций на одной странице или экране, думая, что это будет полезно для пользователей. Но это ошибка: на самом деле пользователям не нужно все сразу. Более того, слишком много элементов без достаточного количества пространства значительно повышают уровень отвлечения внимания: пользователи перегружаются информацией и интерактивными элементами, большинство из которых им НЕ нужно. И приходится прикладывать усилия, чтобы найти то, что НУЖНО. Как отметил Aarron Walter: «если все кричит о внимании вашего зрителя, то ничего не слышно».

Разумный подход к негативному пространству в дизайне имеет ряд преимуществ. И мы хотели бы отметить следующие:

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

Давайте рассмотрим пример посадочной страницы Big City Guide. Здесь дизайнер применяет фоновую фотографию, которая играет роль негативного пространства на макроуровне. Более того, элементы фотографии и заголовка взаимосвязаны, они как бы переплетаются друг с другом: это делает негативное пространство активным объектом дизайна и придает странице единый гармоничный вид.


Посадочная страница Big City Guide

Основные факторы, на которые влияет негативное пространство

Правильное использование негативного пространства может оказать значительное влияние на следующие UX факторы.

Читабельность и четкость

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

Брендинг

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

Природа источника информации

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

Уровень внимания

Достаточное количество негативного пространства улучшает визуальную иерархию и позволяет пользователям сосредоточиться на ключевых элементах.

Исходя из описанного выше, можем сделать вывод, что негативное пространство оказывает влияние на зрительное восприятие в таких аспектах, как:

  • читабельность текста
  • восприятие графики
  • удобство навигации
  • способность выделять важное.

Приведем пару примеров. Вот домашняя страница The Big Landscape. На ней нет каких-либо визуальных рамок или таблиц. Но благодаря сбалансированному использованию негативного пространства, дизайнер создает четкую визуальную иерархию, тем самым позволяя пользователю просканировать информацию за доли секунды. Дизайн страницы выглядит организованным, но легким и воздушным. А белый фон и расположение объектов делают ее похожей на журнальную обложку. Имея гармоничный внешний вид, страница доносит до читателя необходимую информацию о целях и характере этого интернет-магазина.


The Big Landscape

Другой пример — мобильное приложение Upper app: здесь негативное пространство полностью черное, что создает большую контрастность с основными элементами интерфейса. На экране используется только одна прямая линия. Тем не менее,  расположение всех объектов выглядит организованным и хорошо читаемым благодаря достаточному количеству пространства и отсутствию отвлекающих факторов. Кроме того, это придает внешнему виду стильную минималистскую элегантность, что также доставляет эстетическое удовольствие.


Upper App

Подводные камни, на которые стоит обратить внимание

1. Своеобразная терминология. Когда вы разговариваете с клиентами, которые могут быть не очень хорошо знакомы с дизайнерскими терминами, обязательно объясните значение негативного пространства, прежде чем описывать дизайн-проект. Для человека «не в теме» может быть трудно понять, почему «этой странице нужно больше пустого пространства», когда он смотрит на полностью черный фон. Кроме того, негативное пространство может ассоциироваться с чем-то плохим, а ведь это вовсе не так. Так что не забудьте расставить все точки над i, прежде чем использовать термины.

2. Желание уменьшить негативное пространство, чтобы разместить больше объектов на странице или экране. Это характерно не только для дизайна пользовательского интерфейса. Вы можете услышать, как дизайнер интерьера рекомендует оставить немного свободного места клиенту, который хочет четыре книжных шкафа в одной комнате вместо двух. Или как архитектор объясняет, почему нужно оставить немного незанятого пространства вокруг здания, чтобы оно смотрелось лучше. Более того, иногда перепланировка элементов с лучшим использованием негативного пространства создает иллюзию того, что комната или здание больше, чем они есть на самом деле. И то же самое происходит с данными, которые вы должны их поместить на мобильный экран или веб-страницу. Решите, что важнее, что вторично, а что можно убрать, чтобы сделать навигацию интуитивно понятной. Негативное пространство поможет создать гармоничный вид экрана или страницы, даже если он наполнен информацией и функционалом.

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

Спасибо!

Оставляйте комментарии, вопросы и пожелания. Какие статьи вы хотели бы увидеть в нашем блоге? Какие темы вам интересны? Если нужно перевести какой-то конкретный материал, то пишите, скидывайте ссылки.

Анимация в мобильных приложениях

Анимированные переходы в мобильных приложениях

Это перевод статьи Animated Transitions in Mobile Apps, автор Nick Babich.

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

Анимация — важный элемент пользовательского опыта (UX — User experience — на мой взгляд, нет удачного перевода этого понятия на русский язык, поэтому дальше буду использовать оригинальное англоязычное сокращение). Когда дело доходит до переходов в мобильных приложениях, есть много тонких приемов, которые вы можете применять, используя анимацию. Отправить сообщение, открыть «Настройки», установить флажок, перейти на другую страницу — все это точки перехода. И анимация является отличным способом усилить воздействие на пользователя.

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

Дайте обратную связь

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

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


Уведомление пользователей о результатах их действий. Изображение: Colin Garven

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


Плавная анимация помогает пользователям понять, что происходит. Изображение: Ramotion

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


Анимация может поддерживать интерес пользователя до полной загрузки приложения. Изображение: UI8

Соедините разные этапы в многоэтапном процессе

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

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


Изображение: Jakub Antalík

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


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


Изображение: Anton Skvortsov

Презентация новых элементов

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


Анимация может показать, откуда появляются новые объекты. Изображение: Virgil Pana

Дайте пользователю ощущение пространственной ориентации

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

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


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

В следующем примере плавающая кнопка действия (FAB — floating action button) преобразуется в заголовок и разъясняет пользователю, как эти два объекта связаны друг с другом.


Анимация может помочь вам выстроить взаимосвязи между элементами. Изображение: Anish Chandran

Минимизировать когнитивную нагрузку

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

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

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


Когда дело доходит до ввода данных, не полагайтесь на память пользователя. Пусть вся важная информация будет на виду. Изображение: MDS

Пользователи должны понимать функциональные изменения

Функциональное изменение происходит, когда элемент меняет свою функцию после взаимодействия. Например, когда пользователь нажимает на кнопку, ее значение меняется. Анимация помогает пользователям ответить на вопрос «Каково значение этого элемента в данный момент?»

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

Кнопка двигается при нажатии, чтобы пользователи могли видеть изменения. Изображение: Jurre Houtkamp
В некоторых случаях функциональное изменение одного элемента приводит к изменению всего внешнего вида. Например, гамбургерное меню, которое меняется на «X» и изменяет отображение на экране.

Дайте пользователям понять, что объект изменил свое назначение. Изображение: Tamas Kojo

Заключение

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

Спасибо!

Оставляйте комментарии, вопросы и пожелания. Какие статьи вы хотели бы увидеть в нашем блоге? Какие темы вам интересны? Если нужно перевести какой-то конкретный материал, то пишите, скидывайте ссылки.