The Art of AI Conversation: AI Chat Pattern (ChatGPT vs. Grammarly GO)
With ChatGPT being all the rage, you’d think the AI chat design pattern would be so easy as to be self-explanatory. Not quite.
With ChatGPT being all the rage, you’d think the AI chat design pattern would be so easy as to be self-explanatory. Not quite. In this newsletter installment, we will dive deep into this familiar pattern and pit the classic ChatGPT implementation in a head-to-head battle against the newly released Grammarly GO AI assistant to demonstrate the salient points of this vital design pattern.
When discussing the AI chat pattern, starting with a good example is instructive. Of course, the (by now) canonical ChatGPT implementation immediately springs to mind:
Our original champion, the one who started it all…presenting ChatGPT, in the red corner! The interaction is seemingly straightforward, and comprised of just two apparent steps:
User types in the query
AI bot responds
Pure perfection, right? Not quite.
IMAGE 1: The Simplicity of ChatGPT's AI Chat Implementation.
The Problems with Simplicity
While this epitome of simplicity works for most applications, there are several serious issues with the simple ChatGPT pattern:
It is not easy to see how to configure the response. There are no prominent “knobs to turn,” so to say. This is significant, as ChatGPT actually has a fair number of “knobs,” as demonstrated by the ChatGPT Playground ( https://platform.openai.com/playground ) interface shown below, which offers up some of these “knobs.” The original ChatGPT offers no visible controls.
IMAGE 2: ChatGPT offers many more "knobs."
It’s not easy to come up with an initial idea query to run. Although there are a handful of initial queries on the home page, they are very rudimentary and offer only a minimum of guidance. Also, these suggestions immediately disappear after the user starts the conversation.
IMAGE 3: ChatGPT's initial suggestions are very limited.
Although the history exists on the left side of the screen, the panel is very narrow, so AI has to simplify the query to fit it into the panel – “give me a midjourney prompt for a realistic marble roman statue” becomes “Roman Statue Prompt.” Would similar longer queries receive the same title? If the query is not exact, how does the user know which is which?
IMAGE 4: ChatGPT only saves the human query, and even that is paraphrased.
Finally, Greg’s favorite annoying feature: it is hard to edit the original query. To tweak the query, the user is forced to hover over and click the edit icon, then click in the text to make the edits and resubmit, which can be awkward. For example, how does a user tell ChatGPT that this response was not the correct query for Midjourney? (See image 4.)
Although the feedback loop control (thumbs up/down) is present, it is positioned near the top of the response, so it does not seem to be a natural or recommended next step. (See image 4.)
Finally, although the history of prompts is preserved in the history panel, there is no way to save the AI responses. This choice is significant, as ChatGPT never answers the same question the same way twice: every time the user re-runs the query, the answer will be different. (See image 4.)
In the blue corner, we have the challenger, Grammarly GO AI assistant. What the Grammarly interface lacks in simplicity, it more than makes up for in utility. The workflow is made up of the following steps:
The optional step where the user configures the “voice” or formality & tone of the response
AI provides extensive query recommendations
User types in the query
AI bot responds
An obvious feedback loop (and a warning: “Don’t forget to check for inaccuracies!”)
Keeps the AI responses in history for this session only (does not keep the request)
How does GO stack up against our reigning champion, ChatGPT?
Grammarly GO vs. ChatGTP
Here are five main points we find significant:
Although limited, the initial configuration in GO is better than the complete lack of obvious controls provided by ChatGPT. Additionally, “voice” is a rubric already quite familiar to heavy users of Grammarly, so it will likely be very well received by the intended audience.
IMAGE 5: Grammarly GO configuration via "voice"
Although both UIs offer three initial suggestions, we like the more extensive library GO offers via an additional click. It would be even better if the suggestions were personalized.
IMAGE 6: Grammarly GO offers a long list of initial suggestions and makes it easy to engage
There is an obvious and robust next step CTA (Call to Action) in GO, which is non-obvious (and thus requires thinking and cognitive friction) in ChatGPT. Not only that, the interface seems to assert that some next steps are better for specific actions: for example: “Make it Persuasive” Make it Assertive,” and “Sound Confident” are called out specifically as best bets for the Generate Ideas for Blog Post task. The next steps “best bets” choices change depending on the previous steps in the flow. For the second round, we get “Improve it,” “Shorten it,” and “Make it Assertive.”
IMAGE 7: Grammarly GO offers Next Steps, which vary with the flow.
GO saves both prompts and responses, but only within the same session. The entire content goes away as soon as you close the side-car widget. In contrast, ChatGPT saves only the queries. As in ChatGPT, Grammarly GO appears to change the answers to the same query when it is re-run, and that, in combination with making users pay for the service, makes it especially important, in our opinion, to save both previously run queries AND responses between the sessions. (See Image 7.)
Finally, the Feedback step is represented in GO as a flag, explicitly intended to report bad suggestions – there is no “thumbs up” action as in ChatGPT. The flag is placed appropriately at the bottom of the message and is much easier to find. It is a bit more extensive than the thumbs up/down that the ChatGPT offers, but the Information Architecture of the "flag" response flow is a bit awkward.
Do we have a winner?
So which is better, the simplicity of ChatGPT or the emoji-barfalicious Grammarly GO? Well, the answer is, unfortunately, “it depends.” What we have here are two “bookends” examples, each extending the AI chat design pattern into a particular design direction. One implementation is not necessarily always better than the other – the ideal implementation depends on your specific use case and audience. We hope, however, that the comparison has been instructive.
When you design your own AI chat interface, consider the following points:
Do you need to train or configure your AI somehow to improve the quality of responses? Training is often optional for specialized AI assistants but can be very helpful for more generic AI chat tasks.
If you do decide to allow users to configure the AI using “knobs,” consider which controls to surface, and be sure to use the language they can understand. Not everyone understands the “Top P” parameter Chat GPT Playground uses, for example (See Image 2 above).
If you do offer suggestions for improvement, make sure they work. Often, further iterations make results worse, not better. This is especially obvious in GO, which, as shown below, has somewhat lost the point of the original request in just three steps. Although that is not quite as bad as some Midjourney iterations, the AI suggestions will have to improve. In the meantime, perhaps curb your enthusiasm for suggesting improvements to the result or suggest pivots or branches instead. For example, instead of offering a choice to “make it shorter” or “Improve it,” try “suggest related topics” or “show some examples of good queries”, etc:
IMAGE 8: Grammarly GO "evolves" the response.
Provide inspiration! The more, the better, the … ahem, better! We find that the quality of the AI response 90% depends on the quality of the query – in other words, “garbage in, garbage out.” Anything you can do to help the user create a better query will go a long way toward a good overall UX for AI. Check out this fantastic video for examples of how the author uses ChatGPT to write killer MidJourney queries: https://www.youtube.com/watch?v=Asg1e_IYzR8 Could you include better query inspiration as part of your new AI tool before the user has to type anything? If so, that’s a sure way to stand out in an increasingly crowded space!
Finally, the Feedback loop is critical – try to carefully design the placement and interaction of the feedback controls to make it easy and natural to capture the initial response and then make it engaging for the user to elaborate on their initial simple “good/bad” feedback. Can you use AI chat in the feedback itself? (Wow, how very meta!)
So, in conclusion, if this missive has been instructive, be sure to smush the [Subscribe] button below so you don’t miss the next issue of our newsletter, “UX for AI: The Future of Communication with our Robot Overlords” ahem… actually our newsletter is titled “UX for AI: UX Leadership in the Age of Singularity” and we look forward to seeing you next week.