Каким должен быть дизайн таблиц

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

Таблицы в интернете

Недавно нам попалась статья Мэтью Стрёма о дизайне таблиц данных. В ней он рассуждает о том, как правильно оформлять таблицы для представления информации в интернете. Некоторые советы, на наш взгляд, обязательны к применению.

Пару слов об истории. На заре развития интернет-технологий таблицы были везде, даже верстка сайтов была табличной.Таблицы всегда считались самым простым, удобным и наглядным способом представления данных. Откройте учебники или пособия, и вы наверняка обнаружите там множество таблиц. Но с книгами проще, вы всегда видите перед собой страницу целиком, а вот интернет-страницы часто приходится перематывать, это усложняет работу с таблицами.

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

Тем не менее, таблицы по-прежнему существуют и далеко не всегда для них можно найти достойную альтернативу. А поскольку от таблиц нам все равно не избавиться (да это и не нужно), давайте научимся их правильно оформлять.

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то - по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

• цифры выравниваем по правому краю;
• текст выравниваем по левому краю;
• заголовки выравниваем по той же стороне, что и данные под ними (если текст - по левому краю, если цифры - по правому);
• выравнивание по центру не используем или используем только в качестве исключения.

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

Метки помогут сократить объем данных

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

Не забывайте про название

Таблица - это вполне самостоятельный элемент, который должен иметь название, причем короткое, но емкое. Пользователь не должен догадываться по контексту, какие данные вы хотите ему предоставить, это должно быть понятно из названия. Кроме того, таблица легко может быть вырвана из контекста. На нее могут ссылаться из других источников, да и вы сами еще не раз можете к ней вернуться и использовать в других материалах или презентациях. Хорошее название таблицы избавит вас от необходимости писать дополнительные пояснения.

Границы и фон

Печатники делали границы таблиц тонкими, чтобы экономить чернила. В интернете чернил, конечно, нет, но и необходимости в толстых линиях тоже. Если вы правильно структурировали и выровняли данные в таблице, то можно обойтись и без дополнительных разделителей, информация будет легко восприниматься. Кроме того, избавление от линий позволит сократить расстояние между элементами в таблице и сделает ее более компактной.

Не увлекайтесь раскрашиванием ячеек таблицы в разные цвета, использование фона оправдано только тогда, когда необходимо показать разницу в областях, например, отделить единичные значения от суммарных. Не используйте большую цветовую палитру. Таблицы должны быть монохромными, иначе у пользователей могут возникнуть резонные вопросы: “Что обозначает это разделение и стоит ли обращать на него внимание?” Кроме того, если вашу таблицу решат распечатать в ЧБ, вся ваша цветосемантика пропадет.

Вместо итога

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