The importance of non text elements in apps

Read the reviews of almost any app sitting below 3 stars and you will find the same complaints repeated in different words: it feels cold, it feels confusing, it feels like it was built for someone else. Rarely does a reviewer identify a specific piece of copy as the problem. What they are describing, almost always, is a visual and behavioural experience that is communicating the wrong things, or nothing at all.

The visual layer of a product communicates before any copy is read, shaping whether users feel trust, anxiety or belonging.

Text carries the explicit message. But non-text elements, colour, iconography, illustration style, animation, spacing, typography, carry everything else. They are the tone of voice beneath the words. And because they operate largely below conscious awareness, users absorb them before they have read a single sentence. Design judgements form fast, some research suggesting within 50 milliseconds, according to Lindgaard et al., 2006. By the time a user reaches your onboarding copy, they have already formed an opinion about whether this product is for them.

What follows is a detailed look at how non-text elements work, where they succeed, where they quietly undermine a product, and how to think about them as a deliberate design system rather than an aesthetic layer bolted on at the end.

What Non-Text Elements Actually Are

Non-text elements are every part of a digital product that is not written language. That definition sounds obvious but the category is broader than most design briefs treat it as being. It includes colour choices and colour relationships, iconography and the visual style of those icons, illustration and photography, animation and motion, spacing and layout, typographic choices such as weight, size, and letterform character, and interactive feedback like haptic patterns, loading states, and transition animations.

Each of these carries meaning independently of what the copy says. A sans-serif typeface communicates differently to a humanist one. A sharp-cornered button shape implies something different to a pill-shaped one. A loading spinner that pulses gently produces a different emotional response to one that spins mechanically at a fixed rate. None of these are neutral choices, and understanding how they interact is central to considered app UI design.

The problem is that design briefs tend to treat these elements as styling decisions made after the functional structure is in place. Colour gets chosen near the end. Animation is added to make things feel polished. Icons are selected from a library rather than drawn to a consistent visual logic. When emotions are treated as an afterthought in this way, the visual layer becomes incoherent, and users feel the inconsistency without being able to name it.

When writing your design brief, list the emotional states you want users to feel at each key moment. Treat those emotional targets as requirements, not as aspirational notes at the bottom of the document.

Why Visuals Communicate What Copy Cannot

Copy communicates through meaning. Visuals communicate through association, and association works faster. A user reads "we take your security seriously" and processes it consciously, applying scepticism, comparing it against past experiences, weighing it against what they know about the company. A user sees a particular shade of deep blue with clean, well-spaced typography and responds to it as trustworthy before they have formed a conscious opinion at all.

This is how human perception works. We are wired to read environments before we read language, because environments used to tell us whether we were safe. Digital products activate the same systems. The visual layer is processed as an environment, not as a document.

Copy also struggles with emotional states. You cannot write your way to calm in the same way that a breathing animation can produce it. You cannot write your way to delight as effectively as a small, unexpected moment of visual playfulness can. When we worked on a financial application that carried significant user anxiety, text-based reassurance helped, but the deeper work was structural: framing information visually so users understood where they were, what they were looking at, and what came next. Knowing those things, without having to work for them, was itself calming. The visual structure did what no amount of reassuring copy could have achieved alone.

Icons, Illustrations and Imagery as Primary Messaging

Icons are often treated as navigational furniture. In practice they are messaging. An icon communicates the category and character of a feature before any label is read, and when the visual character of an icon is inconsistent with the surrounding product, users notice something is off even if they cannot explain what.

Illustration style carries even more weight because it implies a relationship with the user. A photographic style suggests the real world, with all its standards and comparisons. An illustrated style creates a contained world with its own rules, and that distinction matters enormously in products where the user might feel judged or inadequate.

Headspace's choice of illustration over photography removes the implied standard a serene photograph would set, doing trust-building work most teardowns miss entirely.

Headspace's use of illustration rather than photography is a good illustration of this principle in action. A photograph of a serene, composed person sets a real-world standard that a user experiencing anxiety or distraction will feel they are failing to meet. An illustrated character implies nothing about the user's own state. Most teardowns of wellbeing apps focus on copy and language, and skip past the fact that the style of the artwork is carrying a significant portion of the trust-building work. The choice of artistic style is a strategic product decision, not a visual preference.

