TV UI 디자인: 공백 작업

게시 됨: 2022-03-11

TV용 디자인은 UX 원칙에 대한 포괄적이고 훈련된 이해가 필요합니다. TV를 디자인할 때 항상 고민하는 요소 중 하나는 디자인에 여백을 사용하는 것입니다. 시장에는 공백을 적절히 활용하는 방법을 모르는(또는 의식적으로 선택하지 않는) TV 앱이 너무 많습니다. 그 결과 비즈니스 목표를 적극적으로 약화시키는 어수선한 눈꺼풀이 생깁니다.

다음은 공백이 무엇이며 TV 앱에서 공백을 사용하는 것이 비즈니스에 가장 적합한 방법에 대한 설명입니다.

여백은 우리의 친구

무엇보다 먼저…

공백이란 무엇입니까?

공백은 맨 위에 겹친 텍스트나 그래픽이 없는 빈 공간입니다.

배경 그래픽 이미지는 그 위에 아무것도 추가되지 않는 한 공백으로 간주될 수 있으므로 주의해야 합니다.

공백은
공백은 항상 흰색이 아닙니다.

빅딜이 뭐야?

왜 그렇게 단순한 것이 그러한 차이를 만드는 걸까요? 비즈니스 소유자는 종종 공백을 더 많은 콘텐츠를 홍보할 기회를 잃어 귀중한 화면 공간 낭비로 생각합니다. 그들의 목표는 사용자에게 가능한 한 많은 콘텐츠를 제공하는 것이며 어느 정도는 이해할 수 있습니다. 그러나 고객이 사용할 수 있는 콘텐츠가 너무 많으면 결정 능력이 완전히 상실되는 이른바 의사 결정 마비 에 직면하게 됩니다.

영국과 미국의 심리학자 William Edmund Hick과 Ray Hyman의 이름을 따서 명명된 Hick의 법칙 또는 Hick-Hyman 법칙은 사람이 선택할 수 있는 결과로 결정을 내리는 데 걸리는 시간을 설명합니다. 선택의 수는 대수적으로 결정 시간을 증가시킵니다.

TV 앱의 전체 개념인 CHOICE를 고려할 때 이는 실제로 큰 문제입니다. TV 쇼와 영화 썸네일의 끝없는 라이브러리를 탐색하면서 아무 것도 결정할 수 없다는 것을 얼마나 많이 발견했습니까? 내용이 별로여서가 아니다. 숨을 쉴 공간이 없기 때문입니다. 중요한 구분 기호가 없기 때문입니다. 당신의 마음은 너무 많은 옵션을 보고 닫힙니다.

디자이너에게 공백은 눈에 시각적 호흡 공간을 제공하는 페이지의 부정적인 공간입니다.

디자이너는 공백이 사용자가 보고 싶은 콘텐츠에 집중하고 흡수하는 데 도움이 된다는 것을 알고 있습니다.

미국에 기반을 둔 풀타임 프리랜서 UI 디자이너 구함

공백에 예라고 말하세요

여백은 TV 앱 디자인에서 특히 중요합니다. 왜냐하면 일반적으로 사용자는 편안하고 여유로운 경험을 즐기며 멀리서 결정을 내리려고 하기 때문입니다. 콘텐츠와 여백 사이의 적절한 균형을 제공함으로써 실제로 이 프로세스를 통해 그들을 돕습니다.

올바르게 사용하면 여백은 디자인과 사용자 경험을 변형시킬 수 있습니다. 디자인과 레이아웃은 눈을 편안하게 하고 결정을 용이하게 하기 위해 숨을 쉴 수 있는 공간이 필요합니다. 공백을 활용하면 실제로 콘텐츠 가독성과 사용자 상호 작용이 향상됩니다. 이는 시청자가 결정을 내리는 데 방해가 되는 방해 요소를 줄임으로써 달성됩니다.

Human Factors International에서 수행한 연구에 따르면 공백은 사용자 이해도를 거의 20% 증가시킵니다.

여백이 호흡 공간을 만드는 데 어떻게 도움이 되는지, 그리고 이것이 의사 결정 과정을 어떻게 변화시키는지 살펴보겠습니다.

