본문 바로가기

[UX] 독후감

User-Centered Interaction Design Patterns for Interactive Digital Television Applications (가이드라인 부분)




책 소개

When a new technology – such as interactive digital television – is introduced to a wider audience, ease of use is often critical to success. By focusing on these usability issues with the aim of supporting user acceptance for interactive TV, Tibor Kunert provides clear guidelines for designing the user interfaces on interactive TV applications.

This guidance is presented in the form of design patterns, and a new approach is proposed that helps designers and developers to explore design alternatives and to evaluate the trade-offs that need to be made in order to maximise usability.

The 42 design patterns containing 185 guidelines provide comprehensive and empirically-validated guidance for designing interactive TV user interfaces. A pattern language is developed which can be used for designing specific applications, for enduring usability, and for defining corporate style guidelines and developing application templates that help streamline the process of production.




이 책은 인터랙티브 텔레비전 어플리케이션 디자인 패턴에 관한 책입니다. 인터랙티브 디자인 가이드라인을 수집하고, 대규모의 실험을 전개하였습니다. 185개의 인터랙티브 TV의 유저인터페이스 가이드라인을 포함한 42개의 디자인 패턴을 도출하였다고 하네요. 거의 인터랙티브 TV 가이드라인 백서라고 보시면 될듯 싶습니다.


영문으로 되어있는 책이라 전부 읽을 수는 없었지만 그중에서도 디자인 가이드라인 부분을 읽었습니다. 흥미롭더군요. 디자인 가이드라인은 크게 페이지 레이이아웃 이슈와, 네비게이션 이슈가 있었습니다.


인터랙티브 TV의 페이지 레이아웃 이슈는 Gawinski(2003) 의 논문과, British Broadcasting (2002), ARD Digital (2003) 의 가이드라인을 통해 도출하였습니다. 페이지 레이아웃 이슈는 다음과 같습니다.

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. TV 프로그램
TV 프로그램은 항상 보여주는 방식을 사용하고 있습니다.

2. 오버레이 어플리케이션
오버레이 어플리케이션은 Semi-transparent 방식을 사용하거나,  화면의 크기를 줄이고 L-Shape 부분에 어플리케이션을 보여주는 방식을 사용할 수 있습니다.

3. 네비게이션 요소 표현
네비게이션 요소 표현은 관습적으로 페이지 하단에 컬러키를 수평적으로 처리하고 있습니다. 컨텍스트 네비게이션 요소는 상단에 표현하고 있습니다.

4. 정보의 표현
정보의 표현은 관습적으로 TV에서는 중요한 정보는 왼쪽 상단과 오른쪽 하단에 표현하고, 덜 중요한 정보는 오른쪽 상단과 왼쪽 하단에 표현하고 있습니다. 이는 시선의 흐름이 왼쪽 상단에서 오른쪽 대각선 아래 방향으로 이동하기 때문이라고 합니다. 프로그램의 질을 높이기 위해 비디오는 왼쪽 상단으로, 비디오의 오른쪽 상단은 텍스트 서비스로 사용하고 있습니다.


인터랙티브 TV의 네비게이션 이슈는 British Broadcasting Corporation (2002), ARD Digital (2003)의 가이드라인과, Gawinski(2003), Lu(2005), Rinnenmaki(2004) 의 논문을 통해 도출하였습니다. 네비게이션 이슈는 다음과 같습니다. 

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. 어플리케이션 시작
어플리케이션 시작은 주로 빨강 컬러키를 사용하였습니다.

2. 가능한 리모콘 키
가능 리모콘 키는 숫자키, 화살표키, 컬러키, 확인/선택 키 였습니다. Rinnenmaki (2004)는 추가로 슈퍼텔레텍스트 키를 두었습니다.

3. 컬러키 사용
컬러키 사용은 다양하게 쓰고 있습니다만, 주로 빨강 컬러키를 중요한 부분에 사용하고, 파랑키는 도움말이나, 옵션에 주로 사용하였습니다. 녹색, 노랑은 부가적인 부분에 주로 사용하고 있었습니다.

4. 화살표 키 사용
화살표 키 사용은 주로 콘텐츠 네비게이션으로 사용하였습니다.

5. 확인 / 선택 키 사용
확인 선택 키는 하이라이트된 옵션을 선택하는데 사용하였습니다.

6. 숫자 키 사용
숫자 키는 10개 아이템보다 적은 메뉴 아이템을 선택할때 사용하였습니다.

7. 스탠다드 TV 키 사용 (볼륨 up/down, 채널 up/down)
스탠다드 TV키는 관습적으로 사용하는 방식을 그대로 쓰고 있습니다.

8. 컬러 키 항상 그룹으로 보여주기
컬러키 항상 그룹으로 보여주는 방식을 아직 고수하고 있으나 각각의 상황에서 4개의 컬러키가 유동적으로 보여집니다.

9. 네비게이션 도움말
네비게이션 도움말은 심플한 아이콘을 이용해서 표현하기도 합니다.

10. 페이징 vs 스크롤링
사용성으로 봤을때는 스크롤링이 페이징보다 직관적입니다 .그러나 페이징 방식이 기술적으로 부담이 덜하기 때문에 아직까지는 페이징 방식을 사용하고 있습니다. 



인터랙티브 TV의 텍스트 디자인 이는 British Broadcasting Corporation (2002), ARD Digital (2003)의 가이드라인과, Gawinski(2003), Lu(2005), Rinnenmaki(2004) 의 논문을 통해 도출하였습니다. 텍스트 디자인 이슈는 다음과 같습니다. 

[이미지를 클릭하시면 큰 이미지로 보실 수 있습니다.]

1. 폰트 타입
폰트 타입은 주로 산세리프 폰트(고딕 계열)를 사용합니다. 예) Tiresias, Book, Gill Sans

2. 폰트 사이즈
최소 폰트사이즈는 18포인트 ~ 26포인트를 사용해야 합니다. (영문기준) British Broadcasting Corporation (2002)은 최적의 본문 텍스트는 24포인트(영문기준) 라고 말하고 있습니다.

3. 폰트 컬러
폰트 컬러는 주로 어두운 배경에 밝은 글씨를 써야합니다. 파랑색 배경에 흰색, 다크 블루 또는 검은 배경에 흰색이나 노랑색을 사용합니다.

4. 읽기
TV에서의 읽기는 인쇄물보다 읽기가 떨어지기때문에, 이에따라 행간을 넓혀야 합니다.

5. 트랙킹 (자간?)
30퍼센트 이상 사용해야 합니다.

6. 텍스트 길이
90단어 미만(영문기준)을 사용하여야 합니다.

7. 텍스트 구조
텍스트 구조는 여러 작은 텍스트 단위(chunk)로 묶어야 합니다.

8. 텍스트 방향
텍스트의 방향은 왼쪽 상단에서 오른쪽 하단으로의 수직선을 그려야 합니다.