Привет, Хабр! На связи Леша Мельников, Коля Ундалов и Паша Беловол. Леша — менеджер по продукту в KION (онлайн-кинотеатр в экосистеме МТС), отвечает за все, что связано с работой искусственного интеллекта и виртуальных ассистентов. Коля — ML-разработчик, а Паша — Android-разработчик. В этой статье мы расскажем, как, зачем и с каким эффектом мы запустили функционал «Похожие» в онлайн-кинотеатре KION.

Гипотеза

Для начала напомню, что в KION есть несколько инструментов, цель которых — предложить пользователю интересный контент и таким способом продлить время его пребывания на платформе. Мы уже рассказывали про Autoplay, запускающий новый фильм сразу после окончания предыдущего, плюс мои коллеги регулярно приподнимают завесу тайны над нашей системой рекомендаций на базе ИИ. 

Но вернемся к «Похожим». Первоначальная гипотеза, вдохновившая нас на создание этой фичи — то, что с ее помощью мы можем увеличить время просмотра контента пользователем. Если пользователь ставит контент паузу, в web-браузере могли бы показываться рекомендации к просмотру. Пользователь может часто пользоваться этой опцией: бросить просмотр надоевшего контента и переключиться на новый, соответствующий его интересам. Вместо того, чтобы вообще отвлечься от просмотра, он продолжает пользоваться сервисом.

Таким образом, предполагаемую ценность фичи для пользователя мы сформулировали так: «если мне нравится просматриваемый фильм/сериал, я хочу продолжить смотреть похожий контент». Мы в KION привыкли все проверять и подтверждать цифрами, и эта фича не стала исключением :) 

Процесс работы

Для начала мы определились с тем, какие фильмы и сериалы можно в принципе считать похожими. Здесь нам пригодились результаты работы над сервисом Autoplay и нашей системой рекомендаций. Для определения сходства разных единиц контента мы анализируем контентные фичи: текстовое описание, тип контента (сериал или фильм), жанр, страну производства, режиссеров, ключевые слова. Кроме того, для каждого фильма выучивается свой эмбеддинг из статистики просмотров по пользователям. Говоря проще – если какие-то два фильма часто смотрят вместе, алгоритм считывает их как похожие.  

Далее мы приняли решение, что полка похожих будет отображаться только при условии, что алгоритм способен подобрать не менее 5 похожих картин к этому контенту. Это число — условное и может быть любым. Но мы решили: если похожих фильмов или сериалов меньше 5, пользователю будет не из чего выбрать. Чтобы ассортимент выглядел широким, в нем должно быть от 5 наименований. 

Кроме того, в процессе работы над фичей мы решили уйти от отображения похожих фильмов в меню «паузы». Мы усовершенствовали подсмотренный у конкурентов функционал и дали пользователю возможность смотреть ленту с рекомендацию прямо во время воспроизведения — достаточно просто тапнуть по экрану и вызвать меню. Это гораздо проще и быстрее, чем нажимать на паузу, а затем свайпать для выдвижения полки с рекомендациями. Дополнительное действие потребовало бы от пользователя более осознанного намерения посмотреть «предложку», а значит, на этом этапе мы могли бы потерять тех, кто пользуется рекомендациями импульсивно — они бы просто закрыли приложение. 

Механика

Мы разрабатывали фичу для разных платформ. Сейчас она доступна для пользователей iOS, AndroidTV, tvOS. Остальные версии — в производстве. 

При воспроизведении контента, клиент выполняет запрос к API, которое возвращает список похожих фильмов. Клиент получив данные, отрисовывает полку с похожим контентом. 

При вызове контролов любым способом (например, уже упомянутым тапом по экрану) отображается полка «Похожие фильмы». Карточки оформлены в виде «зубов» — выглядывающих снизу постеров. При этом просматриваемое видео можно не ставить на паузу: выбирать похожий контент можно прямо во время просмотра. 

Пользователь видит так называемые «зубы» — карточки фильмов, торчащие внизу прогресс-бара

Если алгоритм может предложить меньше 5 рекомендованных фильмов, то стрелочка на полку просто не отображается.

Если субтитры включены, при открытии полки «Похожих» они прячутся на то время, пока полка открыта. Как только рекомендации сворачиваются — субтитры вновь появляются. 

