Design for web

A handbook for aspiring web designers

Chapter 7: Design psychology

You cannot understand good design if you do not understand people; design is made for people. Dieter Rams

Psychological insights

Every interaction we have with a website is filtered through human perception, cognition and emotion. Design psychology draws on decades of research into how we see, think, and understand the world around us. These insights can help us make decisions to create digital experiences that feel intuitive rather than frustrating. An awareness and comprehension of the psychological foundations of our understanding, views and responses transforms our web design from guesswork into informed craft.

Shaping user experience

circle with 5 figures and heart

To create a good user experience we have to consider every detail: the presentation of all content, the implementation of easy-to-use interactive elements such as forms, buttons and links ~ in short, every moment of interaction. Being aware of the mental models our users will have allows us to consider their expectations, assumptions and learned behaviours from previous interactions with digital media.

When we create designs which conflict with the preconceptions we can trigger unexpected reactions. If we keep in mind the mental models of our users, we can implement navigation that becomes intuitive and effortless. If we go against these models without good reason our users might struggle, get frustrated and abandon tasks or leave our site.

Jakob's Law[1] recognizes that users develop expectations from their cumulative experience across websites and apps. When they view and interact with our website, they transfer those expectations and assume it will work in the same or similar way. They will expect familiar patterns.

This does not mean that we cannot be innovative in our design approach. However, it does mean that we should design with an awareness of existing expectations and accommodate some of the familiar approaches in our designs. Taking a unique approach can still work if we focus on good usability and accessibility.

Informing accessibility

groups of people and the accessibility icon

Design which is inclusive and accessible emerges from an understand of human perception and behaviour. It is not a separate aspect but core to the creation of effective design. The figure/ground rule[2], for example, explains how contrast will be beneficial to all users, including those with visual impairments. Research into cognitive load helps us understand why skim reading is an important aspect to consider. It is not only screen reader users who will benefit from clear heading structures and consistent navigation patterns.

Our understanding of attention spans reveals why flashing content can be disruptive or, even worse, poses risks for users with specific sensitivities. Similarly, auto-playing media is not advised as it tends to add too much noise and interrupt the focus and concentration of our users. To design for the full spectrum of human ability is to design for human psychology in all its variation.

Designing intuitive interfaces

connected dots with cogs and small dot

An intuitive interface requires no manual. It leverages existing knowledge and perceptual tendencies to communicate function through form. This does not mean that we need to 'copy' approaches to UI design. We can consider general patterns as we design to ensure that our users feel comfortable when viewing our site and interacting with the functions and options presented.

Psychology explains that we associate rounded lines and shapes with safety and approachability. This can inform our design of forms and buttons if fitting the overall approach. It does not dictate that all corners need to be rounded as we can establish a similar sense through our chosen colour scheme instead.

Studies show how uncertainty can be cognitively demanding and exhausting. This prompts us to include process indicators in our interaction design. This might be loading animations or indicators for completed steps on long forms. The principles included in this chapter aim to offer a tool for creating effective interfaces which feel intuitive as they work with human psychology rather than against it.

Ethics

2 speech bubbles and an outlined heart

An understanding of design psychology carries responsibility. The same principles that create intuitive and enjoyable experiences can be misused to manipulate users through dark patterns. These could be interface designs intended to trick users into actions they did not mean to take. Confirmshaming[3] buttons, hidden unsubscribe links, and manufactured urgency all exploit psychological vulnerabilities for commercial gain. Our knowledge and understanding of the psychological principles and their ethical application must remain central to our practice. Good design psychology must be in service of our users, always.

related reading

footnotes

  1. The core argument is that users spend most of their time on other websites, so they expect our site to work like all the other sites they already know. Watch video Jakob's Law of Internet User Experience
  2. This follows one of the Gestalt principles which states that perception recognises a figure / ground relationship in which one element stands out over the other.
  3. Also phrased 'guilt-shaming', 'confirmshaming' frames the 'decline' or 'no' option in a negative way. The intent is to emotionally pressure users into agreeing or accepting certain terms. This is a very deceptive practice which undermines user autonomy, erodes trust, and reflects poorly on brand ethics.

Gestalt theory

User-centred design has existed as long as design itself. There is an ongoing endeavour to understand how the human mind works, what influences perception and learning, and how to apply these insights to the products we create. Whether physical objects or digital interfaces, the underlying principles remain consistent.

Gestalt[1] theory is a psychological framework exploring how we perceive and understand our environment. Psychologists studied the human mind’s tendency to organise information by recognising and drawing on patterns which allow us to see different perspectives from the same visual input. Factors such as proximity, similarity, closure, and continuity shape our understanding of the whole.

