Updated on 30th October 2024 by oykun

Need design experience for your AI product?

crucial.design

AI Design Patterns

Documenting how design is evolving with AI

PATTERN 01

Open input

This pattern enables natural, conversational input for users to interact with the AI products.

It is a pretty familiar text field for common users. However the limitations arises once user is not clear on what they can type and ask to AI. After all prompting skills are not widespread yet and in some cases lack of details provided by the user may cause AI to produce undesired results.

This is where the "Suggestions Pattern" comes handy to educate users what can be asked.

This input also often comes with additional types such file attachment, voice input and more.

Contextual submit is also a common item among AI products. Submit button to turn into Pause/Stop/Continue states.

Examples:

ChatGPT has a very clean Open Input pattern which supports file input. To help users for prompting, they have suggestion pills below the input.

Perplexlity has a bit more features baked into the Open Input such as
- Focus mode to customise your sources and purpose,
- File attachment to process on the documents
- Pro Search switch to allocate more process power and encourage users to upgrade to paid account

Sana.ai keeps the Open Input at the bottom as in the conversation page and separates File and Images which is an unusual choice since other ai products treats images as file and combine them. Sana.ai also has "Sources" selection represented as @ and Options which gives user integration options.

Claude.ai has 2 Open Input by keeping it clean on the home page and bringing additional features into the input in the conversation page. It offers file attachment like others do, one unique offer Claude gives is the "Take a screenshot" feature represented with the camera icon.

PATTERN 02

Follow up card

coming soon…

Need design experience
for your AI product?

crucial.design