Таблицы в дизайне. Подробный разбор. -

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

Иными словами, я хочу составить мануал, содержащий все азы. Цель — упростить другим путь, который я сам преодолевал с трудом.
Всё, что пишется в этом блоге, пишется исходя из двух критериев:

 

1. Я понимаю что я делаю.

2. Я понимаю какого результата я добиваюсь своими действиями.

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

Марка	Цена	Пробег
БМВ	1000000	500000
ЛАДА	200000	50000

 

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

 

 

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

 

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

Часть первая: Формат ячеек

 

 

Допустим, мне нужно сравнить пробег у БМВ и ЛАДЫ. Я нахожу в шапке таблицы колонку «пробег», нахожу в столбце «марка» «БМВ» — первая после шапки и «ЛАДА» — вторая после шапки, провожу взглядом горизонтально, и нахожу два соседних поля для сопоставления: 500 000 и 50 000. Как мы можем упростить восприятие таблицы? Начать можно с визуального отделения разных по смыслу фрагметов таблицы. К примеру, вот так:

 

 

Логика у меня следующая: шапка таблицы являются легендой: пояснениями о содержании соответствующих ячеек. Она применима ко всем расположенным ниже ячейкам. Отделяя легенду от основного контента, мы помогаем пользователю сосредоточиться на самом контенте. Если дальше мне понадобится сравнить «ЛАДУ» с «ЖИГУЛЯМИ», я в столбце «марка» ищу соответствующую ячейку, отсчитываю её от шапки сайта: четвертая от шапки, перемещаюсь в столбец «пробег» и отсчитываю четвертую от шапки ячейку. Зная что первый столбик в таблице это «марка», а третий - «пробег», я не смотрю на шапку, а просто отсчитываю ячейки от неё. После первого изучения таблицы, пользователь через некоторое время спокойно ориентируется в таблице, не читая все поля, а просто скользя взглядом и отсчитывая нужные ячейки.

Давайте усложним таблицу: добавим ещё вертикальных и горизонтальных полей:

 

 

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

 

 

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

 

 

Подобное цветовое разделение позволяет сопоставлять к примеру первую строку с третьей, а пятую с четвёртой: человек просто запоминает «первую белую строку и первую серую строку». Конечно, подобная таблица может выглядеть излишне вычурно, однако, визуальное оформление помогает быстрее воспринимать информацию а это зачастую для пользователя важнее, чем внешняя красота.

Как улучшить юзабилити ещё сильнее? На данные момент в нашей таблице присутствует две легенды: список характеристик (шапка) и список моделей автомобилей (первый столбик). Руководствуясь логикой «отделяй разные по смыслу куски», мы можем отделить название автомобилей от характеристик. Такое разделение хорошо подходит для таблиц с небольшим количеством столбцов:

 

 

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

 

 

Общие выводы и закономерности из первой части:

 

1. После первого изучения таблицы, пользователь через некоторое время спокойно ориентируется в таблице, не читая все поля, а просто скользя взглядом и находя (отсчитывая) нужные ячейки.

2. Выделение смысловых блоков улучшает читаемость таблицы.

3. При большой высоте таблицы полезно выделять четные/нечётные строки разными цветами.

4. При большой ширине таблицы полезно выделять чётные/нечётные столбцы. Такое выделение полезно в случае, если ключевых для выбора столбцов несколько.

 

Ничего нового я скорее всего не сказал, в этой части намного важнее осознание того что мы сделали, и зачем.

Часть вторая: Бордеры (обрамление):

До текущего момента в статье мы имели дело с таблицами в привычном виде: ячейки, обрамлённые рамками. Далее обрамление ячеек (обводка линиями) мной будет называться как бордеры, потому что мне этот термин ближе.

Часто (в моей практике чаще всего) у таблиц, в силу стечения обстоятельств (гениальная задумка дизайнера), бордеров нет. Плюс, мы руководствуемся принципами «Знаю что делаю и знаю зачем», а значит для использования бордеров у таблицы нам необходимо логическое обоснование. Обоснования в духе «так принято» не подходят. Начинаем с простой таблицы без бордеров:

 

 

