Минимизируй количество начертаний

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

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

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

Я нарисовал выдуманный пример, основанный на реальных событиях. Так могла бы выглядеть дебетовая карта в списке продуктов интернет-банка.

Как не надо

1. Дизайнер делает название карты жирным 16, думая, что это самая важная информация.

2. Баланс по карте втискивает в ту же строку, не думая о том, что он может быть шестизначным, а название карты тоже может меняться. Жирный шестнадцатый для баланса — ту мач, и его уменьшают до 12. Чтобы баланс не терялся, красит его в другой цвет. Уже шумит, потому что слева есть цветная иконка.

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

4. От другого настойчивого продукт-менеджера прилетает задача выделить очень важную услугу, чтобы 3DSecure подключали. Просят сделать очень видным. Зафигачим красным блоком. И всё, теперь святых выноси. Глазу не за что зацепиться, потому что всё яркое и перебивает друг друга.

Как надо

Условимся, что в списке продуктов у нас будет только два размера шрифта: 13 для главного и 11 для второстепенного. За любые другие размеры будем бить по рукам.

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

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

Итого: из четырёх стилей сделали два. Так мы повысили читаемость элемента в списке продуктов.

В оранжевой иконке те же два размера, 11 и 13. Повезло, что слово Visa короткое и позволяет использовать 11. Если бы был UnionPay или Mastercard, я бы уменьшил шрифт или отвертелся бы логотипами.

Я веду Скетч-дизайнер — телеграм-канал о дизайне интерфейсов в Скетче и анимацию в Фреймере. Этот пост из рубрики для начинающих: #первые_шаги. Также веду канал UX-гайд про проектирование.