Generic AI UI Elements
During the realization of various engineering projects involving AI workflows, I encountered novel design challenges that required innovative UI solutions. At this point, I do not even try to give an answer or even a set of components, rather I want to just approach this overall challenge by laying out the dimensions of the problem space, that we encounter.
This research shall bridge the gap from Users Needs, to User Experience Researchers, to User Interface Designers, to Software Engineers and finally towards the actual underlying Generative AI System and the novel interactions it enables.
Next, I want to visualize here the model mastery lifecycle and the three design paradigms from Niels, as those might be relevant dimensions for our components.
Key Interaction Concepts
Explore three fundamental dimensions of AI interface design through interactive visualizations based on recent research.
Interaction Paradigms
Three fundamental ways users interact with AI systems, based on research by van Berkel et al.
User explicitly initiates interaction. Clear start and end points.
How do I design a good AI interface?
Based on: "Human-AI Interaction: Intermittent, Continuous, and Proactive" by van Berkel et al.
Transparency Depth
How AI systems communicate differently based on user expertise, based on research by Li et al.
Adjust the slider to see how transparency adapts to user expertise
Current System States
Analyzing your document...
Reasoning Processes
Future Intentions
Based on: "Designing Intent Communication for Agent-Human Collaboration" by Li et al.
Model Mastery Lifecycle
User progression through AI expertise stages. Click a stage to explore how UI should adapt, based on research by Chignell et al.
Perception vs Reality
Based on: "The Model Mastery Lifecycle: A Framework for Designing Human-AI Interaction" by Chignell et al.
User Interface Design Requirements
LLMs and applications shall be adaptive in a way that they improve over time, so our user interface elements will also have to have multiple states. Ideally they have an internal dynamic mechanism to respect the currently respective perfection of the model on the autonomy scale.
Visual overview of different edit modes from our previous paper. This seems very similar to Human-AI Interaction: Intermittent, Continuous, and Proactive from Niels van Berkel, Mikael B. Skov, and Jesper Kjeldskov of Aalborg University
Atomic Design is missing Neurons
On another side we might want to find out more about the Atomic Design Systems by finding out if the inventory of an atomic design system is still sufficient for AI systems.
Atomic Design is a popular modular design paradigm for thinking of UIs as thoughtful hierarchies, which leads to techniques transforming design and development workflows.
I consider the new concept of a Neuron to be a new layer between molecules and organisms in a way that it is the separable AI component to be used for wiring functional molecules or even organisms through AI capabilities. These Neurons have the tasks to mainly communicate several information to the user.
Neuron Communication Responsibilities:
- Input Context: what information will be processed by AI after a certain interaction
- Capability: What information can be processed [Gammelgård-Larsen 2024, Li 2025]
- Output Context: communication on the transparency level [Li 2025]
- Error handling and communication
- Loading states and progress
Nature of Neurons: They should also take users attention into consideration as the timing of interruptions is highly significant on many different factors. [Arvind can you help me?] Also we want to make sure that these Neurons are user adaptive in terms of accessibility: Users with high and low AI literacy should benefit.
More about my approach
On one side we want to see certain qualitative forces on User Interface components. I dream of a toolkit to steer certain requirements in order to generate a suitable component for our use case.
Traditional Dimensions
Traditional User Interface Component Dimensions have been mostly binary.
Provenance
Lorem Ipsum
Generative AI Dimensions
Through the nature of Gen AI, the Dimensions transposed to a more continuous scale.
Provenance
Lorem Ipsum
Lastly, we want to analyze different types of functionality that certain may serve and define certain categories. Through agentic Systems we have to accompany multiple loading states that may also cover chained processes, the user awaits. Furthermore, we have provenance requirements to build the trust to AI generated. All these kind of forces, shall deserve a structured overview as seen in the table below.
| input | loading | error | output | |
|---|---|---|---|---|
| provenance | provenance × input | provenance × loading | provenance × error | provenance × output |
| capabilities | capabilities × input | capabilities × loading | capabilities × error | capabilities × output |
| context | context × input | context × loading | context × error | context × output |
| effectives | effectives × input | effectives × loading | effectives × error | effectives × output |
Evaluation
Expert Interviews
I could ask some friends in UIUX Design industry. Each of them (hopefully) likes me. What shall I do?!
- Kol (the best in the world)
- Nil (Very experienced, worked together)
- Mer (works at Apple)
- Cal (strong technical experience)
Library Usage Analysis
Let's review the download numbers of certain libraries that might fit into certain directions. Do we have a certain trend of what components are being used more frequently than others?
Document-based AI Assistance
Maybe have an AI chatbot answer some information based on the information within a long document. Then when answering, we could scroll to the right element and highlight it somehow as we also highlight our chatbot answer. But how this would look on mobile devices? Also we do not want to move much or change much.
AI-powered Autocompletion
Have some AI based autocompletion based on information from another website. E.g. user wants to fill out a form with personal data and it would be taken from his website, so he can have some component to insert his website and AI fills out information. On every field, maybe show a little hovering thing in order to get the trace. Maybe use right click (mouse) or long press (touch screen) interaction to trigger the hovering thing.
Related Work
As of now, I collected 14 sources. See below:
By Apple Inc.
By Niels van Berkel, Mikael B. Skov, and Jesper Kjeldskov
By Brad Frost
Designing for Human-AI Interaction: Comparing Intermittent, Continuous, and Proactive Interactions for a Music Application
By Anders Gammelgård-Larsen, Niels Van Berkel, Mikael B. Skov, Jesper Kjeldskov
They have a wonderful starting point for the literature survey and explain many existing models and theories about user interface design with AI, but they also highlight the need to distinguish between general HCI and UX guidelines and ones that are uniquely about AI. They evaluate three different music exploration systems for Intermittent, Continuous and Proactive interaction paradigms. So essentially it goes into the Human Agent Collaboration Dimension-ishdirection. Next to referring to several other guidelines and theories, this paper in particular motivates me to go through related work and also back in time to earlier references. Furthermore, I want to find out how those interaction paradigms relate to my own recent work about context mediated domain adaptation.
In their evaluation of a Proactive AI system, they talk about misalignment of design intent and user expectations, but I also ask myself now: Do we as a user even want to interact with an AI at all? I guess this is an interesting question to clarify and we need to break it down into different goals like entertainment, social interaction, work and probably much more.
During reading this paper, I started to believe that we should aim for independent systems in a way that their core functionality would work even if we take all AI out of it. As of now, AI chat interfaces are mostly used for generating results that we copy and paste from there towards our actual target system.
Such separability forces us again to put more emphasis on enforcing proper underlying data structures, as such would be needed for non-AI systems. But at the same time, AI brings great power for highly dynamic user interfaces. So probably this is more a question of Where to draw the line?
As of writing now, Cloudflare is down, which supports my belief in a totally new angle.
By Yi Li, Francesco Chiossi, Helena Anna Frijns, Jan Leusmann, Julian Rasch, Robin Welsch, Philipp Wintersberger, Florian Michahelles, Albrecht Schmidt
This design space is rather about agents that are not purely providing a UI of a screen, but something mixed, like a self-driving car. The design space is about 3 dimensions of directional communication from an agent to the human.
On the Transparency level we learn to distinguish the information into (A) current system states, (B) reasoning processes and (C) future intentions. We learn to include uncertainty cues and to calibrate the transparency depth on the operator expertise. From this, I derive to make our system adaptive to the user. Based on the user's AI literacy, it should behave differently. AI-powered systems shall remain accessible in a way that the UI adapts based on the individual user's expertise and context.
By Christian Meurisch, Cristina A. Mihale-Wilson, Adrian Hawlitschek, Florian Giger, Florian Müller, Oliver Hinz, Max Mühlhäuser
By Mark Chignell, Mu-Huan Miles Chung, Jaturong Kongmanee, Khilan Jerath, Abhay Raman
Based on users expertise and model mastery we have to define the tasks for our systems differently. This is more applicable for bigger systems, that they need to be adaptive. So based on the Model Mastery, we have different Human AI Interaction strategies, which might lead to certain System Design decisions and which introduces another dimension of requirements to our actual components. But first of all, how do we know if the model has reached the required mastery?
Other than that, I learned that people might perform better, when they think they are being AI-supported placebo, which may have a direct impact on how to design components. I also learned that there is a paradox where experts are to critical with model mastery and naive users assume mastery too early.
By Rune Møberg Jacobsen, Martin Lindrup, Joel Wester, Niels van Berkel, Dimitrios Raptis, and Peter Axel Nielsen.
By Martin Lindrup, Rune Møberg Jacobsen , Joel Wester , Niels van Berkel , Dimitrios Raptis , Peter Axel Nielsen
By Yuwen Lu, Yuewen Yang, Qinyi Zhao, Chengzhi Zhang, Toby Jia-Jun Li
By Peter G. W. Kee n
By Andres J. Ramirez and Betty H.C. Cheng
By Julia Friedrich, Anja Brückner, Jasmin Mayan, Sandra Schumann, Amit Kirschenbaum, Christian Zinke-Wehlmann