TV 플랫폼을 위한 사용자 인터페이스 디자인 재고

TV UI의 기본 구성 요소 소개

오늘날 대다수의 소비자는 유료 TV로 코드를 끊고 있지만 그렇다고 해서 큰 화면을 피하여 콘텐츠를 소비하는 것은 아닙니다. Nielsen의 데이터 발표에 따르면 미국 성인의 시청 습관에 따르면 전체 시청의 92%가 여전히 TV 화면에서 발생합니다. 이것은 꽤 큰 숫자입니다.

미국 성인 시청의 92% 이상이 여전히 TV 화면에서 발생합니다.

"TV 시청"의 의미는 지난 수십 년 동안 크게 바뀌었습니다. 우리는 더 이상 화면을 채우기 위해 리모컨과 케이블 상자에 국한되지 않습니다. 우리는 스마트 TV를 사용하거나 Roku, Amazon Fire 및 Apple TV와 같은 퍽을 사용하여 스트리밍하거나 Xbox 및 Playstation과 같은 비디오 게임 콘솔을 연결합니다. 그리고 이러한 각 장치는 구식 온스크린 가이드보다 훨씬 강력한 사용자 인터페이스를 허용합니다.

Hulu, Netflix 또는 Amazon과 같은 구독 기반 온라인 서비스를 통해 방송 또는 VOD 프로그램 시청에 비용을 지불하는 것은 전 세계 온라인 응답자의 26%를 나타냅니다(Nielsen). 이것은 상당한 숫자입니다. 그러나 응답자의 72%는 여전히 전통적인 TV 연결을 통해 콘텐츠를 시청하기 위해 비용을 지불하고 있다고 말했습니다.

이것은 전통적인 TV 연결이 유지된다는 것을 의미합니까?

우리 모두는 코드 절단기가 더 높은 숫자를 나타낼 것이라고 생각하는 것 같습니다. Nielsen은 2015-16 시즌 동안 미국의 1억 1,640만 가정에서 TV를 시청할 것으로 예상했습니다. 이것은 엄청난 숫자이며 보고서에 따르면 그 중 약 950만 가구가 무료 OTA TV로 전환했습니다. 전체 스트리밍 서비스 중 Netflix(60.7%)가 게임을 앞서는 것으로 보이며 Amazon Prime Video(49.4%), Hulu(26%)가 그 뒤를 이었습니다. 사람들이 코드를 끊는 가장 큰 이유 중 하나는 우리가 사용한 만큼만 비용을 지불하기를 원하기 때문입니다.

컴퓨터, 심지어 휴대폰과 비교할 때 TV용 UI 디자인은 여전히 ​​상대적으로 새로운 영역입니다. 또한 근본적으로 다른 플랫폼이며 우리가 콘텐츠를 소비하는 방식도 다릅니다. TV용 디자인에는 화면 크기 및 시청자 거리, 기술적 제약, 사용 상황 등을 비롯한 고유한 고려 사항이 필요합니다. 사용자는 평균 10피트 떨어진 곳에 앉아 있는 "등받이" 경험에 있으며 사용자 인터페이스와 경험은 이를 반영해야 합니다. 터치스크린 태블릿 및 휴대폰과 달리 텔레비전의 상호 작용은 리모콘 또는 비디오 게임 컨트롤러를 사용하여 D-패드(방향 제어 패드)를 통해 수행되므로 복잡성이 증가합니다.

디스플레이

텔레비전은 태블릿이나 전화기와 다릅니다.

TV는 시간이 지남에 따라 크고 투박한 가구에서 벽에 걸려 있는 세련된 미니멀리스트 디스플레이로 많이 바뀌었습니다. TV가 거실 전체를 차지했을 때 TV 세트, 특히 가장자리 근처에서 일관성 없는 이미지를 생성하는 기술을 사용했습니다. 이러한 문제를 보완하기 위해 CRT TV는 오버스캔 대상이 되었습니다. 이것은 가장자리가 보기 영역의 경계를 벗어나지 않도록 이미지가 약간 확대되었음을 의미합니다.

전통적으로 방송사는 이를 예상했고 중요한 정보가 화면 가장자리에 너무 가깝게 표시되는 것을 방지하기를 원했습니다. 이 문제를 해결하기 위해 왜곡 없이 텍스트를 표시할 수 있는 제목 보호 영역과 이미지를 안전하게 표시할 수 있는 작업 안전 영역을 만들었습니다.

