Таблицы в веб-приложениях: как проектировать сложные данные

Что такое таблица

Таблица — это структурированное представление данных. Она состоит из строк (записей) и колонок (полей). Пользователь работает с таблицей, чтобы найти, отфильтровать, отсортировать или изменить данные.

Таблицы бывают разными:

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

Колонки

Колонки — это поля данных. Главное правило: только важное. Пользователь должен видеть то, что помогает решить задачу.

• Приоритет: важные колонки — слева, второстепенные — правее;
• Количество: не более 6–8 колонок на экран;
• Настройка: пользователь может скрыть ненужные колонки;
• Ширина: достаточная для контента, но не больше;
• Выравнивание: текст — слева, числа — справа, статусы — по центру.

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

Сортировка

Сортировка помогает найти нужные данные. Пользователь кликает по заголовку колонки и меняет порядок.

• По возрастанию: от А до Я, от меньшего к большему;
• По убыванию: от Я до А, от большего к меньшему;
• Индикатор: стрелка на заголовке показывает текущую сортировку;
• Сброс: клик по заголовку третий раз сбрасывает сортировку.

Сортировка должна работать по клику. Пользователь не должен искать кнопку «Сортировать».

Фильтры

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

• Быстрые фильтры: наверху, основные: статус, дата, категория;
• Расширенные: в панели или модальном окне;
• Поиск: по всем полям или по конкретному;
• Сохранение: пользователь может сохранить набор фильтров;
• Сброс: кнопка «Сбросить» — на видном месте.

Фильтры должны быть понятными. Пользователь должен видеть, какие фильтры активны, и легко их снять.

Пагинация

Если записей много, нужна пагинация или бесконечная прокрутка.

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

Массовые действия

Массовые действия экономят время. Пользователь выбирает несколько записей и применяет действие ко всем сразу.

• Выбор: чекбоксы в первой колонке, «выбрать все» в заголовке;
• Действия: удалить, изменить статус, экспортировать;
• Подтверждение: для опасных действий (удаление) — подтверждение;
• Отмена: возможность отменить действие;
• Обратная связь: сообщение об успехе или ошибке.

Ошибки

Наши рекомендации