AI Interaction Patterns: Giving Users Ways to Recognize and Interact With Ai-Driven Features

Simone Viani
4 min readMay 10, 2024

--

Now that we’ve acknowledged the fact that artificial intelligence (AI) is here to stay, and that it will keep on blending in with our lives more and more, we can understand that the way we identify AI and interact with it becomes ever more crucial.

Human-computer interaction is certainly nothing new (as designers and developers) but the nature of AI in many ways imposes us to rethink and find new interaction patterns to serve as building blocks of this new experience, giving users ways to effortlessly recognize and interact with these AI-driven features. The point shouldn’t be just to adapt to AI, but to harness its full potential in creating more engaging and intuitive experiences.

AI-based interfaces should therefore empower users to actually harness that potential, and this is achieved by using interaction patterns that inform and build a trustworthy relationship between humans and AI.

Human-computer interaction (source: Midjourney — prompt: humand-computer interaction as seen by Stanley Kubrick)

Type of Patterns

Let’s now cut to the chase and see what practical interaction patterns we should be considering when building a new AI-based tool, be it a chatbot, an analytics dashboards or a personalized recommendations banner.

Introduce the AI: let people know they’re chatting with an AI, not a human behind the scenes, in other words clearly distinguish AI features from traditional interfaces.

Give Directions: show people how to get the most out of the AI, offer clues on how the AI works and what to expect. This could be prompts, like how to ask a question, or clear instructions on what the AI can and can’t do.

Fine-Tuning: especially for chat-based AIs, give ways to adjust how it responds, like asking for more details.

Building Trust: make the user feel comfortable with AI and understand its reasoning, so features that show how the AI works and why it gives certain answers are paramount.

Emerging Patterns

Even though we are considering a relatively short period of time, UI/UX patterns are emerging rather quickly.

✨ Sparkles

Probably the most recognizable (*) UI element due to its widespread adoption is the sparkle icon. The reason for its popularity is mainly unknown, even if some relate it to the “magic” behing AI (I guess thank you Disney?).

Even though sparkles are growing in popularity and therefore you could argue that they will soon be considered “a standard”, we should always consider two important caveats this solution brings:

  • they don’t have a straight-forward meaning like a clock icon, so a user can’t be entirely sure what might happen next. If we consider the aforementioned point of Building Trust, that’s certainly not ideal.
  • the meaning behind an icon (or an image in general) is certainly affected by the cultural background of the user. Demographics are therefore key to ensure that visual cues are the most inclusive and accessible as possible.

In general, without clear knowledge of an image, users can become confused by your design

The sparkles icon used inside the prompt box of Notion (source: https://www.notion.so/product/ai)

🌈 Colors

As of today, in terms of colors, there is probably not a real standard yet, especially because big companies still prefer to extend their brand colors to AI applications, but we’re definitely seeing a large use of purple and related gradients on many interfaces.

Once again, there is no specific reason for this color choice, but it could be related to the the need for a not commonly used color in interface design that felt “premium” and “magical” at the same time.

Note: just like for the sparkles icon, some colors in one culture may not be recognized or understood in another so one should ideally research and test across different demographics to ensure the most inclusive and accessible interfaces.

Purplish gradient used on GitHubs’ Copilot (source: https://github.com/github-copilot/)

🔖 Labels and Badges

Different levels of computer literacy among users, even in 2024, is something one should always take into account when creating user experiences. This is even more true in this new realm of AI tools. While some people might find that a simple indicator like the sparkle icon is clear enough to indicate AI functionality, for others who aren’t as familiar with this technology might be necessary to use more direct cues, like badges or labels that are clearly marked with “AI.”

Use of labels, purple and sparkles on the Magician Figma plugin (source: https://magician.design/)

We are obviously just at the beginning of the AI revolution, and many aspects of its integration with user interfaces will probably (need to) change in the long run. It will be interesting to see how design will adapt and cater to the user’s needs as AI will understand its user better and better.

What a great time to be a designer!

--

--

Simone Viani

Creative Digital Program Manager @ SDA Bocconi School of Management — Interface and Interaction Developer — www.simoneviani.com