Similarity
-
****means that elements that look alike (in shape, size, or color, for instance) are perceived to have the same function.
-
To help users navigate your app quickly, you want to keep “like with like” for consistency.
-
For example, if you’re including avatars or images of users in the design of your app, you’ll want to make sure that the placeholders for those avatars are the same shape and size in your wireframes.
-
This similarly indicates to users that the elements have the same function
Proximity
-
means that elements that are close together appear to be more related than things that are spaced farther apart.
-
imagine you draw a button labeled “learn more” close to the text of an article. If a user presses the button, they’ll assume they can learn more about the content of that article.
-
to your advantage! Alternatively, if you leave a lot of space between the text of the article and the “learn more” button, users might not understand the connection between the two elements.
-
A few seconds of confusion or hesitation can mean the difference between a user continuing to the next page of your app or closing it to find something more useful.
Common region
-
means that elements located within the same closed area are perceived to be grouped together.
-
have you ever noticed that navigation bars at the top or bottom of a mobile phone screen are usually in a different color or grouped with a border? That’s the Gestalt Principle of common region
-
in the real world. By creating a border and adding a block of color to a navigation bar, you can anchor the icons for the main pages of your app, instead of having the icons float on the screen.
-
This design tip helps users recognize that the icons in the navigation bar are more important than others and are perceived to be grouped together.
