Improve main search design

[LukasKalbertodt]

This PR improves the whole main search page in various ways. Most important points:

• Thumbnails are now on the left (I know a certain someone who will very much welcome this change 😉 )
• The three different kinds of results were designed to be visually easier to distinguish.
• Videos and series also show the realm path (if there is only one host realm)
• The date is added to videos
• The matching portion in search results is highlighted, to show the user immediately why a result appears.
  • Note: This does not work for "creators" yet, due to a limitation in the search index we use. We have to wait for an upstream fix.
  • Note: metadata like description and title are truncated if too long. If the match would appear in the parts that are cut off, it would be still confusing for the user. Therefore, the metadata is truncated/cut in such a way that the part with the match is shown. (Example: first result for search "hadron myers")

This PR is a draft because I still want to do this:

• Talk to our designer
• Squash two mobile keyboard bugs
• Potentially change the "realm" icon -> No
• Fix bug where the last input on the search field can sometimes be ignored
• Make highlight color stronger -> See some comments below

In a separate, follow-up PR I still plan on doing these search-related things:

• Use Meili federated search (improves ranking, potentially speed, and prepares pagination)
• Improve ranking to make series appear before videos of that series with title = series title when searching for series title
• Potentially merge series and page results when the page is a "series-only-page" for that series
• Maybe: with multiple host realms, if only one exists that derives its name from the series/event, use it for breadcrumbs & link.
• Finally decide about Show multiple host realms in search results #500

Finally, filtering is still missing, which deserves a PR on its own.

---

Feedback is very welcome!

Fixes #470
Fixes #1066
Fixes #1065

[LukasKalbertodt]

As we already mentioned in the meeting just now, the icon for "realms"/pages is still up for debate. The one we currently use is a fairly generic one from our icon package. I am not a huge fan. So first I searched through Lucide icons to find another more fitting one, but couldn't find one that I liked. So I created custom icons and ended up with quite a selection of them. Unfortunately, none of them fully convince me either.

Please let me know what you think! Here are all icons I designed, with the current icon as the first one. Please use the lowercase letter from the screenshot (e.g. (b)) to refer to icons. If you have ideas how to improve icons shown here or ideas for a completely new icon, please let me know. (Do keep in mind that I am sticking to the design guidelines of Lucide icons, which forces me to be super minimalistic -- for a good reason!)

CC @oas777 @dagraf @sc-lmu

[oas777]

I think you made the right choice, Lukas, a) is the one I associate most with a website, even though it's not ideal. The improvement I suggested referred to it being very small and embedded in that grey circle. Why not use the original icon? Cf.

And looking at this fake screenshot, shouldn't the video preview be a little smaller, closer to the "series" symbol?

[oas777]

Another comment regarding the date added: When and why did webpages start to display the "... ago" information instead of a date? I mean, there's a calendar symbol right there, so why not use an actual date format? Also, this seems to lead to misinterpretations unless 2010 is 15 years ago:

[oas777]

PS: All in all, I like the improvements a lot and I didn't come across many crammed timelines in my tests only just now.

[LukasKalbertodt]

I think you made the right choice, Lukas, a) is the one I associate most with a website, even though it's not ideal.

Again, if you have ideas how I could make an icon similar to (a) but better, please tell me.

I suggested referred to it being very small and embedded in that grey circle. Why not use the original icon?
And looking at this fake screenshot, shouldn't the video preview be a little smaller, closer to the "series" symbol?

This is on purpose to make it easier to distinguish the three kinds of results at a glance. We discussed this on 2024-01-17: there we talked about adding series to the main search. And while it isn't explicitly written in our protocol, we concluded that if items are mixed, they need to at least be very easy to distinguish. And I actually do like it a lot better that the three different kinds of results are so different.

Another comment regarding the date added: When and why did webpages start to display the "... ago" information instead of a date? I mean, there's a calendar symbol right there, so why not use an actual date format? Also, this seems to lead to misinterpretations unless 2010 is 15 years ago:

