★ 솔직리뷰 ~ 여행 맛집 전시 공연

     4) 가로보기, 세로보기

     중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다. 

     다만 이 경우에는 이미지의 해상도가 큰 사이즈에 맞도록 제작되어야 하며, 때로는 두벌의 이미지를 지원한다.
     테블릿 PC의 경우에는 통상적으로 가로보기와 세로보기를 동시에 지원한다. 이 경우 동일한 서비스에서도 단순히 폭(width)을 조절하여 지원하기도 하지만 아래와 같이 가로-세로별 작은 UI의 변화를 준다.



 .













    중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다.

     다만 이 경우에는 이미지의 해상도가 큰 사이즈에 맞도록 제작되어야 하며, 때로는 두벌의 이미지를 지원한다.





 














     야후 꾸러기 서비스의 경우 가로-세로 전환시 한줄에 노출되는 콘텐츠의 개수에 변화를 주는 방식을 택하였다. 세로의 경우 한줄에 4개, 가로의 경우 5개를 적용하였는데, 이 경우 각각의 콘텐츠별 여러개의 아이콘(작은사이즈, 큰 사이즈)을 디자인해야 하는 부담이 없으며, 추후 다른 사이즈의 기기가 출시되어도 대응이 용이하다.
























     이번 예시는 오프라인 잡지를 온라인으로 전환한 경우이다. 추가적인 변환 없이 인쇄물의 레이아웃을 그데로 사용한 경우이며, 이 경우 세로의 경우에는 한 페이지를 가로의 경우에는 잡지를 펼쳐보듯 양면구성을 취하고 있다.






     5) 센서를 활용환 인터렉티비티 향상

     최근 출시된 테블릿 PC에는 중력센서가 탑제되어 디바이스의 XYZ축의 기울기를 측정할 수 있다.동화책 ‘이상한 나라의 엘리스’의 경우 디바이스의 기울기를 이용하여 아래와 같이 동적인 구성을 취하기도 한다.

개요

IP-TV는 최근 각광받기 시작한 서비스로 초고속 인터넷 망을 기반으로 셋탑박스를 이용하여 TV를 통해 동영상은 물론 게임, 검색 등의 부가서비스를 즐길 수 있는 쌍방향 뉴미디어 서비스이다.

특히 기본적으로는 컴퓨터와 유사한 구성을 취하고 있으며 (모니터=TV, PC본체=셋탑박스, 키보드+마우스=리모컨) 입력도구(리모컨)의 제한과 PC나 스마트폰등의 모바일 기기에 비하여 출력장치(TV)와 조작자간의 거리가 가장 먼 서비스이기도 하다. 또한 PC의 키보드에 비해서 리모컨은 입력에 많은 제약이 따르게 되어 이를 극복할 수 있는 UI 디자인이 요구된다.

KT의 ‘USER INTERFACE GUIDE’에서 말하는 일관되고 편리한 서비스를 시청자에게 제공하기 위한 세부사항은 아래와 같다.

① 화면은 심플하게 구성되어야 합니다.
② 서비스 진입을 위한 뎁스가 최소화되어야 합니다.
③ Key는 일관되게 사용되어야 합니다.
④ Navigation이 직관적이고 예측 가능해야 합니다.

KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE - IP-TV 단말개요(KT)


1. 입력기기(리모컨)와의 호환성과 일관성을 유지하라

     1) 고유한 키값의 위치와 색상은 통일성을 유지

     IP-TV를 이용하기 위한 리모컨의 경우 일반 리모컨과는 다르게 셋탑박스를 제어할 수 있는 기능버튼과 함께, PC의 Function 기능과 유사한 컬러버튼을 가지고 있다. 또한 리모컨이 개량되어도 이러한 기본적인 골격은 일관성을 유지하고 진행된다.




     2) 컬러키의 활용 및 적용

     IP-TV를 이용하기 위한 리모컨의 경우 일반 리모컨과는 다르게 셋탑박스를 제어할 수 있는 기능버튼과 함께, PC의 Function 기능과 유사한 컬러버튼을 가지고 있다. 또한 리모컨이 개량되어도 기본적인 골격은 일관성을 유지하고 진행된다.
KT 컬러키 정책 : KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE



     이러한 컬러키는 작은 리모컨에서 고정적으로 지정할 수 없는 다양한 기능들을 시청자가 보고 있는 화면의 성격에 맞추어 유연하게 운영이 가능하다.

     지금부터는 컬러키 적용의 몇 가지 예를 보기로 한다.



          (1) 바로보기 적용

          영화소개 또는 상품소개 화면에서 해당 영화를 바로 보거나, 상품구입 페이지로 이동하는 핫키의 역할을 수행한다.



          (2) 더이터 소팅(sorting)


          일반적인 웹페이지의 게시판의 조건별 검색(추천순, 조회순 등)기능이나 쇼핑몰 사이트에서 제품 검색시 볼 수 있는 간단한 소팅기능을 생각하면 된다. (신제품-중고제품,배송무료 등)

          아래와 같이 실시간 방송을 제공하는 900여개의 채널을 ‘전체’ ‘오픈’ ‘오디로’로 구분하여 검색의 폭을 축소할 수 있도록 제공되며, 간략하게 볼 수 있는 사이트맵 (채널안내) 기능까지 수행한다.




          (3) 북마크 등의 개인화 기능




         (4) 컬리키의 가변기능

          아래와 같이 서비스를 이용하면서 노출되는 공지사항 컬러키 (오른쪽 하단 노란색 ‘공지목록 보기’)의 경우 이용자가 노란색 컬러키를 클릭하여 공지사항 페이지로 이동하였을 경우, 해당 키의 기능은 ‘공지목록 닫기’로 기능이 전환된다.
