AI UI/UX Patterns
We believe AI has fundamentally changed how User Interfaces will respond and interact with users.
Rather than fixed, programmatic experiences, users begin to expect responsive interfaces that are personalized to their preferences and desires. ChatGPT was the first product to dramatically transform what users expect out of a UI interface, but many other solutions exist that already capture the magic of AI and use it to enable users to do incredible things.
Below, we'll explore real-world solutions and provide examples of patterns that you can look to leverage in your own applications. We'll discuss some of the design challenges and benefits that you'll see when you use these patterns, and provide some helpful advice for implementing your own unique AI systems.
An Ad Blocker or a Tracking Blocker on your browser has blocked your ability to run examples!
Please disable and reload the page to interact with the below examples.
Suggestion
These patterns suggest actions or optimizations that benefit the user. Using the rationalizing capabilities of AI models, we can help the user accomplish a known task and adapt to their specific details.
Autocomplete
Suggests the rest of an in-progress action based on the application and user context
Advisory UI
A variety of UI elements that provide guidance or suggestions to the user
Summary
These patterns help to simplify complex or detailed information for the user. Being able to with a quick look understand how to act or judge information can be a powerful tool for users to feel control and ownership over their experience using an application.
Status Summary New
Clearly indicated status based on a complex condition
Adaptive Interfaces
These patterns change the user interface based on the user's actions and details. We can use the below patterns to create unique experiences that provide personalization to the user based on their task or preferences.
Adaptive Styling
Changes the displayed UI theme in response to the context of what is going on in the application
Tasking
These patterns perform clear and understandable tasks on behalf of the user. While there is satisfaction from the direct influence over the outcome when you perform tasks yourself, some tedious work is better left to AI automation.
Spell Clicks
Buttons clicked to perform predetermined complex tasks.
Learning Resources
If you're looking to further yourself as an AI developer, the following tips and resources may be helpful to you on this journey.