Low-fi 프로토타입 2012년 1학기 숙명여자대학교 임순범.

Slides:



Advertisements
Similar presentations
을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
Advertisements

Ⓒ sblim, 2010 강좌 소개 사용자인터페이스설계 2010 년 2 학기 숙명여자대학교 임순범 1.
아이튠즈 계정 생성. 1. 인터넷을 통해 설치한 아이튠즈를 실행 한 후 그림의 순서대로 선택을 합니다. 1 2.
대표자명 / 연락처 / 이메일 ( 기 창업인 경우 회사 명칭 ) 지원하려는 사업 명칭 사업계획서 작성양식.
강좌 소개 사용자인터페이스설계 2013년 1학기 숙명여자대학교 임순범.
스케치 기법 & 비디오 프로토타입 2010년 2학기 숙명여자대학교 임순범.
컴퓨터와 인터넷.
인터넷의활용.
UX 디자인을 위한 프로젝트 방법론 숙명여자대학교 임순범.
데이터베이스 및 설계 금오공과대학교 컴퓨터공학부 이 이섭.
MICE IT 프로젝트 2011년 1학기.
시스템 설계와 산업디자인 개발.
고급 웹 개발 응용 프로젝트 2010년 1학기.
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
Hi-fi Prototypes (Interactive Prototypes)
DIGITAL CAMPAIGN PROPOSAL
자료구조: CHAP 4 리스트 (3) 순천향대학교 컴퓨터공학과 하 상 호.
제 1장. 멀티미디어 시스템 개요.
인터랙티브 프로토타입 숙명여자대학교 임순범.
웹 사이트 분석과 설계 (주제 : 화면설계) 학번 : 성명 : 한형진.
엔터테인먼트학과 오광 조장 : 이아름 조원 : 김우람 최영은
소비자 감성과 사용성을 고려한 인간공학적 의자설계 및 디자인 인터페이스 개발 한양 대학교 산업공학과 김정룡 외 4명
7가지 방법 PowerPoint에서 공동 작업하는 다른 사용자와 함께 편집 작업 중인 사용자 보기
1차 프로젝트 발표 GAME ENGINE 게임 공학과 이성진.
15차시_스마트 애플리케이션 기획 스마트 애플리케이션 모형 제작 및 발표.
인터랙티브 프로토타입 숙명여자대학교 임순범.
LCD Controller Colorbar
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
인터랙티브 프로토타입 숙명여자대학교 임순범.
Mobile braille system for the blind
그래픽 모듈 편집.
웹디자인
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
AUTODESK AUTOCAD ELECTRICAL 전기제어 2D 설계 소프트웨어 표준기반 설계 생산성 도구 구조도 설계
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
데이터 베이스 DB2 관계형 데이터 모델 권준영.
판매 교육 발표자: [이름].
웹사이트 분석과 설계 (화면 설계) 학번: 성명: 박준석.
Low-fi 프로토타입 숙명여자대학교 임순범.
S-Work 2.0 DRM 신규 버전 설치 가이드 SOFTCAMP
네트워크 환경 구축과 이미지 전송 호스트/타겟 통신 직렬 통신을 이용한 이미지 전송 수퍼 데몬 BOOTP 환경 구축
XML (eXtensible Markup Language) 개요
Pop-up book 만들기 전래 동화, 문화재 소개.
ITQ 정보기술자격 국가공인 Excel 2007 Ⅱ 함수- 15회차 강사 : 박영민.
모션 캡쳐와 3D-MAX를 활용한 컴퓨터 애니메이션
Level 0 Level 1 Level 2 Level 3 공모전 후기 모음 웹 서비스 1. 웹 페이지 설계 2. 웹 서버 구현
Low-fi 프로토타입 숙명여자대학교 임순범.
창의적 공학 설계 < 사용자 중심의 공학설계 > : Creative Engineering Design
사회과 서술형 평가 문항 자료집 -중학교 일반사회 영역 -.
멀티미디어시스템 제 5 장. 멀티미디어 데이터베이스 개념 IT응용시스템공학과 김 형 진 교수.
학습내용 프로토콜 계층화 OSI 모델의 용어 및 기능 개체 서비스 접근점 (N) 프로토콜과 (N) 서비스 서비스 프리미티브
웹 사이트 분석과 설계 [디자인 리서치] 학번: 이름 : 홍지애.
ITQ 정보기술자격 국가공인 Excel 2007 Ⅱ 함수- 12회차 강사 : 박영민.
2D 게임 프로그래밍 제안서 김보명.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
UX 디자인을 위한 프로젝트 방법론 숙명여자대학교 임순범.
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
웹사이트 분석과 설계 (화면 설계) 학과:e-비즈니스 학번: 이름 :조인환.
UX디자인 프로젝트 가이드 러스웅거/챈들러, 위키북스, 2010
웹과 모바일 홈페이지의 이해와 제작 웹기획 & 제작
인터랙티브 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
6 객체.
UX 디자인을 위한 프로젝트 방법론 2012년 1학기 숙명여자대학교 임순범.
실전 프로젝트: 홈페이지 구축 시트콤 프렌즈 팬 사이트 구축하기.
웹 사이트 분석과 설계 학과 : e-biz 경영학과 2-2 학번 : 이름 : 이재섭.
이학적 검사 학번 : 이름 : 이 윤 진 담당 : 김형민 교수님.
졸업프로젝트.
Presentation transcript:

