Сасфеликс 2.0 или «На 25% больше Стаса Васильева за теже деньги» – решаем проблему скукоженного Харламо

Инновациям нужно не только «своё время», как Sega Channel и Motorola Ирмдиум, но и своё место. Когда тебе отказывают 99 процентов потенциальных партнёров и крупные игроки, ты стартуешь как придаток для обновлений довольно местечкового проекта, чтобы вырастить потом из этого всепожирающего монстра. Дядя Габен не даст соврать. И пока ребята из VK неторопливо, сквозь фильтр процессов бюрократии, ресеча и верификации, внедряют мои идеи, я, будучи не скованным формальными обязательствами, иду туда, где лучшие решения могут случиться.

Речь в статье пойдет о принудительном цифровом «обрезании» и чем оно полезно для гигиены визуального восприятия ^[1]. 

Удобство цифрового интерфейса во многом определяется строением нашего тела

Так, например, компания Apple оправдывала маленький (по сравнению с конкурентами) экран в iPhone 5 площадью покрытия одним большим пальцем при естественном хвате. В 2012 году переход от 3,5 дюйма на iPhone 4/4S к четырем дюймам казался недостаточным на фоне конкурентов (Samsung Galaxy S III — 4,8”, Samsung Galaxy Note — 5,3”). Помимо блока с описанием удобства на сайте, Эппл выпустила целый рекламный ролик «Thumb ^[2]». И это был первый коммерческий ролик нового iPhone.

В 2014 году компания Google на конференции I/O представила свою новую дизайн-систему для Android — Material Design. В первой ^[3] версии и мы узнали, что минимальная площадь кликабельного элемента должна составлять 48×48 пикселей для мобильных устройств, ибо палец не пэнсил и толстый.

В свою очередь, проблему взаимодействия с физическими устройствами решали и бывшие выходцы из Nokia. В 2012 в своей операционной системе SailfishOS, ребята из Jolla представили управление задачами ОС через Edge Swipe — жесты c границ экрана. Сегодня, часть этих паттернов перекочевала в iOS и Android.

Гугл предлагает иное решение «доступности» управления под большой палец. в том же Матириал Дизайн они рекомендовали к использованию Floating Action Button, элемент, который по задумке, должен был взять на себя большинство базовых задач управления самих приложений.

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

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

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

ГОСТ 12.2.033-78 кторое лежит в основе любого ^[4] пособия аля «Проектный расчёт рабочего места оператора пк», описывать три диапазона расположения экранов в зависимости от частоты обращения к информации и ее нагруженности.

Зоны зрительного наблюдения в вертикальной (а) и горизонтальной (б) плоскостях.

«Очень часто средства отображения информации, требующие точного и быстрого считывания показаний при выполнении работ сидя, следует располагать в вертикальной плоскости под углом ±15° к нормальной линии взгляда…Часто используемые средства отображения информации, требующие менее точного и быстрого считывания показаний, допускается располагать в вертикальной плоскости под углом ±30° к нормальной линии взгляда»

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

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

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

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

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

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

Правильное место

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

И здесь самое лучшее место реализоваться идеям, которые не «купили» Вконтакте. А не «купили» ВК Видео дизайн без ошибок студента первого курса, о чем была одна из моих предыдущих статей ^[6].

В большинстве приложений видеосервисов, и в ВК в частности, грубейшим образом нарушаются фундаментальный дизайн принцип контраста. А точнее два его частных случая «цветовая контрастность» и «визуальный вес объектов ^[7]». Все это из разряда, «один сделал не думая», другой обрисовал. 

Контраст в дизайне ^[8] — это различие между визуальными элементами: цветами, формами, размерами, текстурами, направлениями. Он помогает выделять главное, расставлять акценты, усиливать читабельность и структурировать восприятие.

И если посмотреть на экран того же ВК Видео, то по всем канонам дизайна, «главное» — это баннер рекомендаций.

Даже дополнительные элементы управления и нотификации будут контрастнее основного видео

