Въведение в основните съставки на телевизионния потребителски интерфейс

По-голямата част от потребителите в наши дни прекъсват кабела с платена телевизия, но това не означава, че са се отказали от големия екран, за да консумират съдържанието си. Според съобщение на данни от Нилсен , навиците за гледане на възрастни в САЩ установиха, че 92% от цялото гледане все още се извършва на телевизионния екран. Това са доста огромни цифри.

Над 92% от гледането сред възрастни в САЩ все още се случва на телевизионния екран.

Значението на „гледане на телевизия“ се е променило много през последните няколко десетилетия. Вече не се ограничаваме до дистанционно и кабелно устройство, за да запълним нашите екрани; използваме Smart TV или стрийминг с помощта на шайби като Roku, Amazon Fire и Apple TV или свързваме конзоли за видеоигри като Xbox и Playstation. И всяко от тези устройства позволява потребителски интерфейс, който е много по-мощен от старомодното ви ръководство на екрана.

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

Означава ли това, че традиционната телевизионна връзка е тук, за да остане?

Изглежда всички ние смятаме, че резачките за шнур там биха представлявали по-голям брой. Нилсен съобщава, че 116,4 милиона домове в САЩ се очаква да гледат телевизия през сезон 2015-16. Това е огромен брой и докладът също така установява, че около 9,5 милиона от тези домове са преминали към безплатната OTA TV. От всички услуги за стрийминг там Netflix (60,7%) изглежда е по-напред от играта, следван от Amazon Prime Video (49,4%) и от Hulu (26%). Вярвам, че една от най-големите причини хората да прекъсват кабела е, че искаме да плащаме само за това, което използваме.

В сравнение с компютрите и дори мобилните телефони, проектирането на потребителски интерфейси за телевизия все още е сравнително нова област. Това също е принципно различна платформа и начинът, по който консумираме съдържанието си, е различен. Дизайнът за телевизия изисква уникален набор от съображения, включително размер на екрана и разстояние на зрителя, технически ограничения и контекст на употреба. Потребителите са в опит за „облегване назад“, като седят средно на 10 фута и потребителският интерфейс и опит трябва да отразяват това. За разлика от таблетите и телефоните със сензорен екран, взаимодействията на телевизорите се осъществяват чрез D-pad (насочена контролна подложка) с помощта на дистанционно управление или контролер за видеоигри, което отговаря на сложността.

Екранът

Телевизорите не са като таблетите и телефоните.

Телевизорите са се променили много с течение на времето от огромна тромава мебел до елегантен минималистичен дисплей, окачен на стена. Навремето, когато телевизорите заемаха цялата всекидневна, те използваха технология, която създаваше несъвместими изображения на телевизори, особено близо до краищата. За да компенсират тези проблеми, CRT телевизорите бяха обект на пресканиране. Това просто означава, че изображенията са леко увеличени, така че ръбовете не са извън границите на зоната за гледане.

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

По причини извън нашия контрол, пресканирането все още е нещо ... дори на новите ви HDTV телевизори. Размерът на свръхсканирането не е последователен за всеки телевизор. За да сте сигурни, че цялата ваша основна информация, като заглавия и важни действия, е безопасна, съхранявайте ги в безопасни полета.

Понастоящем няма определен „стандарт“ за зоните за безопасно действие; той се определя най-вече от самата платформа. Google поддържа тяхната безопасна зона тясна, а Apple е малко по-щедра. От многото ми търсения в мрежата тези зони ще варират между 85% и 95% от телевизионния екран от центъра. За да отговорите на изискванията от всички различни платформи, върху които може да работите, бих препоръчал да използвате безопасна зона от 60px горни и долни полета и 90px странични полета. Това означава, че цялата ви основна информация ще трябва да се побере в тази област, за да побере всички телевизионни екрани и да отговори на всяко изискване на платформата.

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

Навигация

Как нагоре-надолу-наляво-надясно оформя телевизионните интерфейси.

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

