UX/UI
Product design
Web
Унификация табличных интерфейсов
Спроектировал единый UX/UI-паттерн для табличных интерфейсов продукта: унифицировал структуру, поведение и состояния таблиц.
Саммари
В продукте существовало несколько независимо развивающихся табличных интерфейсов с разной логикой взаимодействия. Я провёл их аудит, выделил повторяющиеся сценарии и сформировал единую систему паттернов для структуры, состояний и поведения таблиц.
5+
таблиц прошли аудит
11
паттернов структуры и поведения систематизировано
Почему понадобилась унификация
Таблицы в разных разделах продукта развивались независимо и постепенно обрастали собственными паттернами. Одинаковые сценарии решались по-разному: отличались сортировка и фильтрация, действия со строками, раскрытие данных и отображение состояний.
Из-за этого пользователю приходилось заново разбираться с уже знакомыми сценариями при переходе между разделами, а команде — поддерживать несколько вариантов одних и тех же решений.
Ограничения проекта: один дизайнер, один спринт и существующая legacy-архитектура, которую нельзя было существенно менять.
Аудит существующих таблиц
Я собрал таблицы из разных разделов продукта и сравнил их структуру, состояния и основные сценарии взаимодействия.
В ходе аудита фиксировал, как реализованы сортировка и фильтрация, действия со строками, раскрытие данных, выбор элементов и поведение колонок. Это помогло отделить специфику отдельных разделов от повторяющихся сценариев и определить, какие из них можно унифицировать.
Единая система таблиц
На основе аудита я сформировал единые правила для устройства и поведения таблиц. Зафиксировал структуру компонентов, размеры и отступы, работу строк и колонок, а также логику сортировки, фильтрации, раскрытия данных, действий и состояний.
Таблицы могли отличаться составом данных и доступными действиями, но строились по общей системе и использовали одинаковые принципы взаимодействия.
Применение системы в продукте
Единые правила использовались в таблицах с разной структурой и сложностью — от небольших списков настроек до насыщенных данными разделов.
При различиях в данных и сценариях таблицы сохраняют общую структуру и логику взаимодействия — без необходимости проектировать каждый интерфейс заново.
Результат
Запущено в productionВместо нескольких независимо развивающихся вариантов таблиц появилась единая система паттернов для их проектирования и развития.
Новые и существующие таблицы стали использовать общую логику сортировки, фильтрации, состояний и действий. Это сократило количество локальных решений и упростило дальнейшее развитие интерфейсов.
Предсказуемое взаимодействие
Одинаковые сценарии работают по единым правилам во всех таблицах продукта.
Единая основа для развития
Новые таблицы можно проектировать на базе готовых паттернов, не создавая решение заново.