Назад

Литрес

TV-приложение ✶ для экосистемы цифрового контента Литрес

MediaTechB2CSmart TV

Designer, Teamlead

2025

Russia

4 months

Link to product

Литрес TV — интерфейс приложения для Smart TV

Контекст

Литрес — один из крупнейших сервисов электронных и аудиокниг в СНГ с собственной экосистемой цифрового контента: книги, аудиокниги, подписка и рекомендации

Моя команда работала над развитием TV-приложения для прослушивания аудиокниг через SmartTV

Цели и задачи

Нужно было адаптировать существующую платформу под сценарии использования на ТВ-устройствах и спроектировать интерфейс с учётом особенностей remote-navigation

Основной фокус был на:

  • Навигации с пульта
  • Читаемости интерфейса на больших экранах
  • Быстром доступе к библиотеке и прослушиванию

Особенности и ограничения

TV-интерфейсы требуют другого подхода к UX по сравнению с мобильными и веб-продуктами:

  • Интерфейс используется с большого расстояния
  • Пользователь взаимодействует с интерфейсом через remote-control
  • Навигация строится вокруг focus states, а не touch-сценариев
  • Любое лишнее действие увеличивает сложность взаимодействия

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

Система обозначений переходов через remote-control

Так, все переходы между макетами сопровождались визуальным отображением того, как пользователь будет взаимодействовать с платформой через remote-control

Пример навигации через пульт между экранами

Ключевые разделы

Раздел #1 ⋅ Главная

Главная страница позволяет пользователю быстро вернуться к текущей книге, продолжить прослушивание или перейти к подборкам и рекомендациям

При проектировании основной фокус был на быстром доступе к контенту и минимизации количества действий при навигации с пульта: стартовый фокус начинается с центральной навигации (раздел «Главная»), чтобы пользователь мог перейти к основному сценарию прослушивания всего за одно действие (↑); основные разделы доступны через горизонтальную навигацию (←/→); контент внутри страницы выстроен по вертикали, что делает взаимодействие более привычным и предсказуемым для TV-интерфейсов (↓)

Главная — стартовый фокус
Главная — горизонтальная навигация
Главная — вертикальные секции
1/1

Раздел #2 ⋅ Плеер

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

При проектировании заложила следующие переходы: стартовый фокус начинается с кнопки воспроизведения, чтобы пользователь мог сразу управлять паузой, перемоткой и переключением глав; переход между основными зонами интерфейса реализован через вертикальную навигацию (↑/↓); выход из плеера и возврат к предыдущим сценариям доступен через один шаг (↑); дополнительные функции, такие как закладки, таймер и скорость воспроизведения, вынесены в отдельную нижнюю зону интерфейса, доступную также через один шаг (↓)

Плеер — основной экран
Плеер — управление главами
Плеер — закладки и таймер
1/1

Раздел #3 ⋅ Библиотека и каталог

Разделы библиотеки и каталога помогают пользователю взаимодействовать с контентом платформы: возвращаться к своим книгам, продолжать прослушивание, искать новые произведения и исследовать рекомендации

Раздел «Мои книги» — личная библиотека пользователя и основной сценарий возврата к контенту. Здесь собраны все сохранённые сущности платформы: купленные и отложенные книги, сохранённые списки и авторы, а также история прослушивания. Основная логика взаимодействия построена вокруг вертикальной навигации (↑/↓), а переключение между разделами реализовано по горизонтали (←/→)

Раздел «Каталог» объединяет весь контент, доступный пользователю внутри платформы: популярное, новинки, хиты, подборки и тематические разделы. Структура раздела повторяет логику веб-платформы, чтобы сохранить привычные пользовательские паттерны и упростить навигацию между устройствами

Раздел «Жанры» проектировался как отдельный сценарий для исследования контента и поиска новых книг через пользовательские предпочтения и фильтрацию. Это адаптация сложной системы фильтров веб-версии под TV-формат: часть сценариев была вынесена на отдельный уровень, чтобы упростить взаимодействие с большим количеством параметров через пульт. Навигация внутри раздела сочетает несколько уровней взаимодействия: переход между основными категориями построен по вертикали (↑/↓), а работа с вложенными сущностями — через вертикально-горизонтальную структуру (↑/↓/←/→), напоминающую табличную навигацию

Мои книги — личная библиотека
Каталог — структура контента
Жанры — фильтрация через пульт
1/1

Раздел #4 ⋅ Подписка и покупка контента

Сценарии оформления подписки и покупки контента в TV-версии были напрямую связаны с веб-платформой, поэтому часть процессов реализована через переход на внешние экраны (с использованием QR-ссылок на соответствующие разделы сайта или приложения)

В продукте поддерживались все основные модели монетизации из веб-версии: пробная подписка (trial), месячные и годовые тарифы, покупка книг навсегда с фиксированной стоимостью, а также абонементная модель, при которой пользователь получает подборку из трёх случайных книг в месяц на постоянной основе

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

Подписка — выбор тарифа
Покупка через QR на внешний экран
Оплата через СБП с ТВ
1/1

Результаты

В результате мы с командой спроектировали и адаптировали TV-версию приложения Литрес с фокусом на сценарии прослушивания аудиокниг и навигацию через TV-устройства

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

Проектные решения были реализованы в продукте — TV-приложение было выведено в продакшн и сейчас используется пользователями. Продукт запущен в рамках экосистемы Литрес и используется как TV-направление сервиса