Small improvements to UI layout of visualization designer

Problem to solve

The PoC does a great job of showing the capabilities of the visualization designer and surfacing options to the user. However, from a UX perspective, there are areas of improvement we could make to make it more intuitive for a first-time user, as well as more generally begin to meet our UI design and text guidelines.

Proposal

I have mocked up a design which offers a list of small UX/UI improvements to make it easier for a first-time user to use the visualization designer. These improvements are aimed at providing direction and consistency to the user.

We are not looking to completely redesign the PoC in this instance. It is a viable MVC, and we will wait for a formal UX review in conjunction with user feedback before deciding upon the direction we might want to take with the next iteration.

The list of changes is as follows:

1. Add a title and description to help explain what the visualization designer is for.
2. Visualization title input:
   • Add a label.
   • Reduce the size of the input.
   • Make sure we have validation support on the input.
3. CTA's:
   • Move to the bottom of the page.
   • Add a bottom border to the designer to separate the CTA's from the content.
   • Revise text to “Save your visualization”.
   • Add a cancel button.
4. Visualization type:
   • Move from column 3 to column 2.
   • Add a column header.
   • Change the selector to always be a dropdown.
   • Add unselected default text to the dropdown for the default state.
5. Change the preview area empty state text to “Start by choosing a metric”.
6. Remove descriptions from metric buttons as the column title + metric name was the same as the description.
7. Update the metric names to be sentence case to be consistent with the other titles on the page.

Design

See attached design.

Implementation plan

frontend 2️⃣

Update analytics_visualization_designer.vue as outlined in the proposal to match the design in this issue.

• Add a page heading and subheading.
  • Heading copy Create your visualization
  • Subheading copy Use the visualization designer to create custom visualizations. After you save a visualization, you can add it to a dashboard.
  • Append a Learn more. link to the subheading that links to our user docs.
    • We currently lack any docs. Consider adding a section to https://docs.gitlab.com/ee/user/analytics/analytics_dashboards.html and / or https://docs.gitlab.com/ee/user/product_analytics/.
• Move the Save button to the bottom of the page and update the copy.
  • Confirm the tab order makes sense.
• Add a Cancel button.
  • For now simple quit the view.
  • Follow-up to add confirmation: Handle unsaved changes on visualization designer (#426563 - closed).
• Add a border to the bottom of the columns.
• Make sure the spacing matches the design.
• Update specs.

Other proposed changes have been split out into separate issues:

• Update the visualization designer's visualize c... (#426565 - closed).
• Update the visualization designer title input (#426564 - closed).