Notes on polish.musicsources.pl search page

[craigsapp]

Here are some style note for the search page https://polish.musicsources.pl/en/szukaj/values?keyword=&search_fields=[]

Language selection

The language selection button always feels reversed to me:

This looks like the active language is Polish, and you click on EN to switch to English. But it is currently the other way around.

If you are on a given language page, and click on the same language with this control, the same page is loaded with a busy animation in the meantime:

Instead, there should be no reloading of the page when selecting the same language as the current page.

Since there are only two options, and one of this is to stay on the current page, the best solution would be to make the entire language option a single button. When you click on either PL or EN when on the English version, you should be taken to the Polish page and vice-versa.

[craigsapp]

Favicon on a dark background

A small thing (but of often annoyance) is that the Favicon logo in the tab title is using the blueish color. My tabs are black, which makes the logo nearly invisible:

It is difficult to find the search page tab when I have a lot of tabs open, since only the icon is showing (essentially blank due to the dark color on a dark background) and there is no space for any of the `Searching - Polish Music Heritage". Demonstration:

Smaller width due to even more tabs (notice adjacent tabs have icons that still make it easy to find the tab from only the icon):

Even more tabs, where now only the logo is showing (far left):

The icon probably has transparency, which shows up as white when using a light mode, and is displaying as black in a dark mode as illustrated above. If so, then it is probably best to remove the transparency and make the background of the favicon white. This will allow it to be visible in dark mode styling of the web browser.

A more complicated solution would be to use Javascript to select a light or dark version of the icon.

Example code:

const favicon = document.querySelector('link[rel="icon"]');

function updateFavicon() {
  let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  // Update the favicon based on the detected mode:
  if (isDarkMode) {
    favicon.href = 'dark-favicon.png';
  } else {
    favicon.href = 'light-favicon.png';
  }
}

// Initial call to set the favicon based on the current mode
updateFavicon();

// Optionally, listen for changes in the color scheme preference in the web browser:
window.matchMedia('(prefers-color-scheme: dark)').addListener(updateFavicon);

Another point is that all of the tab text is not visible when the tab header is at its widest. The text is too long to be fully seen since the tab heading is as wide as it can be, so "Heritage" and the rest of the text is chopped off. It is not important to solve this problem (I am just pointing it out). You can see the full text when hovering the mouse over the tab title (it is hard to do a screen capture of the tooltip showing this since it disappears when I try to take a screenshot).

[craigsapp]

Page title styling

The search page title:

Has some problems:

Horizontal placement

It is confusing that the title is not centered on the page and seems to have a horizontal placement to the right.

Height of title region

The height of the title area is too high, making the user do more scrolling down the page than necessary. Perhaps the height of the title area is made to show some music, but this gets tiring to see over time.

There is a fixed left magrin of 33vw in the CSS for the title (which changes as the browser width changes due to @media in the CSS):

Having the SEARCH text at the bottom to blend with the background gray color is OK, but in combination with the left offset it looks more like a mistake.

Ideally the height of the title area would be reduced, and the text centered and the vertical height reduced:

Plus lowering of the background image view so that the staff is centered in the background.

Compare to current:

[craigsapp]

Placement of language selection button

The menu options on the right side of the header ("Main page" etc.) is more important than the language selection button. It might be nice to switch their order.

Currently:

Proposed:

The language buttons are clearly visible, but easier to ignore once you have selected the desired language.

[craigsapp]

Top menu styling

The top menu:

has an unconventional styling that make it difficult for new users to fully understand.

One problem is that the text of the menu is black ,which indicates to the user that they are not something to click on. Change the color to purplish blue will help fix that:

The dashed lines separating the menu options pose some stylistic problems. In particular they do not match other stylings on the page (i.e., there are no other dashed lines on the page used as separators).

Ideally these dividing lines should be muted more such as:

This is much more elegant and less visually busy and avoids the user trying to figure out if the dashed lines have some special significance, which they do not.

I changed the style of the lines from border: 2px dashed #000; to border: 2px solid #ccc;

---

A minor problem is that the top menu item Searching does not match the title of the page (Search):

It is not important (and I notice the same thing happening in the Polish language version), but I would change the text in the top menu from Searching to search. (or even Advanced search, and change the search page title to Advanced search).

Notice that for other pages, the menu text and the title text match:

Notice that the titles on the Thematic collection and About the project pages takes up two lines. This makes the probably intentional stylistic choice of having the bottom of the title text flush with the bottom of the title area questionable. Why not have the top line of the title also flush with the top of the title area? The current layout increases visual business for two-line titles in a way that is not good (looks more like a mistake than intentional). One solution would be to make the title area with the notation in the background be exactly two lines of title high. Another would be just to center the title text on the background rather than placing at the bottom.

As a side note, the "About the project" English page is in Polish:

https://polish.musicsources.pl/en/o-projekcie

For the "About the project" page, using the title "About" should be OK, because what other would the page be about than the website? Ideally there would be more information on this page, with this text being information about the funding source. But more important to the user would be an overview of what the site contains, and perhaps a tour of the important features.

---

Going back to the top menu: It would be useful to give feedback to the user about what the current page is, such as making the text bold when on the given page (but this disrupts the spacings of the borders). This is being done currently by coloring the text blue:

But there is a bug on the search page, and all texts are black:

On all other pages, the current page is colored in purple as expected. Ideally all text would be colored in blue as mentioned above to indicate to the user that this might be something interesting to click on, and the current page option should be colored black. If that does not seem enough (since the black and blue colors are close to each other), perhaps highlighting the current page's option in some way such as the background color:

I set the background color for the current page option to #ccc (same as the proposed border color changes.

I find this visual feedback useful.