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

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

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

Эта статья — практическая версия этого решения. Пять рычагов, шесть реальных целевых страниц от Linear, Vercel, Stripe, Figma, Arc и Apple с текущими изменениями в иерархии, три обзора «до/после», демонстрирующие распространенные ошибки и их исправление, а также контрольный список аудита Figma, который можно запустить на любом рабочем файле за двадцать минут перед отправкой в ​​разработку.

Визуальная иерархия, рабочее определение

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

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

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

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

Пять рычагов, которые создают иерархию

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

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

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

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

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

Размер определяет первое прочтение

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

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

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

Linear делает это на странице с описанием функций. Заголовок огромный, вспомогательный текст мелкий, навигация мелкая, логотип мелкий. Первый взгляд приковывает один элемент контента, и взгляд падает на него еще до полной загрузки страницы. Сравните это с типичной главной страницей SaaS-компании, где заголовок, навигация и иллюстрация главной страницы примерно одинакового размера. Взгляд разделяется, путь чтения нарушается.

Размер также относителен. Заголовок размером 48 пикселей на странице, где основной текст занимает 16 пикселей, выглядит эффектно. Заголовок размером 48 пикселей на странице, где основной текст занимает 28 пикселей, — нет. Рейтинг определяется соотношением, а не абсолютным числом. Стремитесь к соотношению основного текста к тексту страницы не менее 2,5x, а в идеале 3x или выше, для главного элемента любой целевой страницы.

Вес разделяет основной и второстепенный текст

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

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

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

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

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

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

Пространство — недооцененный рычаг

Пустота — это не пустое пространство, это негативная форма, которая определяет приоритет каждого элемента.

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

Страницы товаров Apple — это мастер-класс. Заставка на странице товара iPhone часто представляет собой одну фотографию с короткой подписью под ней, окруженную пустым пространством. Элемент, которому отведено больше всего места, привлекает внимание, и Apple всегда побеждает на каждой странице. Продукт является основным, все остальное — вспомогательным, а рычаг пространства выполняет большую часть работы.

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

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

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

Контраст заставляет глаз сосредоточиться

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

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

Основной призыв к действию Stripe — это один высоконасыщенный цвет на фоне низконасыщенной страницы. Глаз мгновенно его находит, потому что это единственный насыщенный элемент во всем видимом пространстве. Linear делает то же самое с одной ярко-фиолетовой кнопкой на почти монохромной странице. Ни один из этих призывов к действию не является самым крупным элементом. Ни один из них не является самым тяжелым. Они привлекают внимание, потому что являются самым контрастным элементом на странице, и точка.

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

Контраст также имеет минимальный порог. Текст, выполненный серым цветом на слегка более темном сером фоне, отталкивает глаз и нарушает принципы доступности. Стремитесь к коэффициенту контрастности не менее 7:1 для текста и 4,5:1 для элементов пользовательского интерфейса. Ниже этих порогов уровень контрастности перестает создавать ранжирование и начинает вызывать усталость.

Анимация завершает последовательность

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

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

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

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

Полезное ограничение. Ограничьте анимацию одним элементом на область просмотра, плюс состояния взаимодействия (наведение курсора, фокус, активность) для одного основного CTA. Если одновременно анимируется более одного элемента, рычаг анимации не ранжируется, а служит украшением, и страница будет казаться беспокойной, не направляя взгляд в конкретное место. Анимация как инструмент ранжирования также естественным образом сочетается с концепцией принципы моушн-дизайна, где каждая анимация отвечает на вопрос, а не заполняет время.

Шесть реальных целевых страниц с комментариями

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

Linear, иерархия как сжатие

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

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

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

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

Vercel, иерархия как движение

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

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

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

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

Stripe, иерархия как сдерживающий фактор

Иерархия Stripe в основном невидима, что является высшей формой мастерства.

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

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

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

Figma, иерархия как плотность

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

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

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

Главное, в чем Figma упускает возможности. Навигация становится визуально перегруженной из-за нескольких основных элементов навигации, дополнительной навигации, кнопки «Контакты» и кнопки «Вход». Сжатие всего этого до одного основного призыва к действию в навигации снизило бы конкуренцию герою.