The whole is more than the sum of its parts.[2]
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 how people think and interact with products - their motivations, needs, behaviours and mindsets. Gestalt theory provides insights and research methods to guide work on usability and accessibility, ultimately enhancing the user experience.

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.

Talk (2022) by Roy R. Behrens, Art Professor Emeritus at the University of Northern Iowa.

The following are quotes and video stills taken from this talk, showing various images referred to in early Gestalt theory writings.

collected images of early gestalt theory concepts, showing an old painting of 2 girls which could be seen as a skull, and the 2 faces vs vase image
... 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
collected images of early gestalt theory concepts, showing photographs of juxta position creating new meaning such as a pair of antlers mounted on the wall behind a man sitting in a chair
... it was Wertheimer[3]'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
collected images of early gestalt theory concepts, showing illustrations which form more than one image, such as a face formed by an indoor scene of figures and light, a sketch of 2 men, seen from behind, holding top hats and bowing to a lady holding a hand fan; their bald heads appear to form/suggest her cleavage.
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

Talk (2022) by Roy R. Behrens, Art Professor Emeritus at the University of Northern Iowa.

effective UX design

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[4] 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.

footnotes

  1. '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.
  2. 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)
  3. 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.
  4. ‘Cognitive load’ refers to the mental energy and effort it takes to perform a certain task; as discussed in this article “Minimize Cognitive Load to Maximize Usability” by NN/g (Nielsen Norman Group)

Gestalt principles

illustration by Cameron Chapman featuring seven of the Gestalt principles.
illustration © Cameron Chapman

Law of Prägnanz

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 (4 versions) shown with different colour applications for the intersected parts of the circles.

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- yet 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.

wireframe sketch showing multiple rectangles, grouped in 2 rows on the left, and 2 columns on the right

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.

References

Max Wertheimer‘s 1923 paper “Laws of Organization in Perceptual Forms” established proximity as a fundamental grouping principle. Subsequent research by Stephen Palmer (Modern Theories of Gestalt Perception, 1990) demonstrated that proximity operates pre-attentively, our visual perception groups nearby elements before we consciously process what we see.

This finding has significant implications for interface design: users perceive relationships based on spatial arrangement even before they consciously examine content. Eye-tracking studies by Nielsen Norman Group confirmed that users scan interfaces in predictable patterns (F-pattern for text, Z-pattern for minimal content), and proximity inconsistencies disrupt these natural scanning behaviours.

However, subsequent research suggests these patterns are more nuanced than early studies implied. Alfred Yarbus‘s foundational 1967 work demonstrated that scanning behaviour is fundamentally task-dependent: the same visual content produces dramatically different fixation patterns depending on what question the viewer is trying to answer (Yarbus, A.L., 1967, Eye Movements and Vision). As one analysis puts it, scanning patterns are “expressions, not laws”. A user's goal dictates their scanning approach in addition to the page design (Ux Spotlight, 2024).

The Nielsen Norman Group have since expanded their framework considerably, identifying patterns beyond their initial findings. Scanning patters include the following: layer-cake (scanning headlines, skipping body text), spotted (searching for specific elements like links or numbers), pinball (non-linear bouncing between prominent elements), and lawn-mower (comparing data across columns), among others. Each pattern reflects different user motivations and screen designs. See Text Scanning Patterns: Eyetracking Evidence and F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) by Kara Pernice for details.

The implication for proximity in design is therefore very important: spatial grouping must aim not just for visual hierarchy, but also for the range of tasks users might perform. Elements grouped effectively for one scanning pattern may not be effective for another. Cognitive load needs to considered in context of both user goals and design of content.

Research citations:

  • Yarbus, A.L. (1967). Eye Movements and Vision. Plenum Press.
  • Ux Spotlight (2024). Rethinking eye-tracking: Patterns with purpose. Medium.
  • Pernice, K. (2019). Text Scanning Patterns: Eyetracking Evidence. Nielsen Norman Group.
  • Pernice, K. (2017). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Nielsen Norman Group.

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, orientation or texture and will set the expectation of similar meaning or being related to the same/similar functions.

wireframe sketch showing a page layout with menu at the top, feature section with large image + text and 3 column layout for feature posts at the bottom.

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.

References

Research by Anne Treisman’s Feature Integration Theory (1980) demonstrated that similarity in a single feature (like colour or proportion/size) enables ‘pop-out’ effects. This results in dissimilar items capturing attention automatically and almost immediately. This finding underpins the importance of consistency in the use of colour or shape and also layout to indicate interactive elements consistently. Studies in web usability show that inconsistent styling of clickable elements increases user errors and decreases trust.