That particular video is from 2010-01-22, so it's 14 years and 9.5 months ago, which gets rounded up to 15.

But re main point: for one, you can hover over the "15 years ago" to see the exact date. But secondly, I get your point, I am also sometimes annoyed by these relative dates. They can be handy as well though, especially when you have lots of "somewhat recent" videos. We can certainly change this though, for example everything that's longer than 6 months ago is shown as explicit date? 🤔

This would affect more than the search, and expecting more search related discussion, I created a dedicated issue for this discussion: #1274

[oas777]

I think you made the right choice, Lukas, a) is the one I associate most with a website, even though it's not ideal.

Again, if you have ideas how I could make an icon similar to (a) but better, please tell me.
Now that you're asking: Couldn't you combine the shape of a website we currently have with some "content symbols" from the other icons, like squares for images and lines for text? Cf.

[oas777]

This would affect more than the search, and expecting more search related discussion, I created a dedicated issue for this discussion: #1274

Yummy, yet another discussion about a date format ...

[oas777]

I suggested referred to it being very small and embedded in that grey circle. Why not use the original icon?
And looking at this fake screenshot, shouldn't the video preview be a little smaller, closer to the "series" symbol?

This is on purpose to make it easier to distinguish the three kinds of results at a glance.

Do you think size is the main factor in distinguishing these?

[oas777]

PS: I know, the draft looks terrible.

[dagraf]

I prefer (a) from all suggested icons and can live with the current solutions. Thinking in the future, when there will be filters to only show videos/series/pages, I assume most users would have these activated.

If one would want to change something at the current solution (where I have no strong opinion), what about this? I just switch the circle to a rectangle with rounded corners and made it as large as the series thumbnail.

[LukasKalbertodt]

I'm a bit confused why everyone is trying to redesign the "circle with icon" for pages. What's the actual problem with it? Can someone put that into words for me? Do you think it looks bad? Do you dislike it looking different from the other results?

As an aside, YouTube also uses a smaller circle for channels to distinguish result types:

[dagraf]

As stated above, I do not see a need to change the current solution (circle with icon) and I would suggest to stay with it.

[oas777]

Thanks for "Hide mobile virtual keyboard when pressing virtual "enter" in search", I saw that as well but was too tired to add another ticket.

[LukasKalbertodt]

I talked to our designer earlier today and changes some things appropriately. There were no major changes, just polish. I also fixed some bugs or bad UX, mainly related to narrow screens. In case you're interested, these are the changes from the design review:

• Distance between search result items increased (slightly in desktop
  mode, quite a bit in mobile mode).
• Font size of date, creators and series title (all in video results)
  reduced to 12px, the same as the description. Fewer different font
  sizes in the results, and makes everything a bit less crammed.
• Hover-effect of search result now has a short transition to make it
  feel smoother.
• Increase max-width of whole page so that results can be a bit wider
  on wide screens (900 -> 1000)
• On screen widths between 470 and 650, make the video info as wide as
  the thumbnail and center it. Having the info span the full width, when
  the thumbnail is centered does not look great. Sure, this wastes some
  screen space, but the max width 400 is still more than the info is
  wide at screen width 651.

Here are some more points from the review:

• Regarding using a bigger icon for "pages", she thinks that it wouldn't look good and rather look like a thumbnail is missing and that's its replacement. So I did not change the small circle with icon.
• She also agreed to keep the current icon for pages. She suggested that once we have the filters and can filter for "result kind", that we then add the same icon to the "page" filter (and some other icons for series and videos), to make the association between icon and "meaning" clear.

