인터랙티브 프로토타입 2012년 1학기 숙명여자대학교 임순범

교재 NHN Design Studio Univ. of Washington, James Landay 교수 홈페이지 UI Design 강좌 홈페이지  http://www.cs.washington.edu/education/courses/440/08au/ NHN Design Studio http://dev.naver.com/projects/dstudio

Low-fi 프로토타입의 문제점 현실감이 부족한 모습 실감있는 입출력 재현에 부족 사용자가 UI 평가에 어려운 부분 종이에 그린 그림으로 화면의 실제 모습을 연상하기 어렵다 손 조작성 부족: 인간공학 측면에서 종이와 타겟 장치는 다르다. 실감있는 입출력 재현에 부족 인터랙티브 피드백이 부족 마우스 조작 재현 어려움, “컴퓨터”는 많은 수의 종이로 조작 늦은 반응 : 실시간 컴퓨팅은 거의 불가능 시간에 대한 정확한 측정은 불가능 시뮬레이션 곤란: 하이라이트, 드래깅, 다이나믹 위젯(팝업 등) 사용자가 UI 평가에 어려운 부분 인식하기 좋도록 잘 그리기 곤란 행위유발성(affordance) 도출 어려움

스케치 기반 UI 프로토타입 작성 도구 Outpost Denim Activity Designer Topiary Suede

Hi-fi 프로토타입 필요성 drag & drop 프로토타입 도구가 적당 아이디어에 대해 사용자 테스트와 관찰은 반드시 필요 페이퍼 목업으로는 불충분 : 드래깅? 인터페이스의 실감성 부족 지금 시점에서 최종 앱을 개발한다면 손해 UI에서의 변경은 코드 개발에서 막대한 변경 및 많은 시간 소요 drag & drop 프로토타입 도구가 적당 단, 디자인 평가를 여러 번 반복한 이후 프로토타입을 코딩과 분리 프로토타입 UI 작성이 용이 : 테스트의 반영, 일관성 있는 UI 작성 다양한 전문가/사용자를 개입시키기 용이 변경 및 유지 관리가 용이 어플 개발의 신뢰성 증가 : 어플 코딩 전 도구 내에서 오류 수정

프로토타입 작성도구(역사) HyperCard Director 매킨토시, by Bill Atkinson 메타포 : 버튼 클릭 시 카드 넘김 위젯 및 도구 팔레트 제공 Director 원래 멀티미디어 저작도구 : 지금도 사용 위젯이나 콘트롤 없는 동영상/애니메이션 등 통합 화면 제작 Cast, Score, Behavior 개념 적용, 스크립트 언어 제공 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 최근 Flash 사용 증가 Overview of events in time

UI Builders Visual Basic 다양한 위젯 제공, 간단한 언어로 제작 가능 MS Visual Studio .NET, JBuilder, PowerBuilder... 다양한 위젯 제공, 기존의 프로그래밍 언어와 연동 Web Editor 나모웹에디터, Adobe Dreamweaver, FrontPage 위젯, 이미지, 이벤트 등 화면 배치 웹사이트 혹은 모바일웹 응용 개발 시 강력한 UI 개발 도구 모바일 앱 개발에도 유용

프로토타입 도구 vs. UI Builder Hi-fi 프로토타입 두 가지 유형: 프로토타입 도구 vs. UI builders 어플리케이션 내부(“insides”)는 무시

최근 사용중인 GUI 프로토타입 도구 Balsamiq Mockups creates high level mockups in a "hand drawn" style http://www.balsamiq.com/products/mockups/desktop 초기단계(Low-fidelity) 프로토타입: 아이디어 탐색에 효과 Adobe Flex, Flash Catalyst (Thermo), Fireworks CS4 prototypes based on designers work (e.g. photoshop, illustrator files) http://labs.adobe.com/technologies/flashcatalyst/ 인터랙티브(Interactive) 프로토타입: 인터랙션 정의에 효과 Axure, OmniGraffle, Visio Stencil 상세한(High-fidelity) 프로토타입에 적합

Microsoft Expression Blend, Microsoft SketchFlow specialized tool for interaction design high resolution & completed UI, rapid low resolution UI http://www.microsoft.com/expression/products/ Pencil Free plug-in to Firefox 3 and standalone application Create mockups and export to PNG images http://www.evolus.vn/Pencil/Home.html NHN Design Studio 상세한(High-fidelity) 프로토타입에 적합, 사용 간단 http://dev.naver.com/projects/dstudio