White Paper: Creating a consistent UX design language is your path to absolute failure. It must instead be coherent.
People involved in the design process can be defined by three degrees of perspective, the executive as the business strategic, the director as the concept theoretic and the developer as the design practitioner. This structure can be a simile to how some of the most accomplished builders gain progress and results, the bee hive.
Within the hive, the queen instructs the warriors, who manage the workers, who performs the practice. Each communicating on different levels and with a different perspective and understanding. To understand the language, you must understand how each degree of perspective will relate to the language.
The queen is interested in accents, which is the principles for scoping her warriors. With an accent you define a direction and with multiple accents, you can define multiple directions.
The warriors are interested in structure, which is the process for instructing their workers. Each structure is created in relation to the accent and when the accent evolve, so will the structure, as it must adjust to the changes or collapse.
The workers are interested the dictionary, which is the best practice approach, for archiving the principles. The dictionary is build on the warriors structure and each learning is added to the dictionary, as it contains the company design knowledge as principles.
A principle rule must be based on the initial learnings of a challenge and the executed validation of an achievement. While the challenge will explore the feasibility of a principle, the achievement will validate the foundation and truth of the principle. As most principles are based on goals and wishes, they rarely holds any merits and practical sustainability. I have been in countless meetings with the phrase, “write that down as a principle”, uttered in the hope to implement a theoretical rule, forcing an unsubstantial principle into the product, skipping the logic where it feels convenient. Instead of saying, “write that down as a challenge or as an achievement”, we now have to struggle with a theoretical rule that might not hold any merit towards the user-centric design, thus falling into the category of ego-centric design.
Principle rules must be implemented because they make sense and has passed the test of time and purpose. They will make sure we keep our focus and follow a minimum standard, aligning our efforts and product viability.
As an example, a principle rule that states, “all headlines must be in capital letters”, must be able to answer the challenge of why, and the achievement of how. If I can’t answer why all headlines should be in capital letters, then I fail the first test towards creating my principle rule. Secondly, if I can’t tell how to create all headlines in capital letters, then I fail the second test.
Create a principle by proofing it against why and how.
A Queens Accent
When creating a product line, each design has a purpose and thus a persona, a receiver. The persona has an accent, a preferred understanding within the language, a way to communicate back and forth, the purpose, between design and persona.
Design is not tailored to one person, its created for a group, and it’s the generalization of this group that becomes your target audience. Merging your audience into one person, creates a simplified face for your design and a benchmark for your progress. The size of your audience will be in proportions to the amount of work you need to put into your design.
Working with a large audience group, will create more attention to your details and your process. There will be many different user reactions that your design should be able to absorb. A large group will be more demanding, less tolerant and more critical, putting stress on your design. It’s in such a group that your true skills as a designer will be highly visible.
When you merge a large group, your design will have to speak to allot of different people making your entire process more complex, creating exes attention to every step. You need to further polish and evaluate your strategies, studies and research, taking every aspect of your group into account.
Just like an engine, communicating through your design is about action and reaction. The more fuel you put into your engine, the more reaction you get and vice versa – the more reaction you want, the more fuel you’ll need. Using this analogy, you can measure the amount of work you need to put into your design puzzle, with the amount of users you want to captivate with each piece of your design. The ability to put all the pieces together in the right order, will create a stunning image of communication.
Your target group is synthesized into one personality, the persona, as your exploration dictates, who becomes the tone of your accent. Your persona is the reincarnation and embodiment of market feedback and opportunities, which you must achieve as a designer.
Traditional persona theory states that you define an archetype, a static face, but a modern strategy must move with the extreme forces of quickly shifting markets and trends. As the market shifts, so will the persona, as it’s grounded in the insight of your business studies. Creating a persona, a relatable personality, will also serve to ignite the emotional synergy between designer, product and user, as the designer will bond with the persona, the persona must be bonded with product.
Your principles will be the validator and business goals, the metric you judge your thoughts against. By aligning your ideas, following simple phrases, you will stay true to your purpose, the goal and create a strong coherent product line.
A designer must have a set of accents applied with both personas and principals. Each accent is based on the premise of a goal, the principal, and a target, the persona experiencing the goal.
The accent will be a container of the static and reliable principles, tested over time by the dynamic and unpredictable persona. This creates two poles of detraction, a magnetic balanced design language, hold together by the customers attraction. When you apply an accent to your designs, you apply a guideline, a set rules that will hold you on the right track. The accent will become your measurement, your validation and acceptance.
A Warriors Grammar
The language structure defines the grammar of your language elements and the process for archiving results, implementing routines and methods. A design language is constructed by signs, connected by a code to their meaning.
By creating a language on signs, code and meaning, you create a grammar for you designs that will be more flexible and adaptable then any static design guide. When words are expressed and related to other words, they form sentences and understanding. In a design language, a word is a sign, the expression is the code that pronounce the sign and the relation binds the sign to a sentence, creating meaning. Defining the three aspects of your language, will define your accent as a principle and scientific design guide.
Signs, is the words in your language, defined by buttons, knobs, gestures, light, sound, display, iconography, typography and symbolisms in your language accent. Each, is a way to communicate with the user, as the user will relate to the product through these elements of interaction. By understanding and defining the purpose of each sign, you can build your accent as a coherent instrument, recreating a fine-tuned communication from product to product, and area to area.
Code, is the expressions and mannerisms in your language, defined by opacity, color, weight, texture and style. Each code will add or subtract the subtlety, as the code will slightly alter the pronunciation of a sign.
Meaning, is the relationship in your language, the science between padding and margin. Calculating the distance between signs, defines the relationship between parent, child and sibling signs, establishing the ability to understand your language through structure and relation. When you add signs together in this structure, you start to form intuitive sentences.
This can be translated into a family dynasty, where padding defines how closely parents and children are to each other and how close the parent is to its siblings. The closer the bond, the closer they represent and communicate the same perspective. As margin and padding is increased or decreased, so is the relationship between objects and the bond they share.
Margin is the distance to a sibling and when it’s increased, the more unrelated they become. When the distance becomes greater then the elements own dimension, the relationship starts to break and the separation becomes eminent. As margin decreases, the relationship is enhanced and a synergy start to form on shared values and meaning. As the expected synergy becomes greater, the expected similarity of the siblings will follow.
Padding is the distance to a child and when it’s increased, the parent decreases the value of its children and each child become more distant to its inheritance, putting the parent before the child. When the child take over the entire padding, decreasing the distance, the child become the focus and the parent falls into the background, clouding the values and bond they share. The child can never escape its inheritance, but can enhance its parent as an additive or create abstract attention as a subtractive. A child that becomes abstract, balance a careful line between artistic or awkward.
Knowing the family, the story each sign tells and the heritage of the family tree, will help you understand your interactions. As you define your accent by defining meanings, codes and signs, you will gain a language grammar for coherent product designs, in each accent you use.
Even though your design language is a creation of yours, it will still be based on the heritage of other design languages. English, a language that is derived from latin, is constantly incorporating signs, codes and meanings from other languages, such as french and dutch. This is a natural evolution, where speech is evolving between borders. Like a spoken language, your design language will also evolve and each sign, code and meaning will be compared to the world of languages, from which the initial learning will start for your customers.
When a customer starts to learn your language, they borrow the meaning from the languages they already know. If you incorporate signs, codes and meaning, closely related to what they know, but slightly altered in either sign, code or meaning, the learning curve will be low. When you introduce new and unknown elements to any language, you must use your design language structure to give them a learning path.
A designers language will define a balance between the principle theory that must be challenged and the dynamic quickly shifting persona theory, that must be restrained. Adding the two theories to a language as a guide, specialized through an accent, will create an evolving design process, replacing the deprecated and static design manuals in a modern world.
A Workers Dictionary
A common mistake in design strategies and manuals, is the consistency across all efforts, as this is meant to keep a tone of voice over time. All design areas must be adaptable to the situation, time, location and media, so must the design language, implemented as a coherent tone-of-voice instead of a consistent. Coherent design is about keeping the essence, within an adaptable language, thus must the language be about the interpretation, defining the constructs of why, not how, to communicate your product.
Many companies spend months, years and decades refining, updating and reimplementing their design manuals in a hopeless race against why and how. The manual serve as a reminder for the principles and goals the company had, at the time the strategy was created. But at the time the manual is done, the company principles and goals are now different, thus fighting to be consistent and relevant in a market on the move.
When you know how to speak a language, you can only replicate it, just like children do with their native language, i.e. “monkey see, monkey do”. This is how design manuals work, as design elements like headlines, columns, fonts and colors are carefully defining how to replicate them in minute details. Each element of design is shown as a recipe. The problem arise when your recipe doesn’t account for the new or different situations, that your design must adapt to. Like a headline defining the specific size and margins in pixels, which might not translate to other medias, packaging, cultures or countries.
When you know why you speak a language, you can teach it, express it and adapt it, without loosing its meaning. If you understand why a headline should have a certain size and margin, without defining the specifics, you can adapt those principles to your current situation, without breaking the design language.
The design dictionary is a modern day design guide with a more agile and dynamic implementation, as we set the rules of our language elements and create examples for best practice as principles, creating routines and setting standards. But these rules are not defined in specifics, they are the results of the language structure that controls each element.
A design manual is a consistent design strategy, where a design language is a coherent design strategy, based on an accent, a structure and a dictionary.
This article is from the book, Product Design Dilemmas. A modern design ideology for customer driven designers and managers.