— Yesenia Perez-Cruz, Vox Media / Source (YouTube)

— Yesenia Perez-Cruz, Vox Media / Source (YouTube)

Patterns are (like Principles and Context ) one of the invisible building blocks that hold a design system together and make it valuable. Patterns are precomposed combinations of components, content, interactions, sections or zones. Patterns help your design system users to combine components in the right way.

Interaction flows

An interaction flow describes in which direction the user uses a component composition. It is made up of a header, a body and a footer. For example this login screen will be used from the top to the bottom:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a663af1e-2d9a-41e2-9795-b780cf13e232/interaction_flows_01.png

There are of course a variety of interaction flows imaginable. You can create a set of different interaction flows which should be used in your design system. A small set of interaction flows offer conformity with user expectations. Because the user always knows where to expect e.g. the confirm button.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3a0f8463-d55a-4bb0-ad48-e740ea488981/interaction_flows_02.png

Interaction flows help you to think in an abstract way because you don’t start with combining components but thinking in an interaction based way.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/adfa52e7-a902-411d-add9-2db07d6df151/patterns_05.png

— Anna Stumpf, SinnerSchrader

Patterns don’t need components

At GOV.UK patterns often have components, but they don’t need components to exist.

Think in scenarios

By writing the documentation in terms of scenarios, a UX designer is automatically already thinking in terms of scenarios.