Улучшаем таблицы в большом продукте

Продуктовый байопик о команде дизайнеров из Ozon Performance

Захотелось кликнуть в сторону, чтобы снять выделение? Так ведь? :)

Хочу рассказать о том, как команда работала над сильным продуктом, но у которого вместе с тем было много UX-недочетов: неважная навигация, консистентность, неудобные таблицы.

На тестировании одна девушка заметила, что трудно прокручивать таблицы по горизонтали: нужно было листать до низа страницы, искать контрол скролла и только потом прокручивать вправо. Но у нее было решение: она уменьшала страницу, находила скролл и перетаскивала его. Такой трюк приходилось выполнять несколько раз в день.

Страница Ozon Performance осенью 2021 года. Трудно прокрутить по горизонтали, чтобы увидеть остальные колонки.

Часто дизайнерам приходится работать с устаревшими системами, нет ресурсов, чтобы что-то улучшать, поэтому новые доработки внедряются с минимальными изменениями. Каждая новая функциональность всё больше и больше усложняет систему, делая её невыносимой для использования.

Так и у нашей команды дизайнеров. Таблицы уже устарели, и их нужно было переделывать. Правда, у бизнеса и разработки свои задачи и приоритеты. Никто и не думает заниматься дизайн-долгом, когда надо внедрять новую функциональность. Как же быть, если у задачи низкий продуктовый приоритет?

Презентация

Чтобы убедить руководство в необходимости изменения приоритетов, в первую очередь надо показать отрицательные стороны продукта.

Старые таблицы. Фильтр далеко от таблиц и ближе к навигации. Из-за этого может быть непонятно, как они работают

Команда собрала все критичные моменты в презентации. Акцент при этом сделали на том, что недочеты легко исправить, а также на том, что изменения качественно улучшат удобство сервиса. Кроме того, в презентации были предварительные макеты, которые показывали, каким удобным, современным мог бы стать продукт.

В Ozon очень сильная культура дизайна. Это означает, что бизнес понимает важность UX. Заметив много несуразных мест в интерфейсе, руководители одобрили развитие таблиц. Теперь разработка будет закладывать часть спринта на дизайн-долги, а также на развитие компонентной верстки.

После этого, получив согласие, команда приступила к разработке новых таблиц на компонентах.

Проблемы

1. Основная проблема была с горизонтальным скроллом: нужно скроллить сначала вниз, а потом в сторону. Это критично, потому что нельзя дотянуться до трех точек в конце строк.
2. Громоздкие фильтры отбирали бóльшую часть рабочей области. По статистике, сервисом пользовались и с маленьких мониторов.
3. Если отфильтровывали таблицу и кликали на экспорт, то экспортировалась вся таблица без учета фильтров.
4. Слишком высокие ячейки. В некоторых местах требовалось уменьшение высоты, чтобы пользователь мог работать с большим объемом строк.

На самом деле это довольно-таки частые проблемы с таблицами в крупных сервисах. Конечно, существует много теории на этот счет, но сделать всё хорошо с первого раза очень сложно. В верстке всплывает много моментов, которые нельзя учесть в макетах.

Старые таблицы. Справа — еще колонки, а в конце — заветные три точки с действиями

Построение таблиц

Чтобы с таблицами было удобно работать и дизайнерам, и разработчикам, решили задать строгую систему. Теперь таблицы состоят из простых блоков — фильтра, ячеек хедера, обычных ячеек, пахинатора. Из этих элементов и собирается таблица.

Компоненты ячеек

Компонент пахинатора и списка действий

Компонент фильтра

Целый компонент большой и маленькой таблицы, собранный из предыдущих блоков. Его берет дизайнер, настраивает, а затем открепляет, чтобы вставить нужные ячейки. Практика показала, что это удобно

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

Макеты новой таблицы, полностью сверстанной на Auto Layout по заданным гайдлайнам системы

Компонент новой таблицы. Пахинатор меняется на блок с действиями

Тестирование первой таблицы

Через некоторое время сверстали первый раздел с небольшой таблицей.

Первая таблица, сверстанная по новым гайдам

Дизайнеры, тестировщики прокликивали все состояния, а затем заводили баги. Ошибок было очень много. Что-то заезжало, где-то слетали эффекты при наведении, а что-то просто не учли. Например, поняли, что надо задать размеры ширин для ячеек. Так и появилась «Линейка».

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

Хеппи-энд

После того как сверстали первую таблицу и убрали все недочеты, решили обновить все основные разделы с таблицами. Таким образом команда Ozon итерационно улучшила таблицы. На это ушло полгода.

Новые таблицы. Здесь прекрасно всё: отступы, удобные скроллы, лоадер, скелетоны

Таблицы — значимый элемент в сложных B2B-продуктах. Таблицы присутствуют почти на всех страницах, и, конечно, пользователь проводит с ними бóльшую часть времени. Улучшить таблицы — значит качественно улучшить удобство всего сервиса.

Если ты работаешь с устаревшим сервисом, то теперь у тебя есть пошаговый план действий по безболезненному улучшению продукта.

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

Но это требует очень много сил. Поэтому я и написала эту статью, чтобы показать что всё-таки это возможно сделать.

Сил и удачи!

Таблицами занималась команда «Ozon Performance — рекламные технологии».

Руководитель: @mikulin.

Дизайнеры: @nikklimenko, @shatkon.

И твой автор: @alex_saveleva.

Больше продуктовых историй — на канале «Дело в дизайне».