Хабрахабр

[Перевод] Мельчайшее различие

В июле команда, которая занимается дизайн-системой в компании 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 стал выглядеть иначе. Тут видно, что теперь десятичная точка всегда будет находиться в одной и той же позиции. Особенно — в таблицах. Но по-настоящему увидеть преимущества нового способа вывода данных перед старым можно только там, где приходится выводить большие колонки цифр.

Старый и новый варианты вывода таблицы

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

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

Уважаемые читатели! Приходилось ли вам сталкиваться с ситуациями, когда небольшая настройка шрифтового оформления проекта серьёзно улучшала его внешний вид и удобство работы с ним?

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»