-
Notifications
You must be signed in to change notification settings - Fork 0
/
l6.html
executable file
·278 lines (255 loc) · 11.9 KB
/
l6.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
<!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 6</title>
</head>
<body bgcolor="white" text="black" style="font-family: sans-serif">
<h1 style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Elegance & Simplicity</h1>
<div style="text-align: justify;"></div>
<h1 style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<hr style="margin-left: 0px; margin-right: 0px;"> </h1>
<div style="text-align: justify;"></div>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Enhance communication by carefully selecting elements to
be emphasized<br>
Applies to window layout, dialogue boxes, icons, etc.<br>
<br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Solve the problem completely, in a highly economical way<br>
<img src="images/traffic.gif" border="0"><br>
Here is a web page showing a wide assortment of US Road signs -<br>
<a target="_blank" href="http://www.trafficsign.us/">http://www.trafficsign.us/</a><br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Europe: <a
href="http://www.reidsguides.com/t_au/t_au_road_signs.html"
target="_blank">http://www.reidsguides.com/t_au/t_au_road_signs.html</a><br>
and <a href="http://www.ideamerge.com/motoeuropa/roadsigns/"
target="_blank">http://www.ideamerge.com/motoeuropa/roadsigns/</a><br>
</p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">and a good bad example: <a
href="http://www.baddesigns.com/dontgo.html" target="_blank">http://www.baddesigns.com/dontgo.html</a></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images2/dontgo.gif" alt="" width="877"><br>
</p>
<br>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">and another good bad one, though this time its not the
sign's fault:
<a href="http://www.baddesigns.com/streetsn.html" target="_blank">http://www.baddesigns.com/streetsn.html</a></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images2/streetsn.gif" alt="" width="300"><br>
</p>
<br>
<div style="text-align: justify;"></div>
<hr style="margin-left: 0px; margin-right: 0px;"> </h1>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b>Benefits of Simplicity:</b></p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Approachability - rapidly apprehended and understood to
support immediate use </li>
<p style="font-family: Helvetica,Arial,sans-serif; text-decoration:
underline; text-align: justify;"><img style=" width: 225px;
height: 300px;" src="images/door1.jpg" alt=""> <img style="
width: 400px; height: 300px;" src="images/door2.jpeg" alt="">
<img style=" width: 225px; height: 300px;" src="images/door3.jpeg"
alt=""><br>
</p>
<li>Recognizability - less visual information, more easily
understood and remembered </li>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="figures4/3.png" alt="" height="300"> <img src="figures4/4.png" alt="" height="300"><br>
</p>
<li>Immediacy - greater impact because they are recognized and
understood without conscious effort </li>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="figures4/1.png" alt="" height="250"> <img src="figures4/2.png" alt="" height="200"><br>
<li>Usability - improving approachability and memorability enhance
usability </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b>3 Principles of Simplicity</b></p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>elements must be <span style="text-decoration: underline;">unified</span>
to produce a coherent whole </li>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="https://i.imgur.com/K1DH2GB.gif" alt="" height="500"> <br>
<li>parts, and the whole, must be <span style="text-decoration:
underline;">refined</span> to focus the viewer's attention on
the essential aspects </li>
<li><span style="text-decoration: underline;">fitness</span> of
the solution to the communication problem must be ensured at
every level </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><br>
Lets look at some different ways to show the current vs. expected weather<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images/weather.com.png" alt="" width="877"
height="384"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images/yahoo%20weather.png" alt="" width="297"
height="483"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images/weather%20underground.png" alt=""
width="965" height="229"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images/forecast.io.png" alt="" width="800"
height="467"><br>
(and note that the darksky.net icons such as 'light snow' or
'rain' are animated to show the snow flakes falling<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="images/national%20weather%20service.png" alt=""
width="1148" height="521"></p>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="figures4/5.png" alt="" height="400"> <br>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b>Common Errors:</b></p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Clutter and visual noise - packing too much information /
control into a single screen makes it difficult to organize what
is there and how to move through it<br>
<img style="font-family: Helvetica,Arial,sans-serif;"
src="images/28.gif" height="500"><br>
<br>
<br>
</li>
</ul>
<div style="text-align: justify;"><span style="font-family:
Helvetica,Arial,sans-serif;"></span> </div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Interference between competing elements - the text in the
menus competes with the text in the menu accelerators, and
sometimes the text for the accelerators can be quite long -
using an icon for the accelerator keys makes the distinction
obvious (but then you have to learn the code for the
accelerator)<br>
<img style="width: 242px; height: 318px;" alt="interferance"
src="images/29.gif"> <img
src="images/mac-keyboard-symbols.jpg" alt="" width="624"
height="318"><br>
<br>
</li>
</ul>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Using explicit structure - adding extra boxes and
lines can help to organize the elements, but it is also a sign
that you are in trouble when over-used.
See the clutter and visual noise example above.
</li>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><img src="https://i.imgur.com/P9E5fFf.png" alt="" height="500"> <br>
</ul>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Excessive detail and embellishment, including
3D and gadient display, may also make the text harder to read. <br>
<img style="font-family: Helvetica,Arial,sans-serif;"
src="images/33.gif"></li>
</ul>
<hr style="width: 100%; height: 2px;"> <br>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b>Techniques:</b></p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li><span style="text-decoration: underline;">Reducing</span> a
design to its essence </li>
<li><span style="text-decoration: underline;">Regularizing</span>
the elements of the design </li>
<li>Combining elements for maximum <span style="text-decoration:
underline;">leverage</span> </li>
</ul>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b><br>
Reduction:</b></p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">Reinforce the message by removing non-essential elements</p>
<div style="text-align: justify;"></div>
<ol style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>Determine the essential qualities that should be conveyed by the design. </li>
<li>Critically examine each element in the design and ask yourself
why it is needed, how it relates to the essence of the design
(identified above), and how the design would suffer without it.
If you can't answer any of these questions, remove the element.
</li>
</ol>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"> Department of Transportation Icons<br>
<center><img style="width: 585px; height: 593px;" alt="typical icons
inside an airport" src="images/airport.gif"></center></p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b><br>
Regularizing:</b><br>
</p>
<div style="text-align: justify;">
<blockquote style="font-family: Helvetica,Arial,sans-serif;">
<p>Reduce visual complexity and enhance structure and
predictability</p>
<p>Reducing components to basic geometric forms</p>
<p>Limit variation in typography to a few sizes from one
or two families.</p>
</blockquote>
</div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"><b><br>
Leverage:</b></p>
<div style="text-align: justify;"></div>
<p style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;"> good example is the header for a
window</p>
<div style="text-align: justify;"></div>
<ul style="font-family: Helvetica,Arial,sans-serif; text-align:
justify;">
<li>label </li>
<li>drag area </li>
<li>place to put window management controls </li>
<li>place to show which window has focus </li>
</ul>
<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>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>