VK Видео — нормальный хостинг с ужасным интерфейсом. Исправил

Давайте на чистоту: ВК Видео в русскоязычном интернете не любит почти никто. Причина банальна — из-за замедления YouTube миллионы людей оказались перед фактом вынужденного перехода на отечественные платформы. И если открыть главную страницу ВК, складывается ощущение, что это филиал федеральных каналов с ТНТ и «Домом-2».

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

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

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

Я понял, что если очистить этот хостинг от визуального мусора — им можно нормально пользоваться. Я устал ждать, пока продуктовые команды гигантов «сделают красиво», психанул и запилил plllay — минималистичный open-source браузер для просмотра видео.

Я взял ВК Видео (и не только его) как базу и решил, что с точки зрения продуктового дизайна всё должно работать иначе. Вот какие UX-решения я применил.

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

Что я сделал: В plllay блок рекомендаций и все остальные системные элементы просто исчезают, как только начинается воспроизведение. Никаких «смотрите также» поверх картинки. Только видео.

Зачем вам название ролика, когда вы уже смотрите 15-ю минуту? Вы и так знаете, что включили. В ландшафтном режиме сервисы это понимают и скрывают его, а в портретном — упорно оставляют висеть поверх видео.

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

Я вынес таймкоды в отдельную галерею-пагинатор, не привязанную к координатам прогресс-бара.

На больших экранах кнопки внутри плеера невозможно достать одной рукой без перехвата.

Что я сделал: в портретном режиме вынес элементы управления из контейнера видео — по аналогии с музыкальными приложениями. Стало меньше мискликов и больше удобства. Заодно добавил опцию смены соотношения сторон (pan & scan), чтобы растянуть широкоформатное видео под экран смартфона без черных полос и без обрезки важных деталей кадра.

Самое болезненное. Меня дико бесит, когда смотришь интервью или подкаст, а тебе каждые пять минут вставляют рекламу БАДов или онлайн-школ.

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

Я прекрасно понимаю, что мой браузер не создаст контент и не починит серверы ВК, если у них там что-то упадет. Если видео зависает на их стороне, я это не исправлю. Но если контент загрузился, я хочу смотреть его в чистых условиях, не отвлекаясь на визуальный мусор.

Приложение plllay есть в RuStore и GitHub

Проект открыт, я буду рад фидбеку и пулл-реквестам.

#сервисы #разработка #дизайн #интерфейсы #opensource #ux #uxuidesign #vkвидео