Problem/Motivation

Follow-up to discussion on #2860419: [Meta] Appearance page is too long and confusing and during #3249152: Drupal Usability Meeting 2021-11-12.

To figure out which is the active Default theme, currently the user has to browse all installed theme cards to distinguish which of those have parenthesis in their title. Then the user has to scan each of those titles in question from left to right (for the ltr reading direction). Scanning starts with the name, then the version number of the theme and when getting to the parenthesis the user has to figure out if there is the Default Theme label within.
In contrast, if the user tries to figure out what the active Admin Theme is (in particular if it is a user who is unable to recognize the active Admin Theme based on the visual representation of the most common Admin Themes Seven, Claro or Gin) the user has two options:

  • Scan the theme titles as described for the Default Theme
  • Scroll to the bottom of the page to the Admin Theme selection form

Both ways the cognitive load is rather high, requiring a lot of reading and processing of information.

Screenshot of the Appearance page in Claro

Proposed resolution

Make the active Default and Admin Theme prominently visible on top of the installed themes section. That way, the user is able to see which themes are selected and active at a glance.

Mockup of the new section on top of the Appearance page

Note: I've left out several components of the cards. The focus is simply outlining the new section with the Default and Admin Theme on top. For the bigger picture take a look at the parent issue please.

Remaining tasks

1. Discuss and decide how to handle themes that could be set as Default and Admin Theme at the same time. Should there still be two separate cards for the Default and Admin Theme showing the same card twice or should there be one single card across two width units?
2. tbd

CommentFileSizeAuthor
#24 After patch theme..png389.76 KBAamir M
#24 Before patch theme.png358.78 KBAamir M
#24 patch mt.png183.04 KBAamir M
#21 reroll_interdiff_9-20.txt2.96 KBelber
#20 reroll-3249370.patch20.5 KBelber
#18 reroll_diff_9-18.txt5.21 KBravi.shankar
#18 3249370-18.patch20.5 KBravi.shankar
#13 sc.png240.04 KBrolandoscott
#9 3249370-9.patch20.4 KBpaulocs
#9 interdiff-6-9.txt651 bytespaulocs
#8 double_claro.png352.83 KBrkoller
#8 claro_wide.png627.29 KBrkoller
#6 3249355-6.patch20.4 KBkostyashupenko
new_section.png70.98 KBrkoller
current.png140.1 KBrkoller

Issue fork drupal-3249370

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:

About issue forks

Comments

rkoller created an issue. See original summary.

aaronmchale’s picture

aaronmchale
Primary language English
Location Edinburgh, Scotland
commented
Issue summary: View changes
aaronmchale’s picture

aaronmchale
Primary language English
Location Edinburgh, Scotland
commented
Issue tags: +Needs design

Tagging for design.

Discuss and decide how to handle themes that could be set as Default and Admin Theme at the same time. Should there still be two separate cards for the Default and Admin Theme showing the same card twice or should there be one single card across two width units?

In that case, my gut feeling is just one card that says "Default and admin theme", but I also worry that creates an inconsistency in the layout of that page; In that case if we keep two separate cards, that means the same theme is displayed twice and could also lead to confusion where it looks like there are two separate themes with the same name.

aaronmchale’s picture

aaronmchale
Primary language English
Location Edinburgh, Scotland
commented
Project: Drupal core ideas » Drupal core
Version: » 9.4.x-dev
Component: Idea » theme system
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko

Gonna kill this task today

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
Status: Active » Needs review
StatusFileSize
new 3249355-6.patch20.4 KB

Looks like finished

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Status: Needs review » Needs work

PHPCS failed:

FILE: ...www/html/core/modules/system/src/Controller/SystemController.php
----------------------------------------------------------------------
FOUND 1 ERROR AFFECTING 1 LINE
----------------------------------------------------------------------
 380 | ERROR | [x] Expected 1 space after "=>"; 2 found
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
StatusFileSize
new claro_wide.png627.29 KB
new double_claro.png352.83 KB

@kostyashupenko thanks a lot for the initial patch!

@AaronMcHale i agree. default and admin theme in a single card would be more clear and also my first instinctive pick. but the problem might be the width on large screens.with a 27" monitor the browser window in full screen leads to two already wide cards (i dont wanna imagine a 32" screen or more). and if you imagine a card twice the width might be a bit too much imho.

full screen appearance page on 27

on the other hand i've set claro as admin and default theme. and i agree that people might think separate theme with same name.

appearance page with claro set for default and admin theme selected

maybe indicate somehow that the two selected themes are actually identical and the same? cuz i imagine that the single card across two columns might lead into even more problems if the goal is to keep the design consistent?

@kostyashupenko and one detail i've noticed with the patch if you take a look on a large viewport like in the claro_wide.png screenshot you notice the difference in height between default and admin theme card. for smaller viewports the height is identical.

paulocs’s picture

paulocs
Primary language Portuguese, Brazil
Location Belo Horizonte
commented
StatusFileSize
new interdiff-6-9.txt651 bytes
new 3249370-9.patch20.4 KB

Fixing code standards.

benjifisher’s picture

