By
·
5 minute read
At Zen AI, we've been developing multiple applications for AI assisted software engineering powered by large language models like GPT-4. One of our key offerings is Zen Design, specifically tailored for digital designers. This application empowers designers to efficiently create essential project artefacts, such as project visions, user journeys, glossaries, and backlogs. Importantly, Zen Design simplifies the process of incorporating existing project documentation into the design workflow.
We have noticed some nice user experience design patterns from other applications but also learned what makes a bad and good user experience the hard way while building our own systems. This blog post shares these insights, focusing on system constraints, user interactions, and error handling to enhance LLM application UX.
System Constraints in LLM based Apps
Creating apps with large language models comes with certain constraints:
- Conversational Interactions: Users refine project artefacts like backlog items chatting in a back-and-forth way, much like a conversation. They send a message, and the model replies, leading to a series of exchanges. Though users might want to change past messages and influence the conversation afterwards.
- Variable Responses: LLMs are designed to follow user commands but they don't always give the same answer to the same question. Their responses can vary each time. Therefore, users might generate multiple versions of an answer.
- Gradual Text Display: These models produce text bit by bit, which means the complete response appears gradually, not all at once. This adds waiting times for the user where they want to observe the current status.
Optimizing Model Output and Readability
Given that interaction with large language models is predominantly text-based, enhancing the reading experience is crucial. Ensuring text is delivered in a user-friendly manner not only improves comprehension but also user satisfaction
Smooth Text Streaming
As the model takes some time to generate the entire text, such as a roadmap of epics and stories, it is preferable for users to see the text stream as it is generated, rather than waiting for the model to complete. This way, the generated text appears to be written in real-time, enhancing the user experience. Some APIs, like the OpenAI API, stream output by default, displaying it smoothly in the user interface. However, others, like the Azure OpenAI API, deliver text in larger, more noticeable chunks that can disrupt the reading flow. In such cases, you may need to incorporate a typewriter effect into your UI to break down these larger chunks into smaller segments, allowing for smoother streaming. Achieving seamless streaming is complex, as it involves managing varying delays in how text chunks are delivered by the APIs.
Enhanced Scrolling Experience
As the model generates text, there may be instances where the volume of text exceeds the visible area of the current window, like when a complete project overview containing the vision, user journeys and technical aspects is generated. For optimal user experience, it is beneficial to automatically scroll to the latest portion of the message, ensuring users always view the most recent text. However, users should also have the flexibility to disengage from this automatic scrolling to read at their own pace. To achieve a pleasing scrolling effect, implement automatic scrolling when the user is at the bottom of the window where new text appears. Additionally, disable the automatic scrolling if the user moves away from the end, allowing them to control their reading experience.
Giving the User Control
Ensuring users have the power to influence the flow and outcome of their interactions with LLM based system not only improves the user experience but also enhances the utility and adaptability of the application.
Stopping Text Generation
Sometimes the user might notice that the answer of the model is not what they wanted from the very first few sentences. Then they already know that further model output is not valuable to them and they probably want to change the instruction that they gave to the model. To be able to do that they need to be able to stop the generation of the model. It is frustrating if you can't stop the generation and have to look at the model outputting more and more invaluable text.
Version Reversion Capability
In many user interfaces, it is possible for users to regenerate a model's response if the initial answer is unsatisfactory. Users can also edit their instructions to refine the output. In such scenarios, it is nice for users to be able to revert to previous versions of either their instructions or the model's responses. The ChatGPT user interface addresses this issue effectively by organizing the conversation into a tree structure. When a user modifies a message, a new branch is created where the conversation continues, yet they can still access the original branch of their conversation tree. In contrast, less sophisticated UIs may not preserve past iterations of instructions or outputs, resulting in a loss of user progress.
Knowing what is in the context
In some applications users can add documents to the context. For example in an IDE where they can add a code file to the model's context. Or in our Zen Design application where users can add project artefacts like a description of the data model and architecture to the context. For a more intuitive user experience, it’s essential that users have clear visibility into the current context that the model is operating within. Knowing which files or texts are included helps users understand the basis of the model’s responses.
Being able to Control what is in the Context
In some apps, like our Zen Design tool, users need to add extra details to the model's context, such as project descriptions and user journeys, to help generate artefacts like epics and roadmaps. Similarly, in the Cursor IDE, users might want to include additional code files beyond the one they're currently viewing. For instance, if looking at a user interface file, they may also want to add backend code files to fully represent the system. In Cursor IDE, this is done by using an @ symbol to bring up a file selection tool. In Zen Design, users can choose project items stored in the app to start a chat. Without easy ways to add these items, users might have to resort to cumbersome methods like copying and pasting text, which can become frustrating quickly.
Access to Previous Conversations
Users often need to revisit past conversations with the model like when they first scoped out a project idea. Therefore, it's important for applications to save these exchanges, allowing users to easily navigate to and review older dialogues. If these conversations aren't stored, users may become frustrated, feeling as if they've lost valuable information or context from their previous interactions.
Output Placement Control
Users often need to use the model's output in different locations like Github or Jira, not just view it. Therefore, systems should facilitate placing the output where it's needed. A simple feature like a 'copy to clipboard' button can greatly enhance usability by making it easy to transfer text. More advanced integration, like in the Cursor IDE, allows users to insert generated code snippets directly into the relevant file. Similarly, our Zen Design Chrome extension streams the model's responses into any selected text field, such as a Jira issue, streamlining the workflow and enhancing productivity.
Error Handling in Model APIs
Error management is crucial in any system to ensure users are informed about the application's status.
Managing Delays
It's common for delays to occur, such as the time taken for the model to start streaming its response. The user interface should communicate these waiting periods effectively, for instance, by displaying an empty message window with a loading animation, like moving dots, to indicate that processing is underway.
Addressing Errors
When the API encounters issues, like content being blocked due to policy violations or reaching rate limits, these errors must be transparently conveyed to the user. It’s important to not only inform users about the presence of an error but also guide them on how to proceed, ensuring they understand how to rectify the situation or continue using the application effectively.
Discover the Future of Digital Design with Zen AI
In summary, our exploration into optimising user experiences with AI-powered tools like Zen Design at Zen AI highlights the importance of smooth interactions, error handling, and user control in software applications. We invite you to see firsthand how Zen Design can transform your digital design process. Visit us at http://getzenai.com and sign up for a demo if you're interested in experiencing the capabilities of our AI-assisted tools. Discover the difference that intuitive, user-focused design can make in your projects today.