Оправдание формата — это неправильные пчелы ^[9] и они делают неправильный мед – баланс светотеней в основном видео и слишком контрастные обложки – не принимается. 

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

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

Это тот самый момент, когда ты арендуешь дорогую широкоформатную камеру, аутстафишь оператора под нее, специального монтажа и высматриваешь для приемки черновики не на компе, а на ульравайд мониторе и по итогу проигрываешь по акценту внимания ^[10] рандомному баннеру.

И тем печальнее, что эту проблему для цифры первым решил ^[6] даже не я, а компания Эппл в 2009 году внедрив в QuickTime X функцию «Fill Screen», которая обрезала видео по горизонтали, чтобы по вертикали контент занимал всю площадь.

И да, утерянные технологии телевещания древних, аля Pan and scan, решающие проблему letterboxing и pillarboxing откроют новые решения для стриминговых сервисов подарив пользователям новый experience.

Умели ж предки раньше резать и вещать контент под пузатые телевизоры с соотношением 3:4 и снимать фильмы, а другие снимать с фреймированием действия относительно центра.

В прекрасные времена здравого смысла VHS, LaserDisc и VCD выходили с шильдиками FullScreen и Pan and scan. 

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

Исправляем и обновляем

Очевидно, первым делом, выделяем для переработки все что «слепит» пользователя, как фары дальнего света на встречке и ставим контейнер с видео в адекватном / акцентом размере с соотношением сторон 5/4

Помимо Панскана скрещиваем «ужа с ежом», привычную шаолиньскую технику однопальцного свайпинга слайдеров с переключением эпизодов/тем. А почему бы и нет? Ведь это самый быстрый способ перестать слушать надоевший кусок рассуждений и перейти к чему то более интересному.

И тут появляется акцент на более точечном взаимодействии пользователя с контентом и первым делом идет под нож – вечно висящий заголовок на экране видео. Зачем он нужен? разве у человека память ^[11] как у рыбки и нужно каждую секунду ему напоминать, что он за контент смотрит?

На больших экранах кинотеатрах ведь не высвечивается все полтора-два часа название фильма! 

Название – под нож! Вместо него декоративным элементом будет выступать заголовок эпизода. И как следствие – барабанная дробь….

Возможность лайкать то, что понравилось! Хоть 5 раз, если в видео было 5 впечатляющих моментов. Я придумал мультилайк – выдайте мне барабан. Мультилайки дают криатору большее понимание, что людей цепляет, но в общей статистики видео – это один лойс, которое показывает, скольким пользователям видео в целом зашло.

Дизлайки мы ценим и любим, но их соотношение 1/100, посему баттон дизлайка не может занимать тоже акцентное место, что и лайк – уходит в троеточие

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

Забиваем оставшееся место Приглашением к коммуникации, а не хаотичной «срач-лентой» комментариев. Метрики тщеславия: количество лайков/дизлайков, просмотров, дата и тип – сносятся туда, где они не мозолят глаза.

И оцениваем баланс акцента по контрасту.

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

One more things

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

Реклама рекомендованных видео на этом экране имеет место быть, но она не критична, тк нет потребности ^[12] в конкуренции разных Каналов и типов контента, как это бывает на массовых сервисах. Реклама может быть вплетена как в слайдеры, так и комментарии, занимая отдельные карточки.

Мегалайк — как механика стимуляции и удержания для подписчиков, суперсила взамен денег помимо снятия ограничений на контент.

Experience для всех

Новый опыт ^[13] потребления такого контента — отличный повод для расширения контентмейкеров на площадке. Можно будет конкурировать и с бусти и со спонсор ру.

Лучше увидеть

Предлагаю самостоятельно посмотреть, на сколько хороша описанная концепция. Я загрузил на тот же ВК видео формата ¾ с двумя персонажами в кадре. Даже без ручного кадрирования и лишних телодвижений по улучшению интерфейса, впечатления ^[14] от просмотра будут наглядны.

Оригинальное ^[15] видео, обрезанная ^[16] картинк