Visual Design:Grouping

From KDE-HIG_Wiki

<todo> Placement influences perception of related items and groups. Refer to Laws of Gestalt</todo>

Table of contents

1 Grouping Components 1.1 Guidelines 1.2 Rationale 2 Perceptional Laws of Grouping 2.1 Guidelines 2.2 Rationale

Grouping Components

In user interface design, grouping single items into meaningful item groups increases the user's ability to process the application's range of functionality and information. The following guidelines describe how and which information should be grouped.

Guidelines

• Join related elements in a group and separate them visibly from other groups.
• If a group contains more than eight elements, try to form meaningful subgroups.
• Within a group, move important functions to the prominent positions.
• Within a group, try to find a conventional order (e.g. days of a week), or make sure if there is another well-established order.
• If the sequence of usage is determined, or there is another logical or functional order, arrange the items accordingly.
• If the frequency of usage is known, and the number of items is about eight, move the most frequently used icons to prominent positons.
• If none of the above rules is applicable, use an alphabetical order.

Rationale

The cognitive capabilities of humans are limited. We are able to process no more than 7 (+/-2) elements at once. If more elements are presented, the cognitive load exceeds the limits of our working memory which results in information loss.

Instead, when single pieces of information are grouped into meaningful information chunks, humans process the whole chunk as one piece of information containing a more abstract idea of the concepts grouped in this chunk.

For example, instead of providing the mixed list:

'dog', 'rose', 'violet', 'cat', 'lily', 'rabbit'

one might form two groups:

Pets: 'dog', 'cat', 'rabbit' versus

Flowers: 'rose', 'violet', 'lily'

In the latter case, information is grouped into two chunks, each containing the elements of the previous list. When being presented the two lists, in the first case, we have to go through each single item in order to gain an overview of what is listed there. In the second case, we simply scan the group titles and knwo what is presented there.

In short, grouping information allows for a huger amount of information being processed at once.

Regarding interface design this means that grouping single items into meaningful item groups increases the user's ability to process the application's range of functionality and information.

Perceptional Laws of Grouping

The effects of a meaningful grouping of items in an user interface should be supported by visual design and layout.

Guidelines

The main factors that determine grouping are:

• Proximity - Elements tend to be grouped together depending on their closeness.
• Similarity - Items that are similar in some way tend to be grouped together.
• Closure - Items are grouped together if they tend to complete a pattern.
• Simplicity - Items are organized into figures according to symmetry, regularity, and smoothness.

e.g.

<todo> Example screenshots for good and bad grouping </todo>

Rationale

Humans tend to perceive objects as well-organized patterns rather than separate component parts. When we open our eyes we do not see fractional particles in disorder. Instead, we notice larger areas with defined shapes and patterns. This preprocessing of information happens automatically, so the recognition of patterns and groups does not waste cognitive resources.

That characteristic of our visual system can be used to visualize relationships between information, options and functions in an application interface. Without reading labels or having a closer look at the contents presented in a window related items can be identified. Instead of reading each single item, the user acquires groups of information and by this reduces the amount of cognitive load.