Яндекс Алиса / Плеер для ТВ
Добавление новых функций в ТВ-плеер с сохранением существующих сценариев
Дата
Март 2025
Роль
Продуктовый дизайнер
Задача
Музыкальный сценарий в наших устройствах — один из самых популярных.
Чаще всего пользователи открывают музыкальный плеер голосовой командой: «Алиса, включи музыку». Поэтому мы хотим обогащать музыкальный плеер новыми сценариями.
Необходимо добавить на экран музыкального плеера для ТВ-станции сценарии:
караоке,
клипы,
возможность открытия плейлиста списком на экране плеера.
Важно учитывать особенности управления пультом. Передвигаться по экрану можно только с помощью кнопок: влево, вправо, вверх, вниз, ОК, назад.
Также важно не потерять текущие сценарии, уже присутствующие на экране.
Процесс
Анализ конкурентов и гипотезы
Изучила несколько ключевых конкурентов — муз. стримингам для ТВ, а также приложения для караоке на ТВ
Проанализировала Яндекс Музыку для Кинопоиска и веба, чтобы соблюсти консистентность
Проанализировала релевантные задаче решения
Провела анализ веб-версий музыкальных сервисов, чтобы понять привычный для пользователей функционал
На основе анализа приложений составила гипотезы, которые буду проверять в исследовании пользователей
Исследование пользователей
Провела несколько интервью с пользователями, которые используют музыкальные стриминги на ТВ и в смежной области (стриминг кино)
Уточнила их ожидания, боли и предпочтения относительно функционала и управления
Решение
Создала макет с новыми сценариями + флоу
Сохранила текущие сценарии
Учла ограничения управления пультом
Исследование
Анализ конкурентов + Яндекс Музыка
Данные сервисы наиболее актуальны по функционалу, который необходимо добавить на макет, а анализ Яндекс Музыки как на ТВ, так и в вебе необходим, чтобы понять, к чему пользователь привык и хотел бы видеть и в интерфейсе Яндекс Алисы.
Другие плееры, например. Soundcloud и Gala music, имеют крайне ограниченный функционал, поэтому они не включены в разбор.
Подробно весь разбор, а также сформулированные гипотезы можно посмотреть в Figma.
Исследование пользователей
Цель исследования — изучить потребности и поведение пользователей музыкального стриминга на ТВ, чтобы разработать удобный и функциональный интерфейс плеера с новыми сценариями (караоке, клипы, плейлист списком).
Исследование направлено на проверку гипотез, связанных с добавлением новых функций, и на понимание того, как пользователи взаимодействуют с текущим интерфейсом, чтобы предложить улучшения, соответствующие их ожиданиям и привычкам.
Провела 4 плейтеста и 3 интервью с пользователями, которые используют музыкальные стриминги на ТВ и в смежной области (стриминг кино)
Уточнила их ожидания, боли и предпочтения относительно функционала и управления
На основе полученных инсайтов начала делать макеты.
Результат
В начале работы я всегда стараюсь по максимуму завести переменные и стили, сделать компоненты. Мне так проще и я люблю это делать. В процессе дизайна доделываю.
Дефолтный экран
На дефолтном экране (играет трек, взаимодействия нет) остались только 5 элементов: обложка, автор и название, прогресс трек, кнопка Плейлист дня с общим временем и логотип. На место времени — логотип, так как внизу он будет часто закрыт плейбаром.
Время плейлиста перенесено к его названию. Название плейлиста стало кликабельным
Полный экран плейлиста
Сюда перешли с главного экрана опции Перемешать и Повторять. По исследованию, их используют очень редко.
К каждому треку предполагалось добавить лайк и время трека, но будет шумно, и плейлисты респонденты формируют на смартфоне или в вебе, а не на ТВ.
Активный экран трека
Возвращаемся на экран трека, и при клике на пульт открывается слайдер из треков плейлиста,
плейбар, кнопки действий.
Кнопка Караоке в виде буквы Т с горизонтальными линиями заменена на микрофон. Причины:
Микрофон понятнее для караоке
Планируется кнопка отключения, и микрофон проще зачеркнуть и будет не так шумно
Т в иконке актуальнее для русскоязычных пользователей, тогда как для англоязычных — это Lyrics
Лайк стоит сперва, как в исходном файле, а также как в Музыке на Кинопоиске. Далее включение клипа (видео).
Дизлайк стоит в конце, так как предполагаю, что его будут кликать реже.
Дизлайк можно не отображать в прейлстах, которые составил сам пользователь.
в данном же плейлисте он актуален, так как пользователь его не составлял.
Повтор и Перемешать, по исследованию, используют редко, поэтому они в самом крайнем углу, с ними же и плейлист (откроется оверлеем, об этом будет далее), так как его также можно открыть из верхнего левого угла.
Альтернативный вариант
Данный вариант может быть актуален, если добавлять рекомендации вниз после плейлиста следующим нажатием на пульте Вниз. По исследованию, рекомендации нужны пользователям (понравился трек, и хочется слушать подобные). Увеличивается вовлеченность.
Караоке
Обложка трека стала меньше и убрана с центра экрана, чтобы по максимуму освободить его для текста песни.
При переходе в караоке добавлены функции Перевод и Транслит.
Перевод актуален для тех, кто не знает язык и хочет знать, о чем песня
Транслит также для тех, кто плохо знает или не знает язык, но хочет петь
Один из вариантов перехода на следующий трек
По исследованию, респонденты указали, что им не понятно в Яндекс Музыке на ТВ, почему они включили текст песни, а текста нет. Показывается просто пустой экран без текста. Поэтому я добавила данное дружелюбное сообщение.
Закрываем караоке кнопкой с зачеркнутым микрофоном и переходим на видео:
Дефолтный экран видео
На дефолтном экране только видео и логотип сервиса. Ничто не должно отвлекать от картинки во время проигрывания. И только при клике на пульт видим активный экран:
Активный экран видео
При клике на пульт видим такую же панель, как и на караоке. Кнопки:
Выключить видео — и тогда мы вернемся в на экран с обложкой трека
Субтитры
Плейлист
Можно также добавить и кнопку Настройки, если таковые будут в системе
(качество видео, скорость видео и тд).
Оверлей с плейлистом
Альтернативный вариант плейлиста
Итог кейса
Добавлены необходимые сценарии, прописан флоу, сохранены текущие сценарии, а также предложены новые (Перевод, Транслит). Все решения подкреплены исследованиями пользователей, а также с учетом лучших практик рынка.
