Gestalt Principles in UI Design
-
Upload
t-design-center -
Category
Design
-
view
247 -
download
13
Transcript of Gestalt Principles in UI Design
![Page 1: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/1.jpg)
www.t-design.center
![Page 2: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/2.jpg)
2
ContentIntroductionWhat are Gestalt Principles?
Gestalt Principles in UI Design① Similarity
② Proximity
③ Enclosure
④ Continuation
⑤ Figure & Ground
![Page 3: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/3.jpg)
3
1. Introduction
• Gestalt (German) means shape or form
• Gestalt Principles originally came from a
psychology movement in Berlin (1920s)
• Attempt to understand human visual
perception
![Page 4: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/4.jpg)
4
1. Introduction
What is
the first
thing you
see?
![Page 5: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/5.jpg)
5
1. Introduction
At first glance
you would see
a human face
![Page 6: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/6.jpg)
6
1. Introduction
But looking
more closely
you start to see
the details
![Page 7: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/7.jpg)
7
1. Introduction
The idea of Gestalt principles:
“The whole of something is more
important to our understanding
than the individual parts.”
![Page 8: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/8.jpg)
8
2. Gestalt Principles
in UI Design
![Page 9: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/9.jpg)
9
Similarity
Similar objects are seen as
grouped
![Page 10: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/10.jpg)
10
Similarity
• Each icon has a different image
• These icons are similar in shape and style
• They are perceived to be one group and share the same level of function
![Page 11: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/11.jpg)
11
Similarity
• Each block has a different icon
• The blocks share similar structure: an icon with text underneath
• They are perceived to be one group and share similar function: create a new blog post
• Users know exactly what UI elements to look for
![Page 12: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/12.jpg)
12
Proximity
When elements are close together, they are seen as
grouped
![Page 13: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/13.jpg)
13
Proximity
By using white space, we can separate as well as build the relationship
between elements
![Page 14: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/14.jpg)
14
Proximity
• Language & Currency fields are put close enough to be seen as one group
• The links on the right side are arranged with proper amount of white space. They are seen as 3 small groups and together form one big group
![Page 15: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/15.jpg)
15
Things that have a boundaryaround them are seen as
grouped
Enclosure
![Page 16: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/16.jpg)
16
Enclosure
• Have you ever noticed the way Facebook elements are grouped together?
![Page 17: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/17.jpg)
17
Enclosure
• There is a border around the whole post
• This is to separate one post to another
![Page 18: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/18.jpg)
18
Enclosure
• There is another border around the link representation
• The image, the title along with a short description appear to be grouped
![Page 19: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/19.jpg)
19
Enclosure
• This area at the bottom is for social interactions and is formed by several lines
• This area is also divided into different sections
![Page 20: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/20.jpg)
20
Enclosure
• Enclosure is very helpful when you have limited space with a lot of information
![Page 21: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/21.jpg)
21
Human eye follows lines, curves, or a sequence of
shapes
Continuation
![Page 22: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/22.jpg)
22
Continuation
Human eyes tend to see a single dotted line instead of a series of blue dots
![Page 23: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/23.jpg)
23
Continuation
• The light gray line represents the length of the track
• There is another dark gray line placed over the light gray line
• When the dark line grows, we understand the passage of time
![Page 24: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/24.jpg)
24
Elements are seen as either “figures” or “grounds”.
Figure & Ground
![Page 25: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/25.jpg)
25
Figure & Ground
• Very common in modals
• Figure: the Welcome box
• Ground: the transparent background that softens the content in the back
![Page 26: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/26.jpg)
26
Summary
Similarity Proximity Enclosure
Continuation Figure & Ground
![Page 27: Gestalt Principles in UI Design](https://reader034.fdocuments.us/reader034/viewer/2022042423/589c6e651a28abe96c8b5cd9/html5/thumbnails/27.jpg)
THANK YOU!
+ 1 802-735-1392+ 61 414-734-277+81 3-6432-4994www.tmasolutions.com
North America number:Australia number:Japan number:Website:
+84 8 3997-8000 Ext: 5639+84 908-676-212+84 8 [email protected]
Tel:Mobile:Fax:Email: