Таблицы на сегодня являются основным инструментом обработки массивов информации. От удобства зависит скорость обработки, процент ошибок при работе и общее впечатление пользователей от системы.
Так как сделать удобные таблицы?
- Мобильный просмотр. Важно чтобы таблицы было удобно просматривать не только со стационарного компьютера, но и с телефона. Наилучший вариант, когда в одной строке таблицы вы сразу показываете заголовок и значение.
- Быстрый поиск по таблице. Частый сценарий работы – зайти на страницу и найти что-то по тексту. Для этого при загрузке вы должны сразу установить фокус в поле поиска и обработать нажатие Enter для запуска поиска. Еще дополнительный момент – при загрузке страницы не загружать всю таблицу сразу, а показать только фильтр (чтобы страница загрузилась практически мгновенно).
- Замороженная шапка таблицы при скроллинге. Если таблица большая, то очень просто потеряться среди столбцов. Если у вас есть такая шапка – то вы всегда будете знать, что означает каждое поле.
- Быстрое редактирование. Очень важно, чтобы поля было очень просто редактировать. Если этого нет, то процесс обработки очень сильно замедляется. В идеале хорошо бы, если каждое поле можно редактировать по одному без необходимости грузить полную форму редактирования элемента с последующим общим сохранением.
- Разные схемы отображения данных (разные колонки). Бывает так, что таблица используется для разных ролей. Одной роли показываем одни столбцы. Другой – чуть более расширенный состав. Ваша таблица должна уметь поддерживать такой режим, чтобы не было необходимости дублировать таблицу для разных ролей.
- Сбросить и сохранить фильтр. Сброс фильтра помогает избежать ручного труда по восстановление состояния фильтра по умолчанию. Более продвинутый вариант – когда вы можете сохранить определенные типовые состояния и затем использовать по необходимости. Обычно мы ищем по определенным схемам и хорошо бы, если эти схемы не нужно устанавливать каждый раз. Также полезной функцией фильтра является запоминание его состояния – в следующий раз, когда вы будете работать с таблицей, фильтр будет установлен в предыдущее состояние.
- Компактность служебных элементов. Чем меньше занимает место фильтр, сортировка, пагинация и панель управления, тем больше места остается для рабочей области – для самой таблицы. Чем больше верхняя часть таблицы (фильтр), тем чаще пользователю необходимо прибегать к скроллингу – а это уменьшает его эффективность (особенно с тачпадом).
- Режим “много таблиц”. Хорошо, если ваши таблицы позволяют размещать на 1 странице несколько таблиц. Это больше технический момент.
- Вывод дополнительных графиков. Иногда бывает нужно визуализировать данные по таблице. В этом плане очень подходят диаграммы и графики.
- Динамическая пагинация при скроллинге. Это спорный момент. Пагинация при скроллинге удобна в тех случаях, когда вам надо просматривать все данные по порядку. Но что если вам нужно просмотреть только данные на 80 странице? В этом случае вы будете скролить вниз, пока не дойдете до 80 страницы. Контраргумент – мы должны исходить из того, что ваша фильтрация должна быть настолько точечной, что выгрузка выдает не 80 страниц, а 1-3 страницы и все данных находятся на самом верху.
- Динамические фильтры по 1 полю. Бывает удобно, когда у каждого поля можно сделать фильтрование по его значениям. Данная функция есть в Excel.
Можно посмотреть готовые примеры удобных таблиц.
Конечно есть и более тонкие моменты, связанные с удобством таблиц, например, горячие клавиши, отображение/скрытие элементов, двойные сортировки и т.д. Но, применив хотя бы эти 10 моментов, вы сможете улучшить юзабилити таблиц вашего проекта.
П.С. Если у вас есть главная страница сайта (а она у вас есть) – то смотрите про особенности главной страницы портала.