Переосмысление дизайна пользовательского интерфейса для телевизионной платформы

Введение в основные компоненты телевизионного пользовательского интерфейса

Подавляющее большинство потребителей в наши дни отказываются от платного телевидения, но это не означает, что они отказываются от большого экрана, чтобы смотреть свой контент. Согласно выпуску данных Nielsen, привычки просмотра взрослых в США показали, что 92% всего просмотра по-прежнему происходит на экране телевизора. Это довольно большие цифры.

Более 92% просмотров среди взрослого населения США по-прежнему происходит на экране телевизора.

Значение «смотреть телевизор» сильно изменилось за последние несколько десятилетий. Мы больше не ограничены пультом дистанционного управления и кабельной коробкой для заполнения наших экранов; мы используем Smart TV или транслируем с помощью шайб, таких как Roku, Amazon Fire и Apple TV, или подключаем игровые приставки, такие как Xbox и Playstation. И каждое из этих устройств предоставляет пользовательский интерфейс, который намного мощнее, чем ваш старомодный экранный гид.

Плата за просмотр трансляций или программ VOD через онлайн-сервисы на основе подписки, такие как Hulu, Netflix или Amazon, составляет 26% глобальных онлайн-респондентов (Nielsen). Это значительное число. Тем не менее, 72% респондентов подтвердили, что они по-прежнему платят за просмотр своего контента через традиционное телевизионное соединение.

Означает ли это, что традиционная телевизионная связь останется?

Мы все, кажется, думаем, что количество резаков для шнура будет больше. Nielsen сообщает, что в сезоне 2015-16 годов телевизор будут смотреть 116,4 миллиона домов в США. Это огромное число, и в отчете также указано, что около 9,5 миллионов из этих домов перешли на бесплатное OTA-телевидение. Из всех потоковых сервисов Netflix (60,7%), кажется, опережает игру, за ней следуют Amazon Prime Video (49,4%) и Hulu (26%). Я считаю, что одна из главных причин, по которой люди перерезают шнур, заключается в том, что мы хотим платить только за то, что используем.

По сравнению с компьютерами и даже мобильными телефонами разработка пользовательского интерфейса для телевидения все еще является относительно новой областью. Это также принципиально другая платформа, и то, как мы потребляем наш контент, отличается. Дизайн для телевидения требует уникального набора соображений, включая размер экрана и расстояние до зрителя, технические ограничения и контекст использования. Пользователи находятся в положении «откинувшись назад», сидя в среднем на расстоянии 10 футов, и пользовательский интерфейс и опыт должны отражать это. В отличие от планшетов и телефонов с сенсорным экраном, взаимодействие на телевизорах осуществляется с помощью D-pad (панель управления направлением) с помощью пульта дистанционного управления или игрового контроллера, что усложняет задачу.

Дисплей

Телевизоры не похожи на планшеты и телефоны.

Телевизоры со временем сильно изменились: от огромного неуклюжего предмета мебели до гладкого минималистского дисплея, висящего на стене. Раньше, когда телевизоры занимали всю гостиную, они использовали технологию, которая давала противоречивые изображения на телевизорах, особенно вблизи краев. Чтобы компенсировать эти проблемы, ЭЛТ-телевизоры подвергались чрезмерному сканированию. Это просто означает, что изображения были немного увеличены, чтобы края не выходили за пределы области просмотра.

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

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

В настоящее время не существует установленного «стандарта» для зон безопасных действий; это в основном определяется самой платформой. Google держит свою безопасную зону узкой, а Apple немного более щедрой. Судя по моим многочисленным поискам в Интернете, эти зоны будут варьироваться от 85% до 95% телевизионного экрана от центра. Чтобы соответствовать требованиям всех различных платформ, с которыми вы можете работать, я бы предложил использовать безопасную зону с верхним и нижним полями 60 пикселей и боковыми полями 90 пикселей. Это означает, что вся ваша основная информация должна поместиться в этой области, чтобы разместить все экраны телевизоров и удовлетворить все требования платформы.

Чтобы начать разработку нового пользовательского интерфейса для телевизора, создайте новый холст размером 1920 x 1080. Ваш отступ (безопасная зона) должен составлять 90 пикселей по бокам (слева и справа), а также 60 пикселей сверху и снизу. Вы можете бесплатно скачать файл здесь.

Навигация

Как вверх-вниз-влево-вправо формируются телевизионные интерфейсы.

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

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

Каждая платформа также имеет свои собственные установленные соглашения. Например, на Xbox триггеры обеспечивают элементы управления «Page Up» и «Page Down», в то время как бамперы используются для перехода между просмотрами контента. На каждой платформе также есть несколько кнопок «опытного пользователя», с которыми знакомы более опытные игроки.

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

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

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

Типография

Чтение с десяти футов.

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

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

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

Линии сканирования

Что такое строки сканирования?

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

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

Цвет

Телевизионные дисплеи имеют ограничения.

Первый элемент, о котором следует помнить, это то, что телевизоры имеют гораздо более высокое значение гаммы, чем настольные компьютеры, планшеты и телефоны. Лучший способ описать, как гамма влияет на качество изображения, состоит в том, что гамма представляет собой уровень разницы яркости между каждым шагом в шкале серого или то, как «быстро» черные цвета становятся ярче. Мы воспринимаем удвоенный свет как лишь немного более яркий. Различные производители и модели телевизоров сильно различаются по яркости, дисплею и другим настройкам. Как и тип, цвет следует тестировать заранее и часто на телевизорах.

Несколько советов, которым следует следовать при выборе цветов: Яркие цвета могут раздражать глаза при просмотре телевизора ночью или в темной комнате. Избегайте чрезмерного использования насыщенных цветов (особенно красного) и интенсивного использования белого цвета в крупных элементах или фонах. Чистый белый цвет создаст ореолы и другие визуальные отвлекающие факторы. При выборе белого рекомендуется выбирать шестнадцатеричное значение #f1f1f1 , чтобы избежать мерцания. Чтобы повысить читабельность, убедитесь, что вы создали достаточный контраст между элементами.

Общее правило состоит в том, чтобы избегать резких краев между высококонтрастными цветами (особенно яркими цветами рядом с темными) и избегать «горячих» цветов, таких как очень насыщенные красный и желтый. Они будут растекаться легче, чем менее насыщенные цвета или более холодные цвета, такие как синий и зеленый.

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

Основы

Мелочи, чтобы рассмотреть.

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

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

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

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт