Метрики

Важным этапом и процессом в жизни любого продукта являются метрики. Они помогут оценивать результат вашей работы и принимать правильные решения. Для удобства мы разделим метрики

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

Компонентные метрики

Собирать компонентные метрики можно из двух источников: Фигмы и кода.

В Фигме это платная функция и доступна на продвинутых тарифах. Она поможет снять следующий показатели:

Количество использований компонента: сколько раз конкретный компоненты был использован во всех файлах компании за выбранный период.

Уникальные пользователи или охват: сколько дизайнеров используют библиотеку.

Охват в срезе команд: в файлах каких команд используются компоненты.

Топ-N самых популярных компонентов

Топ-N наименее используемых компонентов: это кандидаты на удаление или рефакторинг. Возможно, компонент слишком сложный, не соответствует реальным потребностям или о нем просто никто не знает.

Динамика использования: как росло или падало использование конкретного компонента после его добавления или обновления.

Использование пропсов: какие значения используются чаще, а какие не используются вообще. Возможно, это кандидаты на удаление.

Использование вариантов: какие варианты компонента популярны, а какие нет.

Какие компоненты деаттачатся: поле для исследования кто их деаттачит и зачем.

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

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

Метрики документации

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

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

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

Время на сайте: среднее время, проведенное на сайте. Долгое время говорит о том, что контент читают и изучают, а не просто закрывают.

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

Цели на переход в бэклог или Storybook

Цели на скачивание мобильных витрин компонентов

Поиск: что ищут пользователи, zero-result, цели на переход из поиска.


Подключить Метрику к Docusaurus очень просто за счет наличия готового плагина docusaurus-plugin-yandex-metrica. Для этого повторите свой предыдущий опыт: создайте задачу, создайте ветку и напишите промт для Курсора.

CSI или метрика удовлетворенности дизайн-системой

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

Так вы сможете объективно подойти к оценке удовлетворенности пользователей и вовремя реагировать на скрытые и потенциальные проблемы.

Визуализация данных

Работа с метриками состоит из трех составляющих: сборе, хранении и визуализации. В нашем случае, сбор и хранение берут на себя Яндекс Метрика, Кликхаус и Фигма, но что делать с визуализацией.

А для визуализации есть DataLens: