Иерархия вместо украшательства: расставляем акценты на экране
Экран, который пытается сказать всё и сразу
Я анализировал существующий продукт клиента перед стартом редизайна, и на дашборде в первом экране конкурировали за внимание одиннадцать разных визуальных приёмов: градиентный баннер, три карточки со статистикой и тенями, пульсирующий значок уведомлений, две разные акцентные цветовые гаммы для кнопок, прогресс-бар со свечением и hero-иллюстрация, занимающая треть экрана. Когда я спросил основателя, что именно пользователь должен заметить первым, он помолчал и сказал: «Честно говоря, не знаю. Важно всё».
Этот ответ — корень почти любого захламлённого интерфейса, который мне доводилось чинить. Дело не в плохом вкусе, не в нехватке бюджета на дизайн и даже не в слабой проработке отдельных элементов. Настоящая проблема в том, что никто не решил, что важнее чего. В результате приоритет каждого участника проекта получил свою визуальную подачу, и экран, где всё подчёркнуто, превратился в экран, где не подчёркнуто ничего.
Это и есть разница между украшательством и иерархией — один из самых недооценённых навыков в digital-дизайне. Украшательство делает отдельные элементы симпатичнее. Иерархия делает весь экран осмысленным. У вас может быть страница, полная красиво оформленных компонентов — приятные тени, со вкусом подобранные градиенты, грамотная типографика, — которая при этом полностью провалится как средство коммуникации, потому что взгляд зрителя не понимает, куда смотреть сначала, куда потом и куда в последнюю очередь.
Клиенты почти никогда не просят иерархию напрямую. Они просят, чтобы что-то «цепляло», чтобы кнопка «выделялась сильнее», чтобы hero-секция «ощущалась более ярко». Такие запросы обычно маскируют проблему иерархии, и инстинктивное решение — добавить визуального веса нужному элементу — обычно только усугубляет ситуацию, потому что лечит системную проблему как локальную. Ничто не выделяется само по себе. Вещи выделяются только относительно всего, что их окружает. Это и есть главная идея всей статьи.
Украшательство украшает. Иерархия ранжирует
Украшательство — это всё, что применяется, чтобы элемент выглядел более законченным, более брендированным или более «дизайнерским»: тень, градиент, скруглённый угол, иконка, цветовой акцент, лёгкая текстура. Ничего из этого не плохо само по себе. Это инструменты. Но ни один из них сам по себе не говорит пользователю, на что смотреть в первую очередь. Они говорят, что элемент оформлен — а это совсем другое сообщение.
Иерархия — это осознанное ранжирование элементов по важности, выраженное через визуальный вес, благодаря которому взгляд пользователя движется по экрану в последовательности, соответствующей реальному приоритету контента. Иерархия отвечает на три вопроса для любого экрана: что я должен увидеть первым? Что вторым? Что можно игнорировать, пока не понадобится?
Это различие важно, потому что украшательство и иерархия могут указывать в разные стороны. Мне доводилось видеть страницы с тарифами, где план «Самый популярный» получал яркую градиентную рамку и тень, в то время как настоящая кнопка призыва к действию внутри этого плана была тонкой серой кнопкой-аутлайном, потому что дизайнер хотел, чтобы «героем» была сама карточка. Декоративное решение (приукрасить карточку) напрямую противоречило функциональной цели (заставить людей нажать кнопку). Карточка выиграла визуальный спор. Кнопка — единственный элемент на странице, связанный с выручкой, — проиграла.
То же самое постоянно происходит с дашбордами. KPI-показатель получает крупное, жирное, яркое оформление, потому что в макете это выглядит эффектно, а реальный инсайт рядом с ним — то, на что пользователю на самом деле нужно отреагировать, — остаётся обычным текстом абзаца под ним. Эффектный элемент и важный элемент — не одно и то же, и украшательство не знает разницы. Только решение об иерархии, принятое осознанно ещё до применения любого визуального оформления, способно удержать эти две вещи в согласии.
Полезная дисциплина здесь — сформулировать иерархию простым языком до того, как открывать дизайн-инструмент. Для любого экрана перечислите элементы в порядке важности относительно цели пользователя, а не списка пожеланий бизнеса. Страница товара может ранжироваться так: фото товара, цена, кнопка «в корзину», название товара, выбор размера, описание, отзывы, похожие товары. Заметьте: «красивая лайфстайл-фотография, которую обожает бренд-команда», не оказывается автоматически на первом месте только потому, что на неё потрачен бюджет. Ранжируйте по функции, а затем проектируйте в соответствии с рангом. Если пропустить этот шаг и сразу перейти к визуальным экспериментам, вы в итоге оформите то, что приятно делать красивым, а это почти никогда не совпадает с настоящим списком приоритетов.
Пять реальных рычагов акцента
Когда у вас есть ранжированный список, нужны инструменты, чтобы выразить этот ранг визуально. На самом деле существует всего пять рычагов, которые надёжно создают акцент, и воспринимать их как закрытый набор гораздо полезнее, чем относиться к задаче «сделать это заметнее» как к открытому дизайн-вопросу.
Размер. Крупные элементы замечают раньше мелких. Это самый интуитивный рычаг и одновременно самый злоупотребляемый, потому что соблазнительно увеличить всё понемногу, пока весь экран не начнёт «кричать». Размер работает как инструмент иерархии только при относительном и экономном применении — один-два элемента действительно крупнее соседей, а не общее раздувание размеров по всему экрану. Если каждый заголовок на странице — 32px, у вас не крупные заголовки, а новый дефолтный размер, и глаз привыкает к нему за несколько секунд.
Насыщенность и контраст. Жирный текст, сильный цветовой контраст с фоном и резкие контрастные края притягивают взгляд раньше, чем более светлые, низкоконтрастные элементы. Часто это более удачный рычаг, чем размер, потому что он тоньше и лучше масштабируется под разные размеры экранов — жирная 16px-подпись может перевесить тонкий 24px-заголовок. Контраст включает и насыщенность цвета: единственный насыщенный цвет на поле приглушённых нейтральных тонов читается как более важный, чем могли бы обеспечить только размер или насыщенность шрифта по отдельности, — поэтому многие эффективные интерфейсы используют почти монохромную палитру с одним акцентным цветом, зарезервированным исключительно для действия с самым высоким приоритетом.
Пространство. Изоляция — это акцент. Элемент, окружённый щедрым свободным пространством, читается как более значимый, чем тот же самый элемент, втиснутый между пятью другими, даже если каждый пиксель оформления идентичен. Это рычаг, который дизайнеры недоиспользуют чаще всего, потому что для клиентов, платящих за проект и желающих видеть его наполненным контентом, свободное пространство ощущается как «потраченное впустую». Но заголовок, которому есть, где «дышать», всегда перекроет по коммуникативной силе заголовок, зажатый между абзацем, логотипом и навигацией. Пространство ничего не стоит с точки зрения визуальной сложности и часто оказывается единственным изменением с максимальным эффектом для захламлённого экрана.
Положение. В западной культуре чтения взгляд движется по экрану в размытом паттерне Z или F — верхний левый угол обычно замечают первым, а верхнюю полосу слева направо сканируют раньше того, что ниже линии видимости. Положение — не приговор, но сильная установка по умолчанию, и чтобы её преодолеть, нужны другие, более мощные рычаги. Размещение самого важного элемента там, куда взгляд естественным образом не идёт (дальний нижний угол, середина страницы), означает, что вы заставляете размер, насыщенность и цвет делать работу, на которую они в одиночку не способны.
Движение и время. На цифровых экранах всё, что движется, появляется или меняет состояние, притягивает внимание раньше статичных элементов — это инстинкт выживания, а не дизайн-тренд. Плавное появление, число, которое увеличивается на глазах, бейдж, появляющийся после завершения действия, — всё это даёт огромный визуальный вес при минимальных затратах на оформление. Движение также легче всего «перегрузить» до бессмысленности: если на загрузке страницы анимируются пять элементов, внимание пользователя дробится на пять частей, и ни одна анимация не воспринимается как значимая.
Общее у всех пяти рычагов — их относительность. Размер что-то значит только в сравнении с другими размерами на том же экране. Контраст считывается только на фоне окружения. Пространство определяется тем, что вокруг. Положение зависит от всего остального, конкурирующего за тот же маршрут взгляда. Движение выделяется, потому что остальное неподвижно. Ни один из этих рычагов не работает как абсолютное свойство отдельного элемента — все они работают только внутри системы, где другим элементам осознанно дают меньше того же самого приёма. Именно это упускает мышление, ориентированное на украшательство: нельзя сделать что-то важным, добавив к нему ещё что-то. Важным что-то делают, убирая акцент со всего вокруг.
Контраст — это бюджет, а не украшение
Если бы мне нужно было сжать всю тему в один рабочий принцип, он звучал бы так: относитесь к визуальному акценту как к ограниченному бюджету, а не безграничному праву на украшательство. На каждом экране — один, максимум два элемента с высоким акцентом. Всё остальное должно быть визуально тише, причём намеренно, чтобы акцентные элементы могли выполнять свою работу.
Этот сдвиг в формулировке меняет ход дизайн-ревью. Вместо вопроса «выглядит ли это хорошо» возникает вопрос «куда мы потратили наш бюджет акцентов, и совпадает ли это с нашим списком приоритетов?» Если клиент просит сделать пять разных элементов на одном экране «заметными», честный ответ — это невозможно, и дело не в стилистическом ограничении, а в том, как устроено человеческое восприятие. Если подчёркнуто всё, мозг воспринимает всё поле как неподчёркнутое и начинает сканировать в поисках хоть чего-то, что отличается от базовой линии, зачастую натыкаясь на что-то случайное — например, заблудившуюся иконку или нечаянное цветовое столкновение.
Мне нравится думать об этом как о пропорции 1-2-7 на любом экране. Один элемент получает самое громкое оформление — это ваше основное действие или главное сообщение, то, ради чего экран вообще существует. Два элемента получают вторичную подачу — заметную, но явно подчинённую первому; часто это вспомогательная информация или второстепенное действие. Всё остальное — подписи, метаданные, разделители, иконки, вспомогательный текст, сноски — находится на седьмом, низком уровне акцента: читаемом и доступном, но визуально достаточно тихом, чтобы взгляд не останавливался на нём без приглашения.
Пропорция — не строгая формула, но важнее не точные цифры, а сама диспропорция. Если, подсчитав количество элементов с высоким акцентом на экране, вы получаете больше трёх-четырёх, бюджет перерасходован, и решение — не сделать главный элемент ещё громче в компенсацию, а вернуться и понизить статус чего-то другого. Политически это часто самая сложная часть работы. Все, кто вносил контент в экран — маркетинг написал заголовок, продукт хочет выделить фичу, продажи хотят видимый отзыв клиента, юристы хотят заметный дисклеймер, — убеждены, что их вклад заслуживает акцента. Работа над иерархией означает, что большинству этих участников нужно вежливо, но чётко объяснить: их контент останется на странице, просто не будет «кричать».
Полезный приём для соблюдения этого бюджета на ревью — буквально посчитать количество «громких» элементов на статичном скриншоте: всё в насыщенном цвете, всё жирное, всё крупное, всё в рамке с тенью или бордером. Если счёт превышает три-четыре, можно предсказать, даже не тестируя на пользователях, что иерархия будет восприниматься запутанно, независимо от того, насколько отполированы отдельные элементы. Этот подсчёт грубоват, но быстр, и он ловит огромную долю проблем с иерархией ещё до юзабилити-теста.
Разбор примера: исправляем баннер анонса функции
Абстрактные принципы легче применять на конкретном кейсе, так что разберём реальный паттерн: баннер, анонсирующий новую функцию внутри SaaS-продукта — такой, что висит наверху дашборда две недели, а потом команда списывает его как «не дающий прироста по внедрению».
Оригинальная версия, доставшаяся мне, выглядела так: градиентный фон, переходящий из брендового синего в фиолетовый, жирный белый заголовок на 24px, подзаголовок в 16px белым, маленькая декоративная иконка лампочки, бейдж «Новое» ярко-жёлтого цвета, белая кнопка с тенью «Попробовать сейчас» и крестик закрытия в углу. Каждый из этих элементов по отдельности был вполне оправдан. Вместе они создавали баннер, про который пользователи говорили, что «замечают, но не читают», — а это почти всегда признак того, что самый громкий элемент и самый важный элемент — не одно и то же.
Если посмотреть через призму бюджета акцентов: градиентный фон конкурировал за внимание с белым текстом поверх него, потому что пёстрый, переливающийся цветом фон сам по себе — высококонтрастный элемент, и он боролся с текстом за один и тот же визуальный регистр. Жёлтый бейдж «Новое», выбранный, потому что жёлтый сам по себе цепляет внимание, оказался самым громким элементом баннера по насыщенности цвета — громче кнопки, которая была единственным элементом, связанным с реальным результатом (внедрением функции). Иконка лампочки функционально ничего не добавляла, но при этом занимала место и добавляла ещё одну точку контраста, которую глазу приходилось «разгадывать». Шесть элементов работали примерно на одном уровне акцента, и взгляд не получал чёткой инструкции, с чего начинать и чем заканчивать.
Решение было не в том, чтобы сделать кнопку крупнее или добавить ей ещё цвета — это просто добавило бы седьмой громкий элемент в уже перегруженный бюджет. Вместо этого в переработке всё остальное понизили на уровень, чтобы кнопка могла стать единственным громким элементом. Градиентный фон превратился в плоский, приглушённый нейтральный тон — по-прежнему в духе бренда, просто тише, так что он перестал конкурировать с текстом на переднем плане за контраст. Заголовок остался примерно того же размера, но перешёл от жирного белого на насыщенном фоне к тёмному, высококонтрастному тексту на теперь нейтральном фоне — что на самом деле даёт более сильное контрастное соотношение, просто более спокойное. Бейдж «Новое» уменьшился, потерял жёлтый цвет и стал маленькой приглушённой «таблеткой» — присутствующей, информативной, но не кричащей. Иконку лампочки убрали полностью: она не несла смысловой нагрузки, только визуальный шум. Кнопка сохранила белую заливку, но получила единственный насыщенный, брендовый цвет на всём баннере, зарезервированный исключительно для неё, плюс чуть больше внутренних отступов, чтобы ей было, где «дышать» с обеих сторон, — используя рычаг пространства для усиления её важности вместо опоры только на размер.
В итоговом баннере был ровно один громкий элемент (кнопка — за счёт цвета и пространства), один средний (заголовок — за счёт размера и положения) и всё остальное — тихое. Кликабельность по кнопке заметно выросла в следующем периоде замеров — не потому что сама кнопка стала убедительнее в изоляции, а потому что наконец получила возможность быть очевидным следующим шагом, а не одним из шести элементов, борющихся за одну и ту же долю секунды внимания. Содержание баннера при этом не поменялось вообще. Изменилось только то, куда был потрачен бюджет акцентов.
Этот паттерн повторяется на любом масштабе — от одного баннера до целого маркетингового сайта. На главных страницах регулярно встречаются пять «героев», наставленных друг на друга: собственно hero-секция, затем блок статистики с жирными цифрами, затем сетка функций с жирными заголовками, затем отзыв с крупной цитатой, затем жирный CTA-блок — и каждая секция, спроектированная в изоляции в рамках отдельного спринта, по отдельности выглядит нормально. Но просматриваемые подряд, в виде непрерывного опыта, они гасят друг друга. Решение почти никогда не в переработке какой-то отдельной секции. Оно в том, чтобы решить для всей страницы в целом, какой один-два момента действительно заслуживают самого громкого оформления, и приглушить всё остальное.
Пять паттернов провала, которые стоит назвать
Некоторые ошибки в иерархии повторяются так часто в совершенно не связанных между собой проектах, что их стоит называть по отдельности — ведь назвав паттерн, вы сможете поймать его в собственной работе ещё до того, как его увидит клиент.
Паттерн «жирное всё». Возникает, когда дизайнер, не уверенный в том, что действительно важно, подстраховывается, делая сразу несколько элементов жирными — несколько заголовков, несколько подписей, несколько цифр. Жирный шрифт должен быть редким сигналом; когда 40% текста на экране жирное, взгляд перестаёт воспринимать жирность как информацию и начинает воспринимать её как базовую линию — а значит, единственная вещь, которая действительно должна была выделяться, больше не выделяется. Решение почти всегда вычитающее: выбрать одну вещь, которую стоит оставить жирной, и вернуть остальным обычное начертание.
Градиентный суп. Градиенты были действительно модны какое-то время, и многие интерфейсы до сих пор используют их по умолчанию в качестве декоративного приёма на кнопках, карточках и фонах — часто несколько разных градиентов на одном экране. Градиенты по своей природе более контрастны и визуально активны, чем плоский цвет, поэтому экран с четырьмя разными градиентными решениями функционально содержит четыре громких элемента, конкурирующих друг с другом, даже если дизайнер сознательно хотел сделать фокусной только одну из них. Если используете градиент — используйте ровно один, и убедитесь, что он на том единственном элементе, который вы больше всего хотите показать.
Инфляция теней. Карточные UI-паттерны (дашборды, админ-панели, канбан-доски) особенно подвержены этой проблеме: каждая карточка получает тень, потому что «ей нужно чувствовать себя приподнятой», и вскоре каждый контейнер на экране парит с одинаковым визуальным весом — а это полностью противоречит смыслу возвышения как сигнала. Тени должны обозначать реальные отношения по оси z: это модальное окно выше фона, этот выпадающий список выше этого перечня, — а не применяться равномерно как текстура. Если тень есть у всего, не приподнято ничего — это просто новое плоское состояние.
Иконочный шум. Иконки должны ускорять распознавание, но боковая панель или страница настроек, где у каждой подписи есть парная иконка, часто замедляет распознавание, потому что глазу приходится обрабатывать вдвое больше визуальных элементов, чтобы извлечь тот же объём информации, а большинство этих иконок (шестерёнка для «настроек», колокольчик для «уведомлений») не добавляют смысла сверх того, что уже сообщает текстовая подпись. Иконки оправдывают своё место, когда полностью заменяют текст (в стеснённых по месту интерфейсах) или когда сообщают что-то, что текст не может передать так же быстро (статусный цвет, предупреждающий треугольник). Декоративные иконки, которые просто стоят рядом с подписью, уже говорящей то же самое, — это визуальный вес, потраченный без всякого выигрыша для иерархии.
Макет с выравниванием всего по центру. Центрирование кажется нейтральным и безопасным выбором, поэтому его используют по умолчанию на маркетинговых страницах, но центрированные макеты полностью убирают один из пяти рычагов акцента — положение относительно естественного потока чтения, — потому что каждый элемент оказывается на одной вертикальной оси без лево-правых отношений, устанавливающих приоритет. Страница, где hero-текст, подзаголовок, кнопка и изображение идеально отцентрированы друг над другом, часто в итоге полагается исключительно на размер для создания иерархии, потому что положение и выравнивание нейтрализованы. Асимметричные макеты, применённые осознанно, дают вам дополнительный рычаг бесплатно.
Ни один из этих пяти паттернов не является «неправильным» как изолированный приём — жирный текст, градиенты, тени, иконки и центрированные макеты — всё это легитимные инструменты. Они становятся паттернами провала именно тогда, когда применяются равномерно, как стиль по умолчанию, а не выборочно, как решение иерархии. Проблема не в инструменте. Проблема в отсутствии решения о ранжировании до того, как инструмент был применён.
Быстрый аудит для любого существующего экрана
Чтобы поймать большинство проблем с иерархией, не нужен формальный процесс — нужно несколько быстрых тестов, которые можно провести на скриншоте меньше чем за минуту, до того как изменится хоть один пиксель.
Тест прищуривания. Буквально прищурьтесь на экран или размойте его в графическом редакторе, пока отдельный текст не станет нечитаемым и не останутся только формы, цвета и контраст. То, куда в этом размытом состоянии притягивается ваш взгляд, и есть то, что ваша иерархия на самом деле сообщает, независимо от того, что написано в контенте. Если тест прищуривания тянет взгляд к декоративному фоновому паттерну вместо основной кнопки, ваша иерархия и приоритеты контента расходятся, и никакой копирайтинг это не исправит — визуальная система перебивает сообщение.
Пятисекундный тест. Покажите экран человеку, незнакомому с проектом, на пять секунд, а затем спросите, что он запомнил. Если он не может назвать основное действие или главную мысль, иерархия не справилась со своей задачей, каким бы привлекательным ни показался экран. Это дешёвый, быстрый и отрезвляющий тест, который стоит провести на собственной работе перед ревью с клиентом, — он ловит проблемы, которые детальная дизайн-критика, когда вы двадцать минут вглядываетесь в детали, никогда не поймает, потому что вы уже потеряли способность видеть экран глазами того, кто видит его впервые.
Тест в оттенках серого. Полностью обесцветьте экран и посмотрите снова. Хорошая иерархия в основном выживает в оттенках серого, потому что её несут размер, насыщенность, пространство и положение, а не только цвет. Если экран «рассыпается» в оттенках серого — если то, что вы хотите, чтобы люди заметили в первую очередь, растворяется в той же серой массе, что и всё остальное, — значит, вы полностью полагались на цвет для выполнения всей работы иерархии, а это рискованно, потому что цвет — рычаг, наиболее подверженный требованиям доступности, калибровке дисплея и ограничениям бренда, которые могут измениться позже.
Подсчёт громких элементов. Как уже упоминалось, буквально посчитайте количество высококонтрастных, жирных, крупных или насыщенных по цвету элементов на экране. Больше трёх-четырёх на одном экране — надёжный предсказатель запутанного опыта, независимо от того, что это за конкретные элементы.
Тест одного предложения. Напишите одно предложение, описывающее, что этот экран хочет, чтобы пользователь сделал или узнал, в порядке приоритета. «Увидеть баланс счёта, затем перевести деньги, затем посмотреть последние транзакции» — это утверждение об иерархии. Если вы не можете уложить это предложение в пятнадцать слов, значит, экран пытается сделать слишком много одновременно, и никакое визуальное оформление не спасёт список приоритетов, который на самом деле не был определён.
Прогон этих четырёх-пяти тестов занимает меньше времени, чем редизайн одного компонента, и они поймают большинство провалов иерархии до того, как те дойдут до презентации клиенту или юзабилити-теста. Ценность раннего прогона в том, что он переформатирует разговор об обратной связи. Вместо того чтобы клиент говорил «мне не очень нравится, как это выглядит» — расплывчатое, трудноприменимое замечание, — вы можете провести его через то, почему тест прищуривания приземляется не на тот элемент, превратив субъективный спор о вкусе в объективную, демонстрируемую проблему с понятным решением.
Более глубокий урок, пронизывающий все примеры этой статьи, в том, что иерархия — это решение, которое вы принимаете до того, как открыть дизайн-инструмент, а не эффект, который вы применяете после. Украшательство — это то, что вы добавляете к элементам. Иерархия — это то, что вы решаете об их отношениях, а затем выражаете через сдержанность в той же мере, что и через акцент. Лучший комплимент хорошо спроектированному экрану — не «выглядит потрясающе», а «я точно знал, что делать». Этот второй комплимент заслужить гораздо труднее, и он почти никак не связан с тем, сколько визуального лоска вложено в отдельный элемент, зато напрямую связан с решениями о ранжировании, которые были приняты ещё до того, как к чему-либо вообще прикоснулся этот лоск.
