Как отображать таблицы на маленьких экранах

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

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

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

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

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

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

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

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

Если пользователям необходимо отредактировать конкретное значение, они могут нажать на значок редактирования в правом верхнем углу. Это включит режим редактирования, в котором все значения данных превратятся в текстовые поля. После завершения редактирования пользователь подтверждает изменения иконкой галочки и возвращается в режим чтения.

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

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

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

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

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

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

Перевод статьи UX Movement