이러한 일관된 키의 기능부여는 이용자가 간단하게 공지사항을 확인하고 키의 이동이나 추가적인 학습 없이 바로 이전 페이지로의 이동이 가능하게 지원한다.

2. TV에 맞는 네비게이션 룰(Navigation Rule)을 고려하라

     1) 현재 뎁스(depth)와 이전 뎁스를 효율적으로 배치하라

     TV를 시청하면서 이용자가 채널 검색을 시도 할 경우, 현재 시청하고 있는 화면을 최대한 보호하면서, 이용자가 원하는 목적(채널 검색 등)을 달성할 수 있도록 명확하고 깔끔한 메뉴를 제공하여야 한다. 또한 목록별로 분류된 VOD/실시간 영상 데이터를 제공하는 서비스의 성격상 트리(tree)와 폴더(Folder)형식의 구성을 취하고 있는데 이 경우 5뎁스 이상의 복잡한 구조를 가지게 된다.

     물론 전통적인 웹사이트의 경우 이용자가 메뉴를 클릭하여 하위뎁스로 이동하면 해당 뎁스(메뉴)에 맞는 페이지로 전환되는 방식이 반복되지만, IP-TV의 경우 현재 시청하고 있는 화면이 재생되는 상황에서 이용자가 원하는 최종 뎁스까지 이동하여야 한다. 또한 TV라는 성격상 원거리에서도 메뉴의 내용을 읽을 수 있는 가독성이 보장되어야 한다. 이러한 관계로 화면영역의 절반 이내에서 이동하는 가변 메뉴를 구성하여야 하는데,

이러한  UI를 적용하는 예를 보도록 하자.


① 시청하고 있는 화면에서 메뉴 버튼을 클릭할 경우, 우선 오른쪽에 1뎁스 메뉴를 출력한다.

② 이용자가 1뎁스의 메뉴를 선택하면 1뎁스의 메뉴 오른쪽으로 2뎁스의 메뉴를 출력한다.




③ 2뎁스를 선택하면 1뎁스의 메뉴가 사라지고 1뎁스의 위치에 2뎁스 메뉴가 위치하면서 기존 2뎁스의 위치에 3뎁스가 위치한다.
이러한 방식으로 이용자가 원하는 맨 마지막 뎁스까지 이동하게 된다.

④ 메뉴의 마지막 뎁스(5뎁스)의 화면, 뎁스를 거슬러 올라가기 위해서는 앞에서 반속한 과정을 역순으로 진행하거나, 초기로 이동하는 화면을 클릭하면 이동이 가능하다.

*** 해당 과정을 도식화 하면 아래와 같은 표로 정의 된다.

KT QOOK TV, USER INTERFACE GUIDE / APPLICATION GUIDE 




     2) 페이지 번호를 명확하게 표시하라

     이전단원에서 학습한 ‘제공하는 정보의 양과 위치를 명확하게 설명하라’의 예시는 웹페이지뿐만 아니라 대부분의 페이지 구성에서 적용된다. 앞에서도 말한 것과 같이 트리+폴더구조를 취하고 있는 IP-TV의 경우 최종 폴더에는 많은 양의 데이터가 존재하게 된다. 메뉴는 물론 최종 콘텐츠 페이지에서는 제공되는 콘텐츠의 수량 및 시청자가 위치한 페이지를 명확하게 표시해야 한다.


참고로 KT의 페이지 적용 원칙은 아래와 같다.

① 메뉴 목록의 경우는 ‘현재 포커스 항목의 순번 / 총 목록 수’로 표시합니다.
    이때 Page Number뒤에 ‘개’를 붙여줍니다. (예: 03/25개)
② 한 화면의 내용이 길어지는 경우는 ‘현재 페이지 수/ 총 페이지수’로 표시합니다.
    이때 Page Number뒤에 ‘개’를 붙이지 않습니다. (예: 03/06)
③ 좌우/상하 키 표시를 통해 페이지 이동 대한 가이드를 줍니다.
④ Video 컨트롤러의 건너뛰기키를 사용하여 페이지 이동에 대한 가이드를 제공할 수 있습니다.
    KT QOOK TV, USER INTERFACE GUIDE/APPLICATION GUIDE - Navigation Rule > Page Number




     3) 입력기능을 호출 할 경우 명확하게 표현하라

      IP-TV시청을 하기 위해서 때로는 검색, 유료서비스에 대한 결제, 성인인증 등의 과정이 수반되며, 이 경우 비밀번호 등의 개인정보를 입력받게 된다. 키보드가 없는 IP-TV의 경우 리모컨을 통하여 위치이동 및 정보를 입력하여야 하는 어려움이 있는데, 이용자의 편의를 위해서 아래와 같이 붉은색으로 입력이나 선택을 유도하는 커서표시 및 단계별 미션이 완료되면 다음 단계의 선택을 할 수 있도록 자동 이동이 가능한 기능을 제공한다.



참고로 KT의 비밀번호 입력 원칙은 아래와 같다.

① 입력필드에서 입력을 유도하는 커서를 표시하며, 1초에 한번씩 깜빡입니다.
② 왼쪽에서 오른쪽으로 입력되며 4개 모두 입력한 경우 입력필드의 중앙에 정렬됩니다.
③ 4자리 입력 후 포커스는 자동으로 확인버튼으로 이동합니다.
④ 입력필드 내에서 좌.우 방향키는 글자 내 포커스 이동으로 사용할 수 있습니다.
⑤ 비밀번호를 입력한 후 수정을 위해 다시 비밀번호 입력필드로 포커스를 이동해도 비밀번호는 새로고침 되지 않습니다.
    KT QOOK TV, USER INTERFACE GUIDE/APPLICATION GUIDE - Navigation Rule > Field Focus