Обновленный дизайн карточки VoD

Постоянное развитие технологий стремительно меняет тенденции дизайна. В 2020 году пользователи всё больше отдают приоритет скорости, простому дизайну страниц, интуитивному подходу в навигации, формируя новый UX для сервисов по предоставлению контента, который становится must-have для компаний, желающих удержать позиции на рынке и повысить свою конкурентоспособность.

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

Создание условий для взаимодействия с сервисом становится первостепенным, учитывая постоянно растущий показатель churn rate (41% в период с 2019 по 2020 год) . Поставщики OTT должны предоставлять то, что хотят потребители, когда они этого хотят, и там, где они этого хотят, с тем сервисом, который будет удовлетворять всех их требования и ожидания по отношению к платформе.

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

Тренды, которыми мы руководствуемся при ре-дизайне нашего приложения:

1. Микро-взаимодействия
Микровзаимодействия существуют практически в каждом приложении или на веб-сайте. Мы сталкиваемся с ними каждый раз, когда открываем любимое приложение. Отличный пример — функция «Мне нравится».

Микро-взаимодействия впервые появились в 2018 году, и с тех пор прочно закрепились как must-have любого современного, клиентоориентированного приложения.

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

2. Асимметричный дизайн
В последние годы заметен огромный рост асимметричных макетов в дизайне цифровых продуктов. Традиционные макеты на основе шаблонов исчезают. Правильное использование асимметричных макетов придает дизайну характер, динамичность и индивидуальность.

3. Dark UI
"Темная тема" — один из главных трендов UI/UX дизайна в 2020 году. Подавляющее большинство приложений кастомизировали свои интерфейсы, добавив возможность переключения на темный фон.

Оформление пользовательского приложения Telebreeze всегда было выполнено в темных оттенках. Тренд на Dark UI лишь подтвердил нашу изначальную концепцию дизайна.

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

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

5. Градиенты 2.0
Казалось бы, градиенты — это что-то безвозвратно устаревшее, ретро в мире дизайна, но тренды 2020 говорят об обратном. Простые, лаконичные, не вызывающие градиенты снова вошли в моду UI/UX, разнообразив скучные однотонные фоны своей новизной и незатейливостью.

Что мы сделали с пользовательским приложением Телебриз?

Мы визуально изменили сцену "видео по запросу" (VoD) и добавили нескольких новых функций: просмотр трейлера, вынесение всех действий, которые можно сделать с видео на карточку — favorites, share etc.

Зачем мы это сделали?

  1. Смена дизайна под современные стандарты и требования рынка, поддержание конкурентоспособности.
  2. Сохранение привычного UX видео платформ.
С точки зрения пользовательского опыта, проектирование интерфейсов с общими шаблонами UX создает ощущение привычности для пользователей, поскольку они знают, чего ожидать от взаимодействия с элементами интерфейса, с которыми они регулярно сталкиваются при использовании продукта. С технической точки зрения многократно используемые компоненты пользовательского интерфейса могут означать большую эффективность, масштабируемость системы и меньшую переработку для разработчиков.

Почему мы приняли решение изменить приложение?

Мы стремимся к полному ре-дизайну нашего плеера, соответствующему растущим запросам клиентов, тенденциям рынка и веяниям UI/UX. VoD карточка стала отправной точкой в этом направлении.

Что было до?

До этого карточка VoD содержала почти ту же информацию, что и новая, но всё было рассредоточено на экране, было много пустого пространства, выглядела не современно, было нарушение привычного UX.

Как это теперь работает?

При открытии любого фильма открывается новая карточка VoD. Сразу начинается воспроизведение трейлера. Пользователь видит информацию о фильме, трейлеры, оценки, рейтинги.

Какие преимущества для продукта сейчас и в будущем?

Мы улучшили наш UI/UX приложения. Это дало нам толчок к унификации дизайна сцен приложения. Мы избавились от лишнего пустого места, использовали всю область карточки и добавили новый функционал в виде просмотра трейлера.

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

Было и стало