Лучший мобильный макет для сложных таблиц
Новое решение для таблиц любого размера
Ваша таблица может выглядеть отлично на больших десктопных экранах, но как она отображается на небольших мобильных устройствах? Если вы используете неподходящий макет, скорее всего, ваша таблица неудобна для просмотра. Большинство дизайнеров не знают, какой вариант будет оптимальным, но эта статья раскроет все детали.
Если не оптимизировать отображение таблицы на мобильных экранах, пользователи не смогут эффективно работать со своими устройствами. Им будет сложно получить доступ к нужным данным в нужный момент. В результате таблица, доступная только на десктопах, ограничивает возможности пользователей выполнять задачи.
Типичная ошибка дизайнеров — использование того же макета таблицы на мобильных устройствах, но с добавлением горизонтальной прокрутки. Такой подход ухудшает пользовательский опыт, поскольку требует от пользователей дополнительных физических и умственных усилий для просмотра нескольких столбцов в каждой записи. К счастью, существует более удачное решение, позволяющее просматривать все столбцы без лишней нагрузки.
До сих пор не существовало идеального способа адаптации сложных таблиц для небольших экранов. Ранее предлагались такие решения, как горизонтальная прокрутка, карусели или аккордеоны, но они не обеспечивают удобный пользовательский опыт(источник).
Несколько лет назад я сам предлагал использовать карусельные столбцы. На первый взгляд, это кажется удобным, но на практике необходимость многократно нажимать кнопку для просмотра каждого нового столбца делает взаимодействие слишком утомительным. Поэтому такой подход нельзя назвать оптимальным.
Аккордеоны также не решают проблему. Их суть в том, чтобы отображать несколько столбцов, а остальную информацию скрывать в выпадающих панелях. Однако резкая смена макета может запутать пользователя и усложнить восприятие данных. К тому же требуется дополнительное действие — нажатие на кнопку, чтобы раскрыть каждый аккордеон, что увеличивает нагрузку.
В одной из моих статей я предлагал более эффективное решение — "Stacked Lists". Этот вариант действительно хорош, но только если в таблице мало столбцов с легко узнаваемыми данными, которые не требуют заголовков. Однако для сложных таблиц с множеством столбцов заголовки необходимы, а макет должен быть гибким. Поэтому сложенные списки тоже не могут считаться универсальным решением для дизайнеров.
Макет карточек полностью исключает горизонтальную прокрутку. Данные из всех столбцов сразу видны и доступны на экране без лишних усилий. Единственный минус такого подхода — пользователи не могут одновременно видеть столько записей, сколько помещается в таблицу на десктопе. Им придется прокручивать страницу вниз, чтобы увидеть больше данных, но это нормальное ограничение из-за небольшого размера экрана.
Проще говоря, всегда есть компромиссы, когда пространство на экране ограничено. Вы не можете вместить столько же данных, сколько на десктопе, если только не уменьшите размер шрифта. Но это сделает текст нечитабельным, поэтому такой вариант не подходит.
Главное преимущество карточек в том, что пользователи могут просматривать все столбцы каждой записи без необходимости горизонтальной прокрутки. Более того, данные структурированы в удобном формате с четкой иерархией, а все основные действия доступны в заголовке карточки.
Макет карточек состоит из семи основных элементов:
A) Заголовок карточки включает ID записи, чекбокс и кнопки действий. Если кнопок слишком много и они загромождают пространство, следует использовать выпадающее меню для их размещения.
B) ID записи. Каждая таблица состоит из записей данных. У каждой записи должен быть уникальный идентификатор, который отображается в левом верхнем углу карточки. При наличии групповых операций рядом может располагаться чекбокс.
C) Действия. Кнопки, позволяющие пользователям выполнять задачи с записями. Они должны быть в виде иконок для экономии места и размещаться в правом верхнем углу.
D) Заголовки данных. Теперь заголовки столбцов располагаются горизонтально и выравниваются по левому краю.
E) Данные. Элементы, относящиеся к каждому заголовку, представлены в виде текстовых данных.
F) Разделитель строк. Необходим для четкого визуального разделения строк внутри карточки, что упрощает восприятие информации.
G) Строка карточки. Карточка состоит из заголовка и нескольких строк, каждая из которых содержит заголовок данных и соответствующую информацию.
Может ли макет карточек справляться с более сложными таблицами, содержащими больше столбцов? Поскольку строки в карточке располагаются вертикально, можно отобразить любое количество столбцов. Однако это делает карточки слишком высокими, что нежелательно, если этого можно избежать.
По этой причине перед преобразованием таблицы в карточный вид необходимо оптимизировать структуру данных, устранив лишние столбцы. В этой статье описаны все методы, позволяющие упростить громоздкую таблицу.
Например, представленная ниже таблица содержит 9 столбцов, хотя изначально их было 19. После оптимизации количество данных стало более управляемым, и теперь таблицу можно легко преобразовать в карточки. Так как столбцы с ID записи и действиями теперь входят в заголовок карточки, остается всего 7 строк.
Высота строк в карточке значительно меньше, чем в таблице, что экономит пространство. Размер шрифта данных также уменьшен, чтобы строки оставались компактными. Однако при этом используется высокий контраст цвета и средняя толщина шрифта для улучшения читаемости.
Кроме того, можно изменить порядок отображения данных так, чтобы столбцы с более высокой приоритетностью находились в верхней части карточки. Например, статус наличия товара важнее большинства других данных, кроме названия продукта. Поэтому он размещается во второй строке для удобства восприятия.
В этом случае карточку необходимо сделать расширяемой с кнопкой «Показать больше» внизу. После нажатия карточка должна развернуться и отобразить оставшиеся строки. Такой подход позволяет пользователям сначала увидеть только основные данные, не перегружаясь второстепенной информацией.
Отображение меньшего количества строк вначале позволяет вместить на экран больше записей. Это бывает полезно, если пользователям достаточно первых нескольких строк для выполнения задачи. Однако если доступ ко всем данным сразу необходим, расширяемые карточки могут не подойти, так как требуют дополнительного клика.
Другие решения для адаптивных мобильных таблиц неэффективны. Макет карточек — лучший способ отобразить сложные таблицы на маленьких экранах. Он интуитивно понятен, удобен и масштабируется под любые размеры таблиц. Независимо от количества столбцов, больше нет ограничений на отображение больших объемов данных на мобильных устройствах.