Low-fi 프로토타입 2012년 1학기 숙명여자대학교 임순범

교재 컨텍스트를 생각하는 디자인, 캐런 훌츠블랫, 인사이트, 2008 컨텍스트를 생각하는 디자인,  캐런 훌츠블랫, 인사이트, 2008 13장. 페이퍼 프로토타입 테스트하기 [p.357~380] Univ. of Washington, James Landay 교수 홈페이지 UI Design 강좌 홈페이지  http://www.cs.washington.edu/education/courses/440/08au/ 인터페이스 디자인을 위한 사용자와 태스크 분석, J. Redish, 방수원 역, 한솜미디어, 2003 13장. 인터페이스 디자인을 프로토타입으로 변환하기 [p.453~459] 더 나은 사용자 경험(UX)을 위한 인터랙션 디자인, 댄 새퍼, 2008 5장. 인터랙션 디자인의 도구 [p.150~155]

Prototypes 프로토타입이란? 왜 프로토타입인가? 프로토타입은 디자인의 구체적인 표현 다양한 UI 설계에 대한 실험 인터페이스의 한 부분에 대해 쉽게 변경가능한 초안/시뮬레이션 왜 프로토타입인가? 다양한 UI 설계에 대한 실험 구체적 : 의사소통에 글보다 효과적 빠른 시간 내에 UI 설계에 대한 피드백 수렴 비용절감 효과 : 설계/개발 도중 vs. 출시 이후 변경 비용 대안제시 및 반복설계 촉진 : 개념, 은유, 접근방법 등 대상 설계 단계에서 사용자 적극 참여 초기에 제품설계에 깊숙이 관여, 페이퍼의 경우 참여의 민주화 UI 설계가 늘 사용자 중심이 되도록 유지  반드시 사용자 평가와 사용자 아이디어 관찰

프로토타입의 유형 프로토타입의 구분 특징 표현형태 : off-line or on-line paper prototype (mock-up) computer based prototype (software) 정확도/충실도(Fidelity) : level of detail Low-fidelity prototype 상세한 부분 생략하고 예술 스케치처럼 High-fidelity prototype 최종 상품 같은 UI 모습의 프로토타입 상호작용성(Interactivity) 고정형(fixed) 프로토타입 : 비디오 클립 고정방향(fixed-path) 프로토타입 : 각 단계는 특정 행위로 시작 개방형(open) 프로토타입: 사실적, but 오류처리나 실행 성능은 제한적

대표적인 유형 Prototype 대표유형 장점 (특징) 단점 Sketch & Paper 저비용/시간, 변경 용이, 즉시 대안 작성, 개념표현/은유에 적합, 팀원 다수가 참여 일부 기능만 가능, 기술적 실현가능은 미지수, 실험 시 사람도움이 필요, 최종적으로 폐기 Low-fidelity & Non-interactive & Computer-based 드로잉 프로그램 이용, Paper 의 장단점 모두 포함 예비 스케치/초안 검토 시 적절 시간/비용/컴퓨터지식 필요, 미리 준비해야, Mid-fidelity & Computer-based Power-Point 등의 도구, 온라인 수정 가능 High-fidelity 사용자 직접 작업 가능, Low-Fi 보다 더 많은 작업/기능 가능, 최종 제품과 유사, 코딩과 연계 가능, 제품 시연으로 활용 가능 구축 비용/시간, 제작툴에 대한 지식 필요, 고객의 비현실적 기대

