![](https://habrastorage.org/getpro/habr/upload_files/1e3/be3/a05/1e3be3a0572b958f5f7faa472b6ba2b1.jpg)
Меня зовут Александра, я дизайнер из Ozon в SX — Seller Experience. Сегодня расскажу продуктовую историю о таблицах и дизайн-долге.
Иногда приходится работать с устаревшими системами, при этом ресурсов на улучшение нет, и поэтому новые доработки внедряются с минимальными изменениями. Каждая новая функциональность всё больше и больше усложняет систему, делая её сложной для использования, а новым сотрудникам тяжело вникать в проект (да, легаси бывает не только у разработчиков).
Так было и с нашим продуктом, который накопил много недочётов. Работа без компонентов усложняла внедрение нового как со стороны дизайна, так и со стороны фронтенда. От неконсистентности страдали и пользователи. Особенно плохи были дела с таблицами. Настолько, что пользователи вручную увеличивали страницу, чтобы найти горизонтальный скролл. Нагруженные таблицы — вечная боль, и ресурсов на возврат дизайн-долга и техдолга, как всегда, нет — новые фичи сами себя не спроектируют. Под катом наша история решения большой задачи с низким приоритетом.
![Страница Ozon Performance осенью 2021 года. Трудно прокрутить по горизонтали, чтобы увидеть остальные колонки Страница Ozon Performance осенью 2021 года. Трудно прокрутить по горизонтали, чтобы увидеть остальные колонки](https://habrastorage.org/getpro/habr/upload_files/11a/99d/bd7/11a99dbd7a4f008551b901cd9df30dd2.png)
Презентация
Команда собрала все критичные моменты в презентации. Акцент при этом сделали на том, что недочёты легко исправить, а также на том, что изменения качественно улучшат удобство сервиса. Кроме того, в презентации были предварительные макеты, которые показывали, каким удобным и современным мог бы стать продукт.
![Скриншот из презентации. Мы объясняем, что фильтр далеко от таблиц и ближе к навигации. Из-за этого может быть непонятно, как они работают. Это легко поправить и станет намного удобнее Скриншот из презентации. Мы объясняем, что фильтр далеко от таблиц и ближе к навигации. Из-за этого может быть непонятно, как они работают. Это легко поправить и станет намного удобнее](https://habrastorage.org/getpro/habr/upload_files/5b7/e73/927/5b7e739274c900d8233ff4ef1ba69b1b.png)
Мы стремимся развивать сильную дизайн-культуру. Это означает, что бизнес понимает важность удобного интерфейса. После презентации с UX-недочётами и прототипами нового варианта руководители одобрили развитие таблиц и формирование системы компонентов.
Команде разработки тоже понравилась эта инициатива. Раз в неделю мы начали созваниваться и передавали макеты в разработку. Мы договорились закладывать часть спринта на развитие компонентов. Но основная задача была переделать таблицы.
Дизайн-долг наслаивался постепенно или классическое «так сложилось исторически»:
Основная проблема у таблиц была с горизонтальным скроллом: нужно листать сначала вниз, а потом в сторону. Это критично, потому что иначе нельзя дотянуться до трёх точек в конце строк.
Громоздкие фильтры отбирали бóльшую часть рабочей области. По статистике, сервисом пользовались и с телефонов.
Если пользователи отфильтровывали таблицу и кликали на экспорт, то экспортировалась вся таблица без учёта фильтров.
Слишком высокие ячейки. В некоторых местах требовалось уменьшить высоту, чтобы пользователь мог работать с большим объёмом строк.
Сервис был не консистентный. Это плохо как для опыта пользователя, так и для разработки. Дизайнеры тратили много времени на макеты, а фронтендеры — на вёрстку.
![](https://habrastorage.org/getpro/habr/upload_files/3e8/7d8/543/3e87d85438adf56917720faa8cc7299d.png)
На самом деле это довольно-таки частые проблемы с таблицами в крупных сервисах. Конечно, существует много теории на этот счёт, но сделать всё хорошо с первого раза очень сложно. В вёрстке всплывает много моментов, которые нельзя учесть в макетах.
![Старые таблицы. Справа спрятаны ещё колонки, а в конце — заветные три точки с действиями Старые таблицы. Справа спрятаны ещё колонки, а в конце — заветные три точки с действиями](https://habrastorage.org/getpro/habr/upload_files/805/bf1/e85/805bf1e8565a31520f68d7d67fcc6ba1.png)
Построение таблиц
Чтобы с таблицами было удобно работать и дизайнерам, и разработчикам, решили задать строгую систему. Теперь таблицы состоят из простых блоков — фильтра, ячеек хедера, обычных ячеек и пагинатора. Из этих элементов и собирается таблица.
![Захотелось кликнуть в сторону, чтобы снять выделение? Так ведь? :) Здесь компонент фильтра и компоненты большой и маленькой таблицы. Дизайнер копирует в свой проект, настраивает, а затем открепляет, чтобы вставить нужные ячейки. Практика показала, что это удобно Захотелось кликнуть в сторону, чтобы снять выделение? Так ведь? :) Здесь компонент фильтра и компоненты большой и маленькой таблицы. Дизайнер копирует в свой проект, настраивает, а затем открепляет, чтобы вставить нужные ячейки. Практика показала, что это удобно](https://habrastorage.org/getpro/habr/upload_files/218/3f9/48d/2183f948d85fd263378067ef92186d5f.png)
![Компоненты ячеек Компоненты ячеек](https://habrastorage.org/getpro/habr/upload_files/389/f1b/789/389f1b7892047fa9185b63826578ba17.png)
![Компонент пагинатора и списка действий
Компонент пагинатора и списка действий](https://habrastorage.org/getpro/habr/upload_files/3f6/81e/c48/3f681ec483b222dfa06abe8298719732.png)
![Макеты новой таблицы, полностью свёрстанной на AutoLayout по заданным гайдлайнам системы Макеты новой таблицы, полностью свёрстанной на AutoLayout по заданным гайдлайнам системы](https://habrastorage.org/getpro/habr/upload_files/94a/399/345/94a39934598539b38fd5e2efddfb2d30.png)
![Компонент новой таблицы. Пагинатор меняется на блок с действиями при выделении строк Компонент новой таблицы. Пагинатор меняется на блок с действиями при выделении строк](https://habrastorage.org/getpro/habr/upload_files/b21/bb3/91b/b21bb391bbdd59bb3fe260bb211747c1.gif)
Тестирование первой таблицы
Через некоторое время сверстали первый раздел с небольшой таблицей.
![Первая таблица, свёрстанная по новым гайдам Первая таблица, свёрстанная по новым гайдам](https://habrastorage.org/getpro/habr/upload_files/7f4/213/e78/7f4213e780334e7759aa9eedfbb88a1b.gif)
Дизайнеры и тестировщики прокликивали все состояния на разных разрешениях, а затем заводили баги. Ошибок было очень много, поэтому тестировали все. Что-то заезжало, где-то слетали эффекты при наведении, а что-то просто не учли. Например, поняли, что надо задать размеры ширин для ячеек. Так и появилась «Линейка» — по сути, наглядная спецификация.
![Системный компонент «Линейка». Его прикладывают к макетам таблиц, чтобы пояснить разработчикам, какой ширины должна быть ячейка Системный компонент «Линейка». Его прикладывают к макетам таблиц, чтобы пояснить разработчикам, какой ширины должна быть ячейка](https://habrastorage.org/getpro/habr/upload_files/342/fce/b6b/342fceb6b39b630a80d82195d88b007e.png)
Хеппи-энд
После того, как сверстали первую таблицу и исправили все недочёты, решили обновить все основные разделы с таблицами. Таким образом за полгода команда итерационно их улучшила. В них прекрасно всё: гармоничные отступы, удобные скроллы, лоадеры, скелетоны:
![Новые таблицы. Здесь прекрасно всё: отступы, удобные скроллы, лоадер, скелетоны Новые таблицы. Здесь прекрасно всё: отступы, удобные скроллы, лоадер, скелетоны](https://habrastorage.org/getpro/habr/upload_files/9f0/239/764/9f0239764c8a25e11d2dfdf02e8dcc5e.gif)
Что получилось сделать:
Теперь футер таблицы и колонка с действиями зафиксирована. Пользователям не надо тянуться до нижнего скрола, и искать заветные три точки в широкой таблице.
Продуман адаптив. Если пользователь увеличивает страницу вручную, всё масштабируется пропорционально. Некоторые наши пользователи так делают. Продумана и мобильная версия.
При настроенных фильтрах экспортируется только то, что отфильтровано. Раньше такого не было.
Теперь в таблице помещается 10 строк вместо 5. Это очень важно для тех, кто часто работает с сервисом.
И, конечно, теперь всё на компонентах. Меньше времени уходит на дизайн и вёрстку.
Команды фронтенда и дизайнеров работали в симбиозе. Мы ставили друг на друга задачи в Jira, созванивались раз в неделю и планировали дальнейшие шаги. Никто и не думал работать спустя рукава, и в итоге у нас сформировалась высокая планка качества работы, которой придерживаемся до сих пор.
План и что может пойти не по плану
Таблицы — значимый элемент в сложных B2B-продуктах. Они присутствуют почти на всех страницах, и, конечно, пользователь проводит с ними бóльшую часть времени. Улучшить таблицы — значит существенно улучшить удобство всего сервиса.
Если вы работаете с устаревшим сервисом, то теперь у вас есть пошаговый план действий по безболезненному улучшению продукта:
Проведите презентацию по основным моментам, над которыми собираетесь работать. Подсветите самые несуразные вещи. Хорошо, если в конце презентации представите красивый макет будущего сервиса.
Заручитесь поддержкой руководителей, возьмите небольшой кусочек и сделай его хорошо.
После тестирования нового раздела можно потихоньку переделывать основные разделы сервиса. Главное — маленькими шагами и итерационно.
![](https://habrastorage.org/getpro/habr/upload_files/1a8/06a/27e/1a806a27ee9eb03b8bddf28e43dfce7e.png)
Но любой план может пойти не по плану:
На первых порах не будет никакого результата и высок риск сдаться, так что ищите поддержки у других дизайнеров.
Руководство может быть против. Выявите главную причину несогласия и пробуйте работать с ней. Например, если они не хотят, чтобы продуктовые задачи задерживались, то оговорите, что будете двигаться маленькими шагами.
Или вы можете услышать мантру «Работает — не трогай», мол, есть риски не учесть в новом дизайне все нюансы и предыдущие решения. В этом случае можно предложить визуальный тюнинг (мы это ещё называем фейслифтинг).
Если видите, что что-то не удобно, но вам не приходит задача на исправление — не молчите. Ответственность за качество сервиса лежит на всей команде. Не бойтесь предлагать улучшения и будьте активным.
В статье я сосредоточилась на продуктовом процессе улучшения таблиц, но рекомендую и более теоретические статьи:
Игорь Штанг выпустил целый курс по работе с таблицами. Первая часть бесплатно.
Дизайн таблиц для чайников. Костя из AGIMA на простых примерах рассказал, как работать с данными в таблицах.
Таблицами занималась команда «Ozon Performance — рекламные технологии».
Больше продуктовых историй — в моём канале «Дело в дизайне» и нашем командном Telegram-канале Ozon Design.