Problem/Motivation

The only concern the group had with the instructional modal for adding and installing a module is the fact that Drupal isn’t shipping with Drush by default.
“instructional
While most people will be using the Package Manager as soon as #3312289: Svelte UI for install controllers lands, the instructional modal will be still in place for sites where the Package Manager module is not installed. Some of those website might have Drush not installed. Then there are also solutions like simplytest.me where you don’t have command line access necessarily. For the former it is at least certain that command line access is available since the installation of Drupal requires Composer.
If you take now a look at the second section in the modal you have a sentence with a visit the module page-link suggesting the user to visit /admin/modules for installing the module. That sentence is visually a lot smaller with a lot less affordance and might go unnoticed compared to the big code block with the line how to install the module with Drush.

For the record the issue was identified and initially discussed during #3312892: Drupal Usability Meeting 2022-10-07. The issue has a link to the recording of the meeting. The attendees were @AaronMcHale, @benjifisher, @narendraR, @rkoller, @shaal, @simohell, @srishtiiee, @Utkarsh_33, and @worldlinemine.

Steps to reproduce

- Go to /admin/modules/browse and click one of the Download buttons

Proposed resolution

  • Add an action link button (see the Drupal Design System) that takes the user to the modules page instead of using a simple sentence with a link like currently. To get some design feed back in that regard might be useful.
  • Additional steps that were discussed but with not a clear consensus yet.
    • remove the drush pm code block
    • instead of removing the code block add the instruction how to install Drush instead

Review steps

Go to /admin/modules/browse, click one of the Download buttons, and ensure the following concerns from this issue summary and follow-up comments have been adequately addressed:

  • The visit the module page link
    • ...should stand out more, visually
    • ...should be a button
    • ...should be outside, not inside, of a sentence
  • The Drush instructions
    • ...should have wording similar to If Drush is not installed this will add the tool to your codebase.
    • ...should have the code snippet composer require drush/drush
    • ...should have "Drush" capitalized consistently

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Issue summary: View changes
rkoller’s picture

srishtiiee made their first commit to this issue’s fork.

srishtiiee’s picture

Status: Active » Needs review
StatusFileSize
new78.76 KB

rkoller’s picture

Status: Needs review » Needs work
Issue tags: +Needs design

Thanks for the initial work! A few thoughts. Having an action link button directly within a sentence might be not the best idea. the link isn't underlined and you have more padding before and after the link compared to other regular links in the modal. The idea in the ux meeting was to have an action link instead of a sentence. So maybe combine the two sentence with something like:

To use the module you next have to install it on the modules page. [Modules page]

and have the button after (as drafter with [Modules page]). I'll add the Needs design tag which I forgot to set when writing up the issue. That was the general consensus during the meeting that it might be a good idea to get some design input how to add and style the button.

and in regards of the additional steps we might need some input and opinions by others if the drush pm block should be removed or if it should be kept, and in case if it should be kept we might still need to add the instructions how to install drush.

srishtiiee’s picture

StatusFileSize
new65.66 KB

Made some changes as per the feedback but it still needs design inputs.

rkoller’s picture

thank you! Moving the link to the modules page out and place it prominently is definitely better compared to keeping it inside the sentence and styling it as an action button. the only thing the moved element should have a higher affordance. at the moment without a hover or focus it looks like a regular link (only difference is an a bit higher font-weight). but it is basically the main CTA of the second step in the modal aka the user should go to the module page and install the module. buttons as well as the action buttons dont have underlined labels in the drupal design system and an action button without an icon, just plain text, has a too low affordance. this part definitely needs some design input.

about the the second part. how about after the drush pm:install pathauto code snippet add a sentence. something like:

If Drush is not installed this will add the tool to your codebase.

and then another codesnippet:

composer require drush/drush

that way people unfamiliar with drush don't have to look up the command necessary to install drush.

tim.plunkett’s picture

Issue tags: +core-mvp

narendraR made their first commit to this issue’s fork.

srishtiiee’s picture

Status: Needs work » Needs review
narendrar’s picture

Status: Needs review » Reviewed & tested by the community

All feedbacks are addressed and we are waiting for the designs on this issue which can be done in a follow-up also.
Moving this issue to RTBC.

chrisfromredfin’s picture

Status: Reviewed & tested by the community » Needs work

Moving back to NW per Tim's comments / unresolved in the MR.

bnjmnm made their first commit to this issue’s fork.

bnjmnm’s picture

Status: Needs work » Needs review
mike.roman’s picture

Issue summary: View changes
Issue tags: +Novice, +MidCamp2023
brianbrarian’s picture

Should the instructions refer to "the modules page" when both the admin menu label and h1 heading for the page say "Extend"? I suggest making the instructions consistent with the wording of the UI.

mike.roman’s picture

Status: Needs review » Needs work

I agree with brianbrarian, so I am going to set this issue to "needs work". The wording in the issue fork is set in sveltejs/src/popup.js line 60, and it is currently:

To use the module you next have to install it on the modules page.

Borrowing heavily from the Installing Modules documentation page, may I suggest:

Go to the Extend page (admin/modules), check the box next to each module you wish to enable, then click the Install button at the bottom of the page.

And be sure to link "Extend" (or "Extend page") to that page.

chrisfromredfin’s picture

I agree with Mike.Roman's analysis; this would be the preferred wording.

sourabhjain’s picture

Assigned: Unassigned » sourabhjain

I will work on #19.

sourabhjain’s picture

Assigned: sourabhjain » Unassigned
Status: Needs work » Needs review

chrisfromredfin’s picture

Assigned: Unassigned » chrisfromredfin
Status: Needs review » Needs work
chrisfromredfin’s picture

Status: Needs work » Needs review
Issue tags: -Needs design, -Novice, -MidCamp2023

I have rebased, fixed, and made the popup work again. I've also added a test for the third area we added. Needs review!

chrisfromredfin’s picture

Assigned: chrisfromredfin » Unassigned
bronzehedwick’s picture

Status: Needs review » Reviewed & tested by the community

I tested that the first sentence in the "Show commands" modal's "1. Download" section's language changed to "The recommended way to download any Drupal module is with Composer.", with "recommended way" linked to https://www.drupal.org/docs/develop/using-composer/using-composer-to-ins....

I tested that the first sentence in the above modal's "2. Install" section changed to "Go to the Extend page (admin/modules), check the box next to each module you wish to enable, then click the Install button at the bottom of the page." With "Extend page" linked to https://drupal-project-browser.ddev.site/admin/modules.

Looks good to me, RBTC.

chrisfromredfin’s picture

chrisfromredfin’s picture

Status: Reviewed & tested by the community » Fixed

chrisfromredfin’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.