Продолжаю пересобирать UX «Медоеда» — системы для работы с требованиями в области IT и информационной безопасности.

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

Есть и другое пересечение: drag (перетаскивание) используется и для порядка колонок и для порядка группировки. Но это разные операции. В одном случае пользователь меняет представление таблицы, в другом — иерархию данных.

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

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

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

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

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