UI/UX Canvas menu helper text

Overview

The Canvas left-hand menu has 5 menu options available.

It's not clear when you go to 'Add', and see 'Library' what you're supposed to do with that list of things in the Library. It's only from watching vids and presentations at DrupalCon that I realised I can drag and drop these Library items to my page.

(I've suggested in the linked issue to change the 'Library' menu title to 'Add' to match the tooltip.)

There's nothing in the UI that helps a new users understand what these menu items and lists are for. Given that Canvas is aiming at new users, the interface can be improved to provide them with every bit of help we can give them.

Setup:

git clone git@git.drupal.org:project/drupal_cms.git --branch 2.x
cd drupal_cms
ddev launch

Edit homepage and see menu (compressed or extended) top-left.

Proposed resolution

Add helper text to each menu item.

User interface changes

Add a short sentence under each menu title to explain what the menu is for; either just under the title (green) or between the horizontal divider and the tabs (yellow).

These are some suggestions for the helper text. Do some UX to determine what users actually need.

Add: 'Drag and drop components and patterns on to the page to change the page layout.'
Layers: 'The current structure of the page layout. Provides some ability to make changes.'
Library: 'Lists the current components and patterns available. Add to the page from the Add menu.'
Pages: 'Lists the current pages controlled by Canvas.'
Templates: 'Create and manage custom templates for different types of content.'