Если рассматривать интерфейсы современных online видеоплееров, то можно сделать вполне очевидный вывод (если вы мужчина, конечно): о комфорте своих пользователей заботятся только дизайнеры из порно индустрии. Они как никто другие понимают, что потребление контента не должно быть связано с борьбой с интерфейсом. Для всех остальных, дизайн — это копипаста неудачного решения из 2007 года.
Моя первая статья на данную тему вдохновила ребят из VK Видео, и теперь у миллионов пользователей стало меньше боли. Посмотрим, может данная работа принесет еще больше пользы.
Что не так с интерфейсом ВК Видео и прочих
«Летс тейк э лук». Вот подборка скриншотов видео разной тематики: обзоры, стендапы, новости, летсплеи, интервью, распаковки. Это обычная картинка для большинства контента, исключая разве что, самые цветастые ролики для маленьких детей.
Очевидно, что основная проблема — контрастность самого видео и обложек предлагаемых к просмотру далее.
Чтобы не быть голословным, возьму самый яркий скриншот из подборки и посмотрим на него только по каналу яркости, что для человеческого зрения, является важнейшим фактором в считывании информации.
Берем верхнюю половину, где располагается контент и нижнюю с обложками других видео. Делаем чб и отдельно по нижней и верхней половине смотрим каналы. Пики интенсивности в обоих случаях высокие — это белый текст вносит свою лепту, а вот разница в общем наполнении ярких и средних участков уже видна на графике. На всякий случай справа приложил световое размытие.
Но мне кажется, всех этих манипуляций можно было и не делать, ведь разница в контрасте будет очевидна любому человеку, который просто откроет приложение и запустить ролик. Всем кроме дизайнеров приложений.
Я не могу принять тот факт, что дизайнеры продолжают «наваливать» интерфейсы оторванные от реальности, которые имеют грубейшие ошибки теоретической баз, которую дают в первый месяц обучению.
Естественно, это не факап дизайнеров, которые в макетах Figm’ы подбирают изображения покрасивше. Это неправильные контент мейкеры, делают слишком яркие обложки и чересчур темное видео.
Вот только суть обложки и заключается в том, чтобы привлекать внимание и забирать на себя акцент, конкурировать с другими обложками за время пользователя.
А вот размещать обложку рядом с видеопотоком, да еще и одинаковой по размеру — это фейл дизайнеров. Принцип контрастности изучают на первых лекциях в любой дизайн школе.
Визуальный вес
Помимо контрастности, ошибки первокурсника дизайна в работе с «визуальным весом», также заключаются и в полной схожести размеров элементов видеопотока и элементов рекомендаций.
Вырежим элементы и наложим их друг на друга для сравнения. Размер контейнера с видео и размер обложки — идентичны. Размер, насыщенность и интерлиньяж заголовка видео хоть и отличаются, но всего на один пункт, что не вносит ощутимой разницы на восприятие и незаметны без зума.
Задача дизайнера — заключается не в том, чтобы скопировать неудачные решения из Ютьюба со своей стилизацией, а в том, чтобы интерфейс удобным. Что по большей части означает — грамотным.
Психология
Я понимаю, что мечтать не вредно и требовать от создателей знаний психологии потребления — это уже за гранью реальности. Но все же, где то на интуитивном уровне дизайнеры должны понимать, что когда на тебя пялится Собчак или Кортошечка с обложки рекомендаций, смотреть контент становится дискомфортным. А с учетом вышеперечисленных ошибок психологическая конструкция Watching-eye effect становится еще более выразительной.
Кто вам сказал, что это удобно?
В 2007 — для iPhone, и в 2009 для Quicktime, Apple изменила расположение элементов управления для видео, перенеся их поверх видео. И это было отличным решением для стандартизации интерфейсов при просмотре видео FullScreen на мобильных и десктоп устройствах. Однако,...
Крупные стриминговые сервисы, приложения и программы для просмотра видео, стали перестраиваться в погоне за трендом революционных интерфейсов «как у Apple», но это была все еще эпоха Десктопов и ряд проблем с таким решением не был очевиден при переходе в Мобайл. особенно когда люди перестали смотреть видео в строго горизонтальном положении.
А сегодня, мы имеем интерфейсы, которые характерны:
лишним кликом, для вызова элемента управлений,
мисс-кликами при попытке перемотать на 15 секунд вперед и попадании на на следующее видео
случайными переходами на следующее видео при глюках интерфейса, когда пытаешься вызвать элементы управления
Десктоп решения страдают от этого в меньшей степени, ввиду двух особенностей: мышь, как интерфейс управление сильно точнее пальца, а интерфейс вызывается не кликом а событием Onover.
В погоне за минимализмом и унификацией интерфейса под разные типы устройств мы потеряли удобство.
Сама концепция интерфейса поверх — лишена смысла. Вызывая интерфейс, ты что-то хочешь сделать с текущим моментом — сменить видео/серию, пересмотреть отрывок, найти нужный момент. Тебе при этом не важна его полнота картинки или продолжение бесшовного произведения, важно как можно быстрее выполнить задуманное действие.
У нас есть хороший пример, когда элементы управления не мешают потреблению контента — это приложения для прослушивания музыки. Вообще абсурдно себе представить, что они могут скрываться и вызываться по нажатию. Просмотр видео в портретном режиме — это то же самое, на современных экранах, места для размещения статичных элементов управления, более чем достаточно, ещё останется и на рекомендации.
Можно придумать уйму вариантов как и где расположить элементы управления видео: можно отдельным баром, можно экшн кнопкой, можно просто под контейнером с видео, ведь все это уже есть в сотнях примерах и решениях, нужно просто чуть чуть включить голову.
Давайте пофантазируем на тему, как можно улучшить интерфейс за 3 рабочих дня без концептуального изменения UI. Берем только уже имеющиеся компоненты и просто переставляем их.
Первое что делаем — выносим бар таймлайна под видео. Заголовок оттеняем, тк эта информация с течением времени не меняется и своей яркостью не должна забирать акцент. Далее все элементы без изменений, но затемняем блок рекомендаций, так рекламный баннер будет акцентнее. Сам контейнер можно сделать больше по площади обрезав 5% видео по ширине. Проектируем интерфейс при и скроле, уводя из фейда блок рекомендаций. Плей/паузу оставляем по простому тапу без предварительного их вызова тапом. А для Next работающий на бэкграунде поток тоже не нужен — он потерял свою актуальность, как только пользователь решил переключиться на следующее видео. Вуаля, разница на лицо.
Теперь интерфейс сделан без ошибок. Над ним можно еще много работать и превратить совсем в конфетку, но мне за это не платят, меня по понятной причине (грозился всех уволить) к проекту не подпускают. Поэтому мы, простые пользователи продолжаем страдать, потому как в ВК продолжают работать безграмотные специалисты, не владеющие материалом первого курса дизайна, с напрочь зашоренным взглядом.
P.S.
Ребята из VK Видео, я знаю, что вы меня читаете, раз реализовываете мои идеи. В этот раз обещаю уволить только половину, остальных научу матчасти и критическому мышлению. Не затягивайте с обновлениями, реализуйте сначало MVP, что дал в статье — потом возьмемся за редизайн и сделаем сервис с реально крутым интерфейсом. Обнял.
