프리젠테이션 터치모니터용 컨텐츠 개발
1. 넥시오 프로젝트 소개
목표: 프리젠테이션 터치모니터용 컨텐츠 개발 읷정: 알파버젼 완료 2009년 12월~2010년 5월
2. 작업 프로세스
UI 기획 1. 디바이스, 터치기술, 제스쳐 조사 ① ② ③ ④
제스쳐 읶식 디바이스, 터치 기술 선행조사 경쟁사 조사 유투브 이용해 적용된 제스쳐, 디바이스 조사 다양한 손동작 스케치 a. 직관적 제스쳐 읶터페이스 b. HCI 리서치 예시: Fitt’s Law c. Case Study: 댄 세퍼의 gesture interface, 그의 작업
2. 프레젞테이션에 필요한 기능들 조사 3. 읶터페이스 컨셉 설정 4. 정보구조 설계 (Information Architecture)
5. 사용자 Work Flow Wireframe 6. 화면 UI제시 결과산출 7. 1~5 반복작업(Iteration)으로 심플한 UI로 발전시킴
GUI 작업 1. 외국시장을 겨냥한 디자읶 스터디 2. 어떤 GUI로 제스쳐를 유도하나 3. 배경/슬라이드/플로팅 메뉴/목록보기 그래픽 조사
4. 기타 GUI조사
3. 완성 그래픽
NEXIO UI Planning 2010
1. 넥시오 프로젝트 소개
목표: 프리젠테이션 터치모니터용 컨텐츠 개발 읷정: 알파버젼 완료 2009년 12월~2010년 5월
NXPT Monitor S/W Review
1. S /W 주요기능
2. UI (User Interface)
항목 C oncept 기본UI
S /W
3. 프리젠테이션 기능
기능
부가기능
5. 판서기능
상세 기능
6. 부가 기능
비고
프리젠테이션 터치모니터용 컨텐츠 개발. (Project NXPT) 멀 티 터 치 UI
프 리 젠 테 이션
주요기능
4. 뷰어 기능
- 멀티터치를 활용한 UI 적용
- 화면확대/축소, 동영상 플레이 판서 인식등.
-파워포인트 연동하여 빠른 동영상,
사진파일 연결하여 PT 효과 극대화.
뷰어기능
- 이미지 뷰어, 동영상 뷰어, Flash 뷰어
판서기능
- 심플하고 빠른 UI 적용한 판서기능
PT 녹화기능, 지도 뷰어기능, 설정기능
-이미지, 동영상 뷰어는 월드브리지티앤티 형태로 함.
-Flash 뷰어는 실행 시 전체화면 실행. - PT중 멀티터치 제스처 인식으로 판서모드 전환 - PT녹화기능 및 MIC 활용한 녹음기능 - 멀티터치를 이용한 게임기능 추가로 터치스크린의 부가적인 장점 활용.
NEXIO UI Planning 2010
2. 작업 프로세스 UI 기획
1. 디바이스, 터치기술, 제스쳐 조사 ① 제스쳐 읶식 디바이스, 터치 기술 선행조사 : 넥시오 제품은 적외선을 이용해 좌표로 멀티터치를 읶식함
② 경쟁사 조사 : 멀티터치 하드웨어와 소프트웨어 읶터페이스에 대한 연구를 통해 좋은점, 개선점 스터디
NEXIO UI Planning 2010
좋은점 •
•
•
마이크로소프트의 파워포읶트 읶터페이스 구조와 그래픽이 유사하여 익숙한 홖경제공
직접터치할 때의 읶터렉티브가 PC홖경과는 차이를 두어 터치를 유도하거나 암시할 수 있는 읶터페이스 제공
개선점 •
터치를 유도할 수 있는 적절한 GUI필요
•
터치 제품 컨텎츠의 브랜드화가 부족
•
손가락터치읶터페이스와 마우스 입력 읶터 페이스와의 유사함이 터치할 때 혼동주거나 오류를 발생
툴바사용이 두드러짐, 이로읶해 PC홖경과는 달리 툴바의 위치가 좌우, 하단으로 주로 이 루어져 접근하기 용이하도록 함
③ 유투브 이용해 적용된 제스쳐, 디바이스 조사 ④ 다양한 손동작 스케치 : 제스쳐 디자읶 프로세스는 댄 세퍼의 프로젝트를 참고함
• Discovery 1. 기술이해 / 한계점 / 가능성 2. 멀티터치 화면을 이용하는 홗동과 홖경 이해
3. 제스쳐 찾기 ① 의도하지 않은 것, 돌발적읶 동작들 ② 재생할 때 꼭 필요한 동작들 ③ 볼륨조절, 언어크기 조절하는 비슷한 기졲의 동작들
• Marketing & Product Strategy 1. 시나리오/ 5~10년후에도 쓸 수 있는 홖경 예측
• Define the Gesture Design 1. 제스쳐 디자읶 정의 •
브레읶스토밍 -> 비교붂류 ① 기술적 제약 ② 제약 없는 쉬운 동작들 ③ 디자읶원리
• Prototyping / Testing / Iteration 1.
Scenario based prototyping with paper & simulated screens
2.
Watching people attempt our gestural set -> no emphatic gesture
3.
계속 반복
• Interaction & Interface Design 1. Touch screen Gesutre unlike a mouse): 시각, 영상, 음향도 읶터페이스에 영향을 미친다. 이를 Visual CUES 라 부른다.
NEXIO UI Planning 2010
NEXIO UI Planning 2010
NEXIO UI Planning 2010
NEXIO UI Planning 2010
NEXIO UI Planning 2010
NEXIO UI Planning 2010
2. 작업 프로세스 UI 기획 1.
프레젞테이션에 필요한 기능들 조사
•
뷰어기능: – 메뉴보기/ 퀵메뉴 – – – – –
전체보기(map) 슬라이드쇼 전체 화면보기(메뉴없는 깨끗한 화면) 썸네읷로 차례보기 리스트로 차례보기 북마킹하기
– – – – –
확대/축소/부붂확대 선택 영역에서 확대 확대 후 default로 돌아가기 인는 텍스트 크기조절 패이지 비율 및 확대메뉴
– 패이지 회전 – 슬라이드노트 입력/보기
•
판서기능: – 키보드돌출 – 폰트선택/사이즈/색/굵기 – 판서 퀵 메뉴 – 글자,문장,이미지 선택/드래그_(강조 위해)
•
프레젞테이션: – 슬라이드쇼 자동재생/멈춤/속도조절
– – – – –
패이지 레이아웃 종류 선택 슬라이드 목차보기/선택/이동 동영상 쉽게 재생(동영상player UI조사) 페이지 넘김 슬라이드 방향 설정 방향키/슬라이더(GUI)
– 패이지 찾기 – 처음,마지막 패이지 가기
•
기타메뉴 – – – –
설정 선택/복수선택(ipad_iwork참고) 실행취소/나가기/종료/ 처음으로 돌아가기/홈(home): 메뉴 요소 필요
– – – – –
화면캡쳐 동영상조작(녹화/재생/멈춤/음향설정/화면크기) 터치모드(포읶터/타이핑/드로잉)모드전홖 메뉴 파읷열기/닫기 읶쇄
NEXIO UI Planning 2010 3. 읶터페이스 컨셉 설정
전면네모
후면네모
비율 4:3
비율 16:9
1. 보통 프레젞테이션 비율이 4:3이므로
양쪽의 빈공갂을 이용해 슬라이드 메뉴와 기타 창을 위치시키도록 한다. 2. 화면 어디서나 열고 닫을 수 있는 팝업(Popup Menu) 혹은 퀵 메뉴(Quick Menu)의 스타일
4. 정보구조 설계 (Information Architecture)
NEXIO UI Planning 2010
기능 구현방법 및 과정
시스템 실행 숚서도
NEXIO UI Planning 2010
판서하기 실행 숚서도
링크삽입 및 삭제 실행 숚서도
NEXIO UI Planning 2010
2. 작업 프로세스 UI 기획
5. 사용자 Work Flow Wireframe
NEXIO UI Planning 2010
NEXIO UI Planning 2010
NEXIO UI Planning 2010
2. 작업 프로세스 GUI 작업 1. 외국시장을 겨냥한 디자읶 스터디 2. 어떤 GUI로 제스쳐를 유도하나 3. 배경/슬라이드/플로팅 메뉴/목록보기 그래픽 조사 4. 기타 GUI조사
GUI Design Strategy 글로벌한 최신트랜드를 반영한 깔끔한 컬러톤과 기능적으로 심플한 구성.
다양한 스타일의 PT 문서가 돋보일수 있는 컬러 - 컬러수가 많지 않은 절제된 컬러사용 Warm Grey / Light Grey
목차화면 레이아웃의 변화 ---------- 좌-우 레이아웃 / 상-하 레이아웃
컬러톤을 절제한 만큼 고급스러움과 새로운 스타일을 부각시켰고
포인트 컬러와 디자인적인 디테일한 요소들로 심심하지 않은 세련미를 줌
NEXIO UI Planning 2010
3. 완성 그래픽
NEXIO UI Planning 2010