모바일시대의프로토타이핑...
DESCRIPTION
모바일 시대의 프로토타이핑. 말그대로 모바일 시대에서 프로토타이핑의 역할과 기회에 대한 정리입니다. :) 1. 모바일 프로토타이핑의 중요성 프로세스의 변화 인터랙션의 차이 2. 적합한 프로토타이핑 도구의 선택 Time based Flow Design State based Interaction DesignTRANSCRIPT
다음카카오
콘텐츠UX파트 김기성
웹월드컨퍼런스 2014
MOBILE PROTOTYPING DESIGN
모바일 앱의 새로운 신호탄스토리카드 레이어+레이어
트랜지션 애니메이션
백버튼 리프레쉬
인터랙션 디자인 도구For easier interactive design prototyping
MOBILE PROTOTYPING DESIGN
Not only does QC make working with engineers much easier, it’s also incredibly effective at telling the story of a design.
- Julie Zhuo, Product design director
모바일, 프로토타이핑의 중요성
왜?
1. 프로세스의 변화
2. 인터랙션의 차이
1. 프로세스의 변화All the best ideas come out of the process, they come out of the work itself.- chuck close
WATERFALL
Time
Scope
Analysis
Design
Implementation
Test
ITERATIVE
Time
Scope
Analysis
Design
Implementation
Test
Analysis
Design
Implementation
Test
Analysis
Design
Implementation
Test
XP
Time
Scope
모바일 디자인 프로세스Vertical Small Group Collaborative1 TeamMVP…
모바일 디자인 프로세스Fast Prototyping, Less Document
XP
Time
Scope
XP & LEAN UX
Analysis
Design
Implementation
Test
=A
ssumption
Design
ImplementationIPM
Test
2 weeks 2 weeks
Assumption (Initial Understanding, Assumption)
IPM (Iteration Planning Meeting) Design (Ideation, Sketch, MVP, Prototyping) Implementation (coding) Test (Experiment, Feedback and Research)
Assum
ption
Design
Implementation
IPM
Test
2 weeks
LESS DELIVERABLES MORE VISUALIZATION
LESS DELIVERABLES MORE VISUALIZATION
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)
NUI Natural User InterfaceNatural User Interface
Out of
RangeTracking Engaged
Moving
Mouse
in-air
sliding
mouse
on table
Move
mouse
on table
Mouse
replaced
on table
Button is
depressed
Mouse lifted
from table
Button is
released
Finger
Lands
Finger
Lifted
Idle Active
Finger
moving
in air
Finger
moving
on Device
CLICK-thruLeft Click Right Click Double Click Click & Drag Hover
TOUCH-thruTap Double Tap Hold(Press) Flick Swipe Pinch in/out Rotate
LESS STEP MORE INTUITIVE
LESS STEP MORE INTUITIVE
트랜지션【명사】 1. 변천, 추이, 변이, 전이; 과도기, 변하는 시기
애니메이션【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운
적합한 프로토타이핑 도구의 선택
Prototyping is the fastest way between you and your customers. Lean UX is where prototyping shines.
- Jeff Gothelf, author of ‘Lean UX’ book
1. TIME BASED
2. STATE BASED
Assum
ption
Design
Implementation
IPM
Test
Time based Flow Design State based
Interaction Design
1. Time Based Flow Design
프로젝트 초기에 서비스의 플로우를 그려보고 실제 서비스의 컨셉을 확인해보는 과정
POP
FLINTO
Learning curve
Widget library
Transition/Animation
EffectFidelity Device
Presets Sharing Data Tracking Price note
POP
(iOS/And)Low X
(w.sketch) Basic Low 1) Phone2) 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 Mid1) Phone 2) Tablet 3) Desktop
URL + Shortcut
* PC Web Editor
-
$25 user/month
$22
user/year
collaborativefeatures
1. Time Based Flow Design> for sketch, images
1. Time Based Flow Design> for scenario
Learning curve
Widget library
Transition/Animation
EffectFidelity 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 Mid1) 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 Mid1) 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 licensefor +5
UX Doc.Export
https://ovenapp.io/
https://ovenapp.io/
초반 프로젝트의 컨셉을 명확히 확인 필요한 경우 빠른 테스트 또한 수행가능 초반 적극적 커뮤니케이션 프로토타입을 통한 구성원 간 컨센서스
리치한 인터랙션을 보여주기엔 한계 관련 툴에서 제공하는 트랜지션과 애니메이션 수준
CONS
PROS
2. State Based Interaction Design
서비스의 특정 장면 (Scene)에 대한 리치한 인터랙션 디자인을 만들어보고 테스트하는 과정
QC + Origami + Avocado
Facebook - Origami
IDEO - AvocadoApple - Quaz Composer
PIXATE
FRAMER.JS
Learning curve
Widget library
Transition/Animation
EffectFidelity Device
Presets Sharing Usability Testing Price note
QC + Origami/Avocado
(Mac Only)
High
X
using Plug-in
(Origami, Avocado, etc)
High High Mobile basedDesktop Only
* Mac App Editor
- Free Expandable Plug-in
Pixate
(PC/Mac iOS/And)
Mid-HighX
(Test Box only)High High Mobile based
Phone Only
* Mac/PC Web Editor,
Mac App Editor
-
$8.34per user(for Solo)
$16.67per 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.99per license
$49.99
per licensefor +100
Java/Coffee-script
Knowledge
2. State Based IxD> for scene
상상 속 다양한 인터랙션을 직접 구현 구현한 인터랙션을 기반으로 설득 실제 코딩 시 명확한 데이터 값 전달 빠르게 다양한 인터랙션을 테스트
전체 서비스의 플로우를 확인하기 어려움 초기 러닝커브가 높아 학습에 오랜시간이 소요 디테일한 인터랙션을 위해서는 코딩이 필요 프로토타이핑의 미세한 부분까지 논의
CONS
PROS
Assum
ption
Design
Implementation
IPM
Test
Time based Flow Design State based
Interaction Design
언어로 표현하기 어려운 디자인을 명확히 전달Making your language clear
개발 중인 서비스의 테스트와 검증 가능 Testing your service to user
제대로 만들고 있는지에 대한 지속적 확인 Building right thing
프로토타이핑은..
올바른 도구를 선택하는 것이 중요Choosing right prototyping
반복적으로 진행하고 수정하는 것이 중요 Iterative Testing & Feedback
빠르게 만들고 또 버려질 수 있는 것이 중요 Quick & Dirty Prototype
프로토타이핑은 또한..
스네이크 픽
1. 소규모 그룹의 프로젝트
2. 스케치 수준의 설계공유
3. 빠른 프로토타이핑과 테스트
빠르게 결과물을 받아보고 적용하기
완결성 있는 설계문서 기다리지 않기
문서작업 줄이기
Assum
ption
Design
Implementation
IPM
Test
사례 1
Time based Flow Design
Assum
ption
Design
Implementation
IPM
Test
사례 2
Time based Flow Design
Assum
ption
Design
Implementation
IPM
Test
사례 3
State based Interaction Design
Assum
ption
Design
Implementation
IPM
Test
사례 4
State based Interaction Design
써머리
모바일, 프로토타이핑의 중요성
적합한 프로토타이핑 도구의 선택
1. 프로세스의 변화 2. 인터랙션의 차이
1. 시간 기반의 플로우D 2. 상황 기반의 IxD
Identifying and Achieving
‘Good Enough’http://www.agilebuddha.com/agile/agility-barely-good-enough/
‘The only way to experience an experience is to experience it.’
- Bill Moggridge, co-Founder of IDEO
https://labs.ideo.com/2014/05/27/avocado/
Show, don’t tell.
감사합니다
질문@pentaxzs
참고자료
User Stories Applied 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