The review “How feature integration theory integrated cognitive psychology, neurophysiology, and psychophysics” (Kristjánsson, Á. & Egeth, H., 2020) is a comprehensive account of how Feature Integration Theory emerged and maintains an enduring influence. This demonstrates how Treisman's framework elegantly unified decades of parallel research into a single theoretical account that continues to shape our understanding of visual attention/perception and interface design.

Research citations:

  • Treisman, A.; Gelade, G. (1980). A feature integration theory of attention. Cognitive Psychology. 12 (1): 97–136.
  • Kristjánsson, Á. & Egeth, H. (2020). How feature integration theory integrated cognitive psychology, neurophysiology, and psychophysics. Attention, Perception, & Psychophysics, 82(1), 7–23.

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.

wireframe sketch showing blocks of image with headline and paragraph at different sizes, one large, followed by 2 column, on the right a single column of 5 small posts.

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.

wireframe sketch of the Mastodon interface with 4 columns of varying content

References

Symmetry perception is deeply embedded in human cognition. Studies suggest this relates to evolutionary advantages in recognising faces and healthy organisms (Facial attractiveness: Evolutionary based research, Little, Jones & DeBruine, 2011). Symmetrical features may signal genetic fitness and developmental stability, influencing mate selection across cultures (Human facial beauty: Averageness, symmetry, and parasite resistance, Thornhill & Gangestad, 1993).

This perception is also remarkably fast. Research demonstrates that humans can detect symmetry with presentations in as quick as 50 milliseconds (The neural basis of visual symmetry and its role in mid- and high-level visual processing, Bertamini & Makin, 2018). This makes it one of quickest perceptual judgements we make as humans.

In design contexts, symmetry creates perceived stability and professionalism. In contrast, asymmetry generates visual tension and dynamism. The choice between them should be intentional and driven by the context of the design itself. We might implement symmetry to express trustworthiness and clarity. Asymmetry allows us to establish emphasis and draw attention.

Research citations:

  • Bertamini, M. & Makin, A.D.J. (2018). The neural basis of visual symmetry and its role in mid- and high-level visual processing. Annals of the New York Academy of Sciences.
  • Little, A.C., Jones, B.C. & DeBruine, L.M. (2011). Facial attractiveness: evolutionary based research. Philosophical Transactions of the Royal Society B, 366, 1638–1659.
  • Thornhill, R. & Gangestad, S.W. (1993). Human facial beauty: Averageness, symmetry, and parasite resistance. Human Nature, 4(3), 237–269.
  • Tyler, C.W. (Ed.) (1996). Human Symmetry Perception and Its Computational Analysis. VSP: Utrecht.

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.

wireframe sketch of a 4 column layout with different content types, including toggles and text with image thumbnails.

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.

wireframe sketch of 2 versions of the same layout showing a list of articles with thumbnail image: one version keeps the image on the left of the text, the other iterates between image on the left and right.

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.

References

Continuation reflects the visual system’s preference for smooth paths over abrupt changes. Rudolf Arnheim’s work on visual perception (1974) explained this as perceptual momentum as the eye following established directions unless interrupted. In user interface design, this principle directly applies to reading flow, scroll behaviour and gesture interaction. Research on infinite scroll interfaces (Infinite Scrolling Is Not for Every Website, Hoa Loranger, 2014) shows that continuation can be both beneficial, due to its seamless content discovery, and problematic as there is a loss of position awareness and therefore a difficulty reaching footer content.

Research citations:

  • Arnheim, R. (1974). Art and visual perception: A psychology of the creative eye (New version, expanded and revised ed.). University of California Press.
  • Loranger, H. (2014). Infinite Scrolling Is Not for Every Website. Nielsen Norman Group.

Synchrony

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.

wireframe of a page showing a menu, with one item's submenu open and a content toggle with one toggle open.

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.

References

While not part of Wertheimer’s original principles, common fate grouping has been validated extensively in motion perception research. Gunnar Johansson’s biological motion studies (1973) demonstrated that humans perceive coordinated movement as an indication of a connection or relationship. When abstract dots move together they tend to be perceived as a unified entity. In digital interfaces, coordinated animations can create perceived relationships. Dan Saffer's foundational work on micro-interactions (2013) establishes that shared animation behaviours function well as feedback mechanisms. This includes elements entering together, responding to hover simultaneously, or transitioning in coordination. Such patterns strengthen users' mental models of component relationships and contribute to making a design feel intuitive, easy to understand and interact with effortlessly.

