Following UX team review of #3085219: Installer is not very usable in Claro the recommendation was made:

2. We discussed the installation steps progress component. A number of problems with this were highlighted:

  • It works fine for large desktop screens, but does not scale-down well on small screens and mobile devices.
  • It does not accurately reflect the effort involved at each step, it implies that all steps have equal weighting/effort. Consider that the language selection step is a single form input, however the final site configuration form has many more fields on it; The installation step is just an automated progress bar, while the database connection form could be seen as daunting to novice users.
  • If the site is configured as a distribution and/or has the database connection already configured, after selecting the language the user is jumped forward by one or more steps in the process. This sudden jump could be confusing to the user as they could reasonably wonder what happened to the previous steps that they were expecting to see.
  • It does not work well for profiles/distributions that insert additional steps into the installer through branching logic or part way through. For example, a profile/distro can arbitrarily add additional steps to the installer and those could be added based on conditional logic in previous steps. This could result in the user moving through the various steps and suddenly more steps are added that they were not expecting to see.

All of these issues taken together highlight some fundamental problems with the installation steps component, all things considered it shows that at best the component is not particularly useful, and at worst it's potentially misleading.

The important thing to remember here is that the installer is essentially just a multi-step form (also referred to as a "wizard"). With that knowledge we can take the lead of already established patterns and best-practice for multi-step forms. For example, the GOV.UK Design System - widely regarded as one of the leading design systems for government digital services - provides some well-evidenced and well-researched patterns for multi-step forms.

We refer to the GOV.UK "Check a service is suitable" pattern and the GOV.UK "Check answers" pattern. There are two key things to highlight here, firstly the "Check a service is suitable" pattern does not show the steps up front, instead it relies on the "Check answers" pattern to provide a summary; Secondly, by not showing all of the steps up front it facilitates conditional branching and arbitrary steps to be added as the user progresses through the multi-step form. Following this pattern would address all of the concerns previously mentioned.

To that effect, our recommendation is that we follow the GOV.UK "check a service is suitable" pattern, and simply drop the installation steps component. Additionally, it may be wise to introduce the "Check answers" pattern. However, like with first recommendation we were happy for these to be addressed in follow-up issues and not to block this issue if that is the most sensible option.

As an additional recommendation, following the patterns previously mentioned, it may be worth reorganising some of the steps to break up the larger forms into more smaller steps. In the GOV.UK example they recommend asking one question per step. Now, we might not need to have a step for every field, but for example the final configuration step may benefit from being split up into multiple steps. Again, this does not need to be addressed here, and could be addressed in a follow-up issue.

For more reading on that topic we refer to an article by the Nielsen Norman Group: Wizards: Definition and Design Recommendations.

Comments

andy-blum created an issue. See original summary.

aaronmchale’s picture

Thanks for creating this follow-up @andy-blum :)

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.