Downloaded 125 times
![애니메이션
【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운](https://image.slidesharecdn.com/wwc201420141119-141125095122-conversion-gate02/75/2014-11-19-33-2048.jpg)
Uploaded bykeesung kim
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일 시대의 프로토타이핑. 말그대로 모바일 시대에서 프로토타이핑의 역할과 기회에 대한 정리입니다. :) 1. 모바일 프로토타이핑의 중요성 프로세스의 변화 인터랙션의 차이 2. 적합한 프로토타이핑 도구의 선택 Time based Flow Design State based Interaction Design
More Related Content
![[Crevate] 2013 London Design Festival Report](https://cdn.slidesharecdn.com/ss_thumbnails/crevate2013londondesignfestivalreport-140103010426-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Design dive] eyecan발표(web)](https://cdn.slidesharecdn.com/ss_thumbnails/designdiveeyecanweb-120727111203-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Nux]13 nux](https://cdn.slidesharecdn.com/ss_thumbnails/nux13nux-121212041424-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Nux]08 paper](https://cdn.slidesharecdn.com/ss_thumbnails/nux08paper-121113201958-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
- 1. 다음카카오 콘텐츠UX파트 김기성 웹월드컨퍼런스 2014 MOBILE PROTOTYPING DESIGN
- 3. 모바일 앱의 새로운신호탄 스토리카드 레이어+레이어 백버튼 리프레쉬 트랜지션 애니메이션
- 4. 인터랙션 디자인 도구 For easier interactive design prototyping
- 5.
- 7. Not only doesQC make working with engineers much easier, it’s also incredibly effective at telling the story of a design. - Julie Zhuo, Product design director
- 8.
- 9.
- 10. 1. 프로세스의 변화 2. 인터랙션의 차이
- 11. 1. 프로세스의 변화 All the best ideas come out of the process, they come out of the work itself. - chuck close
- 12. WATERFALL Time Analysis Design Implementation Test Scope
- 13. ITERATIVE Time Scope Analysis Design Implementation Test Analysis Design Implementation Test Analysis Design Implementation Test
- 14.
- 15. 모바일 디자인 프로세스 Vertical Small Group Collaborative 1 Team MVP …
- 16. 모바일 디자인 프로세스 Fast Prototyping, Less Document
- 17.
- 18. XP & LEANUX Analysis Design Implementation Test = Assumption Design Implementation IPM Test 2 weeks 2 weeks
- 19. Assumption Design Implementation IPM Test 2 weeks Assumption (Initial Understanding, Assumption) IPM (Iteration Planning Meeting) Design (Ideation, Sketch, MVP, Prototyping) Implementation (coding) Test (Experiment, Feedback and Research)
- 20. LESS DELIVERABLES MOREVISUALIZATION
- 21. LESS DELIVERABLES MOREVISUALIZATION
- 22. 2. 인터랙션의 차이 Conveying a sense of kinetic realism is going to be a key differentiator in next generation apps. - Mike Stern (Apple’s iOS7 Tech Talk)
- 23. NUI Natural UserInterface Natural User Interface
- 25. Moving Mouse in-air sliding mouse on table Move mouse on table Mouse replaced on table Button is depressed Out of Range Tracking Engaged Mouse lifted from table Button is released
- 26. Finger Lands IdleActive Finger Lifted Finger moving in air Finger moving on Device
- 27. CLICK-thru Left Click Right Click Double Click Click & Drag Hover
- 28. TOUCH-thru Tap DoubleTap Hold(Press) Flick Swipe Pinch in/out Rotate
- 29. LESS STEP MOREINTUITIVE
- 30. LESS STEP MOREINTUITIVE
- 31. 트랜지션 【명사】 1.변천, 추이, 변이, 전이; 과도기, 변하는 시기
- 33. 애니메이션 【명사】 1.[불]생기, 활기(life, spirit), 쾌활, 기운
- 37.
- 38. Prototyping is thefastest way between you and your customers. Lean UX is where prototyping shines. - Jeff Gothelf, author of ‘Lean UX’ book
- 39. 1. TIME BASED 2. STATE BASED
- 40. Assumption Design Implementation IPM Test Time based Flow Design State based Interaction Design
- 41. 1. Time Based Flow Design 프로젝트 초기에 서비스의 플로우를 그려보고 실제 서비스의 컨셉을 확인해보는 과정
- 44.
- 45.
- 49. Learning curve Widget library Transition/ Animation Effect Fidelity Device Presets Sharing Data Tracking Price note POP (iOS/And) Low X (w.sketch) Basic Low 1) Phone 2) Tablet URL + Shortcut * MAPP Editor - Free napkin proto Flinto (iOS/And) Low X (w.sketch & photoshop) Basic Mid 1) Phone 2) Tablet URL + Shortcut * PC Web Editor - $20 user/month $18 user/year Rapid Proto invision (iOS/And) Mid X (w.sketch & photoshop) Basic Mid 1) Phone 2) Tablet 3) Desktop URL + Shortcut * PC Web Editor - $25 user/month $22 user/year collaborative features 1. Time Based Flow Design > for sketch, images
- 50. 1. Time BasedFlow Design > for scenario Learning curve Widget library Transition/ Animation Effect Fidelity Device Presets Sharing Data Tracking Price note UX PIN Mid O Mid Mid 1) Phone 2) Desktop URL (Preview Mode) *PC WEB Editor Usability Testing (coming soon) $15 user/month $13.5 user/year Live Share UX Doc. Support Persona, Project Canvas, etc. justinmind Mid O Mid Mid 1) Phone 2) Tablet 3) Desktop 4) Glass URL + Shortcut *MApp Manager * PC APP Editor Usability Testing Tool (User Testing, User Zomm, etc.) $29 user/month $19 user/year Transition, Animation Testing Tool Proto.io Mid O Mid Mid 1) Phone 2) Tablet 3) Desktop 4) Wearable URL + Shortcut *MApp Manager *PC Web Editor Google Analytics $29 user/month $24 user/year Publish Option, Data Tracking Axure Mid O Low Low-Mid - URL + HTML D/L *PC APP Editor HTML based Tracking Code available $289 per license $269 per license for +5 UX Doc. Export
- 52.
- 53.
- 54.
- 55. CONS 초반 프로젝트의컨셉을 명확히 확인 필요한 경우 빠른 테스트 또한 수행가능 초반 적극적 커뮤니케이션 프로토타입을 통한 구성원 간 컨센서스 PROS 리치한 인터랙션을 보여주기엔 한계 관련 툴에서 제공하는 트랜지션과 애니메이션 수준
- 56. 2. State Based Interaction Design 서비스의 특정 장면 (Scene)에 대한 리치한 인터랙션 디자인을 만들어보고 테스트하는 과정
- 57. QC + Origami+ Avocado Facebook - Origami Apple - Quaz Composer IDEO - Avocado
- 58.
- 59.
- 60.
- 61. Learning curve Widget library Transition/ Animation Effect Fidelity Device Presets Sharing Usability Testing Price note QC + Origami/ Avocado (Mac Only) High X using Plug-in (Origami, Avocado, etc) High High Mobile based Desktop Only * Mac App Editor - Free Expandable Plug-in Pixate (PC/Mac iOS/And) Mid-High X (Test Box only) High High Mobile based Phone Only * Mac/PC Web Editor, Mac App Editor - $8.34 per user (for Solo) $16.67 per user (for Team) Rich Mobile IxD Option Framer (Mac only iOS/And) High X (New Layer width:00 heigh:00) High (unlimited) High Mobile based Desktop, Phone * Mac App Editor - $79.99 per license $49.99 per license for +100 Java/Coffee-script Knowledge 2. State Based IxD > for scene
- 62. CONS 상상 속다양한 인터랙션을 직접 구현 구현한 인터랙션을 기반으로 설득 실제 코딩 시 명확한 데이터 값 전달 빠르게 다양한 인터랙션을 테스트 PROS 전체 서비스의 플로우를 확인하기 어려움 초기 러닝커브가 높아 학습에 오랜시간이 소요 디테일한 인터랙션을 위해서는 코딩이 필요 프로토타이핑의 미세한 부분까지 논의
- 63. Assumption Design Implementation IPM Test Time based Flow Design State based Interaction Design
- 64. 프로토타이핑은.. 언어로 표현하기어려운 디자인을 명확히 전달 Making your language clear 개발 중인 서비스의 테스트와 검증 가능 Testing your service to user 제대로 만들고 있는지에 대한 지속적 확인 Building right thing
- 65. 프로토타이핑은 또한.. 올바른도구를 선택하는 것이 중요 Choosing right prototyping 반복적으로 진행하고 수정하는 것이 중요 Iterative Testing & Feedback 빠르게 만들고 또 버려질 수 있는 것이 중요 Quick & Dirty Prototype
- 66.
- 67. 1. 소규모 그룹의프로젝트 빠르게 결과물을 받아보고 적용하기 2. 스케치 수준의 설계공유 완결성 있는 설계문서 기다리지 않기 3. 빠른 프로토타이핑과 테스트 문서작업 줄이기
- 68. Assumption Design Implementation IPM Test 사례 1 Time based Flow Design
- 69. Assumption Design Implementation IPM Test 사례 2 Time based Flow Design
- 70. Assumption Design Implementation IPM Test 사례 3 State based Interaction Design
- 71. Assumption Design Implementation IPM Test 사례 4 State based Interaction Design
- 72.
- 73. 모바일, 프로토타이핑의 중요성 적합한 프로토타이핑 도구의 선택 1. 프로세스의 변화 2. 인터랙션의 차이 1. 시간 기반의 플로우D 2. 상황 기반의 IxD Identifying and Achieving ‘Good Enough’ http://www.agilebuddha.com/agile/agility-barely-good-enough/
- 74. ‘The only wayto experience an experience is to experience it.’ - Bill Moggridge, co-Founder of IDEO https://labs.ideo.com/2014/05/27/avocado/
- 75.
- 76.
- 77.
- 78. 참고자료 User StoriesApplied by Mike Cohn The LEAN STARTUP by Eric Ries LEAN UX by Jeff Gothelf http://www.uxdesigner.io/about-bensykes/process/ https://labs.ideo.com/2014/05/27/avocado/ https://medium.com/the-year-of-the-looking-glass/go-big-by-going-home-af182add5a2f https://vimeo.com/64974732 http://edward-designer.com/web/ux-design-in-agile-development/ http://agilemodeling.com/essays/barelyGoodEnough.html