Visual Review Tools MVC
Problem to solve
Review Apps are a great feature but could be made more powerful and easier if there was a quick way to add feedback to the MR while looking at the review app itself, especially if metadata (such as a screenshot, what the user was looking at, etc.) could be collected.
In other words, review apps currently don't allow you to send feedback without a context switch. Also, sending along other often required information such as system/browser specific information is currently a non-automated process introducing unneeded friction, thus creating lower quality feedback the majority of the time.
Intended users
Further details
As the first step towards our Visual Review Tools vision (&960 (closed)), this will be a minimal MVC implementation.
This will contribute directly to our vision for adding ~"usability testing" testing as part of our ~"Product Vision 2019"
Proposal
- Add a "toolbar" to a review app that allows the user to "initiate" this review
- When the user initiates a review, collect a minimal amount of metadata about the environment
- Allow the user to enter additional text comments
- Combine the metadata and text comments and start a discussion on the MR that was the source of this review app
Solution
User stories
| # | User Story | Persona | Scope |
|---|---|---|---|
| 1 | As a functional/quality reviewer, I want to be able to create usability/visual feedback right within the testing environment without a complete context switch | Persona: Product Manager Persona: Product Manager Persona: Software developer | Current |
| 2 | As a functional/quality reviewer, I want to know what information is sent when giving feedback | General user | Current |
Technical user stories
| # | User Story | Scope |
|---|---|---|
| 1 | As a developer, I want to keep the scope to a minimum as this is an mvp implementation | Current |
| 2 | As a developer, I want to keep styling to a minimum as we are avoiding having users load external libs, so we don't have our usual components available — just raw CSS | Current |
| 3 | As a designer, I want to have any functionality from GitLab in an external environment such as a review app to be recognizable in order to make the context switch to be logical and expected | Current |
Acceptance criteria
Feedback information flow
- Information gets sent by user within review app, user stays within review app context
- Inside related merge request a new subdiscussion gets created, the author is the current GitLab user
- Comment inside subdiscussion gets created
- Feedback text posted
- Browser/error information (potentially within
<details>to make it shorter - Inside review app widget will be collapsible to smaller version as to not obstruct content
- Widget will translate success and errors to the user
- We will operate with a personal access token for now
- User is able to make the PAT submitted to be peristent or to be forgotten
- Merge request will include instructions to activate this functionality
Out of scope 6. Screenshots are currently not part of the scope 7. The widget is currently not draggable
Designs
Specs
Positioning
Merge request widget
Insie review app widget
Permissions and Security
This issue does not impact our current permission model - users that can create discussions will be able to create these types of discussions
Documentation
Testing
What does success look like, and how can we measure that?
To do / expected MRs
-
Create small test app outside Gitlab to test on -
Develop vanilla JS script for unstyled component with hard-coded MR posting & functional OAuth WIP MR: gitlab-ce!27518 -
Dynamic version with comment box only -
Add script generation to MR widget for users to copy and paste -
Version with toggleable comment box, tooltips -
Version with intro text popup (may be wrapped into above) -
Toolbar drag and drop functionality -
Version with anchor-able comments (tied to a section of the page) -
Version with screenshots
Competitive landscape
Google products feedback functionality
Offers functionality through a submenu item, which summons a feedback modal. Includes option to send along a screenshot by default. Allows for area highlighting and censoring, and adds in legal information due to personal information potentially being made more accessible to a wider public (those who review feedback sent).
Google products feedback functionality example
| Deliver feedback modal | After highlighting and obscuring areas |
|---|---|
 |
 |
Chrome plugin which makes it easy to play around directly with the visuals of the current page. Not perse feedback sending mechanism, but a good tool to compare with how it would look/be structured otherwise.
MacOs tool which makes it possible to leave feedback right within the context of using the mobile app on the desktop. You can make screenshots directly and annotate them. Feedback can then be shared and sent with a simple link to any application.
Saber - Get quality website feedback from your users
Functionality to receive feedback which can be included into any website due to including a script or as a plugin for known CMS's like WordPress. Supports majority of old and new browsers. The feedback mechanism can be customized to meet customer needs. Also captures the vital information that users may not know, including browser & operating system, browser plugins, and any JavaScript errors that occurred. Feedback sharing options can be integrated with existing tools like slack, Jira, etc. Includes the option to add in questionnaires and screenshots (with highlighting support). Feedback mechanism can be shown to a subset of users depending on data used as input.
UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen's Ten Heuristics in a side pane next to your website. When you click on an element that doesn't comply with a heuristic, you can add notes, and a screenshot will be saved. At the end, you can export everything to a docx so that you can share them with your team.
What is the type of buyer?
Links / references
- Tester apps are at https://review-app-test.sarahghp.now.sh/ & https://sarahghp.gitlab.io/review-app-tester/.
- Script development is taking place at https://gitlab.com/sarahghp/test-review-deploy-mirror, which deploys to https://host-island.sarahghp.now.sh, just so I can reproduce pulling from a CDN and iterate quickly.
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.