Jamie Esterman
The scientific principles I use every day designing in tools like Figma were predominantly researched and documented between 1912 and 1960 - before the invention of computers and mobile phones or the gurus of UX at NNG.
Technology changes and evolves at a much faster rate than human behaviour. These principles and laws that govern our behaviour and interactions which have been researched over the last 100+ years are still relevant today when designing an app interface, website navigation or a software feature.
I find it fascinating that we digest information on a screen using our eyes, ears and inputs, our brain interprets the information and makes decisions with it and that it is all predictable with 100 year old science from before the technology existed.
The documentation of these principles began in 1912 - Gestalt Physcology.
Gestalt Principles
Gestalt principles emerged in Germany in the early 20th century when some bright minds like Max Wertheimer and others were curious about how our brains perceive the world. They figured out that our minds tend to group things together and make sense of patterns, often seeing the whole picture as more important than its individual pieces. These ideas have since been used in various areas, like design and psychology, to help people understand and interact with information and visuals more easily.
These principles tell us things like:
- Similar things belong together
- Things that are close are connected
- We see tack patterns and continuity instinctively
Laws
As well as the Gestalt principles, there are Behavioural Laws that can also provide us guidance in User Experience. Many of these Laws are well known - Occum’s Razor for example - simpler solutions are preferable to more complex ones.
In this article I have outlined some of my favourite principles and laws, a bit of their history and practical examples of applying the science.
Miller’s Law
The average person can only keep 7 (plus or minus 2) items in their working memory.
Another key principle is Miller’s Law, which predicts that the average person can only keep 7 (± 2) items in their working memory. It originates from a paper published in 1956 by cognitive psychologist George Miller, who discussed the limits of short-term memory and memory span.
Imagine juggling balls. As you get to 5, it becomes difficult to follow, at 7 balls you can just manage and at 9 balls they come crashing down.
Miller also asserted that we can “chunk” information to help us memorise. A simple example of this today is phone numbers which are chunked to help us memorise them. Have you ever noticed if someone gives you a mobile number in the wrong chunks, it is very difficult to remember.
- Australian mobile number: 0401 123 456
- Incorrect chunking: 04 012 3456
Miller’s Law is very relevant in todays UI/UX design. A great example is the Netflix home page on your TV or browser. You will notice the screen is split into chunks / rows and there is never more than 6-7 items in a chunk:
Miller’s Law takeaways
1. The average person can hold 5–9 items in their working memory at a time.
2. Chunking information helps users process and remember complex data more easily.
3. Limiting choices to 7 (± 2) items reduces cognitive overload and improves usability.
4. Clear organisation of information ensures a more intuitive and enjoyable user experience.
The Law of Similarity
Our eyes tend to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
In the world of UX, it means that when buttons, links, or icons share similar colours, shapes, or sizes, users understand that they are related and serve a common purpose.
This is why Google groups related menu items together, much like the "People Also Ask" section, to help users quickly identify and navigate through connected topics.
Another example is the Shorts layout in the YouTube app:
The portrait aspect ratio is visually distinctive, compared to the normal letter box shape of a Video. This helps users visually identify that this a different kind of content and not a part of the standard video feed.
The Law of Similarity takeaways
1. Similarity in design helps users perceive related elements as part of a group or function.
2. Using consistent colours, shapes, or sizes creates a sense of connection between elements.
3. Contrasting elements can be used to visually differentiate unique content or functionality.
4. Grouping related items improves navigation and enhances user understanding.
The Law of Proximity
Objects that are near, or proximate to each other, tend to be grouped together.
This principle tells us that things close to each other are seen as connected. In UX design, it's about placing related elements together. For instance, if you have a profile picture on a social media app, the username, message button, and friend request button should be close by, so users know they are connected to that profile. This makes it easier for people to navigate and interact with the app.
On Stripe checkout page, the ‘Amount’, ‘Promotion Code’ and ‘Payment Method’ are grouped in the left hand column. The form fields for "Shipping Address" and "Shipping Method" are grouped closely together in the right hand column.
https://checkout.stripe.dev/configure
The Law of Proximity takeaways
- Proximity helps to establish a relationship with nearby objects.
- Elements in close proximity are perceived to share similar functionality or traits.
- Proximity helps users understand and organise information faster and more efficiently.
The Law of Closure
Our visual perception unconsciously completes incomplete objects.
Our brains are adept at interpreting incomplete visuals as complete ones, a principle that's invaluable in UX design. Take the example of a progress bar in a form: it may not be fully filled, but as you advance through the steps, your brain instinctively 'completes' the image. This ability allows you to effortlessly track your progress, ensuring you remain informed and engaged throughout the process. This clever use of visual cues simplifies complex information, enhancing user understanding and interaction.
The power of closure in modern interfaces extends far beyond simple progress bars. Think about how mobile apps handle image carousels - showing just a slice of the next image at the screen's edge. Your brain automatically registers that there's more content to explore, without the need for explicit "swipe for more" instructions. I've found this subtle approach particularly effective in e-commerce designs, where it naturally encourages users to browse through product collections without feeling overwhelmed by too many options at once.
When designing navigation menus, the principle becomes even more fascinating. Take the ubiquitous hamburger menu icon - three simple lines that our brains instantly recognise as a button that reveals more options. This is closure at its most elegant - using minimal visual elements to convey maximum meaning. The same principle applies to those loading animations where dots appear and disappear in sequence - your mind automatically completes the circular pattern, creating a sense of continuous motion from just a few strategic visual elements.
The versatility of this principle becomes is on show above - take the 'stairs' icon, where a few diagonal lines efficiently convey elevation and progression. What I find particularly clever is how the 'cake' icon uses horizontal lines with a single dot on top - our brain doesn't need the full outline of a cake to understand what it represents; the subtle suggestion of layers topped with a cherry is enough. These icons demonstrate how understanding closure allows us to create intuitive, space-efficient designs that communicate clearly without overwhelming the interface.
The Law of Closure takeaways
- Our brains automatically complete incomplete shapes and patterns to form whole objects
- Simple, incomplete forms can be more effective than detailed illustrations in interface design
- Strategic use of gaps and spacing can create meaningful icons while reducing visual complexity
- When objects are incomplete but recognisable, users process information more efficiently
The Law of Continuity
Our eyes track continues forms and look for breaks in them.
In the image shown, most people will naturally follow the curved line across the straight one, even when the colours change. This behaviour is partly because we're used to seeing our world in straight, horizontal lines, which influences how we group elements visually. In UX design, this insight is super useful for guiding users along a process or showing them a clear pathway. Think about scrolling through a social media feed: the seamless flow of posts intuitively tells you that you're moving through a series of updates, one after the other.
In the above image, look at how the vertical line connects each stage of the setup process - from Content and Language through to Full Version. Our eyes naturally follow this path downwards, instantly understanding the sequence and our position within it. The subtle glow effect and color highlight on the current step creates an even stronger sense of progression.
What makes this design particularly effective is how it balances active and inactive states. The continuous line doesn't just stop at the current step; it extends downward in a muted tone, suggesting there's more to come. This visual continuity helps users understand they're part of a longer journey without feeling overwhelmed by it.
The Law of Continuity takeaways
- Our eyes naturally follow lines and paths through an interface
- Continuous elements help users track their progress through a process
- Connected steps make complex sequences feel more manageable
The Law of Figure-Ground
We perceive separation between the foreground (figure) and background (ground).
In the above image, you may see the blue tree shape to be in front of the gold triangle that is on top of a black background. The reality is this is a 2d illustration and it is completely flat.
In UX design, it's vital to ensure the important stuff stands out. Think of a search bar on a webpage. It should be the 'figure' that users notice first, not lost in the 'background' of the page, so they can easily find and use it.
This law is every where in User Interface design, it is what we use to bring items forward or move them backwards - it is a part of every design system in UI elements like cards, tooltips, buttons, surface/paper and modals.
In the example above, the Canva drop down mega-menu uses a drop shadow to bring the content forward in a 3D manner, allowing users to clearly understand how to navigate the website. This subtle shadow creates a distinct separation between the menu and the background content, making it feel like it's floating above the page. The depth effect isn't just decorative - it's a practical application of the Law of Figure-Ground that helps users instantly recognise which elements are interactive and currently in focus.
In the below example, Apple uses white Cards with subtle shadows to showcase different iPhone models, creating clear visual separation between product options. Each card floats slightly above the grey background, making the content distinct and clickable.
In the below image, white cards appear to float above the background while grey boxes recede, creating a sense of depth - though this is just an optical illusion on a flat surface.
The Law of Figure-Ground takeaways
- Our brains separate elements into foreground and background
- Lighter elements appear to come forward while darker ones recede
- Drop shadows help create depth and visual hierarchy
- Cards and containers help organise content into distinct sections
The Law of Symmetry
Objects, perceived by the user to be similar, group together.
The Law of Symmetry states that we inherently find symmetrical shapes and structures more aesthetically appealing, well-balanced, and orderly compared to their asymmetrical counterparts. This principle underscores our brain's intrinsic inclination towards seeking equilibrium and consistency in the visuals we come across.
Symmetrical elements are perceived by us as a cohesive entity, where each side reflects the other in terms of shape, dimensions, and layout. This law implies that symmetry holds a natural allure for us, making symmetrical designs more straightforward for us to interpret and understand than those that are imbalanced or asymmetrical.
Symmetry in UX design brings forth a range of benefits:
- Visual harmony
- Clear navigation
- Usability
- Don’t make the user think!
- Aesthetic appeal
- Creates hierarchy
- Simplifies user comprehension
- Maintains design consistency
In the below example, you can see how the symmetry makes it clear to the user that their are four pricing tiers and which areas of the tiers are comparable.
The Law of Symmetry takeaways
- Our minds naturally group symmetrical elements together
- Balanced layouts create a sense of order and stability
- Symmetrical design makes comparison easier for users
- Visual balance helps users process information quickly
The Law of Common Fate
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
The way our brains group things together isn't random - it follows some pretty clear patterns that psychologists call the Gestalt principles. Think of it like how your brain automatically sorts your sock drawer - matching pairs naturally go together.
These principles boil down to five main ways we group things: by how close they are (Proximity), how similar they look (Similarity), how they flow (Continuity), how we complete partial shapes (Closure), and how they connect (Connectedness). The Law of Common Fate builds on this by showing how elements that move or function together are perceived as a group - just like how you instantly know which apps are related when they share the same design style. Google, Apple and Microsoft use this principle to help user’s identify their apps in a sea of brands:
In the below example, the use of background colours to divide sections and card designs for testimonials indicate to the user that these are seperate blocks of information and that the testimonials are a type of content that is repeated - having a common fate.
The Law of Common Fate takeaways
- Elements that share a space naturally feel connected to users
- Borders and boundaries help users understand what belongs together
- Consistent backgrounds group related content effectively
- Similar styling tells users "these things are related"
Goal-Gradient Effect
The tendency to approach a goal increases with proximity to the goal.
Think about that feeling when you're filling out your LinkedIn profile and see it's at 90% - suddenly, you're determined to add that last missing detail. This powerful psychological principle isn't new; it was first spotted by Clark Hull in 1934 when he noticed rats in a maze would run faster as they got closer to their food reward. In modern interface design, we see this same effect driving user behaviour - a step-list is a common UI element born from this principle.
In the below example from Zen Desk, the step list helps the user not only understand where they are up to, but entices them to finish.
The real magic happens when we deliberately design for this effect. Progress bars, achievement badges, and profile completion meters all tap into our natural drive to finish what we've started.
Take daily streak counters and level progression systems aren't just pretty graphics. They're carefully crafted to show you exactly how close you are to reaching your next milestone, making you more likely to complete "just one more lesson" to keep your streak alive.
The Goal Gradient Effect takeaways
- Users naturally speed up their efforts when they can see the finish line
- Progress indicators motivate users to complete tasks
- Breaking large goals into smaller milestones maintains momentum
- Clear visual feedback helps users stay engaged
Final thoughts
We use screens throughout our day without conscious thought about how they work. My three-year-old perfectly illustrates this natural interaction - confidently navigating her iPad and swiping through apps with ease. When she tries to swipe the TV screen, expecting it to respond like her tablet, it demonstrates how deeply these interface design principles have become embedded in our behaviour, even from our earliest interactions with technology.
That natural, intuitive feeling when using a well-designed app isn't accidental - it's the result of understanding and applying these time-tested principles. While the technology we use has changed dramatically since these laws were first discovered, the way our brains process information hasn't.
What I find most powerful about these principles is how they work together in modern interfaces.
Understanding these fundamental principles helps us create better digital experiences. Whether you're designing a simple website or a complex application, these laws provide a reliable framework for making design decisions that align with how users naturally think and behave.
Further reading:
- The Laws of UX website: lawsofux.com
- Steve Krug’s Don’t Make Me Think
- Interaction Design Foundation IxDF: The Gestalt Principles
These scientific principles can be directly translated to screens, and is how a book like Steve Krug’s Don’t Make Me Think is still relevant today.
It was originally released in the year 2000.
References:
More posts like this
