Эти длинные длинные длинные названия фильмов
Я проектирую интерфейсы в b2b-компании, разрабатывающей интерактивные видео-сервисы. Особенностью, которую всегда нужно держать в голове, является то, что реальный контент, с которым будет работать наш интерфейс, может быть не таким прекрасным, как хотелось: постеры низкого разрешения, слишком длинные названия, описания телепередач или фильмов на несколько абзацев.
В одном мобильном проекте максимальный размер постера, который отдавал оператор, был 400x600px, т.е. на смартфонах с плотностью пикселей 3x мы рассчитывали максимум на 133x200pt, и вариант с красивым постером на ширину экрана как на Dribbble можно было не рассматривать.
В этом посте я расскажу, как сервисы, представленные на tvOS и AndroidTV, решают проблему длинных названий и описаний. Я рассмотрю приложения Amazon Prime, Amediateka, Apple TV, IVI, Kinopoisk, Megogo, More TV, Netflix, Okko и Start. У меня не было доступа к Netflix на указанных платформах, поэтому я воспользуюсь снимками экрана, которые несколько месяцев назад сделала на Smart TV Samsung (TizenOS).
Я соберу решения и сформирую своё. Условием задачи я также поставлю отсутствие возможности повлиять на внешний вид постера, с чем мне каждый день приходится работать.
Длинные названия тайлов в подборках
Видео-сервисы как правило строятся на подборках — группах тайлов под общим заголовком (напр., «Новинки», «Популярное», «Комедии» и т.п.). Тайл состоит — в разных комбинациях — из постера, названия, дополнительной информации, лейблов, рейтинга и кнопки play.
Распространённое решение популярных сервисов — постер со считываемым названием. Яркие постеры говорят сами за себя, дополнительная информация под постером не нужна. Так делают Netflix, Amazon Prime, Start и Kinopoisk. Netflix, как вы возможно слышали, подключает персонализацию к постерам, т.е. показывает пользователям разные изображения, чтобы те с большей вероятностью на них кликнули.
При этом Netflix, Amazon Prime и Start выносят заголовок, дополнительную информацию и описание (полностью или частично) наверх. Это решает проблему длинного названия.
В то же время у Apple TV что-то пошло не так.
Что если мы не знаем, какими будут постеры, мы их не готовим, или они могут быть разными? У передач может не быть обложки, и для постера используется кадр из видео. Тайлам нужны названия на тот случай, если они будут плохо считываться с постеров или их не будет вовсе.
Популярное, но не лучшее, на мой взгляд, решение — бегущая строка на фокусном тайле. Название не видно, если тайл не в фокусе или если строка убежала. Кроме того считывание такой строки требует большего когнитивного усилия. Так делают Apple TV, Amediateka, More TV, Ivi и Okko.
Я также видела названия, обрезанные многоточием (More TV для AndroidTV), и не видела ни одной подборки, где название тайла занимало бы больше одной строки — последнее оправдано, потому что есть такие названия, которые не вместит ни одна, ни две, ни три строки, а layout при этом будет неаккуратным.
Наконец отмечу решение Megogo для AndroidTV. Название находится под подборкой. Оно не ограничено шириной тайла. При этом фокус фиксирован на первом постере. На первый взгляд, это кажется правильным, потому что постер и заголовок находятся рядом. Однако неподвижный фокус — устаревший паттерн, при котором нарушается логика взаимодействия: пользователь нажимает кнопку вправо, чтобы сдвинуть контент влево.
Длинные названия в карточке видео
В то время как подборка включает от 4 до 7 тайлов в видимом поле, на карточке видео можно рассчитывать на большую часть ширины экрана для того, чтобы уместить название.
Популярные видео-сервисы используют два метода:
— кастомные названия для каждого фильма в соответствующей стилистике (Netflix, Kinopoisk, Start, Apple TV, Amediateka). При этом здесь и постеры на фоне — специально подготовленные, либо воспроизводится трейлер, что может быть технически ограничено, т.е. для нашего решения такие варианты не подходят.
— используют достаточное пространство (More TV, Megogo, Ivi, Amazon Prime). Опять же, если мы не готовим контент, если у нас нет кастомных постеров в хорошем разрешении, то вариант близкий к тому, который предлагают дизайнеры Amazon Prime, — мог бы нам подойти, хоть он и не поражает воображение красотой.
Впрочем Okko на обеих платформах режет названия на карточке фильма. В AndroidTV при этом пускает бегущей строкой.
Длинные описания в карточке видео
В идеальном мире описания фильмов, сериалов и телепередач имеют ограниченное количество символов, и дизайнер уверен, что они займут не больше 2–4 строк. Большие операторы создают собственные короткие описания. Так делают Netflix, Ivi, Kinopoisk.
Однако наша задача — спроектировать такой интерфейс, который мог бы вместить описание любой длины. Большинство сервисов отображают часть текста (2–7 строк), и делают её кликабельной. Она может быть на первом экране или под скроллом — на втором. При нажатии открывается экран с полным описанием.
Похожий вариант с кнопкой «Подробнее» — применяют чуть реже.
Конечно же есть сервисы, которые обрезают название многоточием без возможности прочитать полную версию (Amazon Prime, Start), но не будем останавливаться на этом.
Решение
На основе конкурентного анализа попробуем спроектировать базовый экран с подборками и экран фильма с учётом ограничений (у нас нет больших кастомных постеров и мы не влияем на длину описаний).
Наконец, воспользуемся плагином Movie Posters для Figma, чтобы наполнить прототип рандомными постерами, и раскрасим наш UI.
Бонус
У меня не было доступа к Hulu, Disney Plus или HBO Max, но я посмотрела обзоры на Youtube и обратила внимание на то, что есть сервисы, которые всё-таки используют больше одной строки для названия тайла в подборке. Так делают HBO Max и Youtube TV. Последний — хороший пример того, каким бывает реальный контент: длинные названия и не говорящие постеры.
Hulu использует менее привычный формат для подборок: вместо групп тайлов с горизонтальной прокруткой — вертикальный список крупных заголовков с меняющимся фоновым изображением при переходе фокуса.
Итог
Я воспользовалась принципом content first, учла, что у видео могут быть очень длинные названия и описания, а у нас может не быть кастомных, подходящих постеров в хорошем разрешении; проанализировала решения конкурентов и спроектировала несколько экранов видео-сервиса. Получилось неплохо.
Не стоит впадать в крайности и подстраивать интерфейс под катастрофически длинные названия вроде «Преследование и убийство Жан-Поля Марата, представленное актерской труппой госпиталя в Шарантоне под руководством маркиза де Сада» или «Эти великолепные мужчины в их летающих машинах, или Как я перелетел из Лондона в Париж за 25 часов 11 минут» — всё-таки большинство названий короче. Хотя даже с этими монстрами наш интерфейс справится на экране с подробным описанием видео.
Напишите, что вы думаете, приходилось ли вам сталкиваться с нестандартным контентом при проектировании интерфейсов, какие решения вы принимали?
P.S.: Прошу прощения за качество снимков экрана и отражение офиса в них, но я не знаю иного способа запечатлеть приложения для ТВ, кроме как сфотографировав экран телевизора на смартфон.