Before selecting photography or illustration for a product, ask what standard each style implies. If users are likely to feel vulnerable or self-conscious, illustration typically creates a safer emotional context than photography.

Colour and Typography as Emotional Signals

Colour communicates emotional tone faster than any other visual element. Research from the Max Planck Institute suggests colour information reaches cognitive centres 25 milliseconds faster than shape information, according to Striven's analysis of design psychology research. That gap matters in an environment where users are deciding whether to stay or leave before they have consciously evaluated anything.

Colour associations are also culturally variable and context-dependent. A colour that reads as energising in one market reads as aggressive in another. What matters for product design is not finding a universally "correct" colour but building a colour system that is coherent with the emotional promise of the product and consistent across every surface.

Typography as personality

Typography communicates personality before a single word is read. A product using heavy, geometric sans-serif type signals something different to one using a humanist face with softer letterforms. Neither is correct by default. The question is whether the typographic personality aligns with what the product is trying to make users feel.

Consistency as cognitive relief

Visual consistency across a product reduces cognitive load. Clear typographic hierarchy, consistent iconography, accurate spacing, and the same visual tone across every screen all contribute to a product feeling predictable and therefore safe. they are simply using an app that somehow feels wrong.

Animation and Motion as Behavioural Cues

Animation is the most behavioural of all non-text elements because it unfolds over time and can therefore shape the user's own pace and emotional state. A slow, smooth transition does not just look elegant, it physically slows the user down. A fast, snappy interaction creates a sense of responsiveness and control. Neither effect depends on the user reading or thinking about it consciously.

This is the deepest application of what we mean when we talk about the interface doing the emotional work rather than the copy. In a meditation product, a breathing animation that expands and contracts slowly produces a physiological slowing response before the user has read anything on screen. The interface is calming the user, not instructing them to become calm. That distinction is worth holding: there is a large difference between a product that tells users how they should feel and one that creates the conditions for that feeling directly.

Motion also signals hierarchy and causality. When one element triggers the appearance of another, the animation between them tells the user that these things are related. When elements appear without transition, users have to work out the relationship themselves. Micro-interactions carry this kind of meaning throughout a product, filling in the relational and emotional detail between the obvious interface moments, the way that small physical gestures fill in meaning between the words in a conversation.

Review every transition and animation in your product and ask what emotional state it produces, not just whether it looks smooth. Speed, easing curve, and sequence all communicate something. Make sure those communications are intentional.

When Visual Design Contradicts the Product's Promise

A product's visual language makes a promise. If that promise contradicts what the product actually delivers, or what the brand says about itself, users feel the dissonance even when they cannot describe it. This is one of the clearest signs that emotional design was treated as an afterthought rather than a foundation.

You see it when a product built around human connection uses cold, data-heavy visual language. You see it when a product promising simplicity presents users with a cluttered, information-dense opening screen. You see it when a wellness product uses high-contrast, urgent colour choices borrowed from a transactional e-commerce context.

The notification timing problem

On a concierge app we built for residents moving into a new block of flats, the visual and behavioural design had to match the product's core promise of being a human, community-oriented experience. We made the deliberate decision not to surface all building information at once. Users who had just moved were in highly variable emotional states, some buying their first home, others relocating after a separation. Sending a full directory of information the moment they opened the app would have contradicted the product's promise directly. Instead, we drip-fed relevant content over the first few days, matching information to when users would genuinely need it. The timing and sequencing of content was itself an expression of the product's character.

Marketing versus product

A common version of this contradiction appears when marketing language promises emotional warmth and the product interface delivers functional coldness. Users arrive with an expectation set by the brand's tone and imagery, then encounter a product whose visual language was driven entirely by a functional brief. The gap between those two experiences damages trust faster than almost anything else.

Mapping the Emotional Arc Across a Product Journey

A product is a sequence of emotional experiences, and the non-text layer needs to respond to that sequence rather than maintaining a uniform visual tone throughout.

