Размышления на тему дизайна 10-футового интерфейса

Мне было интересно придумать возможные подходы к прототипированию нового Apple TV. Я начал с изучения симулятора apple TV в новом SDK в Xcode. После его использования некоторое время, стало очевидно, что у текущего симулятора есть несколько недостатков, из-за которых использование его для прототипирования весьма проблематично.

Вот некоторые из основных моих опасений по поводу симулятора:

  • Нет фулл-скрин режима
  • Постоянно требуется перезагрузка симулятора после внесения любых изменений
  • Взаимодействие с пультом управления очень корявое. Сложно передвигаться мышкой и пультом по экрану. Требуется удерживать кнопку option для взаимодействия с пультом, но так как мышка двигается по маленькой области, взаимодействие утрачивается. Мне было сложно даже просто двигатся по сетке.
  • Симулятор очень медленный и не очень чувствительный

Я понял, что дизайн и прототипирование в такой среде не даст возможность открыть подходящие взаимодействия, которые были бы естественными и удобными для пользователей, которые сидят, откинувшись на спинку кресла и держат в руках настоящий пульт. Как бы можно было приблизиться к этой среде?

Симулятор Apple TV SDK
Симулятор Apple TV SDK

Настройка среды для прототипирования вашего TV

Я просмотрел отличную композицию, созданную Julius Tarng в сообществе origami (https://www.facebook.com/groups/origami.community/), которая показала, как быстро можно воссоздать новый параллакс Apple. Это натолкнуло меня на мысль об использовании Quartz composer для создания более крупных взаимодействий и элементов интерфейса для Apple TV. Я использовал приложение origami на iOS как и Джулиус, и это было куда лучшее дистанционное управление, чем в симуляторе в
Xcode. По ощущениям было более реальным, пульт был у меня в руке, и было гораздо проще выполнять настоящие жесты.

Сначала я понял, как тестировать прототипы на реальном TV на расстоянии. Многие из нас уже привыкли смотреть дизайне на маленьких экранах с высокой плотностью или же на больших экранах Apple Cinema. Для дизайна под эту платформу, я думаю, вам нужно создать среду, которая максимально приближена к реальной. Нужно ощущение пульта в вашей руке, и обязательно нужно сидеть на диване, как если бы вы реально смотрели телевизор.

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

Создание начальной композиции

Для начала я настроил quartz composer на полноценный кадр 1080p в качестве холста, который я отправил на экран моего TV. Для начала нового проекта я перешел в меню file > new from blank вместо нового файла origami.

я настроил quartz composer

Затем я настроил просмотрщик на 1080p. Для этого внизу просмотрщика я отобразил статусную строку через viewer > show status bar.

show status bar quartz composer

Затем я кликнул на custom в выпадающем списке слева и выбрал HD 1080p. Потом я снова скрыл статусную строку в для просмотра.

1-rzhMV9XYkxKzy_tEUBCfWw

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

спрятал панель инструментов в sketch

Передача на TV с хорошей кадровой частотой

Следующая проблема, с которой пришлось столкнуться — передача на TV в полноэкранном режиме на высокой частоте в качестве 1080p. Если вы прячите статусную строку и панель инструментов в просмотрщике, что обсуждалось в последних шагах, а затем идете в viewer > enter full screen, вы получите тот вывод, которые корректно работает на TV.

Я изначально использовал AirPlay для отправки данных на скрин. Это работает, хотя все равно вероятность лагов довольно высока. Преимущества AirPlay были в том, что я мог сидеть достаточно далеко от экрана, что очень важно при тестировании интерфейсов на расстоянии (а именно так они и будут использоваться).

Развернуть на весь экран

Я попробовал несколько улучшений взаимодействия через airplay, но ни одна попытка не закончилась частотой кадров, которая бы соответствовала моим ожиданиям. В итоге я использовал супер-длинный HDMI-кабель, который работал гораздо лучше, и давал возможность тестировать на большом расстоянии, сидя на диване. В итоге, моя новая среда для прототипирования под TV была настроена и готова к использованию. Вот как выглядела моя среда для пототипирования на 60fps:

Воссоздание Airbnb TV на моем TV

Потом я поставил себе цель воссоздать некоторые взаимодействия из нового приложения Airbnb Apple TV, которое было показано на Apple Keynote. Я сделал это по двум причинам: во-первых, чтобы посмотреть, смогу ли я воссоздать высокую точность в QC, так как у меня была отправная точка в видео на блоге Airbnb (http://blog.airbnb.com/stay-tuned-airbnb-for-apple-tv/); а во-вторых, там содержалась масса кастомных переходов. Если бы я мог воссоздать их, я бы мог уже гораздо лучше ориентироваться и создавать совершенно новые взаимодействия в будущем, или даже открыл бы новые идеи для приложения Airbnb, как только доведу до ума свои прототипы.

Если вы посмотрели видео из блога по ссылке выше, там было 5 основных анимаций/взаимодействий:

  1. Фокус-скролл карусели свойств на домашнем экране
  2. Зум в свойство
  3. Переход по фотографиям, находясь внутри свойства
  4. Чтение описания свойства
  5. Лайкнуть опцию

Я решил сфокусироваться на воссоздании перых двух.

При прототипировании важно следовать этому ключевому принципу:

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

“Цель — просто продемонстрировать и проверить идею, так что вы можете оценить результат самым реалистичным способом при минимальных усилиях”.

Настроив quartz composer вышеописанным способом и используя iOS-приложение Facebook origami на вашем iPhone в качестве контроллера управления прототипом Apple TV, я смог оценить свои идеи, сидя на диванчике на корректном расстоянии от телевизора.

 iOS-приложение Facebook origami
Использование приложения iOS Facebook Origami в качестве пульта для Apple TV

Статистический вывод разных макетов Airbnb в Sketch

Я начал с настройки нескольких шаблонов Sketch с макетами приложения Airbnb, для реализации полного процесса прототипирования в Apple TV. Я настроил шаблон и артборд для быстрого перевода на Quartz Composer в разрешении 1080p.

Шаблон Sketch app Airbnb 1080p
Шаблон Sketch app Airbnb 1080p

Вот ссылки на рабочие файлы Sketch, которые я использовал в качестве исходников для создания прототипов.

Airbnb TV Spain полноэкранный:

Airbnb TV Spain Full Screen.sketch

Шаблон Airbnb TV — Paris Focus:

Airbnb TV Template — Paris Focus.sketch

Шаблон Airbnb TV— Spain Focus:

Airbnb TV Template — Spain Focus.sketch

Их я перенес в quartz composer и начал приводить их в чувства!

Zooming into a property animation

Первое взаимодействие, которым я занялся, было раскрытие свойства. Оно требует простого касания экрана пульта / iPhone, чтобы открыть выделенную опцию. Так как у меня не было доступа к новому оборудованию Apple TV или приложению Airbnb, воссоздание проходило “на глаз”, я пересматривал видео на блоге Airbnb и Apple Keynote (так что извиняюсь, если точность прихрамывает).

Зум-анимация — довольно кастомный вариант, с рядом мельчайших деталей, которые видны при теппинге выделенной опции.

Вот некоторые детали, которые надо было воссоздать:

На базе деталей выше, я связал патчи в quartz composer, и композиция заиграла:

я связал патчи в quartz composer

Сборка композиции зума в Quartz Composer Airbnb

Вы можете посмотреть мою конечную композицию в quartz composer, можете испольховать ее и также потестировать полноэкранный режим на TV через HDMI. Для просмотра вам придется установить плагин Facebook Origami. Подробнее об origami можете узнать здесь: https://facebook.github.io/origami/

Airbnb Apple TV Zoom.qtz

Взаимодействие для перехода между опциями

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

 

Затем я протестировал этот переход на реальном телевизоре на расстоянии:

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

Я заметил, что на моем iPhone беглый просмотр листинга проходил гораздо быстрее, но если мне надо было пройтись по листингам в кругу компании на моем диване, то конечно, на Apple TV было предпочтительнее, так как они могли легче видеть содержимое, чем на экране айфона.

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

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

Финальную композицию final quartz можно получить здесь:

Airbnb Apple TV Scroll .qtz

Можно ли использовать новое круговое взаимодействие на пульте для быстрого просмотра контента?

Настроив среду и рабочий процесс я стал исследовать свою идею нового взаимодействия для Apple TV:

Некоторые из деталей, которые я добавил к взаимодействию, показаны тут:

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

 

Конечный вариант композиции в quartz composer доступен здесь:

Airbnb Apple TV Circle Peek .qtz

Завершающие размышления

Я думаю, что это отличный способ быстрой итерации дизайнов и взаимодействий для Apple TV. Это заслуга Quartz Composer и Origami за счет их гибкости и возможности быстро адаптироваться к нужной задаче.

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