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

Slides:



Advertisements
Similar presentations
CI(Continuous Integration) 이학성. C ontinuous I ntegration? 2 지속적으로 품질관리 를 적용하는 과정 개발자가 기존 코드의 수정 작업 을 시작할 때, 코드 베이스의복사본을 받아서 작업을 시작하면서 코드의 변경.
Advertisements

UX, RIA, 그리고 … Silverlight 공도소프트
Korea Virtual Payment 모바일 안전결제 (ISP) 서비스 모델 - iPhone 한국버추얼페이먼트㈜ 기술연구소
MobileWeb 시작하기. 디바이스 별 해상도 갤럭시 S : 480*800 ( 옴티머스, 갤럭시, 베가 ) 안드로이드폰 / 아이폰 3G : 320*480 아이폰 4 : 640 *960 아이패드 : 1024*768 갤럭시탭 : 1024*600.
Ⓒ sblim, 2010 강좌 소개 사용자인터페이스설계 2010 년 2 학기 숙명여자대학교 임순범 1.
.Net History. Visual Studio.Net 2002 /.Net Framework 1.0 제품의 버전 / 특징 2002 년 - Visual Studio.Net 2002 /.Net Framework 1.0 첫 통합 개발 환경 - C# 언어 등장 (C# 1.0)
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
스케치 기법 & 비디오 프로토타입 2010년 2학기 숙명여자대학교 임순범.
컴퓨터와 인터넷.
목 차 C# 언어 특징 .NET 프레임워크 C# 콘솔 프로그램 C# 윈도우 프로그램 실습 프로그래밍세미나 2.
그래픽스 및 웹 응용설계 자기소개 멀티미디어 학과 4학년 장정환.
순차, 조건, 반복 이점숙 농대 뒷편 언덕을 넘어가며 같은 문제 다르게 해결 순차, 조건, 반복 이점숙
순차, 조건, 반복 이점숙 같은 문제 다르게 해결하기 순차, 조건, 반복 이점숙
Power Java 제3장 이클립스 사용하기.
Web Service Computing and Practice_
3조 오세혁 김문환 김용현.
콘텐츠 제작 프로젝트 [교재] - OpenGL 프로그래밍 가이드, 제4판, Dave Shreiner, Mason Woo, Jackie Neider, Tom Davis 공저, 남기혁 역, 정 보문화사, [참고자료] OpenGL Programming.
데이터베이스 및 설계 금오공과대학교 컴퓨터공학부 이 이섭.
나민영 서경대학교 컴퓨터공학과 CGVR Lab 같이만들어보자 5주차 OpenCV 설정 및 기초.
강좌 소개 웹프로그래밍기초 숙명여자대학교 임순범.
소개. 소개 Silverlight, WPF, RIA, UX.... ? Silverlight, WPF, RIA, UX.... ? IT환경의 진화.
Visual Basic .NET 처음 사용하기.
FTP 프로그램 채계화 박재은 박수민.
전광판 어플 크레파스통 도상미 박아란 이민영.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
01. 팀 명 제품 소개 및 슬로건 “작품명” 2017 제 9회 창의설계경진대회 Team Information
ARP Project 조 충 호 교수님 김 세 진 조교님 조 진 형 변 익 수
Hi-fi Prototypes (Interactive Prototypes)
제 1장. 멀티미디어 시스템 개요.
인터랙티브 프로토타입 숙명여자대학교 임순범.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
멀티미디어 기본+활용 제대로 배우기.
Wireless Java Programming
10장 컴퓨터 기반 데이터 획득 응용 프로그램 LabVIEW 사용법
엔터테인먼트학과 오광 조장 : 이아름 조원 : 김우람 최영은
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
지도교수 : 이상훈교수님 학과 : 컴퓨터시뮬레이션 학번 : 이름 : 진선미
15차시_스마트 애플리케이션 기획 스마트 애플리케이션 모형 제작 및 발표.
DSU Nanumi FTP - Network Programming 염대영
인터랙티브 프로토타입 숙명여자대학교 임순범.
Lab 1 Guide: 교재 2장 DrawX ( 쪽)
Mobile braille system for the blind
웹디자인
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.
LabVIEW WiznTec 주임 박명대 1.
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
UX 기반 소프트웨어 및 디지털콘텐츠 UI 설계
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
Software Engineering Project
Kangwon National Univ. | Computer Science
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
Low-fi 프로토타입 숙명여자대학교 임순범.
Self Introduction Template PowerPoint
모션 캡쳐와 3D-MAX를 활용한 컴퓨터 애니메이션
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
Low-fi 프로토타입 숙명여자대학교 임순범.
2D 게임프로그래밍 프로젝트 발 록 런 김대호.
기초C언어 제2주 실습 프로그래밍의 개념, 프로그램 작성 과정 컴퓨터시뮬레이션학과 2016년 봄학기 담당교수 : 이형원
멀티미디어시스템 제 5 장. 멀티미디어 데이터베이스 개념 IT응용시스템공학과 김 형 진 교수.
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
원도우 네트워크 프로그래밍 (TCP/IP 소켓 프로그래밍)
멀티미디어 활용 -플래시 CS3 류 정 남.
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
강좌 소개 멀티미디어의 이해 2010년 1학기 숙명여자대학교 임순범.
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
인터랙티브 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Low-fi 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
실습#5 인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.
Presentation transcript:

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

교재 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