У пользователя есть возможность добавить/удалить контент из избранного прямо во время просмотра.

ОПользователь видит сообщение сообщение об успешном добавлении фильма в избранное.

Как это делалось на Android

Для реализации полки на платформе Android используется MotionLayout.

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

Поместим нашу полку в данный контейнер.

<MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/motionLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layoutDescription="@xml/scene">


   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recyclerView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       tools:ignore="SpeakableTextPresentCheck"
       tools:itemCount="10"
       tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
       tools:layout_editor_absoluteX="147dp"
       tools:layout_editor_absoluteY="230dp"
       tools:listitem="@layout/item"
       tools:orientation="horizontal" />
</MotionLayout>

Так MotionLayout берет управление над полкой-виджетом recyclerView

Данный виджет, позволяет “из коробки” настроить полку так чтобы она реагировала на свайп.

<Transition
   android:id="@+id/transition"
   motion:duration="600"
   motion:autoTransition="none"
   motion:constraintSetEnd="@+id/expanded"
   motion:constraintSetStart="@+id/collapsed">

   <OnSwipe
       motion:dragDirection="dragUp"
       motion:touchAnchorId="@+id/recyclerView"
       motion:touchAnchorSide="top" />
</Transition>

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

Пользователь видит полностью выдвинутую полку

Далее описав файл сцены, мы легко добавляем анимацию затемнения плеера, и также анимируем через alpha текстовый лейбл “Смотрите также”.

<ConstraintSet android:id="@+id/collapsed">

   <Constraint
       android:id="@+id/fade"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:alpha="0" />

<Constraint
   android:id="@+id/header"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:alpha="0" />

</ConstraintSet>

 Описание файла сцены когда панель свернута

<ConstraintSet android:id="@+id/expanded">

   <Constraint
       android:id="@+id/fade"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:alpha="0" />

<Constraint
   android:id="@+id/header"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:alpha="0" />

</ConstraintSet>

Описание файла сцены когда панель развернута

Для того чтобы программно свернуть полку нужно вызвать:

motionLayout.transitionToStart()

Для того чтобы программно развернуть полку нужно вызвать:

motionLayout.transitionToEnd()

Эксперимент 

Как уже было сказано, мы привыкли подтверждать эффективность любой фичи цифрами. «Похожие» мы тоже тестировали. Целью эксперимента было сравнить две группы — с полкой «Похожие» и без нее по следующим показателям: TVT/TVTu, Retention, Добавление в избранное, Просмотры из избранного, Длина сессии.

Эксперимент для зрителей в Android-приложении продлился примерно месяц, в это время полка показывалась в плеере у 3% пользователей ежедневно. Функционал «Похожие на Паузе» в начале эксперимента показывал небольшой рост параметра «Длительность сессии пользователя», но при этом не сказывался резко положительно на показателях TVT/TVTu и количестве просмотренного контента за день. Можно сказать, что пользователь вовлекался в сервис благодаря новому функционалу, но при этом фича не привела к значимому росту метрик.

Однако более 40% пользователей из числа тех, кто увидел подборку, переходили в карточку одного из предложенных фильмов. CTR одной карточки в полке во время произведения составлял в среднем 15%, тогда как средний показатель полки «Похожие» в карточке контента составил 6%. 

Результаты эксперимента для iOS оказались схожи по выводам.

Почему мы внедрили фичу? Все просто: чтобы вовлечь пользователя в просмотр контента и показать рекомендации — продемонстрировать, что у нас есть интересные фильмы и сериалы. Да и плеер без рекомендаций выглядит пустовато. Ну и в целом, когда речь идет о вовлечении пользователя, любой прирост достоин внимания :)

Спасибо вам за уделенное статье время! Если у вас есть вопросы – с радостью ответим на них в комментариях.

А еще предлагаем почитать другие статьи про KION и его фичи:

Как мы научили ИИ смотреть кино

Как Computed Properties в Angular помогают пропускать титры

Как работает Autoplay в онлайн-кинотеатре

В поисках потерянного битрейта

Как мы улучшали функциональность онлайн-кинотеатра на tvOS

Разработка на Angular под SmartTV: история одной фичи

Как сделать анимацию с помощью MotionLayout

Как устроена бесшовная авторизация в онлайн-кинотеатре