 The user interface has an impact on the learning experience and the

amount of knowledge retained – it has a crucial role in learning

 According to Gagne’s nine events of instruction, screen design has the

initial role of gaining learner attention.

 All interactions in online learning occur through the visual presentation.

 It is not just about which multimedia components are used, but also
about where these components are placed on the screen.
 The Gestalt Principles of grouping (“Gestalt” is German for “unified whole”).

 It represent the culmination of the work of early 20th-century German psychologists Max
Wertheimer, Kurt Koffka and Wolfgang Kohler, who sought to understand how humans
typically gain meaningful perceptions from chaotic stimuli around them.

 Wertheimer and company identified a set of laws addressing this natural compulsion to
seek order amid disorder, where the mind “informs” what the eye sees by making sense of
a series of elements as an image, or illusion.

 These principles are organized into five categories: Proximity, Similarity, Continuity,
Closure, and Connectedness with various sub-categories.

 In the century since, designers have deployed Gestalt Principles extensively, crafting
designs with well-placed elements that catch the eye as larger, whole images so viewers
instantly make positive connections with the organizations represented.
 Gestalt Principles

The Gestalt law of proximity states that "objects or shapes that are close to one another
appear to form groups". Even if the shapes, sizes, and objects are radically different, they
will appear as a group if they are close.

 Refers to the way smaller elements are "assembled" in a composition.

 Also called "grouping," the principle concerns the effect generated when the collective
presence of the set of elements becomes more meaningful than their presence as
separate elements.

 Arranging words into sentences or titles is an obvious way to group unrelated elements
to enhance their meaning.

 Grouping the words also changes the visual and psychological meaning of the
composition in non-verbal ways unrelated to their meaning.

 Elements which are grouped together create the illusion of shapes or planes in space,
even if the elements are not touching.
 Gestalt Principles

Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close
 Gestalt Principles

 The principle of similarity states that, all else being equal, perception lends itself to
seeing stimuli that physically resemble each other as part of the same object, and stimuli
that are different as part of a different object.

 This allows for people to distinguish between adjacent and overlapping objects based on
their visual texture and resemblance. Other stimuli that have different features are
generally not perceived as part of the object.

 Our brain uses similarity to distinguish between objects which might lie adjacent to or
overlap with each other based upon their visual texture.

 An example of this is a large area of land used by numerous independent farmers to grow
crops. Each farmer may use a unique planting style which distinguishes his field from
another. Another example is a field of flowers which differ only by color.
 Gestalt Principles

We seek differences and similarities in an image and link similar elements.

 Gestalt Principles

The principles of similarity and proximity often work together to form a

Visual Hierarchy. Either principle can dominate the other, depending on
the application and combination of the two. For example, in the grid, the
similarity principle dominates the proximity principle and you probably
see rows before you see columns.
 Gestalt Principles

 The principle of closure refers to the mind’s tendency to see complete figures or forms even
if a picture is incomplete, partially hidden by other objects, or if part of the information
needed to make a complete picture in our minds is missing.

 For example, if part of a shape’s border is missing people still tend to see the shape as
completely enclosed by the border and ignore the gaps. This reaction stems from our
mind’s natural tendency to recognize patterns that are familiar to us and thus fill in
any information that may be missing.

 Closure is also thought to have evolved from ancestral survival instincts in that if one was to
partially see a predator their mind would automatically complete the picture and know that
it was a time to react to potential danger even if not all the necessary information was
readily available.
 Gestalt Principles

If part of a shape’s border is missing people still tend to see the shape as completely enclosed by the
border and ignore the gaps.
 Gestalt Principles

 The law of symmetry states that the mind perceives objects as being symmetrical
and forming around a center point. It is perceptually pleasing to divide objects
into an even number of symmetrical parts.

 When two symmetrical elements are unconnected the mind perceptually

connects them to form a coherent shape. Similarities between symmetrical
objects increase the likelihood that objects are grouped to form a combined
symmetrical object.

 To put simply, Objects must be balanced or symmetrical to be seen as complete

or whole.
 Gestalt Principles

