mobile prototype essential

1

HTML5를 홗용한 프로토타이핑

Mobile UX Prototype모바일 UX 프로토타입

ECONOVATION | 동 준 상 강사 [email protected]

3

타겟 디바이스에서의 사용성 검증을 위한

모바일 UX 프로토타입개발목차

Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06

모바일 프로젝트에서 프로토타입 개발 이유

제작계획 명세서, 정보구조도, 와이어프레임

레이아웃, 컬러, 폰트를 고려한 스크린디자인

HTML5+CSS3+JQM을 홗용한 프로토타이핑

검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스

웹 서버를 통한 프로토타입의 배포, 폰갭 패키징

4



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







5



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







6



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







7



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







8



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







9



Why

Plan

Design

Develop

Simulate

Publish

01

02

03

04

05

06







10

Mobile UX Prototyping

프로토타입의필요성 | Why?01

개발목적에 따른 프로토타입 붂류

Idea < Description < Mockup < Prototype

Agile Project – more frequent iteration

11






12






13






14

01

개발목적에 따른 붂류

모바일 프로젝트에서 프로토타입의 필요성

15

01



아이디어, 컨셉을 젂달하기 위한 프로토타입

성능, 기능, 디자인을 검증하기 위한 프로토타입

비즈니스 모델에 대한 수요예측을 위한 프로토타입

16

01






17

01






Concept

18

01






CapabilityConcept

19

01






CustomerCapabilityConcept

20

01






CustomerCapabilityConcept

21

01






A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.

22

01

매체별 젂달능력


bandwidth

23

01



idea

bandwidth

24

01



idea

docs

bandwidth

25

01



idea

docs

mockup

bandwidth

26

01



idea

docs

mockup

prototype

bandwidth

27

01



idea

docs

mockup

prototype

video

bandwidth

28

01

UX디자인 프로세스에서의 위치


Persona, Concept Model

Contents Inventory

Wireframe, Screen Design

Story Board, Click Stream

Prototype, Usability Test

Application (alpha, beta ver)

Application Launching

1

2

3

4

5

6

7

29

01




Contents Inventory






1

2

3

4

5

6

7

30

01




Contents Inventory






1

2

3

4

5

6

7

31

01




Contents Inventory






1

2

3

4

5

6

7

32

01




Contents Inventory






1

2

3

4

5

6

7

33

01




Contents Inventory






1

2

3

4

5

6

7

34

01




Contents Inventory






1

2

3

4

5

6

7

35

01




Contents Inventory






1

2

3

4

5

6

7

36

01




Contents Inventory






1

2

3

4

5

6

7

37

01




Contents Inventory






1

2

3

4

5

6

7

38

01

Frequent Release & Iteration


39

01



급변하는 시장에 대처하기 위한 애자일 개발젂략

모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응

기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현

40

01






41

01






42

01



Iteration




43

01



ExperienceIteration




44

01



IterationExperienceIteration




45

01



IterationExperienceIteration




Agile techniques are best used in small-scale projects or on elements of a wider programme of work, or on projects that are too complex for the customer to understand and specify before testing prototypes.

46


프로젝트기획 | Plannig02

47



프로젝트 명세 (Project Specification )

정보구조 설계 (Information Architecture)

와이어프레임 (wireframe)

48






49






50

02

프로젝트 명세서 | Project Spec

모바일 프로젝트의 시작 - 프로젝트 기획

51

02



프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정

프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의

브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능

52

02






53

02






Name of Project

54

02






Name of Project

55

02






Google Reader (Postage, Total Fit)

Name of Project

56

02






Definition of Project


Name of Project

57

02








구글리더를 통해 제공되는 다양한 정보를모바일 앱으로 만들어 보다 높은 사용성을 제공

Name of Project

58

02







Key function & Goal



Name of Project

59

02







Key function & Goal



구글리더의 컨텎츠를 리스트형태로 제공즐겨 찾는 카테고리 저장, 이미 읽은 기사와나중에 읽을 기사를 북마킹, 쉬운 체크기능

60

02

정보구조도 – 아이디어의 체계화


61

02



62

02



63

02



64

02



인트로 메인

65

02



인트로 메인 예약확인로그인

66

02



인트로 메인

예약신청

예약확인

비행스케줄

로그인

67

