SWEET.TV — онлайн-⁠кинотеатр на мобильных устройствах и Smart TV

Контекст и роль

SWEET.TV — онлайн-⁠кинотеатр и сервис просмотра телеканалов.

Изначально я была единственным дизайнером SWEET.TV и отвечала за интерфейсы всех платформ: Web, iOS, Android, Android TV, Samsung Smart TV и LG Smart TV.

Спустя пару лет команда расширилась. Я помогла новому дизайнеру разобраться в продукте и особенностях платформ, постепенно передала ему часть задач по вебу и сосредоточилась на мобильных приложениях и Smart TV.

При этом продолжала участвовать в дизайн-⁠ревью веб-⁠интерфейсов, развивать общий UI kit и следить за согласованностью решений между платформами.

Как я находила и выбирала задачи

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

Обращала внимание на повторяющиеся жалобы, ошибки и неудобные сценарии. Оценивала, насколько проблема серьёзная, как часто возникает и что изменится для пользователя, если её решить.

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

Находки обсуждала с лидом команды, чтобы сверить приоритеты и не дублировать уже начатую работу. Затем прорабатывала решения в прототипах и выносила на обсуждение с командой. Иногда идеи приходилось пересматривать из-⁠за технических ограничений, а к некоторым мы возвращались позже, когда менялись приоритеты.

Решение 01

Телепрограмма и навигация на разных устройствах

Одним из основных сценариев SWEET.TV был просмотр телеканалов и телепрограммы: текущего эфира, архива прошедших передач и расписания будущих. Нужно было сделать этот сценарий удобным на всех платформах, уделив особое внимание Smart TV и мобильным устройствам.

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

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

Smart TV. Большой экран позволяет показать больше информации одновременно, но важно не перегрузить его деталями. Поэтому я разместила список каналов и телепрограмму рядом с видео, чтобы пользователь сразу видел, что идёт сейчас и что будет дальше. При этом нужно было учитывать особенности управления пультом, где даже простые действия требуют больше нажатий.

Проверка. Я изучала решения конкурентов и участвовала в юзабилити-⁠тестировании интерфейса на реальном ТВ. Во время тестов выяснилось, что пользователи не всегда обращали внимание на текст и испытывали трудности при переходе к архиву телепередач.

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

Решение 02

Автовоспроизведение и анимация раскрытия

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

Мы провели несколько тестов, и реакция пользователей оказалась неоднозначной. Сама анимация им нравилась, но автоматический запуск видео устраивал не всех. Одни хотели сначала прочитать описание фильма, другие ещё выбирали, что посмотреть, кто-⁠то мог просто отойти от телевизора, а кого-⁠то пугал звук, несмотря на плавное нарастание громкости.

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

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

Решение 03

Читаемость ТВ-⁠интерфейса

При работе над Smart TV быстро выяснилось, что интерфейс, который хорошо считывается на мониторе, далеко не всегда так же хорошо воспринимается на телевизоре. С расстояния текст становится менее читаемым, а некоторые состояния элементов сложнее различить.

В первых релизах для обозначения фокуса мы использовали градиентную плашку, доставшуюся в наследство от другого продукта. На тёмном фоне она хорошо считывалась, но у SWEET.TV была своя фишка, и передачи проигрывались сразу в правом углу экрана.

Градиенты тогда были популярным приёмом в дизайне интерфейсов, но в нашем случае скорее мешали. На фоне движущегося видео текст местами сливался с изображением, особенно если смотреть на телевизор с дивана.

Я переработала оформление фокуса и текстовых элементов с учётом бренда. Экспериментировала с цветами и контрастностью, убирала градиенты там, где они мешали чтению, и проверяла, насколько хорошо различаются состояния элементов.

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

Решение 04

UI kit и мультиязычность

После перехода команды с Photoshop на Figma я начала собирать общий UI kit для разных платформ SWEET.TV. Добавляла стили, переиспользуемые компоненты и их состояния, постепенно развивая библиотеку вместе с продуктом и возможностями самой Figma.

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

Для проверки переводов использовала плагин Lokalise для Figma. Он позволял подставлять реальные переводы прямо в макеты и смотреть, как они ведут себя в интерфейсе. Чаще всего проблемы возникали с кнопками, названиями фильмов и длинными названиями тарифов.

Часть таких проблем удавалось находить и исправлять ещё на этапе дизайна, до передачи макетов в разработку.

Работа с командой

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

Продолжала просматривать веб-⁠макеты и графические материалы, подготовленные по шаблонам. Проверяла, чтобы новые решения не расходились с общим визуальным стилем продукта, а ошибки не попадали в релиз.