Инновациям нужно не только «своё время», как Sega Channel и Motorola Ирмдиум, но и своё место. Когда тебе отказывают 99 процентов потенциальных партнёров и крупные игроки, ты стартуешь как придаток для обновлений довольно местечкового проекта, чтобы вырастить потом из этого всепожирающего монстра. Дядя Габен не даст соврать. И пока ребята из VK неторопливо, сквозь фильтр процессов бюрократии, ресеча и верификации, внедряют мои идеи, я, будучи не скованным формальными обязательствами, иду туда, где лучшие решения могут случиться.
Речь в статье пойдет о принудительном цифровом «обрезании» и чем оно полезно для гигиены визуального восприятия.
Удобство цифрового интерфейса во многом определяется строением нашего тела
Так, например, компания Apple оправдывала маленький (по сравнению с конкурентами) экран в iPhone 5 площадью покрытия одним большим пальцем при естественном хвате. В 2012 году переход от 3,5 дюйма на iPhone 4/4S к четырем дюймам казался недостаточным на фоне конкурентов (Samsung Galaxy S III — 4,8”, Samsung Galaxy Note — 5,3”). Помимо блока с описанием удобства на сайте, Эппл выпустила целый рекламный ролик «Thumb». И это был первый коммерческий ролик нового iPhone.
В 2014 году компания Google на конференции I/O представила свою новую дизайн-систему для Android — Material Design. В первой версии и мы узнали, что минимальная площадь кликабельного элемента должна составлять 48×48 пикселей для мобильных устройств, ибо палец не пэнсил и толстый.
В свою очередь, проблему взаимодействия с физическими устройствами решали и бывшие выходцы из Nokia. В 2012 в своей операционной системе SailfishOS, ребята из Jolla представили управление задачами ОС через Edge Swipe — жесты c границ экрана. Сегодня, часть этих паттернов перекочевала в iOS и Android.
Гугл предлагает иное решение «доступности» управления под большой палец. в том же Матириал Дизайн они рекомендовали к использованию Floating Action Button, элемент, который по задумке, должен был взять на себя большинство базовых задач управления самих приложений.
В общем, концептуальное строение смартфона как монолитного экрана, занимающего всю переднюю поверхность устройства, позволяет находить эргономичные (хоть и компромиссные) решения для средства управления (пальца) и формировать требования к дизайну интерфейса.
Однако, в меньшей степени остаётся изученным и проработанным вопрос со средством считывания информации — глазами. А точнее особенностью строения глазного аппарата и его зависимость от конструкции «держателя» смартфона: когда средство управления и считывания — единая система, физических ограничений.
Специфика строения глазного яблока накладывает ограничения на комфортное расположение информации в пространстве.
ГОСТ 12.2.033-78 кторое лежит в основе любого пособия аля «Проектный расчёт рабочего места оператора пк», описывать три диапазона расположения экранов в зависимости от частоты обращения к информации и ее нагруженности.
Зоны зрительного наблюдения в вертикальной (а) и горизонтальной (б) плоскостях.
«Очень часто средства отображения информации, требующие точного и быстрого считывания показаний при выполнении работ сидя, следует располагать в вертикальной плоскости под углом ±15° к нормальной линии взгляда…Часто используемые средства отображения информации, требующие менее точного и быстрого считывания показаний, допускается располагать в вертикальной плоскости под углом ±30° к нормальной линии взгляда»
Учитывая, что мобильный телефон – это и средство ввода информации, и вывода, которым человек пользуется в дороге, одновременно выступая средством фиксации его в пространстве, требования к интерфейсу также будет накладывать ограничения, диктуемые банальной физиологией.
И хоть данный аспект остается остается менее проработанным, с точки зрения рекомендаций и гайдлайнов, анализируя текущие интерфейсы приложений и ос мы можем эмпирически определить ряд паттернов с этим связанных.
В разрезе видео сервисов, одним из таких интерфейсных паттернов выступает расположение видео-контейнера строго вверху экрана, вплотную к верхней границе экрана приложения. И оно же является самым массовым, несмотря на преимущества горизонтального формата или формата акцента на видео. Как раз ввиду того, что обеспечение комфортного угла обзора требует приложение усилий к наклону шеи или держащей руки.
Если отталкиваться от одного уровня удобства считывания информации, то положение телефона при одной и той же нормали будет следующим.
Вот и получается, что при всех функциональных возможностях, оптимальный комфорт – баланс между удобством держать и смотреть соблюдается в рамках стандартного режима в портретной ориентации.
Конечно, супер интересный и красочный фильм пользователь посмотрит в горизонтали, но весь повседневный контент останется потребляем в портрете, с выжигающей сетчатку обложкой рекомендованного видео.
Правильное место
Сасфликс — уникальный проект, существование которого нельзя оправдать ни одной финансовой моделью. Это амбиции одного человека, то, как человек думает должно быть и следствие фундаментального «Патаму-что могу».
И здесь самое лучшее место реализоваться идеям, которые не «купили» Вконтакте. А не «купили» ВК Видео дизайн без ошибок студента первого курса, о чем была одна из моих предыдущих статей.
В большинстве приложений видеосервисов, и в ВК в частности, грубейшим образом нарушаются фундаментальный дизайн принцип контраста. А точнее два его частных случая «цветовая контрастность» и «визуальный вес объектов». Все это из разряда, «один сделал не думая», другой обрисовал.
Контраст в дизайне — это различие между визуальными элементами: цветами, формами, размерами, текстурами, направлениями. Он помогает выделять главное, расставлять акценты, усиливать читабельность и структурировать восприятие.
И если посмотреть на экран того же ВК Видео, то по всем канонам дизайна, «главное» — это баннер рекомендаций.
Даже дополнительные элементы управления и нотификации будут контрастнее основного видео
Оправдание формата — это неправильные пчелы и они делают неправильный мед – баланс светотеней в основном видео и слишком контрастные обложки – не принимается.
Дизайн цифровой среды с пользовательским контентом, просто обязан учитывать специфику контента который загружают творцы, а не согласовываться на уровне «рыбы» подобранной дизайнером в макетах Фигмы.
Наглядный пример это – текущие скриншоты в описании приложения в Google Play и скриншот самого выпуска шоу – грусть, печать, срамота.
Это тот самый момент, когда ты арендуешь дорогую широкоформатную камеру, аутстафишь оператора под нее, специального монтажа и высматриваешь для приемки черновики не на компе, а на ульравайд мониторе и по итогу проигрываешь по акценту внимания рандомному баннеру.
И тем печальнее, что эту проблему для цифры первым решил даже не я, а компания Эппл в 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
Помимо Панскана скрещиваем «ужа с ежом», привычную шаолиньскую технику однопальцного свайпинга слайдеров с переключением эпизодов/тем. А почему бы и нет? Ведь это самый быстрый способ перестать слушать надоевший кусок рассуждений и перейти к чему то более интересному.
И тут появляется акцент на более точечном взаимодействии пользователя с контентом и первым делом идет под нож – вечно висящий заголовок на экране видео. Зачем он нужен? разве у человека память как у рыбки и нужно каждую секунду ему напоминать, что он за контент смотрит?
На больших экранах кинотеатрах ведь не высвечивается все полтора-два часа название фильма!
Название – под нож! Вместо него декоративным элементом будет выступать заголовок эпизода. И как следствие – барабанная дробь….
Возможность лайкать то, что понравилось! Хоть 5 раз, если в видео было 5 впечатляющих моментов. Я придумал мультилайк – выдайте мне барабан. Мультилайки дают криатору большее понимание, что людей цепляет, но в общей статистики видео – это один лойс, которое показывает, скольким пользователям видео в целом зашло.
Дизлайки мы ценим и любим, но их соотношение 1/100, посему баттон дизлайка не может занимать тоже акцентное место, что и лайк – уходит в троеточие
Ок. Переходим к пальцу, точнее к навигации. Удобной. эргономичной, привычной, без мискликов следующего видео и прокрутки на 10 секунд вперед. Три важнейших функции теперь под пальцем без перехвата – результат отличный.
Забиваем оставшееся место Приглашением к коммуникации, а не хаотичной «срач-лентой» комментариев. Метрики тщеславия: количество лайков/дизлайков, просмотров, дата и тип – сносятся туда, где они не мозолят глаза.
И оцениваем баланс акцента по контрасту.
Вуаля, интерфейс смотрится скромно и невзрачно, а значит, акцент будет на считывании контента.
One more things
Подгрузка контента должна осуществляться с момента открытия видео не только от текущего кадра, но и по нескольким следующим эпизодам, чтобы при свайпе тем не было задержек.
Реклама рекомендованных видео на этом экране имеет место быть, но она не критична, тк нет потребности в конкуренции разных Каналов и типов контента, как это бывает на массовых сервисах. Реклама может быть вплетена как в слайдеры, так и комментарии, занимая отдельные карточки.
Мегалайк — как механика стимуляции и удержания для подписчиков, суперсила взамен денег помимо снятия ограничений на контент.
Experience для всех
Новый опыт потребления такого контента — отличный повод для расширения контентмейкеров на площадке. Можно будет конкурировать и с бусти и со спонсор ру.
Лучше увидеть
Предлагаю самостоятельно посмотреть, на сколько хороша описанная концепция. Я загрузил на тот же ВК видео формата ¾ с двумя персонажами в кадре. Даже без ручного кадрирования и лишних телодвижений по улучшению интерфейса, впечатления от просмотра будут наглядны.
Оригинальное видео, обрезанная картинк
Автор: AndrewYaremko
