People use the same tools to do the same things all the time. The tools evolve. They become convivial. These tools and ways of doing things online are standard ways of interacting which are ‘patterns’ that can be used to efficiently mass produce a coherent look and feel.
The patterns the BBC uses are collectively the Global Experience Language (GEL). The BBC wanted to increase the expressive range of GEL, while at the same time increasing efficiency, sharing and re-use. How could we meet these seemingly contradictory requirements?
We developed the concept of a flexible pattern library, building a working prototype, and helped build support for it in the BBC. A fully functioning pattern library based on this work is now in beta.
Our first step was to complete an extensive audit to identify the number and types of pattern that are used to make up the majority of BBC sites
We sampled 10 sites:
News. Sport. iPlayer. CBBC. CBeebies. Radio. iWonder. Bitesize. Earth. Slash-Programmes.
47 pages in total.
And identified the following patterns:
The ORB. Navigation. Promo groups. Promos. Drawers. Tabsets. Tables. Carousels. Search tools. Real-time modules. Social & Contribution. Media players. Pop-overs. Modal overlays. User preferences.
15 patterns in total.
From the audit, we were able to identify certain ‘patterns’.
The next step was to break each pattern down, and think about the possible variations for each part of the pattern...
Images use can use different aspect ratios, could zoom on hover or rotate through a few key frames
Info panels could be rectangular, chamfered or use rounded edges
Simple changes create very different experiences
People use the same tools to do the same things all the time. The tools evolve. They become convivial. These tools and ways of doing things online are standard ways of interacting which are ‘patterns’ that can be used to mass produce and semi-automate websites. They are used to solve common problems and are collected together in a pattern library so people throughout an organisation can all use and contribute to them.
All 15 patterns are all accessed from an index page.
Each pattern is described in detail with comprehensive guides and rules to explain when and where to use them.
The platonic pattern can be accessed via GitHub and html Code can be snipped via the library.
Editable parts are described…
...and working examples are displayed (inc. links to GitHub where they can be pulled)
The long-term goal of the GEL pattern library is to provide tested, shared code that is re-usable and easily maintainable to supply ready-made solutions which are demonstrably accessible.
Our ‘What is GEL?’ film takes a humorous approach to explaining the overall concept - expressive variations based on standard patterns.
