Hi-fi Prototypes (Interactive Prototypes)

Slides:



Advertisements
Similar presentations
Korea Virtual Payment 모바일 안전결제 (ISP) 서비스 모델 - iPhone 한국버추얼페이먼트㈜ 기술연구소
Advertisements

한국클라우드서비스협회 ▶ 제키톡 서비스 - 제키톡 서비스 ∙ 안드로이드 기반의 모바일 무료 메시지, 무전기, 채팅 어플리케이션으로 국내뿐만 아니라 전세계 대상으로 서비스 제공 중 ∙ 현재 안드로이드폰을 대상으로 서비스 중이며, 아이폰을.
.Net History. Visual Studio.Net 2002 /.Net Framework 1.0 제품의 버전 / 특징 2002 년 - Visual Studio.Net 2002 /.Net Framework 1.0 첫 통합 개발 환경 - C# 언어 등장 (C# 1.0)
JSON (JavaScript Object Notation) 인공지능 연구실. Artificial Intelligence Laboratory JSON 소개  JSON( 제이슨, JavaScript Object Notation) 은, 인터넷에 서 자료를 주고받을 때 그.
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
스케치 기법 & 비디오 프로토타입 2010년 2학기 숙명여자대학교 임순범.
컴퓨터와 인터넷.
컴퓨터 운영체제의 역사 손용범.
목 차 C# 언어 특징 .NET 프레임워크 C# 콘솔 프로그램 C# 윈도우 프로그램 실습 프로그래밍세미나 2.
관광 스마트 북 발행 제안 OSMD( One Source Multi Device ).
그래픽스 및 웹 응용설계 자기소개 멀티미디어 학과 4학년 장정환.
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
Power Java 제3장 이클립스 사용하기.
.Net Web Application 2010 컴퓨터공학실험(Ⅰ)
Web Service Computing and Practice_
윤 홍 란 다이알로그(대화상자) 윤 홍 란
1장. 이것이 C 언어다.. 1장. 이것이 C 언어다. 프로그래밍 언어 1-1 C 언어의 개론적 이야기 한글, 엑셀, 게임 등의 프로그램을 만들 때 사용하는 언어 ‘컴퓨터 프로그래머’라는 사람들이 제작 C 언어(C++ 포함)를 가장 많이 사용함.
3조 오세혁 김문환 김용현.
콘텐츠 제작 프로젝트 [교재] - OpenGL 프로그래밍 가이드, 제4판, Dave Shreiner, Mason Woo, Jackie Neider, Tom Davis 공저, 남기혁 역, 정 보문화사, [참고자료] OpenGL Programming.
나민영 서경대학교 컴퓨터공학과 CGVR Lab 같이만들어보자 5주차 OpenCV 설정 및 기초.
CHAPTER 02 OpenCV 개요 PART 01 영상 처리 개요 및 OpenCV 소개.
강좌 소개 웹프로그래밍기초 숙명여자대학교 임순범.
Visual Basic .NET 처음 사용하기.
1. C++ 시작하기.
FTP 프로그램 채계화 박재은 박수민.
전광판 어플 크레파스통 도상미 박아란 이민영.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
ARP Project 조 충 호 교수님 김 세 진 조교님 조 진 형 변 익 수
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
제 1장. 멀티미디어 시스템 개요.
인터랙티브 프로토타입 숙명여자대학교 임순범.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
멀티미디어 기본+활용 제대로 배우기.
Wireless Java Programming
엔터테인먼트학과 오광 조장 : 이아름 조원 : 김우람 최영은
지도교수 : 이상훈교수님 학과 : 컴퓨터시뮬레이션 학번 : 이름 : 진선미
15차시_스마트 애플리케이션 기획 스마트 애플리케이션 모형 제작 및 발표.
인터랙티브 프로토타입 숙명여자대학교 임순범.
Toto’s diary UX개발 2011 Spring UI설계 및 평가 S-Moon 서승아 / 원지수 / 이경주
Lab 1 Guide: 교재 2장 DrawX ( 쪽)
인터랙티브 프로토타입 숙명여자대학교 임순범.
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
Mobile braille system for the blind
그래픽 모듈 편집.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
1차시: 낮과 밤이 생기는 원리 지구과학
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.
MovieStory 작성자 홍성혁 소속 전자전기컴퓨터공학부 학번
LabVIEW WiznTec 주임 박명대 1.
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
채팅프로그램 Good Day클럽 나윤영 신윤정 김시한.
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
Low-fi 프로토타입 숙명여자대학교 임순범.
학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성. 학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성.
13차시_스마트 애플리케이션 기획 스마트 미디어의 사용환경과 사용자의 특성.
한국에너지공단 효율기술실 확인서 표시가 안될 시 조치방법 .
2D 게임프로그래밍 프로젝트 발 록 런 김대호.
기초C언어 제2주 실습 프로그래밍의 개념, 프로그램 작성 과정 컴퓨터시뮬레이션학과 2016년 봄학기 담당교수 : 이형원
멀티미디어시스템 제 5 장. 멀티미디어 데이터베이스 개념 IT응용시스템공학과 김 형 진 교수.
TEXT 콘텐츠의 학습적 활용을 위한 Moodle의 사용자 중심 기능 개선 제안
멀티미디어 활용 -플래시 CS3 류 정 남.
Installation Guide.
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
인터랙티브 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Low-fi 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
플래시MX2004 디자인스쿨 Chapter 11. 플래시와 사운드.
타이머를 시작하려면 슬라이드 쇼 메뉴에서 쇼 보기를 클릭하십시오.
Presentation transcript:

Hi-fi Prototypes (Interactive Prototypes) 2010년 2학기 숙명여자대학교 임순범

Low-fi 프로토타입의 문제점 화면의 실제 모습과 연상하기 어렵다 시뮬레이션 어려운 점 실시간 컴퓨팅은 거의 불가능 “종이에 그리는 것과 타겟 장치에 그리는 것은 다르다.” 현실감이 부족한 모습 시뮬레이션 어려운 점 하이라이트, 드래깅, 다이나믹 위젯(팝업 메뉴 등) 실시간 컴퓨팅은 거의 불가능 매우 느린 컴퓨터 역할만 할 뿐 시간에 대한 정확한 측정은 불가능 손에 들고 다루기 안좋다 장치와 다른 인간공학 측면에서 종이와 타겟 장치는 다르다.

Low-fi 프로토타입의 문제점 실감있는 입출력 재현이 불가능 인터랙티브 피드백이 부족 사용자가 UI 평가에 어려운 부분 마우스 조작 재현 어려움 늦은 반응 인터랙티브 피드백이 부족 “컴퓨터”는 많은 수의 종이로 조작 사용자가 UI 평가에 어려운 부분 인식하기 좋도록 잘 그리기 곤란 행위유발성(affordance) 도출 어려움

UI 프로토타입 작성 도구 Denim Activity Designer Suede

UI 프로토타입 작성 도구 low-fi 페이퍼 프로토타입의 장점을 지원 전자적 도구의 장점을 추가 브레이스토밍 가능 아이디어를 신속히 표현, 상세 스펙을 요구하지 않음 미완성 디자인 모든 경우를 구현하지 않고, 중요한 사례만 실행되도록 구현 전자적 도구의 장점을 추가 손쉽게 개선하고(evolve), “디자인 메모리”를 지원 다른 컴퓨팅 도구로 변환이 용이 사용자 인터랙션이 가능 실제 장치에서 작동하는 것도 가능

Hi-fi 프로토타입의 필요성 아이디어에 대해 사용자 테스트와 관찰은 반드시 필요 지금 시점에서 최종 앱을 개발한다면 손해 페이퍼 목업(mock-ups)으로는 불충분 드래깅의 표현? 인터페이스의 실감성 부족 지금 시점에서 최종 앱을 개발한다면 손해 UI에서의 변경은 코드 개발에서 막대한 변경을 초래 많은 시간을 소요 drag & drop 프로토타입 도구가 적당 단, 디자인 평가를 여러 번 반복한 이후 프로토타입을 코딩과 분리

도구를 사용하는 이유 (코딩 대신) 프로토타입 UI 작성이 용이 UI 코드와 어플 코드의 분리 테스트 변경을 반영하기 쉽고 빠르다. 일관성 있는 UI 작성이 가능 다양한 전문가/사용자를 개입시키기 용이 동일한 어플에 여러 개의 UI 작성이 가능 UI 코드와 어플 코드의 분리 변경 및 유지 관리가 용이 어플 개발의 신뢰성 증가 어플 코딩 전에 도구 내에서 오류가 수정된다.

프로토타입 작성도구(역사) HyperCard 매킨토시 – by Bill Atkinson 메타포 : 버튼 클릭 시에 카드 넘김 위젯 및 도구 팔레트 제공 그리기/애니메이션은 제한 스트립트 언어 제공

Director 원래 멀티미디어 저작도구 : 지금도 사용 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 위젯이나 콘트롤 없는 동영상/애니메이션 등 통합 화면 제작 Cast, Score, Behavior 개념 적용, 스크립트 언어 제공 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 최근 Flash 사용 증가 Overview of events in time Connect events to actions Drag & drop

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

위젯(Widgets) 제공 다양한 기능 지원 빠진 것 버튼 풀다운 메뉴 스크롤바 팔레트 대화상자 윈도우즈 등 … 링크 편집 사이트맵 빠진 것 어플리케이션 내부 실행

프로토타입 도구 vs. UI Builder Hi-fi 프로토타입 두 가지 유형: 프로토타입 도구 vs. UI builders 최종 제품 : 일반적으로 UI builders 사용하는 편이 유리 멀티미디어 콘텐츠의 경우에는 프로토타입 저작도구가 유리하기도 어플리케이션 내부(“insides”)는 무시