Visual Design

The alternative to good design is always bad design. There is no such thing as no design.

In this chapter we look at a few laws of gestalt and their application in digital interfaces, and the evolving field of interaction design.

Now that we have conceptual clarity about the intention of the solution and insights about the user’s expectations, along with an architecture for information, we can shift our focus toward shaping the visual graphical interface. Take this opportunity to think deeply about the form of your product. Form is a function, and nothing brings that to life better than the principles of gestalt.

The word gestalt literally means an organised whole that is perceived as more than the sum of its parts. It came into english in around 1920 from German Gestalt, literally ‘form, shape’.

To elevate the visual form of our product we could employ the principles of gestalt. These help us understand how we process visual information by either starting with the whole and then working our way to the parts, or by attempting to break a confusing whole into its simpler component parts. While it’s not a hard science, the laws of gestalt broadly include:

Figure-Ground

The tendency for the human eye to distinguish between a main object (the figure) and its surroundings (the ground). It's how we identify what's important in a scene from what's not, enabling us to make sense of visual information.

Simplicity or Good Figure

The tendency to interpret ambiguous or complex images as the simplest form possible. The German word "Prägnanz" means "good figure" or "conciseness," and it describes the tendency of the mind to simplify visual information.

Closure

The tendency to perceive incomplete shapes or patterns as complete entities. Our brains automatically fill in missing information to create a recognisable whole, even when parts of an image are obscured or missing.

Common Fate

The tendency to group together elements that move or change in the same direction or manner. This principle is particularly useful in understanding how we perceive motion and relationships between objects in dynamic environments.

Continuity

The tendency to follow a path, perceiving it as a continuous, unified element rather than separate lines or shapes. When visual elements are aligned, we automatically organise them into continuous forms, even if there are breaks or intersections.

Similarity

The tendency to group similar elements together based on shared visual characteristics like color, shape, size, or orientation. Items that share attributes are seen as belonging to the same group, even if they are physically separated.

A century after their inception, let’s look at how the logic of gestalt theory continues to find relevance in digital interface design today.

1. Isolation Effect First off, the figure-ground perception finds it’s application as the Isolation Effect in user experience design. Gestalt states that we instinctively perceive objects as either being in the foreground or the background. This speaks directly to the Von Restorff effect or the Isolation Effect, which predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. The simple takeaway is that we should make important information or key actions visually distinctive.

2. Aesthetic-usability effect

   The Gestalt psychologists called this the Law of Prägnanz (aka “good figure” or “law of simplicity”) — possibly a forerunner to the aesthetic-usability effect—which speaks to the user’s tolerance of minor usability issues when they find an interface visually appealing. Tools can make it tempting to add all sorts of elements to your interface. Just because you can, doesn’t mean that you should — be deliberate about the additional information that you add to focus user attention.

Keep it simple for new users while allowing for complexity for power users. Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

The concept of ‘less, but better’ has its origins in the Bauhaus movement, but it was Braun and H.C. Dieter Rams that created a mindset of order, clarity and simplicity and applied it to electrical appliances.

As Edward Tufte, put it so beautifully in his book, The Visual Display of Quantitative Information, “Clutter and confusion are not attributes of data — they are shortcomings of design.“

Alternate points of view argue that the more accessible an interface is, the less aesthetic appeal it will have. A point of view on why some badly designed websites do well.

1. Law of Closure Our brains tend to fill in the blanks of an incomplete picture, to perceive a complete image (a consequence of confirmation bias). In digital interfaces this maybe experienced when you see a partial image above the fold on a screen, your brain wants to complete it by viewing the whole picture, which unconsciously drives you to scroll down a screen. Or sideways, as in the Spotify app.

2. Law of Common Fate Users expect associated elements to move in the same direction, and vice versa. To fulfil users’ expectations, you should ensure that the elements that belong together move in the same direction and at the same speed. You can use this when designing nested menus and dropdown navigations. This can often supersede or override other laws of Gestalt such as grouping by proximity, especially when applied as an animation of uniform motion for unrelated objects.

---

Why typography matters

Typography isn’t about making your text look good, it’s about building trust. Consistency in fonts, spacing, and design across a user's journey creates a cohesive brand image. Whether it’s your website, social media, or printed materials, using the same system and rules of font and hierarchy makes your brand recognisable and professional.

• Clarity focuses attention: Cognitive overload is a problem in today’s digital landscape. Users are more likely to pay attention when what you have to say is coherent — both visually and in tone.

• Personality brings engagement: Fonts can evoke powerful emotional responses. A playful script typeface can make your brand feel youthful and energetic, while a classic serif font exudes sophistication and trust. Think of it like choosing the right outfit for your message.

• Accessibility widens scope: Legibility and readability are non-negotiable. Universal design principles are a way to bridge mismatch of a user and their environment. Enable users to edit font weights, contrast, and letter spacing if required.

Good typography is measured by how well it reinforces the meaning of the text, not by an abstract scale of merit. Typographic choices that work for one text won’t necessarily work for another. Don’t rely on rote solutions. One size never fits all.

[read more]

---

What is interaction design?

The essence of the word "interaction" implies a relationship between a human and an environment. Interaction design is an art form to make experiences that fluidly respond to human intent. When does a swipe trigger an action? Do gestures retain momentum? What happens if a finger is covering content? How can we predict intent based on context? Executing well on details like these make products feel like a natural extension of ourselves.

Design can often feel like there's no science to it — only feel and intuition. This essay is a contemplation on the invisible details of a few interactions that we often use but rarely think about.

---

A note on Data Visualisation

For digital products dealing with more complex social and global problems, an information designer's role in bringing clarity holds a new level of importance. As tasks grow more confusing, visualising data to be digestible is paramount. Translating complex data into a visual context, such as a map or graph, to make it easier for the human brain to understand and pull insights from data.

The main goal of data visualisation is to make it easier to identify patterns, trends and outliers in large data sets.

Just the way certain navigation patterns suit certain types of information better than others, specific visuals are better suited for specific types of datasets. For example, scatter plots display the relationship between two variables well, while line graphs display time series data well. Ensure that visuals assists the user in understanding your main takeaway. Misalignment of charts and data can result in the opposite, confusing your audience further versus providing clarity.

As discussed earlier, knowing your user is the key to effectively visualising data, but people aren’t always accurate at describing their needs. For instance, if not asked the right questions during research, users are often unable to point us toward the most relevant data needed in a specific context. So what do we do, when a user says they want “everything” and that every data point is important? The goal of a data visualisation is to nudge your user toward insight or action. Dashboards are typically categorised as executive, operational, tactical or analytical, and each user’s needs vary. For example, a marketing team that’s rewarded based on the number of people reached needs different metrics than one rewarded for qualified leads. When in doubt, stick to the 80/20 rule (also known as the Pareto Principle). Don’t try to account for everything but instead focus on the 20% that’s most strategic— and that can deliver 80% of the value.

Designing long scrollable dashboards is one of the most common mistakes. The solution is prioritisation. After doing more research and interviews, you should be able to identify core information. Don’t tell the full story — summarise instead, and surface only key info. You can use additional interactions as a way to fit more content, and not overwhelm the user with data.