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뎁스)의 화면, 뎁스를 거슬러 올라가기 위해서는 앞에서 반속한 과정을 역순으로 진행하거나, 초기로 이동하는 화면을 클릭하면 이동이 가능하다.
*** 해당 과정을 도식화 하면 아래와 같은 표로 정의 된다.
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
'인터넷 & 모바일 > 뉴미디어디자인 & UX' 카테고리의 다른 글
(3/3) New Media User Interface의 디자인 사례 - 스마트폰 (안드로이드폰을 중심으로) (0) | 2011.01.06 |
---|---|
(1/2) New Media User Interface의 디자인 사례 - 태블릿 PC 1 (1) | 2011.01.06 |
(2/2) New Media User Interface의 디자인 사례 - 태블릿 PC 2 (0) | 2011.01.06 |
(1/3) New Media User Interface의 디자인 사례 - IPTV 1 (0) | 2011.01.06 |
(3/3) New Media User Interface의 디자인 사례 - IPTV 3 (0) | 2011.01.06 |
(1/6) New Media User Interface의 디자인 사례 - Web : 이용자에게 친절하라 1 (0) | 2011.01.06 |
(2/6) New Media User Interface의 디자인 사례 - Web : 이용자에게 친절하라 2 (0) | 2011.01.06 |
(3/6) New Media User Interface의 디자인 사례 - Web : 통일된 메시지와 UI를 제공하라 (0) | 2011.01.06 |