How UI innovation happens and why we should be humble about it

As designers we dream of innovating in our work, we salivate over the creations of others, we excitedly install the latest OS releases to play with the new, the sleek, the transformative. But what is it? What are we looking at, what are we looking for when we talk about innovation in user experience in general and UI in particular?

In this post we’re going to look at what goes into UI innovation, what drives it, and how that lends context to our efforts to judge and invest in innovation.

Why try to innovate in UI?

In an age of mature design languages and re-usable component libraries we are often pressed to innovate less, to reuse what is already tried and tested; for increased speed to market, for the sake of usability. So, if you have an itch to innovate, you need to be able to answer the question: Why innovate?

To this I offer the notion that fundamentally we innovate, not for the sake of it, but to realise important and concrete benefits in three key areas; three key drivers of innovation.

• Function — to unlock capabilities.
  A nice example here is the humble hyperlink allied to the all powerful ‘browser back button’. These simple UI innovations are what we use very day to traverse the web. Before hypertext systems and ultimately the web, they didn’t exist — and weren’t needed. Another example might be the much maligned hamburger menu. It came to prominence in service of a new functional need — driven by the advent of mobile devices, designers had to find a very space efficient way to offer users access to navigation.
• Usability — to increase learnability and effectiveness
  Many of the more obvious examples here, such as the invention of the WIMP GUI interface, or the Direct Manipulation paradigm, stretch way back in computing history. These innovations not only made existing functionality much more accessible to a wide user base, but dramatically increased the efficiency and effectiveness of those capabilities.
• Aesthetics — to improve fit to brand and culture
  The emotional and aesthetic experience of a UI is perhaps where the innovation is most frenetic and consistent, but also most ephemeral. We innovate to differentiate, to offer delight in the new, to adapt to changing cultures, tastes and abilities.

As we look back at the history of UI innovation, and its evolution, you can see these factors driving innovation in different combinations, and to different degrees. Let’s take a closer look.

The dynamics of UI innovation

I think we can usefully think about the history of UI innovation using a concept from evolutionary theory; namely, punctuated equilibrium.

Punctuated equilibrium is the idea that most of the time life evolves in a gradual, lazy, kind of way; stuff slowly gets better, but not radically better. These periods of slow change are what’s called stasis.

Then every once in a very long while something game changing happens (e.g. the climate changes) and the rate of change explodes, new species pop up all over the place, and life makes real progress up the evolutionary ladder. These are the relatively short periods of punctuated change.

I think we can think of this history of UI innovation along similar lines. Here’s what it might look like:

Every once in a decade or two an enabling piece of UI tech comes along and allows us designers to change, well, everything.

First there were punch cards and rooms sized mainframes, then came the green screens 😱, so people invented command structures to power the command line, then with the bitmapped display folks at the fabled Xerox PARC invented the WIMP GUI (Windows, Icons, Menus and Pointer) 🤩, and so on, into our current web infused, mobile obsessed era.

As a new enabling piece of technology comes along, designers and engineers kick off a wave of invention and experimentation, which powers an acceleration in the rate of innovation. Not too different to what evolutionary theorists call punctuated change.

Within a few years, winning conventions start to emerge, the pace of innovation slows, and we enter into the equivalent of stasis. Stuff improves, UI design progresses, but (relatively) slowly and less directionally.

Like it or not most of us live and work in stasis, and watch from afar in those rare but thrilling moments of punctuated change.

But in either case, what actually drives innovation? I think the drivers vary quite dramatically across the cycle, and that this tells us something interesting about design, and about about what lasting innovation looks like.

So in the diagram above — which like all diagrams is an oversimplification — you can see how I think the contribution of the three drivers changes over the cycle.

Punctuated change — times of radical UI innovation

