UI patterns for AI features in document editing workflows
Exploring how Copy.ai, Jasper, Notion and Microsoft Copilot for Word provide LLM features in document editors
This is a weekly deep dive into a UI design pattern for AI products from the product library at Teardowns.ai — by Tommy Geoco
So, you’re designing UI for large language model (LLM) prompt features for a document editor and you’re not sure where to start.
Let’s take a look at a few examples on the market.
The Challenge
You need to provide the traditional document editing workflow that customers are familiar with while introducing the capabilities of LLM prompting.
The basic scaffold of a prompting workflow includes:
Describing a prompt
Reviewing and editing the generated response
Inserting the response into the document editor
This might also include tertiary workflows like re-generating responses, defining parameters, choosing from templates, and so on.
The Patterns
I took a look at Copy.ai, Jasper, Notion and a preview of Microsoft’s Copilot for Word to identify how they’re approaching this challenge as of April 2023.
We’ll explore two UI patterns that became evident right away:
Inline Editing
Dual Windowed
Let’s dive in.
Pattern 1: Inline Editing
This pattern involves providing a prompting experience directly in the document editor through inline popups, dropdown menus, and small sidebars.
Example 1: Copy.ai
Copy.ai is an AI-powered writing assistant that helps users write better marketing copy and content.
They provide a fullscreen document editing view depending on the entry point you used from the navigation to get there.
Their inline editing UI is limited to rewriting your existing content by generating a prompt from a highlighted selection.
Steps include:
Highlight text from document
Click rewrite from contextual dropdown
Note: The dropdown appears immediately upon highlighting the text. Right-clicking is not necessary.Wait for AI response to generate in a popup
Note: The response pre-loader uses a skeleton content visual to indicate the AI is generating the content.Navigate between 5 available responses in the popup
Note: The contextual actions are provided in a popup dialog positioned relative to the text selection. There does not seem to be the ability to re-generate responsesClick accept on the desired response
Example 2: Jasper
Like Copy.ai, Jasper is also an AI-powered writing assistant that helps users create content. While competitors, their approach is a little different.
For starters, they provide the ability to toggle between document views with three modes: focus, power, and chat.
Their inline editing experience is provided in “Focus mode”.
They provide a few AI features in the document toolbar, but for this teardown we’re going to look at the prompt sidebar. This sidebar provides the user with a lightweight form for editing prompt parameters.
Steps include:
Input content description
Note: You can toggle the available levers of the prompt builder. Indicators are given for the maximum character or selection limits. Tooltips are provided next to each field label with more details.Input tone of voice
Input keywords
Input language
Input output length
Click “Compose”
Note: AI response is generated in the document editor alongside a purple text cursor labeled “Jasper”Review response
Click “Compose” to continue response
Note: The contextual actions are provided in a fixed, floating actions bar at the bottom of the document. It includes actions like generate / re-generate content and change the length of responses (S, M and L)
Example 3: Notion
Notion is a collaborative productivity and organization tool for things like note-taking, knowledge management, and project management.
Unlike the first two examples, Notion did not come to market as an AI tool. Instead, they’re an example of a product integrating AI features into their core offering.
Also unlike Copy.ai and Jasper, all of Notion’s AI features are accessed through a dropdown menu within the document editor.
For this teardown, we’ll look at the summarization feature that allows the user to generate an outline prompt from their selected text.
Steps include:
Highlight text
Access AI menu
Select “Outline”
Review output
Select insertion option
Example 4: Microsoft Copilot for Word
Microsoft Word is the word processing program in Microsoft’s suite of productivity tools and is currently part of Microsoft’s Copilot beta.
While I don’t have access to the Microsoft Copilot beta, we’re able to infer a few UI decisions they’ve made with inline editing patterns from their preview.
Microsoft provides an inline container that includes multiple functions like text inputs, prompt templates, file summarization, idea generation, and response editing which allows the user to insert the final result into the document.
Of all the inline editing patterns explored today, this appears to be the slickest. I’m looking forward to getting my hands on it to confirm.
Pattern 2: Dual Windowed
This pattern involves providing a prompt-building or chatbot experience alongside the document editor, usually as a separate but equally prominent window or column.
The goal is to give the user separate screen real-estate to bounce between two individual workflows (prompt building and document editing).
Example 1: Copy.ai’s Prompt Builder
Copy.ai provides prompt parameters and allows the user to edit them step-by-step in their “Tools” feature. This can be accessed from the global navigation or from the “Use Copy.ai Tools” button in the header of the document editor.
This view includes 3 columns:
Left column for selecting a prompt template.
Middle column for walking through a step-wizard prompt building workflow.
Right column for the editing the document.
Note: In this view, you can select to close the document editor to focus on the prompt building workflow entirely.
Steps include:
Select prompt template
Input template parameters
Note: Indicators (like optional and character limit) are provided alongside form fields. They also allow you to save the prompt templates you create.Click create content
Review a list of AI responses
Select Copy from desired response
Paste response into document editor
Example 2: Copy.ai’s Chatbot
While chatbots deserve their own teardown (and we’ll cover those in issues ahead), it’s notable here because of how they include it alongside the document editor.
Steps include:
Input desired prompt
Review AI response
Click “add to editor” to populate to document editor
Example 3: Jasper’s Prompt Builder
When using the prompt builder, the document editor defaults to the “Power mode”.
Like Copy.ai, this view includes 3 columns:
Left column for prompt templates
Middle for the prompt building workflow
Right for document editing
Steps include:
Select “power mode” from the document header
Select your desired prompt template
Input the prompt parameters in the workflow
Note: The prompt building wizard is a vertically scrollable step-wizard that separates parameters to be included in the overall prompt. You can specify things like tone of voice, number of responses to be output, and toggling certain parameters on or off.Generate the response
Example 4: Jasper’s Chatbot
In this view, equal space is shared between a left column for the chatbot workflow and a right column for the document editor. Jasper’s refers to this as “chat mode”
Steps include:
Select the Chatbot toggle from the document header
Input desired prompt
Review AI response
Note: The does not appear to be any triggers for adding the content to the document. Implied copy and paste.
Takeaways
Let’s recap:
Designing UI for large language model (LLM) prompt features in a document editor involves providing a traditional document editing workflow while introducing LLM prompting capabilities.
Two UI patterns: Inline Editing and Dual Windowed.
Inline Editing involves providing a prompting experience directly in the document editor through inline popups, dropdown menus, and small sidebars.
Dual Windowed pattern involves providing a prompt-building or chatbot experience alongside the document editor, usually as a separate but equally prominent window or column.
Products that implemented AI on top of an existing core offering opted for inline editing only versus AI-first products that provide various workflow entry points.
Have you seen an interesting way to solve similar UI challenges or are you currently working on a pattern you’d like me to check out?
Shoot me a comment below, check out our library at Teardowns.ai, and subscribe to AI Patterns for more weekly UI design teardowns of AI patterns.
Nice!
I'd be super keen on trying it out in some of the projects soon.
Some solutions are moving toward bundling user input (prompts) into buttons and menu items, like "summarize this." An understandable response to the UX challenges, but I wonder if it's running counter to the newfound freedom of expression the plain ol' text input box seems to have generated.
Language is the UI, and prompts are the new apps.