-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
398 lines (371 loc) · 33.2 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
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
<!doctype html>
<html lang=en-us class=no-js>
<head>
<meta charset=UFT-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name=mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-capable content=yes>
<title>Home | Rules of UX</title>
<meta name=description name=og:description content="Rules of UX is a collection of the maxims and principles that designers can consider when building user interfaces.">
<meta name=image content=Images/social.jpg>
<meta itemprop=name content="Home | Laws of UX">
<!-- Twitter -->
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:title content="Home | Rules of UX">
<meta name=twitter:description content="Rules of UX is a collection of the maxims and principles that designers can consider when building user interfaces.">
<meta name=twitter:image content=Images/social_1024.jpg>
<meta name=og:title content="Home | Rules of UX">
<meta name=og:image content=https://rulesofux.vercel.app/images/social_1200.jpg>
<meta name=og:url content=https://rulesofux.vercel.app/ >
<meta name=og:site_name content="Rules of UX">
<meta name=og:locale content=en_US>
<meta name=og:type content=website>
<link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png>
<meta name=theme-color content=#333333>
<!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500,700" rel="stylesheet">
<link rel=stylesheet href="style.css">
</head>
<header class=header role=banner data-header>
<div class=header_container>
<h1 class=header__title>
<a href=index.html data-transition-page>
<span class=header__title-text>Rules of UX</span>
</a>
</h1>
<a href=about.html data-modal=#menu class=header__link>
<span>About</span>
</a>
</div>
</header>
<main role=main class=wrapper>
<a href=# class=scroll-indicator data-scroll-indicator>
<svg width=24 height=24 viewBox="0 0 100 100">
<use xlink:href=#arrow-down />
</svg>
<span class=visuallyhidden>Scroll Down</span>
</a>
<div data-transition-content>
<div id=laws class=section>
<div class="container container--med">
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/circle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #506485">
<a href=https://en.wikipedia.org/wiki/Aesthetic_usability_effect data-transition-page>
<div class=poster__body-graphic>
<img src="Images/AestheticUsabilityEffect.png">
</div>
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>01<p class=poster__info-desc>Users often perceive aesthetically pleasing design as design that’s more usable. Aesthetically pleasing design can make users more tolerant of minor usability issues.</p>
<a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" class="btn" target="_blank" data-transition-page>The Aesthetic-Usability Effect<br><br>Kate Moran | Nielsen Norman Group</a><p></p>
<a href=https://medium.com/coffee-and-junk/design-psychology-aesthetic-usability-effect-494ed0f22571 class=btn target="_blank" data-transition-page>The Aesthetic-Usability Effect<br><br>Abhishek Chakraborty | Medium</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #C44F9D">
<div class=poster__body-graphic>
<img src="Images/DohertyThreshold.png">
</div>
</div>
<div class=poster__info>
<p class=poster__info-count>02<p class=poster__info-desc>Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other. <br><br>Provide system feedback within 400ms in order to keep users’ attention and increase productivity.</p>
<a href=https://medium.com/@Gugel/the-doherty-threshold-5471ca990de6 class=btn data-transition-page>This 70s UX gem still applies<br><br>Michael Gugel | Medium</a><p></p>
<a href="https://jlelliotton.blogspot.ca/p/the-economic-value-of-rapid-response.html" class=btn data-transition-page>Economic Value Of Rapid Response<br><br>Jim Elliott</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #7BB24D">
<a href=https://en.wikipedia.org/wiki/Fitts%27s_law data-transition-page>
<div class=poster__body-graphic>
<img src="Images/FittsLaw.png">
</div>
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>03<p class=poster__info-desc>The time to acquire a target is a function of the distance to and size of the target.<br><br>Make elements you wish to be easily selectable large and position them close to users.</p>
<a href=https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design class=btn data-transition-page>Fitts’s Law<br><br>Interaction Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #4897BE">
<a href=https://en.wikipedia.org/wiki/Hick%27s_law data-transition-page>
<div class=poster__body-graphic>
<img src="Images/HicksLaw.png">
</div>
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>04<p class=poster__info-desc>The time it takes to make a decision increases with the number and complexity of choices.</p>
<a href=https://blog.marvelapp.com/psychology-principles-every-uiux-designer-needs-know/ class=btn data-transition-page>UI/UX Psychology Principles<br><br>Thanasis Rigopoulos | Marvel</a><p></p>
<a href=https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users class=btn data-transition-page>Hick’s Law<br><br>Interaction Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #D6C229">
<div class=poster__body-graphic>
<img src="Images/JakobsLaw.png">
</div>
</div>
<div class=poster__info>
<p class=poster__info-count>05<p class=poster__info-desc>Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.<br><br>You can simplify the learning process for users by providing familiar design patterns.</p>
<a href=https://www.nngroup.com/videos/jakobs-law-internet-ux/ class=btn data-transition-page>Jakob’s Law of Internet UX</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #26A36D">
<a href=https://en.wikipedia.org/wiki/Principles_of_grouping data-transition-page>
<div class=poster__body-graphic>
<img src="Images/LawofCommonRegion.png">
</div>
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>06<p class=poster__info-desc>Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.<br><br>Adding borders (creating common regions) around an element or group of elements is an easy way to create separation from surrounding elements.</p>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #F27EAC">
<div class=poster__body-graphic>
<img src="Images/LawofPragnaz.png">
</div>
</div>
<div class=poster__info>
<p class=poster__info-count>07<p class=poster__info-desc>People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.</p>
<a href=https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3 class=btn data-transition-page>The Principles of Gestalt<br><br>Interation Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/circle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #EA7E38">
<img src="Images/LawOfProximity.png">
</div>
<div class=poster__info>
<p class=poster__info-count>08<p class=poster__info-desc>Objects that are near, or proximate to each other, tend to be grouped together.</p>
<a href=https://blog.marvelapp.com/psychology-principles-every-uiux-designer-needs-know/ class=btn data-transition-page>UI/UX Psychology Principles<br><br>Thanasis Rigopoulos | Marvel</a><p></p>
<a href=https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2 class=btn data-transition-page>The Principles of Gestalt<br><br>Interation Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/circle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #80495E">
<img src="Images/LawofSImilarity.png">
</div>
<div class=poster__info>
<p class=poster__info-count>09<p class=poster__info-desc>The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.</p>
<a href=https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1 class=btn data-transition-page>The Principles of Gestalt<br><br>Interation Design Foundation</a><p></p>
<a href="https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/" class="btn" data-transition-page>Design Principles<br><br>Steven Bradley | Smashing Magazine</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #819DD6">
<img src="Images/LawofUniformConnectedness.png">
</div
><div class=poster__info>
<p class=poster__info-count>10<p class=poster__info-desc>Elements that are visually connected are perceived as more related than elements with no connection.</p>
<a href="https://www.andyrutledge.com/gestalt-principles-3.html" class="btn" data-transition-page>Principles of Perception<br><br>Andy Rutledge</a><p></p>
<a href=https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2 class=btn data-transition-page>The Principles of Gestalt<br><br>Interation Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #F55F4E">
<a href=https://en.wikipedia.org/wiki/Miller%27s_law data-transition-page>
<img src="Images/MillersLaw.png">
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>11<p class=poster__info-desc>The average person can only keep 7 (plus or minus 2) items in their working memory.<br><br>Chunking is an effective method of presenting groups of content in a manageable way.</p>
<a href="https://www.khanacademy.org/test-prep/mcat/social-sciences-practice/social-science-practice-tut/e/miller-s-law--chunking--and-the-capacity-of-working-memory" class="btn" data-transition-page>Miller’s Law<br><br>Khan Academy</a><p></p>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #B54A48">
<img src="Images/OccamsRazor.png">
</div>
<div class=poster__info>
<p class=poster__info-count>12<p class=poster__info-desc>Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.<br><br>Analyze each element and remove as many as possible, without compromising the overall function.</p>
<a href="https://medium.com/@jonyablonski/designing-with-occams-razor-3692df2f3c7f" class="btn" data-transition-page>Designing with Occam’s Razor <br><br>Jon Yablonski | Medium</a><p></p>
<a href="https://www.interaction-design.org/literature/article/occam-s-razor-the-simplest-solution-is-always-the-best" class="btn" data-transition-page>Occam’s Razor<br><br>Interaction Design Foundation</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/circle.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #1BAABF">
<a href=https://en.wikipedia.org/wiki/Pareto_principle data-transition-page>
<img src="Images/ParetoPrinciple.png">
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>13<p class=poster__info-desc>The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.<br><br>Focus the majority of effort on the areas that will bring the largest benefits to the most users.</p>
<a href="https://medium.com/design-ibm/the-80-20-rule-in-user-experience-1695de32aaae" class="btn" data-transition-page>The 80/20 Rule <br><br>Arin Bhowmick | Medium</a><p></p>
<a href="https://www.interaction-design.org/literature/article/the-pareto-principle-and-your-user-experience-work" class="btn" data-transition-page>The Pareto Principle <br><br>Interaction Design Foundation</a><p></p>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/dot-grid.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #43A852">
<a href=https://en.wikipedia.org/wiki/Robustness_principle data-transition-page>
<img src="Images/PostelsLaw.png">
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>14<p class=poster__info-desc>Be liberal in what you accept, and conservative in what you send.<br><br>Be flexible and tolerant to any actions the user could possibly take. This means accepting variable input from users, translating input to meet the requirements, defining boundaries for input, and providing clear feedback to the user.</p>
<a href=https://markboulton.co.uk/journal/design-systems-and-postels-law class=btn data-transition-page>Postel’s Law<br><br>Mark Boulton</a>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/circle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/oval.svg alt=graphic></div>
</div>
<article class="poster poster--reverse">
<div class=poster__body style="background-color: #74A679">
<a href=https://en.wikipedia.org/wiki/Von_Restorff_effect data-transition-page>
<img src="Images/VonRestorff.png">
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>15<p class=poster__info-desc>The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.</p>
<a href=https://blog.marvelapp.com/psychology-principles-every-uiux-designer-needs-know/ class=btn data-transition-page>UI/UX Psychology Principles<br><br>Thanasis Rigopoulos | Marvel</a><p></p>
</div>
</article>
<div class=graphics>
<div class="graphics__item graphics__item--1 rellax" data-rellax-speed=-3 data-rellax-percentage=0.5><img src=Images/triangle.svg alt=graphic></div>
<div class="graphics__item graphics__item--2 rellax" data-rellax-speed=-1 data-rellax-percentage=0.5><img src=Images/triangles.svg alt=graphic></div>
<div class="graphics__item graphics__item--3 rellax" data-rellax-speed=1 data-rellax-percentage=0.5><img src=Images/square.svg alt=graphic></div>
</div>
<article class=poster>
<div class=poster__body style="background-color: #42928C">
<a href=https://en.wikipedia.org/wiki/Bluma_Zeigarnik data-transition-page>
<img src="Images/ZeigarnikEffect.png">
</a>
</div>
<div class=poster__info>
<p class=poster__info-count>16<p class=poster__info-desc>People remember uncompleted or interrupted tasks better than completed tasks.<br><br>Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase the likelyhood it will be completed.</p>
<a href=https://medium.com/coffee-and-junk/design-psychology-zeigarnik-effect-a53688b7f6d1 class=btn data-transition-page>The Zeigarnik Effect<br><br>Abhishek Chakraborty | Medium</a>
</div>
</article>
</div>
</div>
<section class=section>
<div class="container container-med text-align-center">
<a href=#laws class=top-link data-scroll>
<svg class=icon width=24 height=24 viewBox="0 0 100 100"><use xlink:href=#arrow-up /></svg> Back to top</a>
</div>
</section>
</div>
</main>
<section id=menu class=modal data-modal-window>
<header class=modal__header>
<a class=modal__close data-modal-close href=#>
<svg class=icon width=18 height=18 viewBox="0 0 100 100"><use xlink:href=#close /></svg>
<span class=visuallyhidden>Close</span>
</a>
</header>
<div class="modal__container container container--med">
<div class=modal__body>
<div class=modal__section>
<nav role=navigation class=nav>
<ul class=nav__list>
<li class=nav__list-item><a href=index.html#aesthetic-usability-effect class=nav__link data-transition-page>Aesthetic Usability Effect</a></li>
<li class=nav__list-item><a href=index.html#doherty-threshold class=nav__link data-transition-page>Doherty Threshold</a></li>
<li class=nav__list-item><a href=index.html#fittss-law class=nav__link data-transition-page>Fitts’s Law</a></li>
<li class=nav__list-item><a href=index.html#hicks-law class=nav__link data-transition-page>Hick’s Law</a></li>
<li class=nav__list-item><a href=index.html#jakobs-law class=nav__link data-transition-page>Jakob’s Law</a></li>
<li class=nav__list-item><a href=index.html#law-of-common-region class=nav__link data-transition-page>Law of Common Region</a></li>
<li class=nav__list-item><a href=index.html#law-of-pragnanz class=nav__link data-transition-page>Law of Prägnanz</a></li>
<li class=nav__list-item><a href=index.html#law-of-proximity class=nav__link data-transition-page>Law of Proximity</a></li>
<li class=nav__list-item><a href=index.html#law-of-similarity class=nav__link data-transition-page>Law of Similarity</a></li>
<li class=nav__list-item><a href=index.html#law-of-uniform-connectedness class=nav__link data-transition-page>Law of Uniform Connectedness</a></li>
<li class=nav__list-item><a href=index.html#millers-law class=nav__link data-transition-page>Miller’s Law</a></li>
<li class=nav__list-item><a href=index.html#occams-razor class=nav__link data-transition-page>Occam’s Razor</a></li>
<li class=nav__list-item><a href=index.html#pareto-principle class=nav__link data-transition-page>Pareto Principle</a></li>
<li class=nav__list-item><a href=rulesoindexfux.html#postels-law class=nav__link data-transition-page>Postel’s Law</a></li>
<li class=nav__list-item><a href=index.html#von-restorff-effect class=nav__link data-transition-page>Von Restorff Effect</a></li>
<li class=nav__list-item><a href=index.html#zeigarnik-effect class=nav__link data-transition-page>Zeigarnik Effect</a></li>
</ul>
</nav>
</div>
<aside class="modal__section text-sml">
<p>Rules of UX is a collection of the maxims and principles that designers can consider when building user interfaces.
<p>It was created by <a href=http://andrebass.co>Andre Bass</a>.
<p>Tools used to create this site include paper, pencil and <a href=https://www.sketchapp.com/ >Sketch App</a> for design, and <a href=https://code.visualstudio.com >Visual Studio Code</a> for HTML/CSS templating.
<p>Typography is set in <a href=https://www.ibm.com/plex/ >IBM Plex Sans and Plex Mono</a>, an open-source typeface by IBM.
<p>©Andre Bass 2022 | All Rights Reserved<hr>
</aside>
</div>
</div>
</section>
<script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js></script>
</html>