Как упростить массивную таблицу с 19 столбцами
До сих пор не существовало эффективного решения для размещения больших таблиц на экранах компьютеров. В этой статье представлены советы, которые помогут компактно разместить таблицу и отобразить все данные.
Массивные таблицы возникают, когда количество столбцов превышает ширину экрана. Большинство современных мониторов обладают ультрашироким форматом и позволяют отображать множество столбцов. Однако, как видно на примере, таблица с 19 или более столбцами — это уже серьезная проблема.
Если вам сложно разместить большую таблицу на экране, вы допускаете фундаментальную ошибку в UX-дизайне. Эта ошибка — попытка показать все данные сразу в одном окне.
Информационная перегрузка всегда приводит к когнитивной перегрузке. Поэтому вам необходимо создать иерархию, определяющую, какую информацию показывать пользователям в первую очередь. Так вы предоставите им все необходимые данные, не перегружая их.
Первый шаг к упрощению большой таблицы — определить, какие столбцы показать в обзоре, а какие оставить для детализированного представления. Таблица должна служить обзором данных, а не контейнером для всего подряд.
Если проанализировать таблицу, вы обнаружите столбцы, которые не требуют немедленного отображения. Они не так важны на первом этапе, пока пользователь не решит изучить конкретную запись глубже. Эти столбцы можно перенести в детализированное представление, которое открывается по клику на кнопку.
В этом примере можно выделить девять столбцов, которые не нужны в обзоре. Это сокращает количество столбцов с 19 до 10.
Данные в этих столбцах слишком детализированы для первичного восприятия. Например, цифры, связанные с запасами, нужны только для определения момента, когда пользователю необходимо пополнить товар. Если запасы не критически низки, проверять эти числа бессмысленно.
Поэтому в таблицу стоит добавить столбец, отображающий статус запасов, прежде чем показывать сами цифры. Такой столбец снизит когнитивную нагрузку: пользователям не придется вручную сопоставлять текущий уровень запасов с точкой повторного заказа и сроком поставки, чтобы понять, нужно ли пополнение.
Другими словами, в текущей таблице не хватает столбца со статусом запасов — это упростило бы работу пользователей. Анализируя свою таблицу, вы, скорее всего, обнаружите и другие данные, которые можно обобщить через статусные столбцы, чтобы избежать ручных расчетов.
Вес и габариты товара тоже не относятся к обзору. Эти данные редко требуются пользователям, так как они почти не меняются и слабо влияют на продажи. Следовательно, их лучше перенести в детализированное представление.
Обратите внимание, как изменилась таблица после внедрения детализированного представления и добавления статуса запасов. Она перестала быть громоздкой и перегруженной, но всё ещё остаётся широкой — это означает, что есть пространство для дальнейшей оптимизации.
Сокращение ширины отдельных ячеек уменьшает ширину всего столбца. Это касается как данных, так и заголовков. Вот как преодолеть самые распространенные сложности при минимизации ширины ячеек.
Вы можете уменьшить ширину ячеек с данными только до ширины заголовка, так как они ограничены шириной заголовка. Чтобы минимизировать ширину ячеек, начинать нужно с заголовков.
Сделайте заголовки максимально компактными — они определяют ширину остальных ячеек. Первый шаг — использовать меньший размер шрифта. Это можно применить и к ячейкам с данными, но это лишь частичное решение.
Теперь нужно найти способы убрать лишние слова. Например, в заголовке «Product ID» слово «Product» избыточно, если после него следует столбец «Product Name». Следовательно, удаление этого слова позволяет значительно сузить столбец.
Иногда заголовки нельзя сделать короче. В таком случае стоит использовать аббревиатуры и показывать полную форму во всплывающей подсказке. Если заголовок состоит из двух или более слов, можно сократить его, оставив только первые буквы каждого слова.
Затем добавьте значок «информация», чтобы при наведении курсора появлялась всплывающая подсказка. Дополнительное преимущество этого подхода — возможность объяснить неоднозначные термины, не увеличивая ширину столбца.
Например, не все знают разницу между базовой стоимостью и себестоимостью. Поэтому всплывающая подсказка для заголовка «BP» может содержать пояснение: «Базовая цена: стоимость без дополнительных сборов», что поможет пользователям лучше понять данные.
Теперь, когда заголовок не шире, чем данные, можно минимизировать ширину ячеек с числами. Для длинных числовых значений округляйте их до ближайшего десятичного знака. Можно либо округлить вниз до ближайшей десятой доли, либо округлить вверх до целого числа.
Округление вниз до ближайшей десятой доли сделает колонку более узкой, а округление вверх до целого числа — ещё более компактной. Оба варианта допустимы, так как разница в количестве символов незначительна. Без округления значение состоит из 8 символов, а после округления сокращается до 5–3.
Более короткие числовые значения также упрощают их сравнение. Когда нужно просто определить, какое число больше, лишние цифры могут запутать. Однако для оптимального сравнения необходимо использовать табличные числа.
Табличные числа — это функция, которая выравнивает каждый символ по вертикали, используя моноширинное начертание шрифта вместо пропорционального. Благодаря этому пользователи могут легче сравнивать числа, просто сканируя колонку сверху вниз по прямой линии.
CSS код для колонки «BP» будет выглядеть так:
font-variant-numeric: tabular-nums;
Следующий шаг — объединить связанные колонки, которые можно читать в одной ячейке без потери ясности. Например, «Base Price» и «Cost Price» не стоит объединять, так как данные слишком похожи, и пользователи могут их перепутать.
В этом случае раздельные колонки необходимы, чтобы избежать путаницы и упростить сравнение. Пользователи смогут легко сопоставлять базовые и себестоимые цены, просто сканируя данные по вертикали в отдельных колонках.
Однако есть четыре других колонки, которые можно объединить без проблем. «Subcategory» и «Category» могут быть объединены, как и «Vendor ID» и «Vendor Name». При объединении сразу становится понятно, какие данные являются основными, а какие — вторичными. Эта иерархия служит дополнительной подсказкой при определении, какие колонки можно объединять.
В результате объединения колонок и уменьшения размера шрифта таблица становится гораздо компактнее. Основные данные располагаются сверху и выделяются жирным шрифтом, а второстепенные находятся ниже и имеют более лёгкое начертание. Такое визуальное разделение упрощает восприятие объединённых данных.
Проектирование детального просмотра
После того как вы применили все советы для сокращения ширины таблицы, пора спроектировать детальный просмотр. В этом представлении будут находиться данные из 10 столбцов, которые были удалены в начале.
Детальный просмотр будет отображаться в виде всплывающего слайда при клике на иконку «View» в столбце действий. Это самый эффективный способ показать детали, так как вертикальное пространство практически не ограничено, позволяя разместить любое количество информации.
Первым элементом в детальном просмотре должен быть идентификатор записи, за которым следует название продукта, чтобы пользователь сразу понимал, что он просматривает. Далее отображаются числовые значения из общего обзора, но уже в полном формате. Другими словами, в этом представлении числа для «Base Price», «Cost Price» и «Warrant Days» будут показаны без округления.
Затем идет статус наличия на складе и детали о запасах. После этого отображаются размеры продукта с изображением, чтобы дать пользователям общее представление о его размере и компонентах. Внизу находятся кнопки для редактирования, возврата и повторного заказа продукта.
9 столбцов, которые были удалены из обзора, теперь находятся в детальном просмотре. Эти подробные данные лучше размещать здесь, так как они становятся более актуальными для пользователей после того, как они кликнут, чтобы узнать больше о продукте.
Ваша огромная таблица теперь может иметь всплывающее модальное окно, которое аккуратно и свободно отображает детали. У вас теперь есть достаточно пространства и гибкости для использования изображений, иконок и различных макетов списков. Больше не существует жесткой структуры ячеек таблицы, которая бы ограничивала вас.
Эта таблица из 19 колонок больше не выглядит такой громоздкой, после того как вы применили советы для её упрощения. Новая таблица удобно размещается на экранах компьютеров без горизонтальной прокрутки. Она проста, практична и интуитивно понятна для любого пользователя. Попрощайтесь с громоздкими таблицами и приветствуйте компактные и эффективные таблицы, которые улучшат пользовательский опыт.
