Designing Interface Patterns

Our creative processes are aligning with agility required to address demand for experiencing designs in various contexts. For instance, after crossing the responsive design Rubicon we realized it’s not viable to create throwaway deliverable artifacts (wireframes, mockups etc.) for each viewport break-point. Instead we started prototyping and evolving our concepts to final solution by designing in browser.

To make the process of designing interfaces more effective and sustainable a lot of us have also adopted pattern library frameworks such as Bootstrap or Foundation as go-to resources for quickly rendering common interface elements and layout sets. By defining individual elements of interfaces or interactions as well as by incorporating adaptation to contexts in which said elements will be featured we constitute pattern libraries.

Here I aim to demonstrate how creation of such patterns provides a more flexible solution structure than designing contrived interfaces as well as to highlight benefits as they reflect on creative processes. Ultimately this argument will justify project based creation of pattern libraries as the main design process lending itself to secondary ones like designing interfaces through combining already established elements.

Defining Interface Patterns

Elements shared between multiple interactions and contexts within the experience constitute the patterns. Common examples are template layout structures and global features such as mastheads and footers.

When conceptualizing a solution it is our goal to reuse and recycle elements both for purposes of output consistency as well as their flexibility. To do so we must appraise viability a certain pattern caries. Method I utilize is an analysis of correlation between elements and templates they are featured in.

Elements Audit

In same way we may define necessary page templates to be prototyped we can go a step further and break templates into elements to appraise them against contexts in which they need to be presented:

interface element pattern template mapping

Click image for sample spreadsheet

By examining attributes and requirements of a particular element in different contexts…

inline conversion pattern

Inline conversion element featured on a search results page and store locator page

… we can plot out how the element will adapt and structure that behavior accordingly:

interface pattern wireframe

Repeating the process for all elements audited results in a library of adaptable elements which may be recycled as needed in all contexts.

Life cycle considerations

Assuring success of any pattern benefits enormously from familiarity with the cycle of the solution and processes through which it exists. A solution which is rigorously validated and features contributions from multiple sources requires a mapped out approach. To ensure success,  it is necessary to involve users (developers, designers etc.) when establishing expectations as the library is being created for them.

Implementing and scaling

In environments which don’t already utilize interface patterns (ad-hoc designed interfaces) the resilience to implementation will present itself both in form of structure and potential impact.

If your goal is a restructure (redesign) of an entire solution that is a great place to identify and justify opportunities for patterns. However, if your impact is limited to only a part of a given solution the existing structure poses a risk from the required changes in processes it utilizes and it may not be viable to propose a restructuring of said processes. Nothing is stopping you from creating and utilizing personal patterns; performance of those can be your justification for further implementation.

Extra kudos are accredited for modularity of the structure (e.g. flexibility and embeddability) and sustainability of the design process through agility (accessible pattern documentation) in reuse.

Planning the approach, setting the expectations, auditing content etc. do mean extra time and effort spent upfront before a single pixel is created but I hope this post nudges you towards considering and justifying the long term value of creating interface patterns.