Patterns in language and language in patterns.

This is an edited version of my talk at the first Patterns Day, Brighton, 2017.

Chapter 1: Invention (a short story intro.)

You wake up on a huge kitchen table in a massive castle. You turn your head to look around you. But, ouch. You lift your hand to feel your neck. A cable. Running into your neck. You tug at it and it comes loose quite easily. You look down at your hand. It’s kind of a green hand, and it looks like it’s been sewn onto your arm. One limb sewn onto the other. You are like some kind of botched together creature made of component parts.

You stretch out, and yawn, and this cavernous groaning sound comes out. Someone has clearly not thought about making you sound like a human.

You find your way off the table, to a tiny door, and out of the door, and down some steps, through a courtyard to a gate and you ease it open and you leave this grey castle behind you. You have no idea what is going on. So you just keep walking through the forest. Walking and walking and walking until it gets dark.

But then you see a candle burning in a window. You go up to the tiny door (compared to the size of you) and you put your massive ear against it. You can hear people having a conversation inside. Wow. Conversation. People communicating. Words! You listen carefully. “And then Freddie said Mummy, I’m not going to school”. You try and copy what you just heard, just to see if you can talk like they do. [Booming voice] “Mu-mmy I’m not go-ing to school”.

Suddenly the door opens and there’s a lady staring at you and she screams which scares the shit out of you. So you start running, you run and you run and you run into the pine forest into the dark.

Chapter 2: What are the building blocks?

In the story I just told you, you were the “thing”. You were the monster that Dr. Frankenstein invented, an organism made out of components.

Now let’s shift that. Let’s look at things from the point of view of being the inventor.

As inventors, we create things. Like Frankenstein’s creature, our inventions have to go out in the world and survive. Whether you’re inventing a website, or a robot, or any kind of digital object, our inventions need to survive in a wider eco-system.

Let’s take a look at one of the ways we can understand language in design.

The language and vocabularies that a group of people use can often non-verbal. In this case, the language is a fixed set of blocks:

Lego is the age-old metaphor for modular design. This could be the vocabulary and language you use if you’re playing with lego. You might have a bucket of it at home.

Similarly, if you’re an architect, you might pre-define your vocabulary and your visual language if you were setting to work on designing a building. Rem Koolhaas has a handy store of foam blocks which the team refer to when constructing buildings.

So when you’re working in your field, perhaps creating a design language or a design system, where do you store your blocks? And where do you store your guidelines around verbal language?

But where is the story stored?

To me, the word story is a bit problematic. Because story is different from tone of voice, or messaging, or page tables, or customer journeys. Story is the thing that holds everything together, both verbal and non-verbal: it is the integrated end result of every aspect of a design system.

1977

In 1977, this marvellous man called Christopher Alexander co-wrote this book “A Pattern Language: Towns — Buildings — Construction” with several of his students.

Christopher Alexander is an architect and design theorist. In this book, he defined a way to break towns and cities into their component parts. Then, by applying design principles, we can choose how to arrange and re-arrange the components into patterns.

(Incidentally, his work also had a direct influence on the structure of wikis and the technology behind Wikipedia.)

Here’s what Christopher Alexander says:

“In designing environments, people rely on certain languages, which allow them to articulate and communicate an infinite variety of designs within a formal system which gives them coherence.” – Christopher Alexander, Pattern Language, 1977.

So he has broken down the uses of public open land into a few elements or components, in just the same way as lego.

Every pattern has “A serving suggestion” to support it.

For example:

“63: Dancing in the street: Make a slightly raised platform to form a bandstand…surround the bandstand with paved surface for dancing — no admission charge.” — Christopher Alexander, Pattern Language, 1977.

And this bit, “No admission charge” is interesting, because it has nothing to do with architecture. Instead, it has everything to do with the social story that his pattern has to exist in. It considers the kind of people who will use the design, it considers the future of the band stand, what it will be for and how it will be used. It reaches far beyond the bricks and mortar of a band stand. This is closer to thinking about the over-arching purpose of the invention. The ultimate story of the bandstand.