За разлика от мобилните устройства, които контролираме с пръсти, повечето телевизионни потребителски интерфейси се контролират от D-pad и се използват на разстояние от екрана. Независимо дали е на дистанционно управление или геймпад, D-padът ограничава навигацията до четири посоки: нагоре, надолу, наляво и надясно.

Всяка платформа има и свои установени конвенции. Например на Xbox тригерите осигуряват контрола „Page Up” и „Page Down”, докато броните се използват за разделяне между изгледи на съдържание. На всяка платформа има и редица бутони за „потребител на мощност“, с които по-опитните геймъри биха били запознати.

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

Съсредоточете се и подчертайте състоянията при проектирането за телевизия са много важни. Това състояние на фокуса е елементът, който подчертава избираем компонент и означава текущото местоположение на потребителя на екрана. Формата, в която се показва фокусът, може да варира; в зависимост от компонента обаче последователността винаги ще бъде от ключово значение. Ясният и добре видим фокус помага на потребителя бързо да разпознае текущото си местоположение на екрана и улеснява навигацията. Когато потребителят хвърли един миг поглед от телевизора и след това върне погледа си, автоматично трябва да стане ясно коя опция е избрана в момента за навигация. Всеки елемент на екрана трябва да е достъпен от курсора и винаги трябва да е ясно къде курсорът може да се движи по-нататък.

Примери за дизайни, които могат да накарат потребителите да се чудят къде се намират в приложението. Тези примери не осигуряват достатъчно визуална индикация (състояние на фокусиране) на позиционирането. Потребителите трябва да могат ясно да виждат къде се намират по всяко време, без да се налага да се движат нагоре или надолу. Би трябвало да можете да отклоните поглед от телевизора и обратно и пак да знаете позицията си.

Типография

Четене на разстояние десет метра.

Телевизионните приложения често се наричат ​​десетметрови преживявания, термин, който се отнася до общо разстояние между вас и вашия телевизор. За разлика от други устройства като мобилни устройства и настолни компютри, телевизията е настроена да бъде по-скоро среда за „облегване и отпускане“. Като се има предвид това разстояние, трябва да се отнасяме към потребителския интерфейс малко по-различно, отколкото към уеб или мобилни устройства.

Телевизионните екрани обикновено са по-големи от мобилните устройства и мониторите за настолни компютри, но се гледат от по-голямо разстояние. Четливостта се превръща във важна характеристика, което означава, че размерът на текста и другите елементи трябва да се коригират съответно. В зависимост от възрастта ви 18px вероятно ще бъде най-малкият четим размер и е подходящ само за несъществени етикети, като раздела за вежди. Въпреки това, като общо правило, избраните от вас размери на шрифта никога не трябва да са по-малки от 24 точки. Това бих помислил за минимален размер на шрифта, за да побере всеки тип потребител.

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

Сканиране на линии

Какво представляват линиите за сканиране?

За разлика от настолни, мобилни и таблетни екрани, изображението на телевизионен екран е съставено от нечетни и четни линии за сканиране. Телевизорът прави тези линии на фази, като се редуват бързо между нечетни и четни линии. Всеки един пиксел (или линия от пиксели), попадащ върху една линия за сканиране, ще трепти. За да избегнете трептене на вашите елементи на екрана, винаги трябва да държите линиите си на четни числа и не по-тънки от 2 пиксела. Това е нещо, което трябва да имате предвид, когато работите по крос-платформени проекти и се подготвяте за прехвърляне на вашите дизайни от сензорни устройства (мобилни и таблетни), където често можете да намерите себе си, създавайки бутони за границата 1px, за телевизия.

Друг начин да избегнете тези размити линии или форми е да се уверите, че вашите дизайни винаги са перфектни с пиксели. Примерът по-долу е добър пример за линии, които са създадени с помощта на неравномерни числа. Както можете да видите, можем ясно да видим ефектите от това и това става притеснително за очите.