The practical application of common fate in interface design is well documented. The Interaction Design Foundation's guide to common fate emphasises that designers should ensure elements with shared purposes exhibit consistent, synchronised animations. This reinforces users' perception of grouping and helps them understand and ulitmately easily use the interface. Nielsen Norman Group's research on microinteractions frames these coordinated behaviours as trigger-feedback pairs. The trigger can be a user action or another dynamic alterations. The feedback is communicated through small, contextual visual changes. Their guidance on animation in UX further notes that motion is most effective as subtle feedback rather than mere addition or decoration for visual effect alone.

When UI animations are brief and unobtrusive, they help users build mental models of how a website and ints interactions work. Dropdown menus sliding open, related cards animating in sequence, or form fields highlighting together all leverage common fate to communicate functional relationships. As designers we must remain mindful about adding moving elements. Some users will favour static media for personal or cognitive reasons. This is a preference we have to respect. Browser options allow for this preference to be set ~ our design and build should ensure that motion is only shown if this reduced motion preference is not set. Subsequently this means that we cannot afford to rely on motion only to establish the relationship between content elements and interactive components.

Research citations:

  • Johansson, G. (1973). Visual perception of biological motion and a model for its analysis. Perception & Psychophysics, 14(2), 201–211.
  • Saffer, D. (2013). Microinteractions: Designing with Details. O'Reilly Media.
  • Interaction Design Foundation. (n.d.). Law of Common Fate.
  • Kendrick, A. (2018). Microinteractions in User Experience. Nielsen Norman Group.
  • Laubheimer, P. (2020). The Role of Animation and Motion in UX. Nielsen Norman Group.

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.

wireframe sketch of 2 versions of the same layout showing a list of articles with thumbnail image: one version keeps the image on the left of the text, the other iterates between image on the left and right.

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.

References

Gaetano Kanizsa's work on illusory contours (1976) showed that humans perceive edges and shapes that do not physically exist when surrounding elements suggest them. Closure demonstrates how our perception leans towards the constructive. We actively complete incomplete information rather than passively receiving sensory data. This principle is widely used in logo design. Negative space is what makes some now iconic designs so memorable, for example: the panda of the WWF logo, the arrow in FedEx, the bear in the Toblerone mountain. In interface design, closure enables what the Nielsen Norman Group call progressive disclosure which shows partial content to indicate that there is more to see.

Research citations:

  • Kanizsa, G. (1976). Subjective contours. Scientific American, 234(4), 48–52.
  • Scott, P. (1961). WWF Panda Logo [Logo design]. World Wildlife Fund
  • Leader, L. (1994). FedEx Logo [Logo design]. Landor Associates.
  • Nielsen, J. (2006). Progressive Disclosure. Nielsen Norman Group.
  • Interaction Design Foundation. (n.d.). Gestalt Principles.
  • Nielsen Norman Group. (n.d.). Principle of Closure in Visual Design

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 [1]. The latter being the case with the famous image of Rubin's vase [2], 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.

example of a simple form with 2 inputs and one submit button; one version in low contrast and one with strong contrast.

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.

References

Edgar Rubin's figure-ground research (1915) established that visual perception always differentiates objects (figures) from their surroundings (ground). This separation is not inherent in stimuli but constructed by the visual system. The famous vase/faces illusion demonstrates bistable perception that context and attention determine which part of the image becomes the figure. In interface design, clear figure-ground relationships reduce cognitive load by helping users immediately identify interactive elements against their background. Recent systematic reviews of UI/UX research (2020–2024) confirm that interfaces lacking clear visual hierarchy and information structure lead to increased error rates. Interface designs which apply visual ergonomics principles such as clear foreground/background differentiation achieve error reductions of 30-70% in professional contexts.

Research citations:

  • Rubin, E. (1915). Synsoplevede Figurer: Studier i psykologisk Analyse [Visually Experienced Figures: Studies in Psychological Analysis]. Copenhagen: Gyldendalske Boghandel, Nordisk Forlag.
  • Rubin, E. (1958). Figure and ground. In D. C. Beardslee & M. Wertheimer (Eds.), Readings in perception (pp. 194–203). Princeton, NJ: Van Nostrand. (Original work published 1915)
  • Pind, J. L. (2015). Looking back: Figure and ground at 100. The Psychologist, 28(9), 738–740.
  • Donaldson, J. (2017). Rubin's Vase. In F. Macpherson (Ed.), The Illusions Index. Centre for the Study of Perceptual Experience, University of Glasgow.
  • Nielsen Norman Group. (2023). Figure/Ground: Gestalt Principle for User Interface Design [Video]. Presented by S. Tankala.
  • Vizcarra, A., Quiroz, G., & Cornejo, J. (2026). The Impact of User Interface and Experience (UI/UX) Design on Visual Ergonomics: A Technical Approach for Reducing Human Error in Industrial Settings. Designs, 10(1), 8.

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.

