AI on a real-time app is hard
In our feedback management system, we prioritize the fundamental "doc" element, offering flexibility and depth for diverse feedback scenarios. Supported by a collaborative ProseMirror model and intuitive editing with Tiptap, our platform facilitates rich content creation.
However, amid real-time collaboration, dynamic styling, and varied states, the frontend complexity grows. Adding AI interventions compounds the challenge.
Herein lies our dilemma:
The conventional approach to real-time collaboration involves displaying teammates' presence on a shared document.
Achieving real-time presence often involves straightforward UI design and state management.
Additionally, displaying real-time actions performed by team members within the document is common.
When considering synchronous and asynchronous AI integrations, processing feedback from various sources, such as recorded meeting calls, poses a challenge. One strategy involves executing the transcript action in the backend, sparing the client from managing loading indicators.
Adapting state and UI for asynchronous behavior is crucial. Blocking the UI with appropriate styling provides users with visual cues about ongoing processes, fostering trust in the platform.
When the AI injects a summary, opacity and a toaster clarify which elements are interactable, ensuring user understanding.
In specific cases, like triggering AI for a transcript while working with recorded calls, users should maintain productivity within the document.
In scenarios with a loading state beneath a UI element, users can continue typing while remaining informed of ongoing processes. Even if the content shifts due to AI actions, user interaction clarity is maintained.
Adding an autopilot feature is like the cherry on top when it comes to building trust in the relevance of AI. However, since AI can sometimes be challenging to fully control, it's essential to allow users to "double-check" AI decisions. To address this, we've implemented UI elements that categorize AI outputs as not yet verified.
In conclusion, navigating the integration of AI into feedback management systems requires a nuanced approach to UX design. Key concepts to remember include:
- Real-time collaboration: prioritize clarity and transparency in indicating presence and actions with clear UI.
- Synchronous and asynchronous AI integrations: consider the balance between user interaction and AI processes, ensuring smooth transitions and clear communication of ongoing actions.
- Adapting state and UI: implement visual cues and appropriate styling to guide users through asynchronous processes and maintain trust in the platform.
- User empowerment: enable users to continue their tasks uninterrupted while AI processes occur in the background, fostering productivity and engagement.
By keeping these concepts in mind, designers and developers can craft user experiences that integrate AI capabilities while prioritizing user empowerment and clarity.