불안을 유발하도록 설계된 것처럼 보이는 TV 인터페이스
불안을 유발하도록 설계된 것처럼 보이는 TV 인터페이스.


동시에 너무 많은 일을 하려고 하는 TV 인터페이스
동시에 너무 많은 일을 하려고 하는 TV 인터페이스.


미학적으로 잘 실행되지만 콘텐츠 사이에 공백이 없음
미학적으로 잘 실행되지만 콘텐츠 사이에 공백이 없습니다.


호흡실과의 인터페이스
호흡실과의 인터페이스.


요소 간의 균형과 계층 구조가 좋은 TV 인터페이스
요소 간의 균형과 계층 구조가 좋은 TV 인터페이스.


요소 간의 균형과 계층 구조가 좋은 TV 인터페이스
요소 간의 균형과 계층 구조가 좋은 TV 인터페이스.


저것 좀 봐?

공백은 사용자가 보고 싶은 콘텐츠에 사용자의 시선을 집중시키는 명확한 구분을 만듭니다.

Hulu는 Hulu Live 앱에서 공백을 훌륭하게 사용합니다. 기존의 포스터 아트 대신 사용된 큰 배경 이미지를 확인하세요. 몰입감 있고 보기에 아름답습니다. 이것은 사용 가능한 거대한 소매 공간을 사용하는 방법의 좋은 예입니다.

Hulu는 몰입감 있는 여백으로 당신을 끌어들입니다.
Hulu는 몰입감 넘치는 여백으로 여러분을 끌어들입니다.

여백은 인지 부하를 줄이고 의사 결정 속도를 높입니다. Fast Co Design에서 설명하는 것처럼 공백을 추가하는 것은 단순히 어수선함을 제거하는 것 이상의 역할을 합니다. 이는 다음과 같은 필수 기능을 제공합니다.

  • 이해력 향상
  • 대화형 요소 간의 관계를 명확하게 합니다.
  • 사용자의 관심을 끌고 집중

여백은 미학에 관한 것이 아니라 성공적인 사용자 인터페이스의 핵심입니다. 시각적 여백, 레이아웃 여백, 텍스트 여백, 내용 여백에 집중하여 사용자의 이해도를 획기적으로 향상시킵니다. 이렇게 하면 강조가 추가되고 콘텐츠가 전면과 중앙에 배치됩니다. 서로 가까운 이미지는 비슷하게 나타납니다. 따라서 사용자와의 관계를 명확히 하면 사용자가 자신 있게 탐색할 수 있습니다. 이전에 들었듯이 "적을수록 좋습니다."

공백의 힘을 사용하여 디자인을 높이고 의사 결정을 돕습니다.

인지 부하를 줄이면 UI를 더 유용하게 사용할 수 있을 뿐만 아니라 사용하기 더 즐겁게 만들 수 있습니다. 공백은 사용자 경험 전반에 걸쳐 조화와 유동성을 만드는 데 도움이 됩니다.

여백의 효과적인 사용

다음은 효과적인 여백의 힘을 사용하여 사용하기 즐거운 인터페이스를 만드는 TV 앱의 몇 가지 예입니다.

이러한 TV 인터페이스를 통해 사용자는 수십 가지 선택이 아닌 하나에 집중할 수 있습니다.
이러한 TV 인터페이스를 통해 사용자는 한 번에 수십 가지 선택이 아닌 하나에 집중할 수 있습니다.

여백은 오늘날의 많은 텔레비전 디자인에서 너무 자주 간과되고 충분히 활용되지 않는 요소입니다. 콘텐츠가 TV 앱의 왕이지만, 그렇다고 해서 화면의 모든 부분을 덮어서 화면을 어지럽혀야 한다는 의미는 아닙니다. 여백은 시장의 모든 TV 앱에 적용되어야 하는 단순하지만 강력한 디자인 장치입니다. 현대적이고 매끄럽고 시각적으로 자극적이며 사용자가 시청할 콘텐츠를 결정하는 데 도움이 되는 것으로 입증되었습니다.

디자인에 공백을 사용하면 모든 크기의 화면에서 콘텐츠가 빛날 수 있습니다.
디자인에 공백을 사용하면 모든 크기의 화면에서 콘텐츠가 빛날 수 있습니다.

• • •

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

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