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

Presentation on theme: "Low-fi 프로토타입 숙명여자대학교 임순범."— Presentation transcript:

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

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

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

4 프로토타입의 유형 프로토타입의 구분 특징 표현형태 : 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 오류처리나 실행 성능은 제한적

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

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

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

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

9 Picture from “Prototyping for Tiny Fingers” by Rettig

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

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

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

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

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

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

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

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

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