A user opening an app for the first time is in a different emotional state to a user completing their fifth session. A user in an error state needs a different visual response to a user in a success state. A user deep in a flow should be experiencing something different to a user at a moment of decision. If the visual language is the same across all of these moments, it is failing to meet users where they actually are.

Among the documents we produce from a research debrief are emotional arc maps that capture how users feel at each stage of their journey through a product. These are used alongside brand personality documents to ensure that whatever is built next aligns with how the brand communicates with people, and that implementation decisions are emotionally coherent rather than just functionally justified. An emotional arc map makes the sequencing of visual and behavioural choices visible, so the team can see whether the product is genuinely taking users on the right journey or just applying the same visual system to every screen.

• Identify the emotional state users arrive with at each key screen
• Define the emotional state you want them to be in when they leave that screen
• Map which non-text elements are responsible for creating that transition
• Check for moments where the visual language contradicts the intended emotional journey

Non-Text Elements in High-Anxiety Contexts

Anxiety is the emotional state that non-text elements are most likely to either reduce or amplify, and most products fail to account for it deliberately. Financial products carry anxiety about money and judgement. Health products carry anxiety about data, diagnosis, and privacy. Moving-home products carry anxiety about a major life transition. In each case, the visual layer is either working to reduce that anxiety or adding to it.

On the financial application we worked on, the product was very functional and information-heavy. The anxiety users brought to it was real and variable, depending on account type, whether they were saving for something, or what kind of financial decisions they were facing. The visual design choices around information density, typographic hierarchy, and the sequencing of what users saw first were all doing emotional work. Reducing the amount visible at any one moment, framing what users were about to see, and giving users a clear sense of where they were in the product all contributed to a markedly less anxious experience. These were not copy decisions. They were structural and visual ones.

In high-anxiety contexts, the non-text layer also determines whether the product feels like it is on the user's side. Colour choices that feel clinical or urgent communicate threat. Generous spacing and calm typographic choices communicate that there is time and room. Illustrations that feel warm and non-judgmental communicate that the product understands the user might be feeling uncertain. None of these effects require a single word of copy.

How to Audit the Non-Text Layer of Your App

Most product audits focus on conversion rates, drop-off points, and usability failures. Very few look systematically at what the non-text layer is communicating emotionally. An audit that only asks "can users complete the task" will miss a large proportion of what is actually driving behaviour.

A non-text audit works through a set of structured questions applied screen by screen.

1. What emotional state does this screen's visual design produce, independent of the copy?
2. Does that emotional state match what users need at this point in their journey?
3. Are the colour, typography, and iconography consistent with the product's overall visual language?
4. Does the animation or motion on this screen support or disrupt the intended pace?
5. Where a user feels friction here, is the source visual and behavioural rather than informational?

Run this across every primary screen and then look for the moments where the emotional communication of the visual layer is working against the product's stated intent. Those are product problems, and fixing them often produces more measurable improvement than revised copy would.

A useful cross-check is to remove all text from screenshots and ask what kind of product the remaining visual layer communicates. If the answer is inconsistent with what the product is, the non-text layer is carrying the wrong message.

Conclusion

The non-text layer of a product is the primary channel through which users form their emotional relationship with what you have built. It operates faster than language, works below conscious awareness, and communicates things that copy structurally cannot. A product whose visual language is incoherent, inconsistent, or misaligned with its emotional promise will produce friction that users cannot name but will certainly feel.

Getting this right requires treating non-text elements as deliberate communicators from the beginning of a design process, not as styling choices applied to a functional structure that already exists. It requires mapping the emotional arc of a product and asking, at each stage, what the visual and behavioural layer is actually saying to users. And it requires auditing honestly, checking whether the product is making users feel the right things at the right moments.

The products that earn loyalty are the ones where the visual layer and the functional layer tell the same story. When colour, motion, illustration, and spacing all communicate the same thing as the product's purpose and promise, users do not notice the design. They just feel that the product is right for them. That is the point.

Let's talk about the emotional layer of your product.

Frequently Asked Questions