industrial robots
Cranking out widgets in search of meaning...

Do we need a new atomic (design) age?

Earl Cousins, June 30, 2021

an illustration of a bearded man in a lab coat, an atom, and a laptop computer showing a nuclear symbol on its screen

Brand language, style guides, pattern libraries. These concepts aren’t so recent. Neither are design systems, really. The idea of considering them from an explicitly atomic viewpoint is more current, however. Brad Frost’s Atomic Design is only about five years old, so the concepts could still be considered somewhat novel.

Before we get too far into atomic design, let’s look at some atomic theory terms, just for reference:

Atom:

The smallest unit of matter that forms an element.

Molecule:

A group of two or more atoms, bonded together.

Okay, back to Brad…

The essence of atomic design is that by designing and building from atoms and molecules, much like blocks of Lego, we enable greater consistency and scalability of our designs while reducing time, effort, and cost. It stands to reason then that when we create design systems, they reflect atomic design principles.

Lego Blocks

In Atomic Design, the smallest component of an interface is an atom: “If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.”

Sounds good right? It aligns nicely with our general definition of an atom.

Let’s look a little bit further into what makes something functional. We’ll also come back to that quote later.

Functionality = Semantics

The semantics of an object are simply what a thing does. Its functionality.

If I describe a small platform on legs you can sit on with a vertical plate to lean against, you’ll likely think of a chair. In web design terms, if I describe a passage of text that is clickable and opens a new page of web content, you’ll hopefully think of a link.

How then does someone who has never used a chair or a link before understand what they do?

Affordance

Affordance is what the environment offers the individual.

It’s how the user knows what a thing does or is capable of.

In The Design of Everyday Things, Don Norman mentions someone getting trapped between two sets of glass doors because they couldn’t tell which of the doors opened which way, having to wait until others used them before they could observe how to exit the building. We’ve all come across door handles and not known whether to pull or push them, so we try both. Those of us who use computer mice have all encountered links that aren’t underlined and had to hover over them, checking for interactivity. We compensate for the lack of affordance, that is, the lack of an offer of capability.

It’s this lack of affordance that often leads to the mismatch that causes inaccessibility.

So, how does this all work together then?

Nuclear Fusion – let’s make some atomic design molecules.

Nuclear fusion is a reaction in which two or more atomic nuclei are combined to form one or more different atomic nuclei.

So, we know we want to build something useful, and we want to use atoms to build a molecule that does something (has semantics) and communicates what it does (has affordance).

Let’s try a few things…

If I take some basic parts, I can build either a chair or a table, I can even reuse some of the parts:
Legs + Platform + Vertical Plate = Chair
A user can tell from the height and position of the parts that a chair affords sitting on it and leaning back.

Legs + Platform = Table
A user can tell from the height and position of the parts that a table affords holding objects off the floor, such as dinnerware or an attractive plant.

Let’s look at some design system examples:

Form Label + Input = Text Field
A user can tell that a specific piece of data is being requested and they can input it.

Form Label + Select = Dropdown
A user can tell that one of a specific set of options is being requested, in context.

Note: The smaller parts are atoms, but they don’t do anything by themselves, they need to be part of a molecule to have both functionality and affordance.

So how do we know what’s an atom versus a molecule in the system, anyway? What do these terms mean in a design system context?

Atoms + Molecules = Components?

In the current atomic design age, design systems don’t specify between atoms and molecules and therefore, which atoms can be safely combined in order to make usable molecules. There’s no differentiation between these “components,” even though some require others to be usable.

Even Brad Frost refers to all the atoms as if they are completely interchangeable and can each stand alone, as if the legs from a chair also could. Remember this? “atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further…”

If I put a form label on a web page by itself, what’s it labelling?

That part about breaking things down is interesting too, let’s look at that in a slightly different way.

What (I think) Brad Frost missed

Designers are often taught to push boundaries or told to think outside the box. They copy and paste, mash ideas together and remix them. They take things apart in acts of creative destruction – and they should, as these are all part of the design process.

We can see this in how designers build upon past projects or incorporate new interaction patterns. We also see this when designers declutter or scale back a design in order to provide a more focused, clear interface to users. This is welcome, of course, unless it compromises semantics or affordance.

Atomic design (and therefore atomic design systems) don’t seem to account for this, nor recognize that not all atoms are created equal. Guidance needs to be in place for designers to understand the semantics and affordances of the atoms and molecules so that functionality and offers of capability aren’t unintentionally modified or removed.

Wikipedia seems to agree within this definition of nuclear fission… “the resulting fragments are not the same element as the original atom.”

Nuclear Fission – let’s split things apart (safely)

When we split or remove atoms from a molecule, we end up with something else. In design system terms, that probably also means something that lacks semantics, affordance, or both.

For example, an input with no label is like a chair with no legs.

What happens if we don’t use complete molecules to build something else?

Chair + Table = Chaible?


[An object consisting of the legs and surface of a table, with the back of a chair added on top at one end of the surface.]

What happens if we split one of the atoms when we build a molecule?

Text Field + (partial) Dropdown = Currency Field

Note that I referred to the Currency Field component molecules as atoms instead. Hold that thought.


[Two views of a Currency Form Input Field, one with an Amount text label, but no label for the type of currency, the other with both labels.]

How then can designers modify things in a way that’s “safe” for users?

Designers need to understand the semantics of the atoms and molecules they use in order to choose the functionality they want to provide. They also need to effectively afford that capability to the user. Knowing how the various components function and what affordance each element provides allows for informed choices regarding combining various components in different ways.

OK, so how?

The new atomic (design) age?

Do we need a new definition of an atom, of a molecule?

Perhaps our design systems need to call out more explicitly what is considered an atom versus a molecule so that designers know what can be combined and what can be split without losing semantics or affordance.

Let’s go back to Brad Frost one more time…

“If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.”

There’s that word functional we were going to come back to.

So, considering our form label by itself on a screen, sure, it’s functional. It communicates a word or concept. It has the semantics of text. However, it isn’t labelling anything because there’s no input, it doesn’t offer any affordance. It isn’t usable.

Brad Frost seems to consider a form label and input field together as a molecule, even though neither can be used effectively alone.

Therefore, I think a better definition of both atoms and molecules within design systems might be:

If atoms and molecules are the basic building blocks of matter, then the atoms and molecules of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These basic components include HTML elements, and simple groups of elements, such as buttons, form inputs with labels, and others that can’t be broken down any further without ceasing to be usable.

Perhaps we can usher in a new atomic (design) age that takes a designer’s creativity into account without a loss of functionality or affordance along the way.