Finally, regarding the highlight color (the background color of highlighted text snippets): she suggested going with grey, which I now changed. This has the advantage of making the result look less noisy and chaotic. It also means we don't have to make that color configurable. She went even further and suggested removing the highlighting completely, asking (all of us) whether it is actually useful when searching. "YouTube also does not show this, it only matters that the relevant result is at the top".
I'm torn on this. I do agree that the page looks cleaner and nicer without any highlighting, BUT I also think some actually useful feature would be lost. I do think it is useful. So this question feels like a classical "form over function?" debate to me.

This leaves us to decide between these three options:

1. No match highlighting at all (except in the timeline tooltip for subtitle matches)
2. Grey match highlighting (the current state of this PR)
3. Colored match highlighting with configurable colors

What do you think?

---

Apart from this highlighting question, I think there are no open discussions anymore, correct? (I assume the word of the lord our designer simply settles some debates.) If I missed something or you find anything else, please bring it up (again).

[oas777]

Generally, I try to accept what the experts say, so consider these part of my regular nagging:

• 12pt is very small on my large screen.
• On mobile, the (fully) visible search result should be highlighted automatically while I keep scrolling down.

Other than that, I see the improvements, so please thank her for these.

[oas777]

BUT I CANNOT BELIEVE SHE WAS FINE WITH THE TINY CIRCLE.

[oas777]

Also, I'm fine with grey. Did she come up with something better than

for the "no video" place holder?

[LukasKalbertodt]

Generally, I try to accept what the experts say

Even experts are just humans, so we can still discuss everything. I didn't want to shut down any discussion here.

• 12pt is very small on my large screen.

Yes, I know what you mean. I was hesitant at first too, but was convinced by: that information is not the most crucial one, most people will just look at the thumbnail and title. And YouTube uses the exact same font size for the small text in its search results.

• On mobile, the (fully) visible search result should be highlighted automatically while I keep scrolling down.

I'm not sure I understand what you mean. By "highlighted" you mean the slighter brighter background color? But yeah, doing that wouldn't be super trivial and I'm not sure if it's really worth it? Or should we consider removing the "brighter background" effect on mobile completely? When scrolling, I sometimes enable the effect on items I happen to tap on for scrolling, maybe this is what bothers you? Disabling this for mobile should be rather easy.

BUT I CANNOT BELIEVE SHE WAS FINE WITH THE TINY CIRCLE.

Does it bother you that much? :D Increasing its size a small bit shouldn't be a problem I guess. But it looks completely fine to me, so I cannot emotionally understand your point.

Did she come up with something better than for the "no video" place holder?

Ah right, we didn't talk about that. Same here: how much does it bother you? So the thing is: some pattern are vastly simpler to implement compared to others, and it doesn't really have to do with their "visual complexity", i.e. the implementation complexity is not intuitive. I took my pattern from this page (the pattern there are appropriately licensed) to save some time, as implementing my own pattern idea would take more time. And even from that page, some patterns are rather complex, implementation-wise.

I can certainly try implementing a repeating Opencast logo as pattern (that would be an interesting challenge), but I'm not sure if it's the best use of time...

[oas777]

For the sake of efficiency, I'm not going to repeat my arguments against the tiny, deviant circle though I would like to stress they are rational, not emotional. My comment was.

As for the background, I wouldn't want you to invest substantial time, but it seems a little futile to ask for feedback and not present alternatives: Are there grey options that are easy to use?

[LukasKalbertodt]

For the sake of efficiency, I'm not going to repeat my arguments against the tiny, deviant circle though I would like to stress they are rational, not emotional. My comment was.

Didn't mean to imply you only brought emotional arguments. I just tried to say that I don't share your aesthetic feelings regarding it. However, after re-reading this whole PR thread once again, I am still honestly confused what the arguments against it are. The closest thing to a reason I found was "the reason for mentioning the circle is that it's not "different" in the way you want to distinguish similar search results from different domains, it's visually 'outstanding', but not in a good way", but this is also just a statement without explanation or reasoning. Sorry, I really don't want to argue against you, I'm just honestly really confused at this point :D

