You cannot understand good design if you do not understand people; design is made for people.
In essence, user-centred design has been around as long as design. It is the art and craft of learning to understand how the human mind works, what influences perception, learning and understanding - and to implement those findings to the design process of the products we create. This could be actual objects or digital outputs. The principles involved remain the same.
Explained simply, Gestalt theory is a psychological concept which focuses on how we perceive and understand the world around us. During its inception, psychologists studied how the human mind has the tendency to organise information by recognising and drawing on patterns which allow us to see different perspectives. Factors such as proximity, similarity, closure, and continuity influence our understanding of the whole.
The whole is more than the sum of its parts.
It is more correct to say that the whole is something else than the sum of its parts, because summing is a meaningless procedure, whereas the whole-part relationship is meaningful.
Kurt Koffka, Principles Of Gestalt Psychology (1935)
User-centred design seeks to understand the thinking and understanding of people using the end product - their motivations and needs, their behaviours and mindsets. Concepts such as the gestalt theory can give us insights, and offer excellent methods for research and study to guide the work on usability and accessibility, and contribute to enhancing the user experience as well.
Art, design and gestalt theory
The history of Gestalt theory is widely known and while much has been published about the core principles and how they apply to design, it is interesting to find out about its origin. This abstract by author, designer, and design historian Roy R. Behrens elaborates on its background and the people involved in the original research. It is a truly excellent read: Art, design and gestalt theory (published on Leonardo On-Line).
The following video talk (duration: 40 minutes) is based on that abstract and gives a fascinating account of the early beginnings of the psychology behind this principle, parallels to philosophies and its influence on design as an art and a craft. I would highly recommend that you afford yourself the time to view it, or watch it on YouTube.
Credits & thank you: The video and stills of this talk are included in this chapter thanks to the kind permission of Roy Behrens himself. Thank you so much, Roy.
The following are quotes and video stills taken from this talk, showing various images referred to in early Gestalt theory writings.
... it evokes our fascination ...
because it can interchangeably appear to be two very distinct images. However, even though those images are contained in the same space on a single sheet of paper we cannot see both at the same moment in time. But we can see them successively when we focus on the black areas we see two facing profiles while the white shape is ignored.
Behrens, Art, design and gestalt theory, 2023
... it was Wertheimer's contention that certain 'Gestalt' or whole effects are more likely to resolve because of our inherent tendency to group together, or
constantly to see as belonging together, components that are visually alike. Known as similarity grouping that are literally together in space, called proximity grouping and that even though placed apart, they are aligned on paths in space... he also spoke of common fate which refers to things that move alike. Wertheimer also emphasized the factor of closure which is our built-in in
inclination to go beyond the information given to complete the incomplete ...
Behrens, Art, design and gestalt theory, 2023
Sequential image cartoons, called
evolutionary or metamorphic images, in which a component appears to evolve by a series of steps into a surprisingly different thing make use of similarities. And there are countless well-known examples of art in which fruits
vegetables flowers or whatever are cleverly arranged to suggest a human face. All this was concurrent with the growing popularity of surrealism and Freudian dream imagery.
Behrens, Art, design and gestalt theory, 2023
Bauhaus, Gestalt Theory, and Problem-Solving:
THINKING OUTSIDE THE BOX
The psychology behind the Gestalt theory is what makes the following principles so invaluable to design work. These views are inherent in us all and this means that we can, to some extent at least, predict how certain aspects of our designs will be interpreted.
A good design will allow people to use and interact with it with the least demand on cognitive load as possible. If we follow these principles and ensure that we test our designs as they evolve, we will be able to create user-friendly and delightful designs.
Gestalt theory has informed UX since its early days ~ and more approaches and methods continue to evolve. Let's look at some popular guiding principles.
'Gestalt' is German and means form or shape ~ and is often interpreted as meaning pattern. Gestalt theory implies that our visual perception is more complex than a mere recognition of individual parts.
Note about Aristotle: this quote is different from the ancient quote of similar phrasing but different meaning. Aristotle’s Metaphysics (Book 8), published 1045a:
"With regard to the difficulty [...] in connection with definitions and numbers, what is the cause of the unification? In all things which have a plurality of parts, and which are not a total aggregate but a whole of some sort distinct from the parts, there is some cause; ...(quoted from Perseus Hopper)
Max Wertheimer was a psychologist and one of the three founders of Gestalt psychology, and known for his book, Productive Thinking, and for conceiving the phi phenomenon as part of his work in Gestalt psychology. Read more on wikipedia.
Overloaded with stimuli, our tendency is to simplify complex input and unify complicated shapes into single entities via form detection. Psychologists have found that in order to cope with complexities, we seek patterns and order to prevent being overwhelmed. We are more likely to remember simple shapes than complex or intricate visuals. We aim to understand visual input by looking for the simplest form first.
The olympic rings are often used as an example to explain and demonstrate this phenomenon. When we look at this iconic visual, we clearly see five rings which overlap or interlock. Our perception leans towards the simple shape of circles/rings. While we could interpret the visual as open loops, like the letter 'c', for example, with intersected lens shapes, our understanding prefers the simpler interpretation.
The following principles are based on study and research and will affect most people. They do not apply separately—or necessarily combined either—nor do they apply to everyone's perception, of course. However, these psychological findings give us great insights and guide our approach to design. They can help us understand feedback and the responses to user testing, ultimately leading to a better final result.
User experience design draws on the findings of the Gestalt principles to recognise established patterns and offer methods both for the design work but also the user research. Being aware of the commonalities in our psychology and understanding will support our approach to user testing and the analysis of the findings.
Gestalt psychology found that we perceive objects as groups if they are shown in vicinity and closeness to each other. Focused on finding meaning and seeing the 'whole', we tend to perceive adjacent elements as related, as groups, as one distinct entity, and assume they 'belong' together.
When we look at this wireframe we see the differently sized rectangles, positioned in a clear structure via the grid. We interpret the vicinity of the rectangles, separated by the gaps, as groups and recognise two small groups on the left. On the right, we perceive the 2 vertical columns as related while each column is seen as its own group as well.
Elements which are similar to each other are perceived as a group or as being related, even if separated by space/distance. Similarities could be evident by shape, colour, size or orientation and will set the expectation of similar meaning or being related to the same/similar functions.
Many online magazines and newspapers make use of this method to distinguish between the most recent published articles and topical discussions, for example. The homepage might set the main headline or latest item apart by giving it more space, by adding a large feature image and using bold type to draw attention. Similarities in colour and content are used to highlight context and related topics, for example.
Our tendency to see patterns and simple shapes means that we will perceive objects and visual elements in relation to each other and aim to see connections. When we see a mirrored visual, we will see the whole form influenced by the inherent symmetry.
With a balance between elements in size, shape, rotation and position, symmetry creates stability. When applied to design and layout, it will show a clear structure and clarity. This approach might be linear and consistent symmetry or take the form of transitional symmetry through variation and repetition.
While this transitional symmetry is useful to establish a calm and clear impression of the page through a balanced layout, an asymmetric approach can serve us well to build in emphasis and guide user action. An example of this is Mastodon's advanced interface for the website which features multiple columns. It places the search and inputs into a sparsely populated left column. This addition of white space distinguishes this space from the other columns and makes it easy to perform searches or to publish new items. Additional content is neatly organised in customisable columns, making this version of the platform both easy to use and a pleasure to browse.
The icon shows a visual which could be comprised of four lines, or be seen as two lines with sharp angles. Yet most of us will interpret this as two intersecting lines: one curved line (going from top left towards bottom right) and one straight line (going from bottom left to top right).
We have a tendency to perceive fluid or continuous forms, rather than jagged or irregular ones. With intersecting lines, we will follow the line into the same direction instead of changing direction at the intersection. This also applies to page layout on the web where the 'line' is the flow of content, with visual markers (headings, images, white space) establishing the 'direction'.
The following wireframe shows what might be the admin screen of a CMS, for example. It is quite busy and offers multiple functions and various content types. This could appear quite overwhelming on first glance. However, our tendency to follow the flow of content soon allows us to understand the content structure and interact with the presented options.
When we consider page layout of a collection of articles on a blog, for example, we will strive for an engaging and interesting layout to prompt click-throughs. In this case there seems to be a common debate that happens between client and designer. The following two versions show the different approaches that can be taken and the difference in how our eyes would view and read the presented content.
Looking at the page (version 1) superficially, the client (who is less drawn into reading the actual content in hand as they are familiar with it) might request a less linear presentation. They might feel that this layout is boring and predictable. While it is true that the page presents an expected structure, it is also true that there is less mental effort involved in viewing the collection of posts for the target audience (who are new to the content and will be drawn into reading the page's text).
One suggestion for a more interesting layout might be to iterate the image alignment between left and right to the text (version 2) from post to post. The layout would then show more variation and might deliver a more interesting presentation on first glance. However, as our eyes tend to follow the line ~ this version now goes against our instinct and will slow down skim reading quite substantially. It will require more concentration and the zigzag jagged line of focus will cause a heavier cognitive load ~ therefore being detrimental to a pleasant reading experience. The better design solution therefore has to be the more standard and linear layout which will establish a much better user experience.
There are clear patterns of synchronised movement which are common in our everyday lives: the way we walk on pavements and at stations, the way traffic flows across the road system of our cities ~ we could call it herd instinct as the movement heads into the same direction. When one small part breaks the flow of movement, we instinctively notice and recognise this break from the norm.
The common fate principle was not part of the original Gestalt theories but has recently been added as it is in line with the overall principles. The most popular example given is the phenomenon of murmurations, the flight patterns of a flock of birds. While the birds are following their individual paths, not all into the same direction at once - we perceive them as one group moving into the same direction.
In interface design across websites as well as applications this principle is used to establish a clear and intuitive pattern. Menus, submenus and toggle panels all behave in the same manner, open/close/move in the same direction. This predictable behaviour contributes to the ease of use.
The movement itself can be graphic, thematic, or conceptual. It is a very effective method to apply across the design of layout, interaction and interfaces. Its effect is inherent in how we understand visual clues and is one method to create effective designs which feel 'naturally' intuitive and accessible.
Our perception seeks the 'whole' to form meaning and make sense of a visual, even if gaps are present. We recognise shapes despite gaps and will 'fill in' the blanks to interpret an image. The circular icon shows partial shapes and lines - yet we are able to distinguish two triangles.
This is a useful principle to consider when we aim to indicate content on a webpage that is not visible within the viewport. Borrowing a term from newspaper publishing, 'above the fold' content was carefully crafted to be attention grabbing to promote sales. This would typically include the eye-catching headline and image - any cut-off would be due to the fold of the paper when placed onto the shelf.
When publishing on the web, the limits of display are inherent in the size of the viewport. By showing partial content and for example, allowing an image to be shown only partially, our users will then assume the 'whole' and understand that there is more to see. This will trigger them to scroll or swipe to view the full content.
This rule states that we perceive objects as a figure, one which stands out against the background. This perception can be stable or cause multistability . The latter being the case with the famous image of Rubin's vase, as shown in this image. The visual can be seen in two very different ways ~ and we are even able to switch between both. With a focus on the light colour, we can see two faces, looking at each other. Considering the dark colour instead, we can recognise a vase.
When we design interfaces and interactive elements such as forms, this rule can guide our approach to both size, shape, position and colour. Colour and contrast can play an important role in how easy the from inputs and buttons are recognised and used.
If the design of a simple form, such as a newsletter sign-up form, for example, uses low contrast, its ease of use is immediately reduced. With strong contrast, clear highlight of the input and submit button, the form becomes much more accessible.
By connecting elements through colour, lines, direct visual interlinks, shapes or frames the perception of these elements is that they are a group and related. Additional elements, even if in vicinity or featuring other similarities (as stated in other Gestalt principles), will not affect this conclusion.
This is another powerful method which allows us to ensure a meaningful layout which results in ease of use of our websites and their content and functions. By framing related elements, or connecting them through lines and shapes, we can ensure a clear structure and visual link between related elements.
In the context of perception and cognition, multistability describes the phenomenon where a single stimulus can lead to different perceptual interpretations. ↵
Edgar John Rubin (1886-1951) was a Danish psychologist, recognised for his work on figure/ground perception, the famous example being the optical illusion of the Rubin vase. ↵
Lead by cognition
Following on from the influences of the Gestalt theories, there are additional findings which can inform our work as designers. Some of the following are proven theories while others are observations which can help us understand our users better.
Good design tends to be informed by the psychological aspects involved. When we are aware of cognitive behavioural patterns, we can create designs which feel intuitive and gently guide our users' paths. Understanding conscious or subconscious bias in how we see and interpret the world can help us to plan fitting content structures and interfaces and to refine our use of type, colour and space to create pleasing and user-friendly designs.
The Hick-Hyman Law was a result of research conducted by British psychologist William Hick and American psychologist Ray Hyman in 1952. Their study of the relationship between the number of stimuli present and an individual’s reaction time to any given stimulus found that the more options there are, the more time is spent on the reaction. This (amongst other research) led to the design principle known as “KISS” (Keep It Short and Simple) which is now a common and proven approach to effective design in many fields.
The following famous quote has influenced many designers and was originally in reference to the design and building of airplanes. It states that the best results are yielded not through additions but by the simplicity created by removing complications.
Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
Terre des hommes , Antoine de Saint-Exupéry
This principle can be applied to many aspects of web design. We will approach the design of our user interface carefully and be mindful of optimising the usability by limiting the amount of items included. We might consider making a conscious choice of limiting elements to present on a website's homepage, for example, to maximise the focus on a specific news or promotional item.
This theory was named after William of Ockham  whose writings in the 14th century explored a philosophy of simplicity. He did not coin the name literally, yet he explored the essence of this principle in depth. Also known as the principle of parsimony, Occam’s Razor has been used as a problem-solving method in many different fields, from science, medicine, law, and even business, to design.
The term 'razor' refers to distinguishing between two hypotheses either by "shaving away" unnecessary assumptions or cutting apart two similar conclusions. The aim is to minimise complexities by simplifying the focus for a clearer approach to solving the problem, to answering a question or to making a decision.
pluralitas non est ponenda sine necessitate plurality should not be posited without necessity
The principle gives precedence to simplicity: of two competing theories, the simpler explanation of an entity is to be preferred. The principle is also expressed as “Entities are not to be multiplied beyond necessity.”
When we consider our design work, we can use this principle to guide our decisions of which approach to adopt during the early stages and re-evaluate the refinement of our progress. Aiming for simpler solutions over complex ones will ensure a more effective and less cluttered final design, ultimately more accessible, easier and nicer to use.
Considering data visualisation, for example, we can choose a complex and detailed view of statistics or simplify the given data. The nature of visual and the requirement for included information will of course depend on context and audience. However, focusing on the most important detail to be conveyed allows us to hone in on a minimal, lean and accessible presentation. Rather than including all complexities, Occam's razor will guide us towards careful consideration of which details are vital to include and how minimal the presentation can be to convey the required data detail.
Good design is as little design as possible.
This principle can be applied to many aspects of a web project. We can use it to inform decisions on content strategy and layout and UI design. Rather than being an oversimplified view on the task in hand, it helps us focus on what is essential to create good design.
Named after Paul Fitts , this is an empirical model explaining the relation of speed and accuracy within human muscle movement. Fitts researched the human motor system and found a direct link between the time it takes to reach a target and the distance to the target, yet also the size of the target itself.
While this principle was studied in ergonomics and physical environments, it also applies to human-computer interaction and is therefore used in the design of GUIs (graphic user interface), helping achieve good interaction design.
When we consider that the closer and larger a target is, the faster it is to reach and interact with that target, it means that we can use this principle to guide our decisions. This will result in effective user interfaces which are quick to access, easy to use and will be accessible.
One of the most annoying aspects of an online link is when we as users have to be precise and aim for the overlap of our cursor, or our finger tap (on touch screens) to be perfectly positioned in order to trigger a function. This is something easily avoided by ensuring that the click- or tap-able area is set to a generously large area. An effective link will imply interaction via a clear visual reference and an appropriately sized active region around it. On interaction, clear visual feedback then must confirm the function for good usability.
Ensuring a generous size for button, vicinity of common/related functions and a mindful position within the given space, we can produce designs which don't cause frustrations for our users and are instead easy to use and offer fast access to functions. Fitts' law is a useful principle to help guide many aspects of a website: the site menus, the links in content as well as any forms ~ in short, all functions which require interaction via click or tap.
The article which outlines this theory is titled: The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information. It was written by the cognitive psychologist George A. Miller  of Harvard University's Department of Psychology and published in 1956 in the Psychological Review. Miller's study found that there is a limit to the number of items we can remember. He writes that the number an average human can hold in short-term memory is 7 ± 2. This finding is important for our work as it leads us to consider the mental effort our designs will demand of our users.
The cognitive load, ie the mental energy required for concentration and focus, is one that we have to consider during all our design decisions. We must aim to make our designs intuitive and easy, limiting the mental effort required as much as possible and practical. It is impossible to avoid cognitive load and we cannot simplify for the sake of minimal visual inputs alone, this would be counter-productive. But we can consider carefully how we present content and interaction within our designs to ensure they are easy to understand and use.
Miller focused specifically on short-term memory and how our ability to memorise is dependent on our memory span, the working memory. This lead him to distinguish between separate items as well as chunks which are grouped units of elements. When we apply 'chunking' to our designs, layout can become quicker to skim read and easier to understand.
One very common example of how effective this method is can be found in numbers, phone numbers or credit card numbers. If the numbers are split into groups, they become instantly more visually distinct and easier to read and memorise.
When we design forms which ask for any set of numbers, we can plan for the grouping of subsets which will result in less cognitive load, making the process less demanding and therefore more user-friendly. It is worth emphasizing how such a small detail can have a big impact on both accessibility as well as user experience.
The goal-gradient hypothesis was first introduced by psychologist and behaviourist Clark Hull  in 1932 and suggests that the inclination to move towards a goal intensifies as the goal gets closer. In a well-known experiment examining this hypothesis, Hull observed that rats in a straight alley were running increasingly faster the closer they moved towards the food.
We can consider this hypothesis when designing forms which include multiple sections to ensure a better user experience while increasing the likelihood of completion. Our form might be a survey asking for feedback or opinions, or a purchase form which will require quite specific details, such as postal address or payment options. In both cases it will be helpful to include a clear indication of progress which can also result in more engagement and better rates of completion.
This theory was formulated by German psychiatrist Hedwig von Restorff . In her 1933 study, she observed that when participants were given a list of categorically similar items with one distinct, isolated item, their memory for the unique item was enhanced. The Von Restorff effect is also referred to as the "isolation effect" and has been found to apply to most people and to be more prevalent with younger age groups.
The Gestalt principles highlight how we have the tendency to seek meaning and interpret similarities between elements as signifying a relationship. The isolation effect adds to this theory. When we are shown similar items, our memory will favour the one that differs.
Understanding this psychological pattern allows us to refine our designs and the presentation of the various elements within the layout. To draw attention to one item within a group, we can make use of this by changing its presentation to make it stand out. However, we must keep in mind the exact methods on how we implement this difference. For example, using only colour alone would need careful testing of contrast to ensure that those who with any form of colour blindness will not miss the intended focus. Using additional differences, such as size or position, shape or style, might be more effective.
This effect was studied in the field of human–computer interaction by Masaaki Kurosu and Kaori Kashimura for Design Center, Hitachi Ltd, Japan, in 1995. The researchers conducted tests on the interface of ATMs and the perceived usability of different designs. They found that there is a correlation between the perception of the aesthetic value and the ease of use, read 'Apparent usability vs. inherent usability' for details. The tests with participants pose the challenge of defining the determinants of the apparent usability. Subjective preferences towards aesthetics can interfere with a neutral and objective report/feedback on how effective the inherent functionality actually is. This can result in difficulties during fault finding.
At its most basic, this applies to any webpage if we remove the design. The usability of a menu, for example, is usually just as easy when presented as a simple list of links without much design. However, the well presented version with a select typeface, using a custom colour scheme and set within a refined layout will always be preferred and seen as easier to use.
The fact that people will prefer attractive designs is good news to some extent as this will spur us on to create beautiful and aesthetically pleasing designs for interfaces and layouts. However, it does also pose a challenge during user testing. If our designs are judged to be 'easy on the eye', nice and pleasant to look at, the feedback we might get could be biased and subjective. Our design might be flawed and include weaknesses or obstacles. However, these might not be as apparent or considered as detrimental due to the subjective impression and the positive emotional response to the visual design alone.
Jakob Nielsen  states that users will anticipate what an experience will be like, based on their mental models of previous experiences. His research proved that using common patterns which are in line with existing models of interaction and presentation result in better usability.
What makes Jakob's law important to consider is the fact that we all will feel more comfortable in familiar situations and happier when we are not asked to learn new systems when we browse the web. A good example is the search function ~ this is a common feature on sites in different contexts. Yet our expectation is that we will find it towards the top of a webpage, mostly likely on the right side. If we cannot see it as expected, we are not likely to look for it elsewhere. It is therefore advisable to respect common patterns for the sake of usability.
When we work on a design update for an existing site, for example, the best approach will be to respect the current patterns. Rather than throw expectations by making drastic changes which might cause confusion or frustration, the update will go smoother when we avoid drastic changes, working towards an incremental update cycle of smaller edits instead, and optimise what users are familiar with.
Wind, Sand and Stars (French title: Terre des hommes, literally "Land of Men"), published in 1939, is a memoir by Antoine de Saint-Exupéry, a French writer, poet, journalist and pioneering aviator.
View references of the quote. ↵
William of Ockham (ca 1285-1347)) was a English Franciscan friar, theologian, influential medieval philosopher and a nominalist who advocated reform in both method and content, the aim of which was simplification. He is well known for the methodological principle, the Occam's Razor. ↵
Paul Morris Fitts Jr. (May 6, 1912 – May 2, 1965) was a psychologist at the Ohio State University. He developed a model of human movement, Fitts's law, based on rapid, aimed movement, which went on to become one of the most highly successful and well studied mathematical models of human motion.↵
George Armitage Miller (February 3, 1920 – July 22, 2012) was an American psychologist who was one of the founders of cognitive psychology, and more broadly, of cognitive science.
Clark Leonard Hull (May 24, 1884 – May 10, 1952) was an American psychologist who sought to explain learning and motivation by scientific laws of behaviour.
Hedwig von Restorff (1906–1962) was a German psychiatrist and pediatrician who is best known for her discovery of the isolation effect.