Low-fi 프로토타입의 필요성 기존의 방법은 너무 길다 (시간 소요) 프로토타입의 시뮬레이션 가능 스케치  (Hi-Fi) 프로토타입  평가  반복 프로토타입의 시뮬레이션 가능 스케치(프로토타입)  평가  반복 종이에 그린 스케치를 프로토타입으로 활용 Hi-fi 프로토타입의 단점/왜곡 평가자/관찰자의 인식(Perception) “완료”되었다고 가정하고 의사소통 하거나 의견 표현 예) 글꼴, 색상, 맞춤(alignment) 등에 초점을 둔 의견 시간 소요(Time) : 상세한 부분 작성에 많은 시간 소요 창의성/창작성(Creativity) 제약 : 전체 그림을 놓칠 수도

Low-fi 프로토타입 페이퍼 프로토타입 와이어프레임 프로토타입 비디오 프로토타입 모든 요소를 이동/수정 가능하도록 ⇒ 사용자 반응에 따라 즉시 수정 가능 와이어프레임 프로토타입 컴퓨터로 그려진 인터페이스, 버튼 등 기본적인 디자인 포함 비디오 프로토타입 사용자가 어떻게 시스템과 인터랙션 하는지 비디오클립으로 설명

페이퍼 프로토타입 Low-fi 스케치 & 스토리보드 페이퍼 프로토타입 작성 큰 종이에 바탕 프레임 그리기 각 화면 영역을 다른 카드(종이)에 move, change, appear/disappear하는 모든 것 사용자 조작에 반응하도록 준비, 예) 풀다운 메뉴를 미리 제작

Picture from “Prototyping for Tiny Fingers” by Rettig

비디오 프로토타입 사용자가 어떻게 시스템과 인터랙션 하는지 설명 일반적으로 고정형 프로토타입 적용 나레이션 가능 특징: 빠른 시간, 저비용으로 작성 가능 UI 디자인 아이디어 검토에 적합 일반적으로 고정형 프로토타입 적용 스케치 또는 페이퍼 프로토타입 혹은 기존 소프트웨어, 실제 상황의 이미지 등도 이용 가능 나레이션 가능 나레이션은 인터랙션의 변화에 대한 이벤트나 기타 동작을 설명 인터랙션 변화는 비디오 녹화 후 설명 없이도 이해 가능하도록 탄탄한 스토리보드가 있다면 1시간 내에 녹화 가능

비디오 프로토타입 제작 단계 사용자 및 작업분석에 대한 필드 데이터를 리뷰 사용자 시나리오를 문장으로 작성 스토리보드 개발 (비디오 녹화용 스토리보드) 각 행동/이벤트에 대해 화면 설명을 위한 주석과 함께 작성 각 스토리보드 카드에 따라 비디오 클립 녹화(Shoot) 가급적 카메라 편집은 지양 - 스토리보드 순서에 따라 녹화 비디오 클립의 구분은 타이틀 카드 사용 Image from Beaudouin-Lafon & Mackay

와이어프레임 프로토타입 와이어프레임 [새퍼, p.150~155] 제품의 구성, 정보체계, 기능, 컨텐츠를 담은 문서들의 모음 제품의 청사진 : 제품 기능의 정의 문서 + 한 장짜리 디자인 시안 와이어프레임의 구성 영역: 와이어프레임, 주석, 메타정보 주석: 와이어프레임에서 모호한 내용을 짧게 설명 컨트롤(버튼, 링크)의 반응, 조건적 아이템(비활성 메뉴 등), 제약조건 등 메타정보: 설계자 이름, 제작/수정 날짜, 버전 숫자, 관련 문서, 남은 문제 등

페이퍼 프로토타입 개발 프로세스 준비하기 구축하기 평가 및 수정 [캐런, pp.357~379] 반복 회차 계획 데이터와 공간 준비 구축하기 구성요소를 정의하기 위한 스토리보드 워킹 브레인스토밍 & UI 콘셉트 정의 모든 UI 공유 및 구축하기 평가 및 수정 사용자평가 사용자 피드백에 근거하여 다음 프로토타입 구축

