-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
281 lines (262 loc) · 17.3 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
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Language" content="en">
<meta name="copyright" content="Adam Kucharik">
<meta name="description" content="Learn the fundamentals of visual user interface design.">
<meta name="keywords" content="design, fundamentals, usability, user interface, user experience, ui, ux, visual">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Fundamentals of Visual User Interface Design" />
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://akucharik.github.io/uifundamentals/" />
<meta property="og:title" content="Fundamentals of Visual User Interface Design" />
<meta property="og:description" content="Learn the fundamentals of visual user interface design." />
<meta property="og:image" content="https://akucharik.github.io/uifundamentals/images/social.jpg" />
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<title>Fundamentals of Visual User Interface Design</title>
<script src="https://use.edgefonts.net/source-sans-pro:n4,i4,n6,i6,n7,i7;droid-serif.js"></script>
<link type="text/css" href="styles/site.min.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<section class="section home-banner">
<div class="row">
<div class="column-full">
<h1>
<img class="home-banner-logo" src="images/logo.png" width="342" height="180" alt="Fundamentals of Visual User Interface Design logo">
</h1>
<p class="home-banner-description">The fundamentals of visual user interface (VUI) design are fairly straightforward.
They can be easily learned, applied to nearly any visual user interface, and usually improve the ease with which that interface is consumed.
How can such wide-reaching claims be true? Because of one simple fact—we're all human, and for the most part we function in a similar way.</p>
</div>
</div>
</section>
<section class="section idea">
<div class="row">
<div class="column-full">
<h1>Visual Content Is an Idea</h1>
<p>Before delving into the fundamentals of visual user interface design there is a critical concept to keep in mind:</p>
<div class="callout">
<p>The visual representation of content is most effective when it accurately reflects the intended underlying conceptual meaning of that content.</p>
</div>
<p>This means that a visual user interface is nothing more than a medium being used to communicate an idea, and that idea exists and can be understood without any visual representation.
Therefore, it is most effective to thoroughly understand the idea first, and then design a visual user interface that accurately communicates that idea.
<p>Now let's start building our VUI design toolkit and see how this works.</p>
<p class="idea-next">
<a id="navStart" href="#anchorGrouping" class="idea-next-link">
<i class="start-icon" aria-hidden="true"></i> <span class="idea-next-text">Start learning</span>
</a>
</p>
</div>
</div>
</section>
<section class="section grouping">
<div class="row">
<div class="column-full">
<h1 id="headerGrouping" class="permalink">
Grouping <a id="anchorGrouping" href="#anchorGrouping" class="permalink-anchor" title="permalink" aria-label="Link to the section "Grouping""><i class="fa fa-link permalink-icon" aria-hidden="true"></i></a>
</h1>
<p>One principle of visual user interface design is grouping.
Grouping is simply the process of creating visual relationships.
When properly used, grouping helps to communicate meaning by giving users visual cues that mirror the content's conceptual relationships.
These cues reduce the amount of mental effort used to figure out those relationships and understand the content.</p>
<div class="subsection letters">
<h2>Effects of Grouping Cues</h2>
<p>Grouping can have a significant effect on how content is perceived.
Let's take a look at a few examples.</p>
<div class="letters-equal">
<!--<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<div class="icon letters-equal-icon">
<div class="icon-symbol is-1"></div>
<div class="icon-symbol is-2"></div>
<div class="icon-symbol is-3"></div>
<div class="icon-symbol is-4"></div>
</div>
</div>
</div>
<div class="media-object-section">
<h3>None</h3>
<p>Even spacing gives no visual cues about the relationships between letters.</p>
</div>
</div>-->
<h3>No Grouping</h3>
<p data-equalizer-watch>Even spacing provides no clear visual relationships between letters. What is the intended meaning—four separate letters or some combination of words?</p>
<div class="zone letters-example">
<div class="letters-example-content">
<div>
<span class="letter letter-1">i</span>
<span class="letter letter-2">n</span>
</div>
<div>
<span class="letter letter-3">t</span>
<span class="letter letter-4">o</span>
</div>
</div>
</div>
</div>
<div class="letters-horizontal">
<!--<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<div class="icon letters-horizontal-icon">
<div class="icon-symbol is-1"></div>
<div class="icon-symbol is-2"></div>
<div class="icon-symbol is-3"></div>
<div class="icon-symbol is-4"></div>
</div>
</div>
</div>
<div class="media-object-section">
<h3>Horizontal</h3>
<p>Tight horizontal spacing creates clear relationships between letters.</p>
</div>
</div>-->
<h3>Horizontal Grouping</h3>
<p data-equalizer-watch>Tight horizontal spacing and loose vertical spacing creates clear relationships between letters.
This visual representation works well if the words <em class="word">in</em> and <em class="word">to</em> are what is intended to be communicated.</p>
<div class="zone letters-example">
<div class="letters-example-content">
<div>
<span class="letter letter-1">i</span>
<span class="letter letter-2">n</span>
</div>
<div>
<span class="letter letter-3">t</span>
<span class="letter letter-4">o</span>
</div>
</div>
</div>
</div>
<div class="letters-vertical">
<!--<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<div class="icon letters-vertical-icon">
<div class="icon-symbol is-1"></div>
<div class="icon-symbol is-2"></div>
<div class="icon-symbol is-3"></div>
<div class="icon-symbol is-4"></div>
</div>
</div>
</div>
<div class="media-object-section">
<h3>Vertical</h3>
<p>Tight vertical spacing creates different relationships between letters.</p>
</div>
</div>-->
<h3>Vertical Grouping</h3>
<p data-equalizer-watch>Tight vertical spacing and loose horizontal spacing also creates relationships between letters.
However, the words <em class="word">it</em> and <em class="word">no</em> have become the most obvious message.</p>
<div class="zone letters-example">
<div class="letters-example-content">
<div>
<span class="letter letter-1">i</span>
<span class="letter letter-2">n</span>
</div>
<div>
<span class="letter letter-3">t</span>
<span class="letter letter-4">o</span>
</div>
</div>
</div>
</div>
<p>These examples illustrate that grouping can be used to drastically manipulate the meaning of content, but most of the time the relationships created by grouping are more subtle.</p>
</div>
<div class="subsection forms">
<h2>Grouping Cues in Basic Forms</h2>
<p>Even subtle grouping aids in communicating ideas. When it is overlooked content relationships become either weak or misleading.
Weak content relationships directly impact usability and cause users to expend more mental effort figuring out what is being communicated.
Let's consider a simple form where a label such as <em>First name</em> is used to describe the empty form field, in this case a textbox, where the user will enter a name.</p>
<div class="zone forms-example forms-first-name">
<label for="firstName">First name</label>
<input id="firstName" type="text">
</div>
<p>Is the visual representation of the relationship between the <em>First name</em> label and the form field misleading, weak, or strong?
In this case it can be difficult to answer because there aren't any other visual elements to influence what's being communicated other than the encompassing box.
Let's add some other elements and see what could happen.</p>
<div class="forms-misleading">
<h3>Misleading Grouping</h3>
<p data-equalizer-watch>Notice how the <em>Age</em>, <em>Height</em>, and <em>Eye color</em> labels are closer to the form fields <em>above</em> them than they are to the form fields they are intended to describe.
It's quite possible a user may think the <em>Age</em> label is some sort of help text describing the <em>First name</em> form field.
After all, <em>Age</em> looks like it could be related to the form field above it.
Confusion and frustration arise when visual relationships do not match the underlying conceptual relationships.</p>
<div class="zone forms-example">
<label for="firstNameMisleading">First name</label>
<input id="firstNameMisleading" type="text">
<label for="ageMisleading">Age</label>
<input id="ageMisleading" type="text">
<label for="heightMisleading">Height</label>
<input id="heightMisleading" type="text">
<label for="eyeColorMisleading">Eye color</label>
<input id="eyeColorMisleading" type="text">
</div>
</div>
<div class="forms-ambiguous">
<h3>Ambiguous Grouping</h3>
<p data-equalizer-watch>In this example, the spacing is even between the labels and form fields.
This spacing creates no visual relationships and requires users to expend additional mental effort deciding if the text is associated with the form field <em>above</em> or <em>below</em> it.</p>
<div class="zone forms-example">
<label for="firstNameAmbiguous">First name</label>
<input id="firstNameAmbiguous" type="text">
<label for="ageAmbiguous">Age</label>
<input id="ageAmbiguous" type="text">
<label for="heightAmbiguous">Height</label>
<input id="heightAmbiguous" type="text">
<label for="eyeColorAmbiguous">Eye color</label>
<input id="eyeColorAmbiguous" type="text">
</div>
</div>
<div class="forms-clear">
<h3>Clear Grouping</h3>
<p data-equalizer-watch>Clear grouping creates visual relationships that accurately reflect the underlying conceptual relationships.
In this case the labels are visually related to the form fields via proximity, and our brains more easily put together that conceptual relationship.
While not the only solution, this visual representation falls in the clear continuum.</p>
<div class="zone forms-example">
<label for="firstNameClear">First name</label>
<input id="firstNameClear" type="text">
<label for="ageClear">Age</label>
<input id="ageClear" type="text">
<label for="heightClear">Height</label>
<input id="heightClear" type="text">
<label for="eyeColorClear">Eye color</label>
<input id="eyeColorClear" type="text">
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<div class="subsection forms">
<h2>Practicing Grouping Using Proximity</h2>
</div>
<div class="section">
<div class="row">
<div class="column-full">
<h2>Guiding Questions</h2>
<p>Sometimes questions asked in different ways can be helpful when sorting out the design of visual user interfaces. Below are a few to get you started.</p>
<ol>
<li>When elements have strong conceptual relationships, are those elements tightly coupled in a visual group?</li>
<li>When elements have weak conceptual relationships, are those elements loosely coupled in a group or not coupled at all?</li>
<li>Does the visual grouping of elements accurately reflect the conceptual relationships of the content?</li>
</ol>
</div>
</div>
</div>
-->
<footer class="section footer">
<div class="row">
<div class="column-full">
<p class="footer-copyright">© <span id="copyrightYear">2017</span> All rights reserved. Made by <a href="https://github.com/akucharik"><i class="fa fa-github footer-github" aria-hidden="true"></i>akucharik</a>.</p>
</div>
</div>
</footer>
<script type="text/javascript" src="scripts/site.min.js"></script>
</body>
</html>