UX/UI
InStat
О продукте
InSports TV (бывш. Instat) — это OTT (Over The Top) платформа, с прямыми трансляциями спортивных событий, а также удобными плейлистами хайлайтов, голов или определённых игроков.
После покупки подписки пользователи могут смотреть трансляции, взаимодействовать с лигами, командами, игроками и т.д.
Клиенты
Американская компания InSports (бывш. Instat) разработчики платформы для прямых спортивных трансляций и их записей.
У них уже был работающий продукт в виде web-приложения, двух мобильных приложений, а также приложения для Android TV. К нам они решили обратиться, чтобы сделать приложение для операционной системы телевизоров Samsung — Tizen TV.
Что нам предстояло сделать Что нам предстояло сделать
Что нам предстояло сделать Что нам предстояло сделать
back-end
интеграция
Так как у клиента уже была готовая экосистема приложений на разных платформах, нам не пришлось разрабатывать бэкенд с нуля. Всё что от нас требовалось в плане бэкенда — это всё изучить и интегрировать его в новое приложение для Tizen.
Front-end разработка
- Главную страницу со списком трансляций и фильтрацией по дате
- Страницу команды со списком их матчей
- Страницу игрока с матчами, в которых он участвовал
- Избранное для команд и игроков
Интересные функции
Поиск
по игроку
Пользователи могут искать своих любимых игроков и просматривать все матчи с их участием.
Предпочтения
Пользователи могут настроить свои предпочтения, выбрав какие виды спорта их интересуют. Также можно выбрать, какие лиги и чемпионаты хочется отслеживать.
Интересные функции
Варианты просмотра
Основной фишкой приложения стала возможность выбрать, какую часть трансляции пользователь хочет смотреть. На выбор предоставляется 4 варианта с разной продолжительностью.
Эта функция экономит время пользователей, делая любимый ими спорт ещё доступнее. Ведь вместо просмотра 2-х часовой трансляции достаточно просто нажать одну кнопку и за 5 минут увидеть всё самое интересное.
Нам нужно было превратить список временных отрезков с интересными моментами в виде (00:15:13–00:16:22) — в короткое видео с главами. Причём реализовать эту функцию так, чтобы пользоваться ей было удобно на телевизоре, где управление происходит пультом.
UI/UX-дизайн
У заказчика уже был готовый дизайн-проект приложения для Tizen для Tizen — это сэкономило много времени и денег. Тем не менее, некоторых состояний не хватало, поэтому наши дизайнеры все-таки дорисовали несколько экранов.
Работали в тандеме с дизайнером заказчика. Несмотря на то, что мы были в разных часовых поясах, работали оперативно и слаженно.
СТЭК
Технологии
Мини-погружение в технологии. Обещаем, будет несложно.
Приложения для SmartTV (Samsung Tizen, LG WebOS, Hisense Vidaa) работают по принципу веб-приложений в телевизоре.
React.js
React.js
Для разработки веб-приложений мы используем фреймворк React.js.
Smart TV
Smart TV
Его возможностей хватало, чтобы реализовать все функции Instat
Разница между
приложением
веб-приложением и приложением
для TV
в том, что
на телевизоре
навигация
осуществляется
с помощью пульта.
У пользователя нет
курсора, поэтому
Пользователь не сможет
свободно нажать
на любую точку экрана,
как в случае с мышкой
или пальцем, а должен
переходить
от элемента
к элементу
поочерёдно.
Навигация должна быть
четкой и предсказуемой,
четкой и
предсказуемой,
чтобы внутри приложения
было легко перемещаться.
Для этого мы
расположили весь
контент на жесткой
прямоугольной сетке.
Пользовательская клавиатура
Также клиент хотел, чтобы в приложении была кастомная клавиатура, а не стандартная Samsung. Это сделало бы интерфейс более однородным, и открытие клавиатуры не слепило бы пользователей в темноте.
Нам нужно было сделать собственную клавиатуру, запретив использование родной.
При этом
приложение
поддерживает
множество
языков
А значит на каждой раскладке будет разное количество символов. Поэтому мы сделали собственную раскладку для каждой клавиатуры, чтобы приложение оставалось удобным для пользователей из разных стран.
Контроль качества
Мы делали приложение под телевизоры Samsung. Их отличительная черта — особый UI/UX непохожий на другие телевизоры. Для нас всегда важно тестировать приложения, чтобы всё отлично работало без багов. Поэтому мы купили телевизор Samsung, так как у нас в офисе был только LG. Благодаря этому, мы проработали все краевые сценарии. Приложение безупречно работает на всех телевизорах Samsung.
Что дальше? Что дальше? Что дальше? Что дальше? Что дальше? Что дальше? Что дальше?
Что дальше? Что дальше? Что дальше? Что дальше? Что дальше? Что дальше? Что дальше?
Приложение готово!
Приложение
готово!
Мы передали его
клиенту и оно вот-вот
будет
в релизе
Может, вы хотите запланировать онлайн-встречу?
Что-то пошло не так.
Пожалуйста, попробуйте ещё раз позже.