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
Comment #2
aaronmchaleThanks for creating this follow-up @andy-blum :)