02



인트로 메인

예약신청

예약확인

비행스케줄

로그인

이용실적 운행상황

68

02



인트로

69

02



인트로

70

02



인트로 메인

71

02



인트로 메인

비행스케줄

예약확인

72

02



인트로 메인

비행스케줄

예약확인 이용실적 운행상황

73

02



메인

74

02



75

02

와이어프레임 – 정보구조의 시각화


76

02



77

02



78

02



79

02



80

02



Copyright

창공을 나는비행기 이미지

(창밖을 바라보는고객 이미지)

Kite Air logo

인트로

81

02



Kite Air 메인

메인메뉴(테이블)

CopyrightCopyright



Kite Air logo

인트로 메인

82

02



Kite Air 메인

메인메뉴(테이블)

CopyrightCopyright



Kite Air logo

비행스케줄

출발지 선택

도착지 선택

날짜 선택

주요메뉴 탭바

확인

인트로 메인 스케줄

83

02



인트로 메인뷰 스케줄 확인

84

03 Mobile UX Prototyping

스크린디자인 | Design

85

03

가상의 사용자를 고려한 레이아웃

조화와 균형, 인갂 본연의 미적 기준

모바일 네비게이션



86

03






87

03






88

03


모바일 프로젝트의 시각적구현 - 스크린디자인

89

03



JennyHTCWP7480 X 800px

MichaelSamsungAndroid320 X 480px

90

03





91

03





92

03



93

03



94

03



W:H

3:5W:H

2:3W:H

2:3

95

03



96

03



97

03



640X960

98

03



99

03



100

03



101

03



102

03



103

03



레이아웃을 위한 2/3 그리드 라인 혹은 6등 분할선

104

03



105

03



레이아웃을 위한 6등 분할선 | Nike+

106

03

컬러 – 색의 대비, 조화, 그리고 문맥


107

03



108

03



109

03



110

03



111

03



Color를 사용함으로써,

사용자에게 차별화된 즐거움과

보다 높은 수준의 개인화, 그리고

뚜렷한 정보구조를 제시할 수 있다.

- WP7 UX Guideline, ‘Color’

112

03



Color를 사용함으로써,

사용자에게 차별화된 즐거움과

보다 높은 수준의 개인화, 그리고

뚜렷한 정보구조를 제시할 수 있다.

- WP7 UX Guideline, ‘Color’

113

03



114

03



단, 모바일환경에서의Color는

1. 브랜드를표현하기위한기본색상2. 기본색상과잘 어울리는보조색상으로 한정하여, 젃제된 배색을 사용하는 것이 필요하다. 모바일에서 컬러의 사용은 다찿로움과 화려함의 표현보다는 문맥과 컨텎츠를 강조하는데 주목적이 있다.

115

03





116

03





117

03



118

03



119

03



앱 기본컬러

앱 보조컬러1

앱 보조컬러2

앱 텍스트, 아이콘

120

03



앱 기본컬러

앱 보조컬러1

앱 보조컬러2

앱 텍스트, 아이콘

121

03

폰트 – 스타일, 위치, 상대적 크기


122

03



123

03



124

03

네비게이션의 역할


125

03



현재 화면의 제목을 표시

현재 정보구조의 위치를 명시

현재 수행중인 임무, 과업을 표시

이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공

현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공

126

03








127

03








128

03

네비게이션이 갖출 덕목


129

03



젂체 컨텎츠의 흐름을 이어주는

없어서는 앆 될, 매우 중요한 역할을 하지만

130

03





131

03





정보구조상 주연이 아닌 조연 이라는 점을 이해

132

03






simple

133

03






clearsimple

134

03






semanticclearsimple

135

03

앱 네비게이션의 특징


136

03



예상하지 못 한 홖경에서 사용

137

03




사용자는 대체로 바쁘고 주의가 산만한 상황

138

03





스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악

139

03





스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악

사용자의 임무를 강조

140

03

앱 네비게이션을 위한 준비


141

03



웹 네비게이션과의 차이를 이해

142

03




세심하게 준비된 정보구조도 IA Diagram

143

03





해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링

144

03






멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘

145

03







Nike+ Navi-bar

146

03







Nike+ Navi-bar

Asiana Tab-bar

147

03

네비게이션 바의 붂류


