다음카카오

콘텐츠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/

https://ovenapp.io/

https://ovenapp.io/

초반 프로젝트의 컨셉을 명확히 확인 필요한 경우 빠른 테스트 또한 수행가능 초반 적극적 커뮤니케이션 프로토타입을 통한 구성원 간 컨센서스

리치한 인터랙션을 보여주기엔 한계 관련 툴에서 제공하는 트랜지션과 애니메이션 수준

CONS

PROS

2. State Based Interaction Design

서비스의 특정 장면 (Scene)에 대한 리치한 인터랙션 디자인을 만들어보고 테스트하는 과정

QC + Origami + Avocado

Facebook - Origami

IDEO - AvocadoApple - Quaz Composer

https://labs.ideo.com/2014/05/27/avocado/

Avocado

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

kenny.kim@daumkakao.com

참고자료

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