Overview

There is no one-size-fits-all solution for interacting with Generative AI. These AI Placement guidelines focus on providing consistent options and rules when positioning Gen-AI patterns on the screen. The design of the placement variants considers various AI integration scenarios and generated content types and sizes.

Conversational

Conversational-style interaction is the most popular approach when dealing with Generative AI. The placement of the AI largely depends on the content the AI will generate. Determine factors are complexity, content volume, and developed object size.

Docked

The docked placement variant is one in which the AI sandbox is positioned on the end side of the product. When shown, the entire product shrinks to make space for the AI. The AI is displayed in its default width. It can be resized if placed in a Responsive Splitter pane.

AI Placement - Docked variant on desktop

Floating

The docked placement variant is one in which the AI sandbox is inside the product and is floating over the content area. The AI is displayed in its default width and can be resized or repositioned on the screen.

AI Placement - Floating variant on desktop

Floating - Maximized

The floating AI can be maximized to cover the entire product area and display as much conversation as possible.

AI Placement - Maximized variant on desktop

Floating - Minimized

The floating AI can be minimized to reveal and interact with the product area while keeping the AI conversation active. The AI can be automatically minimized when transferring an AI-generated object to the product canvas.

AI Placement - Minimized variant on desktop

AI 'Magic' Button

AI 'Magic' Button is an interaction in which a button replaces the AI prompt. When clicked, it executes a highly contextualized and engineered prompt, and the result is displayed in another part of the screen. The button placement should respect the standard for action placement.

See also:

AI 'Magic Button' - Usage Guideline

UX Consistency Standards

Full Page

The AI response can apply to any page part when the Magic Button is placed in the page header.

AI Placement - Full Page on desktop

Section

The AI response can apply to any section part when the Magic Button is placed in a section header.

Examples: Tables, Lists, Forms, etc.

AI Placement - Section on desktop

Inline

The AI response can apply to any object part when the Magic Button is associated with that object.

Examples: Tables, rows, list items, form inputs, etc.

AI Placement - Inline on desktop

Embedded

The embedded AI interaction Is the same as the Magic Button interaction but replaces the button with an AI Prompt. The prompt is highly contextualized and engineered to produce consistent results.

AI Placement - Embedded - Desktop

Responsiveness

Not all AI placement options are available on mobile devices. Moreover, in some cases, the AI has to reside in a minimal space. In such cases, applications must decide which of the available variants to choose for the type of content they generate and the interactions they must support.

Tablet - Landscape

Tablets in landscape orientation are the closest to their desktop counterparts. Sometimes, tablet screens can have more pixels than small desktop laptops. However, the touch-optimized component sizes take extra space and reduce what is available to AI.

Conversational

All desktop variants are also available on tablets in landscape orientation.

Magic Button

All desktop variants are also available on tablets in landscape orientation.

Embedded

All desktop variants are also available on tablets in landscape orientation.

Tablet - Portrait

Despite having the same resolution, portrait orientation tablets provide limited horizontal space to display content.

Conversational

When changing tablet orientation to portrait - switch from docked to floating variant.

Magic Button

All tablet landscape variants are also available in portrait orientation.

Embedded

All tablet landscape variants are also available in portrait orientation.

Phone Variants

On mobile phones, the AI interaction takes the full width of the screen.

Conversational

Just as on tablets, the docked variant transforms into a flowing mode. On phones, the available flowing methods are maximized and minimized. The floating and floating maximized are identical.

Magic Button

All tablet variants are also available on phones.

Embedded

All tablet variants are also available on phones.

Resources

Design Resources

Figma Design File - AI Placement