As inventors we might call these suggestions ‘guidelines’ or ‘principles’. I like to think of them as the ‘socialisation of the pattern’.

Christopher Alexander talks about the potential of patterns to work as a network. They cross reference one another, creating a rich and poetic set of interrelationships between components and larger patterns.

“ You cannot merely build [it] in isolation, but must also repair the world around it, and within it, so that the larger world becomes more coherent, and more whole.” — Christopher Alexander, Pattern Language, 1977.

2017

Let’s fast forward to today and in zoom into our familiar digital spheres.

I really like this language that Brad Frost offers us in his book Atomic Design.

Brad Frost, the Christopher Alexander of the web.

I personally am a fan of thinking about modules, patterns and components in the context of eco-systems and organisms or growing structures.

So in the same way as we piece together lego. We can piece together the disparate parts of a system to create an organism.

But here is the question. How might story hold all these parts together?

My granddad had a clock that he loved. He loved it so much that he took it to pieces, just to see how it worked.

He put it back together again. But sadly he couldn’t quite get it to work.

When we usually look at a clock, we see Time. “Time” is the story. No-where in this entire physical construction of the thing is there ‘time’. But nevertheless, a clockmaker works in pursuit of making “time” happen. That’s the story.

The story lives in the organism, but it’s only a kind of end result of every aspect of it. The sum of the component parts.

Chapter 3: The 3.5 layers of language.

So, remember how Christopher Alexander said “You cannot build in isolation”. Here’s a small example of a broken story that I came across last week. One where the “organism” is not holding together.

(The robot animates out of the picture towards the viewer)

In this case, the advertising company did not consider the impact of layering a violent sword wielding robot over pictures from the news. That could have been any news. Insensitive. Unfortunate.

So as you can see from that illustration, the wider and more complex the story, the less control we have over it. Also, the bigger the organisation, the more silos, the more chance for a story to break into tiny pieces. How do we even begin to look after our patterns and organisms as we deliver them out into the world?

“With great patterns, come great responsibility” Andy Thornton. Said to me in the Clearleft meeting room the other week.

My job is to make sure that language and story are engineered into the fabric of the invention, and the other inventions that surround it. So I need to try and hold this story together through engineering the language. Engineering a language is not an easy thing to do (Naming things is hard).

Let’s take a quick look at the 3.5 layers of language that I’m responsible for:

1. Where humans talk to humans: In design systems in particular, it’s important to have all the humans on the project speaking the same language, sharing the same names for the objects they’re working with. Having a shared vision and an agreed mission. This might also include all the guidelines and instructions that accompany a design system.
2. Where objects talk to objects: Under the surface of every digital design, there’s a world of language that objects need to communicate with one another. This would be the world of APIs, controlled vocabularies and taxonomies.
3. Where objects talk to humans: This is the bit that I’m concerned with for the rest of this talk. It’s the language that allows websites, objects and ‘things’ to be relatable to humans. Making them sociable.

(3.5 Where humans sometimes talk back to objects: This is the part where our choice of language and building language into our design systems becomes truly important, after all we’re designing with ‘conversation’ now.)

Chapter 4: Creating identity

Let’s go back into the dark of the woods for a moment. There, between the trees is Dr. Frankenstein’s creature. The creature is an assembly of body parts, let loose in a world with minimal cultural understanding, no sense of identity and a very poor grasp of tone of voice.

So now we have another question:

How do we relate to objects?

In order to understand human-object relationships we need to take a short journey into the philosophy of ‘thingness’.

Here’s how it works:

1. When we see a thing. We assign a word and a meaning to it.

Your brain cannot see the rabbit and the duck at the same time. So, by assigning vocabulary and language to objects we give meaning to them. By assigning meaning to objects we give vocabulary and language to them.

2. We make up stories about things, and we arrange and re-arrange our understanding of things as we go (‘that’s a rabbit because I like rabbits’).

What does your relationship with a ‘thing’ look like?

Heidegger is a complex philosopher, but he talks about how our relationships with objects are invisible….that is until they break.

This is how to find out what an “object-human relationship” consists of:

1. Take your mobile phone in your hand.
2. Take a hammer.
3. Break your phone with the hammer.

What would the result be? — a broken phone, yes. You would then slowly begin to list in your mind all the relationships that you have with your phone.

1. Your sentimental relationship
2. Your sense of value (you just smashed up several hundred pounds)
3. All the functions you can’t use it for now
4. All the component parts that are usually invisible.

So this is what we need to do. As inventors, we need to break things down. We need to understand the relationships we’re inventing and give them language. Part of that relationship is a sentimental one and a social one. The sum total of its parts is the ‘story’.

Story is the ephemeral and complex idea of what the thing is. The sum total of its functioning parts.

So if you’re inventing an object and you want it to be relatable, how do you create that story?

Our relationships with objects come with a lens. We assign varying degrees of “human-ness” to any object we relate to, which also means we attribute objects with varying degrees of ‘story’. Here is the scale.

On the left, we have Sentimental objects: When we’re really young we automatically assign meaning to objects — meanings such as comfort and security. There’s this theorist called Winnicott who says the very first objects we attach meaning to are our transition into language. Some objects we relate to without any effort. Hands up who had a blankie? Hands up if it had a name.

This is the least complex example of how we imbue objects with meanings that they don’t have in and of themselves.

Next, we have Branding: We have to work harder as designers to make sure we create an identity that is relatable, to construct the culture around the thing.

After all, who thought a brown fizzy liquid could take over the world?

Branding agencies use a sophisticated concoction of attributes, personality traits and company values to help them build up a relatable brand.

This is where designing with language comes in. We construct little worlds around objects, giving them a language they don’t intrinsically have.

One step along the scale is Anthropomorphism. This takes the relatability one step further. This is when we start to assign human or animal characteristics to a thing. Think of the Mailchimp monkey, or Microsoft’s clippy. Those are the old-world versions. But now we’re looking at a much more serious foray into the world of anthropomorphic social objects: The conversational interfaces, like Alexa and Siri.

We’re starting to build a social element into the design, we’re introducing personality, behaviours and possibly also animation. This is where it starts to get reallllly important to nail your tone of voice and your language as an intrinsic part of your design system.

Human-likeness this is where things can start to get strange. The far end of this scale is called the Uncanny valley.

We’re fine with human-likeness but there’s a fine line in our brain which flips when we don’t quite know how to socialise with the being in front of us. The story flips between human/not-human and we fail to trust the being in front of us.

This is where we need to work hard to design with psychology, behavioural traits and social systems in mind. We also need to be absolutely clear on personality and purpose.

Chapter 5: Purposeful stories

100,000 years ago

I’ve been reading some of Robin Dunbar’s work on the human evolution. I found it intriguing that storytelling evolved as a night time activity.

Early communication and language was gestural, but once it gets dark, how do you communicate without visuals? That’s how story evolved.

Storytelling therefore has a couple of major functions:

1) It’s a mechanism of exchanging instrumental information, perhaps to navigate in the dark, to shout out and warn people of risks, perhaps to make plans for the next day while it’s night time.

2) It serves as a bonding agent for a tribe, perhaps to reminisce or talk about spiritual matters when you’re not hunting.

So these are two more clues for us about how to make our objects and things, our patterns and inventions relatable.

Storytelling nowadays

In theatre, films and in books, storytelling has become predominantly linear. And a linear story is a fragile breakable thing.

On the web, and in our connected multi-device world, story is not linear, except in the way that it is experienced in space over time.

What we can take away from this is that unbreakable story comes from having ‘a set of language’ that holds the tribe together.

