-
Notifications
You must be signed in to change notification settings - Fork 0
/
l8.html
executable file
·253 lines (238 loc) · 12.6 KB
/
l8.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
<!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>HCI Lecture</title>
</head>
<body bgcolor="white" text="black" style="font-family: sans-serif">
<h1 style="font-family: Helvetica,Arial,sans-serif;">Organization
& Visual Structure</h1>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<h2>Some more about color:</h2>
<ul>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Use
color conservatively</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Limit
the number of colors</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Colour
can speed recognition, or hinder it depending on what is
coloured and how its coloured.</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Colour
can help in grouping related items</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Keep in
mind that 5% of the population is color blind (8% of men and
1% of women)</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Be
consistent</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Think
about what certain colors commonly mean/represent</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Be
careful what colors are used together (e.g. bright red on
bright blue is really annoying)</span></li>
<li><span style="font-family: Helvetica,Arial,sans-serif;">Use
color to indicate a change in status</span></li>
</ul>
<font face="Helvetica, Arial, sans-serif">
<br>
There is a somewhat more rigorous one here that gives you better
feedback<br>
<a href="http://www.xrite.com/online-color-test-challenge"
target="_blank">http://www.xrite.com/online-color-test-challenge</a><br>
<br>
<br>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<h2>Gestalt Principles - 1920s</h2>
<p style="font-family: Helvetica,Arial,sans-serif;">
how individual elements are grouped into gestalts (wholes) during
visual perception</p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li><span style="text-decoration: underline;">Proximity</span> -
tend to associate elements with those nearby
compared to those further away - what do you see in fig 97a? </li>
<li><span style="text-decoration: underline;">Similarity</span> -
tend to associate elements more strongly with those that share
basic visual characteristics compared to those that differ in
those characteristics - fig 97b?</li>
<li><span style="text-decoration: underline;">Continuity</span> -
prefer continuous unbroken contours with the simplest physical
explanation - fig 97c (2 crossing lines, 4 segments, 2 right
angles?) </li>
<li><span style="text-decoration: underline;">Closure</span> -
tend to interpret visual stimuli as complete closed figures even
when some information is absent - fig 98a </li>
<li><span style="text-decoration: underline;">Area</span> -
smaller of two overlapping areas will tend to be viewed as the
figure while the larger is interpreted as ground - fig 98b is
the smaller square in front, or a hole? </li>
<li><span style="text-decoration: underline;">Symmetry</span> -
tend to group based on overall form rather than constituent
parts - fig 98c </li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
<center><img style="border: 0px solid ; width: 900px;"
alt="" src="images/org1.png" width="900" ></center><br>
</p>
<center><b>Do you have other example of Gestalt Principles? </b> </center>
<center><img style="border: 0px solid ; width: 400px;"
alt="" src="images2/closure1.png" > <img style="border: 0px solid ; width: 400px;"
alt="" src="images2/closure2.jpg" ></center>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<h2>Suggestions:</h2>
<p style="font-family: Helvetica,Arial,sans-serif;">Group related
elements together establishing a hierarchy, then structure the display to reflect the relationships between the elements.</p>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li><span style="text-decoration: underline;">Grouping</span> -
words in a book grouped into sentences, paragraphs, sections,
chapters. Use groups to create manageable units. Bind functional
units tightly together and distinguish them from the surrounding
controls. (fig 103) </li>
<li><span style="text-decoration: underline;">Hierarchy</span> -
hierarchy should be made obvious through the visual structures, such as using indent, size, or value </li>
<li><span style="text-decoration: underline;">Relationship</span>
- position, size and value provide the most effective visual
cues to reinforce relationships (which in turn reinforces
groups). <br>
</li>
<li><span style="text-decoration: underline;">Balance</span> -
equal 'weight' of design elements on either side </li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif;"><img
style="border: 0px solid ; width: 800px;;"
alt="Effective Grouping" src="images/org2.png"><br>
<br>
</p>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<h2>Common Errors:</h2>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Haphazard layout</b>
- should establish spatial relationships to organize the elements
of the design. <br>The image on the left is very chaotic making it
hard to see the relationships. <br>The image on the right is much
better organized, making the relationships clear.<br>
<img style="border: 0px solid ; width: 900px;"
alt="haphazard layout" src="images/org4.png"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Ambiguous
Internal Relationships:</b> consistency in the alignment of the boxes,
but not in their contents, and several things are 'almost aligned'.<br>
<img style="border: 0px solid ; width: 400px; height: 425px;"
alt="" src="images/org6.png" width="260" height="276"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;">How are these
things set in a more recent version of windows?</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><img
style="width: 400px; height: 449px;" alt="desktop1"
src="images/newd1.jpg"><img style="width: 400px; height: 449px;"
alt="desktop 2" src="images/newd2.jpg"><img style="width: 400px;
height: 451px;" alt="desktop 3" src="images/newd3.jpg"><img
style="width: 400px; height: 451px;" alt="desktop 4"
src="images/newd4.jpg"><img style="width: 400px; height: 450px;"
alt="desktop 5" src="images/newd5.jpg"></p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Conflicting
Symmetries:</b></p>
<p style="font-family: Helvetica,Arial,sans-serif;">Here, the
boundaries are symmetrical but not the contents. <br>
Our eyes are drawn to the boundaries not the contents. <br>
Other issues in aligning the contents of the boxes.<br>
<br>
<img style="border: 0px solid ; width: 300px; height: 568px;"
alt="conflicting symmetries" src="images/org5.png" width="179"
height="339"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Aligning Labels
but not controls:</b><br>
<img style="border: 0px solid ; width: 400px; height: 290px;"
alt="Aligning labels but not controls" src="images/org7.png"
width="506" height="330"><br>
<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Alignment
within, but not across controls.</b> Things start out OK at the top
and then completely self-destruct in the lower half of the
dialogue box<br>
<img style="border: 0px solid ; width: 400px; height: 255px;"
alt="" src="images/org8.png" width="355" height="226"><br>
<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>False structure:</b> adding boxes to impose structure adds visual noise and excessive
hierarchies of 1 element?.<br>
<img style="border: 0px solid ; width: 400px; height: 400px;"
alt="False Structure" src="images/org9.png" width="257"
height="257"><br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Excessive
display density:</b> the larger was replaced by the 3 smaller more focused dialogue boxes<br>
<img style="border: 0px solid ; width: 700px; height: 303px;"
alt="Excessive Display Density" src="images/org10.png" width="700"
height="303"><br>
</p>
<hr style="font-family: Helvetica,Arial,sans-serif;">
<h2>Techniques:</h2>
<ul style="font-family: Helvetica,Arial,sans-serif;">
<li>Using symmetry to ensure balance </li>
<li>Using alignment to establish visual relationships </li>
<li>Optical adjustment for human vision </li>
<li>Shaping the display with negative space </li>
</ul>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
<b>Symmetry:</b></p>
<ol style="font-family: Helvetica,Arial,sans-serif;">
<li>Identify the axis for symmetry: horizontal and/or vertical symmetry. </li>
<li>Vertical Symmetry is more prevalent in human
perception and is generally more useful in visual displays </li>
<li>Center the information on the axis of symmetry by carefully
balancing the amount of information on each side of the axis. </li>
</ol>
<p style="font-family: Helvetica,Arial,sans-serif;"><br>
<b>Alignment:</b></p>
<ol style="font-family: Helvetica,Arial,sans-serif;">
<li>Identify the major boundaries in the existing layout, and look
for ways to enhance them by moving additional elements into
alignment with them </li>
<li>Look for elements and margins - both internal and external -
that almost, but not quite, align with one another and bring
them into alignment by altering the size or position of one or
both elements </li>
<li>Look for free-standing elements and make sure they are aligned
with something else in the display - either a major margin or
some other element to which they are related </li>
<li>If an element cannot be related to anything else in the
display, try to relate it to the proportions of the display
itself by positioning the element to correspond to the regular
division of the space </li>
</ol>
<p style="font-family: Helvetica,Arial,sans-serif;"><img alt=""
src="images/org12.png" width="667" height="342" border="0"><br>
<br>
<br>
</p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Optical Adjustment:</b> Extend elements beyond the margin according to to produce the equivalent scaling. </p>
<p style="font-family: Helvetica,Arial,sans-serif;"><img alt=""
src="images/org13.png" width="401" height="597" border="0"></p>
<br><br>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>Negative Space:</b></p>
<ol style="font-family: Helvetica,Arial,sans-serif;">
<li>Determine the organization of the information into a
prioritized set of chunks of manageable size. </li>
<li>Ensure spatial separation of independent units of information
by adding extra white space between chunks. </li>
<li>Determine which elements require additional visual emphasis --> Increase the white space surrounding crucial elements </li>
<li>Always remember that <i>white space is not wasted space</i>!
Its role is to direct the viewer's attention to adjacent regions
containing critical information. </li>
</ol>
<p style="font-family: Helvetica,Arial,sans-serif;"><img alt=""
src="images/org15.png" width="662" height="400" border="0"><br>
</p>
<div style="text-align: justify;"></div>
<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>