benjifisher
he/him or they/them
Primary language English
Location Boston area
commented

Admin = Default

My first thought was to show the same card twice, the opposite of @AaronMcHale's first reaction in #3. The screenshot in #8 convinces me to think again. Thanks for the screenshot, @rkoller.

It should be a little clearer that the two two cards refer to the same theme once we have the sibling issue #3249374: Redesign the cards for the Appearance page.

One option is to keep the same layout. Instead of the usual card for the admin theme, have a simple text card: "Same as admin theme" or something like that.

Have any designers looked at this issue yet?

aaronmchale’s picture

aaronmchale
Primary language English
Location Edinburgh, Scotland
commented
Assigned: Unassigned » aaronmchale
aaronmchale’s picture

aaronmchale
Primary language English
Location Edinburgh, Scotland
commented
Assigned: aaronmchale » Unassigned

We discussed this at #3249275: Drupal Usability Meeting 2021-11-19, we specifically focused on case of what happens when the default and admin theme are the same theme.

We noted that this definitely needs design work for that scenario, but we did discuss a few possible options here:

  1. Simply display the same theme twice (screenshot of this approach by @rkoller in comment 8): there was concern here that it could cause confusion for site builders and administrators, it could cause them to think that there are actually two themes with the same name.
  2. Display the card once but stretch it across the full width of the screen: @ckrina highlighted that there is a pattern for this approach in the Drupal Admin UI Design System, but there was some concern about this approach, especially for large screens, where the card being the full width of the page could make it feel too wide and make it easy to miss the controls on the bottom right (Settings, Uninstall, etc).
  3. Similar to options 2, display the card once, but don't stretch it across the screen, keep it the same width as the other cards: This was suggested but there were no comments supporting or disagreeing with this idea - full disclosure this was my suggestion, so I guess there was one person supporting it ;)
  4. For either options 2 or 3, another suggestion was to have one combined heading - something like "Admin and Default theme", with a single card below it (either full width or half-width): A potential issue with this approach is that the headings could change depending on the state - where if the admin and default theme are the same we have one heading, and two headings if they are not the same - this may not be a bad thing, but it is a consideration.

Ultimately, we did not have any concrete recommendations here, only that this issue needs work and review from the design team, so leaving the Needs design tag for that.

rolandoscott’s picture

rolandoscott commented
StatusFileSize
new sc.png240.04 KB

For what its worth, i am fond of option 4.. to me its the best option from a UX perspective.. the images are all the same size, so nothing gets warped and there are no wide screen issues.. just having 1 card.. with the combined title seems pretty easy to understand that its just ONE theme and its active for both things..

Its also painfully obvious for an admin user.. that at some point theres 2 cards there, it means that there are 2 different options.. but if theres just one card, its for both things..

screenshot

saschaeggi’s picture

saschaeggi
he/him
commented

+1 on having them combined if the same theme is set as default for both Admin & Frontend.

cedewey’s picture

cedewey
he/him
Primary language English
Location Denver, CO
commented

I also think option 4, showing the theme once under a heading "Admin and default theme" in the style of a single card (as shown in this mockup) is the most user friendly.

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

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Johnny Santos’s picture

Johnny Santos commented

Hi, from what I can understand we must wait further directions on the ux to be able to move this issue forward?

ravi.shankar’s picture

ravi.shankar commented
StatusFileSize
new 3249370-18.patch20.5 KB
new reroll_diff_9-18.txt5.21 KB

Added reroll of patch #9 on Drupal 9.5.x.

elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
Assigned: Unassigned » elber
elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
Assigned: elber » Unassigned
Status: Needs work » Needs review
StatusFileSize
new reroll-3249370.patch20.5 KB
elber’s picture

elber
Primary language Portuguese, Brazil
Location Brazil
commented
StatusFileSize
new reroll_interdiff_9-20.txt2.96 KB

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

Aamir M’s picture

Aamir M commented
Assigned: Unassigned » Aamir M
Aamir M’s picture

Aamir M commented
Assigned: Aamir M » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new patch mt.png183.04 KB
new Before patch theme.png358.78 KB
new After patch theme..png389.76 KB

Verified and tested patch #20. Patch applied successfully and looks good to me.

Testing steps:
1. Goto admin/Appearance
2. Set claro theme in the Administration theme (Scroll down and see)
3. Save configuration
4. Apply the patch
5. Reload the page

Testing Result:
1. After applying the patch the active Default and Admin theme is displayed as a new section on top of the Appearance page

Can be moved to RTBC

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Status: Reviewed & tested by the community » Needs work

With a bit of distance revisiting the issue I wonder would it make to sense aside making the default and admin theme prominently visible on top of the installed theme section to highlight the default and admin theme by underlaying each with a coloured rectangle with rounded edges? and also a +1 for suggestion 4 in #12.

@Johnny-santos yes as #12has stated the issue needs a design review as well as design work before it could go forward.

@aamir-m I am setting the issue back to needs work because a design review and design work has to be done first, the point in #12 has to be agreed on and the differing height issue in between the default and the admin theme cards mentioned at the end of #8 has to be fixed first.

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.