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:

1. Describing a prompt

2. Reviewing and editing the generated response

3. 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:

1. Inline Editing

2. 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:

1. Highlight text from document

2. Click rewrite from contextual dropdown
   Note: The dropdown appears immediately upon highlighting the text. Right-clicking is not necessary.

3. 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.

4. 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 responses

5. Click 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:

1. 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.

2. Input tone of voice

3. Input keywords

4. Input language

5. Input output length

6. Click “Compose”
   Note: AI response is generated in the document editor alongside a purple text cursor labeled “Jasper”

7. Review response

8. 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:

1. Highlight text

2. Access AI menu

3. Select “Outline”

4. Review output

5. 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:

1. Left column for selecting a prompt template.

2. Middle column for walking through a step-wizard prompt building workflow.

3. 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:

1. Select prompt template

2. 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.

3. Click create content

4. Review a list of AI responses

5. Select Copy from desired response

6. 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:

1. Input desired prompt

2. Review AI response

3. 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:

1. Left column for prompt templates

2. Middle for the prompt building workflow

3. Right for document editing

Steps include:

1. Select “power mode” from the document header

2. Select your desired prompt template

3. 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.

4. 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:

1. Select the Chatbot toggle from the document header

2. Input desired prompt

3. 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.

---