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

Оптимальный вариант адаптивной верстки таблиц

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

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

Колонки с горизонтальной прокруткой

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

Структура шапки таблицы

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

Закрепленная первая колонка и просмотр атрибутов с горизонтальной прокруткой

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

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

Смена значений столбцов для первой и второй колонки

Модальный лист

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

Отображение значений в модальном листе

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

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

Режимы чтения и обработки в модальном листе

Удаление, фильтр, поиск

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

Дополнительные элементы управления за пределами таблицы с возможностью выбора строк

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

Карточки

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

Строки таблицы представленные в виде карточек

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

Заключение

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

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

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

0
11 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Анни М.

а чем эти идеи плохи? почему вам нужны "новые идеи"?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Анни М.

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Vasek Romanov

интересно что в своем проекте тоже делаем карточки когда контент повторяется. Видимо самое оптимальное из всего чтобы не делать скрол вбок который далеко не всем очевиден

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
DaemonHK

Клиент въебенил огромную таблицу в текстовый редактор, как ее адаптировать? Хуй знает, давайте мы расскажем вам про CRUD.

Ответить
Развернуть ветку
Dmitriy

Полезный материал, спасибо!

Ответить
Развернуть ветку
Max Ruslanovich
Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда