← Back

The challenge/issue

You don’t always have clear insight into all the use cases a component or pattern should cover when creating one. This can lead to needing to add to components after a few months or worse, triggering a breaking change in the API with an update - that is expensive and time consuming for teams using the first version.

Why might we not know the requirements?

• Product and feature direction is often short-term, looking at a single quarter (3 months). Flexibility for additional use cases is not prioritised.
• One use case often triggers a component need, and little consideration is given to how it might be useful for others. Extra props, content and features aren’t considered in lieu of a project deadline or “mvp”
• Evolving technology - use edge and arc panels with your product UI loading into panels next to other sites in smaller viewports than you’d typically expect on a desktop or tablet screen or the proliferation of Chromebooks with “tablet” sized viewports but a mouse-based interaction
• covers responsiveness across viewport sizes, devices and the browser zoom
• Businesses choosing to location, translate or move into a new country
• Multiple languages, where copy lengths vary

Tip: Apply the ‘Rule of 3’

Design with the rule of 3

list the concept

The concept is based on tripling elements of the component design so that the component is designed with the future ability to use translated copy, usable on more viewport sizes and flexible as another MVP feature is added to a page.

There are 3 rules:

1. Three times, the copy
2. Three times the functions
3. Three times the content

//Do I need to connect back to issues?

These ensure most components where flex to be flexible to cover:

• responsiveness across viewport sizes, devices and browser zoom
• Multiple languages, where copy lengths vary
• flexibility for additional use cases, supporting more functions and controls over time

???

This causes issues with copy translations and page layouts that do not react to browser zooms, accessibility base font settings or the growing trend for browsers to contain websites into small panels.

ensure most components could be flexible to cover:

Three times, the cop€y

Tripplile all the copy

The steps:

1. Count the copies characters (include spaces)
2. Convert the copy to Latin capital W’s per character
3. Triple the number of W’s
4. Add two more W’s
5. Alter the design to manage the extra copy width or wrapping

Rationale: Tripple the copy

You don't always have translated copy when designing, and not all designers know more than one language. Tripling the copy is a method that helps uncover wrapping issues you can't see when the copy is in your native language.

You can never predict every use case a component can be used for. It is cheaper in the long run for a component to be designed for a longer copy - you'll avoid breaking changes and help defend library cohesiveness by reducing snowflakes being created.

Capital W's in Latin are the widest character. Tripling them ensures your design can handle other languages whose words are longer and future use cases where the copy is increased. Add two W's is extra insurance to reinforce the method.

Example: Three times, the copy

This example will show a basic card design applying rule 1 step by step:

The basic card design includes a heading with icon, short summary text and a link with an icon

Step 1: Count the characters

Step 2: Convert the copy to Latin capital W’s.

This design is holding up

Step 3: Triple the number of W’s

Heading wrapping has the icon centering

We can now also see the link icon loose proximity association with the link as it wraps, and the icon centers

Step 4: Add two W’s

Step 5: Alter the design to manage the extra copy width or wrapping

Icon alignment fixes

Rationale

1. used in my frist systema nd there afer successfuly increase the time span of a compnent, reducing re-work, refactoring and breaking changes
1. In my first design system team, we introduced the ‘Rule of 3’ to increase how robust our components would be so that teams using them wouldn’t have to slow down consuming release updates and have components that could be flexible enough for new use cases they encounter
2. //Other reasons
1. You don't always have translated copy when designing, and not all designers know more than one language. Tripling the copy is a method that helps uncover wrapping issues you can't see when the copy is in your native language.
2. You can never predict every use case a component can be used for. It is cheaper in the long run for a component to be designed for a longer copy - you'll avoid breaking changes and help defend library cohesiveness by reducing snowflakes being created.
3. Capital W's in Latin are the widest character. Tripling them ensures your design can handle other languages whose words are longer and future use cases where the copy is increased. Add two W's is extra insurance to reinforce the method.
4. It seems from my experiences that many organisations design with a limited objective for a feature or product. Typically, only considering one language, usually English and fixating on one viewport or screen size.

Typically an organisation Design System team has to balance a focus on rapid delivery quickly over robustly designed components that carry flexibility

Using the rule of 3 ensures components start with a scalable foundation and are flexible enough to cover more use cases in the future. A component designed with the rule of 3 will support:

• responsiveness across viewport sizes, devices and browser zoom
• Multiple languages, where copy lengths vary
• flexibility for additional use cases, supporting more functions and controls over time

Leading text:

quote block for leading text

section break: