Как собрать рабочую таблицу: колонки, сортировка, пустое состояние и действия

Таблицу собирают не из всех полей, которые есть в базе, а из тех, по которым человек что-то решает.

У заказа в базе магазина больше двадцати полей. Например: номер, дата, покупатель, телефон, почта, адрес, состав, вес, сумма, скидка, промокод, способ оплаты, способ доставки, интервал, комментарий, метка рекламной кампании.

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

Зачем открывают таблицу

Сначала поймите, зачем человек открывает таблицу. В Nielsen Norman Group выделяют четыре задачи, ради которых работают с таблицами данных:

• найти записи по условию;
• сравнить значения;
• посмотреть или изменить одну запись;
• сделать что-то с записями.

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

Пометка в строке

Есть и третий путь, между колонкой и карточкой, — пометка в строке.

Например, комментарий «Позвоните за час» длинный, у большинства заказов его нет, и своя колонка вышла бы почти пустой. Но оператору важно видеть, что комментарий есть.

Тогда в строке стоит короткая пометка, а текст — в карточке.

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

Восемь полей заказа. Колонка, пометка или карточка?

Числа, которые сравнивают, выравнивают по правому краю. Тогда тысячи стоят под тысячами, и крупную сумму видно, не читая.

Текст читают слева направо, поэтому имена и составы стоят по левому краю.

Число сравнивают по величине, а величину видно по длине: 12 450 длиннее 890. Но видно это, только если разряды стоят друг под другом, то есть по правому краю.

Так советуют и GOV.UK, и Material Design, и Контур.Гайды.

Цифры одной ширины

Чтобы разряды вставали ровно, у цифр должна быть одинаковая ширина. У многих шрифтов есть такой набор — моноширинные цифры, подробно о них в уроке «Типографика, Senior». Проверьте свой шрифт: наберите столбиком 1111 и 5555 и посмотрите, одной ли ширины строки.

Сортировка нужна, чтобы нужное оказалось наверху. Человек должен видеть, по какой колонке отсортировано и в какую сторону.

Порядок по умолчанию выбирают под главную задачу.

Оператору утром нужно собрать то, что везти раньше. Поэтому заказы стоят по дате и интервалу доставки: ближайшие сверху.

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

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

Нажмите на заголовки «Доставка», «Покупатель» и «Сумма». Повторное нажатие меняет направление.

Илья Бирман из Бюро Горбунова идёт дальше: стрелка в шапке путает, а сортировать в обе стороны часто незачем. Он советует подсветить колонку, по которой отсортировано, или назвать полезные порядки словами — «Сначала самые нагруженные» вместо «Нагрузка ↑». В живой таблице выше словами сделана строка под ней.

Для разработки у сортировки есть своя разметка: у заголовка, по которому отсортировано, стоит атрибут aria-sort с направлением, а сам заголовок сделан кнопкой. Так порядок таблицы слышит и тот, кто читает её экранным диктором. Пример такой таблицы есть в руководстве W3C по доступным компонентам.

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

Причин у пустоты три, как и у любого пустого экрана из урока про состояния.

Пусто бывает и из-за ошибки или нехватки прав, но тогда это уже ошибка, и показывают её как ошибку. Как развести все четыре случая текстом, разобрано в уроке «Тексты ошибок и пустых состояний», Middle.

У таблицы есть особенность: она часто пустеет из-за фильтра или поиска. Тогда главное — показать, что именно отфильтровано.

У строки обычно одно частое действие и несколько редких. Частое видно сразу, редкие убраны в меню.

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

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

В Контур.Гайдах быстрые действия и флажки строки, наоборот, появляются при наведении. Это решение для рабочих мест, где у всех мышь, и таблица без них спокойнее. Если таблицу открывают с планшета, как оператор «Лесной обжарки» на складе, прятать нельзя.

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

Восемь действий над заказом. Где им место?

Макет таблицы, который новый дизайнер принёс на обсуждение. Пять мест в нём мешают оператору.

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

Соберите таблицу своего продукта с сортировкой, действиями над строкой и пустым состоянием.

Часть 1 · Выбрать колонки, 20 минут

1. Выберите таблицу, с которой кто-то работает каждый день: заказы, заявки, клиенты, товары. Если своего продукта нет, возьмите таблицу заказов «Лесной обжарки» из урока.
2. Назовите, кто с ней работает и что он делает первым делом, когда её открывает.
3. Выпишите все поля записи и у каждого — какое решение оно помогает принять в таблице.
4. Разложите поля: колонка, пометка в строке или только карточка.

