<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~files/atom-premium.xsl"?>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:feedpress="https://feed.press/xmlns" xmlns:media="http://search.yahoo.com/mrss/" xmlns:podcast="https://podcastindex.org/namespace/1.0">
  <feedpress:locale>en</feedpress:locale>
  <link rel="hub" href="https://feedpress.superfeedr.com/"/>
  <logo>https://static.feedpress.com/logo/telerik-blogs-design-6185219d82917.jpg</logo>
  <title type="text">Telerik Blogs | Design</title>
  <subtitle type="text">The official blog of Progress Telerik - expert articles and tutorials for developers.</subtitle>
  <id>uuid:7a847fbe-1d54-4763-a640-81feed5e0b9f;id=704</id>
  <updated>2026-09-02T08:19:16Z</updated>
  <link rel="alternate" href="https://www.telerik.com/"/>
  <link rel="self" type="application/atom+xml" href="https://feeds.telerik.com/blogs/design"/>
  <entry>
    <id>urn:uuid:1f4c932a-340d-4c45-9fcd-07c4c63123b5</id>
    <title type="text">AI UX Patterns to Show Meaningful User Benefit</title>
    <summary type="text">All the interesting technology and cool functionality in the world is meaningless if what we build doesn’t solve the problems our users need solved.</summary>
    <published>2026-08-26T20:33:33Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17432427/ai-ux-patterns-show-meaningful-user-benefit"/>
    <content type="text"><![CDATA[<p><span class="featured">To get user buy-in, we need be adding AI features that actually work for users and help them in a significant, recognizable way.</span></p><p>All the interesting technology and cool functionality in the world is meaningless if what we build doesn&rsquo;t solve the problems our users need solved. To do that, we need to create experiences that make it as simple as possible for users get the output they need from our AI features and leverage it in their work. </p><h2 id="ux-pattern-usage-guidance">UX Pattern: Usage Guidance</h2><p>One of the biggest mistakes we can make when developing AI features is assuming that users know how to use them. As mentioned in the <a href="https://www.telerik.com/blogs/ux-challenge-designing-ai-powered-user-interfaces" target="_blank">first article</a> of this series: <em>we</em> know how to do things like provide context, specify formatting requirements, break large tasks into smaller ones, and iterate toward better results when using AI&mdash;but our users often won&rsquo;t.</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-29-32-am.png?sfvrsn=b7d2d8ec_2" height="582" style="max-width:100%;height:auto;" title="Screenshot 2026-07-23 at 10.29.32 AM" width="962" alt="Chat prompts in Claude " sf-size="69820" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-29-44-am.png?sfvrsn=b55696cc_2" height="538" style="max-width:100%;height:auto;" title="Screenshot 2026-07-23 at 10.29.44 AM" width="918" alt="Agent templates in ChatGPT" sf-size="129647" /></p><p>When we place a blank text box in front of a user and tell them to &ldquo;Ask AI,&rdquo; we're actually asking them to do a <em>lot</em> of prework before they even get to their main task. So much, in fact, that it may actually create more work for them than just completing the task themselves. </p><p>They need to understand what kinds of problems the tool can solve, how specific they should be, what information the AI needs to succeed and how to recognize when a response needs refinement. </p><p>Rather than expecting this level of AI-literacy from our users, we can help them by providing examples, templates, suggested prompts and guided workflows that demonstrate what success looks like. And if there&rsquo;s existing contextual information we can leverage without making the user input it all themselves, all the better. </p><h2 id="ux-pattern-action-buttons">UX Pattern: Action Buttons</h2><p>What will your users be doing with the content your AI feature generates? If they run a search or analyze a spreadsheet, what do they do with the results? If they create an image, who are they showing it to? The action itself is just the beginning of the flow for our users, who then need to <em>do something</em> with what they&rsquo;ve received. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-30-01-am.png?sfvrsn=24c2772c_2" title="Screenshot 2026-07-23 at 10.30.01 AM" width="450" alt="Quick Create buttons in Microsoft 365 Copilot" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-30-06-am.png?sfvrsn=597b5a92_2" title="Screenshot 2026-07-23 at 10.30.06 AM" width="350" alt="In-document contextual action prompts in Microsoft 365 Office Suite " /></p><p>By including action buttons, we can make it as easy as possible to them to leverage the output of our tools in their own work. If they&rsquo;re not able to act on the content that was created, it&rsquo;s never going to be of much realistic use to them. And if it&rsquo;s not <em>immediately</em> clear what they can do with what we&rsquo;ve created for them, then we need to show them with real-world examples. </p><p>Once they have an idea of what they want to do, action buttons can guide them to suggested steps that help make the most of what was generated. But an application that creates content a user isn&rsquo;t sure how to use is nothing more than a novelty to be used once or twice and then ignored. </p><h2 id="ux-pattern-external-integrations">UX Pattern: External Integrations</h2><p>If we want to take this one step further, we can build in direct integrations with their other most-used tools. For example, generating a new document in their word processing software from an AI writing draft, pushing new code to their linked repo, opening a new ticket in their tracking system with findings from a test. The simpler we make it to get information from our tool into the rest of their workflow, the more useful it will be to them.</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-29-51-am.png?sfvrsn=d9b0e6b0_2" title="Screenshot 2026-07-23 at 10.29.51 AM" width="350" alt="" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-29-56-am.png?sfvrsn=c736b69e_2" title="Screenshot 2026-07-23 at 10.29.56 AM" width="450" alt="Agentic integrations in ChatGPT " /></p><h2 id="can-users-trust-the-ai-features-in-your-software-">Can Users Trust the AI Features in Your Software?</h2><p>AI can generate content, write code, analyze data, automate tasks and empower our users to do incredible work&mdash;but only if they&rsquo;re willing to try it. When everything our AI tools are doing is hidden behind the curtain, it makes users feel like things are happening without their input&mdash;which is hard, especially when many of them are already feeling some level of AI skepticism and hesitation. </p><p>If we create AI experiences that take away our users&rsquo; power, understanding and autonomy, then they&rsquo;ll never be interested in using what we build because they&rsquo;ll never feel truly comfortable engaging with it. By focusing on patterns that reinforce those UX priorities of <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-trust" target="_blank">trust</a>, <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-clarity" target="_blank">clarity</a>, <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-control" target="_blank">control</a>, <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-transparency" target="_blank">transparency</a> and meaningful benefit, we can set guardrails around our AI features that help make our users feel safe. </p><aside class="pquote"><style>.pquote {
float: right;
width: 200px;
font-size: 20px;
line-height: 1;
font-style: italic;
padding: 14px;
}
</style>
<blockquote><p>The technology may be incredible, but for it to be truly successful, <strong>users</strong> still need to be at the center of everything we build.</p></blockquote></aside><p>The technology is here. The models are already good and they just keep getting better, faster and more efficient. That means that the differentiator for AI-powered software isn&rsquo;t performance, anymore. It&rsquo;s the <em>quality</em> of the experiences that we can build around them. </p><p>The line between design and development is blurring a little more every day: how users interact with a system, how much information they see, how much control they have and how we earn their trust are now questions that developers <em>have</em> to consider when building AI-powered software&mdash;whether your title includes &ldquo;designer&rdquo; or not. The technology may be incredible, but for it to be truly successful, <em>users</em> still need to be at the center of everything we build.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">Turn AI coding agents into a repeatable development workflow</h4></div><div class="col-8"><p class="u-fs16 u-mb0">Progress Agent Harness is a CLI tool that orchestrates your AI coding agents through structured, repeatable workflows&mdash;bringing planning, execution and governance to AI-assisted software development. <a href="https://www.telerik.com/agent-harness-early-access" target="_blank">Join the Agent Harness Early Access Program.</a></p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17432427.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:a5f0d0a2-cf99-48c9-99af-0fcb347a85c8</id>
    <title type="text">AI UX Patterns for User Transparency</title>
    <summary type="text">Most users won’t integrate what they can’t see and understand. If the AI applications we build are going to become part of their daily lives, users need transparency.</summary>
    <published>2026-08-20T16:31:50Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17424535/ai-ux-patterns-user-transparency"/>
    <content type="text"><![CDATA[<p><span class="featured">Many users won&rsquo;t allow AI to integrate into their workflow if they don&rsquo;t know what that access really means. To get user buy-in, we need to provide transparency.</span></p><p>AI tools are strongest when they integrate into the rest of a user&rsquo;s workflow&mdash;referencing internal documents, sending emails, making calendar appointments, drafting and sharing content with coworkers, so on and so forth. </p><p>However, most users won&rsquo;t integrate what they can&rsquo;t see and understand. If the AI applications we build are going to become part of their daily lives, users need transparency into exactly what they do, what data they have access to and what it will cost them (in both time and money). </p><p>The more transparent we can make these features, the less hesitation our users will have adopting them. </p><h2 id="ux-pattern-permissions">UX Pattern: Permissions</h2><p>The concept of asking for user permissions is certainly not AI-specific, but the stakes can feel a lot higher when you&rsquo;re asking users for permission to allow AI to act on their behalf. </p><p>We need to make it easy for users to see which applications we&rsquo;ve allowed our tool to access and in what ways, keeping in mind that permissions are often more than just &ldquo;yes&rdquo; or &ldquo;no.&rdquo; </p><p>Can your agent just reference data from this database, or is it allowed to delete tables? Can it only read a user&rsquo;s emails, or is it allowed to send from their address as well? Can it run scripts? Search local files? Each one of these actions requires direct user sign-off. </p><p>Permissions are also not a one-and-done situation. A user might feel comfortable allowing an action to happen once under their direct supervision, but don&rsquo;t want to allow it permanently. They might give access to a specific folder, but not every folder. They might approve an action, but want to be notified each time it&rsquo;s taken. Consider what gray zones might exist in your permission structure, and try to accommodate as many options as you can. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-41-am.png?sfvrsn=997a5784_2" title="Screenshot 2026-07-23 at 10.28.41 AM" width="450" alt="Extensive permission options in VS Code Copilot " /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-46-am.png?sfvrsn=6db9970a_2" title="Screenshot 2026-07-23 at 10.28.46 AM" width="450" alt="Auto-approval permissions in VS Code Copilot " /></p><p>Another common sticking point with AI is data collection. Often, it can be helpful to save information from past interactions, but storing this kind of data requires real attention to user permission and data management. </p><p>If you want to create a system that can &ldquo;remember&rdquo; things, you also need to make sure it can &ldquo;forget&rdquo; as well&mdash;and that the user can not only see but has final say in what exactly what gets remembered. An ideal permissions flow will not only ask for a user&rsquo;s approval in the moment, but also create a space where they can see the history of what they&rsquo;ve given access to and when&mdash;and allow them to revoke that access or permission at any time.<span style="background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;text-align:inherit;text-transform:inherit;word-spacing:normal;caret-color:auto;white-space:inherit;"></span></p><h2 id="ux-pattern-estimates-and-confirmation">UX Pattern: Estimates and Confirmation</h2><p>This one is pretty simple, so we won&rsquo;t spend too much time on it, but another crucial aspect of transparency is making sure users know exactly what they&rsquo;re committing to when they approve an action request. In addition to approving the actual steps and plan (as we discussed earlier in the <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-trust" target="_blank">Trust post</a>), they also need to know how much time it&rsquo;s going to take and what it will cost them in money or tokens. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-55-am.png?sfvrsn=cdede2a2_2" title="Screenshot 2026-07-23 at 10.28.55 AM" width="550" alt="Figma&#39;s AI Balance token tracking meter" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-29-02-am.png?sfvrsn=e3d1bac5_2" title="Screenshot 2026-07-23 at 10.29.02 AM" width="300" alt="Model and token usage reports in VS Code Copilot " sf-size="13947" /></p><p>Even if we can&rsquo;t specify an exact amount, providing rough estimates generally gives users enough information to work with&mdash;and to potentially revise their request if it&rsquo;s going to exceed what they&rsquo;re comfortable with. </p><h2 id="ux-pattern-solo-execution-indicator">UX Pattern: Solo Execution Indicator</h2><p>Similarly to the marking that denotes which content was AI-generated, it&rsquo;s also a good idea to have some kind of visual signal for when an AI tool is acting independently. If, for example, you&rsquo;re going to allow an agent to take control of the user&rsquo;s browser, then there needs to be a banner, sidebar, outline or some other kind of indication that the user is no longer driving the interaction. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/jul-23-2026-10-29-18.gif?sfvrsn=ff53fc19_2" title="Jul-23-2026 10-29-18" alt="The glowing orange border denotes agent control of the browser in Claude&#39;s browser extension " /></p><p>Not only is this a good thing to do just for transparency&mdash;so the user understands the current state of the system&mdash;but also so they don&rsquo;t unintentionally interrupt or confuse an ongoing process. It&rsquo;s an especially important consideration for processes that you know will take an extended period of time, where the user may step away and come back without keeping track of everything that&rsquo;s happened while they were gone.</p><p><strong>Read next:</strong> <a target="_blank" href="https://www.telerik.com/blogs/ai-ux-patterns-show-meaningful-user-benefit">AI UX Patterns to Show Meaningful User Benefit</a></p><img src="https://feeds.telerik.com/link/23065/17424535.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:cb2724a0-c718-4df4-8650-62f8bee263ca</id>
    <title type="text">AI UX Patterns for User Control</title>
    <summary type="text">When users are working with our AI tools, they need to know that they are still ultimately the ones in the driver’s seat.</summary>
    <published>2026-08-13T19:28:24Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17417463/ai-ux-patterns-user-control"/>
    <content type="text"><![CDATA[<p><span class="featured">Users who are using our AI tools need to know they are ultimately the ones in control.</span></p><p>AI tools are often framed as being a kind of personal assistant for the user, an intelligent junior coworker they can delegate tasks to. However, as anyone who&rsquo;s ever delegated a task already knows &hellip; sometimes that means things won&rsquo;t get done the way you would have done them. </p><p>When users are working with our AI tools, they need to know that they are still ultimately the ones in the driver&rsquo;s seat. After all, there&rsquo;s very little value in being able to assign the AI tasks if you can&rsquo;t step in as you like to make adjustments, corrections and fixes yourself (just like you would with a <em>real</em> junior coworker). </p><h2 id="ux-pattern-user-override">UX Pattern: User Override</h2><p>Sometimes, you know something is going to be wrong before the work is even complete. The sooner a user can step in to abort an obviously incorrect process, the better the experience will be all around: fewer wasted tokens, less wasted time and less repetitive work are all good things. </p><p>Wrong responses can (of course) be the result of AI hallucinations. But just as often they&rsquo;re the fault of poor prompting, changing project specs or just straight up user error (typos, forgetting to include a requirement, etc.). </p><p>Realistically, the &ldquo;why&rdquo; isn&rsquo;t really important here, other than to show just what a common scenario it is. What matters is how we empower users to handle it that matters. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-06-am.png?sfvrsn=46a2f522_2" title="Screenshot 2026-07-23 at 10.28.06 AM" width="300" alt="The stop generation button in ChatGPT" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-12-am.png?sfvrsn=25a7f4bb_2" title="Screenshot 2026-07-23 at 10.28.12 AM" width="400" alt="The stopped generation message in Microsoft 365 Copilot " /></p><p>It&rsquo;s important for the user to be able to stop or override an AI action at any point&mdash;whether that&rsquo;s during content generation, partway through an agentic workflow, when running code or something else entirely. If the user is unable to abort the process, then they&rsquo;re not truly the ones in control&mdash;and that, frankly, isn&rsquo;t acceptable. </p><p>One of the most reassuring things we can offer our users is a clear and prominent &ldquo;emergency brake&rdquo; they can slam to bring everything to a halt for any reason. That means it can&rsquo;t be hidden in a menu somewhere or involving some specific command they have to remember (which they won&rsquo;t in a high-stress moment). </p><p>We need to give them the equivalent of a big red button they can slam and make everything stop when they need. </p><h2 id="ux-pattern-version-control">UX Pattern: Version Control</h2><p>Of course, once a user has stopped a process, we can probably guess what they&rsquo;ll want to do next, right? Undo the incorrect work. </p><p>Even way before AI, <a href="https://www.progress.com/blogs/ux-crash-course-nielsens-usability-heuristics" target="_blank">Nielsen&rsquo;s heuristics</a> listed &ldquo;safe exploration&rdquo; as one of the core principles required for a good user experience. That means that users should be able to navigate back and forth, click and unclick things, and generally just kind of mess around in a piece of software without getting stuck or unintentionally making permanent changes. Sometimes a user will try something and decide they don&rsquo;t like it or it didn&rsquo;t do what they thought it would&mdash;and in those cases, we want to make it as easy as possible for them to roll back to an earlier state. </p><p>This kind of safety net was always valuable, but now that we&rsquo;re dealing with non-deterministic output, having some type of version history is pretty much a non-negotiable. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-19-am.png?sfvrsn=ba273954_2" title="Screenshot 2026-07-23 at 10.28.19 AM" width="400" alt="Image generation history in Microsoft 365 Copilot " /></p><p>Of course, the level of &ldquo;version history&rdquo; that&rsquo;s required will differ based on the task. The Git style of version control that we&rsquo;re used to as developers is probably more than you&rsquo;ll need in a user-facing application. If this is a simple conversational interface, you may not need this at all; the user can just rephrase their question and try again when they don&rsquo;t get the results they wanted. </p><p>If your AI tool is doing something more complex, such as creating and editing a document, then simple undo and redo buttons that allow users to move back and forth within the last 10 (or so) steps might be enough. If your app is facilitating truly advanced work, then it may be worth building in the mechanisms for checkpoints, save states or true advanced version control. </p><p>Consider what kind of tasks your user will be working on with your AI tool and how significantly each step forward is likely to change the existing content.</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-27-am.png?sfvrsn=fc03e1d8_2" title="Screenshot 2026-07-23 at 10.28.27 AM" width="450" alt="Undo / Accept All options in Claude" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-28-34-am.png?sfvrsn=9a0f476f_2" title="Screenshot 2026-07-23 at 10.28.34 AM" width="300" alt="Keep / Undo buttons in VS Code Copilot" /></p><p>Ideally, this will also allow users the specificity to make targeted adjustments, rather than wiping out and replacing <em>everything</em> that happened in a given step. It&rsquo;s common for AI-generated results to have a mix of quality in the output; users may want to keep some aspects while reverting others. The more control as we can give them over that creative process, the more enjoyable it will be to collaborate with our AI tools. </p><p>This is especially true now, as the cost of tokens is starting to tick up significantly. Having granular control over what gets reworked allows for more specific and productive iteration, rather than having to just say &ldquo;try again&rdquo; and effectively start over from scratch each time.</p><hr /><p><strong>Read next:</strong> <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-transparency" target="_blank">AI UX Patterns for User Transparency</a></p><img src="https://feeds.telerik.com/link/23065/17417463.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:e0f27522-e1c1-4dbf-8a79-c19efd84ad37</id>
    <title type="text">AI UX Patterns for User Clarity</title>
    <summary type="text">The more insights we can give our users about what our software is doing and what they can expect to happen next, the more comfortable they will feel engaging with our AI features.</summary>
    <published>2026-08-06T14:48:18Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17404478/ai-ux-patterns-user-clarity"/>
    <content type="text"><![CDATA[<p><span class="featured">These patterns can help provide insight into what our AI is doing, inviting users to engage because they&rsquo;re clear on what&rsquo;s happening.</span></p><p>Hand-in-hand with <a href="https://www.telerik.com/blogs/ux-challenge-designing-ai-powered-user-interfaces" target="_blank">trust</a> comes clarity. Clarity is one of the most important aspects of creating a good user experience, generally&mdash;and the stakes only get higher when we start incorporating AI. </p><p>Because so much of AI still feels like an unknown our users, we need to be as descriptive and straightforward as possible about what&rsquo;s happening at any given time. The more insights we can give them about what our software is doing and what they can expect to happen next, the more comfortable they will feel engaging with our AI features. </p><p>I&rsquo;ve noticed that there can be a kind of impulse to position AI to users as &ldquo;magic,&rdquo; not only in marketing but also within the software, itself. We don&rsquo;t have to look any further than the prevalence of the AI sparkle icon to see example of that. However, while that might feel mysterious and cool, it&rsquo;s not accurate. </p><p>Our users deserve clarity over dramatics. They want to know what&rsquo;s going on and how a given output was created, and there&rsquo;s no reason for us not to pull back that curtain wherever we can. </p><h2 id="ux-pattern-live-generation">UX Pattern: Live Generation</h2><p>One of the most obvious ways for us to do this is with streaming text or similar live generation of content. Not only is this is a great way to disguise the latency issue of AI generation (after all, nobody likes to watch a loading spinner), but it&rsquo;s also a fantastic way to show the user what&rsquo;s happening in real time. </p><p>If we make the user wait until an entire response is generated, there&rsquo;s a non-zero chance that it won&rsquo;t actually be what they wanted. However, if we start showing a partial response as it&rsquo;s being generated, we give our users the chance to start assessing it immediately. That means they can start coming up with followup questions, adjustments or simply stopping the process entirely if it&rsquo;s not returning what they expected. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/jul-23-2026-10-27-05.gif?sfvrsn=52610598_2" height="766" style="max-width:100%;height:auto;" title="Jul-23-2026 10-27-05" width="1220" alt="Live text generation in ChatGPT " sf-size="197874" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/jul-23-2026-10-26-52.gif?sfvrsn=c1dcb9b7_2" height="766" style="max-width:100%;height:auto;" title="Jul-23-2026 10-26-52" width="1220" alt="Live image generation in Microsoft 365 Copilot " sf-size="3282912" /></p><p>This also engages the user as an active participant in the process, helping to prevent the <a href="https://xkcd.com/303/" target="_blank">XKCD &ldquo;code compiling&rdquo;</a> experience of pressing a button and then walking away. You&rsquo;ve probably experienced how much harder it is to complete a task if you&rsquo;re constantly disengaging from the workflow. Even if you know that a process only takes a minute, if there&rsquo;s not something to keep you there, you&rsquo;ll start checking your emails, replying to Slack messages, scrolling social media &hellip; and just like that, a one-minute wait becomes a 10-minute detour, making it much harder to pick up where you left off. The more we can prevent this for our users, the more productive they can be with our tools. </p><h2 id="ux-pattern-thinking-aloud">UX Pattern: Thinking Aloud</h2><p>Another thing that can help remove the wall between the AI and the user is having it &ldquo;think out loud&rdquo; as it processes a request. Similarly to live streaming, this also improves a user&rsquo;s confidence level in the output because they&rsquo;re able to kind of follow the breadcrumbs and have a deeper understanding of how a given conclusion was reached. </p><p>After all, we do this all the time when talking to other people! If we&rsquo;re presenting an idea, we know that it&rsquo;s helpful for us to talk through the rationale behind how we got there and why we think it&rsquo;s the right choice. Explaining ourselves is a very natural part of human interaction that we&rsquo;ve come to expect, and when we don&rsquo;t see that mirrored in the systems we use it can feel frustrating&mdash;like something is being intentionally hidden from us. </p><p>Additionally, seeing the chain of thought process allows for better, more accurate revisions when the output wasn&rsquo;t what they expected. If the user can understand all the steps that happened between points A and F, they can pinpoint where things went off the rails, allowing them to give more specific instructions or clarify ambiguous requests. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-27-27-am.png?sfvrsn=e6f3e05_2" title="Screenshot 2026-07-23 at 10.27.27 AM" width="350" alt="Thinking aloud in VS Code Copilot " /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-27-30-am.png?sfvrsn=d24bfc00_2" title="Screenshot 2026-07-23 at 10.27.30 AM" width="450" alt="Thinking aloud in Claude " /></p><h2 id="ux-pattern-highlight-changes">UX Pattern: Highlight Changes</h2><p>Some patterns are easy to adjust from their previous non-AI usage into this context. Highlighting new content is one of those: it&rsquo;s not groundbreaking, but when combined with everything else, it&rsquo;s immensely helpful in helping users keep track of AI actions&mdash;especially when an agent is acting autonomously. </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-27-38-am.png?sfvrsn=f26c3bb9_2" height="274" style="max-width:100%;height:auto;" title="Screenshot 2026-07-23 at 10.27.38 AM" width="966" alt="Change highlighting in VS Code Copilot " sf-size="123413" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/jul-23-2026-10-27-49.gif?sfvrsn=d5bf8400_2" height="474" style="max-width:100%;height:auto;" title="Jul-23-2026 10-27-49" width="858" alt="Jump to new content in Claude " sf-size="167275" /></p><p>The basic idea is that when new content appears or something is updated, it gets specially marked for the user to draw their attention to it. </p><p>Sometimes that might mean literally moving their focus up or down the page to see what&rsquo;s changed&mdash;like when new messages appear in an ongoing chat and the message history automatically scrolls down to display it. </p><p>But other times, it can just mean drawing the user&rsquo;s eye back to a space they might not have been actively watching, even if that doesn&rsquo;t include any literal movement on the page&mdash;like changing the color of revised text, putting a box or highlight around new material, or marking lines of code that are different.</p><p><strong>Read next: <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-control" target="_blank">AI UX Patterns for User Control</a></strong></p><img src="https://feeds.telerik.com/link/23065/17404478.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:bf381a49-41cf-41ff-8f13-f6ee111053bb</id>
    <title type="text">AI UX Patterns for User Trust</title>
    <summary type="text">AI is still a black box to many users. If they don’t understand how AI works, it’s hard to trust the output. These UX patterns can help build user trust.</summary>
    <published>2026-07-30T16:45:58Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17403336/ai-ux-patterns-user-trust"/>
    <content type="text"><![CDATA[<p><span class="featured">AI is still a black box to many users. If they don&rsquo;t understand how AI works, it&rsquo;s hard to trust the output. These UX patterns can help build user trust.</span></p><p>The number one, by-far biggest hurdle that we need to overcome in order for our <a href="https://www.telerik.com/blogs/ux-challenge-designing-ai-powered-user-interfaces" target="_blank">users to engage with the AI features</a> we&rsquo;re building is trust. </p><p>Right now, to the average user, AI is a black box. Many users simply do not understand, from a technical perspective, how AI works. When you don&rsquo;t understand how something works, it makes it very, very hard to trust the output. </p><p>On top of this, just about everyone who has interacted with an LLM (large language model) before has, at some point, seen them hallucinate. Even as the models keep getting better, we&rsquo;re still not at the point where we can claim that any tool will be 100% hallucination-free. There&rsquo;s always a chance&mdash;even if it&rsquo;s just a small one&mdash;that the AI will provide an incorrect response. How many times can a user see output that&rsquo;s clearly wrong and still trust it? </p><p>It&rsquo;s easy to think that the answer to this is to try to position the feature you&rsquo;re launching as the exception to the rule: &ldquo;Other AI tools might not be trustworthy, but ours is different&mdash;higher quality, safer, more reliable,&rdquo; so on and so forth. </p><p>However, not only is this questionably true (after all, not many of us are actually training our own models, so a lot of this is simply outside our control), but it&rsquo;s also an extremely difficult thing to sell your users on. In situations where we cannot promise truth, we have to go above and beyond to earn it. Our honesty about the current capabilities and limitations of AI will go a lot further with our users than the denial of any potential problems. </p><p>Rather than trying to convince users that our solution is inherently trustworthy, we can instead build in patterns that empower users to see when incorrect information is returned and give them the tools to correct or mitigate it. You know the saying &ldquo;trust but verify&rdquo;? That&rsquo;s the goal here. </p><h2 id="ux-pattern-citations">UX Pattern: Citations</h2><p>By citing the references in an AI-generated response and linking users directly back to the source material, we give users the information they need to validate AI output. The more a user is able to click through and see where an answer came from, the more they&rsquo;ll be able to trust the content&mdash;even if they don&rsquo;t check every source, every time. </p><p>In addition to allowing our users to vet the answers, citations also have a second important purpose: they allow users to repurpose the material in their own work while maintaining a trail of accuracy. This is important for their own credibility and reputation&mdash;after all, how often would <em>you</em> share content from an unverifiable source if you knew any errors would be ultimately attached to your own name? </p><p>Generating output for the user might be the last step in our process, but it&rsquo;s just the beginning for them. Users want to take that content and turn it into a report, an email, a campaign, a presentation. But if the output can&rsquo;t be cited and trusted, then it simply won&rsquo;t be used.</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-25-33-am.png?sfvrsn=2d0da58c_2" title="Screenshot 2026-07-23 at 10.25.33 AM" width="350" alt="Citations in Microsoft 365 Copilot AI" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-25-38-am.png?sfvrsn=ab9ffd8a_2" title="Screenshot 2026-07-23 at 10.25.38 AM" alt="Citations in the Progress website RAG-powered AI search " /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-25-45-am.png?sfvrsn=94a91d05_2" title="Screenshot 2026-07-23 at 10.25.45 AM" width="350" alt="In-line citations in ChatGPT" /></p><p>There are a handful of different ways we can implement this, and which one you pick will depend on the feature you&rsquo;re building and the context in which it&rsquo;s being used. </p><p>A few popular approaches include tooltips, in-line links and side panel reference windows. Tooltips will allow you to provide a small snippet of the relevant quote, which is great for increasing credibility. Links are, of course, ideal for when the content comes from an external source (like another webpage) as opposed to an internal source (like a document in a shared drive). If the feature you&rsquo;re building is meant to support more research-oriented work, you might consider adding a side panel where the user can explore the source material in more detail, positioning the AI assistant as more of a librarian than a subject matter expert. </p><h2 id="ux-pattern-action-plans">UX Pattern: Action Plans</h2><p>The other place where trust factors heavily into AI work is agentic workflows, where the AI is &ldquo;thinking&rdquo; and executing work on its own. This, understandably, can be pretty concerning for users depending on the stakes of the project and how easy or hard it is to roll back incorrect actions&mdash;which is when keeping the &ldquo;human in the loop&rdquo; really becomes crucial. </p><p>One of the best ways to help users trust these systems enough to use them is to show an action plan to the user and allow them to approve it before the agent begins work.</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-25-51-am.png?sfvrsn=628f44ba_2" title="Screenshot 2026-07-23 at 10.25.51 AM" width="350" alt="An action plan in the Claude agentic browser extension with actions for accepting or changing the plan" /></p><p>This has become a fairly common flow in many foundation models. If you&rsquo;re using agentic features in Claude or ChatGPT, then you will have seen it create a list of the steps it will take to accomplish a given task, then ask for your confirmation before beginning. </p><p>Of course, there are settings you can change to toggle this off or always allow it&mdash;which is important if you&rsquo;re going to be repeating a particular flow over and over and don&rsquo;t want to have to babysit it. (Spoiler alert: we&rsquo;ll talk more about permissions in the &ldquo;AI UX Patterns for Transparency&rdquo; article later in this series.) However, if no plan is ever shown to the user and an action happens without them understanding why or how, it&rsquo;s awfully hard for them to trust both the result of that action <em>and</em> the agent, itself. </p><h2 id="ux-pattern-ai-generated-content-markers">UX Pattern: AI Generated Content Markers</h2><p>There is understandably&mdash;and I would even argue, correctly&mdash;quite a bit of skepticism right now around whether or not content is AI-generated (and just in case you&rsquo;re curious: this post was 100% handwritten, haha). You&rsquo;ve probably seen exchanges online where someone shares a photo or video and another person is immediately commenting to tell them it&rsquo;s not actually &ldquo;real.&rdquo; When we spend so much of our time and energy second-guessing and investigating the content that&rsquo;s shared with us, it doesn&rsquo;t exactly foster an environment of trust. </p><p>For now, AI-generated content is highly polarizing. While some users have heavily leaned into using it in their daily lives, others will react to it negatively and dismiss it as &ldquo;slop.&rdquo; </p><p>The ability for AI to generate text, images and video that is nearly indistinguishable from human-created work is <em>very</em> new, and for many users it&rsquo;s something that still feels uncanny and unsettling. I don&rsquo;t say this to start any kind of debate. While it seems harsh to say it, our own personal opinions on AI-generated content don&rsquo;t matter much in this context. What&rsquo;s more important is the awareness that <em>our users</em> will react to AI-generated content in a wide variety of ways, and not all of those ways will be positive. </p><p>So, if we want to include AI-generated content in our applications and we&rsquo;re not entirely sure how our users will feel about that, what can we do to retain their trust?</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-25-59-am.png?sfvrsn=fe4ba4db_2" title="Screenshot 2026-07-23 at 10.25.59 AM" width="350" alt="An example of the image analysis from Google&#39;s SynthID " /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-26-04-am.png?sfvrsn=73999ec9_2" title="Screenshot 2026-07-23 at 10.26.04 AM" alt="Steam&#39;s AI Generated Content Disclosure statement " /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-26-13-am.png?sfvrsn=2efd6268_2" title="Screenshot 2026-07-23 at 10.26.13 AM" alt="Instagram&#39;s AI content label " /></p><p>One of the easiest things is to just mark any AI-generated content as such. This can be as simple as a disclaimer in the app store description, a watermark on a photo or an asterisk at the end of a sentence. </p><p>When we do this, we remove the potential user perception of us trying to &ldquo;sneak&rdquo; AI-generated content into our software or somehow pull one over on them. If we&rsquo;re using AI and we think it&rsquo;s the right fit for our work, then there&rsquo;s no shame at all in designating where it&rsquo;s been used. </p><p>Depending on where the AI-generated content is being used, it also helps clue our users into aspects they may need to manually verify&mdash;rather than having to review everything as though it was AI-generated, if that&rsquo;s not actually the case.</p><p><strong>Read next: <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-clarity" target="_blank">AI UX Patterns for User Clarity</a></strong></p><img src="https://feeds.telerik.com/link/23065/17403336.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:2b3d4dbc-b9b3-475e-8a96-84e52a7175e6</id>
    <title type="text">The UX Challenge of Designing AI-Powered User Interfaces</title>
    <summary type="text">UX is how we bridge the gap between what we intended when we built our AI application and what the user actually … well, experiences. After all, it doesn’t really matter what our software can do if our users hate using it so much that they avoid it at all costs.</summary>
    <published>2026-07-23T16:52:52Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17385533/ux-challenge-designing-ai-powered-user-interfaces"/>
    <content type="text"><![CDATA[<p><span class="featured">UX is how we bridge the gap between what we intended when we built our AI application and what the user actually experiences. It doesn&rsquo;t matter what our software can do if our users hate using it so much that they avoid it at all costs.</span></p><p>AI is a truly unique new technology: rapidly developing, and with <em>so much</em> potential to improve systems and software in ways that we couldn&rsquo;t have even dreamed of just a few years ago. </p><p>However, along with all that potential is no small amount of risk. AI&rsquo;s non-deterministic nature means that output can <em>wildly</em> range in quality, format, style and accuracy. On top of that, it requires entirely new types of interaction patterns to use. We&rsquo;ve seen the emergence of new vocabulary, techniques and sometimes entire roles to address that need! </p><p>For those of us who live and breathe this technology every day, concepts like prompt engineering, hallucinations, retrieval-augmented generation and so much more have become a regular part of life. But for the vast majority of our users, that simply isn&rsquo;t the case. </p><h2 id="the-developer-user-gap">The Developer / User Gap</h2><p>In any kind of technology, there&rsquo;s a gap between the developer&mdash;who has, by nature, become the subject matter expert&mdash;and the user. The technical literacy of the average software engineer is always going to be higher than the average user of said software. </p><p>That&rsquo;s where UX comes in. It&rsquo;s how we bridge the gap between what we intended when we built the application and what the user actually &hellip; well, experiences. After all, it doesn&rsquo;t actually matter what our software can do if our users hate using it so much that they avoid it at all costs. </p><p>Right now, AI has a serious UX problem. Our users are seeing AI features get added to basically everything right now&mdash;from their work software to their social media apps, right down to their computer and phone operating systems. But, as a wise technologist once said: &ldquo;Your scientists were so preoccupied with whether or not they could, they didn&rsquo;t stop to think if they should.&rdquo; </p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-17-46-am.png?sfvrsn=275bf709_2" style="max-width:100%;height:auto;" title="Screenshot 2026-07-23 at 10.17.46 AM" alt="Your scientists were so preoccupied with whether or not they could, they didn&#39;t stop to think if they should" sf-size="1297088" /></p><p>We&rsquo;re pushing users to adopt these new tools and features, but we&rsquo;re not making it easy to do so. It&rsquo;s common to see situations where a user is presented with a poorly designed AI feature they have only the barest idea how to use. Then, when they try it and it doesn&rsquo;t do what they wanted or expected it to do, they feel annoyed, off-put and negative about AI, generally. </p><p>The more times users try an AI feature and get subpar results, the less likely they are to engage with it again in the future&mdash;which means that as the creators of these features and software, we only have so many chances to get this right before our users disengage and stop trying at all. </p><p>In my personal opinion, the knowledge gap between developer and user when it comes to AI is one of the widest I&rsquo;ve ever seen. That makes it extremely hard for us to build AI-powered features that our users will actually get the full benefit from. </p><p>But, thankfully, this isn&rsquo;t the first time we&rsquo;ve had to introduce complex new technologies to our users. We have decades of user interface design history we can learn from! </p><h2 id="adapting-existing-patterns">Adapting Existing Patterns</h2><p>For example: when Macintosh introduced their graphical user interface, it was&mdash;like AI is now&mdash;something very different and unfamiliar to their users. A large part of their success and reputation was built on their ability to create a user experience that met users where they were. They borrowed terminology and user flows from real life, included lots of icons and visual representations, and walked users through how to get the most out of their computers. </p><p>Over time, as the average user became more comfortable and literate in the space, the UX evolved with them and we start to see more technical terms and fewer abstractions.&nbsp;</p><p>Look at the difference here between the Control Panels in Macintosh System 1 and System 6:</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-18-37-am.png?sfvrsn=4bfd5b46_2" title="Screenshot 2026-07-23 at 10.18.37 AM" width="400" alt="Macintosh System 1 Control Panel UI" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-18-55-ame0db6c62235741b4af34c62019c08c05.png?sfvrsn=58c2dd3_2" title="Screenshot 2026-07-23 at 10.18.55 AM" width="400" alt="Macintosh System 6 Control Panel UI " /></p><p>If you&rsquo;d presented a System 1 user with the words &ldquo;Rate of Insertion Point Blinking&rdquo; or &ldquo;RAM Cache,&rdquo; it would have been meaningless to them. Similarly, we see the low and high volume icons are gone in System 6, along with the turtle and rabbit speed icons&mdash;that kind of more literal depiction isn&rsquo;t needed anymore.</p><p>Right now, we&rsquo;re probably somewhere around System 3 in this (now very extended) metaphor of introducing AI to users. We may not need the turtle and rabbit icons anymore, but we also can&rsquo;t just assume they&rsquo;ll sit down with our AI software as experts.</p><p>The good news is that (unlike the System 1 Macintosh UI) we&rsquo;re not starting from scratch. Our users already have mental models about software usage that will carry over to what we&rsquo;re building&mdash;they just won&rsquo;t always map over exactly one-to-one.</p><p><strong>That&rsquo;s where we come in.</strong> As developers, it&rsquo;s our role to leverage patterns users are already familiar with, combine them in new ways and introduce them to our users gradually in a way that doesn&rsquo;t feel overwhelming. A good user experience will not only provide a user with the tools, but also guide them through how to use them.</p><p>For instance, let&rsquo;s consider an AI chat interface. From a purely UI perspective, chatting with an LLM is <em>almost</em>&mdash;but not quite&mdash;like chatting with another user. We&rsquo;ll be able to borrow some familiar patterns, like having the user&rsquo;s chats show up on one side and the AI&rsquo;s chats on the other, messages appearing above an input field with a send button, a scrollable message history and more. That gives our users a great jumping-off point as well as a lot of visual clues about how to start interacting with our AI chat.</p><p>However, the experience isn&rsquo;t quite close enough that we can just lift an existing interface for direct messages and repurpose it wholesale&mdash;a chat interface that was built for two people won&rsquo;t have the accommodations we need for things like adding reference sources, pausing or stopping an in-progress reply from the LLM, leveraging agentic tools or integrations, and more. </p><p>Those are the kinds of places where we need to adapt existing UX and UI patterns into something new. We have to be the bridge, helping our users transition into familiarity with AI experiences.</p><p>We can see the difference here. Compare this Copilot Research Agent new chat with the new Teams chat below:</p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-20-55-am.png?sfvrsn=449a87ed_2" title="Screenshot 2026-07-23 at 10.20.55 AM" alt="Microsoft 365 Copilot Researcher AI Chat UI " sf-size="430039" /></p><p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-07-23-at-10-21-05-am.png?sfvrsn=576b40af_2" title="Screenshot 2026-07-23 at 10.21.05 AM" alt="Microsoft Teams Direct Message Chat UI " sf-size="88462" /></p><p>Both have familiar aspects such as text boxes, the &ldquo;plus&rdquo; to attach files and so on, but the Teams chat assumes a much higher level of familiarity. It doesn&rsquo;t spell out any of the iconography used, and we don&rsquo;t see some of the elements intended to lower the barrier of entry (such as the examples, large text buttons or voice interaction options).</p><h2 id="can-t-we-just-ai-generate-this-">Can&rsquo;t We Just AI-Generate This?</h2><p>Before we really dive in, though, I think we have to address the elephant in the room: why not just have the AI create these solutions for us? Why do <em>we</em> have to be the ones who design and build these new patterns when we have technology that can generate interfaces for us now? </p><p>The problem with that is that an AI can only &ldquo;create&rdquo; things that already exist. It&rsquo;s fantastic for looking at existing common patterns and replicating them&mdash;but (as discussed) the new patterns for AI interfaces just don&rsquo;t exist yet. Or, at the very least, they&rsquo;re still being rapidly developed and changing all the time as the technology advances. </p><p>There&rsquo;s not a long history of standardized and familiar AI-related interfaces that can be referenced to solve this problem, so (at least for now) we have to solve this one on our own. Maybe that will change down the road&mdash;but for the time being, this is still a very human problem. </p><p>Additionally, as many folks (including our users) have begun to notice, the design an AI creates will be &hellip; well, a lot like <em>every other design</em> out there. </p><aside class="pquote"><style>.pquote {
float: right;
width: 200px;
font-size: 20px;
line-height: 1;
font-style: italic;
padding: 14px;
}
</style>
<blockquote><p>An AI-generated UI tends to look pretty darn average&mdash;and while that can be a good starting point, it&rsquo;s not usually a good ending point.</p></blockquote></aside><p>AI can reference and remix, but you&rsquo;re not going to get brand new concepts from it. An AI-generated UI tends to look pretty darn average&mdash;and while that can be a good starting point, it&rsquo;s not usually a good ending point. If you just need a quick landing page, it will probably do the trick. But since we&rsquo;re dealing with a whole new interaction mode that needs <em>more</em> attention paid to the UX rather than <em>less,</em> it&rsquo;s just not going to be enough to get us where we need to go at the quality level our users deserve. </p><h2 id="the-five-categories-of-ai-ux-priorities">The Five Categories of AI UX Priorities</h2><p>So: if we&rsquo;re going to build new patterns and new interfaces to help our users get the most value out of this technology, where do we start? </p><p>Well, like most things in design, it&rsquo;s best to start with the user&mdash;specifically, the user&rsquo;s problems. That means that when we&rsquo;re thinking about building our AI features, we need to be thinking about what challenges our users have with AI and the user flows that will mitigate those issues as much as possible. </p><p>From the user research I&rsquo;ve been doing and the users I&rsquo;ve spoken to, I&rsquo;ve grouped the main priorities into five categories: </p><ol><li><a href="https://www.telerik.com/blogs/ai-ux-patterns-user-trust" target="_blank">Trust</a></li><li><a href="https://www.telerik.com/blogs/ai-ux-patterns-user-clarity" target="_blank">Clarity</a></li><li><a href="https://www.telerik.com/blogs/ai-ux-patterns-user-control" target="_blank">Control</a> </li><li><a href="https://www.telerik.com/blogs/ai-ux-patterns-user-transparency" target="_blank">Transparency</a> </li><li><a href="https://www.telerik.com/blogs/ai-ux-patterns-show-meaningful-user-benefit" target="_blank">Meaningful Benefit</a> </li></ol><p>In this blog series, we&rsquo;re going to discuss each of these in depth&mdash;understanding the problems our users have when using AI, and looking at some examples of patterns or techniques we can employ to address them. By addressing each of these, we can create AI experiences that support our users through the introduction of this new technology and empower them to use it to its fullest potential.</p><p><strong>Read next: <a href="https://www.telerik.com/blogs/ai-ux-patterns-user-trust" target="_blank">AI UX Patterns for User Trust</a></strong></p><img src="https://feeds.telerik.com/link/23065/17385533.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:d13dae8a-acb0-47b9-b3ce-42c9cac5ec96</id>
    <title type="text">Question Everything: Why the Question Matters More Than the Answer</title>
    <summary type="text">Questions unlock better solutions. “How might we” is a powerful divergent thinking tool, especially when AI defaults to answers.</summary>
    <published>2026-07-15T20:26:12Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17380904/question-everything-why-question-matters-more-than-answer"/>
    <content type="text"><![CDATA[<p><span class="featured">Questions unlock better solutions. &ldquo;How might we&rdquo; is a powerful divergent thinking tool, especially when AI defaults to answers.</span></p><p>When my daughter spills her drink, she comes to me to tell me it happened.</p><p>In that moment, I have two options:</p><ul><li>Act: &ldquo;Go grab a towel and clean it up.&rdquo;</li><li>Ask: &ldquo;How do you think we can fix that?&rdquo;</li></ul><p>The first gets the mess cleaned the fastest. The second takes longer but lets her think.</p><p>She grabs paper towels, maybe uses her shirt. She asks for help, or she figures it out herself. Either way, she&rsquo;s not just following instructions. She&rsquo;s solving.</p><p>It&rsquo;s a small moment, but it captures something important about how we approach problems.</p><p>When we turn a problem into a question, something shifts. Our brains respond differently to questions than to instructions. We get more creative and more motivated. We find solutions we wouldn&rsquo;t have reached if we&rsquo;d just executed.</p><h2 id="the-push-for-execution">The Push for Execution</h2><p>In fast-moving product teams, that shift doesn&rsquo;t always happen naturally. We&rsquo;re under pressure with tight deadlines, sprints and bugs to fix. There&rsquo;s a push for execution. The problem gets defined, and a solution shipped. This is efficient but not necessarily effective.</p><p>I see it with clients too. There&rsquo;s a tendency to jump straight to conclusions. Create something, move to the next thing.</p><p>We&rsquo;ve manufactured the wrong sense of progress. We&rsquo;ve flattened our thinking to activity-based monitoring. We measure work done, not impact made.</p><p>And the systems we operate in make us fear being punished for slowing down. But slowing down doesn&rsquo;t have to be negative. It&rsquo;s adding depth and establishing foundations to build on.</p><p>I&rsquo;ve seen it happen more than once. A team delivers exactly what was asked. On time and according to spec. But the problem isn&rsquo;t solved. Not because of poor execution, but because questions were not asked.</p><p>The solution was locked in before the problem was understood.</p><h2 id="diverge-before-you-converge">Diverge Before You Converge</h2><p>This is where design thinking offers something valuable. Divergence and convergence.</p><p>Divergence is expanding. You open up the problem space, explore possibilities, challenge assumptions and resist the urge to settle too quickly.</p><p>Convergence is getting to the point. You bring constraints back in. Budget, technical feasibility, timeline. And you shape your exploration into something actionable.</p><p>Most teams are good at converging. They ship.</p><p>But divergence? That takes discipline. It means staying in the question longer than feels comfortable.</p><h2 id="how-might-we">How Might We ... ?</h2><p>A practical tool for divergence is the <em>how might we</em> method. It&rsquo;s simple. Take any problem and reframe it as a question starting with &ldquo;how might we.&rdquo;</p><p>The phrasing matters. <em>How might we</em> is optimistic without being naive. It assumes a solution exists but leaves the how open.</p><p>Here&rsquo;s what it looks like in practice.</p><ul><li><p>&ldquo;Users keep dropping off at checkout.&rdquo;<br /><em>How might we reduce the friction between cart and payment?</em></p></li><li><p>&ldquo;Our onboarding takes too long.&rdquo;<br /><em>How might we get new users to their first success faster?</em></p></li><li><p>&ldquo;Admins can&rsquo;t manage permissions at scale.&rdquo;<br /><em>How might we make it easier to give multiple people the right access?</em></p></li></ul><p>Each reframe does the same thing. It takes a complaint or observation and turns it into a space you can explore.</p><p>The problem stays the same. But the number of possible solutions grows. That expansion is where the real value lives.</p><h2 id="the-question-before-the-prompt">The Question Before the Prompt</h2><p>This matters even more now that AI has become part of how teams work.</p><p>AI is good at execution. Like generating code or drafting copy. It&rsquo;s a powerful convergence engine. But that&rsquo;s also the problem.</p><p>AI defaults to answers. Give it a problem, it will solve it immediately. It won&rsquo;t ask if it&rsquo;s the right problem. It won&rsquo;t explore alternatives.</p><p>That doesn&rsquo;t keep the frame open. Convergence without divergence is just fast guessing. You end up with the wrong sense of progress again. Shipping solutions to problems nobody questioned.</p><p>So the skill that matters most right now is one AI doesn&rsquo;t default to. Asking more questions. Keeping the frame open longer. Resisting the pull to converge before you&rsquo;ve explored.</p><p>Give AI a vague problem, you get a vague answer. Give it a sharp question, you get a sharper solution.</p><h2 id="takeaways">Takeaways</h2><p>The question mark might be the most underrated tool in your workflow. Not because questions slow things down. But because they open things up.</p><p>Before you assign, build or prompt, ask the question that reframes the problem:&nbsp;<em>How might we?</em></p><p>Because the quality of your answer will never exceed the quality of your question.</p><p><strong>Question everything. On purpose.</strong></p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">How Depending Leads to Independence</h4></div><div class="col-8"><p class="u-fs16 u-mb0"><a target="_blank" href="https://www.telerik.com/blogs/how-depending-leads-independence">True independence isn&rsquo;t the absence of dependencies.</a> It&rsquo;s an intentional integration. An assembly that&rsquo;s clear, chosen and changeable.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17380904.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:3ff2a0b3-8691-4d96-86da-ea2ef3472d6f</id>
    <title type="text">When the Time Is Right</title>
    <summary type="text">Priority tells you what matters. Timing tells you if the moment is right. Here’s why that distinction changes everything about how you build.</summary>
    <published>2026-07-09T13:18:49Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17375492/when-time-right"/>
    <content type="text"><![CDATA[<p><span class="featured">Priority tells you what matters. Timing tells you if the moment is right. Here&rsquo;s why that distinction changes everything about how you build.</span></p><p>A customer threatened to cancel. Full panic. A board meeting to discuss how to retain him, budget approved and allocated to honor his demands. A scrum team started fixing.&nbsp;I flew to the UK to sit with him.</p><p>We had redesigned the entire UI. Not a small fix. We completely overhauled the user experience. From a very old tool with toolbars to an application with a strip.</p><p>We didn&rsquo;t just move buttons to ribbons with tabs. We restructured the entire information architecture. Fixed, opinionated workflows that guided users through the critical steps to model complex geological concepts.</p><p>He hated it. He demanded a rollback.</p><p>I reserved time to interview him. Asked questions. Listened. Tried to sense his reality, his context, where he was coming from. How he was perceiving the changes.</p><p>What I discovered changed everything.</p><p>He wasn&rsquo;t even using the latest version. He hadn&rsquo;t tried the new UI at all. He had simply refused. While we moved on and developed the next generation of our software, he had not. He was still way behind. And somewhere at the back of the queue, feeling ignored and dismissed.</p><p>That feeling made him rage. But it also highlighted a bigger problem.</p><p>In the room next door, two junior geologists were being trained on the exact same concept. They loved it. The design was exactly what the team needed. What he needed too.</p><p>He was desperate for a transformation in his company. A way to step back from his expert role and become a guide for the younger generation. Once I explained the concepts, he understood. He was appreciative of the work. He was on board.</p><p>We almost rolled back an expensive, fundamental shift based on an emotional rant from a customer speaking from expired context.</p><p>It was never about the concept. It was about misunderstanding context.</p><h2 id="the-linearity-trap">The Linearity Trap</h2><p>A backlog is not a queue. It&rsquo;s a context-sensitive collection.</p><p>Every item in it was written at a specific moment, about a specific reality. That reality changes. The backlog doesn&rsquo;t update itself.</p><p>The linearity trap is treating it like a queue anyway. Adding new requests. Reorganizing. Managing delay. Shipping. Without ever asking: does this still belong in the collection?</p><p>The customer had been reporting improvements and bugs for a long time. But we moved on. We shipped. And while we did, he stood still. By the time his feedback reached the top of the queue, the context it was written in had long since changed.</p><p>The problem wasn&rsquo;t that we were behind. We were committing to work that was already outdated.</p><h2 id="delay-is-not-the-problem.-decay-is.">Delay Is Not the Problem. Decay Is.</h2><p>A lot of backlog management is really about managing time. Managing delivery. Focused on shipping as much high-quality work as possible by the promised date.</p><p>Managing delay is a conscious decision. It&rsquo;s about choosing when to push something back. That&rsquo;s prioritization. That&rsquo;s what I wrote about in the previous article.</p><p>But the bigger problem is decay.</p><p>Decay is what happens to the work you&rsquo;re not doing. While you&rsquo;re waiting, while you&rsquo;re delaying, what has been written down is eroding. Rusting. Because context expires.</p><p>It&rsquo;s like the best-before date on a package. By the time you grab it from the shelf, you need to check the date before you consume it.</p><p>A lot of backlogs are just queues constantly filled with requests, feedback and bug reports. Nobody checks the date. Nobody asks: is this still valid?</p><p>I&rsquo;ve seen old backlog items treated as still true when the context they described no longer existed. They were no longer worth pursuing. The more context you capture when you write them, the easier it is to later assess whether they still fit.</p><p>Something can be very old and still be good. But developing the sense to distinguish that is the work. Understanding whether it&rsquo;s expired or not. Whether it&rsquo;s still safe to consume.</p><p>In the UK, the right response would have been to delay any work on his requests. To first discover whether his feedback was based on expired context. Instead, urgency won. And decay nearly cost us everything.</p><h2 id="urgency-vs.-timing">Urgency vs. Timing</h2><p>The urgency that came up was really signaling a demand. Someone pushing. Pressure.</p><p>And under pressure, you don&rsquo;t always make the most strategic decisions. The board panicked. Money appeared. Time was freed up. Nobody stopped to check the return on investment, whether it was worth it. It was an emotional response.</p><p>That happens. We&rsquo;re humans. And that emotion is sometimes also why we close amazing deals and do great things for loyal customers. So it wasn&rsquo;t all wrong. Part of the response was also recognizing the loyalty of a customer who had been with us through harder times.</p><p>But urgency gets the attention. It drives the emotion. And what we need underneath it is judgment.</p><p>Timing is a readiness signal. It&rsquo;s not driven by pressure. It&rsquo;s driven by context.</p><ul><li>Is the customer ready? </li><li>Is the market ready? </li><li>Is the team ready? </li><li>Is the moment alive?</li></ul><p>Those are timing questions. Urgency can&rsquo;t answer them.</p><h2 id="compound-vs.-corrosion">Compound vs. Corrosion</h2><p>We&rsquo;re always looking for momentum. Shipping as much as we can, as fast as possible, without compromising quality.</p><p>But without sensing whether the time is right, we create progress without compounding.</p><p>Compounding is making sure what you ship ties into the next thing and builds over time into the desired version of your software aligned with your vision. Creating conditions so that what comes next makes sense.</p><p>The opposite is corrosion. Work that sits in the backlog long enough starts to corrode. And when you finally act on it, you might ship something that corrodes the foundation of your software rather than building it. Hurting not just momentum but overall quality.</p><p>When we made that big shift to the UI, we should have reassessed the entire backlog. Diagnosed it. Made sure there was no outdated work hiding in the queue because of it.</p><p>We didn&rsquo;t. And a decayed issue almost corroded the core concept.</p><h2 id="context-sensitivity">Context Sensitivity</h2><p>Why did feedback and previous user requests corrode? Because the timeframe wasn&rsquo;t short. That concept developed over multiple months. We should have been capturing the context shift and using it as a filter on our backlog to stay ahead of it.</p><p>But capturing context is the hard part.</p><p>The world moves on. Your market, client and economic reality change constantly. The technical reality shifts the moment you upgrade systems and build with new technologies. The context you&rsquo;re shipping into is constantly moving.</p><p>And on top of that, emotional states. Not everybody handles change well. Not everybody&rsquo;s personal context is aligned with where you&rsquo;re going.</p><p>You need to develop a sense to see those shifts.</p><h2 id="keep-a-human-in-the-loop">Keep a Human in the Loop</h2><p>AI is very good at capturing context. Writing it down. Cross-referencing it. Flagging patterns. It can help us see and track everything we can&rsquo;t manage on our own.</p><p>But the moment context is written down, it&rsquo;s already outdated. And managing that expiration date is a collaborative effort. AI can help cross-check against captured context, flag a customer as a potential churn risk, surface old backlog items that conflict with new ones.</p><p>What it can&rsquo;t do is sit in the room.</p><p>What I did with that customer&mdash;reserving time, asking questions, listening&mdash;that&rsquo;s a nuance. A human sense that becomes more important as we connect more and more data at greater and greater speed.</p><p>AI can read the signal. It can&rsquo;t always hear what&rsquo;s between the lines. The emotional rage that looks like a high-priority request but is really a loyalty problem. The developer who goes quiet in sprint planning. The feedback that reads as a bug report but is actually a cry for better onboarding.</p><p>That&rsquo;s not in the data. It&rsquo;s in the room.</p><h2 id="closure">Closure</h2><p>Timing isn&rsquo;t about managing deadlines. It&rsquo;s about reading whether the moment is right. Priority tells you what matters. Timing tells you whether now is the moment to act on it or not at all.</p><p>The backlog or data alone won&rsquo;t tell you that. You need to read the room. Develop that sense. Check the expiration date. Keep humans in the loop for the context AI can&rsquo;t capture.</p><p>We ship when it matters. We shred when it&rsquo;s expired.</p><p>On purpose. By design.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">How Depending Leads to Independence</h4></div><div class="col-8"><p class="u-fs16 u-mb0"><a target="_blank" href="https://www.telerik.com/blogs/how-depending-leads-independence">True independence isn&rsquo;t the absence of dependencies.</a> It&rsquo;s an intentional integration. An assembly that&rsquo;s clear, chosen and changeable.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17375492.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:2ec1f7bc-a277-4bcc-b3d7-ce4efd679c12</id>
    <title type="text">How Depending Leads to Independence</title>
    <summary type="text">True independence isn’t the absence of dependencies. It’s an intentional integration. An assembly that’s clear, chosen and changeable.</summary>
    <published>2026-07-01T13:19:44Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17371097/how-depending-leads-independence"/>
    <content type="text"><![CDATA[<p><span class="featured">True independence isn&rsquo;t the absence of dependencies. It&rsquo;s an intentional integration. An assembly that&rsquo;s clear, chosen and changeable.</span></p><p><strong>It depends.</strong></p><p>If you ever ask a design question, most likely this is the answer. <em>It depends.</em></p><p>It&rsquo;s true. Everything depends on something else. There&rsquo;s no black or white, right or wrong answer, because it always depends. This is the context you&rsquo;d need to understand. How it&rsquo;s related.</p><p>This applies to your <a href="https://www.telerik.com/blogs/stop-running-your-backlog-like-emergency-room" target="_blank">backlog</a> as well. In previous articles, we covered priority and timing. When does something deserve attention, and in what order do you pick up work. And even when you know what to pick up, when matters.</p><p>So let&rsquo;s say you know what work to pick up and when to pick it up, the question still worth asking is: what does it depend on, and is anything else depending on it?</p><p>We call this &ldquo;dependency management.&rdquo; I think that means more than a dependency graph. It&rsquo;s about relationships and context.</p><h2 id="the-regulatory-reflex">The Regulatory Reflex</h2><p>We often manage dependencies well as part of backlog management to mitigate or address risk. And there&rsquo;s a reflex, a regulatory reflex, that makes us lean toward risk avoidance.</p><p>A dependency gets seen or projected as a negative thing. That risk, the thinking goes, can then be mitigated by reducing dependencies.</p><p>I&rsquo;ve seen this a lot in product development. &ldquo;Dependency management&rdquo; became a synonym for <em>reducing</em> dependencies.&nbsp;Avoid the vendor. Build it yourself. Own the code, own the outcome. Right?</p><p>It sounds strategic. But it rests on the wrong definition of independence.</p><h2 id="does-true-independence-actually-exist">Does True Independence Actually Exist?</h2><p>Here&rsquo;s the question to ask yourself:&nbsp;<strong>Does true independence actually exist?</strong></p><p>The word <em>independence</em> literally means &ldquo;not to hang from.&rdquo;</p><blockquote><p><em>In</em> (not) + <em>pendere</em> (to hang).</p></blockquote><p>The whole concept is built on negation.</p><p>But you always depend on something. A framework, team, budget or a market. Even the time you have in a day.</p><p>The question isn&rsquo;t <em>whether</em> you depend. It&rsquo;s what you depend on and whether that dependency works.</p><p>Fortunately, there&rsquo;s another way to read that same prefix.</p><p>The <em>in-</em> in independence has another root. The one in <em>include</em>, <em>inject</em>, <em>integrate</em>, <em>insight</em>. <em>In</em> as <em>into</em>, <em>within</em>, <em>part of</em>. Not negation. <strong>Integration.</strong></p><p>Read that way, independence doesn&rsquo;t mean &ldquo;not hanging from.&rdquo; It means &ldquo;hanging in.&rdquo; Being part of something. Integrated into a larger system. Intentional.</p><p>That&rsquo;s a very different idea than avoidance.</p><p>You&rsquo;re not running from dependencies. You&rsquo;re choosing which ones to integrate into. Seeing them clearly. Selecting them deliberately. Keeping the freedom to shift them when the system needs to evolve.</p><p>Not the absence of dependencies. The presence of deliberate ones.</p><p>A purposeful assembly of parts. That&rsquo;s what we should mean when we say &ldquo;independent.&rdquo;</p><h2 id="a-new-definition-clarity-choice-change">A New Definition: Clarity, Choice, Change</h2><p>True independence is about intentional integration, based on three requirements:</p><ul><li><strong>Clarity:</strong> You can <em>see</em> what you depend on.</li><li><strong>Choice:</strong> You can <em>select</em> your dependencies deliberately.</li><li><strong>Change:</strong> You can <em>shift</em> them when you need to adapt to reality.</li></ul><p>Dependencies you see clearly, chose on purpose and can shift aren&rsquo;t risks. They&rsquo;re the assembly.</p><p>The risky ones are those you can&rsquo;t see, didn&rsquo;t choose and can&rsquo;t change. And those are often the ones created by chasing the wrong definition of independence in the first place.</p><h2 id="the-pain-of-the-wrong-definition">The Pain of the Wrong Definition</h2><p>I worked on an edge connectivity ecosystem for remotely operating oil rigs. The goal was to standardize how software ran at the edge. Authentication, data access, data streaming, etc. All the foundational components every new project needed.</p><p>We built those components once, so other software teams wouldn&rsquo;t have to rebuild them every time.</p><p>It was a strategic bet. I did a lot of the narrative work, high-stakes pitches, executive alignment, the whole thing. The argument was simple: consolidating common parts saves money, reduces waste and lets the company move faster.</p><p>The numbers worked. But the adoption didn&rsquo;t.</p><p>A lot of product teams resisted. Some flat-out refused. The cost-saving argument was easily offset by something they felt more acutely: the fear that being tied to a centralized platform would hold them back later. That when they needed to solve a new problem or make a different strategic choice, this dependency would be in the way.</p><p>They heard the pitch as: <em>Give up your freedom to build, and we&rsquo;ll give you efficiency.</em></p><p>And under the old definition of independence (the negation one), they were right to resist. We were asking them to depend on something they didn&rsquo;t fully control.</p><p>But that&rsquo;s not what was actually happening.</p><p>We weren&rsquo;t asking them to <em>give up</em> independence. We were asking them to <em>redefine</em> it. To stop measuring freedom by what they built themselves, and start measuring it by what they could deliberately depend on. Clearly, on purpose, with the ability to change.</p><p>The pain wasn&rsquo;t the dependency. The pain was the wrong definition.</p><h2 id="what-the-ecosystem-actually-offered">What the Ecosystem Actually Offered</h2><p>Before the platform, every team built authentication, data access and streaming from scratch. They depended on their own budget, their own developers, their own expertise. Their speed, their skill and their security were limited by what each individual team could pull off.</p><p>The result was scattered software. Reinventing the wheel. From a company perspective, it was waste: the same work, done badly, in parallel.</p><p>What the ecosystem offered wasn&rsquo;t fewer dependencies. It was <em>better</em> ones.</p><p>A centralized team with deep expertise. A dependency the company could see, manage and improve. The freedom to shift the underlying technology when something better came along, because the contract was clear and the boundaries were defined.</p><p>The product teams&rsquo; dependencies didn&rsquo;t shrink. They grew. But they became something the company could actually manage.</p><p>A purposeful assembly, with each part chosen.</p><h2 id="the-same-pattern-smaller-scale">The Same Pattern, Smaller Scale</h2><p>The same pattern showed up in our design system work.</p><p>Teams had been forking and falling out of sync, maintaining custom code originally built by an external agency. When the agency engagement ended, we kept the code, but not the expertise. Internal teams were on the hook for something they hadn&rsquo;t built.</p><p>The fix was the same shape as the platform shift: move from custom in-house code to a well-documented third-party framework. We migrated to Progress Kendo UI. The license fee was new but visible. The hidden internal cost, buried in cross-charges and undocumented maintenance, went away.</p><p>We even ran a hybrid model. Kendo UI for most components. Different libraries for charting and mapping if Kendo UI wasn&rsquo;t the best fit. More dependencies, technically. But each one chosen on purpose. Each one we could see and could change if needed.</p><p>Different definition.</p><h2 id="what-independence-actually-looks-like">What Independence Actually Looks Like</h2><p>The question was never <em>how do I become independent?</em> It&rsquo;s <em>what am I depending on, and does it work?</em></p><p>Independence isn&rsquo;t escape from dependence. It&rsquo;s intentional integration. Clear. Chosen. Changeable.</p><p>A purposeful assembly. That&rsquo;s what <em>independent</em> should mean. On purpose. By design.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">Stop Building Generic Software</h4></div><div class="col-8"><p class="u-fs16 u-mb0"><a target="_blank" href="https://www.telerik.com/blogs/stop-building-generic-software">Stop trying to build</a> what already exists. Start building what sets you apart.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17371097.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:4ddb4e81-ec4c-4642-a150-bfa02c199750</id>
    <title type="text">Design Systems, Tokens and AI</title>
    <summary type="text">AI can compress the time between a design decision and its implementation when design systems can be updated with tokens.</summary>
    <published>2026-06-25T15:28:52Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Hassan Djirdeh </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17367872/design-systems-tokens-ai"/>
    <content type="text"><![CDATA[<p><span class="featured">AI can compress the time between a design decision and its implementation when design systems can be updated with tokens.</span></p><p>Design systems have long been cornerstones of building consistent user interfaces. They provide teams with a shared vocabulary for colors, typography, spacing and more, so that every aspect of a product feels cohesive and consistent.</p><p>Creating and maintaining these systems has traditionally involved a significant amount of manual work, including defining hundreds of token values, keeping them in sync across codebases and navigating lengthy review cycles.</p><p><strong>AI is starting to change this</strong>. Tools now exist that can generate cohesive token sets from natural language descriptions, refine individual components without disrupting an entire theme and reduce the overhead of managing design systems at scale.</p><p>In this article, we&rsquo;ll explore how AI integrates with design systems and tokens, what the workflow looks like in practice and what this means for teams building products today.</p><h2 id="design-systems-and-tokens">Design Systems and Tokens</h2><p>A <a target="_blank" href="https://www.telerik.com/design-system/docs/">design system</a> is a collection of reusable components, guidelines and assets that enable a unified user experience across a product. Design tokens, on the other hand, are the smallest building blocks within that system. They are named values that store visual design attributes like colors, font sizes, spacing and borders in a central location.</p><p>Instead of hard-coding values throughout our CSS, we reference tokens (with the help of <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties">CSS custom properties</a>, for example) that can be updated from a single source of truth:</p><pre class=" language-css"><code class="prism  language-css"><span class="token selector"><span class="token pseudo-class">:root</span> </span><span class="token punctuation">{</span>
  <span class="token property">--color-primary</span><span class="token punctuation">:</span> <span class="token hexcode">#0058e9</span><span class="token punctuation">;</span>
  <span class="token property">--color-secondary</span><span class="token punctuation">:</span> <span class="token hexcode">#666666</span><span class="token punctuation">;</span>
  <span class="token property">--color-success</span><span class="token punctuation">:</span> <span class="token hexcode">#37b400</span><span class="token punctuation">;</span>
  <span class="token property">--color-warning</span><span class="token punctuation">:</span> <span class="token hexcode">#ffc000</span><span class="token punctuation">;</span>

  <span class="token property">--font-size-sm</span><span class="token punctuation">:</span> <span class="token number">0.75</span>rem<span class="token punctuation">;</span>
  <span class="token property">--font-size-md</span><span class="token punctuation">:</span> <span class="token number">0.875</span>rem<span class="token punctuation">;</span>
  <span class="token property">--font-size-lg</span><span class="token punctuation">:</span> <span class="token number">1</span>rem<span class="token punctuation">;</span>

  <span class="token property">--spacing-sm</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
  <span class="token property">--spacing-md</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
  <span class="token property">--spacing-lg</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><p>These CSS custom properties act as our token layer. When we need to change the primary color (e.g., <code>color-primary</code> in the example above) across an entire application, we update the token in one place, and the change propagates everywhere it&rsquo;s referenced. For a deeper look at how tokens work and the different types (global, alias, component-specific), check out our <a target="_blank" href="https://www.telerik.com/blogs/design-tokens-fundamental-building-blocks-design-systems">previous article on design tokens</a>.</p><h2 id="the-traditional-workflow-and-its-challenges">The Traditional Workflow and Its Challenges</h2><p>The typical process for creating a design system would look something like this:</p><ul><li>Designers define a set of tokens and visual guidelines in tools like <a target="_blank" href="https://www.figma.com/">Figma</a>.</li><li>Frontend engineers then translate those values into code (SASS variables, CSS custom properties or JSON token files).</li><li>Teams iterate through review cycles to make sure everything aligns.</li><li>When the design system needs to support a new brand or product variant, much of the above process starts over.</li></ul><p>This workflow has served teams well, but it comes with friction. Keeping tokens synchronized between design tools and codebases requires constant attention. Starting a new theme from scratch means confronting a blank canvas of hundreds of variables that all need to work together, and as design systems grow to support multiple products or teams, the maintenance burden grows with them.</p><p>These are the kinds of challenges that AI is well-positioned to address. Not by replacing the decision-making that goes into a design system, but by handling the mechanical work of generating, adjusting and maintaining the token values themselves.</p><h2 id="how-ai-changes-the-design-system-workflow">How AI Changes the Design System Workflow</h2><p>With AI, the shift is moving from &ldquo;manually define every value&rdquo; to &ldquo;describe intent, then refine.&rdquo; Instead of opening a blank stylesheet and deciding what <code>--color-primary</code> should be, then figuring out what <code>--color-primary-hover</code> and <code>--color-primary-active</code> need to be relative to that base, we can describe the aesthetic we&rsquo;re going for and <strong>let AI generate a cohesive set of tokens that all work together</strong>.</p><p>What makes this especially compelling is that modern AI tools, though not perfect, understand design principles! Instead of picking random hex values, these tools can apply color theory to create palettes with appropriate contrast ratios. Spacing scales follow consistent rhythms, and typography hierarchies keep heading sizes balanced relative to body text. The resulting token systems aren&rsquo;t just technically valid; with some guidance, they can be designed to work as a coherent whole.</p><p>This doesn&rsquo;t mean we hand off all creative control. The AI handles the heavy lifting of producing a complete, internally consistent token set, while we focus on the strategic decisions:</p><ul><li>Does this palette match our brand?</li><li>Does the typography hierarchy support readability for our audience?</li><li>Are the contrast ratios meeting our accessibility standards?</li></ul><p>AI shifts our energy from the tedious work of defining individual values to the more meaningful work of evaluating and directing the system as a whole.</p><h2 id="ai-powered-theme-generation">AI-Powered Theme Generation</h2><p>To see what we&rsquo;ve discussed above looks like in practice, we&rsquo;ll walk through an example using <a target="_blank" href="https://www.telerik.com/themebuilder">Progress ThemeBuilder</a>: a visual styling tool for customizing the theme of <a target="_blank" href="https://www.telerik.com/kendo-ui">Telerik and Kendo UI components</a>.</p><p>In the ThemeBuilder Generate panel, we can describe a theme in plain English. For instance, we might enter: <em>&ldquo;Generate a dark theme for an internal operations dashboard with charcoal surfaces, muted gray borders and subtle blue highlights for interactive elements. Keep the overall feel minimal and easy on the eyes during long work sessions.&rdquo;</em></p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2026/2026-06//themebuilder-generate.gif" alt="" /></p><p>Within seconds, the AI analyzes the description and produces a complete design system. It doesn&rsquo;t just set a few colors. It generates a full set of tokens spanning global values (the core palette), alias tokens (contextual mappings like <code>info</code>, <code>success</code>, <code>warning</code>) and component-specific tokens (button backgrounds, input borders, grid header styles). All of these tokens reference each other in a structured hierarchy, so a change to a global value cascades through the system in a predictable way.</p><p>The result is a production-ready set of tokens that we can export as CSS or SASS and bring directly into our project.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2026/2026-06//themebuilder-token-scss-export.png" alt="" /></p><p>In the exported output, we&rsquo;ll be able to see how the AI has generated a set of interconnected tokens. For example, the primary color would have corresponding hover and active states that maintain visual cohesion, and the base and on-base colors will enable readable contrast throughout the interface.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2026/2026-06//themebuilder-token-scss-export-2.png" alt="" /></p><h2 id="design-tokens-as-the-integration-layer">Design Tokens as the Integration Layer</h2><p>At the core of this entire workflow is a simple but important idea: design tokens are the integration layer between AI tools and our component libraries.</p><p>When AI generates a theme in ThemeBuilder, it isn&rsquo;t just producing abstract styling ideas; it produces concrete token values that flow directly into our CSS or SASS files, which our component library consumes.</p><pre class=" language-css"><code class="prism  language-css"><span class="token selector"><span class="token class">.button-primary</span> </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--kendo-color-primary<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--kendo-color-on-primary<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--kendo-border-radius<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--kendo-font-size<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.button-primary</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--kendo-color-primary-hover<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><p>In the above snippet, the button component doesn&rsquo;t know or care whether the token values were defined manually or generated by AI. It references the same custom properties either way. This separation is what makes AI-assisted design systems practical. The tokens act as a contract between the theming layer and the component layer, so the source of those values (human or AI) doesn&rsquo;t affect how they&rsquo;re consumed.</p><p>This also means we can mix approaches freely. We might generate a baseline theme with AI, manually override specific tokens for brand alignment, and then use component-level AI theming to refine individual components (a workflow supported by ThemeBuilder). The token layer absorbs all of these inputs into a single, consistent system.</p><h2 id="wrap-up">Wrap-up</h2><p>For enterprise teams that maintain design systems across multiple products, teams and technology stacks, AI compresses the time between a design decision and its implementation. Instead of manually auditing hundreds of tokens when a brand update happens, teams can regenerate or adjust themes from a central tool like <a target="_blank" href="https://www.telerik.com/themebuilder">ThemeBuilder</a> and export updated tokens to each project.</p><p>Governance still matters since teams still own the decisions around brand direction, accessibility compliance and cross-product consistency. But AI handles the mechanical work, so we can spend more time on strategy and less on manual token management.</p><p>Tokens remain at the center of it all. They are the shared language between AI generation tools and component libraries (i.e., the contract that keeps everything consistent regardless of how the values were produced).</p><p>Ready to see this in action? Explore <a target="_blank" href="https://www.telerik.com/themebuilder">Progress ThemeBuilder</a> and see how AI-powered theme generation can streamline the way we create and manage design systems. For more details on design systems and ThemeBuilder, check out some of the previous articles we&rsquo;ve written on this topic:</p><ul><li><a target="_blank" href="https://www.telerik.com/blogs/role-frontend-engineers-design-systems-part-1">The Role of Frontend Engineers in Design Systems, Part 1</a></li><li><a target="_blank" href="https://www.telerik.com/blogs/role-frontend-engineers-design-systems-part-2">The Role of Frontend Engineers in Design Systems, Part 2</a></li><li><a target="_blank" href="https://www.telerik.com/blogs/ai-wont-replace-design-engineers-but-will-change-how-work">AI Won&rsquo;t Replace Design Engineers, But It Will Change How We Work</a></li><li><a target="_blank" href="https://www.telerik.com/blogs/prompt-preview-publish-styling-telerik-ui-ai-themebuilder">Styling Telerik UI with AI in ThemeBuilder</a></li><li><a target="_blank" href="https://www.telerik.com/blogs/new-themebuilder-typography-ai-theming-enhancements">New in ThemeBuilder: Typography and AI Theming Enhancements</a></li></ul><img src="https://feeds.telerik.com/link/23065/17367872.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:fff4ff80-d670-4945-a0dd-4879a1372580</id>
    <title type="text">Stop Running Your Backlog Like an Emergency Room</title>
    <summary type="text">The 3P Triage Framework: why purpose and design come before urgency—and how that changes everything about backlog prioritization.</summary>
    <published>2026-06-22T16:04:33Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17365382/stop-running-your-backlog-like-emergency-room"/>
    <content type="text"><![CDATA[<p><span class="featured">The 3P Triage Framework: why purpose and design come before urgency&mdash;and how that changes everything about backlog prioritization.</span></p><p>You know the feeling. Another feature. Another bug. Another stakeholder request that can&rsquo;t wait. You fight the fire.</p><p>And somewhere at the end of the week, you look at your changelog and realize you&rsquo;re no closer to where you wanted to be.</p><p>That feeling is the ER mindset. And if you&rsquo;re building software, managing a product or owning a business, there&rsquo;s a good chance it&rsquo;s running your backlog.</p><h2 id="the-er-is-not-the-problem">The ER Is Not the Problem</h2><p>The emergency room excels at prioritization under pressure. Triage nurses make life-or-death decisions in under 60 seconds. They sort by urgency and severity. They don&rsquo;t treat the loudest patient first. They treat the one who needs it most.</p><p>But here&rsquo;s what often gets missed: the ER is part of a bigger system.</p><p>A hospital doesn&rsquo;t only treat emergencies. It prevents emergencies before they happen and treats patients who need real care. The ER is one room in a much larger building. A dedicated room with a purpose.</p><p>The problem isn&rsquo;t the ER. The problem is when your entire backlog becomes one.</p><p>When everything is urgent, nothing is. You respond. And respond. And respond. And the work that deserves real attention&mdash;the strategic work, the preventive work, the work that would stop the emergencies from happening in the first place&mdash;never gets done.</p><h2 id="what-the-er-gets-wrong">What the ER Gets Wrong</h2><p>The ER triages everyone who walks through the door. That&rsquo;s by design. It has to.</p><p>But your backlog shouldn&rsquo;t.</p><p>Most prioritization frameworks&mdash;like the Eisenhower Matrix, MoSCoW and RICE&mdash;jump straight to scoring. Urgency. Importance. Effort. Impact. They assume that everything entering the system deserves to be evaluated.</p><p>That is an expensive assumption. Because most backlogs are approached from an operational perspective. What&rsquo;s urgent. What&rsquo;s important. What&rsquo;s next. Useful, but it skips the bigger picture. The vision, the version you&rsquo;re building toward.</p><p>And that&rsquo;s exactly what you need to ask: <em>Should this be in the system at all?</em></p><h2 id="the-3p-triage-framework">The 3P Triage Framework</h2><p>This is what I call the 3P Triage Framework. Purpose. People. Profit. Three-stage triage. Each one a filter before the next.</p><h3 id="purpose">Purpose</h3><p><strong>Purpose</strong> is the viability check.</p><p>&ldquo;On purpose&rdquo; means the work is intentionally aligned with where you&rsquo;re going. Not just relevant. Directional. Walking the line toward what you&rsquo;re actually building.</p><p>&ldquo;By design&rdquo; means you have a clear version defined that you&rsquo;re building today. Not someday. Not &ldquo;we could.&rdquo; Clarity on what version of the vision you are releasing next. One check. One big question:</p><ul><li>Is it on purpose and by design? Yes / No</li></ul><p>If the answer is no, the item doesn&rsquo;t fit. It gets filtered out before it&rsquo;s ever scored. You assign it to a future version or remove it altogether.</p><p>This is an important step to add in backlog triage and the one often skipped. Without it, you triage everything. And when you triage everything, you&rsquo;re back in the ER.</p><h3 id="people">People</h3><p><strong>People</strong> is the desirability check. This is where urgency and importance come in.</p><p>How critical is this right now? What&rsquo;s the impact if we don&rsquo;t act? Who needs it? What does it unlock or block?</p><p>This is the proven system. The meat of prioritization. Eisenhower had the right instinct here. The problem wasn&rsquo;t the framework. It was applying it without context.</p><p>When every item in your backlog has already passed a purpose check, urgency and impact become meaningful signals. When they haven&rsquo;t, everything feels urgent.</p><p>Score both on a simple scale:</p><ul><li>Urgency: Low / Medium / High / Critical</li><li>Importance: Low / Medium / High / Critical</li></ul><h3 id="profit">Profit</h3><p><strong>Profit</strong> is the feasibility check. The final lens of reality.</p><p>Can we actually do this? What&rsquo;s the effort? What&rsquo;s the risk? What might we break, slow down or delay by taking this on? What do we gain? What&rsquo;s the return on investment?</p><p>Not just &ldquo;can we build it?&rdquo; but &ldquo;can we afford to build it right now, given everything else?&rdquo; And is it profitable to do so?</p><p>Size up all three:</p><ul><li>Effort: S / M / L / XL</li><li>Risk: S / M / L / XL</li><li>Revenue: S / M / L / XL</li></ul><p>I&rsquo;ve seen teams spend a sprint fixing a bug that affected three users, while a performance issue slowing down everyone quietly compounded in the background. I&rsquo;ve seen initiatives invented to add capabilities to a part of the product our vision was trying to make obsolete in the industry.</p><p>Sometimes the most strategic move is removing something entirely. Maximize work <strong>not</strong> done.</p><p>With this 3P Triage Framework, you now know the value, the priority of a task. But when do you work on it?</p><h2 id="priority-is-not-order">Priority Is Not Order</h2><p>This is the distinction that changes how you use all of this.</p><ul><li><strong>Priority</strong> is an understanding of value. It tells you what matters most.</li><li><strong>Order</strong> is a commitment to act. It tells you what&rsquo;s next.</li></ul><p>They are not the same thing.</p><p>A low-priority item can hold a high order position, because of timing, dependencies or readiness. A high-priority item might sit lower in the order because the conditions aren&rsquo;t right yet. Confusing priority with order is where backlogs fail.</p><p>When they&rsquo;re treated as the same thing, urgency drives execution. Again. Technical debt never gets solved. Prevention never gets resourced. You&rsquo;re back building a response system instead of a product.</p><p>And the emergencies keep coming. Because nothing is preventing them.</p><h2 id="closure">Closure</h2><p>The ER isn&rsquo;t the problem. The ER mindset is. The emergency room responds to urgency. Your backlog shouldn&rsquo;t.</p><p>Real triage starts with a check: Is this aligned with our purpose? Does it fit the design we have? Only then does urgency and impact matter. Only then does feasibility make it worth it.</p><p>That&rsquo;s the difference between a team that responds and a team that builds. On purpose. By design.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">Out of Control: A Design Guide for Alarm Management </h4></div><div class="col-8"><p class="u-fs16 u-mb0">Alarms are about actions, not just signals. Design for safety means <a target="_blank" href="https://www.telerik.com/blogs/out-control-design-guide-alarm-management">designing the full alarm lifecycle.</a> The goal isn&rsquo;t awareness&mdash;it&rsquo;s response.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17365382.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:5c3a107b-0444-4d8f-a104-97f53edd0760</id>
    <title type="text">How a 6-Person Team Shipped an AI-First Platform with KendoReact</title>
    <summary type="text">For teams building AI-driven applications with complex workflows, treating the UI layer as infrastructure can dramatically reduce friction as the product evolves. For Icanpreneur, KendoReact became that foundation.</summary>
    <published>2026-05-28T14:47:38Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17349957/how-a-6-person-team-shipped-an-ai-first-platform-with-kendoreact"/>
    <content type="text"><![CDATA[<p><span class="featured">For teams building AI-driven applications with complex workflows, treating the UI layer as infrastructure can dramatically reduce friction as the product evolves. For Icanpreneur, KendoReact became that foundation.</span></p><p>Wiring up an LLM endpoint takes an afternoon; the harder engineering problem is building a UI layer that can absorb the inherent unpredictability of AI without introducing layout thrashing, inconsistent interaction patterns or sprawl that a small team can't maintain. </p><p>That's the problem Icanpreneur solved with KendoReact. </p><blockquote>&ldquo;The hard part with AI is not just calling a model &ndash; it&rsquo;s designing complex, trustworthy workflows around it. That&rsquo;s where KendoReact helped a lot.&rdquo; </blockquote><p><a href="https://www.icanpreneur.com/">Icanpreneur&rsquo;s platform</a> orchestrates guided, AI-assisted workflows that blend business logic, structured data and real-time feedback into a familiar, approachable experience. Users move through Lean Canvas modeling, validation flows and strategic planning steps with AI augmenting their thinking along the way. They&rsquo;re now used not only by early-stage founders but also by accelerators, innovation hubs and product teams inside organizations such as Founder Institute, Campus X, Science Park Graz, ABLE Activator, Sofia Tech Park, Visa Innovation Program Europe and Telerik Academy&rsquo;s Upskill Product Management program. </p><p>Raw AI output can be unpredictable. Without a stable, consistent UI foundation, that translates into friction and mistrust. The consistency, predictability and performance of <a href="https://www.telerik.com/kendo-react-ui">KendoReact</a> in the UI layer turned the output of Icanpreneur&rsquo;s AI assistant, IVA, into something usable and trustworthy. For Icanpreneur&rsquo;s six-person team, KendoReact was the infrastructure that made AI usable at scale. </p><h2>Icanpreneur&rsquo;s Architecture </h2><p>At a high level, Icanpreneur&rsquo;s platform is structured as a layered system that separates UI composition and user interaction, server / API management and LLM orchestration.</p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-05-28-at-9-44-37-am.png?sfvrsn=127900_2" height="844" style="max-width:100%;height:auto;" title="Screenshot 2026-05-28 at 9.44.37 AM" width="1016" alt="A graphic depiction of the frontend architecture " sf-size="411556" /><p>KendoReact is the core of the Icanpreneur UI layer, allowing them to guide users through complex multi-pane screens, support long-running workflows with consistent UI patterns and handle advanced multi-step journeys without overwhelm. Every major module (Lean Canvas, conversational interview console, go-to-market editor, persona builder) is composed from the same KendoReact primitive set, themed consistently and governed by the same layout contracts. That decision paid compounding dividends as the product scaled. </p><p>In an AI-first platform, it can be tempting to start thinking about the UI as set dressing; just a thin layer over the APIs to make things &ldquo;look pretty&rdquo; for the users. However, AI interaction patterns are still very new and unfamiliar to many users. A UI that naturally folds AI into the user experience can be a real differentiator in the competitive market. </p><blockquote>&ldquo;Founders in partner programs started telling us that the interview, insights and go-to-market flow &lsquo;feels like one tool &ndash; simple and intuitive, not five stitched together.'&rdquo; </blockquote><p>AI technology is impressive but UI engineers are still the ones who translate that potential into true value for the user. In Icanpreneur&rsquo;s case, they needed stable layout primitives, reliable form controls and high-performance data visualization components &ndash; all of which had to present AI output reliably (while responses were streaming, partial or evolving) without triggering unnecessary re-renders or layout shifts. KendoReact provided that and more, empowering the team to focus their effort on user experience, business logic and AI orchestration. </p><h3>Composability as a Force Multiplier </h3><p>One of the most important architectural decisions was treating KendoReact not as a collection of finished widgets or mere building blocks to be combined but as true UI infrastructure. KendoReact powers everything from research dashboards and conversational interview consoles to mini-CRMs and multi-step go-to-market editors.</p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-05-28-at-9-45-10-am.png?sfvrsn=1b568e58_2" height="802" style="max-width:100%;height:auto;" title="Screenshot 2026-05-28 at 9.45.10 AM" width="1370" alt="A screenshot of the Icanpreneur interface, built with KendoReact components" sf-size="418054" /><p>Foundation pieces were combined to create higher-order workflows that guide users through their interactions with IVA. Rather than building custom UI for each flow, the team defined composable patterns built on KendoReact primitives. For example, the multi-step validation flow reused the same layout + navigation structure, AI feedback panels reused consistent container and typography patterns and interview summaries reused standardized layout and card structures. Because the Icanpreneur team didn&rsquo;t need to design complex new interaction patterns for each additional feature, they were able to implement quickly and iterate fast &ndash; smoothly layering their AI workflows on top of KendoReact&rsquo;s component system. </p><h3>Consistent UX for Novel AI Workflows </h3><p>For Icanpreneur users, this meant that they never had to open a page and feel unsure of where to go or what to do next &ndash; even though the AI-powered technology may be new, it leveraged familiar and consistent patterns to guide them through the experience. </p><blockquote>&ldquo;Because all the AI-driven experiences reuse the same KendoReact components as the rest of the app, they behave in a predictable way. Users don&rsquo;t have to &lsquo;learn' a new interface just because AI is involved &ndash; it feels like one coherent workspace.&rdquo; </blockquote><h3>Design-to-Code Fidelity </h3><p>With KendoReact, Icanpreneur designers and engineers worked from the same component language, which meant no translation layer between design and implementation, no pixel-chasing and no divergence between what's mocked and what ships. Designers also created a custom design system using the <a href="https://www.telerik.com/figma-kits">Kendo UI Figma Kits</a> and the <a href="https://www.telerik.com/design-system/docs/">Progress Design System Kit</a>, which greatly reduced the time needed to create mockups and new pages. </p><blockquote>&ldquo;Using the Kendo UI Figma Kits and a custom Kendo theme, we aligned design and development from day one. Most new features now start as a quick sketch in our KendoReact-based design system and turn into a working screen in days instead of weeks.&rdquo; </blockquote><h3>Increased Development Speed </h3><p>AI-assisted workflows evolve quickly: new steps get added, feedback formats change and validation criteria expand. Because KendoReact components are extensible and <a href="https://www.telerik.com/kendo-react-ui/components/styling">themeable</a>, the Icanpreneur team could meet these challenges while still preserving UX consistency. As workflows grew, the UI layer remained adaptable; less time debugging or re-writing UI logic meant faster revision cycles and more shipped features. </p><blockquote>&ldquo;New workflow-style features (such as a new research flow or AI-assisted editor) now typically go from idea to shipped version in days instead of weeks, because we mostly compose existing KendoReact patterns instead of building UI from scratch.&rdquo; </blockquote><h2>The UX of AI </h2><p>Some of the biggest challenges in AI-first applications are handling uncertainty (usually in the form of partial / still evolving responses) and guiding users through new workflows. The Icanpreneur team leveraged KendoReact&rsquo;s design tools to create UX patterns that integrate AI feedback into existing, structured UI flows, so users are never left wondering &ldquo;what now?&rdquo;.</p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-05-28-at-9-46-59-am.png?sfvrsn=e6e4d053_2" height="836" style="max-width:100%;height:auto;" title="Screenshot 2026-05-28 at 9.46.59 AM" width="1370" alt="A screenshot of the Icanpreneur interface, built with KendoReact components" sf-size="477986" /><p>One of the most unique features of Icanpreneur is their Synthetic Customer Interview feature, which allows their AI assistant, IVA, to answer questions as though it was a potential customer in their target market. Not all teams have easy access to customers to run interviews with, so this allows founders to &ldquo;stress-test&rdquo; their hypotheses quickly across multiple scenarios. That output helps them refine their questions and assumptions before talking to real people. Afterwards, IVA reviews all the data (across both real and synthetic customer interviews) to summarize, highlight patterns and extract quotes and evidence that can be leveraged in personas and further market research. </p><blockquote>&ldquo;When we designed IVA, the conversational interview console and the research workspace, we could prototype and ship quickly because we already had chat-style layouts built from existing KendoReact <a href="https://www.telerik.com/kendo-react-ui/components/layout">Layout</a> and <a href="https://www.telerik.com/kendo-react-ui/components/form">Form</a> components, multi-step flows for things like research setup and go-to-market editors and reusable <a href="https://www.telerik.com/kendo-react-ui/components/layout/expansionpanel">Panels</a>, <a href="https://www.telerik.com/kendo-react-ui/components/layout/drawer">Drawers</a>, <a href="https://www.telerik.com/kendo-react-ui/components/dialogs/dialog">Dialogs</a> and <a href="https://www.telerik.com/kendo-react-ui/components/grid">Data Grids</a> for displaying AI outputs, suggestions and insights aggregation&rdquo; </blockquote><p>Using KendoReact meant that not only could they leverage these familiar user patterns &ndash; but also that common AI concerns (such as slow, partial or unexpected responses) could be handled with UI structures and error responses that users already knew how to interact with. </p><h2>Performance and Scalability </h2><p>Icanpreneur workflows are complex, multi-stage journeys. Moving from idea to hypothesis, validating with AI or human-led interviews, identifying patterns and extracting valuable feedback, generating personas and finally creating landing pages or pitch decks &ndash; any one of these alone would be demanding but all together they offer a true development challenge. Each step builds upon the previous and the context must be preserved as the user moves between them. Without careful performance engineering, rendering and re-rendering these views would quickly degrade the user experience. </p><p>AI workflows can introduce frequent state updates as responses stream in or evolve - for example, when IVA synthesizes interview insights or drafts positioning. In poorly structured UIs, this can lead to layout thrashing or lag. However, these updates render inside structured, well-optimized KendoReact components, so the Icanpreneur UI remains stable.</p><img sf-image-responsive="true" src="https://www.telerik.com/sfimages/default-source/.net-maui-aiprompt/screenshot-2026-05-28-at-9-47-32-am.png?sfvrsn=c831f8dc_2" height="818" style="max-width:100%;height:auto;" title="Screenshot 2026-05-28 at 9.47.32 AM" width="1380" alt="A screenshot of the Icanpreneur interface, built with KendoReact components" sf-size="752777" /><p>As features accumulate, custom CSS and one-off component implementations are a common source of bundle bloat and regression risk. At Icanpreneur, new features and modules all plug into the same KendoReact UI system (rather than introducing new patterns and components). That allows even a small team to control UI sprawl and manage bundle growth. Custom CSS &ndash; a common pain point for fast-growing applications &ndash; is significantly reduced and centralized, because the UI is themed consistently. This kept initial load times reasonable even as the feature surface expanded. </p><blockquote>&ldquo;When we introduce new AI-driven experiences, they use the same KendoReact components, so we see far fewer UI regressions. That made it much easier to roll out new AI features without exploding our QA surface.&rdquo; </blockquote><p>That smaller, bounded QA surface meant faster turnaround and faster time to ship, while the lower complexity means that the small team was able to manage the expedited growth without being overwhelmed. New features that reuse existing KendoReact components inherit known-good behavior, so regression risk didn't scale with feature additions. </p><p>KendoReact&rsquo;s components are designed for high-density, data-heavy enterprise applications; no reinvention (or re-optimization) was required even for complex components like grids, forms and dialogs. KendoReact reduced the need to solve hard performance problems manually, allowing Icanpreneur to access enterprise-level quality with a startup-size team. </p><h2>Icanpreneur: Powered by KendoReact </h2><p>Icanpreneur began as a structured way to guide founders from idea to product-market fit. Today it operates as a full AI co-founder, with IVA empowering entrepreneurs to ideate, validate and grow their companies as a trusted partner. </p><p>By treating the UI layer as infrastructure and building on KendoReact from day one, the team was able to: </p><ul><li>Scale complex, AI-driven workflows with consistency </li></ul><ul><li>Ship new features rapidly without fragmenting UX </li></ul><ul><li>Deliver a coherent experience across classic and AI-powered screens </li></ul><p>For teams building AI-driven workflows, the UI layer is crucial: it's what determines whether AI output becomes a usable, trustworthy product or a source of friction. Icanpreneur's architecture is a case study in treating that layer seriously from day one. Or, as the Icanpreneur team said themselves: </p><blockquote>&ldquo;A six-person core team is able to maintain and evolve a fairly large, AI-first product (research, interviews, personas, positioning, landing pages, sales decks, etc.) without a separate &ldquo;component team&rdquo; or design system squad &ndash; KendoReact is that system for us.&rdquo; </blockquote><p>For teams building AI-driven applications with complex workflows, treating the UI layer as infrastructure can dramatically reduce friction as the product evolves. For Icanpreneur, KendoReact became that foundation: explore how KendoReact could become that foundation for your team, as well.</p><img src="https://feeds.telerik.com/link/23065/17349957.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:78e837f7-ae0c-4d36-a64b-f2f682cf9e0d</id>
    <title type="text">Design Principles Unpacked, No. 5: Contrast</title>
    <summary type="text">Every design principle in this series has been about one thing: managing differences on purpose. Contrast is the thread that ties them all together.</summary>
    <published>2026-05-28T13:17:15Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17349929/design-principles-unpacked-no-5-contrast"/>
    <content type="text"><![CDATA[<p><span class="featured">Every design principle in this series has been about one thing: managing differences on purpose. Contrast is the thread that ties them all together.</span></p><p>If you want to master one thing in design, master this.</p><p>Not layout, color or typography. <strong>Contrast.</strong></p><p>Because every design decision you&rsquo;ll ever make is a decision about contrast. Managing the differences.</p><h2 id="a-dashboard-with-sliders">A Dashboard With Sliders</h2><p>Designing is a bit like a mixing board. Every element has properties you can dial up or down. Size. Weight. Color. Spacing. Position.</p><p>When you move a slider, you&rsquo;re changing its relationship to everything around it. That is contrast.</p><p>And like any relationship, it only works when the differences serve a purpose.</p><p>Slide everything to the center and you get a flat design. Slide everything to the extremes and you get noise.</p><p>But find the right positions&mdash;some high, some low, some barely there&mdash;and the design works.</p><p>The best designers I&rsquo;ve worked with don&rsquo;t follow all the rules. They play with contrast the way a musician plays with sounds. They know when to push a slider up and when to pull it back.</p><h2 id="differences-that-mean-something">Differences That Mean Something</h2><p>Here&rsquo;s what most people miss about contrast: it&rsquo;s not about making things look different. It&rsquo;s about making differences mean something.</p><ul><li>A bigger heading isn&rsquo;t just bigger. It means, <em>this matters first</em>.</li><li>A muted label isn&rsquo;t just subtle. It means, <em>this can wait</em>.</li><li>Extra whitespace isn&rsquo;t just empty. It means, <em>breathe here</em>.</li></ul><p>Without intent, contrast is noise. With intent, contrast is communication.</p><p>That&rsquo;s the difference between a designer who arranges and a designer who composes.</p><h2 id="the-thread-through-this-series">The Thread Through This Series</h2><p>In this series, we&rsquo;ve unpacked principles that designers use every day. Alignment. Hierarchy. Affordance. Balance.</p><p>Each one looked different on the surface. But underneath, they&rsquo;ve all been about the same essence: contrast.</p><p>Alignment is about orienting to a guideline. When elements align, their differences become manageable. The chaos reduces. You can start to see the structure. Alignment works by <em>reducing</em> contrast&mdash;bringing things closer to a shared reference so the design feels cohesive.</p><p>Hierarchy does the opposite. It introduces difference on purpose. It separates what matters first from what can wait. A bold heading next to body text isn&rsquo;t just styling&mdash;it&rsquo;s a decision about priority. Hierarchy works by <em>increasing</em> contrast so the eye knows where to go.</p><p>Affordance makes purpose visible. A button that looks pressable, a handle that looks pullable&mdash;these work because they stand out from their surroundings just enough to signal what they&rsquo;re for. Affordance works by <em>emphasizing</em> contrast so action becomes obvious.</p><p>And balance&mdash;or rather, harmony&mdash;composes all of it. It doesn&rsquo;t flatten differences. It manages them. It asks whether each element is contributing to the whole, not whether everything has settled down. Harmony works by <em>orchestrating</em> contrast so differences collaborate instead of compete.</p><p>Every principle in this series has been a different way of using contrast. Reducing it. Increasing it. Emphasizing it. Orchestrating it.</p><p>Contrast is the key to good design.</p><h2 id="beyond-design">Beyond Design</h2><p>The more I design businesses, the more I see it: Good design is about managing change. The delta. The difference.</p><p>Every improvement is a contrast. Where you are versus where you want to be. The current state versus the intended one.</p><p>That&rsquo;s what designers do. We don&rsquo;t just make things look good. We make decisions about difference. We move sliders. We create the contrast that communicates purpose.</p><p>The people who stand out aren&rsquo;t louder than everyone else. They&rsquo;ve learned to leverage contrast. When to emphasize. Or when to step back. Conscious contrast.</p><p>That&rsquo;s design.</p><h2 id="the-wisdom-in-contrast">The Wisdom in Contrast</h2><p>Design is the art of managing differences on purpose.</p><p>That&rsquo;s the sentence I keep coming back to. Because it doesn&rsquo;t just describe what designers do. It describes what thoughtful people do.</p><p>So the next time you look at a design&mdash;a layout, a team, your life&mdash;don&rsquo;t just look at the elements.</p><p>Look at the differences between them. That&rsquo;s where you play with it.</p><p>On purpose. By design.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">Workflows in the Age of AI: How Design &amp; Development Workflows Changed in 2025&mdash;and What Comes Next</h4></div><div class="col-8"><p class="u-fs16 u-mb0"><a target="_blank" href="https://www.telerik.com/ai-design-development-workflows-report-2025">Check out our designer-developer survey report.</a> It&rsquo;s a look back at how AI reshaped collaboration in 2025&mdash;and what it means for teams, tools and roadmaps in 2026.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17349929.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:7111c2e6-ad81-4433-b3d6-85e3d9e6e745</id>
    <title type="text">Design Principles Unpacked, No. 4: Balance</title>
    <summary type="text">Balance creates stability, but it's not the finish line. Harmony composes differences toward a shared purpose—in layouts, teams and life.</summary>
    <published>2026-05-07T17:12:01Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17336318/design-principles-unpacked-no-4-balance"/>
    <content type="text"><![CDATA[<p><span class="featured">Balance creates stability, but it's not the finish line. Harmony composes differences toward a shared purpose&mdash;in layouts, teams and life.</span></p><p>Balance is one of those principles everyone talks about, but few question. To be honest, it might be the most subjective principle designers use. It&rsquo;s definitely the one where I&rsquo;ve said in the past: &ldquo;balance feels off.&rdquo;</p><p>And balance matters. It reduces chaos and creates stability. Without balance, design becomes overwhelming and distracting.</p><p>So balance isn&rsquo;t wrong. But I think it&rsquo;s incomplete.</p><p>Because balance focuses on stability. Reducing tension between elements until everything feels still.</p><p>And that focus on stillness is costly. It ignores the reason why you&rsquo;re designing. It can dismiss the goal in favor of calmness.</p><h2 id="the-value-of-balance">The Value of Balance</h2><p>So, balance does a lot of things well.</p><p>Balance is the principle that keeps design from falling apart. It gives structure. It prevents visual distraction. It makes layouts feel polished.</p><p>When a design feels chaotic, balance is usually what&rsquo;s missing.</p><p>In life, it&rsquo;s the same. Balance is what keeps a team from burning out. What keeps a conversation from becoming a monologue.</p><p>Balance is necessary. But it&rsquo;s not enough.</p><h2 id="the-limit-of-equilibrium">The Limit of Equilibrium</h2><p>I worked on simulation software for production optimization in the oil and gas industry. Specifically, a feature to model how fluids move through earth formations. I remember the day a wise petrophysicist gave me a masterclass in fluid dynamics. One term stuck with me: <em>hydrostatic equilibrium</em>.</p><p>It&rsquo;s the theoretical state where all fluids have settled into still, horizontal layers. Nothing moving. Everything at rest.</p><p>We used it as a mathematical baseline&mdash;a zero-state from which we could calculate actual movements. But the truth is, we needed that zero-state because there&rsquo;s no way to calculate without one.</p><p>And that&rsquo;s the limit. The zero-state is useful as a reference point. But chasing it as a goal dismisses reality. There is always movement. It never settles.</p><p>The same is true in design. When we focus only on balance, we treat every element as if it should settle into place. We calm things down. We reduce tension. And that works&mdash;until it flattens too much.</p><p>A heading doesn&rsquo;t serve the same purpose as a caption. A warning isn&rsquo;t the same as a confirmation.</p><p>Balance can reduce the differences between elements. But that can reduce the effectiveness as well. That&rsquo;s a problem.</p><h2 id="from-balance-to-harmony">From Balance to Harmony</h2><p>So if balance alone isn&rsquo;t enough, what&rsquo;s the next step? <strong>Harmony.</strong></p><p>Balance focuses on stability. Harmony focuses on purpose.</p><p>Where balance settles the elements, harmony connects them. Not by making them the same, but by making them resonate.</p><p>A harmonious layout isn&rsquo;t one where everything is calm. It&rsquo;s one where every element contributes to a shared whole. Where differences aren&rsquo;t flattened, but intentionally leveraged.</p><p>In a balanced layout, the logic is: <em>reduce the tension</em>. In a harmonious layout, the logic is: <em>make it work together</em>.</p><p>One calms things down. The other connects them.</p><h2 id="what-i-learned-about-sound-waves">What I Learned About Sound Waves</h2><p>Years ago, I spent a few weeks at the Royal Conservatory in The Hague. I was studying sonology, chasing my dreams. That didn&rsquo;t last long&mdash;I dropped out. But I learned something about sound that changed how I think about design.</p><p>Sound is made of waves. Every note is a frequency. A vibration with its own character, its own behavior. They are moving elements.</p><p>Low frequencies are deep and wide. High frequencies are sharp and precise. They&rsquo;re fundamentally different.</p><p>And that&rsquo;s exactly why they work together.</p><p>The beauty of composition&mdash;in music&mdash;is the art and science of making different waves serve a shared goal. You don&rsquo;t flatten a bass line to match the treble. You don&rsquo;t mute the high notes to let the low ones dominate. You compose them. You give each frequency its own space, its own role and its own moment.</p><p>When you compose, something happens. The sound becomes beautiful. Purposeful.</p><p>Each wave keeps its own characteristics. But together, they form something none of them could produce alone.</p><p>This principle extends far beyond interfaces and sound.</p><p>Harmony also means giving each person room to contribute what only they can contribute. Not by flattening their differences, but by connecting them toward a shared purpose.</p><p>When that happens in a team, the same thing happens as in music.</p><h2 id="when-balance-feels-off">When Balance Feels Off</h2><p>So when balance feels off, there is dissonance. Two elements are in each other&rsquo;s way.</p><p>The instinct is to calm things down. To settle it. And sometimes that&rsquo;s the right call.</p><p>But sometimes the answer isn&rsquo;t less tension. It&rsquo;s better connection. Finding how two things that look too different can compose into a relationship that serves a larger objective.</p><p>Each in their unique role. Some loud, some soft. Some long, some short. All playing their part.</p><h2 id="takeaways">Takeaways</h2><p>Balance is valuable and stable. But balance alone can lead us to settle. Settle for stillness when we should be composing for purpose.</p><p>Harmony does that. It doesn&rsquo;t just ask: <em>Are we stable?</em> It asks: <em>Does it serve the goal?</em></p><p>Harmony is about working together by leveraging uniqueness. Not settling for order alone, but differentiating with intent.</p><p>So the next time you&rsquo;re designing a layout, building a team or even navigating a relationship, don&rsquo;t stop at balance. Ask whether everything resonates.</p><p>Because when elements are composed&mdash;not just balanced&mdash;the result is harmony. On purpose. By design.</p><aside><hr data-sf-ec-immutable="" /><div class="row"><div class="col-4 u-normal-full u-small-mb0"><h4 class="u-fs20 u-fw5 u-lh125 u-mb0">Read more from Teon</h4></div><div class="col-8"><p class="u-fs16 u-mb0">Teon Beijl often writes from real experiences as a design lead in the oil and gas industry. Check out <a target="_blank" href="https://www.telerik.com/blogs/design-operator-ux-design-can-improve-decisions-high-stakes-environments">how UX design can improve decisions in high-stakes environments</a> and <a target="_blank" href="https://www.telerik.com/blogs/out-control-design-guide-alarm-management">alarm management</a>.</p></div></div></aside><img src="https://feeds.telerik.com/link/23065/17336318.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:354321ce-fa28-42ad-be8e-5ef8fe72a13c</id>
    <title type="text">Loading UI/UX Patterns for AI Applications</title>
    <summary type="text">Give users appropriate loading feedback for the AI process going on. Here are some patterns aligned to the wait time, with implementation ideas for Blazor.</summary>
    <published>2026-04-28T16:39:10Z</published>
    <updated>2026-09-02T08:19:16Z</updated>
    <author>
      <name>Ed Charbeneau </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23065/17327229/loading-ui-ux-patterns-ai-applications"/>
    <content type="text"><![CDATA[<p><span class="featured">Give users appropriate loading feedback for the AI process going on. Here are some patterns aligned to the wait time, with implementation ideas for Blazor.</span></p><p>AI-driven applications introduce a new set of challenges for user experience design. Traditional web applications operate within predictable boundaries, where requests complete in a consistent and measurable way. AI features change that dynamic, with response times ranging from near-instant to long-running operations that can take minutes. Designing for that variability is no longer optional, it is a core part of building reliable AI-powered applications.</p><p>The challenge extends beyond implementation into perception. Users do not experience time objectively; they react to how it feels. A blank screen creates doubt, while visible progress keeps the experience grounded. When feedback aligns with the effort required, the interaction feels natural. When it does not, friction builds quickly. Thoughtful loading design addresses this gap by communicating progress, setting expectations and reinforcing the value of the task in motion.</p><p>This guide focuses on practical loading UI patterns for AI scenarios, organized by real-world wait times. Each pattern is implemented with <a target="_blank" href="https://www.telerik.com/blazor-ui">Blazor and Progress Telerik UI components</a>, keeping the discussion grounded in tools developers already use. The goal is simple: create loading experiences that do more than fill time, improving perceived performance and building confidence in the system behind the scenes.
</p><h2>Understanding AI Application Loading Patterns</h2><p>AI applications introduce a different class of loading behavior. Traditional web requests are relatively predictable, but AI workloads are not. Inference, natural language processing and computer vision all introduce variability based on model complexity, input size and system load. As powerful as these capabilities are, they require a more deliberate approach to how progress is communicated.</p><p>Effective loading experiences center on managing expectations through clear, continuous feedback. Every loading state should communicate what is happening now, what has completed and what comes next, keeping users oriented as the system works. With this foundation in place, loading patterns can be tailored to specific wait times, keeping the experience responsive and understandable regardless of how long processing takes.</p><h2>Near Instantaneous Responses (Less Than 1 Second)</h2><p>For interactions under one second, traditional loading indicators often add more friction than value. Quick flashes of spinners or progress bars create a visual glitch that feels broken rather than helpful. Instead, the interface should respond immediately with subtle visual feedback that confirms the action without interrupting flow.</p><p>One exception stands out: when a fast action represents the final step in a longer workflow. In these cases, introducing a brief, intentional delay can create a sense of completion, giving users a moment to recognize the result of their effort before moving on.</p><h3>AI Task Examples</h3><p>AI tasks that typically complete in under one second include:</p><ul><li>Real-time text suggestions and autocomplete</li><li>Simple sentiment analysis on short text</li><li>Basic image classification with lightweight models</li><li>Cached AI responses</li><li>Rule-based chatbot responses</li><li>Simple recommendation filtering</li></ul><h3>Blazor Implementation Strategy</h3><p>Implementing instantaneous feedback in Blazor requires careful coordination between state changes and visual cues. The goal is to reflect user actions immediately while avoiding flicker from overly brief loading states. In practice, this often means enforcing a minimal display duration for indicators so that interactions feel smooth and intentional. </p><p>Try the A/B samples below by clicking the &ldquo;Zoom and Enhance&rdquo; buttons twice. The A sample should feel smoother on short intervals because of the intentional delay.</p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/mAkScmvQ58rIAkuM38?editor=true&amp;result=true&amp;errorList=false"></iframe><h3>UX Strategy</h3><p>Instant interactions benefit from confirmation rather than explanation. Subtle cues like button state changes, input highlighting or lightweight animations signal that the system has responded, keeping the experience fluid and uninterrupted. When these signals are consistent and immediate, users stay oriented without feeling like they are waiting.</p><h2>Short Wait Times (1&ndash;3 Seconds)</h2><p>Short waits call for lightweight, indeterminate indicators that acknowledge progress without interrupting flow. Simple spinners or skeleton screens work well because they provide immediate feedback while keeping the interface responsive. More elaborate animations tend to work against this, as users do not have enough time to process them and the interaction can feel slower than it is.</p><p>Skeleton screens are especially effective in AI scenarios because they establish structure upfront. By rendering a placeholder version of the final layout, the interface maintains continuity and gives users a clear sense of what is coming next as content is generated.</p><h3>AI Task Examples</h3><p>AI operations in the 1&ndash;3 second range include:</p><ul><li>Text generation for short responses</li><li>Image enhancement or basic filtering</li><li>Summarizing a document of moderate length</li><li>Translation of short to medium text</li><li>Basic data analysis and insights generation</li><li>Voice-to-text conversion for brief audio</li></ul><h3>Blazor Implementation Strategy</h3><h4>Chat Progress and Thinking</h4><p>The Telerik UI for&nbsp;<a href="https://www.telerik.com/blazor-ui/skeleton" target="_blank">Blazor Skeleton</a> component provides a straightforward way to mirror final layouts while AI-generated content is loading and the agent is thinking.</p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/wqkymwFI34Q3Bj4H27?editor=true&amp;result=true&amp;errorList=false"></iframe><h4>Smart Paste Loading</h4><p>The following demo shows a <a href="https://www.telerik.com/blazor-ui/smartpastebutton" target="_blank">smart paste interaction</a> that incorporates loading indicators to signal the process taking place. The Loading Container is displayed over the form fields being populated, while a button loader indicates the action is taking place once the button is clicked.</p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/mquemabj125i6dVw38?editor=true&amp;result=true&amp;errorList=false"></iframe><h3>UX Strategy</h3><p>Short waits benefit from clarity without added friction. Contextual messaging that reflects the task in progress, such as &ldquo;Thinking&rdquo; or &ldquo;Generating recommendations,&rdquo; helps users understand what is happening without slowing the experience down. When combined with progressive disclosure, where partial results are rendered as they become available, the interface stays active and responsive, reducing perceived wait time while making the system&rsquo;s work visible.</p><h2>Medium Wait Times (3&ndash;10 Seconds)</h2><p>Users begin to question responsiveness, and a lack of visible progress quickly turns into doubt. Multi-agent workflows or agentic workflows with multiple indeterminate steps can be difficult to navigate. Agents can make requests to external tools that have asynchronous processes. While these processes run, it is important to report the activity in a manageable way without losing focus of the main content.</p><h3>Blazor Implementation</h3><p>Provide feedback for AI operations that expose measurable progress. The example below shows a chat process where the agent uses external tools. Loading indicators are exposed in a collapsible panel to allow the user to see the progress but also hide it when the details are no longer necessary.</p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/QqEoGwvA09jzuqBe29?editor=true&amp;result=true&amp;errorList=false"></iframe><h3>UX Strategy</h3><p>Medium waits benefit from a balance of clarity and momentum. Directional time estimates, even something as simple as &ldquo;This may take about a minute,&rdquo; help users decide whether to stay engaged or return later, while continuously moving progress indicators reinforce that the system is still working. When paired with contextual messaging that explains the current step or highlights what is being processed, the experience shifts from passive waiting to a guided interaction that keeps users oriented and informed.</p><h2>Extended Wait Times (10+ Seconds)</h2><p>Extended wait times require a different approach. Clear visibility into progress matters, but so does the freedom to move on without losing track of what is happening. Combining progress indicators with background processing patterns allows the system to stay transparent while keeping the rest of the application usable.</p><p>Percent-complete indicators play a central role here by giving users a sense of scale. Seeing measurable progress helps them judge how much work remains and whether it is worth continuing to wait. At the same time, providing cancel or abort options keeps users in control rather than locked into a long-running process.</p><p>Step-based indicators work especially well for multi-stage AI operations by breaking the process into clear, understandable phases. Even when exact timing is uncertain, each completed step provides direction and reinforces forward movement.</p><h3>Blazor Implementation</h3><p>The following example uses a <a href="https://www.telerik.com/blazor-ui/grid" target="_blank">grid</a> format to display and manage agent activity. Each element displays important information about the task&rsquo;s state. In addition, failure modes are included and made actionable from the interface. This type of UX is great for dashboard-like scenarios where users can launch agent workflows and return later to see the task completion status.</p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/QKOSGwlH59MIvvBw27?editor=true&amp;result=true&amp;errorList=false"></iframe><p>If the user may encounter a long and undetermined loading state, a looping indicator can be used to communicate the overall steps that are running in the background, without labeling exactly what stage the process is at now. This nondeterministic progress indicator displays a carousel of information while the user waits. </p><p>With agentic applications, long processes can give the impression of wasted time, even though a process that takes minutes for an agent may have taken a human hour to complete manually. This loading pattern reminds users of the work going on behind the scenes.&nbsp;While some consider this a &ldquo;dark pattern&rdquo; when used to obscure the process details, it can be quite useful when used correctly to share honest information about the value the process provides.</p><p><iframe width="100%" height="500px" src="https://blazorrepl.telerik.com/repl/embed/GKkImcbe33AOXWRF16?editor=true&amp;result=true&amp;errorList=false">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;</iframe></p><p>Extended waits benefit from a design that prioritizes flexibility and user control. Background task patterns, such as persistent status panels or drawers, allow users to continue working while keeping progress visible, reducing the friction of being forced to wait in place. When paired with notification systems that signal completion, the need to actively monitor progress is removed entirely, giving users confidence that the system will follow through.</p><p>Longer waits create space to surface meaningful insights, explain processing steps or provide guidance for improving future results. When these elements are combined effectively, the experience shifts from a blocking delay to a managed, transparent process that keeps users informed without interrupting their workflow.</p><h2>Advanced Patterns for AI Applications</h2><h3>Contextual Loading Messages</h3><p>AI applications benefit from contextual loading messages that explain current processing steps. Replace generic &ldquo;Loading...&rdquo; text with specific descriptions: &ldquo;Analyzing image composition,&rdquo; &ldquo;Generating creative variations&rdquo; or &ldquo;Cross-referencing knowledge base.&rdquo; These messages build user understanding of AI capabilities while setting realistic expectations for output quality.</p><h3>Streaming and Incremental Results</h3><p>Many modern AI applications support streaming responses, particularly for text generation. Implement progressive disclosure patterns that display AI outputs as they generate, reducing perceived wait time while demonstrating active processing. This approach works particularly well for conversational AI interfaces and content-generation tools.</p><h2>Summary</h2><p>Designing loading experiences for AI applications is no longer about handling delays. It is about shaping how users understand and interact with the system. When feedback aligns with the work being performed, users stay engaged and in control regardless of how long processing takes.</p><p>By matching loading strategies to expected wait times, developers can move beyond generic indicators and deliver feedback that is intentional and informative. From immediate visual confirmation to multi-stage progress tracking, each pattern helps make AI interactions feel predictable and responsive.</p><p>Blazor and Telerik UI components provide a practical foundation for implementing these patterns, enabling teams to build consistent loading experiences without introducing unnecessary complexity. The advantage comes from how these tools are applied, not just their availability.</p><p>As AI continues to shape modern applications, loading design becomes a defining part of the user experience. Applications that communicate clearly during processing will feel faster and more reliable, regardless of the work happening behind the scenes.</p><h3>Get Started with These Examples</h3><p>Use any of the Telerik UI for <a target="_blank" href="https://www.telerik.com/blazor-ui">Blazor components</a> shown above, plus the <a target="_blank" href="https://www.telerik.com/blazor-mcp-servers">Blazor MCP servers</a> free with the 30-day trial.</p><p><a href="https://www.telerik.com/try/ui-for-blazor" target="_blank" class="Btn">Try Now</a></p><img src="https://feeds.telerik.com/link/23065/17327229.gif" height="1" width="1"/>]]></content>
  </entry>
</feed>
