HFLabs делает B2B-платформы для работы с клиентскими данными: качество данных, поиск дубликатов, согласия, справочники. Экран здесь почти всегда один и тот же — таблица на сотни тысяч записей, к которой прилагаются фильтры, формы и дашборды.
HFLabs builds B2B platforms for customer data: data quality, duplicate search, consents, reference books. The screen here is almost always the same one — a table with hundreds of thousands of records, plus filters, forms and dashboards.
Я отвечал за продуктовый дизайн: собирал дизайн-систему, проектировал сложные экраны и доводил их до разработки.
I was responsible for product design: the design system, complex screens and seeing them through to development.
Таблица, на которой держатся продуктыThe table the products stand on
Списки живут в каждом продукте: клиенты, дубликаты, справочники, согласия. Раньше в каждом они вели себя по-своему — где-то сортировка по клику на заголовок, где-то отдельной кнопкой, фильтры и массовые действия выглядели по-разному.
Lists live in every product: customers, duplicates, reference books, consents. Each one used to behave in its own way — sorting by a click on the header here, by a separate button there, with filters and bulk actions looking different every time.
Компонент собран один на все продукты: сортировка, фильтр по колонке, расширенный фильтр, управление колонками, выбор строк и массовые действия. Ниже — живая схема компонента: то же поведение и те же метрики, что в прототипе, в тёмной теме сайта.
The component is one for every product: sorting, a per-column filter, an advanced filter, column management, row selection and bulk actions. Below is the component in motion: the prototype’s behaviour and metrics, in the site’s dark theme.
Сортировка кликом по заголовку, фильтр по колонке с поиском и чипом в тулбаре, счётчик отфильтрованного, выбор строк и панель массовых действий.Sorting by a click on the header, a per-column filter with search and a chip in the toolbar, the filtered count, row selection and the bulk action bar.
Колонки под задачуColumns for the job
Колонок в записи больше, чем влезает в экран, и нужны они разным людям разные: оператору — статусы и даты, аналитику — адреса и источники. Показать всё сразу значит не показать ничего.
A record has more columns than fit on a screen, and different people need different ones: statuses and dates for an operator, addresses and sources for an analyst. Showing everything means showing nothing.
Набор и порядок собирает сам пользователь: галочка убирает колонку, перетаскивание меняет порядок. Таблица перестраивается на месте — данные не моргают и не загружаются заново.
The set and the order are the user’s own: a checkbox removes a column, dragging changes the order. The table rebuilds in place — the data never blinks or reloads.
Управление колонками: снять лишнюю, перенести нужную выше. Колонки переезжают анимацией, чтобы не терять глазами строку.Column management: drop the extra one, move the needed one up. Columns travel with an animation, so you don’t lose the row you were reading.
Строки, которые можно двигатьRows you can move
Там, где порядок строк — это смысл, а не случайность, строку нужно уметь взять и перенести. Ручка появляется на наведении и не мешает читать таблицу, когда никто ничего не двигает.
Where the order of rows carries meaning rather than chance, a row has to be picked up and moved. The handle shows up on hover and stays out of the way while nobody is moving anything.
Строка приподнимается, соседи расступаются, линия показывает, куда она встанет. Нумерация пересчитывается после того, как строку отпустили, — не раньше, чтобы цифры не прыгали под курсором.
The row lifts, its neighbours step aside, and a line shows where it will land. The numbering is recalculated after the row is dropped — not before, so the numbers don’t jump under the cursor.
Перетаскивание строки: ручка, поднятая строка, линия вставки и пересчёт нумерации после того, как отпустили.Dragging a row: the handle, the lifted row, the insertion line and the numbering recalculated after the drop.
Фильтр, который выдерживает данныеA filter that holds real data
Поверх фильтра по колонке есть расширенный: качество записи, телефоны, контакты, адреса — то, ради чего в HFLabs и приходят. Он открывается панелью справа и не закрывает таблицу: видно, как список меняется прямо во время настройки.
On top of the per-column filter there is an advanced one: record quality, phones, contacts, addresses — the things customers come to HFLabs for. It opens as a right-hand panel and never covers the table: you see the list change while you tune it.
Расширенный фильтр и фильтр по датам в исходном интерфейсе: панель справа, чипы выбранного в тулбаре.The advanced filter and the date filter in the product itself: the panel on the right, chips for what is picked.
Даты периодами, а не датамиDates as periods, not days
Календарь в фильтре кажется очевидным решением, пока не посмотришь, что люди выбирают на самом деле: «сегодня», «эта неделя», «предыдущий месяц». Тыкать две даты в календаре ради «этой недели» — шесть кликов вместо одного.
A calendar in the filter looks like the obvious answer until you watch what people actually pick: “today”, “this week”, “last month”. Clicking two dates for “this week” is six clicks instead of one.
Поэтому первым идёт список периодов, а календарь стоит рядом — для точной даты и диапазона, который в нём и рисуется. Выбранное всё равно превращается в чип в тулбаре, так что видно, за какой период ты смотришь список.
So the list of periods comes first, with the calendar right next to it — for an exact day and for a range you draw in it. Whatever you pick still becomes a chip in the toolbar, so you always see which period you are looking at.
Периоды одним нажатием, календарь рядом, диапазон рисуется прямо в нём. Выбранное становится чипом, счётчик показывает, сколько осталось.Periods in one tap, the calendar next to them, the range drawn right in it. What you pick becomes a chip, and the counter shows what is left.
Ячейка решает всёIt all comes down to the cell
Таблица — это тысячи ячеек, и читаемость решается в одной. Строка 26 пунктов, отступ 10, одна строка текста с обрезкой: список остаётся списком, а не превращается в абзацы разной высоты.
A table is thousands of cells, and readability is decided inside one of them. A 26-point row, 10 of padding, a single line of text with an ellipsis: the list stays a list instead of turning into paragraphs of different heights.
Даты набраны табличными цифрами, поэтому колонка не пляшет и её можно просматривать глазами сверху вниз. Номер строки живёт в той же клетке, что и чекбокс, и уступает ему место при наведении — колонка не занимает лишнего.
Dates are set in tabular figures, so the column never dances and you can scan it top to bottom. The row number lives in the same slot as the checkbox and steps aside on hover — the column costs nothing extra.
Разбор строки: выберите параметр — он подсветится в таблице. Цвета подписаны так, как они заданы в продукте.The row taken apart: pick a property and it lights up in the table. The colours are named the way the product sets them.
Центр управления согласиямиThe consent centre
Дашборд по согласиям клиентов: покрытие базы, динамика отзывов, источники подписаний и предупреждения о расхождениях с реестрами.
A dashboard for customer consents: coverage of the base, withdrawal dynamics, where signatures come from and warnings about mismatches with the registries.
ЦУС: покрытие базы согласиями и разбор по источникам.The consent centre: coverage of the base and a breakdown by source.
СправочникиReference books
Инструмент управления справочниками: черновик проходит согласование (в работе → на согласовании → согласовано → опубликовано), у каждого атрибута свои ограничения, преобразования и правила проверки.
A tool for reference books: a draft goes through approval (in progress → for approval → agreed → published), and every attribute has its own constraints, transformations and validation rules.
Perecoder: история согласования черновика и правила по атрибутам.Perecoder: the approval history of a draft and per-attribute rules.
