<?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-ux-6185227f181de.jpg</logo>
  <title type="text">Telerik Blogs | Design | UX</title>
  <subtitle type="text">The official blog of Progress Telerik - expert articles and tutorials for developers.</subtitle>
  <id>uuid:a779cba9-1932-46d1-8d86-62a7f79c6f2a;id=121</id>
  <updated>2026-08-27T15:41:53Z</updated>
  <link rel="alternate" href="https://www.telerik.com/"/>
  <link rel="self" type="application/atom+xml" href="https://feeds.telerik.com/blogs/design-ux"/>
  <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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17432428/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/23066/17432428.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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17424536/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/23066/17424536.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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17417465/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/23066/17417465.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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17404479/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/23066/17404479.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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17385560/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/23066/17385560.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-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17349956/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/23066/17349956.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-08-27T15:41:53Z</updated>
    <author>
      <name>Ed Charbeneau </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17327239/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/23066/17327239.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:9e16b60f-6cb8-4dcc-afc1-2534f316fb5c</id>
    <title type="text">Design Principles Unpacked, No. 2 Hierarchy</title>
    <summary type="text">Hierarchy isn’t about control. It’s about order. When importance is clear, focus improves, flow increases and people gain more freedom.</summary>
    <published>2026-04-16T15:16:48Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17320277/design-principles-unpacked-no-2-hierarchy"/>
    <content type="text"><![CDATA[<p><span class="featured">Hierarchy isn&rsquo;t about control. It&rsquo;s about order. When importance is clear, focus improves, flow increases and people gain more freedom.</span></p><p>This is the second post in a short series called <em>Design Principles Unpacked</em>.</p><p>In each article, I take a design principle we use every day and look at it a little closer. Not to explain the rule. But to unpack the wisdom behind it. Because I believe our professional knowledge and experience can be leveraged beyond work. The way we design and build software shapes how we navigate everyday life.</p><p>Many of the principles we use to design software exist for a reason. They help us make things work. They help us make things simple. And that doesn&rsquo;t stop at software.</p><p>Let&rsquo;s unpack the next one: <strong>hierarchy</strong>.</p><h2 id="hierarchy-is-about-order-not-value">Hierarchy Is About Order, Not Value</h2><p>When we talk about hierarchy, we usually hear words like control, authority or power. That&rsquo;s where much of the resistance to the word comes from.</p><p>Hierarchy feels organizational. Political. Something that limits freedom instead of enabling it.</p><p>But in design, hierarchy isn&rsquo;t about restricting. Just like alignment, hierarchy is about guiding. It&rsquo;s about creating flow. Not what matters more. But what comes first.</p><p>At its core, hierarchy is simply an order of importance. It doesn&rsquo;t say one thing is better than another. It says one thing needs focus first. That distinction matters.</p><p>Without hierarchy, everything feels equally important. And suddenly, even getting started becomes hard.</p><p>You see this immediately in interfaces. If headlines, actions and paragraphs all get the same attention, nothing stands out. Users don&rsquo;t know where to look. They spend time and energy figuring out what matters, often focusing on things that aren&rsquo;t important to them.</p><p>Hierarchy answers a simple question:&nbsp;<strong>What should the user pay attention to first?</strong></p><p>Not because an element is more worthy. But because it helps the user decide whether it&rsquo;s relevant.</p><p>A good UI doesn&rsquo;t force you to read everything. It gives you orientation. It helps you navigate.&nbsp;That&rsquo;s not control. That&rsquo;s guiding.</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">Learn more about hierarchy in high-stakes situations</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><hr class="u-mb3" /></aside><h2 id="hierarchy-as-filtering-not-control">Hierarchy as Filtering, Not Control</h2><p>Let&rsquo;s unpack this principle outside of design. This is where hierarchy takes on a different tone. It stops sounding like guidance and starts feeling like control.</p><p>Everything needs approval. Everything goes through the chain. Nothing moves without permission.&nbsp;But that&rsquo;s not a hierarchy problem. That&rsquo;s an execution problem.</p><p>Hierarchy is about purpose. What matters depends on the goal.</p><p>Good hierarchy filters. It reduces noise. It protects focus. It filters what needs attention now, so the next person in line doesn&rsquo;t waste time sorting it out themselves.&nbsp;When something matters, it moves up. When it doesn&rsquo;t, it waits.</p><h2 id="hierarchy-in-leadership">Hierarchy in Leadership</h2><p>I&rsquo;ve seen this most clearly in my leadership roles.</p><p>In large organizations, there is constant noise. Requests. Opinions. Priorities.&nbsp;If all of that hits a team directly, focus disappears. Not because people aren&rsquo;t capable, but because attention gets disrupted.</p><p>As a design leader, that was my responsibility. Pass on only what was important to our goals. Protect the team. Filter the noise.&nbsp;The role of hierarchy there isn&rsquo;t control. It&rsquo;s filtering.</p><p>Leaders at higher levels don&rsquo;t do everything. They decide what deserves attention now and what can wait. That isn&rsquo;t all about authority. It&rsquo;s about enabling autonomy.</p><h2 id="closure">Closure</h2><p>Hierarchy isn&rsquo;t about value. It&rsquo;s about purpose. An order of importance that allows work to flow.&nbsp;Clarity over control. Purpose over power. Autonomy over authority.</p><p>When hierarchy is clear, flow is clear. And when flow is clear, freedom increases.</p><hr /><p><strong>Read next:</strong> <a href="https://www.telerik.com/blogs/design-principles-unpacked-no-3-affordance" target="_blank">Design Principles Unpacked, No. 3: Affordance</a></p><img src="https://feeds.telerik.com/link/23066/17320277.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:fba303c8-89d8-4f32-b79c-658f4ee3e6ab</id>
    <title type="text">Design Principles Unpacked, No. 1: Alignment</title>
    <summary type="text">Alignment is more than a design principle. It’s a way of positioning yourself on purpose.</summary>
    <published>2026-02-26T22:12:41Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17284610/design-principles-unpacked-no-1-alignment"/>
    <content type="text"><![CDATA[<p><span class="featured">Alignment is more than a design principle. It&rsquo;s a way of positioning yourself <em>on purpose</em>.</span></p><p>This is the first post in a short series called <em>Design Principles Unpacked</em>.</p><p>In each article, I take a design principle we use every day and look at it a little closer. Not to explain the rule. But to unpack the wisdom behind it.&nbsp;Because I believe our professional knowledge and experience can be leveraged beyond work. The way we design and build software shapes how we navigate everyday life.</p><p>Many of the principles we use to design software exist for a reason. They help us make things work. They help us make things simple. And that doesn&rsquo;t stop at software.</p><p>Let&rsquo;s unpack the first one: <strong>alignment</strong>.</p><h2 id="aligned-to-what">Aligned to What?</h2><p>Alignment only exists in relation to something else. It can be other elements. Other people. Other ideas.&nbsp;But most of the time, the actual reference is invisible.</p><p>The word <em>align</em> comes from <em>a line</em>. A guideline.</p><p>Without a guideline, left and right are just positions. Consistent, but static.</p><p>A guideline gives direction. It helps us make decisions. It shows us where we&rsquo;re heading and why.</p><p>Take text alignment as a simple example.&nbsp;Text aligns to an invisible line on the left. That line is the reference.&nbsp;We set that guideline to create balance. To make reading easy. To avoid wasting cognitive energy. Because we read in a specific direction. Our eyes follow a learned path.</p><p>Those considerations are the real reference. The intent is to transfer written information efficiently. Alignment supports that intent. It improves perception. And help the message get through.</p><h2 id="intentional-misalignment">Intentional Misalignment</h2><p>In visual design, there&rsquo;s also optical alignment. Two elements can be perfectly aligned and still feel wrong.</p><p>That&rsquo;s because there&rsquo;s the perfect pixel. And then there&rsquo;s perceived alignment.&nbsp;To truly align, you sometimes have to misalign. Deliberately.</p><p>The guideline defines the intent. But the execution requires adaptation.</p><p>Alignment isn&rsquo;t about snapping things into place. It&rsquo;s about staying oriented toward what matters.</p><h2 id="the-composition-of-reality">The Composition of Reality</h2><p>Reality isn&rsquo;t static either. It&rsquo;s a moving composition.</p><p>If alignment depends on fixed positions, you run into trouble. &ldquo;Left only&rdquo; works as long as the context stays the same.</p><p>But when you align to a guideline instead of a position, you can realign. You know what you&rsquo;re orienting toward. You can adjust without losing direction.&nbsp;That&rsquo;s why alignment works best when it&rsquo;s relative, not absolute. Reality never stands still.</p><p>When you&rsquo;re in an argument, you&rsquo;re misalignment. Not because one of you is wrong, but because you&rsquo;re focused on positions.&nbsp;Look past left and right. Find the invisible guideline underneath.</p><p>Aligning doesn&rsquo;t mean watering down your convictions. It means recognizing the line you use.</p><h2 id="conclusion">Conclusion</h2><p>The real skill isn&rsquo;t knowing where to place things.&nbsp;It&rsquo;s learning to recognize the guideline you&rsquo;re aligning to. And choosing your position with intent.</p><p>When you zoom out, alignment becomes more than a principle. It becomes a way of positioning yourself <em>on purpose</em>.</p><p>Your position will change. Because reality happens.</p><p>But the line you align to? That&rsquo;s what makes it <em>by design</em>.</p><hr data-sf-ec-immutable="" /><p><strong>Next post:</strong> <a href="https://www.telerik.com/blogs/design-principles-unpacked-no-2-hierarchy" target="_blank">Design Principles Unpacked, No. 2 Hierarchy</a></p><img src="https://feeds.telerik.com/link/23066/17284610.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:0112f54a-dcfd-4df4-9961-a6efb943b998</id>
    <title type="text">7 Web Design Conferences and Events to Attend in 2026</title>
    <summary type="text">Read about seven upcoming web design conferences for 2026 where you can learn about new trends, technologies and techniques. Plus, some offer networking, workshops, expo fairs and more.</summary>
    <published>2026-02-04T17:34:47Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Suzanne Scacca </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17270034/7-web-design-conferences-events-attend-2026"/>
    <content type="text"><![CDATA[<p><span class="featured">In addition to learning about new trends, technologies and techniques, some web design conferences offer the chance for designers to network, attend workshops, visit expo fairs and more. Learn more about seven upcoming web design conferences for 2026.</span></p><p>The landscape of web design can change dramatically from year to year. Not just because of trendy UI styles or features either. The world is changing fast and, with it, our users. As a result, their needs, desires and preferences when interacting with brands evolves over the years.</p><p>To keep pace with everything going on, web designers need to seek out opportunities for education. Reading blogs and books, listening to podcasts and following thought leaders on social media can be helpful. In many cases, though, this kind of content only covers the tip of the iceberg.</p><p>For a more comprehensive education and update on what&rsquo;s happening, industry conferences can be valuable resources.</p><p>Every conference is different in terms of theme, availability (in person and online), cost and content. If you&rsquo;re interested in attending a conference or two this year, keep reading to learn more about what&rsquo;s available.</p><h2 id="upcoming-conferences-for-web-designers">7 Upcoming Conferences for Web Designers</h2><p>One of the nice things about web design conferences is that they&rsquo;re held throughout the year. Some of them even offer virtual attendance options (if they&rsquo;re not fully virtual to begin with). So if you miss one, there&rsquo;s always another one down the road you can attend.</p><p>Here&rsquo;s what you can expect at the following conferences for designers:</p><h2 id="adobe-max">Adobe MAX</h2><p><strong>Location:</strong></p><ul><li>In-person: Miami Beach Convention Center in Miami, FL</li><li>Online</li></ul><p><strong>Dates:</strong></p><ul><li>November 8-9, 2026 (Preconference)</li><li>November 10-12, 2026 (Conference)</li><li>November 10-11, 2026 (Online event)</li></ul><p><strong>What to expect:</strong><br /><a href="https://www.adobe.com/max.html">Adobe MAX</a> offers both an in-person and online annual event for designers, developers and creatives of all levels.</p><p>More than 150 sessions take place during this event. Sessions are broken up into different tracks, and include:</p><ul><li>3D</li><li>Branding</li><li>Creativity and marketing for business</li><li>Generative AI</li><li>Graphic design</li><li>Illustration</li><li>Social media marketing</li><li>Audio, motion and video</li></ul><p>What&rsquo;s nice about this conference is that each session will be assigned a technical level. This way, you can choose sessions that align with your interests <em>and</em> level of experience.</p><p>Now, if you plan to attend the in-person conference, you&rsquo;ll have access to keynote speeches, Adobe Labs sneak peeks, 60-minute luminary sessions and creativity super sessions. After the conference, you&rsquo;ll also be able to watch screen capture and audio recordings of any events you missed.</p><p>If you&rsquo;d prefer to attend online, the programming is slightly different. Online Adobe Live Sessions will be 30 to 60 minutes and give you access to First Takes and Meet the Speaker sessions where you&rsquo;ll learn more about Adobe products. Online presentations will only be available as replays and will last between 15 to 30 minutes.</p><h2 id="figma-config">Figma Config</h2><p><strong>Location:</strong></p><ul><li>In-person: Moscone Center in San Francisco, CA</li><li>Online</li></ul><p><strong>Dates:</strong></p><ul><li>June 23-25, 2026</li></ul><p><strong>What to expect:</strong><br /><a href="https://config.figma.com/">Figma Config</a> is an annual conference for anyone involved in the development of products&mdash;designers, developers, marketers, product managers, etc. While some of the sessions revolve around Figma products and features, there are others that focus on the present and future of product design.</p><p>The sessions fall under the following themes:</p><ul><li>Strategy</li><li>Process</li><li>Craft</li><li>Design systems</li></ul><p>Although the schedule isn&rsquo;t available yet, you&rsquo;ll find highlights from 2025 Figma Conf from last year. These keynotes and sessions dig into topics like redesigning the computer mouse, collaborative brand design and creating interactive animations.</p><p>If you&rsquo;re interested in watching the virtual conference, it&rsquo;s free. You just won&rsquo;t be able to watch the sessions in real time. The keynote sessions will go up on YouTube the day of and the breakout sessions will appear on YouTube once the conference is over.</p><h2 id="fitc">FITC</h2><p><strong>Location:</strong></p><ul><li>In-person: The Great Hall in Toronto, Canada</li><li>Online</li></ul><p><strong>Dates:</strong></p><ul><li>April 27-28, 2026</li></ul><p><strong>What to expect:</strong><br /><a href="https://fitc.ca/event/to26/">FITC</a> stands for &ldquo;Future. Innovation. Technology. Creativity.&rdquo; This two-day conference is celebrating its 25th anniversary this year. Similar to the other conferences on this list, there will be round table discussions and various session tracks to attend.</p><p>One of the biggest differences between this event and the others is its theme:</p><blockquote><p>&ldquo;This year, FITC Toronto explores the theme of rebirth. In a world moving too fast and overwhelmed by AI and shiny new tools, we want to pause, reflect, and bring back the concepts that inspired us as artists. We want to pay homage to our creative journey, appreciate the small foundational things we learned along the way, and celebrate the essence of our industry.&rdquo;</p></blockquote><p>If this is something that resonates with you, you have two ways of attending.</p><p>In-person attendees get full access to all of the presentations, can take part in the Q&amp;A and are able to attend evening events. They&rsquo;ll also get six months of online access to the main room sessions.</p><p>If you want to attend online and for a discounted rate, you&rsquo;ll be able to do so in real time. You&rsquo;ll also get six months&rsquo; access to the replays after the event.</p><h2 id="sxsw-innovation-conference">SXSW Innovation Conference</h2><p><strong>Location:</strong></p><ul><li>Austin</li></ul><p><strong>Dates:</strong></p><ul><li>March 12-18, 2026</li></ul><p><strong>What to expect:</strong><br /><a href="https://sxsw.com/">South by Southwest (SXSW)</a> is known for many things. Not only is it the host of popular Music, Comedy and Film &amp; TV Conferences, it concurrently runs an Innovation Conference in March of every year. This is the one you&rsquo;ll want to pay the most attention to as a web designer.</p><p>The Innovation conference has a variety of tracks that may be right up your alley, like Brand &amp; Marketing, Design and Tech &amp; AI. You may also find some interesting content in these tracks:</p><ul><li>Creator Economy</li><li>Startups</li><li>Sports &amp; Gaming</li><li>Workplace</li><li>Health</li></ul><p>While AI is going to be talked about a bit, you&rsquo;ll find other interesting subject matter covered at the conference, like &ldquo;Meet Gen Alpha,&rdquo; &ldquo;10 Truths About Technology That Are Shaping Your Life&rdquo; and &ldquo;You Can&rsquo;t Create Cultural Relevance Without Community.&rdquo;</p><p>This conference is only available to attend in-person, but you do have options. You can buy a Platinum badge for access to all the conferences, one strictly for Innovation, or you can mix and match based on your interests.</p><h2 id="uxdx">UXDX</h2><p><strong>Location:</strong></p><ul><li>In-person: New York or Berlin</li><li>Online</li></ul><p><strong>Dates:</strong></p><ul><li>May 11-13, 2026 (USA)</li><li>May 27-29, 2026 (EMEA)</li></ul><p><strong>What to expect:</strong><br />If you&rsquo;re a UX designer or researcher, then <a href="https://uxdx.com/">UXDX</a> may be a worthwhile conference to attend. Two conferences are held in May&mdash;one in the U.S. and one in Germany. While the content is similar, it&rsquo;s not identical. So, be sure to check out the agendas for each conference to find the one that interests you most.</p><p>Another option is to attend the conferences online. You&rsquo;ll pay a discounted rate, but only get access to 20 talks instead of the 30 scheduled.</p><p>Unlike some of the larger design conferences, there aren&rsquo;t separate tracks. This conference is solely dedicated to helping product teams deliver better results. So, you&rsquo;ll find sessions like the following:</p><ul><li>&ldquo;Shipping Faster With React Server Components&rdquo;</li><li>&ldquo;Are We Designing for Humans or for Agents?&rdquo;</li><li>&ldquo;Engineering Seamless Journeys Across Physical and Digital Touchpoints&rdquo;</li><li>&ldquo;Closing the Design&ndash;Engineering Gap (for Real)&rdquo;</li><li>&ldquo;Building Inclusion Into Our Design System And Delivery Process&rdquo;</li></ul><p>The sessions might not be as flashy as other conferences, but they&rsquo;re meant to be actionable and empowering for UX pros.</p><h2 id="web-summit">Web Summit</h2><p><strong>Location:</strong></p><ul><li>Lisbon, Portugal</li></ul><p><strong>Dates:</strong></p><ul><li>November 9-12, 2026</li></ul><p><strong>What to expect:</strong><br />Information isn&rsquo;t yet available for <a href="https://websummit.com/">Web Summit</a>&rsquo;s 2026 conference. However, this is what we do know about this annual event:</p><p>There are 20 tracks to choose from, which include:</p><ul><li>AI Summit</li><li>Commerce Summit</li><li>Creative Summit</li><li>Developer Summit</li><li>Fintech Summit</li><li>Marketing Summit</li><li>SaaS Summit</li></ul><p>There are a <em>lot</em> of sessions going on at the same time, so you&rsquo;ll want to do some planning ahead of time to make sure you catch the sessions that are most important to you.</p><p>Also, don&rsquo;t forget to look into the meetups available throughout the four-day summit. You&rsquo;ll find them for all kinds of groups, like Robotics Geeks, Spanish CEOs, CleanTech, Women in Tech and Neurodiverse Folks. These are a great way to fill the gaps in your schedule (if you have any) while enjoying some networking.</p><h2 id="world-usability-conference">World Usability Conference</h2><p><strong>Location:</strong></p><ul><li>In-person: Graz, Austria</li></ul><p><strong>Dates:</strong></p><ul><li>October 13-15, 2026</li></ul><p><strong>What to expect:</strong><br /><a href="https://worldusabilitycongress.com/">The World Usability Conference</a> is an in-person-only event that takes place over three days in October. Attendees can choose to buy tickets for one day, for the conference or for the conference plus workshops. While there&rsquo;s no online counterpart, attendees get access to the recordings after the event.</p><p>This conference is all about UX strategy and management. During the sessions and workshops, you&rsquo;ll get a chance to learn about common challenges in UX research and design, and how experts are navigating their way around them.</p><p>Tracks include:</p><ul><li>Enterprise UX</li><li>Future UX</li><li>Human UX</li><li>UX Strategy</li><li>Accessibility &amp; Inclusion</li><li>UX Research</li><li>UX Management</li><li>Leadership</li><li>AI &amp; UX</li></ul><p>If you plan on buying a one-day pass, make sure to look up which tracks are available on each day. The conference organizers do a good job placing related topics together so that you can realistically get the information most relevant to you and your role in a single day.</p><h2 id="wrapping-up">Wrapping Up</h2><p>One of the nice things about having so many conferences to choose from is that you can pick and choose the ones that are best for you.</p><p>Do you want to attend online, watch the replay or join in person?</p><p>Do you want to go for one day or the whole thing?</p><p>Are you interested in the talks or would you find it beneficial to attend the workshops, networking events and other programming?</p><p>Also, with most of these conferences planned well in advance, most of them offer special discounted rates for early birds. So, once you decide which ones you want to attend, there are budget-friendly ticket options available.</p><p>At the end of the day, there&rsquo;s something for everyone. It&rsquo;s just a matter of finding one with the program that interests you most, that fits your budget and that works with your schedule.</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">The Power of the Incomplete: Designing Progress</h4></div><div class="col-8"><p class="u-fs16 u-mb0">Progress isn&rsquo;t found in the finish&mdash;it&rsquo;s made in the steps between. Make the in-between visible, and you <a target="_blank" href="https://www.telerik.com/blogs/power-incomplete-designing-progress">don&rsquo;t just show progress&mdash;you design it</a>.</p></div></div></aside><img src="https://feeds.telerik.com/link/23066/17270034.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:c0c3d1be-1a3e-4f5a-a1fd-bdf9baf9e5f8</id>
    <title type="text">The Power of the Incomplete: Designing Progress</title>
    <summary type="text">Progress isn’t found in the finish—it’s made in the steps between. Make the in-between visible, and you don’t just show progress—you design it.</summary>
    <published>2026-01-15T17:56:33Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17254152/power-incomplete-designing-progress"/>
    <content type="text"><![CDATA[<p><span class="featured">Progress isn&rsquo;t found in the finish&mdash;it&rsquo;s made in the steps between. Make the in-between visible, and you don&rsquo;t just show progress&mdash;you design it.</span></p><p>Teams are often obsessed with the final result.</p><p>But progress isn&rsquo;t only found in the finish&mdash;it happens in the steps between. When we visualize those steps, the incomplete design becomes a powerful tool.</p><h2 id="the-illusion-of-completeness">The Illusion of Completeness</h2><p>When something is complete, it looks done. It suggests certainty. It feels like quality.</p><p>But in product development, &ldquo;final&rdquo; is an illusion. Just because the tasks are done doesn&rsquo;t automatically mean the product is good. Dragging tickets to the next column can feel like progress but might hide a serious flaw.</p><p>I was building a small LEGO digger with my daughter the other day. It was interesting to see how she was more focused on following the steps correctly than fast-forwarding to a functioning digger.</p><p>The instructions were detailed. We used the mobile app with 3D models and animations. You trust the makers that every step is there for a reason. Together with IKEA furniture, it&rsquo;s one of the few manuals I actually read&mdash;and for good reason.</p><p>There&rsquo;s no room for guessing. It&rsquo;s designed to be assembled in a certain way. Every step is illustrated clearly, and once in a while you get a little overview of your progress.</p><p>It&rsquo;s simplified with micro-success. It&rsquo;s continuous completeness. The final result is the reward.</p><h2 id="the-missing-middle">The Missing Middle</h2><p>Most teams describe what should happen at the start and verify what happened at the end. But the middle? It&rsquo;s often hidden.</p><p>The result is rework, misalignment and late feedback.</p><p>The solution isn&rsquo;t more documentation&mdash;it&rsquo;s more visibility.</p><p>Wireframes, low-fidelity mocks or prototypes can be reverse-designed. From the current state to the desired state, you can show the progression.</p><p>Take a common case: An admin console where you manage access entitlements. The current version has a simple form: email, roles, save.</p><p>Now the team wants to expand its features:</p><ul><li>Users can get access by adding them to a group (dropdown)</li><li>And generate an access control report for documentation (button)</li></ul><p>All those additions lead to a new &ldquo;final&rdquo; state.</p><p>But each feature introduces its own interface and backend changes. To design this well, you can accompany each user story with a lightweight wireframe or diagram showing how the interface or system evolves&mdash;from the simple form to the new version.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2026/2026-01/the-power-of-the-incomplete-form-progression.png?sfvrsn=b4b47bbb_2" title="From start to end, the middle state becomes visible" alt="Form progression showing the in-between state" /></p><p>This illustration is very basic. So, yes, it might feel like overkill. But all I did was copy the end state and hide the report button.</p><p>That might look trivial, but I&rsquo;ve seen in real projects that this kind of visibility works. It removes unnecessary guessing. It&rsquo;s childproof&mdash;like LEGO.</p><p>And it doesn&rsquo;t take a lot of time to produce&mdash;just hiding a few elements and sharing them.</p><p>The result is clarity about progress.</p><h2 id="closure">Closure</h2><p>Progress isn&rsquo;t all about the finish. It&rsquo;s made in the steps between.</p><p>When you visualize those steps intentionally, you don&rsquo;t just show progress&mdash;you design for it.</p><p>Don&rsquo;t just design the result. <strong>Design the progress.</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">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/23066/17254152.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:7f3b0e93-6bcf-4284-a6c1-46c4269f04d9</id>
    <title type="text">Tabs: Taboo or Turbo in Enterprise Apps?</title>
    <summary type="text">Tabs are everywhere in enterprise apps. Used well, they simplify complexity. Used poorly, they frustrate the user. Learn when to use or switch tabs.</summary>
    <published>2025-10-14T16:19:37Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Teon Beijl </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17185631/tabs-taboo-turbo-enterprise-apps"/>
    <content type="text"><![CDATA[<p><span class="featured">Tabs are everywhere in enterprise apps. Used well, they simplify complexity. Used poorly, they frustrate the user. Learn when to use or switch tabs.</span></p><p>Tabs have been around for decades and I haven&rsquo;t seen complex enterprise software that doesn&rsquo;t use them.</p><p>In all my years designing enterprise apps, two components have proven to be either the strongest asset or the weakest link: <strong>tables and tabs</strong>.</p><p>I already wrote about tables in <a target="_blank" href="https://url.us.m.mimecastprotect.com/s/yHslC1wMRMcVom3EHLfRsVAhLp?domain=telerik.com">my post on why you can&rsquo;t beat the spreadsheet</a>. Now it&rsquo;s time to take a look at tabs.</p><h2 id="the-friendly-developer’s-shortcut">The Friendly Developer&rsquo;s Shortcut</h2><p>If you&rsquo;ve ever built enterprise software, you know that tabs are the default. They&rsquo;re easy to implement. Nest items in code, separate them in the UI. Simple.</p><p>Back in the day, developers were also the designers. Tabs were the easiest way to bring order to complex screens. They stuck because they worked.</p><p>Also, much of software design simply mimicked the operating system. It&rsquo;s no surprise enterprise apps followed Microsoft&rsquo;s example.</p><p>Think of the old Windows settings dialog: a tiny screen packed with tabs.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-09/windows_settings.png?sfvrsn=e4da22d1_2" title="Windows 95 settings dialog example" alt="Windows 95 System Properties dialog showing multiple tabs" /></p><p>That pattern became the blueprint for squeezing dozens of options into limited space.</p><p>Making use of every pixel was considered an achievement. Mobile-first design? Not even a thing.</p><h2 id="the-untabbed-truth">The Untabbed Truth</h2><p>The truth is, you&rsquo;ll use tabs at some point. They&rsquo;re too common to ignore. They turbocharge the experience, used well. But there are pros and cons to using them.</p><h3 id="navigation">Navigation</h3><ul><li><strong>Pro:</strong> Easy to scan and move between categories</li><li><strong>Con:</strong> Too many tabs make scanning hard and moving slow</li></ul><h3 id="disclosure">Disclosure</h3><ul><li><strong>Pro:</strong> Good for hiding lots of options</li><li><strong>Con:</strong> Important info or actions can get lost</li></ul><h3 id="structure">Structure</h3><ul><li><strong>Pro:</strong> Clear structure and focus when used well</li><li><strong>Con:</strong> Nested tabs multiply confusion</li></ul><h2 id="switching-tabs-alternatives">Switching Tabs: Alternatives</h2><p>Tabs aren&rsquo;t the only way to organize complexity. Sometimes other components do the job better.</p><h3 id="accordions">Accordions</h3><ul><li><strong>Pro:</strong> Great for progressive disclosure&mdash;show one thing at a time</li><li><strong>Con:</strong> Expand too many and you&rsquo;re back to scrolling forever</li></ul><h3 id="panels">Panels</h3><ul><li><strong>Pro:</strong> Easy to read, even with many items</li><li><strong>Con:</strong> Take more screen space and clutter the screen fast</li></ul><h3 id="steppers">Steppers</h3><ul><li><strong>Pro:</strong> Perfect when groups are steps in a process</li><li><strong>Con:</strong> Breaks down if users need to jump around or skip steps</li></ul><h2 id="developer-friendly-user-centered">Developer-Friendly, User-Centered</h2><p>Tabs still have a place. They&rsquo;re familiar and fast to build and can structure complexity. But they can also turn into a bottleneck&mdash;for both users and developers.</p><h3 id="user-experience">User Experience</h3><ul><li><strong>Pro:</strong> Clear structure and focus when used well</li><li><strong>Con:</strong> Hidden content or clumsy navigation slows everyone down</li></ul><h3 id="development">Development</h3><ul><li><strong>Pro:</strong> Quick to implement, easy to drop in</li><li><strong>Con:</strong> Custom solutions require more work to handle states and navigation</li></ul><h3 id="code">Code</h3><ul><li><strong>Pro:</strong> UI toolkits like <a href="https://www.telerik.com/kendo-ui" target="_blank">Progress Kendo UI libraries</a> give you accessible, tested tab components out of the box</li><li><strong>Con:</strong> Writing custom code adds complexity and risks breaking essentials like accessibility</li></ul><p>Instead of reinventing tabs, lean on a toolkit that handles the heavy lifting. If you need an alternative, the toolkit makes it easy to switch. That way you can focus on the one thing that matters most: delivering a great user experience.</p><p>So tabs are definitely not a taboo&mdash;just handle them with care. Use them well, and with a toolkit like Kendo UI, you&rsquo;re turbocharged.</p><hr /><p>The Kendo UI component libraries come with a free trial. Give them a shot today!</p><p><a href="https://www.telerik.com/kendo-ui" class="Btn" target="_blank">Try Now</a></p><img src="https://feeds.telerik.com/link/23066/17185631.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:b2dfcfab-5b85-4295-982e-4c719d6aa12a</id>
    <title type="text">Designer/Developer Collaboration in the Age of AI</title>
    <summary type="text">We want to hear from you! Tell us about workflows, trends and AI in your design and/or development work!</summary>
    <published>2025-10-06T19:39:51Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Kathryn Grayson Nanz </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17180202/designer-developer-collaboration-age-ai"/>
    <content type="text"><![CDATA[<p><span class="featured">We want to hear from you! Tell us about workflows, trends and AI in your design and/or development work!</span></p><p>Last year, we started really exploring the designer-developer relationship: from design systems, brainstorming, prototyping and user testing through the handoff, creation and launch process. Where are things working well? Why do we hit blockers? And why can&rsquo;t developers understand the difference between cobalt and cerulean? (Just kidding about that last one &hellip; mostly).</p><p>We hit the <s>streets</s> conferences with a whiteboard and a ton of sticky notes and talked to hundreds of designers and developers in-person about their experiences. </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">See what conclusions we drew from those whiteboard/sticky-note sessions</h4></div><div class="col-8"><p class="u-fs16 u-mb0"><a target="_blank" href="https://www.telerik.com/blogs/closing-designer-developer-gap">Closing the Designer-Developer Gap</a>: One of the best ways we can close the designer-developer distance is by learning more and gaining a more thorough understanding of what all parties are looking for. By identifying those communication gaps, knowledge gaps and expectation gaps, we can begin to bridge them together.</p></div></div><hr class="u-mb3" /></aside><p>Then, we broadened the scope and launched The State of Designer Developer Collaboration Survey, so we could hear from designers and developers all around the world! What we found was super interesting&mdash;but no spoilers: Go <a href="https://www.telerik.com/design-system/designer-developer-collaboration-survey-2024/" target="_blank">check out the results</a> and see for yourself!</p><p>Now, a year has passed&mdash;and what an eventful year it&rsquo;s been! The growth of generative AI has disrupted our workflows and processes in ways we couldn&rsquo;t have imagined. Last year, we had a token few questions about AI, and many of our respondents were feeling hesitant about incorporating it into their work. This year, we&rsquo;ve expanded to a whole section on AI&mdash;and I suspect that the responses will be quite different!</p><p><strong>There&rsquo;s only one way to find out for sure, though. <a target="_blank" href="https://progress.co1.qualtrics.com/jfe/form/SV_40mWhGrQAktLQbQ?Source=Kathrynannouncement">Take The State of Designer-Developer Collaboration 2025 Survey</a>: Workflows, Trends and AI. </strong></p><p><strong></strong><strong></strong>We want to hear from you! Have things changed in your day-to-day work? Are you a designer who&rsquo;s vibe-coding more interactive prototypes? A developer who&rsquo;s asking ChatGPT for color scheme ideas? Have you been over- or underwhelmed by all the new AI features popping up in your tools? Or maybe nothing has changed for you, and you&rsquo;re still keeping a cautious eye on this whole &ldquo;AI&rdquo; thing before diving in? </p><p>No matter what you&rsquo;re experience is, we&rsquo;re curious to hear about it. We&rsquo;ll bundle up all the results into a meticulously detailed and (of course) beautifully designed report, and you&rsquo;ll be the first to know.</p><p><a target="_blank" href="https://progress.co1.qualtrics.com/jfe/form/SV_40mWhGrQAktLQbQ?Source=Kathrynannouncement" class="Btn">Take The Survey</a></p><img src="https://feeds.telerik.com/link/23066/17180202.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:f3cec785-fd2d-44e2-a12d-4ed49ad74a3f</id>
    <title type="text">Design, Code, Comply: Accessibility in Workforce Learning</title>
    <summary type="text">See how Resolute helped one client build a more functional, accessible and scalable web experience by instituting accessibility best practices and leveraging Progress tools.</summary>
    <published>2025-09-17T15:34:40Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Leman Pehlivanova </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17162061/design-code-comply-accessibility-workforce-learning"/>
    <content type="text"><![CDATA[<p><span class="featured">See how Resolute helped one client build a more functional, accessible and scalable web experience by instituting accessibility best practices and leveraging Progress tools.</span></p><p>In a world where most of our lives play out online, web accessibility shouldn&rsquo;t be treated as an afterthought. Designing with inclusivity in mind is no longer optional; it&rsquo;s essential. Just like a chair needs four sturdy legs to be safe for everyone, digital experiences need to be built with all users in mind.</p><p>But when the platform in question is educational, the stakes are even higher. These platforms serve a diverse range of learners&mdash;some with visual, auditory, motor or cognitive impairments, and face stricter accessibility requirements than general websites.</p><p>That&rsquo;s why <a target="_blank" href="https://www.resolutesoftware.com/">Resolute</a> was proud to partner with a U.S.-based company providing online training tools for frontline employees. The platform had recently been acquired by a leading provider of online compliance and workforce training, further raising the bar for performance, accessibility and scalability. The goal: build a more functional, accessible and scalable web experience.</p><h2 id="when-design-slows-you-down">When Design Slows You Down</h2><p>The project started with a familiar pain point: fragmentation. The client&rsquo;s design ecosystem was spread across multiple sources:</p><ul><li>An internal Figma library shaped by years of brand tweaks</li><li>A partially customized theme inside <a target="_blank" href="https://www.telerik.com/themebuilder">Progress ThemeBuilder</a></li><li>A live site with Progress Kendo UI components that didn&rsquo;t always align with the designs</li></ul><p>This led to confusion, delays and inconsistencies, especially around accessibility. Developers struggled to map designs to actual components. Theming was brittle. And certain UI patterns weren&rsquo;t usable for people relying on keyboard navigation or assistive technologies.</p><p>Resolute was brought in to clean it up, streamline the workflow and help the client move toward a more compliant and scalable solution.</p><h2 id="fixing-the-foundation-themebuilder-in-action">Fixing the Foundation: ThemeBuilder in Action</h2><p>Our UX/UI team began by auditing the client&rsquo;s existing design system. They worked closely with their internal team to unify the visual language and migrate it into Progress ThemeBuilder, which served as the central source of truth for styling and theming moving forward.</p><p>ThemeBuilder wasn&rsquo;t just a convenience; it helped enforce consistency in <a href="https://www.telerik.com/blogs/design-tokens-fundamental-building-blocks-design-systems" target="_blank">design tokens</a> like colors, borders and spacing, while also helping to align with accessibility best practices.</p><p><strong>The UX/UI team&rsquo;s work included:</strong></p><ul><li>Consolidating redundant button and form variations</li><li>Fixing visual issues with contrast, spacing and typography</li><li>Helping the design team understand how to use ThemeBuilder effectively to support long-term accessibility</li></ul><h2 id="from-visuals-to-code-accessibility-in-the-build">From Visuals to Code: Accessibility in the Build</h2><p>Once the design foundation was solid, our frontend team began implementing the new UI in code. Over several months, the platform&rsquo;s frontend was rebuilt with accessibility as a core requirement, focusing not just on how it looked, but how it worked for every user.</p><p>This wasn&rsquo;t just about good UX; it was also about meeting real compliance needs. Since the platform serves a broad user base in the U.S., including educational and government-affiliated organizations, several legal standards apply, including:</p><ul><li><strong>ADA (Americans with Disabilities Act)</strong>: Particularly Title III, which applies to educational institutions and commercial websites</li><li><strong>Section 508 of the Rehabilitation Act</strong>: For platforms receiving federal funding or working with government entities</li></ul><p>To meet these requirements, we aligned the build with <strong>WCAG 2.1 Level AA</strong> guidelines developed by the <a target="_blank" href="https://www.w3.org/TR/WCAG21/">W3C</a> (World Wide Web Consortium), currently the most widely used benchmark for web accessibility in the U.S.</p><p><strong>What that looked like in code:</strong></p><ul><li>Every interactive element was accessible via <strong>keyboard navigation</strong> (tab, arrows, etc.).</li><li>Clear, visible <strong>focus states</strong> were implemented for all buttons, links and forms.</li><li>We structured the app using <strong>semantic HTML</strong> and applied <strong>ARIA roles</strong> for assistive tech (e.g., <code class="inline-code">&lt;button&gt;</code>, <code class="inline-code">&lt;nav&gt;</code>, <code class="inline-code">&lt;form&gt;</code>). Yet, we applied ARIA roles only when necessary for custom components or non-semantic elements, avoiding over-reliance on ARIA. It&rsquo;s crucial to use ARIA only when native HTML elements can&rsquo;t provide the required functionality.</li><li>For use cases beyond the default configurations of Kendo UI or ThemeBuilder, we wrote <strong>custom HTML overrides</strong>.</li><li>Duplicate labels or screen reader confusion were avoided using attributes like <code class="inline-code">aria-hidden="true"</code> where needed.</li></ul><p>Testing was both automated and manual. Tools like <a target="_blank" href="https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">axe DevTools</a>, <a target="_blank" href="https://wave.webaim.org/">WAVE</a> and ChromeVox helped flag contrast issues, label duplication and navigation traps. But human testing mattered just as much. Therefore, a touchscreen laptop was used to simulate real user scenarios, check responsiveness and validate how elements behaved across screen sizes and input types.</p><h2 id="when-customization-adds-complexity">When Customization Adds Complexity</h2><p>Telerik ThemeBuilder and Kendo UI offer strong accessibility features, but when components are heavily customized, unexpected issues can appear. Resolute helped the client troubleshoot several edge cases:</p><ul><li>Buttons built without the base component didn&rsquo;t render properly</li><li>Some forms displayed labels twice to screen readers (e.g., &ldquo;Username Username&rdquo;)</li><li>Blazor components lacked alt-text bindings, requiring a workaround</li></ul><p>None of these problems were dealbreakers, but they showed how expertise matters. Without frontend developers who understand both the framework and accessibility requirements, these issues could have gone unnoticed.</p><h2 id="accessibility--structure--semantics--seo">Accessibility = Structure + Semantics + SEO</h2><p>There&rsquo;s another benefit to building with accessibility in mind: better search engine optimization (SEO). Many of the same practices that support users with disabilities, like using <a target="_blank" href="https://www.telerik.com/blogs/why-semantic-html-matters-introductory-guide-new-developers">semantic HTML</a>, a well-structured HTML DOM (Document Object Model) and meaningful headings, also help search engines understand and rank your content.</p><p>The frontend implementation in this case included:</p><ul><li>One <code class="inline-code">&lt;h1&gt;</code> per page, with clean heading hierarchies for structure like <code class="inline-code">&lt;h2&gt;</code> for sections and <code class="inline-code">&lt;h3&gt;</code> inside components</li><li>Alt-text for all meaningful images</li><li>Descriptive link text and accessible navigation</li></ul><p>The result? A platform that&rsquo;s easier to use, more discoverable and legally compliant.</p><h2 id="knowledge-transfer-matters">Knowledge Transfer Matters</h2><p>Resolute&rsquo;s role expanded beyond design and development work. We trained the client&rsquo;s internal team to maintain and build on the system with accessibility in mind. That included:</p><ul><li>Documenting all accessibility decisions and techniques used</li><li>Providing reusable design patterns in ThemeBuilder</li><li>Running training sessions on WCAG basics and development workflow tips</li></ul><p>Accessibility isn&rsquo;t something you do once. It&rsquo;s a practice. So, we made sure the team could carry that forward.</p><h2 id="final-thoughts">Final Thoughts</h2><p>Accessibility is a shared responsibility&mdash;across design, development and leadership. Our client understood that, and, with the right tools and support, made serious progress toward a platform that works for everyone.</p><p>Progress ThemeBuilder helped streamline and standardize the design-to-code process. Resolute helped connect the dots by aligning compliance, usability and long-term scalability.</p><p>Learn more about how Resolute can help address usability issues, starting with the <a target="_blank" href="https://www.resolutesoftware.com/services/ux-assessment/">UX Assessment</a>.</p><img src="https://feeds.telerik.com/link/23066/17162061.gif" height="1" width="1"/>]]></content>
  </entry>
  <entry>
    <id>urn:uuid:977b9b80-ba9c-49d7-bba8-f289a721b2ef</id>
    <title type="text">Tips for Designing Clickable Components on Your Website</title>
    <summary type="text">To improve the click-through rates, consider these tips when designing buttons and links that move visitors through your site.</summary>
    <published>2025-08-19T15:10:09Z</published>
    <updated>2026-08-27T15:41:53Z</updated>
    <author>
      <name>Suzanne Scacca </name>
    </author>
    <link rel="alternate" href="https://feeds.telerik.com/link/23066/17122261/tips-designing-clickable-components-website"/>
    <content type="text"><![CDATA[<p><span class="featured">To improve the click-through rates, consider these tips when designing buttons and links that move visitors through your site.</span></p><p>Interaction design is a huge discipline that prioritizes how users engage with digital interfaces.</p><p>One goal of interaction design is to capture and direct visitor attention. We can achieve this with animations, transition effects, as well as motion-based designs and media.</p><p>Another goal of interaction design is to engage users to get them to click and convert. There are a multitude of components we might want users to click on throughout their experience. For example:</p><ul><li>Buttons</li><li>Links</li><li>Menus</li><li>Videos</li><li>Forms</li><li>Popups</li><li>Chatbots</li><li>Search forms</li></ul><p>What we want to specifically focus on today are the buttons and links that drive our users deeper into their journey and closer to conversion. We&rsquo;ll look at five best practices when designing these key interaction points.</p><h2 id="best-practices-when-adding-buttons-and-links-to-your-site">5 Best Practices When Adding Buttons and Links to Your Site</h2><p>Links and buttons do a lot of work for us, strategically guiding users from one page in the user journey to the next. So that we don&rsquo;t waste their time or ours, we need to be intentional with how we design these click interactions.</p><p>Here are some tips that will help with this:</p><h2 id="put-thought-into-the-design">1. Put Thought into the Design</h2><p>Here are some questions to consider when designing your clickable components:</p><p><strong>Do your buttons look like buttons?</strong> This could be in terms of shape, shading/fill or depth.</p><p>For example, here&rsquo;s a screenshot from the <a target="_blank" href="https://www.forwardfinancing.com/">Forward Financing</a> homepage:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/forward-financing-buttons.png?sfvrsn=8cd7fd15_2" title="Forward Financing button design" alt="A screenshot from the home page for Forward Financing. One button appears in the top-right corner of the website and header and reads “Apply for Financing”. Another button appears below the description in the hero section and reads “Learn More”. There’s a ghost (hollow) button in the bottom-right corner that’s part of the chat widget which reads “How can we help you today?”" /></p><p>There are three buttons visible:</p><ul><li>&ldquo;Apply for Financing&rdquo; in the header</li><li>&ldquo;Learn More&rdquo; in the hero section</li><li>&ldquo;How can we help you today?&rdquo; in the bottom-right corner</li></ul><p>The two solid buttons in green stick out the most and are clearly buttons. The ghost button in the bottom-right corner isn&rsquo;t as prominent, but it does have a button-like shape, which may convince visitors to click it.</p><p><strong>Are your links easy to spot among non-linked text?</strong> Don&rsquo;t just think about this from a color-contrast perspective. For instance, will readers with vision impairments struggle to make them out?</p><p>Here&rsquo;s a close-up on a blog post from <a target="_blank" href="https://www.ramseysolutions.com/retirement/what-is-a-microretirement">Ramsey Solutions</a>:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/ramsey-solutions-links.png?sfvrsn=64d4bce5_2" title="Ramsey Solutions blog links" alt="In this microretirement blog post from Ramsey Solutions, we see three blue, underlined hyperlinks amongst the black text." /></p><p>There are three hyperlinks that stick out from the surrounding text. It&rsquo;s not just because they&rsquo;re in blue font as opposed to black like the rest of the blog. It&rsquo;s because they&rsquo;re underlined.</p><p>The underline is key as it allows users with visual impairments to be able to detect the links visually without having to notice the color change.</p><p><strong>Do these clickable elements fit with your color palette?</strong> This goes for both the active and hover state.</p><p><strong>Does the click feedback fit with the overall vibe of your site?</strong> For instance, do some animations or transition effects feel disruptive or do they flow with the rest of your brand vibe?</p><p>For these last two questions, I&rsquo;m going to use <a target="_blank" href="https://www.makingsenseofcents.com/">Making Sense of Cents</a> as my example.</p><p>To start, they&rsquo;ve done a good job of committing to a uniform style for the link color transformation. Upon hover, the black text turns to orange.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/making-sense-of-cents-links.gif?sfvrsn=c7706f9c_2" title="Making Sense of Cents interactions" alt="A video from the home page of the Making Sense of Cents website. We look at how hovering over different buttons looks. Most buttons turn the text from black to orange. However, 8 white boxes at the top of the page with light green and red icons animate upon hover." /></p><p>The main problem I see is with the blocks at the top of the homepage and how they react to hover/touch. The wiggle animation feels out of place when compared to the other interactions on the page. For the most part, their other button and link interactions feel very calm. However, these blocks create tension.</p><p>So, this is the kind of thing to think about if you decide to imbue your buttons with animated effects.</p><h2 id="provide-hover-feedback">2. Provide Hover Feedback</h2><p>Designing buttons and links to look like clickable elements is crucial. But so is the follow through (more so for buttons than text links).</p><p>There are a couple of things we&rsquo;d want to see happen when someone hovers over a button.</p><p>First, the cursor should change from an arrow to pointer icon.</p><p>Second, the button&rsquo;s appearance should change. If it&rsquo;s a color change, the contrast needs to be significant enough where someone who can&rsquo;t interpret the colors can still tell that something changed.</p><p>On the <a target="_blank" href="https://www.chase.com/personal/home">Chase</a> homepage, for example, we only see one button change in its hover state&mdash;the &ldquo;See details&rdquo; button in the hero section. The only thing that changes is the background color from light blue to dark blue.</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/chase-button-hover.gif?sfvrsn=3f154a11_2" title="Chase website buttons" alt="In this video, we see a user hover over numerous buttons on the Chase website home page. The only button that responds to hover is the “See details” button in the hover section. There’s a slight color change from light blue to dark blue." /></p><p>This isn&rsquo;t going to provide users with an accessible interactive experience. Ideally, we want every button to provide clear feedback when someone hovers over it.</p><p>Let&rsquo;s contrast this with what we see on the <a target="_blank" href="https://trypennie.com/">Pennie</a> website:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/pennie-button-hover.gif?sfvrsn=737837e8_2" title="Pennie website button hover" alt="In this video, we see a user interact with several of the Pennie website’s buttons and content accordions. One of the buttons changes color from a light blue to a dark blue. At the same time, a right-facing arrow appears within the elongated button shape." /></p><p>This website&rsquo;s first button does a similar color change effect, from a lighter blue to a dark blue. However, the buttons also elongate and an arrow appears when someone hovers over them. We see a similar effect happen over the accordion tabs in the section just below the fold.</p><p>Not every button needs to offer feedback in the form of an icon. However, subtle animation effects like expanding and shrinking can help give users extra confidence that the buttons are indeed buttons and will respond to their touch.</p><h2 id="be-specific-and-clear-with-labeling">3. Be Specific and Clear with Labeling</h2><p>The appearance of our buttons and links will certainly help visitors recognize where clickable components are in our interfaces. In order to give them an extra boost of confidence that a click will be worth their time, take care with how you label the buttons.</p><p>In general, we want to avoid vague wording like &ldquo;click this,&rdquo; &ldquo;go here&rdquo; and &ldquo;this page.&rdquo; &ldquo;Read more&rdquo; and &ldquo;learn more&rdquo; are in a bit of a gray area.</p><p>Here&rsquo;s an example from the <a target="_blank" href="https://peak6.com/">PEAK6</a> website where we see some &ldquo;learn more&rdquo; links:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/peak6-button-label.png?sfvrsn=ee41c4e3_2" title="PEAK6 buttons" alt="A screenshot from the PEAK6 home shows two “learn more” buttons. They appear within company blocks, like for PEAK6 Strategic Capital." /></p><p>Of the 12 primary links on this homepage, nine of them say &ldquo;learn more.&rdquo; Most of them follow a description of one of PEAK6&rsquo;s companies.</p><p>Now, given the context of these particular buttons in the screenshot, &ldquo;learn more&rdquo; makes sense. However, there are ways to get around labeling your buttons with vague and repetitive phrases like these&mdash;especially when you have so many of them on a single page.</p><p>Here&rsquo;s a look at how <a target="_blank" href="https://octus.com/">Octus</a> handles a similar type of content on its homepage:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/octus-button-label.png?sfvrsn=a999fd91_2" title="Octus website links" alt="On the Octus homepage, there’s a section with 4 blocks of “Who we serve”. They’re white text on an all black background. There’s a headline, a description, and a small right-facing arrow in each." /></p><p>In this section, we see four side-by-side blocks describing who the company serves. The &ldquo;learn more&rdquo; button would probably be a natural fit for these, even though it&rsquo;s not an ideal label.</p><p>Instead, what the designer has done is this:</p><ul><li>Replace the button shape or text link with a small right-facing arrow.</li><li>Make the entire block clickable instead of a small component below the text.</li><li>Animate the block so it turns from black to blue.</li><li>Elongate the arrow.</li></ul><p>This is a great way to signal to visitors that a component is clickable without having to resort to repeating the same vague label over and over again. So long as you mark the heading as an H2 or H3, it should also be clear to people using screen readers where the link will take them to next.</p><p>By the way, that&rsquo;s one of the reasons why we try to avoid vague labels: <strong>accessibility</strong>. The <strong>user experience</strong> is another. Also, these labels are useful for <strong>SEO</strong> purposes. By using a descriptive label for buttons and links, search engines can better determine what the purpose and value of a linked page is.</p><h2 id="be-purposeful-about-adding-links-to-a-page">4. Be Purposeful About Adding Links to a Page</h2><p>Information overload is a real problem on the web these days. It&rsquo;s not just because of how much content we throw at someone on a page. It also happens when we give them too many rabbit holes (i.e., buttons and links) to go down at the same time.</p><p>Let me show you what I mean.</p><p>This is the <a target="_blank" href="https://www.getrichslowly.org/start-here/">Start Here page</a> on the Get Rich Slowly website:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/get-rich-slowly-links.gif?sfvrsn=a6f712bb_2" title="Get Rich Slowly web page links" alt="In this video, we scroll down the Start Here page on the Get Rich Slowly website. We see that each section contains at least 3 hyperlinks within it." /></p><p>There are 29 links on this page (not including the 10 in the header and five in the footer). This is way too much for a page of this size. It&rsquo;s also too much for a page that&rsquo;s supposed to be an introduction to the website.</p><p>While it&rsquo;s great that there are so many resources on this site and that it all seems to connect together, shoving this many links at visitors all at once can be hugely problematic. In addition to making the content look cluttered, it could distract first-time visitors from reading through the page in its entirety before getting lost down a rabbit hole.</p><p>It&rsquo;s our job as designers and writers to use discernment when creating pages. We need to decide which content is absolutely necessary <em>and</em> when it makes sense to divert visitor attention to another page. The homepage is one thing. But a critical part of the user journey like this one is another.</p><p>Let&rsquo;s look at another example of a web page with plentiful links. This is the <a target="_blank" href="https://cadencebank.com/personal/checking">Personal Checking page</a> for Cadence Bank:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/cadence-bank-buttons.gif?sfvrsn=9d56c7ee_2" title="Cadence Bank buttons" alt="In this video, we scroll down the Personal Banking page for Cadence Bank. Although there appear to be lots of buttons on the page, the vast majority of them direct visitors to “Open account”." /></p><p>There are a total of 32 links on this page. 12 of them point visitors to &ldquo;Open account.&rdquo; Here&rsquo;s why I think this example works:</p><p>There&rsquo;s a cohesive message that these buttons are telling us. Yes, there are buttons that provide supporting information about personal banking services. And there are some extraneous links at the very bottom of the page which should probably be done away with.</p><p>However, the top portion of this page is devoted to one goal: Getting visitors to open an account. So while there are lots of buttons to choose from, there&rsquo;s a good chance visitors will end up in the same place as they choose their next step.</p><p><strong>Bottom line:</strong> There&rsquo;s nothing wrong with including a link in each section or block&mdash;so long as it keeps the focus on the primary goal and doesn&rsquo;t overwhelm the visitor&rsquo;s decision-making faculties.</p><h2 id="minimize-links-along-the-user-journey">5. Minimize Links Along the User Journey</h2><p>Websites contain loads of information for visitors at every stage of their journey. But behind the scenes, we know there&rsquo;s an ideal pathway that we want them to journey down. If we design it right, they&rsquo;ll naturally take those steps to conversion.</p><p>That said, the amount of options and distractions we put in their way along that path may slow things down. And that&rsquo;s not what we want.</p><p>So, the first thing to do is determine what the key pages are for your conversion pathway. For some brands, it might be as simple as TransUnion&rsquo;s</p><p>This is the hero section on the <a target="_blank" href="https://www.transunion.com/">TransUnion</a> website:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/transunion-home-page.png?sfvrsn=19e13709_2" title="TransUnion home page" alt="A screenshot of the hero section on the TransUnion home page. We see a header that reads “Credit confidence starts here”. Beneath the description is a big yellow button that reads “Your Free Scores & Reports”." /></p><p>There are only two buttons on the entirety of this page and they both say: &ldquo;Your Free Scores &amp; Reports.&rdquo; So does the big yellow button in the header.</p><p>There&rsquo;s lots of info available on the website about the service as well as educational resources related to managing one&rsquo;s credit. However, the homepage doesn&rsquo;t bother with any of that. Visitors are actively encouraged to take the next step in the process and to see their free credit score.</p><p>This is a great example of how you minimize distractions and click options to help most of your visitors take the right journey early on.</p><p>Not every brand can do this though. TransUnion has a very narrow solution, which is why it works. For something like <a target="_blank" href="https://www.trumid.com/">Trumid</a>, however, it would be pretty difficult to build pages with singular calls-to-action.</p><p>That said, what you can do is make the first button and call-to-action on each page take users along the path to conversion. Here&rsquo;s how that looks on the Trumid website:</p><p><img src="https://www.telerik.com/sfimages/default-source/blogs/2025/2025-07/trumid-click-path.gif?sfvrsn=ba396a44_2" title="Trumid user click path" alt="In this video, we see how two pages and two clicks take a visitor from the Trumid home page to the final step of conversion and contact form”." /></p><p>We know that users lose interest the more they scroll down a page. So, if you feel like it would be beneficial to include other buttons and links on the page, just make sure to do so <em>after</em> the primary call to action has been presented.</p><p>This is what Trumid has done.</p><ol><li>On the homepage, the first button invites users to &ldquo;Explore Platform.&rdquo;</li><li>This takes them to the Trading Platform Overview page.</li><li>The first button on this page appears just below the fold and says &ldquo;Get Started Today.&rdquo;</li><li>This takes them to the Get Started page and contact form.</li></ol><p>Users who are ready to convert earlier can always use the &ldquo;Get Started&rdquo; button in the header. Those who aren&rsquo;t ready have other avenues they can go down on these pages. But at least the designer has presented them with the ideal pathway without having to work much for it&mdash;when they&rsquo;re ready to do so.</p><h2 id="wrapping-up">Wrapping Up</h2><p>To help our visitors go where we want them to go, we need to leave a trail of breadcrumbs for them to follow.</p><p>For some visitors, that trail is in the header. For others that want more information and context, they&rsquo;ll hopefully follow the trail we&rsquo;ve created for them on the pages of the site.</p><p>This is why we need to pay close attention to these key interactive components. From how they&rsquo;re designed to their placement and usage on pages, all of these factors matter if you want to improve click-through and conversion rates.</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 to Think Like a Designer</h4></div><div class="col-8"><p class="u-fs16 u-mb0">Use placement and contrast to shape flow and gain clarity. A login form redesign reveals <a target="_blank" href="https://www.telerik.com/blogs/how-think-like-designer">how designers think</a>.</p></div></div></aside><img src="https://feeds.telerik.com/link/23066/17122261.gif" height="1" width="1"/>]]></content>
  </entry>
</feed>
