You need to sign in or sign up before continuing.
UX Scorecard Recommendations – Create: Code Suggestions
- UX Scorecard Part 1: #2429 (closed)
- Slide deck: UX Scorecard–Create:Code Suggestions Deck
ℹ ️ Recommendations are Figma concepts instead of issues to avoid creating unnecessary noise since product is under rapid development.
# |
Insight | Recommendation | Comments |
---|---|---|---|
1 | Disable Code Suggestions by default and show opt-in notification on extension install or update. | Initial onboard flow concepts | Code Suggestions are still in the early adopter phase. Developers are also opinionated on their personal workflows so we should respect that and make Code Suggestions opt-in. As an early product there's also risk in losing trust or annoying a developer who could disable the feature permanently and/or switch to a competitor. |
2 | Consider more useful action than toggling Code Suggestions on/off as well as clearer handling of error and enabled/unsupported language states. | Status bar concepts |
- If users need to frequently toggle Code Suggestions on/off that likely indicates a UX problem.
- It's not obvious to new users that the icon is specific to Code Suggestions and not all AI features. - It currently doesn't show an error state. When Code Suggestions has a problem it makes it hard to troubleshoot as it still appears enabled. - It's confusing for new users that start with an unsupported language file open as it uses the same icon for disabled and unsupported. This means the user can still toggle Code Suggestions on/off but the icon doesn't change. |
3 | The same AI icon is used to represent multiple features, for example Duo Chat in activity bar and Code Suggestions in status bar. This leads to some inconsistencies in the UI (e.g. icon can be disabled in status bar but activity bar icon (ie. Duo Chat) is active). | AI feature branding concepts |
- If we're intending to use a single icon to represent all AI features this will impact the UI. For example, the status bar appears to represent all AI features, not just Code Suggestions.
- By dedicating the large activity bar icon to Duo Chat it's likely a user will interpret this as primary branding and see Code Suggestions as a sub-feature of Duo Chat. Unsure if this is intended. |
4 | Code gen overlaps a common developer workflow (writing comments) and is hard for new users to differentiate from code completion. | Code generation concepts | - Could we use an alternative code gen trigger like slash commands?
- The loading icon is hard to identify in IDE due to small size. - Loading icon adds UI noise since it can flash in and out during coding workflow. |
5 | More actionable error handling so users don't have to dig through docs to troubleshoot or wonder why Code Suggestions aren't showing up even though they're enabled. | Actionable notifications concepts | I had to manually enable the debugger and use the docs to interpret the output. Would be useful to handle errors like Prettier does (open Output and set it to GitLab Language Server) or display actionable toast notifications. |
6 | Duo Chat would benefit from a more IDE-centric design. It feels like a browser web view crammed into a smaller IDE environment. | Duo Chat concepts | This could feel more polished with some minor design tweaks. There's also lots of opportunity for improving UX (e.g. onboarding other GitLab workflow features, understanding the context it uses, etc.) |
7 | New feature ideas:
- /troubleshooting Duo Chat shortcut - Diff view to compare Duo Chat suggestions with existing code |
New feature concepts | Trouble shooting existing code (e.g. help me fix this type or syntax error) is a bit clunky using the /explain shortcut since user has to wait for an initial answer. Comparing Duo Chat's recommendations to existing code useful for building trust and understanding code changes. |
Experience Recommendations Checklist
Learn more about UX Scorecards
-
Add this issue to the stage group epic for the corresponding quarter's UX scorecards. -
Brainstorm opportunities to fix or improve areas of the experience. - Use the findings from the Emotional Grading scale to determine areas of immediate focus. For example, if parts of the experience received a “Negative” Emotional Grade, consider addressing those first.
-
Create an issue for each recommendation using one of the Actionable Insight templates in the GitLab project, depending on if it relates to a product change or needs more exploration. Alternatively, you can create a separate epic to hold all your recommendations. Add a UX scorecard-rec
label to every issue or epic for traceability. To help with prioritization, add a severity label to communicate appropriate urgency and impact to the experience. Link to the epic or issues here.- Recommendations do not need to be documented in your Dovetail project.
-
Think iteratively, and create dependencies where appropriate, remembering that sometimes the order of what we release is just as important as what we release. - If you need to break recommendations into phases or over multiple milestones, create multiple epics and use the Category Maturity Definitions in the title of each epic: Minimal, Viable, Complete, or Lovable.
Edited by Taylor Vanderhelm