우리가 통제할 수 없는 이유로 오버스캔은 여전히 ​​문제입니다. 심지어 새 HDTV에서도 마찬가지입니다. 오버스캔의 양이 TV 간에 일정하지 않습니다. 제목 및 중요한 작업과 같은 모든 기본 정보가 안전한지 확인하려면 안전한 여백 안에 보관하십시오.

현재 안전 조치 영역에 대해 설정된 "표준"이 없습니다. 대부분 플랫폼 자체에 의해 정의됩니다. Google은 안전 영역을 좁게 유지하고 Apple은 좀 더 관대합니다. 웹에서 내가 많이 검색한 결과 이 ​​영역은 중앙에서 텔레비전 화면의 85%에서 95% 사이에서 다양합니다. 작업 중인 모든 다른 플랫폼의 요구 사항을 충족하려면 60px 상단 및 하단 여백과 90px 측면 여백의 안전 영역을 사용하는 것이 좋습니다. 즉, 모든 TV 화면을 수용하고 모든 플랫폼 요구 사항을 충족하려면 모든 기본 정보가 이 영역에 맞아야 합니다.

새 텔레비전 사용자 인터페이스 디자인을 시작하려면 새 1920 x 1080 캔버스를 만드십시오. 패딩(안전 영역)은 측면(왼쪽 및 오른쪽)이 90픽셀이어야 하고 상단 및 하단이 60픽셀이어야 합니다. 여기에서 무료 파일 다운로드를 받을 수 있습니다.

항해

상하좌우가 어떻게 TV 인터페이스를 형성하는지.

디자이너로서 우리가 디자인하는 하드웨어는 디자인 패턴의 일부를 정의합니다. 모바일에서는 스와이프, 탭, 길게 누르기, 당기기 등의 작업을 수행합니다. 탭과 메뉴는 장치에서 탐색 패턴으로 사용됩니다. 텔레비전은 제대로 수행되지 않으면 쉽게 지나치게 복잡해질 수 있는 커다란 캔버스를 제공합니다. 사용자에게 표시되는 콘텐츠의 양을 최대화하기 위해 긴 콘텐츠 행을 보는 것은 텔레비전 UI의 표준 요소가 되었습니다.

우리가 손가락으로 조작하는 모바일 기기와 달리 TV UI는 대부분 D패드로 제어되며 화면에서 멀리 떨어져서 사용됩니다. 리모컨에 있든 게임패드에 있든 D-패드는 탐색을 위, 아래, 왼쪽 및 오른쪽의 4가지 방향으로 제한합니다.

또한 각 플랫폼에는 자체적으로 설정된 규칙이 있습니다. 예를 들어 Xbox에서 트리거는 "Page Up" 및 "Page Down" 컨트롤을 제공하는 반면 범퍼는 콘텐츠 보기 사이를 탭하는 데 사용됩니다. 또한 각 플랫폼에는 경험이 많은 게이머에게 친숙한 "고급 사용자" 버튼이 많이 있습니다.

TV UI의 또 다른 중요한 요소는 포커스 상태 입니다. 화면을 터치하거나 마우스를 사용할 수 없는 경우 사용자는 선택하려는 요소로 이동해야 합니다. 사용자가 앱 내에서 탐색할 때 탐색 요소에 포커스가 있음을 나타내는 다른 UI 요소가 강조 표시되어야 합니다.

TV용으로 디자인할 때 초점 및 강조 표시 상태는 매우 중요합니다. 해당 포커스 상태는 선택 가능한 구성 요소를 강조 표시하고 사용자의 현재 화면 위치를 나타내는 요소입니다. 초점이 표시되는 형식은 다를 수 있습니다. 그러나 구성 요소에 따라 일관성이 항상 중요합니다. 명확하고 눈에 잘 띄는 초점은 사용자가 화면상의 현재 위치를 빠르게 인식하고 탐색을 쉽게 하는 데 도움이 됩니다. 사용자가 잠시 TV에서 시선을 돌렸다가 다시 시선을 돌리면 현재 탐색을 위해 선택한 옵션이 자동으로 지워집니다. 화면의 모든 항목은 커서로 접근할 수 있어야 하며 커서가 다음에 이동할 수 있는 위치가 항상 명확해야 합니다.

