(Yes, other aspects of this design could be further improved, such as grouping the Search label and the corresponding icon using either proximity or common region.) On tablet, there is not enough screen space available to maintain this separation, and so, to avoid having the Search appear to be part of the main navigation, it was shifted up, grouped with other utility-menu items. To avoid these areas from being perceived as a single group, the Search is shifted up, away from the main navigation altogether. On smaller screens, however, maintaining this spacing is not possible. Wellington City Council website, as seen on a desktop monitor: Extra whitespace to the left of the Search button separates it from the rest of the main navigation and identifies it as a different type of functionality, even though it shares the same font treatment with the main categories in the navigation menu. This whitespace is critical for making the Search function stand out from the rest of the main menu. However, the extra whitespace between the main navigation and Search indicates that they belong to separate groups and thus have distinctive functionalities. For example, in the header area of the Wellington City Council website, the Search function is located on the same line as the main navigation of the site when viewed on a large screen. Using varying amounts of whitespace to either unite or separate elements is key to communicating meaningful groupings. Even when including differing shapes within each group, these two groupings are still clear.
Whitespace separates the shapes into two distinct grouping through the principle of proximity. The practice of placing related elements close together and separating unrelated elements can be seen almost everywhere in UI design.
Proximity is one of the most important grouping principles and can overpower competing visual cues such as similarity of color or shape. UI design heavily relies on proximity and other grouping principles, as correctly interpreting which elements are related is critical to successfully interacting with the interface.ĭefinition: The principle of proximity states that items close together are likely to be perceived as part of the same group - sharing similar functionality or traits. Later, more grouping principles (such as common region) were added to the original Gestalt list. These principles include proximity, similarity, and closure - which are all important in the visual design of digital interfaces. Gestalt principles were discovered in the first half of the 20th century by Gestalt psychologists, who were trying to make sense of how people visually perceive the world - specifically, how people decide whether certain elements are part of the same group or not.
0 kommentar(er)
