A History of Patterns in User Experience Design

As part of my classes that I teach at CCA, interaction design patterns come up. Sometimes in their simple form of elements as captured in a style guide and sometimes in the context of the complete design and development toolkit like we are seeing today. I try to give my students a bit of history about this so that they understand that there was a time when these things didn’t exist, a time when we were all making it up as we went along, every time we designed a screen. Every time. And developers were doing the same, until usable and adopted code component libraries came along.

A History of Patterns in User Experience Design timeline — Updated 04/01/2017

As part of my overview, I made this timeline trying to capture some key points:

and at that point the die was cast and the number of books and websites collecting, curating, and debating patterns exploded and evolved into what we see today; a well defined library organized from it’s basic elements to components to templates with designs and code all bundled together.

We talked about this concept back in 2004, 2005, 2006 when we released the public library, but as a large enterprise with fractured responsibilities we weren’t able to pull it off.

In today’s world we have a precedent set by Google’s Material Design as they tried to wrangle some sense into their suite of offerings across a myriad of devices, the excellent teachings and materials from Nathan Curtis, of EightShapes, who breaks it down in easy-to-implement strategies for teams, the great insight from Brad Frost and his Atomic Design methodology and internal teams who have the support of their large organizations working top down and bottom up to create and publicize their toolkits, some which use Frost’s approach and others that build up from the ubiquitous code kit, bootstrap. 

The companies today who share their libraries have a vested interest in the cohesive user experience of their ecosystem, of which many parts and plug-ins and add-ons are built by third parties. The investment in a cohesive and seamless user experience with consistent user interface patterns of interaction from part-to-part or within related systems is critical to their success and making sure this is extended out to their partners and developer helps wrangle what previously had been a mess for the end users to wade through.

I recently read an article on Medium about the evolution of design toolkits. The author, Christian Beck, does a great job showcasing several current examples and pointing out that the Material Design kit was the first instance of a mature system, and he references Atomic Design and gives great tips for teams currently wrangling with developing, designing and/or maintaining a toolkit.

In the middle of the piece though, he has a section about the history of patterns. He references Alexander, then Tidwell and then he makes a leap to Frost. Skipping 10 years of fits and starts and breakthroughs and blood, sweat and tears of what in hindsight might be called change management for how we approach and document front end design within the digital industry.

During those missing 10 years (see above) we toiled and wrote and shared and evangelized and refactored and gave workshops and lectures and were told the idea of toolkits for designers was not relevant and boring and only developers did that or geeked out interaction designers. We worked to prove the ROI of these efforts and efficiencies to ramp-up time and build time and eventually we saw an evolution in the mind-sets of our colleagues and our bosses. But without this work, no one today would be so easily accepting of the need for a robust style guide that contains interactions and code. 

Today we wonder how you could work (particularly in the enterprise with hundreds of scattered designers) without one.


current: partner, tangible user experience :: a full-service user experience design consulting firm. former Yahoo! founder of the public and internal Yahoo! pattern library. dse. design director of ued teams responsible for designing solutions across key yahoo! platforms: social media, personalization, membership and vertical search.