#96 Advanced UX Patterns for AI Products – Part 2
12:30 Share

Hello and welcome back to the future of UX, the podcast where we delve into the evolving world of technology and design. My name is Patricia Reiners, I'm your host. And in our last episode, we explored fundamental UX patterns in AI products, discussing how templates, suggestions, incognito mode and KV shape user interactions.

Today in part two we will continue this journey by having a look at additional UX patterns that are redefining AI user experience design.

As AI continues to be integrated in our daily lives, understanding these patterns becomes super important for creating intuitive and trustworthy interfaces. It's a little bit different designing AI products compared to typical or traditional interfaces and we will discuss patterns like token layering, variations and color schemes and see how they enhance user engagement with AI systems.

So we will start by exploring the token layering patterns and its role in defining AI inputs. Then we will discuss the variations patterns which offers users multiple AI generated options. And finally we will look at the color schemes pattern and how visual cues can help users identify AI features. And throughout we will reference lots of different insights and I'm also going to link

wonderful websites where you can find more information in the show notes so make sure to check it out learn more about AI design patterns and I would say let's dive right in and focusing on the very first pattern which is the token layering pattern so let's begin with the token layering pattern this approach allows users to construct prompts using specific keywords or tokens

effectively guiding the AI to produce more accurate and tailored outputs. So have a look at Adobe Firefly. This is a web-based interface where users can input visual tokens. So distinct, dismissible elements that represent specific concepts or styles. By layering these tokens, users can fine-tune their prompts. It's a little bit like parameters basically that you enter.

This leads to a more specific AI-generated image or design. This method empowers users to have greater control over the AI's output, making the creative process more interactive and personalized.

With Adobe Firefly for example it works like this: It's an image generation tool from Adobe. You enter a prompt like "a dog in an office wearing glasses and working on a MacBook" and then on the left side you have the option to enter different tokens or different parameters, how to say. For example the style: Is it a photography or is it an art style? So you enter the token "photography".

Then you enter the token with the aspect ratio, for example, 1:1. It's a quarter. Then you enter another token, for example, paper layered, which is a certain style. Then you enter all these tokens, little adjustments, little parameters to the prompt that you originally created. Second pattern is the variation pattern. Let's discuss it.

This pattern presents users with multiple AI-generated options based on a single prompt, allowing them to choose the result that best fits their need. So how does it look like?

Imagine using an AI writing assistant to draft an email. After inputting your initial prompt, the AI provides several versions of the email, each with slight differences in tone or structure, and you can then select the version that resonates most with your intended message. This approach not only saves time but also enhances user satisfaction by offering choices that align with their preference.

It really helps to understand also the user a little bit better of what the user wants. So the idea between the different variations patterns is that if the user enters a prompt, you create different versions, different variations, and the user then chooses the variation that works best for them.

This is super helpful to learn more about the user and also provide content that's helpful. And our last topic, which is the color scheme pattern. And I think this is pretty, pretty interesting because when it comes to AI, a lot of companies, products are currently using these visual cues, specific colors, a lot of purple, a lot of black, bright yellow colors.

that helps users to identify these AI features or content within the interface. Many AI-powered tools use these distinct color schemes to differentiate AI-generated content from human-generated content. This is super important also for the user.

For instance, an email client might highlight AI-suggested responses in a specific color, really signaling to the user that these AI-generated suggestions, this visual differentiation, builds trust and transparency in ensuring users are aware of the AI's role in the interaction. Okay, so now let's come to this episode's sponsor, Wix Studio.

Web designers, let's talk about the C word, creative burnout.

Your client-side has real portfolio potential, but between resourcing, feedback, end-tied budgets, and ever-tidier deadlines, it just doesn't make the cut. Wix Studio helps close that gap. Built for agencies and enterprises, you can bring your own vision to life and keep it alive with no-code animations, tons of AI tools, reusable design assets, and advanced layout tools. For your next project, check out wixstudio.com

That's wixstudio.com A very common icon that has been used to represent AI is the sparkle icon and you've probably have seen that everywhere. So as soon as we are seeing the sparkle icon somewhere, you know those little mini stars basically, we know okay this is AI generated.

so the next time you're using an AI product maybe from Wix or maybe from Elementor or maybe from ChatGPT have a look at how AI is represented is it a certain color is it a certain icon that has been used and you will see a lot of similarities most of the companies for some reason use purple as their AI color

and use these sparkle emoji to showcase where AI is integrated and where AI is not integrated. So if you're currently working on an AI product, these patterns can be super super helpful for you just as a guideline. This is not a rule, something that you should follow that has been tested throughout years.

All companies, all AI designers who are coming up with these patterns are currently still exploring how to use these patterns and how to make the most out of it. This is still a work in progress, but I think it works super well to have them as a guideline. So the first AI UX product that we, UX pattern that we talked about were the token layering pattern.

so that you buy a prompt but then can add certain parameters, certain adjustments to define the prompt. This is not like the template prompt but you choose which of those parameters are important. Do you mind if it's an aspect rating for example for an Instagram story or do you need this for a post?

So is the aspect ratio even important for you? So you chose the different tokens or the different patterns or the different parameters that you basically add to the prompt for the result that you want. Second one are the different variations to learn more about the user and provide different options where the user can choose from.

And the last one to differentiate between AI generated content or where AI comes into play and what's basically more like human focused. You have certain colors to differentiate everything that's coming from the AI basically or certain emojis or certain icons or anything to represent this is generated by AI. And have a look at these different tools is also something that I think can be super, super helpful.

Generally, if you would like to learn a little bit more about AI patterns and everything, I can highly recommend to check out the library Shapes of AI from Emily Campbell. She's also someone who I had in the podcast already two times where we talked about AI and the future of design and really dove into how this all looks like. And she created a wonderful resource for free, which

in the web where you can dive through those different patterns. And those are not master solutions you should follow, but it shows or it gives a little sneak peek into what other companies thought of how they are solving certain problems. This can be super helpful. So SAI continues to evolve. Understanding, implementing, coming up with new UX AI patterns is essential for creating user-friendly and trustful interface. We're basically learning from each other's.

So patterns like the token layering, the parameters basically, the creating variations for the user and color scheme, so differentiating human-created content and AI-generated content

enhances user engagement, but also builds confidence in AI interactions. And all companies are currently learning what's working well, what doesn't work so well. So everything is basically work in progress. If you found today's discussion insightful, consider subscribing to the Future of UX podcast, leave a review.

And don't miss any future episodes when it comes to exploring the intersection of design, technology and the future. And don't forget to visit the website Serbs of AI for a wealth of resources on AI UX patterns. Thank you so much for joining me today. Stay tuned for our next episode where we will continue to explore the future of user experience design.

Until then, keep designing the future. Thank you so much for listening and hear you in the future.

you