Typically, punctuated change occurs when a new disruptive technology (e.g. capacitive touch screens) comes along. New UI needs to be developed to take advantage of these innovations. The UI unlocks the new capability, often offering big leaps in usability, which enables much wider adoption. In the case of capacitive touch screens, they enabled new capabilities for smartphones (e.g. drawing apps etc.) and more importantly made capability that had been possible (email, web browsing, games etc.) much more usable, compelling, and thus commercially viable. So what were the big drivers of innovation in the mobile era? Well, as is usual for a period of punctuated change, they are function and usability

Occasionally, aesthetics also get to drive their own mini period of punctuated change. A notable example was the result of Microsoft’s struggle to remain relevant and differentiate themselves in the late 2000’s. The result was the Metro design language, which kicked off the Flat Design movement, that has since swept up Apple, Google and most of the web. Flat design took root, I believe, because the more skeuomorphic aesthetic that preceded it used quite a bit of visual bandwith to make UI affordances obvious to folks that were new the web and to smartphones, the enabling technologies of the previous eras. As people began to live and breath on the web, and through their phones, adoption was no longer key, the visual bandwidth used to create ‘lickable’ looking UI, could be repurposed to make way for visuals that load faster, look sharper and respond better across devices, as well as to make room for more content.

Stasis — business as usual

When things bed down into a period of stasis, the dynamics driving innovation, and thus the type of innovation we see, gradually change. Designers and entrepreneurs are still, of course, trying to solve new types of problems, but now they can leverage UI patterns that have been introduced in the period of punctuated change, refining them to incrementally improve usability. The innovation here is focused on maturing the brilliant raw innovations that sprang from the earlier rapid innovation.

We eventually get to a point where the UI conventions are mature, usable and do broadly what we need them to do; but, well… it starts to get boring. That’s when innovation starts to get driven more strongly by purely aesthetic concerns. Brands want compelling, differentiated digital experiences, and push their teams to come up with something fresh. Think parallax scrolling, the Flash fad of the late nineties, lush game UIs, full bleed in-UI video, sweet UI motion graphics.

This kind of aesthetic innovation, important though it is, often falls victim to passing fashions. This year’s new hotness is last years ‘skip (Flash) intro’.

There is of course the opportunity for us designers working in periods of stasis to produce lasting UI innovation without having to wait for enabling new technologies. Perhaps the best way to do this is what I like to call “humble innovation”.

Humble innovation — lasting contributions in a period of stasis

I’ll admit I’m often drawn to compelling, showy, beautifully visual new pieces of UI. But having worked on my fair share, I’ve found that — since they are often super-niche or largely aesthetically driven — they are here today and gone tomorrow.

So while producing this kind of work is challenging, and rewarding, I’ll wager that the legacy every designer would ultimately want, is to create something that lives on beyond that one project and eventually gets broadly adopted into the digital toolkit.

Creating this kind of work, especially in periods of stasis, is hard. But it’s possible, and I’d argue that it’s the more prosaic, more focused and less obviously unique pieces of UI that live on in this way. This is what I mean by humble innovation. It’s innovation driven largely by a mix of function and usability and focused on solving a relatively common problem.

I’d like to briefly talk about an example of this sort of humble UI innovation from the sort of work we focused on when I was leading the team at RMA Consulting, a design agency focused on delivering consumer grade enterprise experience. We called it the ‘Taboggle’.

The Taboggle is new type of basic form component for handling complex forms with lots of dynamic contingent behaviour. We kept running into situations where an input at one point in the form meant a bunch of changes elsewhere in the form. So we needed a new piece of UI that allowed the user to both make a choice (e.g. a toggle) and to unveil new content (i.e. a tab).

After much iteration and refinement we came to a final design for our Taboggle.

We found ourselves using it all over the place. It’s not a particularly flashy, “look at me, I’m new” piece of UI. In fact it is one of those workmanly pieces of design that you very quickly stop noticing — it does its job, a job that needs doing, a lot, and it does it well, without fuss. And I believe that is often the making of a lasting piece of UI innovation; humble innovation.