Best practices for building collaborative UX with Human-AI partnership
Tags: ux, ai, beginners, programming
Published: 2023-11-30 07:04:58

In today’s digital age, it is not easy for any business to work without the application of artificial intelligence (AI). Especially for those in retail or consumer market, AI has now become the integral aspect of their growth. If it is rightly (read: responsibly) used then it ensures the improvement in overall customer experience and helps drive sales. I recently completed a <a href="https://www.linkedin.com/learning/ux-for-ai-design-practices-for-ai-developers/designing-for-ai">course</a> by <a href="https://www.linkedin.com/in/johnmaeda">John Maeda</a>, VP of Design and AI at Microsoft where he discusses a few essential principles for building remarkable user experience (UX) with the <a href="https://news.microsoft.com/source/features/ai/microsoft-outlines-framework-for-building-ai-apps-and-copilots-expands-ai-plugin-ecosystem/">AI copilot stack</a> in real-world applications. These principles focus on creating a collaborative user experience rather than a pretty UX.
<h1>Collaborative UX</h1>
Collaborative UX is a concept that recognises the importance of collaboration between humans and AI in the design and development process. When building AI copilots, it is crucial to understand that the user is the pilot and the AI is the copilot. The success of the copilot depends on the skills and expertise of the pilot (human). Collaborative UX aims to establish a strong partnership between humans and AI, ensuring that the AI copilot complement the human pilot rather than replacing them.

There are several collaborative UX patterns that help establish and maintain the pilot-copilot relationship. I have summarised a few of them below:
<h2>AI Notice Pattern</h2>
One of the collaborative UX design patterns that serves as a reminder to users that the information they are interacting with is generated by AI, is referred as AI Notice Pattern. This pattern encourages users to critically assess the AI’s output rather than blindly trusting it. It acknowledges the non-deterministic nature of AI, emphasising that while AI can offer valuable insights, it is not foolproof and may occasionally produce inaccurate or incomplete results. The presence of AI in the user experience is highlighted which fosters a collaborative relationship between humans and AI and empowers users to make informed decisions.

The implementation of AI Notice Pattern involves the usage of visual cues or textual indicators that clearly state the information is AI-generated. This can be done through notifications, disclaimers or prompts which encourage users to question or verify the AI’s output. The pattern aligns with the broader concept of collaborative UX stressing the importance of human-AI collaboration and active user involvement in the decision-making process. By incorporating this pattern into AI-powered applications, designers can create more responsible and user-centric experiences.

[caption id="attachment_31814" align="aligncenter" width="970"]<img class="wp-image-31814 size-full" src="https://arafattehsin.com/wp-content/uploads/2023/10/ainotice.png" alt="AI Notice Pattern" width="970" height="676" /> AI Notice Pattern[/caption]
<h2>Suggested Prompts Pattern</h2>
Another collaborative UX pattern designed to improve the relationship between users and AI copilots is called the Suggested Prompts Pattern. It gives users the suggested prompts or options with the power of copilot's capabilities. The copilot can suggest actions or make recommendations based on their knowledge and abilities by offering specific prompts. These prompts can then suggest the alternative approaches to problem solving or suggest specific actions to achieve a desired outcome.

Implementation of the Suggested Prompts pattern is comprised of both business workflow understanding as well as designing user interfaces that integrate the suggested prompts. This can be done through visual prompts, buttons or interactive elements that present users with the available options.

<img class="aligncenter size-full wp-image-31813" src="https://arafattehsin.com/wp-content/uploads/2023/10/suggested-prompts.png" alt="Suggested Prompts Pattern" width="568" height="421" />

It is important to have the prompts to be concise, relevant and contextually aligned with the user’s goal. This collaborative UX pattern can help improve the efficiency and effectiveness of user interactions with the copilot and encourage users to explore different possibilities and consider alternative options. This way, users can benefit from the copilot’s capabilities through suggested prompts while maintaining control and decision-making authority to themselves.
<blockquote>If you want to learn about UX for Copilots in depth then you do not want to miss <a href="https://build.microsoft.com/en-US/sessions/bac1bf0b-7c70-4366-bb86-0abd11b009bc?source=sessions">this session</a> of Microsoft Build, 2023. All the images of this post are also taken from this session.</blockquote>
<h2>Feedback Opportunities Pattern</h2>
The last UX pattern to discuss today is around the feedback. Feedback about the performance of AI and how it helps out user’s goal and its output. It gives an opportunity to the users to contribute to the improvement of overall copilot’s capabilities therefore known as Feedback Opportunities Pattern. These contributions can vary from sharing their insights to corrections to suggestions and many more. Thus, a feedback loop is created, facilitating continuous learning and improvement. Feedback mechanisms such as a review form, issue reporting or a rating system can be integrated within the user interface of the AI-powered application.

<img class="aligncenter size-full wp-image-31812" src="https://arafattehsin.com/wp-content/uploads/2023/10/feedback.png" alt="Feedback Pattern" width="881" height="569" />

The continuous feedback is valuable for the copilots strengths and weaknesses. It is essential for the underlying technology and algorithms which can be used to address any shortcomings. Feedback Opportunities not only empower users to contribute to the copilot’s development but also foster a sense of ownership and engagement. By incorporating user feedback into the development process, user experience designers (or developers in my opinion) can enhance the copilot’s capabilities, resulting in a more refined and effective user experience.
<h2>The Emotional Iron Triangle</h2>
In addition to these patterns, it is also important that developers consider the "Iron Triangle" of quality, speed, and cost when building AI-first apps. This triangle can also be topped up with Emotion as a fourth dimension, making it a tetrahedron of factors to manage. As developers create AI-powered applications, they need to be mindful of managing users' emotions, ensuring they don't over-humanise the AI and maintaining a sense of responsibility in this era of AI.
<blockquote>Embrace the essence of humanity but beware of over-humanising. For in the quest to understand others, we must not lose sight of their unique individuality</blockquote>
The copilot stack with its non-deterministic nature, bring new challenges and opportunities. Developers while also considering user emotions, must learn to balance quality with speed and cost. One has to become a new kind of a developer who understands both the technical aspects of AI and the emotional aspects of UX design.

In a nutshell, creating successful AI-powered applications depends on creating a collaborative user experience that emphasises the partnership between humans and AI. In addition to implementing the above discussed design patterns, developers can also consider Iron Triangle with the user's emotions to create a strong pilot-copilot relationship. With this approach, AI-first apps become more engaging, effective and responsible driving growth in a rapidly changing digital landscape.

Until next time.

<em>This blog post was originally published at the <a href="https://learn.microsoft.com/en-us/community/content/best-practices-ai-ux">Microsoft Learn Community</a> blog.</em>