Classic components such as buttons, cards, or select menus assume that an answer arrives complete all at once and turns out the same for the same input. Generative AI meets neither of these assumptions. Interfaces for it nevertheless don't have to be developed from the ground up, since five patterns are already described in published design systems and well-known products.
1. Label what comes from the AI
With Carbon for AI, IBM has introduced a dedicated extension of its system. It comprises a label and a consistent visual treatment for all AI-generated content, combined with an explanation of how the result came about. Cloudscape, the design system from AWS, has a dedicated label for generated output for this.
2. Show that work is in progress
Answers arrive with a delay and piece by piece. For this, Cloudscape describes loading states and a pattern that shows the intermediate state of processing. Users should be able to tell whether the system is still working or done.
3. Suggestions you can accept or ignore
Faint suggestion text in the input field, accepted with the Tab key, is familiar from code editors with AI completion. It is important that the suggestion does not interfere with input. Typing something else or pressing Esc dismisses it.
4. Visibility into what the system remembers
ChatGPT shows a list of saved memories in its settings, which can be deleted individually and, depending on the version, also edited, plus toggles to turn the feature off. A useful minimum standard is that users can turn the feature off, view the entries, and delete them individually.
5. Accessible streamed answers
While an answer is coming in, a screen reader should not read out every fragment. The ARIA specification provides aria-busy for this. The attribute indicates that a region is currently being changed and assistive technology can wait before announcing it. The answer area is a live region with aria-live="polite". While the answer is coming in, it has aria-busy="true"; once it is complete, this is set to false and the answer is announced as a whole. The behavior with common screen readers has to be tested, since support is inconsistent.
What these patterns don't cover
Atlassian has also published guidelines for interaction with AI. These five patterns cover the normal case. Handling wrong answers requires a separate discussion and is the subject of the next part.
From the series “Design Systems and AI”. Previous: Prototypes from your own system: what Atlassian reports. Next: When the model is wrong: designing errors as a state.
Want to build a digital product with a system?
Start a project