Maintaining the bigger picture in component led design

Design systems have recently been a major talking point in my office and the wider web industry. Whilst not an entirely new idea, the growth in interest in design systems carries a lot of merit and is a direct consequence, in my opinion, of the responsive design and content first movements.

One recent example of the design system way of thinking has been Brad Frost’s term Atomic Web Design. Brad identified five distinct levels in his atomic web design approach:

  • Atoms: Basic building blocks of our sites such as HTML tags;
  • Molecules: A combination of two atoms such as a form label, a field and a button forming a search box;
  • Organisms: Groups of molecules joined together to form a complex distinct part of an interface such as a product listing
  • Templates: These are concrete examples and groups of the above three items. They are typically where we start to see a design come together.
  • Pages: These are specific instances of templates and the most tangible to a user.

There is no doubting that thinking in a more granular / component based, system led approach rather than the “page” is excellent during the design phase of a website. Its excellent for the design team and the client to think in such a way as it enables a consistency of experience, optimisation of elements to be built (why have three carousels when one will do?) and a rationalisation of final templates.

My problem is the end user does not always think like this.

Wayfinding – Paths, Edges, Districts, Nodes and Landmarks

Since the dawn of the web we have called them “web pages” and told the public just as much. Even if as an industry we actually successfully managed to kill the page metaphor (“Kill the page” or “Content only, no navigation” have been two phrases I’ve seen banded around lately) people will still routinely attempt to locate themselves to a “place” within a digital product i.e. “Where am I?”.

The work of the architect Kevin Lynch in the 1950’s  identified a number of methods that people have evolved for navigating around cities. These are as follows:

  • Paths: These are the channels along which people move within the city. For example streets or footpaths.
  • Edges: These are boundaries between two places or regions. They help users group together general areas. For example, a large river bounding a park.
  • Districts: These are medium to large sections of a city. They will have recognisable character traits and be used as reference points.
  • Nodes: These are strategic points which are the focus of directions of travel. For example, crossings or two paths that converge.
  • Landmarks: This is a point of reference that a person cannot typically enter but can enable orientation because it can be seen from a distance. For example, a tall building or mountain.

My own experience has shown me that people routinely see themselves as being in a specific place and often adopt some of these wayfinding techniques to move around within a product or service.

Navigating the bigger picture
What i’m proposing is that particular design components (particularly at the “molecule” and “organism” level of Brad’s atomic distinctions) can be used by customers to orientate themselves within the website i.e. they can act as individual “paths”, “districts”, “nodes” or even “landmarks” in Kevin Lynch’s world.

However, when this happens customers are actually orienting themselves around these components within the context of the bigger picture i.e. the entire site. This is the reason why I feel we must be careful.

In my opinion, customers of a website will never think at the atomic / component levels that we as designers may operate. We may create incredibly flexible design systems featuring interlocking “atoms”, “molecules”, and “organisms” but it is still at the “page” level that we must ensure the site works for customers as this is the predominant metaphor in which they will be operating.

If we are too liberal or flexible in the application of our design systems then, in my opinion, we risk creating serious problems with wayfinding and orientation through homogenisation, repetition or misuse of elements.

Where lies the danger?

My concern with the design system approach is actually not during the design phase. My concern rests with post delivery when the client and subsequent teams of content authors inherit the new site.

Whilst the intelligent content management of a design system can utilise “atoms”, “molecules” and “organisms” to act as Lynch’s “paths”, “nodes” and “landmarks”; they can also be applied in such a ubiquitous and haphazard manner as to render them detrimental to the overall experience.

If a potential major strength of design systems is too aid digital wayfinding through consistency and orientation then, potentially, it is also one of their greatest weaknesses.

Therefore, my intent is to raise the concern that when creating our design systems we have to give serious thought to how and by whom they will be used after delivery.

Gestalt architecture

In writing this article I have found myself finding many parallels to architecture. The way that we design a building can have long lasting consequences for the way that it is inhabited. Both are essential life stages of the building.

Matthew Frederick (2007) wrote an excellent little book called 101 things I learned in Architecture School . I recommend every UX designer read it and absorb the parallels to our profession. One lesson in particular resonates with my point:

Create architectural richness through informed simplicity or an interaction of simples rather than through unnecessarily busy agglomerations.

Matthew goes on to provide some examples of unnecessary complexity in architecture, in particularly he states to avoid:

Agglomerating many unrelated elements without concern for their unity because they are interesting in themselves.

His accompanying diagram couldn’t resonate with this blog post more. Thank you for reading.

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.

Three levels of knowing: Simplicity, Complexity and Informed Simplicity

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.


One thought on “Maintaining the bigger picture in component led design

  1. Pingback: The risk of expertise in our design systems | Five Minutes with Ergonjon

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