Responsive Design Ecosystems

The proliferation of flexible design systems is correlated to the lifecycle of the present device ecosystem. Adaptive UI approaches have the most potential when the landscape is nascent.

We can attempt to break up this lifecycle into three phases:

1. Advent

During the introduction of new devices and input – where there is ambiguity of the medium’s boundaries and rules – people and teams often respond with flexible systems to cope with the multitude of contexts. There are no established rules or winners, just many device capabilities and expectations.

This is when a technology becomes a new consumer product. The explosion of a wide range of mobile devices and introduction of competing VR headsets are the two most recent events on the hardware level.

2. Experimentation

From there, adopters begin to pick up the new medium and experiment with it, often making breakthroughs and identifying locally useful patterns. Corporations may start to find business value, and often have to make tradeoffs:

When there is a chance to choose between discrete or continuous design systems (1) (will use this term very loosely), there are two factors in tension here:

Simplicity

Organizations are incentivized to keep things discrete out of simplicity.

Scalability

Organizations are incentivized to apply continuous adaptive design systems as an economic measure to cover as many cases as possible.

Poorly balancing these comes at the expense of people. Overly discrete designs can exclude whole contingents of people and large system solutions can water down a product experience to a point where there is no clear hierarchy or flow.

3. Condensation

Eventually after enough experimentation the ecosystem stabilizes enough for companies to place bets and invest in established platforms, form factors and patterns.

Teams may decide they will spend extra time optimizing for mobile or desktop compared to tablet because it makes up a smaller market segment. Companies may even push people towards specific platforms which have more robust monetization and retention as evidenced by mobile web “View In App” banners.

At a higher level, this convergence is driven by dominant platforms. iOS/Android or Windows/OSX establish sets of patterns and expectations. The OS defines standards for the marketplace, data/device access and interaction vocabulary for app products. The same is true to a lesser extent with browser vendors and web apps (2).

Some standout products are able to span many platforms well, but tend to be outliers (3).

Currently

AR/VR seem to be at the early stage of this lifecycle with a range of available modalities (different controllers and tracking) to interact with objects and UI over a spectrum of distances.

Footnotes

1. Compare the old .mobi for websites specifically designed for mobile devices to media queries (and later viewport units) allowing the site to scale across viewport sizes. Responsive design (coined in 2010 by Ethan Marcotte) allowed websites to scale economically across many of the possible devices and contexts they could exist in. Because of the wide range of devices, designers sought to build flexible systems that spanned device capabilities and viewports.

2. An example of browser vendor/OS defining boundaries for the app is Safari’s native edge swipe to navigate web page history.

3. Some more information based products (bookmarking, search, browser extensions, file sharing, .etc) may be inherently successful with a cross platform, light interaction approach.