-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
342 lines (313 loc) · 13.4 KB
/
index.html
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Building a Successful UX Process</title>
<meta name="description" content="">
<meta name="author" content="Mel Choyce">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="reveal/css/reveal.min.css">
<link rel="stylesheet" href="reveal/css/theme/flounder.css" id="theme">
<!-- For syntax highlighting -->
<!--<link rel="stylesheet" href="lib/css/zenburn.css">-->
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="reveal/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="reveal/lib/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
.reveal section img {
background: transparent;
border: 0;
box-shadow: none;
}
</style>
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section> <!-- Column: Intro -->
<section> <!-- Slide: Title -->
<h2>What’s Your Problem, Man?</h2>
<h3>Building a Successful UX Process</h3>
</section>
<section> <!-- Slide: About Me -->
<h2>I am Mel Choyce</h2>
<ul>
<li class="fragment fade-in">Boston-based UI/UX Designer</li>
<li class="fragment fade-in">Work at <a title="Automattic" href="http://automattic.com/" target="_blank">Automattic</a></li>
<li class="fragment fade-in"><a title="@melchoyce" href="https://twitter.com/melchoyce" target="_blank">@melchoyce</a> <span class="divider">|</span> <a title="Choyce Design" href="http://choycedesign.com/" target="_blank">choycedesign.com</a> <span class="divider">|</span> <a href="http://melchoyce.com">melchoyce.com</a></li>
</ul>
</section>
<section data-state="tron"> <!-- Column: Fight for the users -->
<h3>As a designer,</h3>
<h2>I fight for the users</h2>
</section>
</section>
<section data-state="gallery"> <!-- Column: Intro to UX -->
<section> <!-- Slide: What is UX -->
<h2>What is User Experience?</h2>
</section>
<section> <!-- Slide: UX Definition -->
<h3>User Experience (UX)...</h3>
<p>Encompasses all aspects of the end-user's interaction with a company, its services, and its products. <small>1</small></p>
<p>[UX] is how a person feels when interfacing with a system. <small>2</small></p>
<p class="small">1. <a title="The Definition of User Experience" href="http://www.nngroup.com/articles/definition-user-experience/" target="_blank">The Definition of User Experience</a></p>
<p class="small">2. <a title="What is User Experience?" href="http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/" target="_blank">What Is User Experience Design? Overview, Tools And Resources</a></p>
</section>
<section> <!-- Slide: UX can be... -->
<h3>UX can be...</h3>
<ul>
<li class="fragment fade-in">Done by anyone, not just designers</li>
<li class="fragment fade-in">Cheap</li>
<li class="fragment fade-in">Fast</li>
<li class="fragment fade-in">Applied to any project</li>
</ul>
</section>
<section> <!-- Slide: Good UX -->
<h2>Good UX</h2>
<img src="images/good-ux.png" />
</section>
<section> <!-- Bad UX -->
<h2>Bad UX</h2>
<img src="http://f.cl.ly/items/2G342t3u1b0Q132Q3f3R/Screen%20Shot%202013-08-09%20at%203.40.34%20PM.png" />
</section>
</section>
<section data-state="quote"> <!-- Column: UX Process -->
<section> <!-- Slide: What does it look like? -->
<h2>What does a successful UX process look like?</h2>
</section>
<section> <!-- Slide: Process -->
<h2>UX Process</h2>
<ol>
<li class="fragment fade-in">Define your <strong>problem</strong></li>
<li class="fragment fade-in">Investigate your <strong>environment</strong></li>
<li class="fragment fade-in">Identify your <strong>users</strong></li>
<li class="fragment fade-in">Design based on their <strong>actions</strong></li>
<li class="fragment fade-in"><strong>Test</strong> early and often</li>
<li class="fragment fade-in"><strong>Iterate</strong></li>
</ol>
</section>
</section>
<section data-state="standard"> <!-- Column: Problems -->
<section> <!-- Slide: Define your problem -->
<h2>Define your problem</h2>
</section>
<section> <!-- Slide: Problems, not solutions -->
<h3>Start with problems, not solutions</h3>
</section>
<section> <!-- Slide: Post formats UI -->
<h2>Post Formats UI</h2>
<h3>Answering the wrong problem</h3>
<img src="http://make.wordpress.org/ui/files/2013/04/post-formats-classic-i-copy-1024x698.jpg" />
</section>
<section> <!-- Slide: Fundamental issues -->
<blockquote>It’s not just a matter of polish, it seems to be a fundamental issue with the concept. — <a href="http://make.wordpress.org/core/2013/05/29/post-formats-ui-is-exiting-core-will-live-as-a-plugin/">Mark Jaquith</a></blockquote>
</section>
<section> <!-- Slide: If not post formats -->
<h2>If not post formats...</h2>
<h3>Then what?</h3>
</section>
<section> <!-- Slide: Curation -->
<h3>Maybe the problem is...</h3>
<h2>We lack the tools for elegant and structured content curation</h2>
</section>
</section>
<section data-state="image"> <!-- Column: Environment -->
<section> <!-- Slide: Investigate -->
<h2>Investigate your environment</h2>
</section>
<section> <!-- Slide: Stakeholders -->
<h2>Talk to stakeholders</h2>
<img src="images/matt.jpeg" style="max-width: 25%;" class="fragment fade-in" />
<img src="images/nacin.png" style="max-width: 25%;" class="fragment fade-in" />
<img src="images/jen.jpeg" style="max-width: 25%;" class="fragment fade-in" />
</section>
<section> <!-- Slide: Competitors -->
<h2>Look at competitors</h2>
</section>
<section> <!-- Slide: Squarespace 1 -->
<img src="images/squarespace-1.png" />
</section>
<section> <!-- Slide: Squarespace 2 -->
<img src="images/squarespace-2.png" />
</section>
<section> <!-- Slide: Squarespace 3 -->
<img src="images/squarespace-3.png" />
</section>
<section> <!-- Slide: Squarespace 4 -->
<img src="images/squarespace-4.png" />
</section>
<section> <!-- Slide: Squarespace 5 -->
<img src="images/squarespace-5.png" />
</section>
<section> <!-- Slide: Weebly 1 -->
<img src="images/weebly-1.png" />
</section>
<section> <!-- Slide: Weebly 2 -->
<img src="images/weebly-2.png" />
</section>
<section> <!-- Slide: Weebly 3 -->
<img src="images/weebly-3.png" />
</section>
<section> <!-- Slide: Weebly 4 -->
<img src="images/weebly-4.png" />
</section>
<section> <!-- Slide: Weebly 5 -->
<img src="images/weebly-5.png" />
</section>
</section>
<section data-state="aside"> <!-- Column: Users -->
<section> <!-- Slide: Identify Users -->
<h2>Identify your users</h2>
</section>
<section> <!-- Slide: Who are your users -->
<h2>Who are your:</h2>
<ul>
<li class="fragment fade-in">Existing users</li>
<li class="fragment fade-in">Target users</li>
<li class="fragment fade-in">Non-users</li>
</ul>
</section>
<section> <!-- Slide: Tools -->
<h2>User investigation tools</h2>
<ul>
<li class="fragment fade-in">Surveys<br />
<img src="http://f.cl.ly/items/1n0R2R3J0K1c2B2l441M/Screen%20Shot%202013-08-16%20at%201.39.43%20AM.png" style="max-width:50%;" /></li>
<li class="fragment fade-in">Interviews</li>
<li class="fragment fade-in">Personas</li>
</ul>
</section>
</section>
<section data-state="chat"> <!-- Column: Design for Actions -->
<section> <!-- Slide: -->
<h2>Design based on their actions</h2>
</section>
<section> <!-- Slide: User flows -->
<h2>User Flows</h2>
<img src="images/user-flows-template.png" />
</section>
<section> <!-- Slide: User flows example -->
<img src="images/user-flows-example.png" />
</section>
<section> <!-- Slide: Wireframes -->
<h2>Wireframes</h2>
</section>
<section> <!-- Slide: Post Revisions Wireframes -->
<h2>Can be simple</h2>
<img src="images/post-revisions.png" />
</section>
<section> <!-- Slide: Media Wireframes -->
<h2>Can be complex</h2>
<script async class="speakerdeck-embed" data-id="50164d6c4b3e54000200c382" data-ratio="1.33333333333333" src="http://speakerdeck.com/assets/embed.js"></script>
</section>
<section> <!-- Slide: Add New 1 -->
<img src="images/add-new-1.png" />
</section>
<section> <!-- Slide: Add New 2 -->
<img src="images/add-new-2.png" />
</section>
<section> <!-- Slide: Add New 3 -->
<img src="images/add-new-3.png" />
</section>
<section> <!-- Slide: Add New 4 -->
<img src="images/add-new-4.png" />
</section>
<section> <!-- Slide: Add New 5 -->
<img src="images/add-new-5.png" />
</section>
<section> <!-- Slide: Add New 6 -->
<img src="images/add-new-6.png" />
</section>
<section> <!-- Slide: Prototypes -->
<h2>Prototypes</h2>
<img src="images/prototype.png" />
</section>
</section>
<section data-state="audio"> <!-- Column: Test -->
<section> <!-- Slide: -->
<h2>Test early and often</h2>
</section>
<section> <!-- Slide: Rocket Surgery Made Easy -->
<h2>Rocket Surgery Made Easy</h2>
<h3>by Steve Krug</h3>
<img src="images/rocket-surgery.jpeg" />
</section>
<section> <!-- Slide: User Test -->
<a href="http://wpusertesting.com/videos/DC3-8.mp4"><img src="images/user-test.png" /></a>
<p>(5:30)</p>
</section>
</section>
<section data-state="video"> <!-- Column: Iterate -->
<section> <!-- Slide: Iterate 1 -->
<h2>Iterate</h2>
</section>
<section> <!-- Slide: Iterate 2 -->
<h2><strong>Iterate</strong></h2>
</section>
<section> <!-- Slide: Iterate 3 -->
<h2><strong>ITERATE</strong></h2>
</section>
<section> <!-- Slide: Good > Perfect -->
<h2>Perfect is the enemy of good</h2>
<h3>(so just ship something and make it better later)</h3>
</section>
</section>
<section data-state="status"> <!-- Column: UX Dev -->
<section><!-- Slide: Bonus Round -->
<h2>Bonus round!</h2>
<h3>UX Development</h3>
</section>
<section><!-- Slide: Performance -->
<h2>Performance</h2>
</section>
<section><!-- Slide: Interaction -->
<h2>Interaction details</h2>
</section>
<section><!-- Slide: Interaction -->
<h2>Bugs bugs bugs</h2>
<img src="images/bugs.png" />
</section>
</section>
<section data-state="link"> <!-- Column: End -->
<h2>Thanks!</h2>
<a title="@melchoyce" href="https://twitter.com/melchoyce" target="_blank">@melchoyce</a> <span class="divider">|</span> <a title="Choyce Design" href="http://choycedesign.com/" target="_blank">choycedesign.com</a> <span class="divider">|</span> <a href="http://melchoyce.com">melchoyce.com</a>
</section>
</div>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
// Interpret Markdown in <section> elements
{ src: 'reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
// Syntax highlight for <code> elements
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
// Speaker notes
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// Remote control your reveal.js presentation using a touch device
// { src: 'reveal/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>