-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·244 lines (238 loc) · 10.1 KB
/
Copy pathindex.html
File metadata and controls
executable file
·244 lines (238 loc) · 10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>UI/UX 개선을 위한 프로토타이핑</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>UI/UX 개선을 위한 프로토타이핑</h1>
<h3><small>빠른 프로토타이핑으로 소프트웨어 UX 개선하기</small></h3>
<p>
<small>Created by Benjamin, Bruno, Hoon</small>
</p>
</section>
<section>
<section>
<h2>UX의 정의</h2>
<dl>
<dt>UX</dt>
<dd>사용자가 주어진 맥락 속에서 만족할 수 있는 가치 있는 경험</dd>
<dt>UXD (Prototyping)</dt>
<dd>좋은 UX, 목표에 적합한 UX를 만들기 위해, 다양한 관점을 고려해서, 체계적으로 실행하는 반복적인 과정/절차</dd>
</dl>
</section>
<section>
<figure><img width="80%" data-src="img/3.jpg" alt="Down arrow"></figure>
<figcaption>
<ol>
<li>시리얼, 우유 : IA (사용자가 섭취할 컨텐츠/정보)</li>
<li>숟가락과 그릇 : UI (사용자 도구)</li>
<li>먹는 행위와 만족감 : UX (사용자 경험)</li>
</ol>
</figcaption>
</section>
<section>
<figure><img width="50%" data-src="img/1.jpg" alt="Down arrow"></figure>
<figcaption>
<ol>
<li>단순한 제품 디자인 : 내용을 담을 병, 뚜껑, 상표</li>
<li>훌륭한 경험 디자인 : 사용자가 케찹을 짜는 일상적인 경험을 배려한 디자인</li>
</ol>
</figcaption>
</section>
<section>
<figure><img width="50%" data-src="img/2.jpg" alt="Down arrow"></figure>
<figcaption>
3. 교훈 : 디자이너의 의도와는 전혀 다른 방식으로 실제 사용자는 서비스를 사용할 수 있다.
</figcaption>
</section>
<section>
<h2>영화 Her..</h2>
<p>과학기술의 발달과 함께 개인화된 미래의 도시에서, 인격형 인공지능체계와 사랑에 빠진 남자의 이야기를 그렸다.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gC8dKPd9p_I?list=PL3m5qREasgOpKAudvDsn7U4PMu4GZaC7i" frameborder="0" allowfullscreen></iframe>
</section>
</section>
<section>
<section>
<h2>우리의 현실은..</h2>
<figure><img width="60%" data-src="img/8.jpg" alt="Down arrow"></figure>
<figcaption>개발자 중심</figcaption>
</section>
<section>
<h2>우리의 현실은..</h2>
<figure><img width="60%" data-src="img/2.jpg" alt="Down arrow"></figure>
<figcaption>예산과 일정 중심</figcaption>
</section>
<section>
<h2>사용자 중심의 소프트웨어</h2>
<ul>
<li>유저가 재미있게 즐기기 위한 게임을 만드는 것.</li>
<li>유저는 프로그래밍에 대한 지식도, 개발사의 비즈니스 모델에도 관심이 없음.</li>
<li>유저는 기능보다 기능을 매개로 구현하는 "목적"이나 "가치", "경험"에 관심이 더 많음.</li>
</ul>
</section>
</section>
<section>
<h2>Prototyping 이란?</h2>
<blockquote>Prototype이란 “처음”을 뜻하는 그리스어 protos와 “느낌”을 뜻하는 typos가 합쳐져 “원본”, “초기”를 뜻하는 prototypos가 되었고, 이것에서 발전한 “초기 형태”인 prototypon에서 유래하였습니다. (출처: 위키피디아)</blockquote>
</section>
<section>
<section>
<h2>Goals</h2>
</section>
<section>
<h3>Goals</h3>
<ol>
<li>UX 컨셉을 구체화하여 사용자에게 직접 실험을 하기 위한 것.</li>
<li>실제 모델을 제작하고, 사용자와 전문가에게 사용하게 한 후 의견을 기록.</li>
<li>프로토타입을 제작할 시에는 사용자가 구현될 시스템에 대하여 어느 정도의 디테일을 유지하여 제작.</li>
<li>실험 시, 최대한 실제 환경이나 그와 비슷한 상황에서 실험하는 것이 중요함.</li>
<li>실험 중에 전체적인 서비스의 감성의 흐름과 피드백을 기록.</li>
</ol>
</section>
</section>
<section>
<section>
<h2>Value</h2>
</section>
<section>
<h3>Value</h3>
<ol>
<li>
프로토타이핑은 창의적 프로세스이다.
<ul>
<li><small>아이디어를 끄집어 내고, 손에 실제로 잡혀서 느낄 수 있고, 경험할 수 있고, 가지고 놀 수 있으며, 테스트 할 수 있는 ‘실체’를 만들어 내는 과정을 도와줌</small></li>
</ul>
</li>
<li>프로토타입은 "보여주기와 말하기" 보다 한 차원 높은 ‘경험’을 통해 디자인을 이해할 수 있게 도와준다.</li>
<li>프로토타이핑은 커뮤니케이션 오류가 발생할 가능성을 줄여준다.</li>
<li>프로토타이핑은 시간, 노력, 비용을 효과적으로 절약한다.</li>
<li>프로토타이핑은 자원의 낭비를 감소시킨다.</li>
<li>
프로토타이핑은 실제 가치를 제공해준다.
<ul>
<li><small>문서 작성 시간 감소, 개발 시간 및 비용 예측률 증가, 수정요청 감소, 버그 건수 감소, 구성원들의 디자인에 대한 이해도 증가</small></li>
</ul>
</li>
</ol>
</section>
</section>
<section>
<section>
<h2>Process</h2>
</section>
<section>
<h3>일반적인 사용자 중심의 개발 프로세스</h3>
<figure><img width="100%" data-src="img/4.jpg" alt="Down arrow"></figure>
<figcaption>
사용자 중심 제품 개발 과정의 대부분이 사용자를 끊임없이 이해하는 과정의 반복이라는 것을 알 수 있습니다.
</figcaption>
</section>
<section>
<h3>폭포수 Process</h3>
<figure><img width="70%" data-src="img/6.png" alt="Down arrow"></figure>
</section>
<section>
<h3>Prototyping Process</h3>
<figure><img width="60%" data-src="img/5.png" alt="Down arrow"></figure>
<figcaption>
개발의 일부분만을 우선 개발하여 사용자에게 제공하여 시험 사용하게 하고 점검, 성능을 평가하여 그 결과를 개선 작업에 반경하여 통하여 진행이 되도록 하는 모델
</figcaption>
</section>
</section>
<section>
<section>
<h2>Prototyping의 방법</h2>
</section>
<section>
<h3>Prototyping Tools</h3>
<ul>
<li>Paper Prototyping</li>
<li>Adobe Application (포토샵, 일러스트 등등)</li>
<li>MS Office (Powerpoint, Visio, Excel)</li>
<li>UI Prototyping 전용 App</li>
<li><a href="https://ovenapp.io" target="_blank">Oven</a>(다음 카카오에서 만든 프로토타이핑 툴)</li>
<li>HTML Coding</li>
</ul>
</section>
<section>
<h3>HTML Coding</h3>
<ul>
<li>플랫폼 프리</li>
<li>최종 산출물과 매우 유사한 프로토타입 제작 가능</li>
<li>구현 가능성 추적 용이</li>
<li>협업의 용이성</li>
<li>높은 인터랙션 구현</li>
<li>소스 재활용성 높음</li>
<li>HTML5 App에 적용 용이</li>
</ul>
</section>
<section>
<h3>HTML Coding</h3>
<figure><img width="70%" data-src="img/7.png" alt="Down arrow"></figure>
<figcaption>
현재 실무에서 UI 목업을 사용하고 있습니다.<br>다만 활용도가 낮을 뿐...
</figcaption>
</section>
</section>
<section>
<section>
<h2>Prototyping Testing</h2>
</section>
<section>
<h3>사용성 테스트는 전체 프로토타이핑<br>프로세스에 있어 매우 중요한 과업</h3>
</section>
<section>
<h3>테스트 시 유의 사항</h3>
<ul>
<li>사용성 테스트는 반드시 거쳐야 하는 프로세스의 한 부분임을 명심하라. </li>
<li>‘누구’를 대상으로 테스트하고 싶은지를 명확히 설정하라. </li>
<li>테스트에 적합한 right 참가자들을 모집하는데 노력을 기울여라. </li>
<li>좋은 진행자가 되기 위해서는 숱한 노력이 필요하다. 그러니, 부단히 노력하고 많이 연습하라. </li>
<li>테스트를 실시하기 전에, 프로토타입이 제대로 작동하는지 반드시 점검하라. </li>
<li>여러분의 결과물을 가장 잘 표현해 줄 수 있는 적합한 툴을 선택하라. </li>
<li>테스트 세션을 비디오 녹화하는 것이 관찰 결과를 기록하는 가장 좋은 방법이다.</li>
</ul>
</section>
</section>
<section>
<h2>Q & A</h2>
</section>
<section>
<h1>감사합니다</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>