Продвинутые принципы проектирования телевизионных интерфейсов
У меня достаточно большой опыт работы в компаниях, которые гордо называют себя системные интеграторы, разработчики уникальной OTT платформы, создатели полного комплекса решений, начиная от станции хранения видео-данных, энкодинга, работы с контентом вплоть до конечных клиентских устройств. Своими знаниями по улучшению клиентских устройств и их интерфейсов я бы хотел поделиться с вами.
По статистике, 74% россиян смотрят телевизор каждый день, благодаря чему операторы связи чувствуют себя весьма комфортно. Обычное линейное телевидение все еще достаточно популярно, пользователь сидит на диване и ничего не делает, поглощая контент. Ровно так же, как вы сейчас за компьютером. Пользователю нельзя мешать наслаждаться просмотром телепередач. Это традиционная расслабленная модель потребления на диване. Пользователь не захочет слезть с дивана, он не захочет тратить энергию и двигаться. Чем менее энергозатратные действия требуются от пользователя, тем более качественным можно считать результат работы дизайнера. Корейцы очень любят добавлять кучу фишек в интерфейсы, что ведет только к неоправданному усложнению интерфейса. Их «креативное» мышление плодит множество кнопок на экране, по которым нужно попадать мышкой. Или рукой. Только представьте: поднял руку, напряг ладошку, и давай листать каналы. Ужас? Можно сделать хуже: голосовой интерфейс. Ради эксперимента скажите вслух: «следующая страница», 20 раз. Как избежать всего этого ужаса и делать интерфейсы удобными?
Очевидно, что во время просмотра телевизора пользователя отвлекать нельзя. Тогда на каком этапе работы с интерфейсом телевизора дизайнер может проявить себя? Например, при проектировании пульта. Мне доводилось участвовать в дизайне и проектировании пультов для телевизоров, и могу точно сказать, что это одна из самых важных частей юзабилити при проектировании интерфейсов для ТВ. Потому что плохой пульт убьет все ваше продуманное юзабилити интерфейсов, на которое вы потратили over 800 человекочасов. В итоге я сделал пульт с кнопками: включения, универсального выхода, вверх, вниз, влево, вправо (D-pad), и применить. И все подписи над кнопками, а не под ними. Все, больше ничего пользователю не нужно, я готов вам это гарантировать. Почему не добавить кнопку быстрого перехода в магазин, и подсветить? Маркетинг был бы счастлив прорекламировать светящийся многокнопочный пульто-прибор, похожий на космический корабль, но все это сделает пульт хуже. Таким пультом будет труднее управлять вслепую. Чем больше кнопок – тем труднее управлять вслепую. Многие возразят: «Но как же больше функций? У нас в ЧТЗ прописано множество требований по перемотке видео, быстрому вызову Catch Up, быстрым переходам и т.п.» Раскрываю профессиональный секрет: пульты владеют долгим нажатием, это позволяет выкрутиться из почти любых тупиковых ситуаций. Человек в принципе способен держать в уме до пяти объектов внимания. Соответственно, 5 кнопок это максимум, и если у вас получается больше кнопок, то их нужно группировать. Стараемся соблюдать правило: три кнопки на процесс и две на навигацию.
Скорость отклика пульта. Это очень важная часть эргономики пользования ТВ, реакция на нажатие кнопки должна быть близкой к моментальной (40 мс это хороший результат). И не забываем про анимации. Рассмотрим кейс: на пульте нажали кнопку -> анимация отыгралась -> в процессе анимации прочие действия с пульта блокируются. Это плохо. Пусть действия не блокируются. И получим очередь из анимаций, потому что при повторном нажатие кнопки во время проигрывания анимации, анимации копятся друг за другом, это тормозит взаимодействие с устройством. Пусть все анимации ускоряются при многократном нажатии. Это касается не только интерфейсов ТВ, а вообще всех отраслей проектирования интерфейсов, включая геймдев.
Другие контроллеры. Существуют игровые контроллеры, они разнообразны. Конечно, все контроллеры имеют кнопки Select и Back в примерно одном и том же месте, но расположение кнопок и триггеров везде разное. Безусловно, навигация с помощью джойстика удобна в первую очередь для геймеров. Кнопки для больших пальцев также весьма удобны, удобнее чем D-pad крестовина.
Текст. Экран телевизора находится от человека далеко, в 2-5 метрах, его ближе не поднесешь. В вебе или в мобильных интерфейсах я себе могу позволить уменьшить основной текст и разместить мелкий текст. Человек сможет разглядеть информацию. В случае с ТВ это может грозить подъемом пользователя с дивана. Итого, мы лишим пользователя зомбированного состояния. Сохраняйте правило 13: на экране может быть МАКСИМУМ 13 строк текста. 14 строк уже не читабельно, оставляйте максимум 13 строк текста. Это минимальный кегль, при котором пользователь не будет щуриться, пытаясь прочитать ваш текст. Все телеканалы это правило соблюдают. Итак, мы соблюдаем правило 13 строк, весь необходимый текст не помещается, дизайнер орет и плачет, и даже уплотненные гарнитуры шрифта не спасают. Что делать? Убирать контент либо вообще, либо на другие экраны интерфейса, либо на second screen. Если вы по каким то причинам не можете протестировать ваш продукт на реальном устройстве, то соблюдайте правила:
- заголовки от 90 пикселей
- обычный текст от 26 пикселей
- несущественный текст от 18 пикселей
- тонкие шрифты не читаются
Фокус на элементе. В вебе или мобилках состояние фокуса обычно добавляется по остаточному принципу. При проектировании телевизионных интерфейсов о фокусе надо думать постоянно, элемент с фокусов должен быт крупнее, ярче и немного анимированным. Фокус должен быть всегда, и он должен быть один. Фокус придумывается в самом начале, если вы сделаете кнопку ОК желтой, а кнопку Cancel синей, то пользователь, если отвлечется и вернется к интерфейсу, то не поймет, на какой из кнопок находится фокус.
Итак, все сделали, грамотно, по гайдлайнам и рекомендациям. Что теперь делать? Надо показывать контент на большом и ярком экране, и это самая интересная часть, в которой ваши дизайнеры смогут проявить себя. Допустим, как показать пробки на главном экране? «Рисовать в правом верхнем уголке экрана количество баллов» – скажут многие. Но можно снять набор мини-роликов, и показывать их на фоне главного меню вашего интерфейса. Свободные дороги, дороги с плотным движением, и т.п. Также можно поздравлять человека с днем рождения, показывать рекламу и всякие советы.
Где еще дизайнеры могут поиграться со шрифтами и не только? Second Screen. У всех пользователей есть мобильные девайсы, сконнектить телевизор с мобильным устройством не составляет больших проблем. Вбить текст на телевизоре с пульта – тот еще ад, с мобильного устройства это сделать несравнимо удобнее. Даже наиболее удобные контролы для форм, такие как сегментные контролы, переключатели (да или нет) или кнопки «плюс» и «минус» удобнее использовать на мобильном устройстве. Показывать биографии героев, рейтинги, комментарии, добавить социальную составляющую, ваш second screen это продолжение большого экрана телевизора.
Catch Up это отличная технология, проанализировав которую дизайнер сможет создать потрясный сервис. Catch Up это автоматическая запись линейных каналов и предоставление к ним доступа. Этот сервис есть у всех сервисов интерактивного ТВ за отдельную плату. Эту услугу надо продать пользователю хорошо, качественно, эту услугу надо апргрейдить, иначе это сделают конкуренты. Этот сервис надо сделать лучше чем у конкурентов. Как это сделать? Не надо спрашивать директора по развитию бизнеса, он ничего нового не придумает. Спросите дизайнера.
Пользователи не понимают всю ценность Catch Up, пользуются очень пассивно. Люди в давние времена покупали видеомагнитофоны, ставили передачи на запись, приходили домой и смотрели. Операторы связи смекнули: «услуга то востребованная», придумали DVR и продали пользователям. Но операторы связи начали писать вообще все подряд, что есть в эфире. Пользователям, как оказалось, это не особо нужно, так как пользователь это не записывал, он не знает что там в течении дня было, благодаря чему про услугу записанных передач многие пользователи попросту забыли. Только представьте: пользователь вынужден пройти по списку каналов, посмотреть список передач, и выбрать что то интересное. Это обычно долго и неудобно. Передачи не рекламируются, они просто есть в одном из кучи списков. Итого, EPG не продает линейное пассивное смотрение. Как решить эту проблему? Посмотрим на статистику. 30 телеканалов делают 80% просмотров. 100 каналов = 70 фильмов в день. Основной качественный контент сосредоточен на небольшом числе каналов.
Вывод, пользователям надо сразу давать качественные интересные релативные записи, автоматически, надо гнаться не за количеством, а за качеством и разнообразием. Редакторская работа тут наиболее важна, редактор должен быть хорошим, выбирать наиболее хороший контент и скормить его пользователям. И он не должен повторяться. Редактор должен хорошо разбираться в фильмах и ТВ-программах, дайте ему автоматизированную систему рекомендаций, их продается не мало. Пусть редактор наполняем эту систему, робот рекомендует не так как надо, просто по названию. Избавьте пользователя от выбора, пусть тыкнет сразу на хороший контент. Не 150 передач надо показывать, а 15 хороших. В год снимается 400-500 фильмов, но в лучшем случае 50 фильмов достойны внимания.
Итак, контент отобран, как подать его пользователю? Нужно обогатить информацию, указать хорошее описание, добавить хорошие скриншоты, пропущенные через мой алгоритм оптимизации графического контента для магазинов, можно сделать мини-трейлер, красивые заголовки, добавить новостные выпуски, отзывы, рейтинги разных новостных сайтов. И нужно это все показать пользователю, создать отдельный раздел, подать по жанрам, сделать ранжирование по популярности, демонстрировать новинки каждый день. Catch Up это новый вид VOD контента, библиотека контента на день.
Вместо заключения две плохие новости: многие постараются применит описанные выше практики к Smart TV. И это правильно. Но Smart TV очень медлительные и неказистые устройства. Конечно, если напихать внутрь телика кучу качественного железа, это решит проблему. Но цикл жизни телевизора семь лет. И те Smart TV, что уже есть на рынке в домах ваших клиентов, до 2020 года никуда не уйдут. И модули расширения ситуацию не спасут. Вторая плохая новость относится к Google TV и Apple TV. Эти девайсы являются аксессуарами к мобильным телефонам, не более. Так что, все выше сказанное на 100% применимо только к Set-top box, в которые есть все плюшки, такие как 4К, поддержка h265, голосовое управление с помощью колонки с проектором или микрофона в пульте управления.
Оставить комментарий
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
18 комментариев
danysterkhov
Это актуально только для ТВ-вещания? Классно конечно, но не могли бы вы рассказать более подробно про использование мультискрина на планшете для дополнительного контента. Как вообще добиваются синхронизации телевизора и мобильного устройства, для меня это загадка.
Если приведете примеры классной реализации, будет совсем хорошо.
your-scorpion
Не нужно так явно привязывать second screen к телевизору. Second screen’ом можно назвать и автомобильный навигатор на мобильном устройстве, первый экран в данном случае это лобовое стекло автомобиля.
И вы говорите про multiscreen, не надо путать с second screen. Внутри second screen’а может быть multiscreen, но не наоборот. Для понимания: некоторые устройства воспроизводят все тоже самое, что транслируется на телевизоре, а некоторые устройства необходимы для дополнительной информации. Последние и носят гордое название second screen. Эта технология моложе, чем multiscreen, применяется в первую очередь маркетологами, почти всегда неудачно и криво. Лучшие практики в России с second screen на данный момент это возможность посмотреть видео с другого ракурса, вспомогательную информацию. Технология пока что только развивается.
Из примеров, на рынке пока что отсутствует достаточно качественная реализации технологии, разве что у ESPN имеются интересные наработки. Вы смотрите спортивные передачи и получаете уникальные видео-фрагменты, тексты про игроков и многое другое в режиме реал-тайм. Спортивная индустрия вообще наиболее интересна для реализации технологии second screen, как мне кажется.
Развитие технологии упирается в подготовку данных для second screen’а. Представьте, что в EPG (телепрограмме) отсутствует полное расписание телепередач, каждой второй телепередачи нет, и время указано некорректно? Думаю, вам это очень не понравится. Примерно такая ситуация творится с second screen’ом. Если заглядывать в будущее, то технология получит развитие благодаря операторам связи, которые разрабатывают собственные STB и мобильные приложения, им проще всего будет разработать закрытую эко-систему и генерировать контент. К тому же, технически, если это будет единая эко-система от провайдера, то синхронизация будет идти через основной сервис (облачный), и в любой момент времени мы будем знать что пользователь смотрит. Есть и менее изящный способ реализации через распознавание аудиопотока, в этом случае телевизор и мобильное устройство не связаны.
Ирина Владимирова
На мой взгляд, smartTV умирает, приложений то почти не разрабатывается))) Да и мне, как пользователю, проще смотреть видео на телефоне уже.
your-scorpion
Приложений на данный момент мало, это бесспорно. Но в 2015 году продажи умных телевизоров превысили продажи обычных. И это без учета всяких Set Top Box или Chromecast. Так что рынок есть и спрос, соответственно, тоже.
И не нужно рассматривать smartTV как замкнутую среду, для которой нужно разработать приложение. Лучше расширять экосистему мобильного приложения за счет экосистемы smartTV. Например, можно использовать телефон для удаленного управления контентом на ТВ, можно медийный контент или игровой процесс транслировать со смартфона на ТВ, использовать смартфон как джостик для игр (ведь в смартфонах 19 разных видов сенсеров). Вариантов развития много, главное помнить, что телефон это основное устройство.
alexseyfed110
Что, и самое главное, как склонять слова и что писать в пушах, кнопках на смарт тв? Опять посоветуете использовать гайдлайны? :)))
your-scorpion
Гайдлайны платформ обычно англоязычные, поэтому они не всегда применимы. Достаточно подобрать хорошее слово. Хорошее слово узнать очень легко, к нему очень просто придумать иконку.
Кнопка или пункт меню: выйти, сохранить, добавить, ввести («что делать» для изменения статуса / «что сделать?» для команд). Совершенный вид лучше для однократных действий, несовершенный для регулярных.
Пункты меню: о приложении, события, звонки, регистрация (что?).
Выбор объекта, чекбоксы, радио-кнопки: красный, крупный, государственный (чей, который, кто именно, какой?), желательно использовать положительные формулировки.
Поле ввода: возраст, пол, я ищу (Дополнение).
Ползунки: мало, много, громко (Дополнение).
Пуши и прочие статусные изменения: просмотрено, списано, зачислено (что это?).
Если делать совсем аккуратно и хорошо, то не нужно забывать про связанность текста. Интерфейс должен читаться как связанное предложение. Ну и побольше пассивного залога: «платеж отправлен» вместо «платеж был успешно отправлен».
Corona
Добрый день! Как вы посоветуете работать с анимациями для смарт-тв, ведь не все анимации могут длиться предсказуемое количество времени? И как делать хелпы, там же сплошной текст.
your-scorpion
Также, как и с любыми другими интерфейсами: соблюдение принципа непрерывности. При изменении состояния страницы или переходе между страницами процесс анимации должен занимать меньше секунды, но пользователь должен видеть обратную реакцию и процесс изменения интерфейса. А насчет непредсказуемости длительности анимации от нескольких миллисекунд до бесконечности: анимации бывают детерминированные (циклические индикаторы) и недетерминированные. Вот кусочек решений гугла для детерменированных анимаций:
Для недетерминированных анимаций есть основное правило: если объект должен появиться в сцене, то объект быстро влетает в сцену и замедляется. Чтобы убрать объект со сцены, он должен начать свое движение медленно, потом ускориться. И стандартное правило для длительности анимации любых интерфейсов, от 200 до 500 мс, работает для телевизоров. При описании подобных требований разработчикам очень помогает сервис matthewlein.
А хелп можно сделать с помощью человеко-бота.
Ирина
ботов то как делать?) Может, лучше использовать одного бота вместо всего приложения?) Приложения умрут, будут только чатики)
your-scorpion
Разработчики социальных сетей и мессенджеров начали предоставлять интерфейсы для разработки:
– WeChat/Line запустил апи+маркет в 2013 году;
– Telegram Bot API в 2015 году;
– Facebook Messenger API 2016 год;
– Вконтакте BizMessage API в феврале 2016 года;
– WhatsApp API в 2016-2017 году.
Боты используются редко и они очень простые, зато они могут сами инициализировать взаимодействие с пользователем, приложения же более сложные и используются часто, и выигрывают как интерфейсное решение. Так, платформозависимые фичи через ботов не сделать.
Смерть мобильным приложениям уже пророчили и со стороны веб-приложений, сохраненных в виде ссылки на телефон, и со стороны голосовых интерфейсов. Я думаю, что боты в мессенджерах станут сложными и для них потребуется сложный UI. Это будут приложения внутри приложений.
Natasha Nanook
Скажите, есть ли способ преобразовать анимации из афтера в что нибудь работающее в андроиде?
your-scorpion
Попробуйте использовать библиотеку lottie-android. На странице проекта есть список свойств After Effects, которые вы сможете экспортнуть в json и передать разработчикам. Сама библиотечка огромная по размеру, готовьте морально к этому разработку.
Постараюсь рассказать на примере. Хотим увидеть такую анимацию в приложении под Android, здесь меняется форма шейпа, положение объектов и их прозрачность.
Для начала работы вам понадобится совершенно другая библиотека bodymovin, это плагин для After Effects. Если у вас не работает установка из официального магазина дополнений Adobe не смотря на лицензию (как у меня), то воспользуйтесь следующей инструкцией:
\AppData\Roaming\Adobe\CEP\extensions
Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or
C:
Edit the registry key:
WINDOWS:
open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key named PlayerDebugMode, of type String, and value 1.
В списке Extensions появится наш плагин, интерфейс прост и логичен. Экспортируете анимацию в json, ее и отдаете разработчикам. Во встроенном в плагин плеере вы можете посмотреть, что получилось.
Алексей Скреплев
В чем заключается правило этих от 200 до 500 мс?
your-scorpion
— любое действие быстрее 100мс воспринимается как моментальное
— все, что меньше 0.3 секунды, воспринимается как мгновенная реакция
— если анимация быстрее 5 секунд, то пользователь все еще не теряет концентрацию
— любая анимация длительностью до 8.5 секунд по прежнему считается допустимой
— все, что выше 8.5 секунд, это провал, т.к. внимание пользователя переключается на другие вещи.
Разумеется, важен контекст. Переключение телеканала за 5 секунд это слишком долго, а вот разогреть еду за 5 секунд это достаточно быстро. Длительность анимации позволяет добавить веса продукту, т.к. сервис, решающий задачу за 1 секунду, не будет восприниматься как ценный, а может и вовсе вызвать раздражение. В шахматах ИИ специально замедляет свои ходы на несколько секунд, правильные чатботы сначала показывают бабл с печатающимся сообщением, а агрегаторы показывают лоадеры, якобы они опрашивают кучу сайтов. Все потому, что пользователи чувствуют дискомфорт, когда компьютер все делает слишком быстро.
Все, что до 2 секунд, вполне закрывается лоадером, от 2 до 5 секунд лучше обыграть прогресс-баром. >10 секунд нужно удерживать внимание заметным визуальным оформлением.
Alexander Zobnin
Привет! а как можно пеедать анимацию разработчикам из AE? или хоть нормально измерить тайминги? спасибо!
Цветков Максим
Начинать надо с Bodymovin, и inspectorspacetime.
Igor Gritsenko
Скажи пожалуйста, какой FPS в фильмах в кинотеатрах? Спасибо!
Цветков Максим
В общем случае DCP 24fps, а так упирается только в возможности кинотеатральной проекции. Даже если сняли в 60fps. Но так как для телевещания нужно 25fps, бывают нюансы, ведь изначально могут снимать не для кинотеатра, а ТВ/web/direct-to-video. В соответствии со стандартом DCI INTEROP нужно 24fps, и 48fps для 3D. В стандарте DCI SMPTE можно и 120fps, но воспроизвести даже 96fps смогут лишь несколько кинотеатров в мире. Но это теория, на практике в рекламных агентствах допустимо выгонять MP4 и битрейт 20.000 Кбит/сек или выше, FullHD 1920×1080.
Из афтера это выводится секвенцией, и сборка через DCP-o-matic.