Stepping back from our design systems

Component led design has become very popular recently. Responsive design is complex and it is understandable why alternative approaches focusing on components have become more popular. To be clear, I am an advocate of design systems.

However, at the end of the day this method of working is primarily a method for solving difficult internal problems that we face in design, development and content management. The end users of our digital products do not recognise the atoms, elements and molecules with which our design systems operate. Sure the user can benefit from a greater sense of consistency, but lets be realistic, users will not consciously operate at the component level when we have spent the last 25 years talking about “webpages”. It is this difference in mindsets and the familiarity with our design systems that I want to talk about.

We are experts in our design systems
So we have conducted the component audit, built the style guide and identified every element in our atomic design approach.

Your collaborative approach with the client means that their content production team are equally well versed in the new design approach. After three months of working on the project you and your client recognise every atom, element and molecule that you have crafted. The project is going well.

My concern is that the longer we work on a website (either in its design or post launch) the more expert we become in it. We remember all of the previous design decisions we have taken. We recognise that “Input Field Atom” that actually makes up the “Email Sign Up Molecule”. We know the CMS inside out and how we can mix and match components to make our desired outcomes. Ultimately, we can look at a page and we can quickly tell exactly how it is built.

We have become experts in our design system.

The problem with becoming an expert in something is that you find it that much harder to empathise with a novice. To look at something for the first time and understand what you are seeing. Let me use an example from the 1970’s to explain what I mean.

Expertise in Chess
In 1973 two psychologists called William Chase and Herbert Simon were conducting research at Carnegie-Mellon University on Perception in Chess. Specifically they were exploring what it was that expert Chess players saw that novices didn’t.

In essence their experiment went as follows:

  • They had various types of chess player ranging from “master” to “novice”
  • Each participant in the study was shown a chess position for five seconds. They were then given a board and a set of pieces and asked to recreate the position they had just seen.
  • Participants were judged on their ability to get as many of the chess pieces in their correct positions.
  • Some of the positions shown to participants were taken from actual chess games whilst other positions were complete random presentations of pieces on the board.
A 2D representation of a chess board showing a traditional chess position

Figure 1: A position taken from an actual chess game

A 2D representation of a chess board showing pieces randomly placed

Figure 2: Chess pieces randomly placed on the board. This position is unlikely to occur in a real game

Chase and Simon took their results and compared the performance of “masters” with “novices”. What they found became one of the most famous studies in psychology around expertise and performance (this study is taught on most undergraduate psychology courses).

As you would expect, chess “masters” were better than “novices” at recalling positions. However this finding only applied for positions taken from real life games. When the results of the random board positions were compared between “masters” and “novices” there was little difference between the two groups in terms of memory recall.

Subsequent analysis showed that chess masters were able to use their extensive knowledge and memory of thousands of real world positions to effectively chunk up the chess boards they were shown in the study. For example, a castled king position is a very common position in chess involving a king and rook with three pawns in front of them (see figure below)

Two castled king positions side by side with one highlighted in its constituent components

Figure 3: What a “master” sees as one component a “novice” sees as five

It was proposed that chess “masters” would see the castled king position as one group whilst novices would see up to five pieces. The more expert a chess player then the greater likelihood of them recognising a configuration of pieces and being able to recall them easier.

Therefore, when the random chess positions were shown a masters expertise was effectively nullified as they were thrown back onto the resources of the short term memory, just like the novice group.

Stepping back from our expertise
Although not a direct comparison with the world of component based web design, I have thought about this famous psychology study several times in recent months and the impact that expertise has upon our perception of a configuration of components.

Specifically, expertise in our design systems means that we can recognise every component so quickly that of course the page looks good to us when we just to add a few more components. A type of “wood for the trees” syndrome can take effect.

Responsive design systems are by their very nature complex. However, we must never forget that a complex arrangement of components can appear simple to us because by our very nature we are experts in that system.

Put yourself in the shoes of the user, the “novice” in my analogy. They are seeing the board for the first time and they are not certain where all the pieces go or what they do. Maybe the board has been set up nicely for them but then again maybe its a horribly complex position that only a “master” could understand.

Component led design has many benefits to us as a community. But as I stated at the beginning, these benefits are primarily internal to our design, development and content processes.

As we embrace this more flexible yet potentially more complex way of working we must ensure that this added complexity does not shine through into our final configurations.

Our design teams and content producers (especially them!) must remember to take the time to step back and look at the bigger picture at the page level. As the diagram in figure 4 shows (and what I was getting in an earlier post from 2013), there are good and bad ways of combining elements to create either complexity or simplicity (taken from 101 Things I learnt in Architecture School).

12 rectangles are arranged in different configurations on the page. On the left they form a jumbled collective. On the right they are arranged to form the outline of three overlapping rectangles with the smaller ones visible inside. Thus the 12 shapes are reduced to the informed simplicity of three blocks.

Figure 4: Combining elements to make complex and simple shapes

Whilst component based design systems are providing us with a lot of value internally, we must ensure that our final external facing configuration of components is not random or complex but familiar and uncluttered. Only then can we ensure that we are giving our users a playable position to start from.


  1. Chase & Simon (1973). Perception in Chess
  2. Frederick (2007). 101 things I learnt in Architecture School

Thanks for reading!

If you enjoyed what you read then please do share it, I’m always appreciative of the support.  You can also follow me on Twitter here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s