Prototyping for Lean UX - NEXT
8 likes1,601 views
Prototyping for Lean UX - NEXT
- 1. Studio XID Exceptionally Intelligent Design Lean Prototyping: 디자인 프로세스에서 프로토타입을 어떻게 사용할까? Mar 26th, Tony Kim
- 2. studioXID all right reserved 2015copyright C Tony Kim, 김수 2 • Studio XID CEO, Captain Design • Google Interaction Designer • Naver China UX Manager • KAIST Industrial Design
- 3. studioXID all right reserved 2015copyright C 뭘 했나요? 3 2006 2007 2008 2009 2010 2011 2012 2013 2014 연구원 디자이너 대장
- 4. studioXID all right reserved 2015copyright C4 Original source: http://disney.wikia.com/wiki/Captain_America/Gallery Captain Design
- 5. 프로토타입을 왜 만들어야할까? 어떻게 만들어야할까?
- 6. 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
- 7. studioXID all right reserved 2015copyright C 다른 디자인 산출물과의 비교 7 Source: http://grahamtodman.co.uk/blog/category/sketches/ 스케치 (Sketch)
- 8. studioXID all right reserved 2015copyright C8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php 화면설계 (Wireframe) 다른 디자인 산출물과의 비교
- 9. studioXID all right reserved 2015copyright C9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/ 스토리보드 (Storyboard) 다른 디자인 산출물과의 비교
- 10. studioXID all right reserved 2015copyright C10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php 목업 (Mockup, Design) 다른 디자인 산출물과의 비교
- 12. 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
- 13. 큰 회사들은 서비스를 어떻게 디자인하고 있을까?
- 14. studioXID all right reserved 2015copyright C Waterfall UX 프로세스 14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg
- 15. studioXID all right reserved 2015copyright C Lean UX 프로세스 15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/
- 16. 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/
- 17. 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/
- 18. studioXID all right reserved 2015copyright C 우리는 모두 Lean으로 간다! 18 Lean Waterfall Source: Result from 1:1 interviews on June, July in 2014
- 19. studioXID all right reserved 2015copyright C Lean UX에서 산출물 19 Source: Result from 1:1 interviews on June, July in 2014 “우리는 화면설계를 하지 않아요”
- 20. studioXID all right reserved 2015copyright C 디자인 산출물에 대한 오너쉽 20 제품컨셉정의 기능정의 사용자 시나리오 화면설계 화면디자인 프로토타입 PM Designer 기획자, UX 연구원 UI 디자이너
- 21. studioXID all right reserved 2015copyright C 구글의 디자인 산출물 21 Sketch (Lo-Fi) Mockup (Hi-Fi) Prototype (Hi-Fi)
- 23. studioXID all right reserved 2015copyright C 구글의 디자인 산출물 23
- 24. studioXID all right reserved 2015copyright C 한입크기의 프로젝트 규모 24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
- 25. studioXID all right reserved 2015copyright C 구글의 프로토타입 • 한입크기 기능만 만든다 • 협업을 지원할 수 있어야 한다 • 커뮤니케이션을 위한 수단 • 다른 직군과의 대화, 내부 보고 • 사용자로부터의 피드백 25
- 26. 프로토타이핑 꼭 해야할까요?
- 27. 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
- 30. 마이크로인터랙션 = 차별화 요소 Facebook Paper
- 31. studioXID all right reserved 2015copyright C 2차원 공간의 한계 31 Source: Wireframe for Naver Japanese dictionary handwriting feature
- 32. studioXID all right reserved 2015copyright C 해결방안은? 프로토타입! • “86%의 디자이너들은 정적인 UI설계보다 동적인 인터랙션을 설계하는데 어려움을 느낀다.”* • 쓸만한 툴이 없을까? 32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008
- 33. studioXID all right reserved 2015copyright C 쓸만한 프로토타이핑툴 33 제한적인 인터랙션 정교한 인터랙션 센서기반 인터랙션 화면설계툴 프로토타이핑툴 협업툴
- 34. studioXID all right reserved 2015copyright C 오리가미 Origami 34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
- 35. studioXID all right reserved 2015copyright C 프레이머 Framer 35 Source: http://framerjs.com/static/images/home/ss-framer.jpg
- 36. studioXID all right reserved 2015copyright C 픽세이트 Pixate 36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
- 37. 스냅 SNAP Close Beta: 2015년 4월
- 38. 프로토타이핑을 잘하려면?
- 39. studioXID all right reserved 2015copyright C 인터랙션의 분해 39 Source: http://microinteractions.com/what-is-a-microinteraction/
- 40. studioXID all right reserved 2015copyright C40 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
- 41. studioXID all right reserved 2015copyright C 부드러운 움직임: 가속도 41 Source: http://cubic-bezier.com/
- 42. 정리
- 43. studioXID all right reserved 2015copyright C 프로토타이핑을 잘하려면… • 한입 크기로 만들자. • 문서작업은 잊어라. 그려보고 만들어보자. • 내 디자인은 내 손으로 프로토타이핑해보자. • 대충 시작해서 완벽해질때까지 계속 수정하자. • Mid-Fi와 Hi-Fi를 동시에 지원하는 툴을 하나만 고르자. (혹은, 그래픽툴 하나 + 프로토타이핑툴 하나) • 인터랙션을 분해하는 연습 43
- 44. Tony Kim | CEO, Caption Design of Studio XID | tony@studioxid.com 감사합니다. Q & A