(връзка към оригиналния GIF https://cl.ly/0w3L0h2n1K3U )

Цвят

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

Първият елемент, който трябва да имате предвид, е, че телевизорите имат много по-висока гама стойност от настолните, таблетните и слушалките. Най-добрият начин да се опише как гамата влияе върху качеството на картината е, че гамата представлява нивото на разлика в яркостта между всяка стъпка в сивата скала или как 'бързите' черни стават по-ярки. Ние възприемаме два пъти светлината като малко по-ярка. Различните марки и модели телевизори се различават значително, що се отнася до яркостта, дисплея и други настройки. Подобно на типа, цветът трябва да се тества рано и често на телевизори.

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

Общото правило е да се избягват остри ръбове между силно контрастиращите цветове (особено ярките цветове до тъмните цветове) и да се избягват „горещите” цветове като много наситени червени и жълти. Те ще кървят по-лесно от по-малко наситените цветове или по-студените цветове като сини и зелени.

Винаги тествайте цветовете на истински телевизор, за да разберете как вашите цветови решения се превеждат на големия екран. Ако е възможно, визуализирайте приложението си на множество телевизори, тъй като цветовете могат да се различават драстично между телевизионните модели. Просто прикрепете HDMI кабела от вашия телевизор и го тествайте.

Основите

Малки неща за разглеждане.

Тези елементи трябва да се използват за насочване на вашите проекти като цяло. Най-големите съображения при проектирането на потребителските интерфейси на телевизора са простотата и лекото взаимодействие.

Докато много от основи и най-добри практики за проектиране на взаимодействие все още се прилага, телевизорът се използва по-спокойно, за разлика от компютър или мобилно устройство. Потребителският интерфейс на телевизия трябва да бъде ясен, опростен и визуален. Дизайнът изисква простота и яснота с ниска плътност на информацията. Елементите трябва да са големи и да са достатъчно отдалечени, за да се четат от разстояние. Представете ясен набор от действия или опции за всеки екран.

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

Продуктови дизайни за You.i TV
Разширяване на ограниченията на традиционните телевизионни дизайни. Това осигурява алтернативен кинематографичен подход към обичайното лечение с карти 16 x 9, което много други използват. В сравнение с много други услуги, подходът беше да се изведе менюто в долната част на екрана

Продуктови дизайни за You.i TV
Разширяване на ограниченията на традиционните телевизионни дизайни. Поставяйки новините на преден план, потребителите се фокусират върху една новина в даден момент спрямо редове и редове съдържание.

Продуктови дизайни за You.i TV
Потребителските интерфейси за деца трябва да бъдат интуитивни, забавни и лесни за използване. Този дизайн демонстрира, че компаниите могат да изтласкат своите проекти по-далеч от традиционната мрежова система, фокусираща се върху карти 1x1, 2x3 или дори 16x9.

Поставете най-важното съдържание или опции първо на екрана, така че те да бъдат лесно видими и навигационни от потребителя. Излишните нива на екрана трябва да бъдат премахнати. Преминаването на различни нива и излизането отново трябва да е лесно и очевидно.

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

Накратко, потребителите винаги трябва да знаят къде точно се намират в дадено приложение. Не забравяйте, че потребителят използва само основни контроли за навигация. Move, Return, Enter и други основни функции за навигация трябва да са ясни. Потребителите трябва да могат да използват операциите, които искат с тези действия.

Стъпка на телевизия Търнър
Фокусът беше да се разширят границите на традиционния телевизионен дизайн. Намерете креативни начини за демонстриране на широката широчина на съдържанието, достъпно за потребителите, като същевременно го направите интуитивен и лесен за използване.

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

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• eCommerce UX - преглед на най-добрите практики (с инфографика)
• Значението на ориентирания към човека дизайн в продуктовия дизайн
• Най-добрите портфейли на UX Designer - вдъхновяващи казуси и примери
• Евристични принципи за мобилни интерфейси
• Предвиден дизайн: Как да създадем магически потребителски опит