-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathl4.html
executable file
·443 lines (336 loc) · 15.1 KB
/
l4.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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1252">
<meta name="generator" content="Adobe GoLive 4">
<title>Lecture 4</title>
<meta name="Template" content="D:\PROGRAM
FILES\MSOFFICE\OFFICE\html.dot">
</head>
<body bgcolor="white" text="black">
<h1 style="font-family: Helvetica,Arial,sans-serif;">Human Factors
& Direct Manipulation</h1>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline;"><b>the Model Human Processor</b></p>
<p style="font-family: Helvetica,Arial,sans-serif;">approximation
that allows us to make some predictions</p>
<p style="font-style: italic; font-family:
Helvetica,Arial,sans-serif;"><img style="border: 0px solid ;
width: 689px; height: 870px;" alt="Model Human Processor"
src="images/processor.png" width="689" height="870"><br>
wikipedia version -
https://en.wikipedia.org/wiki/Human_processor_model<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">Model Human
Processor- p26 of The Psychology of Human-Computer Interaction</p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li type="disc">mu: Storage capacity in terms </li>
<li type="disc">delta: decay time of an item </li>
<li type="disc">kappa: main code type </li>
<li type="disc">tau: cycle time<br>
</li>
</ul>
<br>
<span style="font-family: Helvetica,Arial,sans-serif;">For a simple
perceive / decide / respond (perception / cognition / motor
response) it takes roughly 240ms (100 + 70 + 70) though the range
is 105-470 ms<br>
<br>
In the normal way people think and work, things aren't really so
isolated, but as a model it can give you a general sense of our
capabilities<br>
<br>
</span>
<hr style="width: 50%; height: 2px; font-family:
Helvetica,Arial,sans-serif;">
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline;"><b><br>
chunks</b></p>
<p style="font-family: Helvetica,Arial,sans-serif;">
CSBMCRIA<br>
<br>
<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">
SCIM-RCAB<br>
<br>
<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">or</p>
<p style="font-family: Helvetica,Arial,sans-serif;">
4865267437</p>
<span style="font-family: Helvetica,Arial,sans-serif;"><br>
vs<br>
<br>
<br>
(480) 526-7437<br>
<br>
<br>
<br>
<br>
<br>
Here is a short on-line test from the exploratorium:<br>
<a target="_blank"
href="http://www.exploratorium.edu/memory/dont_forget/playing_games.html">http://www.exploratorium.edu/memory/dont_forget/playing_games.html</a></span>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">
Here is what the results look like from my last four HCI
classes</p>
<p style="font-family: Helvetica,Arial,sans-serif;"> <img
src="images/image_count.png" alt="" width="610" height="290"> </p>
<p style="font-family: Helvetica,Arial,sans-serif;">Comparing the
last five classes:<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><img
src="images/200617compare.jpeg" alt="" width="872" height="1310"></p>
<hr style="width: 100%; height: 2px;">
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">A bit more on
text. You have several general choices of font styles to use<br>
</p>
<left> <img src="images2/font2.png" alt="" border="0" width="700"> </left>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>sans-serif (e.g. Helvetica, Arial, Verdana, Tahoma) good for
on-screen text - e.g. 72 dpi</li>
<left> <img src="images2/font3.png" alt="" border="0" width="120"> </left>
<li>serif (common Sans Serif typefaces include Arial, Helvetica and Tahoma) - good for printed text - e.g.
150-300 dpi. As screen resolutions increase serif fonts become
more appropriate.<br>
</li>
<left> <img src="images2/font1.png" alt="" border="0" width="500"> </left>
<li>monospace - good for certain occasions when you need exact
alignment of the text<br>
</li>
<left> <img src="images2/font5.png" alt="" border="0" width="400"> </left>
<li>fantasy / cute / brush strokes / cursive / dripping blood -
just say no, unless you are creating a party invitation<br>
</li>
<left> <img src="images2/font6.jpg" alt="" border="0" width="900"> </left>
</ul>
<span style="font-family: Helvetica,Arial,sans-serif;">
One font, <span style="font-family: Comic Sans MS;">comic
sans</span>, deserves some mention on its own. <a
href="http://www.mcsweeneys.net/articles/im-comic-sans-asshole"
target="_blank">Here</a> is one good link (with profanity) about
comic sans. In the summer of 2011 there were quite a few blog
posts devoted to a 100 page US Army PowerPoint presentation using
comic sans e.g. <a
href="http://www.gizmodo.com.au/2011/07/us-army-declares-war-on-sanity-with-comic-sans-presentation/"
target="_blank">this one</a>. <br>
<br>
Scientists do this kind of thing as well. How long does it take
for you to read the title screen here? <br>
<center><iframe width="1280" height="720" src="https://www.youtube.com/embed/nLacmrM5xQw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
<br>
</span><span style="font-family: Helvetica,Arial,sans-serif;">You
should start with a sans-serif font (like Helvetica) and only change
it if you have a very good reason. <br>
<br>
Here is a nice infographic on type - <a
href="http://www.buzzfeed.com/lenkendall/a-guide-to-typography-infographic-wh6"
target="_blank">http://www.buzzfeed.com/lenkendall/a-guide-to-typography-infographic-wh6</a><br>
<br>
<br>
</span><span style="font-family: Helvetica,Arial,sans-serif;">
Familiar words are recognized by shape<br>
</span>
<ul>
<li><span style="font-family: Helvetica,Arial,sans-serif;">lower
case words are read faster than words in upper case</span></li>
<left> <img src="images2/font7.jpg" alt="" border="0" width="700"> </left>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Individual
letters and nonsense words (such as UA1416 or CS 5331) are read faster in upper case</span></li>
</ul>
<br>
<h2 style="font-family: Helvetica,Arial,sans-serif; color: red"> Reading test</h2>
<span style="font-family: Helvetica,Arial,sans-serif;">O lny srmat
poelpe can raed tihs. </span><br style="font-family:
Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;">I cdnuolt
blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg. The
phaonmneal pweor of the hmuan mnid, aoccdrnig to a rscheearch at
Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers
in a wrod are, t he olny iprmoatnt tihng is taht the frist and
lsat ltteer be in the rgh it pclae. The rset can be a taotl mses
and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the
huamn mnid deos not raed ervey lteter by istlef, but the wrod as a
wlohe. Amzanig huh? yaeh and I awlyas tghuhot slpeling was
ipmorantt! if you can raed tihs psas it on !!"</span>
<p style="font-family: Helvetica,Arial,sans-serif;"></p>
<br>
<span style="font-family: Helvetica,Arial,sans-serif;"> <b>Can the computer read this text? </b></span>
<br>
<br>
<hr style="width: 100%; height: 2px;"><br>
<div style="font-family: Helvetica,Arial,sans-serif;">
<b>How human interact with computers in the future with the supports of modern technologies? </b><br>
<br>
Corning - <b>2011</b> - A day made
of glass <br>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/6Cf7IL_eZ38" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
Microsoft - <b>2015</b> - Future
Vision 2020 <br>
<iframe width="1280" height="500" src="https://www.youtube.com/embed/w-tFdreZB94" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
</div>
<hr style="width: 100%; height: 2px; font-family:
Helvetica,Arial,sans-serif;">
<p style="font-family: Helvetica,Arial,sans-serif;"> In project 1, we dealt with
windows, icons, dialogue boxes, and menus. Here are some general rules which should help with the
projects before we revisit these again in detail (principles for designing these in more
detail)</p>
<hr style="width: 100%; height: 2px;">
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline;"><b>windows</b></p>
<p style="font-family: Helvetica,Arial,sans-serif;">
give
the user the ability to see multiple pieces of information at the
same time</p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>use a grid structure for window contents</li>
<li>group related elements, separate unrelated elements </li>
<li>provide an initial focus for the viewer's attention </li>
<li>direct attention to important items </li>
<li>minimize clutter so critical information is not hidden </li>
</ul>
<hr style="width: 100%; height: 2px;">
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline;"><b>
icons</b></p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>exploit user's knowledge of the world - familiarity (such as trash can icon)</li>
<li>respect established conventions</li>
<li>exaggerate - trash can = destroy </li>
<li>provide contrast - selected vs. unselected items </li>
<li>make distinctive features prominent </li>
<li>make the icon readable at a glance </li>
<li>make the icon appealing </li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif;"> </p>
<p style="font-family: Helvetica,Arial,sans-serif;">Imagine you
have only a 32 x 32 or 128 x 128 pixel grid to display that icon. <br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">icon sizes have
become much, much larger for desktop computers, laptops, and
tablets - but devices such as watches, google glass have smaller displays. <br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
</p>
<hr style="width: 100%; height: 2px;">
<p style="font-family: Helvetica,Arial,sans-serif;">menus are lists
of verbs, nouns, adjectives and adverbs<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline;"><b>menus</b></p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>group menu items according to easily recognizable logical
relations to make them more easily learned </li>
<li>group menu items to be clearly distinguishable perceptually </li>
<li>position most likely selections given the current context for
easy access </li>
</ul>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>left justify all textual menu items </li>
<li>capitalize only initial letters of items </li>
<li>separate groups, icons and hotkey codes </li>
</ul>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>For Tree structured menus</li>
<ul>
<li>use consistent and concise phrasing</li>
</ul>
<ul>
<li>use familiar terminology</li>
</ul>
<ul>
<li>create groups of logically similar items</li>
</ul>
<ul>
<li>form groups that cover all possibilities</li>
</ul>
<ul>
<li>make sure menu items are non-overlapping<br>
<br>
</li>
</ul>
<li>Order items in an appropriate way</li>
<ul>
<li> alphabetical</li>
</ul>
<ul>
<li> numerical (time, ascending, descending)</li>
</ul>
<ul>
<li> most frequently used first</li>
</ul>
</ul>
<hr style="width: 100%; height: 2px;">
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
dialogue boxes are 2D layouts of verbs, nouns, adjectives
and adverbs</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b
style="text-decoration: underline;">dialogue boxes</b></p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>make the most frequently used controls easy to locate and
manipulate</li>
<li>spatial order of controls should reflect the typical
interaction sequences</li>
<li>establish a clear context for each dialogue box with prominent
and consistently located titles</li>
<li>highlight the default options </li>
</ul>
<center> <img src="images2/dialog.png" alt="" border="0" width="800"> </center>
<font style="font-family: Helvetica,Arial,sans-serif;">
What do we do? </font><br>
<ol style="font-family: Helvetica,Arial,sans-serif;">
<li>analyze the contents </li>
<li>create a conceptual diagram </li>
<li>sort the area into information zones </li>
<li>set up a layout grid </li>
<li>tell a story visually </li>
<li>use color with discretion </li>
<li>let the typography tell the story </li>
<li>minimize variation in lengths and widths </li>
<li>make any instructions clear </li>
<li>leave enough space for data entry </li>
<li>use a short clear title </li>
<li>evaluate design with users </li>
</ol>
<ol style="font-family: Helvetica,Arial,sans-serif;">
</ol>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
When asking the user to enter data, try to help by making the
expected format obvious in the form</p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>telephone numbers</li>
<li>date</li>
<li>time of the day</li>
<li>currency<br>
</li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif;">Of course this
is tricky because all of these things are culturally dependent</p>
<hr style="width: 100%; height: 2px; font-family:
Helvetica,Arial,sans-serif;">
<span style="font-family:
Helvetica,Arial,sans-serif;"><u>Sources: </u><br>
<i>User Interface Design</i> by Andrew Johnson<br>
<i>Designing the User Interface</i> by Schneiderman, SIGGRAPH 96
course notes #12 - Graphic Design for Usable GUIs<br>
<i>Some images</i> are retrieved from online resources
</span>
</body>
</html>