The gestalt principle of continuity

Business as usual eats continuity for breakfast: When decisions are made quickly and things get pushed live in a hurry, continuity is often the first casualty. But day-to-day pressure isn’t the only reason continuity errors creep into digital products. Before we get to that – and to why it’s a problem – a quick detour into design theory.

What is continuity?

Continuity is the gestalt principle of ‘good continuation’: our eyes instinctively follow the simplest, uninterrupted line. It is one of the laws of gestalt psychology, which describe how our brain processes what we see – by grouping, filling in gaps and recognising patterns.

This applies to actual lines and therefore to visual design (think of a layout grid, or colours, spacing and typography that all follow the same rules). But there are other forms of continuity too. They are mainly a topic in film theory, yet they can play a major role in interactive media as well:

• Continuity of information: the same things have the same name everywhere.
• Continuity of action: the same interactions behave the same way everywhere.
• Continuity of convention: familiar viewing and usage habits are respected, not broken.

Why continuity matters

Good continuation means our brain handles tasks automatically. And anything our brain does automatically costs no conscious attention. (🧠: ‘Hey! Look, a line. I think I’ll follow it.’) That reduces cognitive load. Cognitive load describes how much our working memory is taxed when processing information. Less cognitive load means more capacity for what matters – such as the information on your website.

In practice, this means: when colours, terms and interactions work the same way everywhere, users only have to learn them once. That makes your website not only more pleasant to use but also more accessible – especially for people with cognitive impairments, screen reader users, or anyone who’s simply tired.

How quickly continuity goes out of the window

When digital products grow and suddenly need to accommodate content or processes they were never designed for, the tried-and-tested solution is to combine existing components until they more or less fit. In the short term, the content goes live. In the medium to long term, this can have different negative effects on the different forms of continuity. Here are three examples:

Continuity in visual design

• Scenario: Customer support notices that customers keep missing important information.
• On-the-hoof fix: The text in question is ‘temporarily’ highlighted in a signal colour. And then forgotten.
• Impact on continuity: The meaning of colour gets diluted. Red now means ‘error’ one minute, ‘important’ the next, and ‘special offer’ after that. The eye learns: red means nothing any more.
• What wasn’t solved: The actual problem – for example, that the information people need to complete their tasks isn’t provided at the right point in the user journey.

Continuity of information

• Scenario: A new offer goes live, and marketing, sales and the web team each call it something slightly different.
• On-the-hoof fix: Each page adopts the wording of whoever built it. The product ends up with lots of more-or-less similar names. The button says ‘Enquire’ in one place and ‘Get started’ in another.
• Impact on continuity: The meaning of words gets diluted. Users wonder whether the ‘Basic package’ and the ‘Starter plan’ are the same thing, and whether ‘Enquire’ leads to a contact form while ‘Get started’ kicks off a purchase.
• What wasn’t solved: The actual problem – making sure people come out of a journey well informed, able to choose the option that’s best for them or take the right action.

Continuity of convention

• Scenario: An online form needs to go live – say, a survey in which people answer a series of questions.
• On-the-hoof fix: All questions and answers are built with checkboxes. The first question allows several answers, the next only one.
• Impact on continuity: The familiar behaviour of the design pattern – the checkbox itself – gets diluted. Users can’t tell what will happen when they click. Sometimes a checkbox allows several answers, sometimes only one. Yet the convention is clear: checkboxes for multiple choice, radio buttons for single choice. Screen readers announce them differently, too.
• What wasn’t solved: The actual problem – enabling people to give considered answers with focus and without distraction.

Ultimately, every on-the-hoof fix stems from the same thing: day-to-day work demands quick, flexible decisions, and in that moment people fall back on whatever already exists and feels familiar. But that’s only a symptom of the real problem: a design that can’t grow with you.

The consequences of missing continuity

If any of these examples feel uncomfortably familiar: no need for a guilty conscience. Continuity errors happen to the best of us – even Oscar winners. A quick search for ‘continuity errors’ serves up hours of gleeful clips in which fans have spotted mistakes in films.

And that’s exactly the parallel: in film, too, a continuity error damages the experience. Viewers are pulled out of the story because they’re busy with the mistake rather than with what the film is trying to tell them. On your website, users end up focusing on the interface instead of your content. And the flow, the story they should be experiencing instead? Non-existent.

Spoiler: very few users will get in touch, ask questions or give you a second chance. More likely, they’ll drift off to similar offers that are easier to use. One of the worst consequences is a loss of trust, because users get the impression that communication is unclear, if not chaotic, or that something simply isn’t working properly. The bottom line: less revenue, fewer donations, fewer sign-ups – and less of everything else you and your team have set out to achieve.

How do you keep continuity when day-to-day work calls?

After all that doom and gloom, here are a few practical tips to help you maintain – or even improve – continuity across your offering:

• Consistent, clear copy: Probably the simplest fix with the biggest pay-off is consistent copy and communication across your digital products. That includes always calling products by the same name and always labelling actions (such as button text) unambiguously.
• Established visual language: Respect established expectations in visual design. That means using colour deliberately and in line with common expectations (e.g. red = error, green = success), or using a familiar icon language (e.g. three horizontal bars stacked on top of each other = menu).
• Consistent interaction patterns: The same tasks get the same controls – e.g. radio buttons for single choice, checkboxes for multiple choice, and links that behave the same way everywhere.

I could list plenty more examples. What they all have in common is that they describe systems, or a systematic approach. Once defined as a foundation, these systems can help companies and organisations grow without losing continuity, even amid the daily rush.

One system that can help is a design system. What exactly a design system is and who it’s worth it for, you can read in part 2: Do I need a design system? 7 benefits for your team.

tl;dr? Quick answers to questions about continuity

What does continuity mean in design? Continuity is the gestalt principle of good continuation. It describes how we perceive elements that lie along a line or within a pattern as belonging together, and follow them with our eyes.

Why does continuity matter for usability? Consistent patterns only need to be learned once. That reduces cognitive load and lets users focus on content rather than on how things work.

What is a continuity error on a website? A break in an expected pattern: the same colour with different meanings, changing terms for the same thing, or links that behave one way here and another way there.

Further reading

• Gestalt psychology – Wikipedia: en.wikipedia.org/wiki/Gestalt_psychology
• Continuity – gestaltprinciples.com: www.gestaltprinciples.com/principles/continuity
• Five types of continuity – Videomaker: www.videomaker.com/article/7468-edit-suite-five-types-of-continuity
• Cognitive load – Wikipedia: en.wikipedia.org/wiki/Cognitive_load