When it comes to designing a user interface (UI), an AI copilot is a useful element that can help users perform tasks and get answers to questions. Thanks to recent breakthroughs in large language models, AI copilots are becoming more common, especially in software applications that require a lot of manual input or have complex workflows.
AI copilots are often designed as chat-like interfaces that can be called up from a floating button in the bottom right corner of the screen.
In this guide, we will explore the essential UI/UX considerations and best approaches for AI copilot design, going well beyond the basic chatbot-like approach to create a better user experience.
Design Considerations
The first step in designing an AI copilot is to start from first principles and determine the purpose of the copilot. We should specifically take a look at the ways in which AI copilots differ from chatbots and how this affects the design.
1. Task Execution
Generally, chatbots are capable of providing information and answering questions, but they are not designed to perform tasks. There are sometimes exceptions for simple, pre-determined tasks like "Book a Meeting", but these are simple enough that they do not merit much change in design.
AI copilots, on the other hand, are expected to perform a wide range of tasks on behalf of the user—ideally, any task that the user could perform themselves. This has some important implications on the design of the copilot:
- Task Approval: Since the copilot will have the power to execute potentially destructive operations, it is important to provide the user with a means of approving or rejecting the proposed action before it is executed.
- Task Prediction: If the user begins to perform a series of repetitive or related tasks, the copilot should be able to predict the next task and offer to perform it for the user, in an unobtrusive way.
2. Text Suggestions
An expected feature of AI copilots these days is the ability to seamlessly integrate with any text editors in the application to provide smart suggestions as the user types. Similar to autocorrect or autocomplete features, these suggestions can help the user write more quickly.
3. Smart Search
AI copilots should be able to provide smart search results based on a user's query. This means that rather than simply returning results that include the keywords in the query, the copilot should be able to understand the user's intent (even for complex searches like "Show me the documents related to my schoolwork") and return relevant results.
AI Copilot Design Patterns
The natural first approach to designing an AI copilot is to create a chatbot-like interface with some additional features, so let's start there and then explore some design patterns. Note that these can be combined in various ways to create a unique copilot design.
1. Chatbot With Superpowers
In this approach, we start with a chatbot interface like those already popular in many applications, like Intercom's chat widget:
Then, we add some additional features to turn the chatbot into a true copilot.
First, we allow for sending proposed actions to the user as a message. When the copilot system determines that the user is trying to perform a task or set of tasks, it can send a message to the user with the proposed tasks, allowing the user to approve or reject them. We use this approach as of the time of writing at Rehance:
Next, we need a way for the copilot to propose actions to the user even when the user has not directly engaged with the chat, based on the user's behavior in the application. This one is pretty easy, as we can have the user receive a message (and an associated notification bubble) when the copilot has a suggestion for them.
In this approach, smart search and text suggestions would need to be implemented separately, as the chatbot interface is not well-suited to these tasks.
2. Search-Based Copilot
The second AI copilot design pattern is to upgrade the search bar in your application to be able to perform tasks and provide suggestions. This is a familiar design pattern, but may not allow for as robust of an experience as a chatbot-style design.
Here's an example of how a search-based AI copilot might look in a web application:
In this approach, the search bar is the center of the experience, but there's no graceful way to handle the approval step for tasks. This means that the copilot will need to be more conservative in the tasks it executes, as there is no way to ask the user for approval.
However, the search-based approach may be more trusted by users, as it's a familiar design that doesn't have the same (often negative) connotations that chatbots have.
3. Suggestion-Based Copilots
The third design pattern is to use tooltips or other UI elements to provide suggestions to the user. This is most commonly used for text suggestions (like in Gmail and Docs), but can also be used for task suggestions.
For example, say you have "New Document" button, and the copilot notices that the user is creating a set of documents with similar names. It could render a tooltip next to the button offering a shortcut to create all the documents at once.
This is a very tricky design pattern to get right, as tooltips can be intrusive and annoying if not implemented well. However, when done right, they can provide a very smooth experience for the user, without the friction of a chatbot.
The obvious downside here is that the user cannot initiate their own tasks, but must wait for the copilot to suggest them. This is why the suggestion-based design pattern should be paired with the search-based or chatbot-based design patterns to provide a complete experience.
Best AI Copilot Design: A Hybrid Approach
The best AI copilot design will likely be a hybrid of the three design patterns we've discussed.
For example, at Rehance, we use a chatbot interface to allow users to interact with the copilot directly, but we will also soon be adding text suggestions and proactive task suggestions to provide a more seamless experience.
In this hybrid approach, the user can:
- Directly interact with the copilot when they have a question or need to perform a task that they don't know how to do.
- Receive text suggestions as they type, to help them write more quickly.
- Receive proactive task suggestions when the copilot notices that they are performing a repetitive task or a task that can be automated.
- Use the search bar to find information or perform tasks that they know how to do, but don't want to navigate through the UI to find.
This approach provides the user with a wide range of options for interacting with the copilot, allowing them to choose the method that best suits their needs at any given time.
Conclusion
AI copilot design is certain to change and evolve in the coming years as more companies adopt this technology. However, by starting with the design considerations and design patterns we've discussed here, you can create a copilot that is both useful and user-friendly.
Remember that the best design will depend on the specific use case, so be sure to test your design with real users to ensure that it meets their needs.