But, taking your "sake of efficiency" to heart, I just made the circle and icon a bit larger. I hope that fits the compromise that was mentioned before.

As for the background, I wouldn't want you to invest substantial time, but it seems a little futile to ask for feedback and not present alternatives: Are there grey options that are easy to use?

Changing the colors of the patterns on the linked page is super easy. So you can suggest patterns from there. Clicking on the patterns even lets you select colors yourself (on the webpage) to preview how it would like. Patterns with only two colors are slightly preferred as that allows us to have a lower contrast pattern, which is nice since we don't want it to be too attention-grabbing. For reference, these would be the colors I'd use (for light mode):

        --color-neutral15: #e8e8e8;
        --color-neutral20: #dddddd;
        --color-neutral25: #d1d1d1;

[oas777]

I'm just honestly really confused at this point :D

Not sure this helps, but I wouldn't want to leave you in that deplorable state: To me, the idea of including webpages in search is odd to start with, because "video portal", not "multimedia portal". Plus, I don't expect to see many webpages to hold relevant content beyond the videos they feature. While this might sound like an argument in favor of an "outstanding" symbol, it actually breaks the "harmony" of the search results and their respective symbols in design terms:

While harmony is a general term, it can be translated to cohesion and uniformity in design: You wouldn't use 99% Lucide icons and 1% Feather, would you? So don't be surprised I'm against 1% circles when 99% of the icons are rectangular.

[oas777]

Changing the colors of the patterns on the linked page is super easy. So you can suggest patterns from there.

You want to got full Escher? Or are we too square for that?

[LukasKalbertodt]

Escher lets goooo

I like the overlapping cubes, I can try that tomorrow. The graph paper I find unfitting.

---

Thanks for the explanation of the circle problem. Regarding "pages in a video portal", you'll be happy to hear that I have plans of merging pages with other results if the page has no content, except the other result. So for example, most pages only have one series on them. In that case, we don't want two results (one for the page and one for the series). So we will only show the series then. I think that will already get rid of most page results, so that most users will never even see them.

Can you still live with the now slightly bigger circle for the time being? In my mind the circle vs squares is not too bad, e.g. YouTube does that too.

[oas777]

Can you still live with the now slightly bigger circle for the time being? In my mind the circle vs squares is not too bad, e.g. YouTube does that too.

I can certainly live with that. Not sure whether I can live with the constant reference "YouTube does that too" though ...

[LukasKalbertodt]

@dagraf @sc-lmu Whats your opinion on the highlighting? Option 1, 2 or 3?

And if you have any other remarks, let us know. Would try to merge this soon.

[sc-lmu]

@dagraf @sc-lmu Whats your opinion on the highlighting? Option 1, 2 or 3?

And if you have any other remarks, let us know. Would try to merge this soon.

Sorry for the late reply, was out sick a few days. As for Highlighting - I slightly prefer option 2, but can very well live with all three. Thanks!

[dagraf]

@dagraf @sc-lmu Whats your opinion on the highlighting? Option 1, 2 or 3?

And if you have any other remarks, let us know. Would try to merge this soon.

I also prefer option 2.
Option 3 is also fine.
Option 1 gets zero points from me.

[LukasKalbertodt]

I changed the pattern to the cube pattern now. Note that it is very low contrast on purpose. It should be barely more than just some color. We don't want to draw attention to it, just give the eyes a hint of something not-boring.

---

With everyone saying the grey highlighting is fine or even preferred, I will also leave that. So I think there are no blockers or open discussions anymore. That means Ole can start reviewing the code and then this can be merged.

[oas777]

Thanks for the "cube-thingy", definitively an improvement.

[owi92]

No need to change anything, as usual I didn't see any blockers. Just very few and unsubstantial (always wanted to use that word) typos and a comprehension question.

Oh and of course I did a bunch of testing as well during the review, everything appears to be working splendidly.