[제로베이스]UIUX디자인스쿨 3주차_04

Chapter 7. 프로토타입 Prototype

 

7-1 프로토타입 Prototype

프로토타입이란

출시하고 싶은 프로덕트의 초기단계모델로써 사용자가 과업수행을 할 수 있게 네비게이트 할 수 있을 정도로 만든 시제품으로 말보다 더 효과적으로 디자인의 의도를 전달한다. Lean Process에서 강조. 빨리 만들어서 빨리 테스트 해서 빨리 개선한다. 이 과정을 반복하는 게 핵심

 
1. Lo-fi prototype : No time + Early stage = Concept evaluation

장점 머리속에 있는 것을 시각적으로(촉각적으로까지) 표현, 저렴한 제작 비용, 손쉬운 수정

 
2. Hi-fi prototype : Time + (Almost) Final stage = Realistic usability

장점 인터랙션을 포함하여 실제적 사용성 평가가 가능. 현실적인 디자인 검증, 인터랙션 개발 리뷰, 시나리오 검증
* 시나리오 검증? 사용자가 실제 사용할 수 있는 옵션이 구현되어 있기 때문에 엣지케이스를 찾는 용도로도 사용
* 엣지 케이스? 대부분의 상황에서는 발생하지 않는 소수의 특정 상황 또는 사용자로써 우선순위는 낮으나 대응했을 때 어떤 반응과 효과가 있는지 고려해서 대처할 경우 사용자에게 긍정적인 경험을 주고 충성고객으로 만들 수 있는 계기가 되기도 한다.  
 

프로토타입의 제작 툴

목적에 맞게 필요한 수준의 기법을 골라서 사용해야 한다
1. Lo-fi :
- 종이, 화이트보드 : 다시 그리기가 힘들고, 업데이트가 어렵다는 단점이 있다. 공유와 아카이빙 관점에서는 디지털화하는 작업이 필요하기 때문에 번거로움
-  파워포인트 : 없는 사람이 없고 쉬운 공유, 스탠실을 통한 빠른 제작 / 제한적 인터랙션, 많은 페이지의  업데이트의 어려움
* 스탠실? 플라스틱이나 쇠같은 것에 반복해서 그리고 싶은 모양의 틀을 만들어서 계속 채색하거나 스케치하는 기법. UI에 필요한 요소들을 미리 저장하고 불러올 수 있다는 의미에서 쓰인 것 같다. 
-  발사믹 : 아주 쉬운 사용, 빠른 제작 시간, 쉬운 공유 / 제한적 인터랙션, 컨셉 스케치 느낌이어서 현실감이 떨어진다. 
2. Hi-fi :
- 인비전 : 라이브러리 등록, 직관적 사용, 화면단위 피드백 수집 / 제한적 인터랙션, 디자인 기능 부족
- 피그마 : 직관적 사용, 스케치 파일 임포트 가능, 다양한 인터랙션 지원, 화면 단위 피드백 수집 / 긴 시나리오는 제작 관리가 어려움
- 프래이머 : CLI(Command Line Interface) 지원, 높은 자유도, 넓은 호환성(Facebook, Pop, Native, Uikit, Rebound. etc.), 커피 스크립트 / 커피 스크립트(자바스크립트 같은 코딩 언어)
* CLI가 뭐야? 글자를 입력해서 명령을 내리는 방식. 아....Command Line Interface....ㅎㅎ
 

7-2 프로토타입 제작

프로토타입 제작 프로세스

 
1. 제작 목적 정하기 
 

내부 디자인 공유 
- 효과적인 디자인 공유- 개발 리뷰- 이해관계자 리뷰(요구사항 검증)
테스트 또는 외부 공유 
- 사용자 테스트- 사용성 평가- 고객 또는 외부 팀에 공유

 
2. 제작 범위 정하기 시나리오를 바탕으로 제작 Based on Target use cases

 

3. 제작 툴 정하기 

출처 제로베이스 강의

 

3. 프로토타입 만들기 어느 화면에서 무엇을 통해 어디로 이동하는지, 이동 시 어떤 화면 전환 효과가 있는지. 이전화면으로 이동하는 방법이나 표시되어야 하는 콘텐츠는 무엇인지
 
4. 프로토타입 공유하기
 
5. 피드백 수집
 

Side note 프로토타입을 통해 사용자 테스트, 개선사항 도출, 다양한 피드백 수집 
프로토타입을 만들기가 쉽지는 않다. 이 단계를 생략하고 개발까지 가서 시험을 하다가 오류를 발견하면 개발까지 다시해야 할 수 있다. 상황에 따라 어떤 기법을 쓸지 정해서 미리 만들고 테스트하는 게 안전하다.
 

7-3  MVP(Minumum Viable Product)

MVP란 최소한의 노력을 들여서 최대한 유의미한 사용자 피드백을 얻기 위한 최소한의 제품 = 최소 기능 제품

출처 제로베이스 강의

출처 제로베이스 강의

기능적인 면을 약간 다듬은 수준에서 만들어야지? No
기능적인 면부터, 사용성, 만족도, 즐거움까지 포괄하도록 제작 Yes
 

MVP Design Process

프로덕트 또는 서비스 제작 > 사용자 반응 측정 > 사용자에 대해 학습 > 기존 방식을 보존 / 아예 다른 방향으로 전환 의사결정 > 아이디어 도출 > 프로덕트 또는 서비스 제작의 과정을 반복
 
조사 목적 및 범위 정의(우선순위) > MVP 제작(프로토타입) > 체크리스트 작성 > 테스터 기준 정의(Screening guide) > 테스터 모집 > 테스트 실행 > 리뷰..?생각 공유 > 결과분석 > 제품 개선 또는 Pivot(디자인 컨센부터 다시 시작)...
* 체크리스트가 중요한 이유 : 사용자에게 물어볼 질문지, 우리관점에서 꼭 확인해야하는 체크리스트 / 복수의 모더레이터가 있을 예정인데 사람마다 관찰하는 부분과 질문이 다르면 대답도 다르게 나오기 때문에 데이터 분석(우선순위, 문제점 도출 등을 위한 비교)이 어렵다. 

 
1. MVP step 1. 핵심 기능 정의 
핵심 기능에 따라 제작 범위 정하기 
2. MVP step 2. 제품 개발
Lo-fi 또는 Hi-fi 프로토타입 제작 / 데모 비디오나 컨셉 시나리오만으로도 가능
3. MVP step 3. 검증, 인사이트 도출
Semi-Structured Qualitative Interviews : In-depth interview, FGI, Concept studies, Desirability studies(Niether Ethnotraphy area nor Usability studies area_Nature-Laboratory)
 
Best practice - Dropbox
환경 분석 및 문제 정의 > 컨셉 정의 및 데모 비디오 공유 > MVP 데모 비디오 공유를 통해 배운 것 > 만족스러운 사용경험을 통한 유저 증가