2009 HCI 학술대회 TV 시청 환경에 적합한 위젯 가이드라인 제안 Widget Guideline for TV Environment 국립 한경대학교 산업대학원 디자인학과 위승용 feb.11.2009
Table of contents 서론 연구 배경과 목적 선행연구 위젯의 정의와 유형 TV와 PC의 차이 위젯과 TV의 디자인 가이드라인 비교 TV용 위젯 디자인 가이드라인 제안 TV용 위젯 디자인 제안 결론 향후 연구 과제 1 37
연구 배경과 목적 연구 배경과 목적 위젯은 Desktop, Mobile, 심지어 TV로 연동될 채비를 갖춤 현재 TV 환경에서는 TV용 위젯 그래픽 가이드라인이 없음 TV 시청환경에 적합한 위젯 가이드라인을 제안 연구 방법 위젯의 정의와 유형 및 사용빈도에 대해서 연구 TV와 PC 환경의 차이를 연구 위젯과 TV의 가이드라인을 분석 연구범위 국내의 40인치 HDTV를 중심으로 하였음 2 37
위젯의 정의 위젯은 웹에서 실행되는 작은 애플리케이션 이다. 힌치클리프 위젯의 사전적 의미 PC에서 웹 브라우저를 대신하는 개인화된 프로그램을 띄워주는 소프트웨어 (wikipedia) 위젯의 사례: 애플 대시보드 위젯 3 37
사용 환경에 따른 위젯의 유형 Web widget: igoogle Desktop widget: Yahoo widget Mobile widget: Anicall Haptic2 IPTV widget: MegaTV 4 37
사용 목적에 따른 위젯의 유형 Information widget Entertainment widget Mash-up widget Marketing widget 5 37
콘텐츠 유형에 따른 Top rated 위젯의 사용 빈도 대상: 야후 위젯, 구글 가젯, 애플 대시보드 위젯, 마이크로소프트 비스타 가젯 범위: Top rated 위젯 80종(각각 20종) 의 콘텐츠 유형에 따른 빈도 수를 조사 날짜: 2008년 11월 30일 기타 40% 날씨, 카운트, TV, 번역, 사진 CPU 성능, Network, 계산기, 노트 달력, 라디오, 모니터, 배터리 열차시간, 일정, 증권, 지구보기, 지도 채팅, 화면보호, 환율, SMS PC정보 7.5% 게임 7.5% 시계 15% 즐거움 8.75% 검색 12.5% 음악 8.75% 6 37
TV와 PC의 환경적 차이 환경적 차이는 목적에 따라 차이가 발생 TV의 목적: 여가, 휴식 PC의 목적: 작업, 검색 [표 2] TV와 PC의 환경적 차이 항목 사용자 수 TV 스크린을 볼 수 있는 여러 명이 동시 사용 스크린을 보는 일부 제한된 인원, 주로 혼자임 PC 자세 편안하고, 기댄 자세 똑바르고 곧은 자세 장소 거실, 침실 사무실, 공부방 태도 수동 능동 7 37
TV와 PC의 콘텐츠 차이 콘텐츠의 종류, 참여도, 커스터마이즈 [표 3] TV와 PC의 콘텐츠 차이 항목 TV PC 종류 오락 중심적 정보와 유틸리티 중심적 참여도 적음 높음 커스터마이즈 제한됨 자유로움 8 37
TV와 PC의 그래픽적 차이 해상도, 주사방식, 화면비율, 색상, 서체 [표 4] TV와 PC의 그래픽적 차이 항목 TV PC 해상도 1280 X 720 (HDTV) 720 X 480 (SDTV) 640 X 480 ~ 2048 X 1536 이상까지 다양 주사방식 Progressive / Interlace Progressive 화면비율 16:9 (HDTV) / 4:3 (SDTV) 16:9 / 4:3 색상 서체 속성 YUV 모드, 고 채도를 제외한 색상 표현가능 Light한 서체는 사용 불가 굵기는 3 pixel 이상 제한 없음 Bold한 서체와 Light한 서체 사용 가능 본문 글자 크기 18 point 이상 10 ~ 12 point 글자와 배경관계 어두운 배경에 밝은 글씨를 사용 하여야 함 밝은 배경에 어두운 글씨, 어두운 배경에 밝은 글씨 둘 다 사용 가능 9 37
TV와 PC의 인터랙션 차이 입력장치, 평균 시청거리, 네비게이션 [표 5] TV와 PC의 인터랙션 차이 항목 TV PC 평균 시청거리 2.4m ~ 3m 0.3m ~ 0.6m 입력장치 리모컨 키보드, 마우스, 터치패드, 리모컨 네비게이션 상, 하, 좌, 우 비정형 10 37
위젯과 TV의 가이드라인 비교 위젯 가이드라인 (Desktop widget) Apple dashboard 위젯 가이드라인 Microsoft vista 가젯 가이드라인 Google 가이드라인 TV 가이드라인 김원규 (2008) 이은숙 (2007) 최성실 (2003) Karyn Y, Lu (2005) Gawlinski, M (2003) HDTV에 적합한 한글 타이포그래피 가이드라인 제안 디지털 쌍방향 TV HCI 기술 인터렉티브 TV 방송에서 GUI디자인에 관한 연구 Interaction design principles for interactive television Interactive television production 11 37
TV용 위젯 콘텐츠 가이드라인 제안 사생활 보호 가족 공유 상호작용 참여 유도 단일 과제 수행 정보의 신선도 즐거움 제공 정보 제공 유용한 기능 일관적 서비스 사생활을 보호 해야 한다. 가족이 공유 할 수 있어야 한다. 사용자와 상호작용을 가능케 해야 한다. 청중을 불러들여야 한다. 하나의 위젯은 하나의 과제를 수행해야 한다. 정보는 주기적으로 바뀌어야 한다. 즐거움을 제공해야 한다. 사용자가 관심 있어 하는 정보를 제공해야 한다. 항상 유용한 기능을 제공해야 한다. 일관적인 서비스를 제공한다. 12 37
TV용 위젯 그래픽 가이드라인 제안 글자와 배경 View방식 정보의 양 서체 문단 버튼 위젯의 크기 아이콘 색상 처리 시각적 매력 그림자 처리 광고 배경의 투명도와 글자와의 대비는 40%가 좋다. 어두운 배경에 밝은 글자를 사용해야 한다. 시선을 해치지 않도록 위젯 Bar는 우측영역을 사용한다. 주요 정보만 제공하고, 더 많은 정보를 원할 경우 더 보기 항목을 제공한다. 굵기 3pixel 이상 의 고딕계열의 18point이상의 서체를 사용하여야 한다 HDTV에서는 가독성이 좋은 TTA의 공통폰트를 사용하는 것이 좋다. 라인의 수는 페이지 당 7± 2줄 정도면 적당하다. 선택할 수 있는 항목을 두드러지게 만들어야 한다. 위젯은 시청을 방해하지 않는 범위 내에서 현실적인 크기로 사용 해야 한다. 아이콘의 의미 이해가 쉬워야 한다. 고채도를 제외한 색상 을 사용한다. 표면과 설정화면의 배경을 구분해서 표현해야 한다. 시각적으로 매력이 있어야 한다. Floating 상태일 때 Drop Shadow를 강하게 처리해야 한다. 위젯 표면에 광고를 사용하면 안 된다. 13 37
TV용 위젯 인터랙션 가이드라인 제안 접근성 적은 클릭수로 메인 화면으로 도달하게 하여야 한다. 컬러키 를 활용하여 위젯에 쉽게 접근하게 한다. 인터페이스 한 화면상에서 사용자가 너무 많은 조작을 하지 않게 한다. 멘탈모델 문화적인 멘탈모델과 메타포를 적절하게 사용한다. 사운드 로딩사운드, 알림음, 경고음, 효과음, Mute, Game 사운드 등을 고려하여야 한다. 피드백 즉각적이고 일관적인 Feedback을 통해 작업을 강화하여야 한다. 속도 포커스 이동에 따른 실행 시간과 채널전환 속도를 고려하여야 한다. 애니매이션 Animation을 적절하게 사용하여야 한다. 커스터마이즈 시청자에게 Customize를 허용하여 시각적 경험을 높여야 한다. 14 37
TV용 위젯 콘텐츠 제안 시청 시간을 알려주는 위젯 가족간의 커뮤니케이션을 도와주는 위젯 채널 이동을 용이하게 하는 위젯 구매를 돕는 위젯 사생활 보호를 위한 잠금 장치 위젯 즐거움을 주는 미니 게임 위젯 15 37
TV용 위젯 그래픽 제안 watch weather music fun search timer memo lock 1 st 일러스트 작업 어두운 배경에 밝은 글자를 사용 2 nd 굵기와 색상 조정 작업 굵기 3pixel 이상의 서체를 사용 고 채도를 제외한 색상을 사용 3 rd 포토샵 작업 선택할 수 있는 항목을 두드러지게 만들어야 함 4 th 아이콘 수정 작업 아이콘의 의미 이해가 쉬워야 함 시각적으로 매력이 있어야 함 16 37
TV용 위젯 인터랙션 제안 17 37
TV용 위젯 인터랙션 제안: Widget bar watch 18 37
TV용 위젯 인터랙션 제안: Widget bar weather 19 37
TV용 위젯 인터랙션 제안: Widget bar music 20 37
TV용 위젯 인터랙션 제안: Widget bar fun 21 37
TV용 위젯 인터랙션 제안: Widget bar search 22 37
TV용 위젯 인터랙션 제안: Widget bar timer 23 37
TV용 위젯 인터랙션 제안: Widget bar note 24 37
TV용 위젯 인터랙션 제안: Widget bar lock 25 37
TV용 위젯 인터랙션 제안: Watch 26 37
TV용 위젯 인터랙션 제안: Watch setting Setting chime color never every hour OK 27 37
TV용 위젯 인터랙션 제안: Weather + 28 37
TV용 위젯 인터랙션 제안: Weather - 29 37
TV용 위젯 인터랙션 제안: Search 30 37
TV용 위젯 인터랙션 제안: Timer 01:00:00 31 37
TV용 위젯 인터랙션 제안: Timer 00:10:00 50분이 경과되었습니다. 쉬엄쉬엄 보세요. 32 37
TV용 위젯 인터랙션 제안: Note note 33 37
TV용 위젯 인터랙션 제안: Note 34 37
결론 위젯 콘텐츠 TV 시청을 도와줄 수 있는 콘텐츠, 가족이 공유할 수 있는 위젯의 도입 필요 위젯 그래픽 2.4m ~ 3m 거리에서도 잘 읽힐 수 있는 위젯의 서체와 색상, 위젯 배경의 투명도 제안 위젯 인터랙션 TV 시청이라는 주된 목적을 유지, 리모컨을 이용해서 간단히 위젯에 접근 리모컨 키 6개와 Color key를 사용하여 모든 Navigation이 가능 Left, Right, Up, Down, OK, Color key 35 37
향후 연구 과제 위젯 디자인 Development 위젯 디자인에 따른 Usability test 사용자의 Needs에 적합한 다양한 유형의 위젯 서비스 제안 36 37
Thank you! 위승용 국립한경대학교 산업대학원 디자인학과 010-2638-3639 wiseungyong@naver.com 37 37