wireframe of a page showing a menu, with one item's submenu open and a content toggle with one toggle open.

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.

References

Stephen Palmer and Irvin Rock introduced uniform connectedness as a grouping principle in 1994, arguing it may be the most fundamental grouping factor. Their research demonstrated that connected elements are grouped more strongly than elements sharing proximity, similarity, or common fate. Subsequent research has confirmed that uniform connectedness represents a foundational organizational process, with classical Gestalt grouping principles operating on units already established through connectedness. This finding has significant implications for interface design: visual connections (lines, enclosures, shared backgrounds) create stronger associations than spatial arrangement alone. The Interaction Design Foundation and Laws of UX both emphasise that designers can use colour, lines, frames, or other visual connectors to establish relationships that override weaker proximity cues.

Research citations:

  • Palmer, S. E., & Rock, I. (1994). Rethinking perceptual organization: The role of uniform connectedness. Psychonomic Bulletin & Review, 1(1), 29–55.
  • Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217.
  • Nielsen Norman Group. (n.d.). Connectedness: Gestalt principle for user interface design. Nielsen Norman Group.
  • Interaction Design Foundation. (n.d.). Law of uniform connectedness. Interaction Design Foundation.
  • Laws of UX. (n.d.). Law of uniform connectedness. Laws of UX.

footnotes

  1. In the context of perception and cognition, multistability describes the phenomenon where a single stimulus can lead to different perceptual interpretations.
  2. 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 and digital environments can help us to plan fitting content structures, interfaces and lead us 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.

wireframe of a page showing a menu, with one item's submenu open and a content toggle with one toggle open.

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 [1], 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.

References

William Hick (1952) and Ray Hyman (1953) quantified the relationship between choice and reaction time logarithmically: reaction time increases by roughly 150 milliseconds for each doubling of options. This finding has been replicated across numerous contexts, though subsequent research notes that familiarity, organisation, and option similarity moderate the effect. Sheena Iyengar and Mark Lepper's jam study (2000) demonstrated the paradox of choice in consumer contexts: shoppers presented with 24 jam varieties were less likely to purchase than those offered 6 options, despite expressing greater initial interest. The Interaction Design Foundation and Laws of UX both emphasise that Hick's Law becomes most critical when designing interactions such as navigation menus or CTA buttons, where each additional choice meaningfully increases decision time.

Research citations:

  • Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26.
  • Hyman, R. (1953). Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 45(3), 188–196.
  • Teichert, T., Gronlund, S. D., & Ferraro, F. R. (2011). Choice reaction time: Hick’s law and beyond. Psychological Research, 75(5), 409–422.
  • Iyengar, S. S., & Lepper, M. R. (2000). When choice is demotivating: Can one desire too much of a good thing? Journal of Personality and Social Psychology, 79(6), 995–1006.
  • Interaction Design Foundation. (n.d.). Hick’s law. Interaction Design Foundation.
  • Laws of UX. (n.d.). Hick’s law. Laws of UX.

This theory was named after William of Ockham [2] 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.” Britannica

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.

wireframe of a page showing a menu, with one item's submenu open and a content toggle with one toggle open.

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. Dieter Rams

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.

References

In design research, Occam’s Razor can be understood through the simplicity principle explored in processing fluency research by Rolf Reber and Norbert Schwarz (1999). Processing fluency theory shows that stimuli requiring less perceptual and cognitive effort are evaluated more positively. Ease of processing will have a positive affect which is then attributed to the stimulus itself. Importantly, this preference does not come from conscious deliberation - users are automatically drawn toward designs that feel simpler to process. Further work by Reber, Schwarz, and Winkielman (2004) extends this principle to aesthetic judgment, demonstrating that fluent processing contributes directly to aesthetic pleasure. Processing fluency helps explain the Aesthetic-Usability Effect, whereby simpler designs are perceived more positively and deemed more usable.

Research citations:

  • Reber, R., & Schwarz, N. (1999). Effects of perceptual fluency on judgments of truth. Consciousness and Cognition, 8(4), 338–342.
  • Reber, R., Winkielman, P., & Schwarz, N. (1998). Effects of perceptual fluency on affective judgments. Psychological Science, 9(1), 45–48.
  • Reber, R., Schwarz, N., & Winkielman, P. (2004). Processing fluency and aesthetic pleasure: Is beauty in the perceiver’s processing experience? Personality and Social Psychology Review, 8(4), 364–382.

