[Перевод] Мельчайшее различие
В июле команда, которая занимается дизайн-системой в компании Gusto, выдала кое-что, достойное восхищения. В течение трёх месяцев мы вкладывали в дело все силы, стремясь обновить корпоративные материалы, такие, как логотипы, цвета и шрифты. Но занимались мы не только этим. Мы чувствовали, что перед нами открылась возможность улучшить каждый компонент нашей библиотеки. Мы надеялись расширить возможности проекта, убрав компоненты, дублирующие друг друга, и избавившись от технического долга. Тогда же мы начали разбираться с множеством давних проблем, касающихся доступности проекта для людей с ограниченными возможностями.
Я с нетерпением ждал того момента, когда смогу привести их к достойному виду.
Вот как они выглядели до того, как мы серьёзно взялись за редизайн проекта. Меня уже некоторое время беспокоил дизайн наших таблиц.
Таблица до редизайна
Всё в такой таблице нормально читается. Если подобную таблицу поместить в дизайн-документ, наподобие такого, с которыми работают в Figma, то особых проблем обнаружить не удастся. Но как только компонент начинает заполняться реальными данными, таблицы начинают выглядеть совсем нехорошо.
Некоторые из этих компаний имеют десятки сотрудников. Дело в том, что мы, в компании Gusto, помогаем другим компаниям выполнять зарплатные расчёты. Например — это детализация структуры заработной платы сотрудника, а также — подробные сведения по налогам различных уровней. В результате мы постоянно показываем нашим клиентам большие объёмы сложной информации. Значит это и то, что нашей команде дизайнеров нужно приложить все силы к тому, чтобы этот компонент хорошо показывал бы себя при выводе больших объёмов данных. Это значит, что компонент, реализующий таблицу, играет для наших клиентов весьма важную роль. Например — в ситуации, показанной ниже.
Пример заполненной таблицы
Правильно ли начисляется зарплата этому работнику? Проведя исследование пользовательского поведения, мы выяснили, что наши клиенты обычно просматривают подобные таблицы, пытаясь разобраться в выводимых ими данных. Нет ли тут ошибки? Все ли налоговые суммы выглядят корректно? Однако в пользовательском интерфейсе была одна проблема, которая беспокоила меня уже многие годы. К сожалению, мы мало что можем сделать в плане UX для того, чтобы облегчить нашим клиентам обработку налогов. И я знал о том, что её решение способствовало бы улучшению восприятия таблиц.
Для того чтобы поговорить об этой проблеме и о её решении, давайте для начала поговорим о том, как в наборах описаний символов, представляющих собой шрифты, устроены цифры.
В результате, например, цифра 4, скорее всего, будет шире, чем цифра 1. В большинстве шрифтов цифры обычно имеют разную ширину. Когда цифры используются в простых предложениях — разная ширина цифр — это совершенно нормально. И обычно никакой проблемы тут нет. 55 может быть длиннее или короче, чем $9,993. Мы, в общем-то, не задумываемся и не беспокоимся о том, что нечто вроде $1,235. 24.
Цифры имеют разную ширину
Это означает, что при быстром просмотре таблицы $1000. Но вот в других случаях, когда некие числа выводятся группами, например — в таблицах, это может превратиться в настоящий кошмар из-за того, что десятичная точка выравнивается по-разному, даже в том случае, если цифры, рядом с которыми она расположена, выровнены правильно. 00. 00 может неожиданно стать очень похожим на $100.
Очень внимательно посмотрите на следующий пример, приблизьтесь к монитору, если хотите, и обратите внимание на то, что числа здесь выровнены неправильно.
Неправильно выровненные числа
Единственное различие между этими двумя числами заключается в том, что в них используются различные глифы. Эти числа выведены одним и тем же стилем. А так — это цифры из одного шрифта, при их выводе используется одинаковый межбуквенный интервал.
Нам хотелось бы, чтобы, в идеале, все числа были бы выровнены верно, и чтобы десятичная точка всегда занимала бы одну и ту же позицию, что улучшило бы удобочитаемость таблиц.
Речь идёт о возможности OpenType, встроенной во многие шрифты, касающейся использования альтернативных начертаний для цифр. Хорошо то, что в вебе решение этой проблемы существует уже многие годы. Включить эту возможность можно так: Эта возможность может называться в описании шрифта, например, как «Tabular Figures», «табличные цифры», «моноширинные цифры».
.table { font-variant-numeric: tabular-nums;
}
Для активации этой возможности в Figma нужно выделить текст и перейти к настройкам параметров OpenType в правой части экрана. Ниже показано то, как это выглядит сейчас, но в будущем эта панель вполне может измениться.
Настройка шрифта в Figma
Поэтому не рассчитывайте на то, что выбранный вами шрифт будет поддерживать особые символы для вывода чисел. Важно отметить и то, что эту возможность поддерживают не все шрифты. Но, в любом случае, то, что получается в итоге, стоит усилий, затраченных на поиск подходящего шрифта. Всегда всё проверяйте. Не стоит и говорить о том, что, благодаря использованию опции font-variant-numeric: tabular-nums
, пара чисел в его правой части выглядит куда лучше, чем пара чисел слева. Только взгляните на следующий рисунок.
Использование опции font-variant-numeric: tabular-nums
Можно заметить и то, что символ 1
в используемом здесь шрифте Centra стал выглядеть иначе. Тут видно, что теперь десятичная точка всегда будет находиться в одной и той же позиции. Особенно — в таблицах. Но по-настоящему увидеть преимущества нового способа вывода данных перед старым можно только там, где приходится выводить большие колонки цифр.
Старый и новый варианты вывода таблицы
В то время, как раньше каждое число жило своей жизнью, использование табличных цифр позволило облегчить быстрый просмотр таблиц и упростило пользователям нашей системы проверку табличных данных. Я полагаю, что новый и старые варианты таблицы различаются очень сильно!
А когда начинаешь сравнивать старый вариант с новым, начинаешь понимать, что мельчайшее изменение в оформлении пользовательского интерфейса способно очень сильно повлиять на внешний вид проекта. Неожиданно оказалось так, что таблица, оформленная по-новому, выглядит гораздо аккуратнее, чем старая таблица.
Уважаемые читатели! Приходилось ли вам сталкиваться с ситуациями, когда небольшая настройка шрифтового оформления проекта серьёзно улучшала его внешний вид и удобство работы с ним?