Что разберём
1Что меняется на этой ступени
На Junior экран становится ровным. На Middle он становится понятным: с первого взгляда видно, что здесь главное.
| Junior | Middle | |
|---|---|---|
| Главный вопрос | Где стоит блок и какой у него отступ | Что на экране главное и видно ли это сразу |
| Инструменты | Набор отступов и сетка колонок | Размер, вес, расстояние, положение; цвет — последним |
| Проверка | Включить сетку и замерить отступы | Прищуриться, снять чёрно-белый снимок, показать экран на три секунды |
| Плотность | Одна на все экраны | Своя для рабочего экрана и для промо, и её можно объяснить |
Набор отступов и сетка из прошлого урока никуда не деваются: на них и строится иерархия. Просто теперь каждое расстояние отвечает не только на вопрос «из набора ли оно», но и на вопрос «что оно выделяет».
2Иерархия без цвета
Иерархия — порядок, в котором взгляд проходит по экрану: сначала главное, потом всё остальное.
В Nielsen Norman Group визуальную иерархию определяют именно так: это организация элементов, при которой взгляд проходит по ним в порядке задуманной важности.
Строят её несколькими инструментами. У NN/g это цвет и контраст, масштаб и группировка.
Apple в гайдлайнах добавляет положение: самое важное ставят ближе к верху и к ведущему краю окна, то есть при письме слева направо — к левому.
Для этой ступени возьмём четыре инструмента, которые работают без цвета:
- Размер. Главное крупнее остального.
- Вес. Главное жирнее или темнее; у кнопки — заливка вместо рамки.
- Расстояние. Связанное стоит ближе, а вокруг главного больше воздуха. В IBM Carbon прямо пишут: элемент с бо́льшим пустым пространством вокруг воспринимается как более важный.
- Положение. Главное выше и левее, второстепенное — ниже и в стороне.
Лаборатория иерархии
Карточка товара ниже пока плоская: все строки одного размера и веса, расстояния одинаковые.
Включайте инструменты по одному и смотрите, что каждый даёт. Потом нажмите «Без цвета»: если главное осталось главным, иерархия держится не на цвете.
Сколько уровней выдерживает экран
NN/g даёт конкретные ограничения:
- размеров — не больше трёх: мелкий, средний и крупный;
- самое важное — самое крупное, и крупных элементов не больше двух, иначе они перестают выделяться;
- вариаций контраста в сложном макете — тоже не больше трёх: если контрастно всё, не выделяется ничего.
На карточке выше как раз три уровня: крупные название и цена, обычная кнопка, мелкие приглушённые подробности. Четвёртый уровень здесь уже был бы лишним.
3Выделить, приглушив
Главное становится заметнее не только когда его усиливают, но и когда приглушают всё вокруг.
В книге Refactoring UI этому посвящена отдельная глава — «De-emphasize to emphasize».
Для сложных рабочих приложений NN/g пишет о том же. Выделить важное не всегда значит добавить ему цвета или жирности: убрать лишнее бывает так же действенно.
У любого неясного экрана три возможных хода:
- Усилить главное. Крупнее, жирнее, выше, с воздухом вокруг.
- Приглушить остальное. Вторичный текст мельче и светлее, вторичные кнопки — ссылкой, подписи мельче значений.
- Убрать лишнее. Рамки вокруг каждого блока, разделители, повторы, всё, без чего задача экрана решается.
Проверьте себя
Восемь экранов магазина. С какого хода начать?
На карточке товара одинаково жирные название, цена, рейтинг и срок доставки.
Приглушить остальноеНазвание и цена уже выделены. Рейтинг и срок доставки нужны, но они второстепенные: сделайте их обычным весом и мельче, и главное проявится само.
Цена набрана тем же кеглем, что и описание товара, и стоит в середине абзаца.
Усилить главноеЦену ищут глазами на каждой карточке. Её стоит вынести из текста отдельной строкой и сделать крупнее.
У каждого поля формы доставки своя рамка, у каждой группы полей — ещё одна, и вся форма тоже в рамке.
Убрать лишнееТри уровня рамок спорят друг с другом. Группы можно развести расстоянием, а рамку оставить только у полей.
Подпись «Сумма заказа» набрана крупнее самой суммы.
Приглушить остальноеЧеловек ищет глазами число. Подпись делают мельче и светлее значения, а сумму оставляют заметной.
Главная кнопка того же размера и веса, что и вторичные, и отличается от них только цветом.
Усилить главноеНа чёрно-белом снимке такая кнопка потеряется. Дайте ей заливку, размер или отдельное место — цвет пусть будет дополнением.
Над заголовком экрана заказа — пять пунктов меню, баннер акции и строка поиска.
Убрать лишнееНа экране оформления заказа всё это отвлекает от задачи. Меню и баннер на этом шаге можно убрать совсем.
Рядом с кнопкой «В корзину» стоят такие же кнопки «Сравнить», «В избранное» и «Поделиться».
Приглушить остальноеЭти действия нужны, но реже. Сделайте их ссылками или значками с подписью, и главная кнопка останется одна.
Заголовок раздела «Доставка» набран так же, как текст под ним.
Усилить главноеБез заметного заголовка раздел не начинается. Его делают крупнее или жирнее текста и ставят с воздухом сверху.
4Проверка за три секунды
Иерархию проверяют не глазом автора, который помнит, что задумал, а быстрым взглядом со стороны.
Три способа проверить
- Прищуриться или размыть макет. В NN/g описывают этот приём так: лёгкое размытие показывает группы и то, что выделено. В их примере макет размывают на 5, 10 и 20 пикселей, и на сильном размытии проявляется непредусмотренная иерархия — самым заметным становится случайный яркий элемент.
- Снять чёрно-белый снимок. NN/g советует переводить макет в оттенки серого, чтобы увидеть, где смысл держится только на цвете. Это требование доступности: по WCAG 2.2 цвет не должен быть единственным визуальным способом передать информацию или выделить элемент.
- Показать экран на несколько секунд. Это тест первого впечатления. У NN/g макет показывают на пять секунд или другой короткий срок, а потом просят описать увиденное. Для проверки с коллегой хватит трёх секунд: покажите чёрно-белый снимок и попросите ткнуть пальцем в главное.
Попробуйте на себе. Нажмите кнопку: экран сборщика заказов появится на три секунды и исчезнет. Потом вспомните, что на нём главное.
Экран появится на три секунды
5Плотность под задачу
Рабочий экран и промо-страница решают разные задачи, поэтому и воздуха в них разное количество.
В Material Design 3 информационную плотность определяют как количество содержимого на заданной площади. Меняют её полями, промежутками и внутренними отступами.
Высокая плотность нужна там, где много данных быстро просматривают и сравнивают: новости, финансы, дашборды. Низкая — где важнее одно сообщение, эстетика и простая навигация.
Там же замечают, что плотная раскладка ощущается серьёзнее и собраннее, а просторная — спокойнее и открытее.
IBM Carbon разводит то же самое по типографике:
- набор productive — для продукта, где важна экономия места и сосредоточенность на задаче;
- набор expressive — для страниц, которые читают и разглядывают, где успех меряют переходами и покупками.
| Рабочий экран | Промо-экран | |
|---|---|---|
| Кто смотрит и как долго | Сборщик, весь рабочий день | Покупатель, один раз и недолго |
| Что делает | Находит нужную строку, сравнивает, повторяет действие | Читает одно сообщение и решает, интересно ли |
| Что ценится | Сколько видно без прокрутки и как быстро найти нужное | Запомнится ли главное и захочется ли нажать |
| Как это выглядит | Отступы 4–8 внутри строк, мелкий кегль, цифры в столбик | Крупный заголовок, отступы 32–64, одна кнопка |
Рабочий: сборка заказов
| Ячейка | Товар | Шт. |
|---|---|---|
| A-12 | Lavazza Crema e Aroma, 1 кг | 2 |
| A-14 | Jardin Espresso Gusto, 1 кг | 1 |
| B-03 | Фильтры бумажные, 100 шт. | 1 |
| C-07 | Кофемолка ручная Hario | 1 |
Промо: кофе недели
Не давайте воздуху съесть рабочий экран
Если набрать экран сборщика с отступами промо-страницы, на него поместятся две строки заказа вместо четырёх. Остальное уйдёт под прокрутку.
Сборщику придётся листать каждый заказ, и так весь день.
Якоб Нильсен писал об этом ещё в 2011 году. Чем выше информационная плотность, тем меньше приходится перемещаться по экрану и тем вероятнее увидеть нужное.
Но забивать экран до отказа тоже нельзя, иначе человек перегружен.
6Где у плотности предел
Уплотнять можно отступы и строки. Нельзя уплотнять то, во что человек должен попасть пальцем или курсором.
| Источник | Минимальная цель нажатия |
|---|---|
| Material Design | 48 × 48 dp — около 9 мм на любом экране — и не меньше 8 dp между целями |
| Apple HIG | Обычно не меньше 44 × 44 pt |
| WCAG 2.2, критерий 2.5.8, уровень AA | 24 × 24 CSS px; меньше можно, если вокруг цели достаточно пустого места |
| WCAG 2.2, критерий 2.5.5, уровень AAA | 44 × 44 CSS px |
Как уплотняет Material
В Material Design у компонентов есть шкала плотности: 0 — по умолчанию, дальше −1, −2, −3. Каждый шаг обычно уменьшает высоту компонента на 4 dp.
Там же расписано, где плотность уместна, а где нет. Часть правил ниже — выбор даты и связь плотности с полями — из второй версии Material, со страницы «Applying density».
- Уплотнять можно списки, таблицы и длинные формы — там, где человек просматривает и сравнивает много информации.
- Уплотнять нельзя компоненты сфокусированных задач — выпадающие меню, выбор даты — и оповещения: снекбары и диалоги. Они теряют площадь нажатия и заметность.
- Чем плотнее компоненты, тем шире поля и промежутки сетки. Плотные компоненты на плотной сетке сливаются, и группы перестают различаться.
Уменьшенные компоненты Material включает только по выбору человека и не ставит по умолчанию, если цель нажатия станет меньше 48 × 48. Плотность раскладки — отступы, строки, промежутки — такого выбора не требует. Экран сборщика уплотнён именно раскладкой: строки стоят тесно, а кнопка осталась полноразмерной.
7Как объяснить свой выбор
На этой ступени «так красивее» уже не ответ. Про каждый экран нужно уметь сказать, почему плотность на нём именно такая.
Объяснение укладывается в три строки:
- кто смотрит на экран и как долго;
- что человек на нём делает;
- какая из этого получается плотность и что вы ради неё сделали.
| Экран сборщика | Кофе недели | |
|---|---|---|
| Кто и как долго | Сборщик на складе, весь день, сотни заказов | Покупатель из рассылки, один раз, полминуты |
| Что делает | Находит ячейку и число штук, отмечает взятое | Узнаёт, какой кофе, и решает, попробовать ли |
| Поэтому | Плотно: весь заказ без прокрутки, цифры в столбик, одна крупная кнопка | Свободно: одно название крупно, одно фото, одна кнопка с ценой |
ЭКРАН: ______________________ ПРОДУКТ: ______________________ 1. Кто смотрит и как долго: ______________________________________________________ 2. Что человек на нём делает: ______________________________________________________ 3. Поэтому плотность такая, и вот что я сделал ради неё: ______________________________________________________ ГЛАВНОЕ НА ЭКРАНЕ (одно): ______________________ Чем выделено без цвета: размер / вес / расстояние / положение Что приглушено или убрано: ____________________________ Проверка: чёрно-белый снимок, 3 секунды — показали на ________
8Задание
Соберите два экрана одного продукта — плотный рабочий и свободный промо — и напишите по три строки на каждый: почему здесь такая плотность.
Часть 1 · Выбрать экраны, 15 минут
- Возьмите продукт, в котором есть и рабочая часть, и витрина: интернет-магазин и его склад, сервис записи и кабинет мастера, приложение банка и его реклама.
- Выберите рабочий экран, на котором человек проводит много времени и повторяет действия.
- Выберите промо-экран, который видят один раз: акция, новая функция, приглашение.
- Для каждого запишите одно главное, что человек должен увидеть первым.
Часть 2 · Собрать экраны, полтора часа
- Сначала в сером. Иерархию стройте размером, весом, расстоянием и положением. Цвет — только в конце.
- Рабочий экран — плотно, но с воздухом между частями экрана. Цели нажатия не меньше 44–48.
- Промо — свободно: одно сообщение, крупный заголовок, одна кнопка.
- Приглушите второстепенное на обоих экранах и уберите то, без чего задача решается.
- Отступы — из вашего набора, как в прошлом уроке. Плотность меняет выбор шагов из набора, сам набор остаётся прежним.
Часть 3 · Объяснить и проверить, 30 минут
- Заполните шаблон «Три строки» для каждого экрана.
- Снимите чёрно-белые снимки обоих экранов.
- Покажите каждый снимок коллеге на три секунды и попросите ткнуть пальцем в главное.
- Если показали не туда, вернитесь к экрану: усильте главное, приглушите или уберите остальное — и проверьте снова, с другим человеком.
Что должно получиться
- Два экрана одного продукта — рабочий и промо — в цвете и чёрно-белыми снимками.
- Два заполненных шаблона «Три строки».
- Запись проверки: куда показал каждый человек за три секунды и что вы после этого поправили.
План работы: 15 минут на выбор экранов, полтора часа на экраны, полчаса на объяснение и проверку. Всего — около двух с половиной часов.
Частые сложности
- «Без цвета главного не видно». Значит, иерархия держалась на цвете. Начните с размера и веса главного, потом разведите группы расстоянием.
- «Рабочий экран всё равно кажется тесным». Проверьте, есть ли воздух между частями экрана: плотными должны быть отдельные участки.
- «Промо выглядит пустым». Пустое место на промо — это нормально, если главное сообщение заметно. Не добавляйте блоки только ради того, чтобы заполнить экран.
- «Коллега показал на картинку». Крупное и контрастное фото перетянуло внимание. Уменьшите его или приглушите, либо сделайте его главным сознательно.
9Чек-лист и ошибки
Иерархия построена, если
- У экрана одно главное, и его можно назвать
- Главное выделено размером, весом, расстоянием или положением, а не только цветом
- Размеров на экране не больше трёх, крупных элементов не больше двух
- Второстепенное приглушено: мельче, светлее или ссылкой
- На чёрно-белом снимке главное остаётся главным
- За три секунды человек показывает на то, что вы задумали
Плотность подобрана, если
- Рабочий экран показывает всё нужное для задачи без лишней прокрутки
- Между частями плотного экрана есть воздух
- Цели нажатия не меньше 44–48, даже на плотном экране
- Промо передаёт одно сообщение и ведёт к одной кнопке
- Про каждый экран есть три строки: кто, что делает, поэтому такая плотность
Что мешает
- Иерархия на цвете. Без цвета экран становится плоским, а часть людей разницы не увидит вовсе.
- Всё выделено. Пять жирных строк и три заметные кнопки — главного нет.
- Подпись важнее значения. Подпись поля крупнее или темнее того, что она подписывает.
- Одна плотность на все экраны. Рабочий экран с воздухом промо-страницы, а промо — плотный, как таблица.
- Уплотнены цели нажатия. Кнопки и пункты меню меньше 44–48 ради того, чтобы влезло больше.
- Проверка глазами автора. Автор помнит, что задумал, и видит это. Проверяет только взгляд со стороны.
10Три ступени темы
На прошлой ступени экран стал ровным, на этой — понятным. На следующей правила, по которым вы это делаете, должны заработать у всей команды.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior | Выбрать набор отступов и держаться его; группировать связанное расстоянием; класть блоки в колонки; проверять выравнивание сеткой | Все отступы на экране из набора, и про каждый можно сказать, почему он такой |
| Middle — этот урок | Строить иерархию размером, весом и расстоянием, а цвет добавлять последним; подбирать плотность под задачу и объяснять выбор | На чёрно-белом снимке человек за три секунды показывает, что здесь главное |
| Senior | Записывать шкалу отступов и типовые раскладки продукта; проверять чужие экраны по правилам без придирок; объяснять разработке, как правила ложатся на сетку в коде | Экран, собранный другим дизайнером по вашим правилам, встаёт в продукт без переделки раскладки |
Что почитать дальше
- Refactoring UIВосемь глав группы «Hierarchy is Everything» — от «Not all elements are equal» до «Semantics are secondary», в том числе «De-emphasize to emphasize». Под «цветом» авторы понимают светлоту текста — в уроке это вес и приглушение. Глава «Labels are a last resort» открыта на сайте книги.
- Visual Hierarchy in UX: DefinitionОпределение иерархии и три её инструмента с ограничениями: не больше трёх размеров, не больше двух крупных элементов, не больше трёх вариаций контраста. Прищур-тест на снимке Spotify с размытием 5, 10 и 20 px. Статья 2021 года.
- 8 Design Guidelines for Complex ApplicationsВосемь советов для сложных приложений специалистов; к уроку относятся два: убирать лишнее, не урезая возможностей, и выделять важное удалением шума, а не жирностью и цветом. Остальные шесть — про сценарии и обучение. Статья 2020 года.
- Density и Applying densityКогда нужна высокая плотность, когда низкая и что нельзя уплотнять: меню, выбор даты, снекбары и диалоги. Вторая версия добавляет правило «чем плотнее компоненты, тем шире поля и промежутки», а обе включают плотные компоненты только по выбору человека.