Rapid Prototyping Tools & Best Practices

HNINE UX Part CHOI WOO SIK

Research &Analysis

Concept Building

Design

Develop

implement

출처 http://project.cmd.hro.nl/cmi/hci/toolkit/index.php

UCD process

출처 http://www.buzzhunt.co.uk/wp-content/2013/10/How-everyone-sees-each-other-chart.jpg

서로의

눈높이

Research &Analysis

Concept Building

Design

Develop

implement

출처 http://project.cmd.hro.nl/cmi/hci/toolkit/index.php

UX output

Prototypes Usability testing

Research document

UX concept High level key screen

GUI proposal

Prototypes (stakeholder or member)

UI 설계서 (Workflow, UID…)

GUI 디자인 (Key screen design, GUI guideline)

Visual interaction motion guide

Follow-up

출처 http://sixrevisions.com/user-interface/website-wireframing/ http://pixelhandler.com/posts/wireframing-templates-for-magento-commerce-with-user-experience-notes

우리들만의

언어?

너무 많은

노동력 GUI Guideline

Motion Guideline

어떻게 전달하지

모션

출처 http://www.adobe.com/devnet/flash/learning_guide/animation/part05.html

효과적인 전달 방법

Prototype

출처 http://larrybuch.com/ Illustration by Larry Buchanan KIDP SERVICE DESIGN TOOLKIT

프로토타입을 통해 무형의 서비스에 대한 구체화를 통해 이해관계자 및 소비자의 반응을 관찰

서비스 이해관계자 및 고객의 추가적인 니즈와 불편 등 파악하고 서비스를 개선하는데 활용

목표점에 대한 애매모호함을 좀 더 명확하게 정의하고 서로의 합의점을 빨리 도출하는데 도움

Low fidelity

출처 http://chiefdisruptionofficer.com/helpful-rapid-prototyping-methods-and-tools-to-bring-digital-ideas-to-life-fast/ http://project.cmd.hro.nl/cmi/hci/toolkit/card.php?recordid=106 http://framerjs.com/

High fidelity

Paper prototype

Interactive prototype

Medium fidelity

Wireframe 간단한 모션 적용 Flow의 흐름 빠르게 검토 스마트폰 앱 바로 찍고 Flow와 간단한 제스쳐와 트랜지션 맵핑 가능

출처 http://www.uistencils.com/ https://prottapp.com/

출처 http://keynotopia.com/guides/

Key screen : Master file사용과 stencil의 생활화 PowerPoint Keynote

Flow link 및 Animation

Y-Combinator 2012 포토샵이나 일러스트가 아닌 Pixate Engine을 통해 CSS로 만든 결과물을 개발에 바로 적용 드래그 앤 드롭 기반 빠른 시간 내에 간단하게 손쉽게 개발 가능 계정 로그인을 하면 모바일 앱에서 구동 학생은 무료버전

출처 http://www.pixate.com/

Framer

출처 http://framerjs.com/

•  Learning curve - Javascript 기반

•  Photoshop과 Sketch 연동 - 리소스 자동으로 컷팅 단, 레이어 정리와 그룹 정리 필요

•  PC로컬서비스를 폰에서 접속 : 웹서비스의 연동 X

•  자유로운 모션 및 High level 수준의 프로토타입 개발

百聞 不如一見

정적인 문서보다는

Prototype

Prototype

맹신하지 말자

Stakeholder & Team member

이해와 설득에 도움 Schedule & Budget 맞는

Fidelity와 Tool 선택

THANK YOU Email : wk@h9works.com