Новый интерфейс для ВК Видео. vk.. vk. vkonakte.. vk. vkonakte. youtube.. vk. vkonakte. youtube. Веб-дизайн.. vk. vkonakte. youtube. Веб-дизайн. вквидео.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений. инновации.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений. инновации. интерфейсы.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений. инновации. интерфейсы. Разработка мобильных приложений.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений. инновации. интерфейсы. Разработка мобильных приложений. таламус.. vk. vkonakte. youtube. Веб-дизайн. вквидео. ВКонтакте. Дизайн. Дизайн мобильных приложений. инновации. интерфейсы. Разработка мобильных приложений. таламус. Управление медиа.

Да — это свершилось. В 2026 перед командой разработки ВК Видео стояла амбициозная задача — реализовать ряд инновационных функций, которые скопируют ведущие цифровые платформы. И эта задача на конец октября полностью выполнена. 

Новый интерфейс для ВК Видео - 1

«Я поставил команде такой KPI, сделать принципиально новые оригинальные фичи, которые потом скопирует YouTube»

Старший вице‑президент по медиастратегии и развитию сервисов VK

Разумеется, не приходится ждать расторопности со стороны конкурентов. Любое изменение продукта — это полноценная разработка, но у инноваций она отличается еще и по характеру работы. Выше неопределённость: заранее неизвестно, сработает ли гипотеза, поэтому исследования и проверка жизнеспособности занимают больше времени и требуют нескольких итераций. Шире круг затронутых решений: новая функция может потребовать пересмотра продуктовой стратегии и изменить юнит‑экономику. Из‑за этого и цикл согласований оказывается длиннее — процесс затягивается.

Тут можно вспомнить историю распространения формата коротких видео. Изначально, их разработали для сервиса Snapchat в октябре 2013 года как функция My Story — и сначала, по признанию самой компании, был не очень популярен. Instagram скопировал механику в августе 2016-го, а спустя два месяца Stories в Instagram набрали 100 млн ежедневных пользователей — две трети от тогдашней аудитории Snapchat. Полноценный короткий вертикальный формат с музыкой и эффектами — Reels — Instagram запустил позже: тесты начались в Бразилии в 2018-м, а глобальный релиз состоялся 5 августа 2020 года. YouTube подключился к гонке последним: Shorts стартовал в Индии в сентябре 2020-го, в США — в марте 2021-го, а на глобальную экспансию ушло ещё несколько месяцев. 

Новый интерфейс для ВК Видео - 2

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

Новый интерфейс для ВК Видео - 3

А функция кадрирования (pan&scan), которая растягивает широкоформатное видео так, чтобы не было черных полос, провела в круговороте согласований и поиска аргументов почти год. И речь тут только про иконку, так как сама возможность растягивать видео технически была заложена в код плеера еще в 2017 года, а вот для иконки понадобился серьезный пласт предварительной работы. 

Новый интерфейс для ВК Видео - 4

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

Экспертиза

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

Если на чистоту, отечественная цифровая индустрия — это не то, что ассоциируется с инновациями. Конечно исключения случаются: и где есть по настоящему прорывные решения, и экспертов в своих областях хватает. Однако это нишевые или узко специализированные решения, которые уходят на продажу, а не выступают поводом для гордости и копирования конкурентами.

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

Мы привыкли ждать инновации «от Стива», но и сама Apple давно не способна предложить ничего нового, чтобы было не стыдно поставить в один ряд с мышью, click wheel или мультитач.

Новый интерфейс для ВК Видео - 5

Последние инновационные интерфейсные решения, которые сегодня используются в iPhone и Android, пришли от выходцев из Nokia: именно они в Sailfish OS одними из первых предложили управлять системой жестами, а не кнопками — и эта логика читается в современных смартфонах до сих пор: свайп от края для возврата назад, свайп вверх для домашнего экрана и переключения приложений, свайп сверху вниз для уведомлений и многозадачность на карточках.

Новый интерфейс для ВК Видео - 6

Extremis malis extrema remedia

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

Проблема обложек

Обложка, пожалуй, самый яркий элемент контента, встречающегося на платформе. Это не удивительно, поскольку задача обложки — привлекать внимание. 

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

Есть еще задачи идентификации, информирования, анонсирования, но это частные случаи поисковых задач. 

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

Новый интерфейс для ВК Видео - 7

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

Усугубляет ситуацию эффект «следящих глаз»

Когда на заре индустрии дизайнеры формировали облик видеосервисов, принципиально невозможно было предположить бум на человеческие эмоции, рост креаторов и относительную дешевизну производства роликов. Актуальный камерофон, петличка, пара источников освещения и студия для ежедневных подкастов готова. Вчерашние пользователи сами создают ценность — контент на любой вкус и зрителя. И если раньше умеренный объем контента создавали студии, мультипликаторы, студенты и номинанты короткометражных премий (future‑shorts) где обложки отличались жанровым разнообразием и принадлежностью, то сегодня сложно представить тебе иллюстрацию для ролика без лица фронтмена. 