Named after Paul Fitts [3], 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.

illustration of small and larger clickable areas for buttons

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.

References

Paul Fitts’ model, first described in 1954, quantifies the difficulty of a pointing task by linking movement time to the size of a target and the distance to it. In its classic form, movement time (MT) increases with target distance (D) and decreases with target width (W) following a logarithmic relationship: MT = a + b × log₂(2D/W), where a and b are empirically determined constants. This formula shows that reducing distance to a target and increasing its size both improve performance. These insights are widely applied in interface design to make interactive elements quicker and easier to access and interact with.

On touch interfaces, however, finger occlusion and the lack of precise visual feedback introduce additional challenges in perceiving and hitting targets accurately. To address this, mobile platform guidelines recommend minimum touch sizes to improve accuracy and comfort. Apple’s Human Interface Guidelines suggest using targets that are at least 44 points, while Android’s Material Design Accessibility guidelines recommend touch targets of at least 48 dp to ensure reliable interaction.

Further empirical research on touchscreen interaction has validated the practical importance of target size for accurate tapping. A two‑phase study by Parhi, Karlson, and Bederson (2006) investigated optimal target sizes for one‑handed thumb use on small touchscreen devices and found that larger targets generally led to faster interaction and more consistent performance, supporting design recommendations that favour sufficiently large interactive areas on mobile interfaces.

Research citations:

  • Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology.
  • Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one‑handed thumb use on small touchscreen devices. Proceedings of MobileHCI 2006.
  • Apple Human Interface Guidelines. (n.d.). Recommended minimum touch target size (44 pt).
  • Google Material Design Accessibility Guidelines. (n.d.). Recommended minimum touch target size (48 dp).

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 [4] 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.

There is a clear and definite limit to the accuracy with which we can identify absolutely the magnitude of a unidimensional stimulus variable. The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information, George A. Miller, 1956, Psychological Review

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.

illustration of a layout with little structure and one with a clear structure through content chunks.

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.

illustration of a phone number written once without spacing, and once with spacing, grouping numbers into smaller chunks.

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.

References

George Miller’s 1956 paper highlighted the limits of human memory, showing that people can only hold a limited number of items in working memory at any one time. More recent research by Cowan (2001) suggests that this capacity is closer to 4±1 items for unrelated information. Working memory is important because it represents the amount of information users can actively process, integrate, and act upon when interacting with a design. Notably working memory has nothing to do with intelligence or ability to learn and process details. It is a limited mental resource that varies only a little between individuals.

Miller’s insight about chunking remains highly relevant: by grouping information into meaningful units, designers can extend effective working memory capacity and reduce cognitive load. Organising content into familiar patterns or categories helps users process information efficiently and remember it more reliably. For designers, this means prioritising organisation and meaningful grouping in interfaces, navigation, and content layout, rather than relying on arbitrary numeric limits.

Research citations:

  • Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97.
  • Budiu, R. (2018), Working memory and external memory. Nielsen Norman Group.
  • Cowan, N. (2001). The magical number 4 in short‑term memory: A reconsideration of mental storage capacity. Behavioral and Brain Sciences, 24(1), 87–114.
  • Moran, K. (2016). Chunking. Nielsen Norman Group.

The goal-gradient hypothesis, first proposed by psychologist and behaviourist Clark Hull[5] in 1932, suggests that the motivation to move toward a goal intensifies as the goal becomes closer. In Hull’s classic experiment, rats running along a straight alley increased their speed as they approached a food reward, demonstrating that effort rises with perceived proximity.

illustration of form: on the left, all inputs are shown; on the right, only 3 inputs are shown with an indication of progress via a line and 5 dots.

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.

References

Modern research has extended Hull’s work to human behaviour, showing that perceived progress toward a goal can strongly influence actions, even when the actual requirements have not changed. In a study of loyalty programs, Kivetz, Urminsky, and Zheng (2006) found that customers holding a coffee card pre-stamped toward a 12-stamp goal completed purchases faster than those with a blank 10-stamp card. The key finding is psychological rather than mathematical: people respond more to how close they feel to a goal than to how much remains. Designers can leverage this insight by showing partial completion or highlighting remaining steps, improving user engagement and encouraging sustained interaction.