사용자가 앱에서 자신이 어디에 있는지 궁금해할 수 있는 디자인의 예입니다. 이러한 예는 위치 지정에 대한 충분한 시각적 표시(초점 상태)를 제공하지 않습니다. 사용자는 위아래로 움직일 필요 없이 항상 자신의 위치를 ​​명확하게 볼 수 있어야 합니다. 텔레비전에서 시선을 돌렸다가 뒤를 돌아봐도 자신의 위치를 ​​알 수 있어야 합니다.

타이포그래피

10피트 떨어진 곳에서 읽기.

TV 앱은 종종 10피트 경험이라고 하며, 이는 사용자와 TV 사이의 공통 거리를 나타내는 용어입니다. 모바일 및 데스크탑과 같은 다른 장치와 달리 텔레비전은 "기대고 휴식을 취하는" 환경으로 설정되어 있습니다. 이 거리를 감안할 때 웹이나 모바일에서와 약간 다르게 UI를 처리해야 합니다.

TV 화면은 일반적으로 모바일 장치 및 데스크톱 컴퓨터 모니터보다 크지만 더 먼 거리에서 볼 수 있습니다. 가독성이 중요한 기능이 되므로 텍스트 및 기타 요소의 크기를 그에 따라 조정해야 합니다. 연령에 따라 18px는 읽을 수 있는 가장 작은 크기일 수 있으며 눈썹 탭과 같이 필수적이지 않은 레이블에만 적합합니다. 그렇더라도 일반적으로 선택한 글꼴 크기는 24pt보다 작아서는 안 됩니다. 이것은 모든 유형의 사용자를 수용할 수 있는 최소 글꼴 크기를 고려한 것입니다.

TV에서 좋은 타이포그래피의 핵심은 끊임없이 테스트하는 것입니다. 얇고 작은 글씨체는 모니터에서는 깨끗하고 또렷하게 보이지만 TV에서는 한 번 보면 부풀어 오르거나 알아볼 수 없게 될 수 있습니다.

스캔 라인

스캔 라인이란 무엇입니까?

데스크톱, 모바일 및 태블릿 화면과 달리 텔레비전 화면의 이미지는 홀수 및 짝수 스캔 라인으로 구성됩니다. 텔레비전은 홀수 스캔 라인과 짝수 스캔 라인 사이에서 빠르게 교대하는 위상으로 이러한 라인을 렌더링합니다. 단일 스캔 라인에 떨어지는 단일 픽셀(또는 픽셀 라인)은 깜박입니다. 화면에서 항목이 깜박이는 것을 방지하려면 선을 항상 짝수로 유지하고 2픽셀보다 얇지 않아야 합니다. 이것은 교차 플랫폼 프로젝트에서 작업하고 TV용 1px 테두리 버튼을 만드는 경우가 많은 터치 장치(모바일 및 태블릿)에서 디자인을 전송할 준비를 할 때 고려해야 할 사항입니다.

이러한 흐릿한 선이나 모양을 피하는 또 다른 방법은 디자인이 항상 완벽한 픽셀인지 확인하는 것입니다. 아래 예는 홀수를 사용하여 생성된 선의 좋은 예입니다. 보시다시피, 우리는 이것의 효과를 분명히 볼 수 있으며 눈에 불안해집니다.

색깔

TV 디스플레이에는 한계가 있습니다.

염두에 두어야 할 첫 번째 요소는 텔레비전이 데스크톱, 태블릿 및 핸드셋 장치보다 감마 값이 훨씬 더 높다는 것입니다. 감마가 화질에 미치는 영향을 설명하는 가장 좋은 방법은 감마가 회색조의 각 단계 간의 밝기 차이 수준 또는 "빠른" 검정이 밝아지는 정도를 나타내는 것입니다. 우리는 두 배의 빛을 단지 일부만 더 밝은 것으로 인식합니다. TV의 제조사와 모델은 밝기, 디스플레이 및 기타 설정과 관련하여 매우 다양합니다. 유형과 마찬가지로 색상도 일찍 그리고 자주 TV에서 테스트해야 합니다.