Navigation Bar (typical)

148

03



Identity Bar (for Branding)

149

03



Action Bar (focus on task)

150

03



Informative Nav Bar (for direct edit)

151

03



Custom,Doudle Title Bar

152

03

글로벌 vs. 로컬 네비게이션


153

03



로컬 네비게이션 (ui요소명 : 네비게이션 바)

154

03



로컬 네비게이션 (ui요소명 : 네비게이션 바)

글로벌 네비게이션 (ui요소명 : 탭 바)

155

03



운항스케줄

출발지 선택

도착지 선택

날짜 선택

주요메뉴 탭바

확인

156

03



로컬 네비게이션 (ui요소명 : 네비게이션 바)운항스케줄

출발지 선택

도착지 선택

날짜 선택

주요메뉴 탭바

확인

운항스케줄< Back Kite Air

157

03



로컬 네비게이션 (ui요소명 : 네비게이션 바)운항스케줄

출발지 선택

도착지 선택

날짜 선택

주요메뉴 탭바

확인

글로벌 네비게이션 (ui요소명 : 탭 바)

Home Check-in Time-table MyRounge

운항스케줄< Back Kite Air

158

03

네비게이션을 위한 라벨링, 아이콘


159

03



글로벌, 로컬 요소가 일체화된 대한항공 네비게이션-바

160

03



글로벌, 로컬 요소가 일체화된 대한항공 네비게이션-바

iOS의 전형적인 특성을 살린 아시아나 탭-바

161

모바일 프로젝트의 시각적구현 - 스크린디자인03

iOS HIG case study

colorsnap

162


iOS HIG case study

VirtualWater

163


iOS HIG case study

meernotes

164

03

Android UI case study

EasyTether


Astro Spotify

165

03


360 Live


appSaver Seesmic

166

03


Foursquare


Document to Go Open Home

167

03

WP7 UI case study

AP News MSN Video Weather Bug


168

03

WP7 UI case study

Flixter Shazam travelocity


169

03

WP7 UI case study

Home-Depot Seesmic photobucket


170


프로토타입개발 | Dev04

프로토타입 mark-up을 위한 HTML5

프로토타입 style을 위한 CSS3, webkit

프로토타입 interactivity를 위한 JQM

팀별 프로젝트로 제출할 모바일 웹은 젂통

적인 header-content-footer 구조를 기본

으로 합니다.

개발언어는 html, css 입니다.

이미 제출한 기획 및 UX문서에 따라 메인,

서브1, 서브2의 화면구성과 주요메뉴를 결

정하여 웹서버에 등록하고, 자싞의 스마트

폰으로 확인합니다.

html, css 파일과 웹서버의 ftp정보는 별도

첨부, 공지합니다.

header

content

footer

04 모바일 프로젝트의 실체적구현 – 프로토타입 개발


Case Study – Hautelook (SC)

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



</html>

DOCTYPE 선언


<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Today's Events | HauteLook</title> <meta http-equiv="content-language" content="en" /> <meta name="viewport" content="user-scalable=no, width=device-width" /> <link rel="shortcut icon" href="/sites/default/files/favicon_0.ico" type="image/x-icon" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/mobile_240/css/mobile.css?s" /> </head>

HEAD 요소


<body class="front not-logged-in page-events no-sidebars"> <div class="container"> <div id="header"> <h1 id="logo"><a href="/"><img src=“/images/hautelook.png" width="105" height="28" alt="Hautelook" title="Hautelook" /></a></h1> <div class="header_cart "> 0 Items in Cart<a href="/login">Log In</a> </div> <ul class="menu"> <li class="menulink"><a href="/events“ class="menulink">Now</a></li>

BODY 요소


<!DOCTYPE><html><head><title>Your Prototype Name</title><link rel="apple-touch-icon" href="./images/icon.png"/><link rel='stylesheet' type='text/css' href='./style.css'><script type='text/javascript' src='./modernizr-1.7.min.js'></script><script type='text/javascript' src='./jquery-1.5.1.min.js'></script><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv='content-type' content='text/html; charset=euc-kr'><meta name='apple-mobile-web-app-status-bar-style' content='default'><meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;'/></head><body></body></html>

Prototype 추가요소

-webkit-border-radius:10px;

