How formal systems achieve UI simplicity


Formal systems and isomorphism help in discussing the deeper merits of consistency in UI design. Isomorphic relationships have been used to characterise inherent equivalencies of phenomena across a broad range of disciplines, from mathematics, to philosophy, to linguistics, to biology, and more. Although fraught with oversimplification, think of it this way: when identifying the same meaning, function, or purpose from two or more different forms, you have succeeded in uncovering an isomorphic relationship.

The term formal system can be interpreted in a number of ways. I intend to use it here in a stricter sense. It should act as an aspirational template for rigour within user experience design.

I’m loosely borrowing the term from mathematics and philosophical logic, where a formal system is one that has a finite set of rules. Meanings within that system remain forever passive as their interpretation must always follow the finite rules imposed. In such systems, determining whether different forms are truly isomorphic is much easier, because the passive meanings in that system are accurately defined and communicated.

In contrast, the use of natural languages is a great example of a meaning-filled system of visual and auditory symbols that is not passive.

A casual chat over coffee is far too creative to be the type of formal system I’m referring to. It operates in a fluid swirl of hugely variant rules. The fact that people come away understanding one another proves our remarkable talent for generating and interpreting meaning. In linguistics this is called the redundancy of language. But it is this redundancy that allows for little frolics into the fun world of connotation. Almost every word we use, the context in which we use it (e.g. in a coffee shop, at work), and the way we use it (e.g. if we shout it, whisper it, secretly write it down and pass it under the table), all change the understanding of that word and show that meaning is incredibly active in such a system.

Such a conversation is the end result of years of socio-linguistic learning. Interface designs don’t have the luxury of years of learning. If we want people who’ve never used our product before to just get on with it and use it, and if we want new team members to contribute to that product effectively, we need to acknowledge that processing times should be reduced to an absolute minimum. Our normal creativity in non-strict symbol systems, like natural language conversations, isn’t appropriate when designing a digital interface.

By adopting (or at least working towards) the concept of formal systems within our designs, with passive meanings, we can quicken interpretation, reducing the amount of interpretative work required by the user.

Style guides or pattern libraries are a long-standing attempt at this kind of systemic formalisation. However, most, if not all, of these guides end up being used incorrectly simply because we don’t fully appreciate their raison d’etre below the superficial purpose of communicating style. The concept of a formal system, which helps immensely at ruling out false isomorphic misidentifications, is either not fully understood by those who use it, or it is actively rebelled against by those who have the urge to be creative – that innate human desire to create a system of active meanings.

So, it is not enough to create design systems. It is doomed for failure if we don’t dig a bit deeper and expose the Why of it all. Without truly thinking about the Why, those who create and use such systems are continuously open to altering the How in creative ways, but such that it inevitably undermines the efficacy of those systems. By better understanding the ontology of style guides, pattern libraries, or more exhaustive design systems, we can make them better; more robust within a team.

I may be getting a bit too abstract, so let’s look at an extremely basic example.

What’s the difference between a warning and an error? A warning indicates an action may have undesirable consequences if not heeded, but doesn’t prevent you from ignoring it and proceeding regardless. An error communicates that a blocking transgression within the system has occurred. Either the transgression needs to be amended before proceeding, or it is final in nature, so the original intent or action has been aborted.

These different meanings may seem obvious, but why then is this one of the more conflated concepts in UI design? Why is it fine that any number of the following icons are used interchangeably?

errors or warnings?

Such variation is prohibited in a formal system. Anyone who has signed up to be a contributor to such a formal system would not allow such leniency. This doesn’t make the person a horrible nitpicker. He or she is simply following the rules of system. It’s not personal and none of the other contributors would see it as such, because they too have understood and agreed upon the inherent nature of the formal system.

The tendency to be lenient is due to our pragmatic amenability to non-strict and creative meaning generation and interpretation. We’re so good at it, that we become sloppy. By using these types of icons interchangeably, there’s an assumption that a common-enough meaning is being conveyed by different forms.

Such false isomorphic relationships, however, require the user to make creative interpretations to correct this falsity and uncover the real meaning based on other factors. This creates an unnecessary processing overhead. It also starts to instill a lack of trust in the design. Can I relaxingly trust what I see and react in split seconds? Or will I need to pay close attention to everything in order to get through this process?

Now extrapolate this example to the numerous things that come together to make user interfaces. The mind starts to boggle at all the ways in which cognitively expensive inconsistencies can creep in. Each one seemingly harmless, but collectively making your product way more work to use than it should be.

I don’t have the expectation that all digital interfaces need to use the exact same symbol forms, interactions, and macro flows, but I don’t think it is too much to expect strict consistency within our own designs, and the stricter the better. Consistency means that after an initial bit of creative processing, a user can progress more efficiently based on a set of hard rules. With a formal system mindset, meanings quickly become passive and more intuitive. Things become simpler, in the truest sense of the word.

Designers often struggle to explain what design simplicity is, because it is a very difficult subject. Strictness and reduced interpretative processing due to the avoidance of overly active meanings is one clear way of understanding, explaining, and implementing simplicity.

Consistency is more than a matter of style. We need to give it the respect it deserves as being fundamental to designing simple, easy to use products.