색상을 선택할 때 따라야 할 몇 가지 지침: 밝은 색상은 밤에 텔레비전을 보거나 어두운 방에서 볼 때 눈에 거슬릴 수 있습니다. 채도가 높은 색상(특히 빨간색)을 과도하게 사용하고 큰 요소나 배경에 흰색을 과도하게 사용하지 마십시오. 순수한 흰색은 후광 및 기타 시각적 산만함을 만듭니다. 흰색을 선택할 때 깜박임을 피하기 위해 #f1f1f1 16진수 값을 선택하는 것이 좋습니다. 가독성을 높이려면 요소 간에 충분한 대비를 만들어야 합니다.

일반적인 규칙은 대비가 높은 색상(특히 어두운 색상 옆의 밝은 색상) 사이의 날카로운 모서리를 피하고 매우 포화된 빨강 및 노랑과 같은 "뜨거운" 색상을 피하는 것입니다. 이러한 색상은 채도가 낮은 색상이나 파란색 및 녹색과 같은 시원한 색상보다 더 쉽게 번집니다.

색상 선택이 큰 화면으로 어떻게 변환되는지 이해하려면 항상 실제 TV에서 색상을 테스트하십시오. TV 모델마다 색상이 크게 다를 수 있으므로 가능하면 여러 TV에서 앱을 미리 봅니다. TV 세트에서 HDMI 케이블을 연결하고 테스트하기만 하면 됩니다.

기초

고려해야 할 작은 것들.

이러한 요소는 디자인을 전체적으로 안내하는 데 사용해야 합니다. TV UI를 디자인할 때 가장 큰 고려 사항은 단순성과 가벼운 상호 작용입니다.

인터랙션 디자인에 대한 많은 기본 사항과 모범 사례가 여전히 적용되지만 텔레비전은 컴퓨터나 모바일 장치와 달리 좀 더 편안한 방식으로 사용됩니다. 텔레비전의 UI는 명확하고 단순하며 시각적이어야 합니다. 디자인은 정보 밀도가 낮은 단순성과 명확성을 요구합니다. 요소는 멀리서도 읽을 수 있을 만큼 충분히 멀리 떨어져 있어야 합니다. 각 화면에 대해 명확한 일련의 작업 또는 옵션을 제시합니다.

이 디자인은 멋진 큰 카드 처리를 사용하여 깨끗하고 단순합니다. 초점 상태는 나머지 깨끗한 디자인과 일치하는 크기 및 그림자를 사용하여 달성됩니다. 메타데이터는 마우스 오버 시에만 표시되므로 사용자가 현재 카드에 계속 집중할 수 있습니다.

사용자가 쉽게 보고 탐색할 수 있도록 가장 중요한 콘텐츠나 옵션을 화면에 먼저 배치합니다. 불필요한 화면 수준은 제거해야 합니다. 다른 레벨에 들어갔다가 다시 나오는 것은 쉽고 분명해야 합니다.

TV 애플리케이션을 디자인할 때 가장 중요한 요소는 사용자 조작을 위한 명확하고 정확한 탐색을 포함하는 것입니다. 탐색이 모호하면 사용자는 혼란스럽고 불안해할 것입니다.

요컨대, 사용자는 항상 애플리케이션 내에서 자신이 어디에 있는지 정확히 알아야 합니다. 사용자는 기본 컨트롤만 사용하여 탐색한다는 점을 기억하십시오. Move, Return, Enter 및 기타 기본 탐색 기능은 명확해야 합니다. 사용자는 이러한 작업으로 원하는 작업을 사용할 수 있어야 합니다.

디자이너로서 우리의 임무는 사용자가 명확하고 탐색하기 쉬운 방식으로 콘텐츠에 액세스할 수 있도록 하는 사용자 인터페이스를 만들고 디자인하는 것입니다. 우리는 사용자가 우리의 콘텐츠를 볼 수 있도록 새로운 습관에 적응할 것이라고 기대할 수 없습니다. 오히려 우리는 사용자 인터페이스를 조정하여 의도한 것보다 더 적은 것을 제공하는 누군가가 매우 제한된 입력 장치로 어둠 속에서 작동할 수 있도록 해야 합니다. 그것은 꽤 어려운 일이지만 잠재적인 결과는 엄청납니다. 즐겁게 디자인하세요!

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법