UX на ТВ драматически отличается от обычного веба.
Пользователь смотрит на приложение с 3-х метрового расстояния и перемещается по нему с пульта или геймпада
Визуальные элементы должны быть БОЛЬШИМИ, а количество информации, которую можно уместить во вьюпорт, снижается
Такие интерфейсы называют 10-foot user interface
en.wikipedia.org/wiki/10-foot_u…
Перемещение по приложению происходит с помощью кнопок ➡️⬆️⬇️➡️. В интерфейсе нужно ярко выделять фокусный элемент и максимально понятно давать понять, на какой элемент перейдет фокус по нажатию на одну стрелок
Такая навигация называется Spatial navigation.
Сначала, самая простая часть, надо понять, какая из кнопок была нажата. Почти все платформы используют одинаковые keycodes, но некоторые идут своим путем
Иногда боль начинается уже на строении пульта. Кнопка доооооолго жмется вниз, доооооолго отжимается обратно, и примерно только тут сигнал долетает до тв
Для перевода фокуса по ивентам с пульта в приложении должен быть фокусный движок.
Есть драфт CSS Spatial Navigation Level 1 о нативной двумерной навигации. Пока он не реализован ни в одном браузере
drafts.csswg.org/css-nav-1/
Но можно заюзать полифил!
wicg.github.io/spatial-naviga…
На этом сайте демка) Попробуйте поперемещаться по нему кнопками.
wicg.github.io/spatial-naviga…
В нашем приложении свой фокусный движок.
Вводная статья нетфликса про spatial navigation:
netflixtechblog.com/pass-the-remot…
Вообще у них крутой техблог!
А у тех команды интерфейсов есть твиттер @NetflixUIE