Transcript
Page 1: Prototyping for Lean UX - NEXT

Studio XIDExceptionally Intelligent Design

Lean Prototyping: 디자인 프로세스에서

프로토타입을 어떻게 사용할까?Mar 26th, Tony Kim

Page 2: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Tony Kim, 김수

2

• Studio XID CEO, Captain Design

• Google Interaction Designer

• Naver ChinaUX Manager

• KAISTIndustrial Design

Page 3: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

뭘 했나요?

3

2006 2007 2008 2009 2010 2011 2012 2013 2014

연구원 디자이너 대장

Page 4: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C4

Original source: http://disney.wikia.com/wiki/Captain_America/Gallery

Captain Design

Page 5: Prototyping for Lean UX - NEXT

프로토타입을 왜 만들어야할까? 어떻게 만들어야할까?

Page 6: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

프로토타입의 종류

• 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부: Static vs. Working (Interactive)

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)

6

Page 7: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

다른 디자인 산출물과의 비교

7 Source: http://grahamtodman.co.uk/blog/category/sketches/

스케치 (Sketch)

Page 8: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php

화면설계 (Wireframe)

다른 디자인 산출물과의 비교

Page 9: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/

스토리보드 (Storyboard)

다른 디자인 산출물과의 비교

Page 10: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php

목업 (Mockup, Design)

다른 디자인 산출물과의 비교

Page 11: Prototyping for Lean UX - NEXT
Page 12: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

디자인 프로세스에서 협의의 프로토타입• 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부: Static vs. Working (Interactive)

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)

12

Page 13: Prototyping for Lean UX - NEXT

큰 회사들은 서비스를 어떻게 디자인하고 있을까?

Page 14: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Waterfall UX 프로세스

14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg

Page 15: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Lean UX 프로세스

15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/

Page 16: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Lean UX 프로세스

16 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

Page 17: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Lean vs. Waterfall

17 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/

Page 18: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

우리는 모두 Lean으로 간다!

18

Lean Waterfall

Source: Result from 1:1 interviews on June, July in 2014

Page 19: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

Lean UX에서 산출물

19 Source: Result from 1:1 interviews on June, July in 2014

“우리는 화면설계를 하지 않아요”

Page 20: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

디자인 산출물에 대한 오너쉽

20

제품컨셉정의

기능정의

사용자 시나리오

화면설계

화면디자인

프로토타입

PM

Designer

기획자, UX 연구원

UI 디자이너

Page 21: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

구글의 디자인 산출물

21

Sketch(Lo-Fi)

Mockup(Hi-Fi)

Prototype(Hi-Fi)

Page 22: Prototyping for Lean UX - NEXT
Page 23: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

구글의 디자인 산출물

23

Page 24: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

한입크기의 프로젝트 규모

24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg

Page 25: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

구글의 프로토타입

• 한입크기 기능만 만든다

• 협업을 지원할 수 있어야 한다

• 커뮤니케이션을 위한 수단

• 다른 직군과의 대화, 내부 보고

• 사용자로부터의 피드백

25

Page 26: Prototyping for Lean UX - NEXT

프로토타이핑 꼭 해야할까요?

Page 27: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

디자인 패러다임의 변화

27

Page base Interaction

Object base Interaction

Sensor aid Interaction

• By Apple • Page transition • Page level hierarchy

• By Google • Layer concept • Z-index

• By Facebook • Contextual input • Sensor signal

Page 28: Prototyping for Lean UX - NEXT

Clear

인터랙션= Selling Point

Page 29: Prototyping for Lean UX - NEXT

Facebook Paper

인터랙션= 아이덴티티

Page 30: Prototyping for Lean UX - NEXT

마이크로인터랙션= 차별화 요소

Facebook Paper

Page 31: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

2차원 공간의 한계

31 Source: Wireframe for Naver Japanese dictionary handwriting feature

Page 32: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

해결방안은? 프로토타입!

• “86%의 디자이너들은 정적인 UI설계보다 동적인 인터랙션을 설계하는데 어려움을 느낀다.”*

• 쓸만한 툴이 없을까?

32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008

Page 33: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

쓸만한 프로토타이핑툴

33

제한적인 인터랙션 정교한 인터랙션 센서기반 인터랙션

화면설계툴 프로토타이핑툴

협업툴

Page 34: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

오리가미 Origami

34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

Page 35: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

프레이머 Framer

35 Source: http://framerjs.com/static/images/home/ss-framer.jpg

Page 36: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

픽세이트 Pixate

36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

Page 37: Prototyping for Lean UX - NEXT

스냅 SNAP

Close Beta: 2015년 4월

Page 38: Prototyping for Lean UX - NEXT

프로토타이핑을 잘하려면?

Page 39: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

인터랙션의 분해

39 Source: http://microinteractions.com/what-is-a-microinteraction/

Page 40: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C40 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf

Page 41: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

부드러운 움직임: 가속도

41 Source: http://cubic-bezier.com/

Page 42: Prototyping for Lean UX - NEXT

정리

Page 43: Prototyping for Lean UX - NEXT

studioXID all right reserved 2015copyright C

프로토타이핑을 잘하려면…• 한입 크기로 만들자.

• 문서작업은 잊어라. 그려보고 만들어보자.

• 내 디자인은 내 손으로 프로토타이핑해보자.

• 대충 시작해서 완벽해질때까지 계속 수정하자.

• Mid-Fi와 Hi-Fi를 동시에 지원하는 툴을 하나만 고르자.(혹은, 그래픽툴 하나 + 프로토타이핑툴 하나)

• 인터랙션을 분해하는 연습

43

Page 44: Prototyping for Lean UX - NEXT

Tony Kim | CEO, Caption Design of Studio XID | [email protected]

감사합니다.

Q & A


Recommended