Новый интерфейс для ВК Видео - 8

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

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

Новый интерфейс для ВК Видео - 9

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

Вы когда нибудь задумывались над названиями?

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

Вот например, взять книгу, или игровой бокс, упаковку VHS или DVD. Эти предметы могут стоять на полке, лежать стопкой и для каждого случая в своем законном месте будет располагаться название, чтобы было удобно найти нужное

А если вспомнить старушку Sega MegaDrive или SNES, то название будет не просто написано на двух сторонах типовых картриджей, но и располагаться в определенном месте, чтобы быть читаемым, когда картридж вставлен в консоль.

Новый интерфейс для ВК Видео - 10

Но вы никогда не увидите название на развороте, на мониторе при игровом процессе, в кинотеатре внизу экрана.

Предполагается, что человек способен помнить, то что смотрит или во что играет. 

Единственным исключением служит необходимости информирования пользователя о названии, если это не было целевое открытие контента. Это возможно при использовании кнопки «Следующее» или при заходе по ссылке.

Здесь важно дать человеку понимание, куда он попал и что его переход не был мискликом.

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

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

Новый интерфейс для ВК Видео - 11

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

Решением стала замена статичного заголовка на динамический блок с названиями таймкодов. Пользователю доступны: текущее название эпизода и два следующих.

Новый интерфейс для ВК Видео - 12

В роликах где нет эпизодов, по прежнему отображается название, но оно затемняется со временем после начала воспроизведения. Постановка на паузу снова делает название контрастным на время.

Свайп к таймлайну

Некоторые решения кажутся настолько очевидными, что недоумеваешь почему это так долго времени оставалось нереализованным.

Новый интерфейс для ВК Видео - 13

Галерея настолько распространенный элемент, что встречается во множестве форм: галерея изображений, галерея баннер, галерея изображений в баннере, галерея изображений и видео и, даже, видео галерея. Однако, галерея из таймкодов одного видео ждала своего звездного часа. 

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

Новый интерфейс для ВК Видео - 14

Пагинатор, как отдельный элемент управления, не привязанный к прогресс‑бару лишен таких недостатков, ведь он не обязан быть привязан к координатам в зависимости от времени.

Новый интерфейс для ВК Видео - 15

Pure view / Таламус

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

Сегодня весь мир погрузился в кризис оперативной памяти, из за бума ИИ. Ведущие бренды отказываются от потребительского сегмента, очереди в b2b секторе расписаны до 30 года, а цены технику обновляются каждый квартал. 

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

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

Новый интерфейс для ВК Видео - 16

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

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

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

Новый интерфейс для ВК Видео - 17

Если транслировать широкоформатный контент на элт телевизор, полезная площадь сокращается до 40%, где остальную площадь занимают черные полосы. Человек видит всю эстетику и композицию кадра, но при этом теряет в детализации центральных объектов, тк они становятся совсем мелкими. Элт телевизор физически невозможно сделать ни 40«,ни 80» поэтому проблему кадрирования под формат 4/3 решали разными способами. 

Новый интерфейс для ВК Видео - 18

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

Новый интерфейс для ВК Видео - 19

Блокбастеры эпохи DVD и VHS часто имели две версии.

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

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

Решение как это и бывает, очень простое: опциональное изменение соотношение сторон. Это и увеличивает изображение, и оставляет картинку кинематографичной. 

Новый интерфейс для ВК Видео - 20

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

Кнопки

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

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

Поэтому в новой версии элементы для портретного режима вынесены вне контейнера видео, по аналогии с музыкальными приложениями. 

Новый интерфейс для ВК Видео - 21

Справедливо задать вопрос, зачем нужны статичные элементы при просмотре контента, как это было с названием. Но тут главную роль играет уже поведенческие паттерны и статистика. Основной потребляеиый клнтент — это периодика: подкасты, обзоры и новости. В них непрерывность и целостность материала много ниже чем у фильмов, поэтому пользователи часто прибегают к «ускорителям» потребления такого контенту. 

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

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

Премиум без компромиссов

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

Далеко за пределами ходить не стоит. Относительно недавно компания Sony предложила увеличение базовой цены на игры с $50 до $60 и индустрия не стала себя ограничивать в фантазиях на тему стоимости базовых и премиальных изданий. А вот попытки Microsoft увеличить стоимость подписок XBox привели к смене руководства игрового подразделения компании с корректировок завышенных ожиданий инвесторов.

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

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

Функция, с рабочим названием «дезинтеграция» работает в тестовом режиме и доступна всем пользователям. 

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

Такое компромиссное решение необходимо для проведения полноценных исследований, перед масштабным изменением архитектуры всего рынка рекламы.

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

Тестирование

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

Новый интерфейс для ВК Видео - 22

Поэтому весь проект с изменениями доступен в виде модифицированной мобильной версии сайта и доступна эксклюзивно в приложении «play». Минималистичный браузер с открытым исходным кодом выступает эк периметральной площадкой в области потребления и распространения видео контента. Доступен бесплатно в rustore на странице github.

Автор: AndrewYaremko

Источник