Dunbar calls these ‘sets of language’ ethnolinguistic spheres.

I like those words because they aren’t hitched to a medium. In effect, the language of a brand, or a group of people who share the same cultural values and principles could be regarded as an ethnolinguistic sphere.

Story is more like a culture that is experienced at various touch points, than something that can be plotted on a timeline.

These days, my task is not so much to craft the story as it runs from A to B, but to make sure that the story acts like a consistent bonding agent that holds together the fabric of the disparate parts of an organism.

We need a purposeful story that serves at least one of the following functions:

1. It bonds people together in a kind of culture
2. It helps us with instrumental information
3. It allows us to relate to it, perhaps in a sentimental or curious way

Chapter 6: Principles

I realise I’ve been talking a lot about theory, and you might be asking ‘how though?’.

How do I make sure the content is right for the pattern?

I’m going to show you a brief example of how the storytelling affected the design. It’s very simple, it’s not rocket science, but I think it illustrates the point.

I worked for a charity who are well known for being an authority in news about young people’s human rights, from eradicating child marriage, to child labour, to giving refugees a right to education.

In the discovery phase I wanted to make sure we didn’t forget to bring out the authentic ‘on-the-ground’ stories, as told by people whose lives were closely affected by the work that the charity was doing.

So here is one of the storytelling principles I created, really early on in the process.

“What’s the personal story? Encourage authentic voices and real stories in pictures and words.”

And it was important that I did this early in the process, because story dictated the shape that some of those patterns took.

We created a section of the site known as ‘Voices’, which meant that the stories didn’t get hidden in the daily news channel. This was a dedicated area that allowed these stories to shine.

As a designer, if you know that one of the content principles is to bring out authentic voices, that might give you a clue that you might need to put some extra work into designing a pattern like this, or even putting a bit of work into how the quotation mark sits over the image. It can make all the difference to a brand story.

To keep this story alive, we also created strong guidelines.

“These components should include first person quotes from within the story as headlines up to 30 characters. They should be accompanied by inspiring imagery of individuals or groups who work directly with Theirworld. They need a name and a specific role associated with them.”

As you’ll remember from Christopher Alexander’s “No admission charge” — These guidelines help to attach the story to the pattern. Otherwise this pattern would just be any image, any bit of headline, and a name.

To build a story into a ‘thing’ is to carve out its function, making it as specific as you need it to be to the story.

Chapter 7: The Organism Kit

If you are working on an invention at the moment, this kit of questions* can act as a springboard to help you think about how your patterns might be socialised out in the world.

Answering these questions will help your organism be accompanied by a sense of culture.

They might also give rise to the kinds of guidelines you want to issue with your invention to help it thrive as it goes out into the world.

1. How does it change over time?

2. How does it relate to the wider environment?

3. What is its story?

4. Who is going to be responsible (in future)?

5. How does it behave?

*There is an expanded version of this kit, with a set of further trigger questions for each category. I will make it available in the next couple of days.

The final chapter

In the story of Mary Shelley’s Frankenstein the creature eventually begins to learn about language and culture from the villagers by spying on them. He listens in to the way they teach an Arabic girl to understand their culture.

He gradually begins to understand identity, but one of his big disappointments is that he has no intrinsic connection to anything. The creature says:

“ I heard of…all the various relationships which bind one human being to another in mutual bonds. But where were my friends and relations? …all my past life was a blot. I had never yet seen a being resembling me. What was I? The question again recurred, to be answered only with groans.” Mary Shelley, Frankenstein.

Most of us are curious about the way we design interrelationships between humans and technologies. We design things that come alive.

So here is your next design challenge;

We know a lot about how to invent for utility. We know a lot about how to invent for usability.

Now it’s time to design the wider culture, the language that brings humans together with humans, objects together with objects, and objects together with humans, so that we can all be together in our shared eco-system, and live happily ever after.

Thank you.