Page 1

프리젠테이션 터치모니터용 컨텐츠 개발

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

NEXIO_UI_Planning_Process_2010  

NEXIO_UI_Planning_Process_2010