[ ] { } ( )
The figure depicting the law of symmetry shows a configuration of brackets. When the image is perceived,
we tend to observe three pairs of symmetrical brackets rather than six individual brackets.
 Gestalt Principles

 Objects with a common movement, that move in the same direction, at the same
pace , at the same time are organised as a group.

 Objects are perceived as lines that move along the smoothest path.

 We perceive elements of objects to have trends of motion, which indicate the

path that the object is on.

 This allows people to make out moving objects even when other details (such as
the objects color or outline) are obscured. This ability likely arose from the
evolutionary need to distinguish a camouflaged predator from its background.

 The law of common fate is used extensively in user-interface design, for example
where the movement of a scrollbar is synchronised with the movement (i.e.
cropping) of a window's content viewport; The movement of a physical mouse is
synchronised with the movement of an on-screen arrow cursor, and so on.
 Gestalt Principles

Birds may be distinguished from their background as a single flock because they are moving in the same
direction and at the same velocity, even when each bird is seen, from a distance, as little more than a dot.
 Gestalt Principles

 The law of continuity states that elements of objects tend to be grouped together,
and therefore integrated into perceptual wholes if they are aligned within an
object.

 In cases where there is an intersection between objects, individuals tend to

perceive the two objects as two single uninterrupted entities. Stimuli remain
distinct even with overlap.

 We are less likely to group elements with sharp abrupt directional changes as
being one object.
 Gestalt Principles

Objects will be grouped as a whole if they are co-linear, or follow a direction

 Gestalt Principles

 The law of continuity states that elements of objects tend to be grouped together,
and therefore integrated into perceptual wholes if they are aligned within an
object.

 In cases where there is an intersection between objects, individuals tend to

perceive the two objects as two single uninterrupted entities. Stimuli remain
distinct even with overlap.

 We are less likely to group elements with sharp abrupt directional changes as
being one object.
 Gestalt Principles

 Past experience is perhaps the weakest gestalt principle. In conjunction with any
of the other principles, the other principle will dominate over the past experience
principle.

 Past experience is unique to the individual, so it’s difficult to make assumptions

about how it will be perceived. However, there are common experiences we all
share. For example, a lot of color meaning arises out of past experience.

Having seen traffic lights throughout our

lives, we expect red to mean stop and
green to mean go. You probably see the
image as a tra ffic light on its s ide,
because of the three common colors.
That’s past experience at work.
 Gestalt Principles

 This principle is similar to the common fate principle above. Lines are often
interpreted as pointing or moving in some direction. Parallel lines are seen as
either pointing or moving in the same direction and are thus related.

 It should be noted that for parallelism to be perceived, the lines can also be
curves or shapes, though with the latter the shapes should be somewhat line-like
in order for them to appear parallel.

Elements that are parallel to each other

are seen as more related than elements
not parallel to each other.
 Gestalt Principles

 Figure/ground refers to the relationship between positive elements and negative

space. The idea is that the eye will separate whole figures from their background in
order to understand what’s being seen. It’s one of the first things people will do when
looking at any composition.

 The figure/ground relationship can be either stable or unstable depending on how

easy it is to determine which is which. The classic example of where the relationship is
unstable is the left image above. You either see a vase or two faces depending on
whether you see the black color as figure and the white as ground, or vice versa. That
you can easily bounce back and forth between the two perceptions demonstrates the
unstable relationship.

 The more stable the relationship, the better we can lead our audience to focus on
what we want them to see. Two related principles can help us:

- Area. The smaller of two overlapping objects is seen as figure. The larger is seen as
ground. You can see this in the right image above. The smaller shape is the figure
regardless of color.

- Convexity. Convex rather than concave patterns tend to be perceived as figures.

 Gestalt Principles

Elements are perceived as either figure (the element in focus) or ground (the
background on which the figure rests).
 Gestalt Principles

 The principle of good form refers to the tendency to group together forms of
similar shape, pattern, color, etc.

 Even in cases where two or more forms clearly overlap, the human brain
interprets them in a way that allows people to differentiate different patterns
and/or shapes.

An example would be a pile of presents

where a dozen packages of different size
and shape are wrapped in just three or so
p a t t e r n s o f w r a p p i n g p a p e r, o r t h e
Olympic Rings.