Как сделать таблицу для настоящих данных: длинные значения, узкий экран, фильтры и групповые действия

В макете у всех покупателей имена по 12 букв. В базе рано или поздно появится имя на 50. Что с ним будет, решают заранее — для каждой колонки.

Способов три, и у каждого своя цена:

• перенести на вторую строку — строки станут разной высоты;
• обрезать с многоточием — конец спрячется;
• вынести длинное в отдельное место — понадобится место, куда вынести.

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

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

Десять колонок на ноутбуке не помещаются.

Сначала проверьте, нельзя ли колонок сделать меньше. Илья Бирман из Бюро Горбунова советует начинать со структуры: разделить таблицу на две, объединить связанные колонки, вынести общее в название таблицы.

Если колонки всё равно не помещаются, работают четыре приёма.

Попробуйте сами

Пролистайте таблицу ниже вбок: номер заказа остаётся на месте.

Кнопками под таблицей меняется плотность строк.

В дизайн-системе IBM Carbon у таблицы пять высот строки: 24, 32, 40, 48 и 64 пикселя. Самую высокую там советуют брать, только если в строке две строки текста. А в Nielsen Norman Group советуют закреплять строку заголовков и первую колонку, если таблица больше экрана. И давать прятать колонки так, чтобы было видно, что часть спрятана.

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

Главный вопрос: человек сравнивает строки между собой или смотрит записи по одной? Если сравнивает, ему нужны колонки. Если смотрит по одной, колонки можно превратить в карточки.

В Nielsen Norman Group для таблиц на телефоне советуют закреплять заголовки и первую колонку, а обрезанной колонкой у края показывать, что таблица листается дальше. Новая таблица Shopify Polaris на узком экране сама превращается в список.

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

Фильтр, который не видно, опаснее, чем отсутствие фильтра: человек думает, что видит все заказы, а видит часть.

Оператор вчера отфильтровал заказы по самовывозу, а сегодня открыл таблицу и не нашёл заказ, о котором звонит покупатель.

Фильтр сохранился, но был спрятан за кнопкой «Фильтры».

Такие случаи решают три правила:

• применённые фильтры видны над таблицей;
• каждый можно снять одним нажатием;
• рядом видно, сколько строк осталось из скольких.

Baymard Institute по исследованиям интернет-магазинов советует показывать применённые фильтры списком над результатами, каждый с крестиком, и не ограничиваться числом вроде «Фильтры (2)».

Утром оператор передаёт курьеру сорок заказов. По одному — сорок раз одно и то же. Выбор строк и групповое действие делают это за три нажатия.

Выбор строк — это флажок в начале каждой строки и флажок в заголовке, который выбирает все.

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

Спросить до или отменить после

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

Защитить можно двумя способами: спросить до или дать отменить после.

Подтверждение нужно там, где отменить нельзя. Где можно — лучше сразу сделать и показать «Отменить»: вопрос «Вы уверены?» на каждое действие приучает нажимать «Да» не читая.

Проверьте себя

Восемь групповых действий в админке. Спросить до или дать отменить после?

Макет рисуют на десяти строках. Таблица живёт на тысяче. Что человек видит при тысяче строк, решают заранее.

Три способа показать много строк:

• по страницам;
• кнопкой «Показать ещё»;
• бесконечной прокруткой, когда строки догружаются сами.

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

В Nielsen Norman Group её не советуют, когда нужно найти что-то конкретное или сравнить элементы длинного списка. А это и есть работа с таблицей.

Что ещё решить, когда строк много:

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

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

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

Часть 1 · Собрать худшие данные, 20 минут

1. Возьмите таблицу из задания Junior или любую рабочую таблицу своего продукта.
2. Соберите худшие значения для каждой колонки: самое длинное, самое короткое, пустое. Лучше из настоящей выгрузки, а не придуманные.
3. Выпишите объёмы: сколько строк обычно, сколько в самый загруженный день, сколько за год.
4. Решите по каждой колонке, что делать с длинным: перенос, обрезка с конца, обрезка в середине или «не обрезать».

ТАБЛИЦА: ______________________        Дата: __.__.____

ОБЪЁМЫ
обычно: ____ строк   в пиковый день: ____   за год: ____
показ: страницы по ____ / «Показать ещё»   почему: __________

КОЛОНКИ И ДЛИННЫЕ ЗНАЧЕНИЯ
колонка ________  самое длинное: ________________  перенос / обрезка с конца / в середине / не обрезать
колонка ________  самое длинное: ________________  перенос / обрезка с конца / в середине / не обрезать
первая колонка закреплена: да / нет

УЗКИЙ ЭКРАН
задача на телефоне: сравнить / найти и открыть / пройти по списку
способ: листать вбок / карточки / главное и раскрытие
что остаётся на экране: ______________________

ФИЛЬТРЫ
где видно применённые: ______________________
«N из M»: где ______________   сброс всего: где ______________

