Как тестировать ТВ-макеты в Figma

Мы — команда дизайнеров, работающих над редизайном интерфейса для ТВ-приставки.

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

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

Для тестирования на одном из маркетплейсов мы нашли пульт, который подходил по функционалу. На нем были все необходимые для теста кнопки: стрелки, «ОК» и «Назад».

Одной из трудностей стало отсутствие специализированных кнопок, необходимых для полного теста.

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

Телевизоры имеют свои особенности в управлении. В прототипе Figma можно использовать параметры Key/Gamepad для настройки взаимодействий через пульт.

Например, можно настроить стрелки на пульте для навигации по экрану, а кнопку «Назад» для возвращения на предыдущий экран.

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

Небольшое открытие: перед началом тестирования нужно было кликнуть мышью по прототипу на экране, чтобы активировать управление, а уже затем можно было использовать пульт.

При тестировании пользователи иногда будут сталкиваться с «тупиковыми» экранами, где навигация будет настроена не полностью. Это нормально, ведь это прототип.

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

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

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

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

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

Мы также столкнулись с трудностями: при слишком быстром нажатии кнопок навигация иногда сбоила. Это связано с особенностями прототипа, который не всегда успевает отработать быстрое нажатие. Если у вас есть идеи, как можно оптимизировать подобные ситуации, будем рады услышать советы =)

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

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