Скетч-дизайнер

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

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

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

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

Как не надо

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

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

Как надо

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

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

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

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

Исходник примера

—

#практика #первые_шаги