AI UX Design Patterns

Artificial Intelligence brings a new paradigm to user experience design. Asking users to express their intend, rather than the long standing modus operandi of using options to impute commands.

Previously developers configured known options to allow users to produce predictable outputs. However, AI doesn’t work like this.

TLDR: I’ve made an AI UX guide outlining design patterns applicable to designing effective AI experiences. Check it out here www.aiuxpatterns.com

The humble Textarea

AI is a text based, so the good old [Textarea] input is having it’s moment in the sun. However, interfaces will evolve past this as we abstract users further away from complex text prompts to more configurable controls that compile complex & quality prompts.

AI’s UI Future

Trying to predict the future of AI interfaces is a fools errand. Although, what we can do is apply any current best-practice UX patterns as a grounding for new AI experiences.

Our existing design patterns have been refined in the wild (the Internet) for decades & form a solid foundation to adopt the new AI paradigm while proving familiar experiences.

We’ve started with a simple textarea input as the focus now but as the history of interfaces shows us, this will become much more abstracted.

Introducing AI UX Patterns

This collection of UX patterns is an attempt to catalogue, with simplified example, the key interaction patterns applicable to crafting successful AI experiences.

They’re not complete UI designs serving as a “kit” but functional references showing the key interface elements & they’re interactions.

How to use it

The purpose is to help UX decisions when planning a product design involving AI. Allowing you to review & evaluate which patterns fit your product & users best.

Whilst real world examples are good, it can be time consuming to collate these examples. Products like Mobbin are great, although you still have to sift through examples to find what you’re after.

Abstracted examples allow designers to focus on the required elements & interactions in a pattern without other visual noise or overlapping patterns. Whilst I tried to make these examples still aesthetically pleasing they’re generally simple & don’t reflect any particular UI.

Example pattern ~ Reference material

This example shows files being applied along with a text prompt to be used as the primary reference material.

Each pattern has an interactive example & contextual content around it’s purpose & key considerations.

Combining Patterns

Real products involve multiple patterns simultaneously as users move through their workflow.

The pattern designs are isolated so they can be reviewed individually, however, in practice they’ll be combined to create an effective experience.

The above example shows 6 patterns combined into a typical prompt authoring experience. Deciding which patterns to include is all about which patterns serve our users & their goals best.

Patterns in this example include:

• Inline Help
• Prompt Template Library
• Prompt Feedback
• Inline Prompt Suggestions
• Result options
• Result AI Assistance

Picking Design Patterns

Repeated & effective design solutions form our definition of “best-practice”. By pealing back the layers we can define these patterns & leverage them effectively in varied contexts.

Patterns specific to AI have already begun to emerge. Watching the growing range of products implement & reinterpret these solutions will be an exciting journey for designers &users. But only by identifying the right patterns for the right context can be confident our designs will be usable as we make our way through the new AI paradigm.

Updates

My plan is to keep expanding the pattern as I see new ones. As well as refining each existing pattern. For instance, adding a element specification to each could help guide the component required & 3rd party examples would help solidify how the pattern has been used effectively to date.

Version 1 though has been about simply identifying & defining the patterns to try see where we’re today, to better reflect on where AI UX is headed.

Check it out at https://aiuxpatterns.com/