В глаза сразу бросается абсолютная неюзабельность. Задокумментируем визуальные изменения:
 

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

• Столбцы всё ещё узнаваемы: информация расположена в столбик, отсутствие бордеров совершенно не мешает находить столбцы.

• Горизонтально ячейки сопоставлять можно, но строки расположены слишком плотно. Раньше строки разделялись бордерами.

 

Применим прошлые ходы: отделяем шапку таблицы, добавляем отступов между строками вместо бордеров.

 

 

• Таблица всё ещё не прямоугольная, хотя шапка прямоугольная

• Столбцы остались столбцами.

• Строки стали узнаваться лучше, но всё ещё недостаточно хорошо различимы, особенно при большом числе столбцов

 

Для того чтобы строки визуально сильнее отделялись друг от друга, можно сильнее увеличить отступы между строками:
 

 

Также нужно попробовать визуально отделить чётные и нечётные строки. Как ожидается, это поможет различать строки:

 

 

• Таблица вернула себе прямоугольные очертания

• Столбцы стали узнаваться чуть хуже

• Строки распознаются на ура

 

Для таблиц с небольшим числом столбцов подобная разметка отлично подойдёт, в больших же таблицах столбцы распознавать так же важно, как и строки. Можно попробовать добавить вертикальный бордер вот такого вида:

 

 

• Таблица прямоугольная

• Столбцы опознаются

• Строки распознаются

   

 

Мы можем визуально отделять чётные и нечётные столбцы

 

 

• Таблица прямоугольная

• Столбцы опознаются

• Строки распознаются не очень хорошо.

 

По аналогии с бордерами на столбцах, можно добавить горизонтальные бордеры к строкам

 

 

 

Выводы и закономерности из второй части:
 

1. Использование бордеров обосновано необходимостью визуального разделения строк, или столбцов. Бордерами можно пренебрегать, заменяя их большими отступами

2. Цветовое выделение позволяет отказаться от использования бордеров

3. Допустимо использование только вертикальных или только горизонтальных бордеров.

Часть третья: Другие бордеры

Полностью отказывать от бордеров нельзя: мы лишаем себя целого ряда интересных визуальных ходов и решений, основанных на бордерах.

Рассмотрим ситуацию, когда в таблице повторяются одинаковые по смыслу ячейки:
 

В подобном контексте вертикальное выделение подходит хорошо, но семантически мы в данном примере имеем три таблицы, заключённые в одну. Очевидным решением будет эти три таблицы визуально разделить.

 

 

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

 

 

Также, можно менять цвет бордеров для выразительности выделения:

 

 

Часть 4: выравнивание в таблице:

Очень интересным моментом является понимание контекста, в котором допустимо применять тот или иной способ выравнивания содержимого ячеек таблицы. Я руководствуюсь следующей логикой:

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

 

 

Исходя из такого разделения, можно вывести несколько правил. Первое: «длинные» ячейки выравнивать по центру ячейки нельзя: ухудшается читаемость. Человеку привычнее читать длинный текст с выключкой (выравниванием) по правому или (допустимо) по левому краю. Это не относится к шапке таблицы, или единичным строкам. К ним выравнивание по центру вполне себе применимо. «Короткие» ячейки полезно выравнивать по центру: равномерные отступы слева и справа выглядят аккуратно.

 

 

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

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

 

 

Часть 5: Частные случаи.

Задачи по дизайну таблиц в большинстве частных случаев сводятся к следующим задачам:

1. Таблица теряет прямоугольную форму.

2. Таблица сливается с остальным контентом

3. Нужно выделение определенных строк.

 

Об этом постараюст написать как-нибудь позже в отдельной статье, материала и так слишком много.

Теперь у нас визуально разделяются не только разные по смыслу столбцы, но и одинаковые по смыслу блоки.

Теги: таблицы дизайн