Problem/Motivation
Follow-up to discussion on
✨
[Meta] Appearance page is too long and confusing
Active
and during
#3249152: Drupal Usability Meeting 2021-11-12 →
.
The title of each theme is currently packed with information. First, you have the theme name followed by the version number with no visual separation. In case the theme is set as the front-end or admin theme Default Theme or Admin Theme is appended in parenthesis to the title. When the theme is labelled experimental in Core, experimental is added to the parenthesis as well. The whole line is displayed in bold text. Overall the cognitive load is high to scan and process.
Proposed resolution
Split up the information previously combined in the title. Leave the name of the actual theme in the title and move the display of the version number out. An option might be to display the version line underneath, as seen in the mockup, or on top of the description. About the placement of the version number, I am not sure what the best choice visually as well as functionally might be (I am not a designer ;) ).
About the details previously contained in the titles' parenthesis, what the Default Theme and Admin Theme are is already communicated by the prominent placement (see
#3249370: Move the active Default and Admin Theme to a new section on top of the Appearance page →
), while for the experimental label an introduction of color-coded badges placed over the theme screenshot might be an idea. One badge for experimental themes, like Olivero and Claro, could be found in the mockup. Additionally, for sub-themes (Gin in the mockup - the corresponding base theme might be displayed in the tooltip and the aria-label) and Core themes (Olivero, Claro, Bartik, Seven and Stark) new badges might be introduced to help to distinguish and label the different types of categories at a glance.
In the context of a sub theme card, I would suggest adding a line underneath the version statement, listing the theme(s) that the selected Default or Admin Theme is depending on. In the mockup, you see for exampleRequires: Claro on the Gin card. But in case there is a chain of dependencies the line might even be extended like Requires: My companies base theme -> Zurb Foundation. That way the frontend developer or site builder onboarding a project can see if an installed active Default or Admin Theme is actually a sub-theme by the color-coded badge and the dependency chain directly at a glance. Additionally, it provides an explanation why in the case of the Claro theme as seen within the mockup the uninstall button is missing. The problem of those chained themes was brought to my attention by @andrewozone when I was reviewing the draft of
#2860419-23: [Meta] Appearance page is too long and confusing →
in the parent issue with him.
Existing and proposed (updated & new) components for a card
- Title (updated) - Just the title of the theme - version number and the parenthesis with the Default Theme, Admin Theme and Experimental Theme labels get removed.
- Thumbnail - Preview screenshot of the theme
- Description - Description of the theme
- Badges (new) - Color-coded badges to label a theme with one to x terms (see screenshot above). Suggested badge labels:
Core, Experimental, Sub theme
- Version (new) - The version of the current theme in a separate line.
- Requires (new) - The theme or the chain of themes the active Default or Admin Theme is dependent on. If the
Requires: line is shown the Sub Theme badge would be mandatory to be shown for consistency reasons as well.
Note: I've left out the cards action buttons as well as the Admin Theme selection form at the bottom of the page in the mockup intentionally. The focus should be on the card components communicating information. For the bigger picture take a look at the parent issue please.
Remaining tasks
1. Discuss and agree on the compontents
2. tbd