ВЫБОР И ГРУППОВЫЕ ДЕЙСТВИЯ
действие ________________  отменить можно: да / нет → отмена / подтверждение
«все на странице» → «выбрать все N»: текст ______________________

ВОЗВРАТ ИЗ КАРТОЧКИ: страница, фильтры, сортировка сохраняются: да / нет

Часть 2 · Нарисовать, 60 минут

1. Подставьте худшие данные в таблицу и поправьте колонки по своим решениям.
2. Нарисуйте фильтры в применённом виде: плашки, «N из M», «Сбросить всё», пустой результат.
3. Нарисуйте выбор по шагам: ничего, часть, все на странице с предложением выбрать все, после действия с отменой.
4. Нарисуйте узкий экран выбранным способом на тех же худших данных.

Часть 3 · Проверить, 15 минут

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

Что должно получиться

• Таблица на худших данных на трёх ширинах.
• Фильтры и выбор строк по шагам, с отменой группового действия.
• Заполненный шаблон с решениями по каждой колонке.

План работы: 20 минут на данные, час на макеты, 15 минут на проверку. Всего — около полутора часов.

Частые сложности

• «Настоящих данных не дают». Попросите не данные, а крайние значения: длину самого длинного имени, самую крупную сумму, число строк за год. Это не личные данные, а цифры.
• «На телефоне таблицей никто не пользуется». Посмотрите статистику: заходят ли в админку с телефона. Если заходят хоть изредка, таблица должна там хотя бы читаться.
• «Отмену сложно сделать». Тогда это действие с подтверждением, и в вопросе — число записей и что с ними будет. Но спросите разработку: часто «отменить» — это просто вернуть прежний статус.
• «Фильтров слишком много для плашек». Плашками показывают применённые фильтры, а не все возможные. Применённых обычно два-три.

Таблица готова к настоящим данным, если

• Для каждой колонки решено, что делать с длинным значением
• Числа не обрезаются, длинный заголовок переносится или понятно сокращается
• Обрезанное значение можно прочитать целиком в карточке
• Первая колонка закреплена, если таблица шире экрана
• На телефоне остаётся то, по чему решают, и видно, как добраться до остального
• Применённые фильтры видны плашками, рядом «N из M» и «Сбросить всё»
• «Выбрать все» говорит, сколько выбрано, и предлагает выбрать все подходящие
• Групповое действие либо отменяется, либо спрашивает с числом и последствиями
• После возврата из карточки — та же страница, фильтры и сортировка

Что мешает

• Макет на средних данных. Поломки видны только на самых длинных.
• Фильтры за кнопкой. Человек не знает, что видит часть строк.
• «Выбраны все» на одной странице. Действие уходит на 25 строк вместо 1 240, или наоборот.
• «Вы уверены?» на всё. Люди привыкают нажимать «Да», и вопрос перестаёт защищать.
• Бесконечная прокрутка в рабочей таблице. Не видно, сколько всего, и не вернуться на место.

В этом уроке учимся держать настоящие объёмы и настоящую работу с таблицей. На следующей ступени — сводить все таблицы продукта к общим правилам.

• Mobile Tables: Comparisons and Other Data TablesNielsen Norman Group, Эми Шейд · на английском · бесплатноКак уместить большую таблицу в телефон: ширина колонок, закреплённые шапка и первый столбец, заметная прокрутка вбок, выбор нужных строк и колонок. Примеры 2017 года, в основном сравнение товаров.
• Overflow contentIBM Carbon Design System · на английском · бесплатноКороткий паттерн IBM Carbon об обрезке текста: многоточие в начале, в середине и в конце, обязательная подсказка с полным текстом и что обрезать нельзя. Про таблицы и телефон там ничего.
• Расскажите про вёрстку больших таблицСоветы Бюро Горбунова, Илья Бирман, 2015 · на русском · бесплатноОтвет Ильи Бирмана про таблицу в 20 колонок: разделить и объединить колонки, сократить заголовки, переносить длинные значения, закрепить шапку — или оставить таблицу широкой. С девятью примерами 2015 года.
• Display “Applied Filters” in an OverviewBaymard Institute, Кэтрин Ривз · на английском · бесплатноИсследование Baymard на каталогах магазинов: почему без списка выбранных фильтров люди неверно понимают, что видят, где этот список ставить и почему одного числа «Фильтры (2)» мало. Перенос на рабочие таблицы — вывод урока.
• Infinite Scrolling: When to Use It, When to Avoid ItNielsen Norman Group, Тим Нойзессер · на английском · бесплатноЧем бесконечная прокрутка удобна и чем мешает: трудно найти элемент снова, не видно конца, недоступен подвал. Когда лучше страницы или «Показать ещё» и почему после карточки человека возвращают на то же место.
• Пагинация таблицы ордеров с тысячами строкСоветы Бюро Горбунова, Илья Бирман, 2022 · на русском · бесплатноКороткий ответ Ильи Бирмана про таблицу на десятки тысяч строк: вместо умной разбивки на страницы разобрать задачи поиска и сравнения и дать под них фильтры, поиск и отчёты.