Воздух в интерфейсе: зачем он нужен в ПО для бизнеса и как влияет на прибыль?

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

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

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

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

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

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

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

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

На что влияет воздух в интерфейсе?

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

Воздух как инструмент понимания

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

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

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

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

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

Воздух как навигатор

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

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

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

Если убрать эти пространственные подсказки, экран превратится в мешанину, где непонятно, что к чему относится и куда нажимать. Пользователь, скорее всего, нажмет не туда или не нажмет никуда. И то и другое – прямые потери для бизнеса.

Воздух как ценник

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

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

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

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

Иными словами, воздух в макете молчаливо обосновывает цену, которую вы собираетесь назвать. Уберите его – и вам придется доказывать ценность продукта словами, акциями и скидками, потому что визуально экран уже сообщил пользователю: «Тут все по дешевке».

Почему пустота стоит денег и стоит ли за неё платить?

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

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

Отказ от лишнего

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

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

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

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

Точная настройка отступов

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

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

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

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

Проверка фокуса

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

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

Он смотрит на макет и последовательно отвечает на вопросы:

• Куда я посмотрел в первую секунду?
• Туда ли я посмотрел, куда запланировано?
• Не задержался ли взгляд на пустом пятне, которое не несет смысла?
• Что будет, если немного сдвинуть этот блок левее или правее?
• А если увеличить отступ сверху и уменьшить снизу?

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

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

Самопроверка перед правками: стоит ли заполнить пустоту или она уместна?

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

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

Зачем я это добавляю?

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

Чаще всего за желанием уплотнить макет стоит именно тревога, а не деловая необходимость, а тревога имеет несколько источников:

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

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

Чем я готов пожертвовать?

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

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

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

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

Кто пострадает?

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

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

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

Проверьте вашу правку по короткому списку:

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

Разработка ПО от 66 Бит

Всего за 10 минут вы узнали почему пустота стоит денег и как управлять прибылью и продажами через воздух в интерфейсе? Настало время применить знания на практике, а поможет вам в этом команда 66 Бит!

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