Myplanet’s AI UI Pattern Library
We created a UI pattern library for designers to help establish best practice behaviours in AI implementations.
Written by: Mattie Alston, Leigh Bryant
At this point it’s safe to say that AI isn’t going anywhere. The advantages — improved insights, advanced creative solutions, and an efficiency beyond human capacities — are too many and too powerful to be overlooked. But the agentive and autonomous actions that come with AI represent a real paradigm shift that we’re still processing and understanding on a daily basis.
While we’re making our products more insightful and more helpful, giving them a memory and the capacity to learn, our users are grappling with new capabilities and new expectations around those capabilities. They’re struggling to understand this AI-powered reality: What’s AI capable of now? What can I reasonably expect of it down the line? And why doesn’t my experience feel the way I think it should?
We need to help users understand the edges of the applications. But with AI, the parameters are different than we’re used to. Our old patterns and understandings need to evolve alongside the technology if we’re to provide the experiences our users want and need. What do we as designers need to consider when creating the UI layer for an AI-powered application? Is it simply a case of more of the same?
Yes. And no.
Yes, because there’s no point reinventing the wheel. Designers have a long history of best practice, of developing intuitive and comprehensive UI patterns that we know will test well and will be well received by users. In many cases, these best practices still hold, even with the inclusion of AI.
But also no, because there really is a fundamental difference in how this software works, in how it behaves in new and often opaque ways. Unlike traditional applications, these apps have the potential to change their behaviour over time, often acting independently from direct user input, and this can change how the user conceptualizes that behaviour, too (or struggles to do so).
With that in mind, this article is an introduction to something we felt was lacking in the design toolkit: an AI UI Pattern Library, or what we’ve dubbed the Smarter Pattern Library. Its aim is to help designers address the sweeping changes we’re facing as an industry by thinking through capabilities, understandings, and established norms to create a set of best practices from which designers can work to create experiences that deliver on the promise of delight without disenfranchising the users.
Before we get to the library itself, though, we think it’s important to talk about why it’s necessary.
Trust, Understanding, and the Black Box of AI
As seasoned designers, we know the best way to help our users is through thoughtful, well-designed interactions and interfaces, so our primary objective in building an AI UI Pattern Library is to increase the trust in and understanding around AI.
Software has traditionally been a tool, something we handle, control, and comprehend. It’s something we put to use because it enhances our own innate ability to achieve a task. But that’s the old world, the so-called ‘dumb’ apps. Where once we ran the machine, now we let the machine run itself.
With AI, the machine becomes an actor in its own right. It’s a discrete entity that can do its own thing in its own mysterious way. Our desires — rather than being translated into direct manipulation of a tool by us — are interpreted by an algorithm, which then decides on appropriate outcomes and executes on them with various degrees of autonomy.
Users already experience difficulty in building a mental model of applications with machine learning under the hood. A typical AI user interface at this point too often fails to adequately account for its actions and to reveal its inner workings. We need to respond to the rapidly shifting interface dynamics at play, and we need to improve.
The fundamental challenge, then, is to help users come to terms with AI in a meaningful way: to help them grasp what’s happening when the software is running, to know what they can control, and to build a relationship with the UI that’s based on trust and understanding.
An Evolving Lifespan
Another objective in creating the library is to overcome assumptions and find ways to evolve with the technology. AI implementations challenge the accepted understanding that a typical piece of software has only a handful of states over its lifespan: onboarding, in-use, feature upgrade, and end-of-life. AI throws that assumption out the window.
In a true machine learning application, both the user and the system are learning, being trained by each other, and adapting to each others’ needs and contexts. The potential for open-ended interactions and the emergence of new capabilities means that, at its most extreme, the UI could be unique for any given user at any point in their relationship with the app.
How then do we grapple with a true ongoing evolution, instead of the more static launch → upgrade → end of the app path we’re familiar with? Again, we need a clearer understanding of when and how to present the changes as they occur, to help ground our users and ourselves in an uncertain and changing future state.
Perception vs Reality: Does it Even Matter?
One final objective in creating the Smarter Pattern Library is to meaningfully address the perception of intelligence, one that is often unrelated to implementation.
For example, many bots work through pre-set scripts and don’t actually meet the requirements for a truly AI- or ML-powered app. They are technically not “smart” in the ways we’re coming to understand that term. But does it really matter?
Because regardless of the authenticity of the intelligence, from the user’s point of view the app manifests the sense of an artificial agent that may or may not be acting in their best interests. It is because of this that we include relevant patterns in our AI UI Pattern Library, which can be applied equally to real or faux-AI.
For example, a parallel can be drawn between a pattern that allows the UI to generate emergent capabilities, and a pattern that gradually reveals prefabricated features. The reality of the experiences for the user may play out in similar ways, but only one of them would involve true AI.
All of these ideas look at the implications of AI and ML through the lens of interface design, but it’s still only a subset of AI activities. So much of what’s already in operation is actually running on large scale systems at the infrastructure level, not merely contained in a consumer-facing app. But we need a jumping off point to start discussions and interface design, by nature, puts end users at the centre of the experience.
The Smarter Pattern Library, at its heart, is intended to give designers the tools to empower their users’ experiences.
Take a look at the Smarter Pattern Library (and don’t forget to bookmark it to return to in future as we update it) and tell us what you think. Like the technology itself, the conversation and concepts around AI user interfaces will continue to evolve and grow.