Research citations:

  • Hull, C. L. (1932). The goal‑gradient hypothesis and maze learning. Psychological Review, 39(1), 25–43.
  • Kivetz, R., Urminsky, O., & Zheng, Y. (2006). The goal‑gradient hypothesis resurrected: Purchase acceleration, illusionary goal progress, and customer retention. Journal of Marketing Research, 43(1), 39–58.
  • Goal‑gradient effect. (n.d.). In Wikipedia.
  • Nunes, J. C., & Drèze, X. (2006). The endowed progress effect: How artificial advancement increases effort. Journal of Consumer Research, 32(4), 504–512.

This theory was formulated by German psychiatrist Hedwig von Restorff[6] in 1933. In her study, she found that when participants were presented with a list of similar items containing one distinct, isolated item, memory for the unique item was significantly enhanced. This phenomenon is known as the von Restorff effect or isolation effect has been observed across different populations and appears particularly strong in younger adults. It shows that items that stand out from their context are more likely to be remembered.

illustration of a typical sales page offering different packages

As designers, understanding this psychological pattern provides us with practical guidance for drawing attention to important elements. We can differentiate through colour, size, position, shape, or style. The differences have to be meaningful rather than arbitrary. We will need to take care to also consider accessibility: for example, relying solely on colour requires sufficient contrast to ensure users with colour vision deficiencies can still perceive the intended focus. Combining multiple differentiating features often produces stronger and more reliable attention cues.

References

Hedwig von Restorff’s original 1933 research first identified the isolation effect, showing that an item differing from surrounding items on a list is more likely to be remembered. Distinctiveness (Hunt, 1995). can be perceptual, such as a unique colour or size, or conceptual, such as semantic or categorical differences. Subsequent studies distinguish between physical isolation, which occurs automatically, and conceptual isolation, which requires deeper processing and attention. Understanding these mechanisms helps designers make decisions about which elements should be highlighted and how to apply differentiation without overwhelming the user.

Research citations:

  • Practical Psychology. (2023). The Von Restorff Effect (Definition + Examples). PracticalPie.
  • von Restorff, H. (1933). Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18, 299–342.
  • Hunt, R. R. (1995). The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), 105–112.
  • Distinction and attention in memory. (n.d.). Research on physical vs. semantic isolation effects. Journal of Experimental Psychology.
  • Zeigarnik, B. (2020). Memory & cognition survey of distinctive processing and the isolation effect.

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.

screenshot of the top section of this very page as seen in the browser; left: design removed, right: with design applied.

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.

References

Kurosu and Kashimura's 1995 ATM study launched extensive research into beauty-usability relationships. Don Norman's Emotional Design (2004) proposed that aesthetic pleasure creates positive emotions that enhance cognitive flexibility, literally making problem-solving easier. However, Tuch et al. (2012) demonstrated boundary conditions: the effect weakens with repeated use and disappears for severe usability problems. Beauty creates a halo effect and increases tolerance for minor friction, but cannot compensate for fundamental failures.

