-
Notifications
You must be signed in to change notification settings - Fork 0
/
l10.html
executable file
·318 lines (309 loc) · 14.3 KB
/
l10.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
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1252">
<meta name="generator" content="Adobe GoLive 4">
<title>HCI lecture</title>
</head>
<body bgcolor="white" text="black" style="font-family: sans-serif">
<h1 style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Image & Representation</h1>
<div style="text-align: justify;"></div>
<hr style="font-family: Helvetica,Arial,sans-serif; margin-left:
0px; margin-right: 0px;">
<h2>Basic Concepts and Principles:</h2>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
Establishing a clear relationship between a representation and its object</p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>icon - denotes its object by its own resemblance to the object </li>
<li>index - refers to the object indirectly, by means of an association </li>
<li>symbol - denotes the object by convention alone </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img style="border: 0px solid ; width: 700px; height:
294px;" alt="Representation" src="images/i2.png" width="700"
height="294"></p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img style="border: 0px solid ; width: 700px; height:
288px;" alt="Representation" src="images/i3.png" width="700"
height="288"></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><br>
</p>
<span style="font-family: Helvetica,Arial,sans-serif;">One image may
not work alone - you can also combine them together through</span><br
style="font-family: Helvetica,Arial,sans-serif;">
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>superimposition - one image on top of another</li>
<li>conjunction - one image next to another</li>
</ul>
<br style="font-family: Helvetica,Arial,sans-serif;">
<span style="font-family: Helvetica,Arial,sans-serif;">Practical
considerations</span><br style="font-family:
Helvetica,Arial,sans-serif;">
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>physical size</li>
<li>number of pixels available</li>
<li>number of colours / levels of greyscale available</li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Animation adds more possibilities to icons but animation
draws attention and that can be distracting if too many thing on
your desktop / phone / TV etc are bouncing / twirling / pulsing /
inflating / blinking etc<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"> <br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b>Principles:</b></p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Immediacy - should be recognized at a glance without having to
analyze it </li>
<li>Generality - imagery is normally used to represent a class of
objects, not a particular instance - abstraction creates
generality </li>
<li>Cohesiveness - images are not viewed
in isolation but as part of an overall system </li>
<li>Characterization - function by focusing on essential characteristics </li>
<li>Communicability - interpretation depends on the creator and
viewer sharing a common environment (physical, cultural,
conceptual) </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"> </p>
<div style="text-align: justify;"></div>
A <a href="https://historyoficons.com" target="_blank">history of icons in GUIs</a></font><br>
<br>
</div>
<hr style="width: 100%; height: 2px; margin-left: 0px; margin-right:
0px;">
<div style="text-align: justify;"><span style="font-family:
Helvetica,Arial,sans-serif;"></span></div>
<h2>Common Errors:</h2>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">- misleading syntax - what do these tell me?<br>
<img style="border: 0px solid ; width: 676px; height: 310px;"
alt="Misleading Syntax" src="images/i4.png" width="45%"
height="310"> <img src="images2/dontgo.gif" alt="" width="40%"> <br>
<br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">answer: takeoffs and landings (plane viewed from the
top, arrow viewed from the side)<br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">- using type as image<br>
<img alt="" src="images/i7.png" width="670" height="460" border="0"><br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">- using images for abstract concepts<br>
<img alt="" src="images/i8.png" width="718" height="406" border="0"></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">hard to find appropriate images for abstract concepts<br>
a - here is where balloon help is really useful to try and put
some text on the screen to ID these icons<br>
b - boomerang for 'no-op'?<br>
c - does the stairway suggest sort ascending and sort descending<br>
d - step through a macro?<br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">- culture or langauge dependencies<br>
<img style="border: 0px solid ; width: 700px; height: 453px;"
alt="" src="images/i10.png" width="700" height="453"></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">a- defaults, screen dump, C-shell, hello world<br>
b - DOS icon is an image of the original IBM PC - remember those?
ever seen one?<br>
c - debugger<br>
d - (apple for the teacher?)<br>
e - spelling<br>
f - back burner<br>
g - drag on<br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">- offensive or suggestive imagery<br>
<img style="border: 0px solid ; width: 472px; height: 248px;"
alt="offensive imagery" src="images/i11.png" width="655"
height="466"></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">a - kill icon from next-step<br>
d - gestures are culturally based, gun for killing tasks<br>
<br>
</p>
<div style="text-align: justify;"></div>
<!--
<hr style="font-family: Helvetica,Arial,sans-serif; margin-left:
0px; margin-right: 0px;" width="100%">
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Techniques:</p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>selecting the right vehicle </li>
<li>refinement through progressive abstraction </li>
<li>coordination to ensure visual consistency </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><br>
Selection</p>
<div style="text-align: justify;"></div>
<ol style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>if the concept is a concrete, familiar object or a tangible,
externally obvious state, use an iconic sign </li>
<li>if the concept will be used repeatedly throughout an
application or environment, consider establishing a conventional
symbolic or indexical sign, especially if an existing sign can
be borrowed from the 'real' world' </li>
<li>in most other cases - and particularly when the concept is an
abstract process or a subtle transition between states - a
textual label should be used </li>
<li>avoid the mixing of purely textual, iconic and indexical or
symbolic signs<br>
</li>
</ol>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><br>
Refinement</p>
<div style="text-align: justify;"></div>
<ol style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>determine the appropriate level of abstraction based on the
subject matter, audience, and display resolution </li>
<li>begin with an image seen from the viewpoint including the most
characteristic contours<br>
</li>
<li>use the trace overly technique to rapidly develop a series of
drawings derived from the original image. Omit details until
only the most essential or characteristic elements remain.
Experiment with different combinations of elements to identify
those that best characterize the object </li>
<li>simplify complex shapes into regular geometric forms. <br>
</li>
<li>eliminate contour information that is not required for
recognition of the object. Experiment with negative space to
suggest contours. </li>
</ol>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><br>
Coordination</p>
<div style="text-align: justify;"></div>
<ol style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>begin with sketches of the full set of images <br>
</li>
<li>use a similar point of view and type of perspective for each
image. Determine the predominant viewpoint and redraw any
divergent images from the new perspective </li>
<li>use a similar form of representation and level of abstraction
(i.e. don't combine icons with symbols) </li>
<li>use a consistent size, orientation, layout, color, and overall
visual weight for each image. Use a layout grid to help insure
consistent internal structure across images </li>
<li style="font-family: Helvetica,Arial,sans-serif;">wherever
possible, use the same elements - including line weights,
curvatures, textures, and forms - throughout the image set. <br>
</li>
</ol>
<font face="Helvetica, Arial, sans-serif"><br>
</font>
-->
<div style="text-align: justify;"><font face="Helvetica, Arial,
sans-serif"><br>
<span style="font-family: Helvetica,Arial,sans-serif;"><b>Some more common icon errors with examples:</b></span>
<a href="http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/"
target="_blank" style="font-family: Helvetica,Arial,sans-serif;">10 mistakes in icon designs</a><span style="font-family: Helvetica,Arial,sans-serif;"><br>
</span>
<hr style="width: 100%; height: 2px;"><span style="font-family:
Helvetica,Arial,sans-serif;">
<h2>Examples of Icon Designs:</h2>
<br>
Google's Material Design icon set: <a
href="https://material.io/icons/" target="_blank">https://material.io/icons/</a><br>
<br>
iOS navigation and toolbar icons - <a
href="https://developer.apple.com/ios/human-interface-guidelines/graphics/system-icons/"
target="_blank">https://developer.apple.com/ios/human-interface-guidelines/graphics/system-icons/</a><br>
iOS 9 Settings icons - <a
href="https://cdn2.macworld.co.uk/cmsdata/features/3583514/ios-settings-screed.jpg"
target="_blank">https://cdn2.macworld.co.uk/cmsdata/features/3583514/ios-settings-screed.jpg</a><br>
<br>
XMB Playstation icons - <a
href="http://mr-billionaire.deviantart.com/art/PlayStation3-XMB-Icons-79824699"
target="_blank">http://mr-billionaire.deviantart.com/art/PlayStation3-XMB-Icons-79824699</a><br>
<br>
Here is a recent set of Settings from SUSE and Ubuntu<br>
<img src="images/suse-settings.png" alt="SUSE Desktop Settings
2016" width="1030" height="723"><br>
<br>
<img src="images/ubuntu%20system%20settings%202016.png" alt=""
width="856" height="597"><br>
<br>
In a different previous class we took a look at the 2008 KDE
Desktop Preferences icons.<br>
<br>
Your group should rate each of these icons on a scale from 1
(low) to 10 (high) and then pick 5 of your least favorite icons
and come up with improved versions by the end of class.<br>
<br>
</span><img src="images/KDEcontrolcenter.jpg" alt=""><br>
<br>
<span style="font-family: Helvetica,Arial,sans-serif;">and here
are the results showing the min | average | and max score:</span><br>
<img style="width: 780px; height: 813px;"
src="images/KDEresults.jpg" alt=""><br>
<br>
<br>
<!--
<span style="font-family: Helvetica,Arial,sans-serif;">In the
class before that we took a look at the icons for KDE 3.4:<br>
<br>
</span><img style="width: 339px; height: 675px;" alt="kde 1"
src="images/1.jpg"><br>
<img src="images/2.jpg"><img src="images/3.jpg"> <img
src="images/4.jpg"><img src="images/5.jpg"><img
src="images/6.jpg"><img src="images/7.jpg"><img
src="images/8.jpg"><br>
<br>
<font face="Helvetica, Arial, sans-serif"><br>
Windows 8 and then 10 began adopting a text-centric set of
control panels to go along with the Metro interface style which
dramatically reduces the number of icons<br>
<br>
</font>
-->
<hr style="width: 100%; height: 1px; font-family:
Helvetica,Arial,sans-serif; margin-left: 0px; margin-right: 0px;">
<span style="font-family:
Helvetica,Arial,sans-serif;"><u>Sources: </u><br>
<i>Some images</i> are retrieved from online resources. Other are from previous TTU HCI classes.<br>
<i>User Interface Design</i> by Andrew Johnson<br>
<i>Designing Visual Interfaces</i> by Mullet and Sano<br>
</span>
</body>
</html>