div.content {

float:left; width:200px; margin:20px; padding:20px;

background:rgba(0,150,235,1); font:normal 15px/22px

verdana; color:white; -webkit-border-radius:10px;}


-webkit-box-shadow:5px 5px 8px #333;

div.content {



verdana; color:white; -webkit-box-shadow:5px 5px 8px

#333; }


-webkit-gradient(linear, left top, left bottom, from(blue),

to(navy));

div.content {


color:white; background:rgba(0,150,235,1); font:normal

15px/22px verdana; -webkit-gradient(linear, left top, left

bottom, from(rgba(0,150,235,1)), to(navy));}


-webkit-transform:rotate(-10deg);

div.content {



verdana; color:white; -webkit-transform:rotate(-10deg);}


-webkit-box-reflect:below 1px -webkit-gradient();

div.content {



verdana; color:white; -webkit-box-reflect:below 1px -

webkit-gradient(linear, left top, left bottom,

from(transparent), (rgba(255,255,255,0.5)));


187

04

플랫폼별, 스크린별 레이아웃 템플릿

모바일 프로젝트의 실체적구현 – 프로토타입 개발

188

04



189

04



190

04

플랫폼별 UI개발 도구


191

04



192

04



193


프로토타입검증 | Simulate05

194



모바일 적응 브라우저 (webkit-engine)

모바일 젂용 시뮬레이터

타겟 디바이스에서 검증

195






196






197

05

구글 크롬 브라우저

모바일 프로젝트의 성능검증 – 시뮬레이션

198

05

구글 크롬 브라우저


199

05

애플 사파리 브라우저


200

05

애플 사파리 브라우저


201

05

Xcode Simulator


202

05

Xcode Simulator


203

05

Android Emulator


204

05

Android Emulator


205

05

Opera Simulator


206

05

Opera Simulator


207

05

Opera Simulator


208


프로토타입배포 | Publish06

209



웹 서버를 통한 배포

폰갭, 앱스프레소, WAC을 통한 패키징

사용성 테스트 스크립트

210






211






212

06 모바일 프로젝트의 사용성평가 – 프로토타입 배포

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com / mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

* Use the mobile specific .mobi top-level domain.Here the user enters domain.mobi.

* A SMS query that returns a URL called WAP Push.

모바일 웹 형식의 배포

213







214







215







216







217

06

패키징 툴

모바일 프로젝트의 사용성평가 – 프로토타입 배포

218

06

패키징 툴 – 폰갭 PhoneGap


219

06

패키징 툴 –PhoneGap (in Xcode)


220

06

패키징 툴 –PhoneGap (in Eclipse)


221

06

사용성 테스트, 테스트 스크립트


222

06



사용성테스트를통해UI디자이너는프로젝트결과물이

1. 디자인 컨셉을 잘 반영하였는지,

2. 기능적 요소가 문제 없이 작동하는지,

3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.

223

06







224

06







225

06







226

06







227

06



사용성 Usability 평가 3대지표

1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼싞속히, 그리고 정확히 해냈는가를 평가

2. 효율은 효과를 얻기 위해 얼마만큼의 자원을투입하였는지를 판단

3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가.

Usability

228

06



Effectiveness

Satisfaction

Efficiency




3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가

229

06



Effectiveness

Satisfaction

Efficiency





230

06



Effectiveness

Satisfaction

Efficiency





231

06



테스트시나리오점심시갂에 운항스케줄 확인하고, 항공권 구매후 마일리지 적립확인

TASK1사용자가 원하는 항공권을 정확히 찾아얼마나 싞속히 구매하는지를 측정

TASK2

사용자 젂용페이지에서 관심정보를 찾는데 걸린 시갂, 컨텎츠의 만족도를 측정

232

06





TASK2


233

06





TASK2


234

06





TASK2


235

동준상 강사 (ESS Instructor, [email protected])

끝 | 수고하셨습니다.

Mobile UX Prototype모바일 UX 프로토타입

Project

삼성중공업 프로젝트중소기업청, 교직원공제회보디가드, 블랙박스 +

Lecture

KT 에코노베이션삼성멀티캠퍼스한국생산성본부 +

저술/번역 : 모바일 UX디자인 실무, HTML5 Multimedia Development (에이콘)

위너스랩 UX디자인 팀장

mobile prototype essential

Technology