Week 2 Standup Deck — Jeffrey Mok — Monday June 10, 2024
Overview: This report analyzes the Copilot user interface. Copilot is an in-app AI coding assistant available on Visual Studio Code. While Innovation Workflow’s usage differs from Copilot’s (IW is textual, non-technical, and informational, while CP is code, technical, and executable), there are intuitive UI designs in Copilot that IW can benefit from. Here are a few examples.
Copilot’s Implementation:
Copilot’s most coveted feature is its autocomplete functionality. With Copilot enabled, users can focus on higher-level tasks without needing to type out long, exact pieces of code.
Additionally, this autocomplete feature helps prevent user errors, particularly with code syntax and variable names.
What we can do better:
In the user input fields of Innovation Workflow, include a similar autocomplete feature.
Technical Implementation: Implement logic that parses through the GPT/Gemini responses to suggest autocomplete options.
Alternate Technical Implementation: Users can highlight the text of interest, and upon releasing the highlight (click-up), they will be notified that the text has been copied to the clipboard. This allows for simple pasting into the text field. Ensure that users are aware of this auto-copying feature.
Purpose: Reduce user fatigue and minimize user errors.
Copilot’s Implementation:
Copilot’s UI is designed for speed and ease of use. Programmers can quickly apply Copilot's suggestions without lifting their hands from the keyboard; a simple press of the tab key is all it takes. This efficiency is possible because users can easily digest Copilot's suggested content. The muted (greyed-out) text is already correctly formatted, including proper indentation, giving a clear preview of how the output will look once the user presses tab. This visual aid enhances the user's efficient usage of the suggestions.
What we can do better:
For Innovation Workflow, the breadth of materials suggested can be overwhelming, with users needing to parse through extensive text to find valuable information. To address this, collapse all description text on pages with multiple options (like the “Territories” page) and allow users to expand the text by clicking an icon.
Technical Implementation: Parse through the GPT/Gemini responses and display only the sub-heading texts in a collapsed state. The descriptions will be hidden behind an expand icon. Ensure that all GPT/Gemini responses fit on a single page, so users don't need to scroll to view everything at once. (Fast-follow implementation: group the sub-heading texts into categories - Harry used the term “bucket” in the last meeting.)
Purpose: Allow users to see high-level information and make decisions quickly without the need to parse through and scroll past large blocks of text.
Copilot’s Implementation:
Copilot has concise instructions for use. This is an in-app assistant, meaning utilization of screen space is extremely crucial to the overall design. Part of this conciseness is made possible by user-recognizable clickable objects, such as the external links in blue and voice input icon. As such, usage of Copilot is quite straightforward and wouldn’t require a tutorial.
What we can do better:
For Innovation Workflow, the user may be left thinking about what to do at certain stages of the workflow. For instance, in this page, the main transition buttons are submit, previous, and next. Yet, it is not apparent what the user is really supposed to do: One can click submit, but it is confusing because no user (textual) input is possible. Here, Submit and Next are the same.
Technical Implementation: Provide instructions at stages like these. State specifically what this response is, what the user should do with it, etc.
Purpose: Avoiding confusion, ensuring that the user is oriented correctly when navigating the workflow.
Virtual assistant:
At certain stages of the workflow, the user might have intermediary questions, or may request a certain modification of the provided response. Here, a virtual assistant (like this one depicted in the Notion app) may come in handy.
Shrink the breadcrumb trail:
Given that the most valuable information in each stage of the workflow is the AI-generated content, more screen real estate should be allocated to it rather than to the breadcrumb trail (progress bar). The progress information can be represented using much less vertical space.
Additionally, the “Project Name” and “Created On date” can be relocated to a static page footer, with a smaller size and lighter color than the more important AI-generated content.
Columns for each AI response:
To avoid the end user’s preferential treatment of AI responses, whether from ChatGPT or Gemini, the layout should be structured side-by-side instead of top-bottom.
Source: u/timegentlemenplease_
Source: Mohammed Sulaiman
Minimalistic Navigation Bar:
The navigation bar can be simplified with a hamburger menu. Also, remove the redundant “Dashboard”.