ТАБЛИЦА: ______________________        Дата: __.__.____
КТО РАБОТАЕТ: ______________________
ЧТО ДЕЛАЕТ ПЕРВЫМ ДЕЛОМ: ______________________

КОЛОНКИ
поле ____________  решение ____________  край: левый / правый  сортировка: да / нет
поле ____________  решение ____________  край: левый / правый  сортировка: да / нет
поле ____________  решение ____________  край: левый / правый  сортировка: да / нет

ПОМЕТКИ В СТРОКЕ: ______________________
ТОЛЬКО В КАРТОЧКЕ: ______________________

ПОРЯДОК ПО УМОЛЧАНИЮ: по ____________, сначала ____________
ПОЧЕМУ: ______________________

ДЕЙСТВИЯ
строка целиком: ______________________
кнопка в строке: ______________________
меню «⋯»: ______________________
только в карточке: ______________________

ПУСТО
ещё ничего нет: ______________________
ничего не нашлось: ______________________
всё сделано: ______________________

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

1. Соберите таблицу на настоящих данных: пять–семь строк с разными суммами, именами и датами, а не «Текст, текст, 100».
2. Выровняйте колонки по правилу и перенесите единицы измерения в заголовки.
3. Покажите сортировку по умолчанию: стрелка только у одной колонки.
4. Расставьте действия: строка открывает запись, частое — кнопкой, редкие — в меню.
5. Нарисуйте три пустых состояния с текстом и действием.

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

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

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

• Макет таблицы с сортировкой по умолчанию и действиями над строкой.
• Три пустых состояния с текстом и действием.
• Заполненный шаблон колонок с решением у каждой.

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

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

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

Таблица готова, если

• Для каждой колонки названо решение, которое по ней принимают
• Числа, которые сравнивают, стоят по правому краю, заголовки над ними — тоже
• Единицы измерения — в заголовке, а не в каждой ячейке
• Порядок по умолчанию выбран под главную задачу
• Видно, по какой колонке отсортировано и в какую сторону
• Строка целиком открывает запись
• Частое действие видно в строке, редкие — в меню, которое тоже видно
• Для пустой таблицы есть текст: почему пусто и что сделать

Что мешает

• Все поля базы в колонках. Нужное теряется, таблица шире экрана.
• Суммы по левому краю. Крупное не видно, приходится читать каждое число.
• Стрелки на всех колонках. Непонятно, как таблица отсортирована сейчас.
• Кнопки при наведении. На сенсорном экране их нет, мышью их не находят.
• «Нет данных». Непонятно, пусто, ошибка или ещё грузится.

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

• Data Tables: Four Major User TasksNielsen Norman Group, Пейдж Лаубхаймер · на английском · бесплатноЧетыре задачи, под которые строят рабочую таблицу, и что нужно каждой: понятный первый столбец, закреплённая шапка, скрытие колонок, правка записи в боковой панели, групповые действия.
• ТаблицыКонтур.Гайды · на русском · бесплатноГайд Контура по рабочим таблицам на русском: какие колонки оставить, выравнивание и формат чисел, шапка, выбор строк, действия в строке, итоги и настройка колонок. Действия и флажки там появляются при наведении.
• TableGOV.UK Design System · на английском · бесплатноКороткая справка GOV.UK: когда нужна таблица, подпись и заголовки строк и колонок для экранного диктора, числа по правому краю, что делать с большой таблицей. Половина страницы — код.
• Как верстать заголовки таблиц с сортировкой?Советы Бюро Горбунова, Илья Бирман, 2021 · на русском · бесплатноИлья Бирман о том, почему стрелка в заголовке сбивает с толку и чем её заменить: подсветить колонку или вынести порядки в список со словами «Сначала новые». В комментариях с ним спорят.
• Empty statesIBM Carbon Design System · на английском · бесплатноПустые состояния в IBM Carbon: данных ещё нет, ничего не нашлось, всё сделано, ошибка или нет доступа — что писать и какую кнопку дать. У пустой таблицы Carbon убирает и шапку, и подвал.
• What to consider when creating tablesDatawrapper, блог, Лиза Шарлотта Мут, 2019 · на английском · бесплатноТаблицы в статьях и отчётах: когда таблица лучше графика, как сузить колонки, какие строки ставить первыми, когда нужны зебра и поиск. Совет прятать колонки на телефоне — для статей, а не для рабочих таблиц.