Arc, иерархия как бунт

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

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

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

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

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

Apple, иерархия как театр

Страницы товаров Apple — это мастер-класс по иерархии, основанной на прокрутке, где пространство и анимация управляют всем.

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

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

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

Хотите сайт, где каждая страница имеет продуманный путь чтения, а не гадание? Нанимайте Brainy. UXBrainy предоставляет услуги по аудиту иерархии и разработке полной дизайн-системы, а AppBrainy — разработку пользовательского интерфейса продукта для команд, которые хотят применить тот же подход к работающему приложению.

Три примера «до и после»

Знать рычаги — это одно, а исправить реальную страницу — совсем другое, поэтому вот три распространённые ошибки в иерархии и точное решение.

Первая. Герой с пятью конкурирующими элементами. На типичном герое SaaS-сайта есть заголовок, деко, основной призыв к действию (CTA), второстепенный CTA, полоса с логотипом клиента и иллюстрация героя — всё на первом экране. Каждый элемент привлекает внимание, но ни один из них не побеждает. Решение: выберите один элемент, который наиболее важен (обычно заголовок плюс основной CTA), займите первый экран только этими двумя элементами, а всё остальное переместите ниже линии сгиба. Теперь герой имеет чёткое первое впечатление.

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

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

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

Двадцатиминутный контрольный список аудита Figma

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

1. Тест на прищуривание. Прищурьтесь, глядя на макет, пока детали не размоются. Один элемент явно привлекает внимание? Если нет, у главного элемента проблемы с размером или толщиной.

2. Тест первого прочтения. Закройте страницу, откройте на секунду, снова закройте. Что вы прочитали? Если это не было основным сообщением, исправьте размер и контраст этого элемента.

3. Соотношение шрифта и объема. Сравните основной заголовок с основным текстом. Если соотношение меньше 2,5x, значит, размер недостаточно выкручен.

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

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

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

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

8. Контрастность CTA. Проверьте цвет основного CTA на фоне. Если коэффициент контрастности ниже 4,5:1, исправьте это перед выпуском.

9. Контрастность основного текста. Проверьте контрастность основного текста на фоне. Если коэффициент ниже 7:1, страница плохо читается.

10. Межстрочный интервал. Проверьте межстрочный интервал основного текста. Если он меньше 1,5 размера шрифта, страница выглядит как стена.

11. Отступы разделов. Проверьте расстояние между основными разделами. Если разделы размываются, рычаг пробела не разделяет элементы.

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

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

Часто задаваемые вопросы

Что такое визуальная иерархия в веб-дизайне?

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

Как создать визуальную иерархию на веб-сайте?

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

Каковы наиболее важные принципы визуальной иерархии?

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

Почему визуальная иерархия важна на целевых страницах?

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

В чем разница между визуальной иерархией и информационной архитектурой?

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

Шаблон, который упускают большинство страниц

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

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

Бренды, которые используют четкую иерархию (Linear, Stripe, Apple), все это усвоили. Бренды, выпускающие страницы со слабой иерархией, обычно попадают в ловушку аддитивности, когда каждый ежеквартальный обзор добавляет новый элемент в заголовок, новую выделенную жирным шрифтом фразу в основной текст, новый акцентный цвет в призыв к действию, и кумулятивный эффект перегружает первоначальный путь чтения. Решение редко сводится к редизайну. Решение — это аудит, удаление лишнего и возвращение к дисциплине, когда каждый рычаг используется для достижения одной цели за раз.

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

Если вам нужен сайт, где каждая страница имеет продуманный путь чтения и иерархию, которая выполняет свою работу в любом окне просмотра, нанять Brainy. UXBrainy предоставляет аудиты иерархии, дизайн-системы и полные проекты веб-дизайна с иерархией, заложенной в спецификацию. AppBrainy предоставляет пользовательский интерфейс продукта с той же дисциплиной, что и для авторизованных пользователей. Фреймворк, представленный на этой странице, — это то, что мы используем в каждом проекте, на каждой странице, перед выпуском продукта.