1) 준비하기 반복 회차 계획하기 데이터와 공간 준비 예시) 3회차, 2회차  첫번째 프로토타입은 종이에 구축해야 3회차 계획 2회차 계획 손으로 그린 대략적인 페이퍼 프로토타입 대략적인 페이퍼 프로토타입 약간 개선된 대략적인 더 정리된 와이어프레임 정리된 와이어프레임 반복 회차 계획하기 예시) 3회차, 2회차  첫번째 프로토타입은 종이에 구축해야 “페이퍼 목업 인터뷰 = 시스템 테스트”라는 의미 사용자를 디자인 구조에만 집중. 레이아웃은 중요한 요소가 아님 시각 디자인을 완성하지 않은 채 시작 데이터와 공간 준비 적합한 재료 선택 배경용 보드지, 화면 및 큰 대화창 용 일반 크기 종이 포함시킬 콘텐츠 출력물 다양한 종류의 포스트잇, 버튼용 스티커 테이프, 수정액, 네임펜, 색상펜, 가위 등등 ^준비물^ 바탕 용지 - 두껍고 흰색 A3크기 인덱스 카드용지 - A5 또는 그 절반 포스트잇 테이프, 풀, 수정테이프 펜, 마커 가위, 칼 등

2) 구축하기 구성요소를 정의할 스토리보드 워킹하기 필요한 기능의 추상화 간단한 UI 작성 최종 검토사항 핵심 구성요소와 기능을 정의하면서 스토리보드 워킹 구성요소 특성 목록, 스토리보드에서 추출한 필요기능 간단한 UI 작성 동일한 구성요소가 여러 스토리보드에서 재사용됨을 고려 초기 레이아웃을 포함하는 UI 구성요소 세트 확보 인터페이스 디자인이 아니라, UI 디자인을 위한 ‘노트’ 또는 ‘작업지시’ 최종 검토사항 일관된 직무 또는 역할을 지원하는가? 너무 많지 않나? 연결은 분명? 목적을 명확히 지원? 너무 복잡? 기능 단순하게? 스토리보드에 있었나? 데이터 없이 추가?

브레인스토밍 & UI 구성요소 정의 대략적인 UI 콘셉트 개발 UI 디자인시 유의사항 구성요소 표현에 대한 브레인스토밍, 스케치해서 모두 참여 가능하도록 여러가지 대안 개발, 장단점 검토, 단점에 대해 브레인스토밍 대안중 하나 선택, UI를 ‘플립챠트’에 스케치 프로토타입 구성요소를 시범 작업으로 워킹 확인 구성요소 배치를 위한 대략적인 아이디어만 필요 1차 페이퍼 프로토타입 디자인은 하루 이내 (몇 시간 정도) 아이디어에 많은 추가 지양 ⇒ 디자인 완전 변경이 흔하다

모든 UI 공유 및 구축하기 규모가 큰 개발팀 프로토타입 구축 가이드라인 하위 팀간에 디자인 구성요소 합의 핵심 테스트 이슈 정의 프로토타입 구축 가이드라인 인터페이스의 모든 부분이 움직일 수 있는지? 주요 UI 구성요소에 링크 작성 (수동 or 자동) 시각적으로 숨겨진 기능은 포함하지 않도록 사례 또는 콘텐츠를 포함하되 지울 수 있도록 정보 콘텐츠를 포함 (사용자 테스트시 유용) 새로운 콘텐츠를 촉진하는 영역 마련

평가 및 수정 사용자평가 다음 차례 프로토타입 구축 사용자 피드백에 근거하여 다음 프로토타입 구축 와이어프레임 드로잉으로 전환 다음 인터뷰에서 확인할 디자인 부분 강조 다음 차례 프로토타입 구축 와이어프레임 드로잉으로 전환 UI 요소의 배치, 합리적인 상대 크기 부분 사이의 경계는 단순한 선, 단순 음영 사용, 서체/색은 무시 위치는 미정으로, 미학적 호소력 최소화 기능과 콘텐츠를 강화하는 단순한 시각 디자인 작동하는 프로토타입 활용 온라인, High-Fidelity 웹 페이지 디자인 활용 최종 인터랙션 디자인과 시각 디자인으로 이동 가능