Research citations:

  • Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability: Experimental analysis on the determinants of the apparent usability. Conference Companion on Human Factors in Computing Systems (CHI '95), 292–293. ACM.
  • Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books.
  • Tuch, A. N., Roth, S. P., Hornbæk, K., Opwis, K., & Bargas-Avila, J. A. (2012). Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI. Computers in Human Behavior, 28(5), 1596–1607.
  • Grishin, J., & Gillan, D. J. (2019). Exploring the boundary conditions of the effect of aesthetics on perceived usability. Journal of Usability Studies, 14(2), 76–104.
  • Nielsen Norman Group. (n.d.). The Aesthetic-Usability Effect.

Jakob Nielsen [7] 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.

References

Jakob Nielsen's observation derives from mental model theory which concludes that users build expectations through accumulated experience across interfaces. Research on transfer of learning (Singley & Anderson, 1989) demonstrates that skills and expectations from one context shape performance in similar contexts. This finding supports design consistency not just within products but across industries: users expect search in the top right, navigation on the left, and social sharing icons in predictable positions because the majority of sites implement these patterns.

Research citations:

  • Nielsen, J. (2000). Jakob's Law of Internet User Experience. Nielsen Norman Group.
  • Nielsen, J. (2010). Mental Models. Nielsen Norman Group.
  • Singley, M. K., & Anderson, J. R. (1989). The Transfer of Cognitive Skills. Cambridge, MA: Harvard University Press.
  • Nielsen, J. (2001). Search: Visible and Simple. Nielsen Norman Group.
  • Shaikh, A. D., & Lenz, K. (2006). Where's the Search? Re-examining User Expectations of Web Objects. Usability News, 8(1).
  • Nielsen Norman Group. (2017). Horizontal Attention Leans Left.
  • Kalbach, J., & Bosenick, T. (2003). Web Page Layout: A Comparison Between Left- and Right-Justified Site Navigation Menus. Journal of Digital Information, 4(1).

footnotes

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Hedwig von Restorff (1906–1962) was a German psychiatrist and pediatrician who is best known for her discovery of the isolation effect.
  7. Jakob Nielsen is a renowned human–computer interaction researcher, usability pioneer and consultant, and co-founder of Nielsen Norman Group. His research and consequent findings have had an impact on usability practices for many years. His paper 'Enhancing the explanatory power of usability heuristics' is frequently referenced in usability studies.

Design psychology study

To understand how the outlined principles affect user experience, take a look at the following two websites. Unless you are using this app yourself, you are likely unfamiliar with these websites and will experience them from the perspective of a new user. This will allow you to observe your own impressions, and judge how easy you find the outlined tasks and observe how much cognitive load it will require.

Krita app icon.

The app is Krita, a fine art programme, available for PC, Mac, Linux and Android. It is a wonderful app, supported by a great community. If you like drawing, painting or just fancy trying out an app to sketch with, I'd highly recommend it.

The sites we will look at are krita.org, for the download links and app documentation, and krita-artists.org, a forum for artists using the app.

screenshot of the 2 sites.

Testing tasks

  1. Links to manual.
    Make notes on the nature of the links to the app's manual and describe the ease of use. What are the pros and cons of how each site presents this link?
  2. As a Krita user, how would you report a bug/issue?
    For each site, outline the steps you would take to let the app team know about an issue you found. In conclusion, which website would you personally use for this process?
  3. Compare the interface design of the two sites.
    Make a list of the different purposes and links found across the menu as well as content pages. Evaluate their ease of use.
  4. What design features would best lighten the burden on cognitive load or attention span?
    Consider each site's focus and overall content delivery. Outline which improvements could be made for quicker access and content discovery.
  1. Links to manual.
    1. krita.org

      The link is called 'learn' and features an icon, indicating the link to an external page. While the phrasing fits the linked content, it might be misunderstood as linking to tutorials.

    2. krita-artists.org

      The link is called 'Krita Manual' and is part of the main menu. The phrasing is clear yet there is no icon to indicate the external link.

    Best practice recommends that links to external pages should not be included in the site's menu. Website navigation should only include internal links.

  2. As a Krita user, how would you report a bug/issue?
    1. krita.org

      The site include a section on how to 'get involved' which outlines the different ways of how to contribute to Krita. The 'Learn more about reporting bugs' button links to the related section in the manual and offers clear instructions. The final bug report will be done on the KDE Bugtracking System and requires an account.

    2. krita-artists.org

      There is no clear information on reporting issues on this site. Release notes mention requests for testing and bug reports, offering the link to the KDE Bugtracking System.

    My personal experience (as a Krita user) is that I found the forum very friendly and reporting issues via a standard post resulted in the moderators escalating my queries and forwarding them to the right people. I collaborated on further tests and did not need to set up an account on the KDE Bugtracking System ~ so my preference will be to keep using the forum.

  3. Compare the interface design of the two sites.
    1. krita.org
      • main menu with 6 links (one external)
      • search function
      • theme switcher for light/dark modes
      • language switcher
      • large CTA buttons on content pages
      • 'learn more' links for articles/posts/resources
    2. krita-artists.org
      • main menu with 5 links (one external)
      • signup / login link
      • search function
      • collapsible secondary menu (with 3 lined toggle)
      • filter functions for categories and tags
      • content links by content type
      • in-post navigation by time via slider
      • icon links to post URL and reactions
      • voting function for active competitions

    Both sites feature a clear main menu. The app website appears clearer with only one menu and clear CTAs. The forum website appears more crowded and therefore somewhat overwhelming. The cognitive load is heavier on this site, it takes longer to get used to the interaction on this site.

  4. What design features would best lighten the burden on cognitive load or attention span?
    1. krita.org

      The site has the clear focus on offering the download of the app and related content. Its design is well balanced with clear typography and content hierarchy. The site's promotional angle is very effective and offers great content to newcomers to the app as well as current users. The inclusion of informative material as well as the showcasing of artists creates an excellent insight into the possibilities of the app.

      There is little room for improvement as the site overall offers a clear interface and good presentation of content.

    2. krita-artists.org

      The forum site includes a huge amount of content and offers a fairly clear structure. However, this only becomes apparent with time spent on the site. The interface offers access to all content but is overcrowded and busy.

      The site might benefit from less items displayed. Offering toggles for additional details could declutter the appearance of the main pages. Collapsing the secondary menu on page load would help with a clearer focus on the content. Giving details of time only on the category pages, or the posts, would mean less 'visual noise'.

coming soon