Revise search page design

[owi92]

This applies some smaller changes to the appearance of search items. In particular, thumbnails are now on the right side and an icon has been added to ease differentiating between the types of these items (not super useful right now as we only have videos and pages, but other types will be added in the future).

This also adds a button to close the search/return to the previous page the search has been initiated from. This will also happen upon pressing Esc or clearing the search input field.

Further improvements like highlighting search terms in the results and filtering for specific items will be done in a follow up PR.

Closes #883

[LukasKalbertodt]

You can't imagine how happy I am that the ugly old search is finally improved!

As with these design-heavy PRs, first a review purely by testing the deployment, without looking at the code. I really like it already but think it could be improved by minor changes. Here are some ideas, let me know if you agree that they look better. (For some, I'm really unsure myself).

• Maybe remove the vertical line between icon and main content?
• More padding/space between line and main content. Without the line, gap: 24px?
• A bit more space between thumbnail and main content
• Heading h3
  • font-size 18px or even 17px?
  • line-height 1.3?
• Icon
  • stroke-width: 1.5?
  • Smaller? E.g. 32px?
  • Icon choice:
    • Should be very easy to distinguish at a glance. Currently both have a box around them, making them look kinda same
    • Use film as icon for videos?
    • For page: file-text, scroll-text, layout-list, list-tree, scroll, gantt-chart-square, newspaper, layout-panel-top?
• Restrict creators to one line with "..."?
• Maybe make it so that "Part of series" is always at the bottom of the box, i.e. when there is no description?
• Maybe replace "part of series" with just "series"? And maybe add an icon in front, with the same style as the creator icon?
• Screen size stuff
  • Maybe remove the left/right margin of the <li> completely. At small screen widths, we can use that width for content and I don't think it looks crammed. On wider screens, that margin is irrelevant anyway.
  • At width 680, the thumbnail takes a big part of the width, making the text look very crammed. Maybe below 800 or 750, shrink the thumbnail a bit? Bit with the previous point, it's not as bad anymore.
  • At width 640, the thumbnail is pretty huge. Even if it doesn't look amazing, I would probably restrict its width to like 400px maybe (and then center align)
  • And below 650, does it make sense to put the thumbnail over the title/text stuff? That would be closer to normal series blocks. Should be possible with a simple flex-direction: column-reverse or sth.
  • Mhh on very narrow screen, the "kind icon" is on the right, but taking the whole column. It is kind of unfortunate as we lose space for the description that way. Mh. But I get it, avoiding that is tricky :P Maybe we'll come up with a nice idea later.

[oas777]

Thanks, Ole!

* Maybe remove the vertical line between icon and main content?

+1

* Maybe make it so that "Part of series" is always at the bottom of the box, i.e. when there is no description?

+1

* Maybe replace "part of series" with just "series"? And maybe add an icon in front, with the same style as the creator icon?

+1

• The "Play" icon should be identical to the one we already have (from Paella), says Lisa. Is it?
• Don't show "No description" if there is no description (we had that somewhere else recently).
• I know it's a bit early for this, but keep in mind you might have to display a timeline in order to indicate where the search results are in the video.

[dagraf]

Thanks, Ole and Lukas for the PR and the comments. I discussed it with our interaction designer. Here Our

* Maybe remove the vertical line between icon and main content?

+1

* A bit more space between thumbnail and main content

+1

* Restrict creators to one line with "..."?

+1, but what happens, if I am looking for a creator who got replaced by the "..."?

* Maybe replace "part of series" with just "series"? And maybe add an icon in front, with the same style as the creator icon?

-1, I would stick to "Part of series" so we have the same wording in the search and on the video page. I would not insert an additional icon

  * At width 680, the thumbnail takes a big part of the width, making the text look very crammed. Maybe below 800 or 750, shrink the thumbnail a bit? Bit with the previous point, it's not as bad anymore.

+1, I would suggest to reduce the size of the thumbnail in general and not to shrink it in smaller screens. I quite liked the size of the thumbnail in the 'old' search

  * And below 650, does it make sense to put the thumbnail over the title/text stuff? That would be closer to normal series blocks. Should be possible with a simple `flex-direction: column-reverse` or sth.

+1, I am strongly in favor to put the thumbnail over the title/text stuff.

Some additional ideas:

• Write the title (and the path) in black, since it is not clickable but the entire area is. In general: Every text that is not a cklickable text which takes me somewhere is black.
• Do not always mix video and pages in the search results, but offer a solution to sort them using different tags/filters (see screenshots of YouTube and Spotify): "All", "Videos", "Pages"; the default could be "All" or "Videos".
• Text in Creator, Description and Series should have the same size.
• Insert more padding/space between creator and description.
• Icon for creator: We would prefer a version, where the person is filled out (see screenshot).
• I preferred the version, where the thumbnail was on the left. I get it, that with pages showing up on the same results page this would not really work...

[oas777]

• Restrict creators to one line with "..."?

+1, but what happens, if I am looking for a creator who got replaced by the "..."?

You will never ever be able to see all the possible creators. Cf. https://video.ethz.ch/events/nsl/colloquium/2023/planetary_urbanisation/2d98f6be-7847-4a46-864c-7965dfcadad5.html. So you have to restrict and one line sounds good to me.

[LukasKalbertodt]

I know it's a bit early for this, but keep in mind you might have to display a timeline in order to indicate where the search results are in the video.

That's certainly useful to bring up here. I did consider it and I think it's possible to just add below the series, for example. So I think going with this design now won't bring problems down the line.

but what happens, if I am looking for a creator who got replaced by the "..."?

Yeah that's a good point, The same problem can occur for the description and also the title (which is restricted to two lines). We can get the information of where the match occurred (i.e. where the search term is in the description) so I suppose we can snip the part around the match then. So certainly possible, but implementing it will require some work.

I would suggest to reduce the size of the thumbnail in general and not to shrink it in smaller screens. I quite liked the size of the thumbnail in the 'old' search

I like the new larger thumbnails. YouTube has way larger ones, for comparison:

I would be ok with reducing them a tiny bit still, but I think the old size is too small. Also note: if we make it smaller, this thing happens more often: the metadata/text takes more height than the thumbnail and then the thumbnail is not flush against the box borders anymore:

Write the title (and the path) in black, since it is not clickable but the entire area is. In general: Every text that is not a cklickable text which takes me somewhere is black.

Very good point about the breadcrumbs/path. Those shouldn't be colored (or they should be clickable like the series title). Not super sure about not coloring the titles. I quite liked it. But lets maybe get some comparison screenshots once most other suggestions are implemented.

Do not always mix video and pages in the search results, but offer a solution to sort them using different tags/filters (see screenshots of YouTube and Spotify): "All", "Videos", "Pages"; the default could be "All" or "Videos".

That is indeed planned, but not part of this PR.

Text in Creator, Description and Series should have the same size.

Not sure I agree with that, I like the way it is. But also no strong opinion.

Insert more padding/space between creator and description.

Yeah, I agree I guess, but it makes the problem of "thumbnail not flush" more likely to happen.

Icon for creator: We would prefer a version, where the person is filled out (see screenshot).

While I agree that its a bit much detail for such a small icon, we can't really do that: Tobira uses non-filled icons everywhere. Using a filled one here would be inconsistent.

I preferred the version, where the thumbnail was on the left. I get it, that with pages showing up on the same results page this would not really work...

Yeah... I get you. Maybe we can experiment a bit still? No idea if we can find sth nice with thumbnails on the left. I think first implementing all other things mentioned above and then reevaluating is a good idea.

[oas777]

Some comments:

• +1 for large(r) thumbnails, it's a video portal after all, not (can't believe I'm saying this) a metadata portal.
• -1 for thumbnails moving to the left; cf. https://av.tib.eu/search?q=schulte
• +1 for sorting/filtering search results (here: video vs. series). This could also become helpful when differentiating the source of the search results (slide content vs. transcript vs. metadata). Add some other relevant metadata (year/semester, language etc.).
• -1 for the creator icon being filled out; also has to be consistent with the video page (https://pr1025.tobira.opencast.org/v/GjDqXFlukkH).
• Text size: Maybe compromise with two different sizes vs. three I think it has now?

[owi92]

I have adjusted a few things according to your suggestions, though there other things I haven't touched yet as they are still open for discussion as far as I can tell. I'll try to summarize these here:

• Choice of icons: For videos, I took the one Lukas suggested as we also use that in other places. But we could also use the paella play icon, if everyone prefers that. Might actually make more sense since these can also be audio clips. Also, right now both icons still have a box around them, and I agree that this makes them harder to differentiate on a glance. I'm not sure what icon should be used for pages though.
  I do like the one I chose in the first place:

• Video icon on small screens: In response to this:

  • on very narrow screen, the "kind icon" is on the right, but taking the whole column

  • I think it's fine to hide the video icon completely on screen sizes <450px. The thumbnail should probably suffice as indicator, though we might need to rethink this once we add series to the search results.

• Replacing part of series with series and adding an icon: I agree with David and think this should reflect the same wording we use on the video page, hence sticking with part of series. Regarding an additional icon: I'm leaning towards it not being necessary.

• Thumbnail positioning: I kept this on the right hand side mainly because it works better with the icon and non-video items without thumbnails. But if both David and Olaf prefer it on the left I'm sure we can find another solution. Olaf, can you state your preference on this again? You gave a "-1" on this but referred to another portal which has them on the left.

• Coloring of headings: Decoloring the breadcrumbs makes sense to me, but I feel having the actual title colored like a link isn't really an issue. After all, even though the whole area around that acts as link, the heading is still part of that, and the coloring makes it stand out a bit more and decreases the need for additional padding between the title and creator lines.

Let me know if I missed anything, especially things that you think should definitely be changed (but others as well of course).
I'm already working on the filters, but these will be added in a follow up PR.

[LukasKalbertodt]

• Choice of icons: For videos, I took the one Lukas suggested as we also use that in other places. But we could also use the paella play icon, if everyone prefers that. Might actually make more sense since these can also be audio clips. Also, right now both icons still have a box around them, and I agree that this makes them harder to differentiate on a glance. I'm not sure what icon should be used for pages though.
  I do like the one I chose in the first place:

Yeah maybe using a triangle instead film is actually a good idea to make both more visually distinct. So simply play from Lucide? That is the same as the Paella one.
Re page icon: I think the page icon is best suited to have a square form. Whether to use one of my suggested ones or the one you initially picked... I don't care too much I think. Maybe we can also create our own.

• Video icon on small screens: In response to this:

  • on very narrow screen, the "kind icon" is on the right, but taking the whole column

  • I think it's fine to hide the video icon completely on screen sizes <450px. The thumbnail should probably suffice as indicator, though we might need to rethink this once we add series to the search results.

Yep I saw that and I think it's a good solution!

• Replacing part of series with series and adding an icon: I agree with David and think this should reflect the same wording we use on the video page, hence sticking with part of series. Regarding an additional icon: I'm leaning towards it not being necessary.

I'm fine with that.

• Thumbnail positioning: I kept this on the right hand side mainly because it works better with the icon and non-video items without thumbnails. But if both David and Olaf prefer it on the left I'm sure we can find another solution. Olaf, can you state your preference on this again? You gave a "-1" on this but referred to another portal which has them on the left.

Yeah I was also confused by Olaf's last comment regarding this. I still think having them on the right works fine.

• Coloring of headings: Decoloring the breadcrumbs makes sense to me, but I feel having the actual title colored like a link isn't really an issue. After all, even though the whole area around that acts as link, the heading is still part of that, and the coloring makes it stand out a bit more and decreases the need for additional padding between the title and creator lines.

Here is a comparison:

I also would say completely without color it's kind of dull. And the series link feels more prominent than the title in that case. So I would leave at least the title colored? On the icon I'm unsure but I also don't mind keeping it colored. Remember that Lisa always said our designs are boring and dated bc they use so little color 😆

---

I just retested and I like it! I have found a few more things:

• I just found myself clearing the search via ctrl+A + backspace. I wanted to search for something completely new. But that brings me to the previous page where, importantly, the focus is not on the search field anymore. The focus should still remain on the field for sure. But maaaybe we shouldn't even switch to the previous page when clearing the search field? We have ESC and the X button for that (which we should then still show on empty search input). Is that enough?
• Just to note this here: when closing the search, the previous page has to be loaded and isn't there immediately. That is kind of unfortunate, but I'm also not entirely sure why this happens. Seems hard to debug too. I think it's certainly fine in this PR, but we might want to look into this at some point.
• More space between description and "part of seriers".
• The margin-right: 40px of the content box should only be applied on large screens.
• Should the "part of series" line also be restricted to one or two lines?
• I don't quite like that large font size of the description (14px) and liked the previous (13px) better. If Olaf and David really prefer fewer different text sizes, then I think I would actually prefer also making series and creator line 13px large instead. For reference, YouTube's font size in search result for everything except title is 12px.
• The video icon is visually larger than the page icon. I like the latter (smaller) size, so maybe reduce the size of the video icon to 30?

[owi92]

But maaaybe we shouldn't even switch to the previous page when clearing the search field?

Hm I would still prefer if it would return. But I couldn't find a good solution on the fly, so lets go with your suggestion for now.

In the long run, we might want to change the search to a modal after all, that would also solve the other problem you mentioned (previous page has to be loaded and isn't there immediately). Though as we discussed, that would mean that one couldn't share search results via a link. Hmm. Lets table this for later.

[LukasKalbertodt]

Hm I would still prefer if it would return.

Some feedback from Olaf and David is appreciated then: should you return to the previous page when emptying the search input? Or are the methods "pressing ESC" and "clicking the X" sufficient?

---

Any particular reason you chose play-circle instead of `play?

One tiny thing still: the focus outline of the series title is cut off at the bottom. It being cut off on the right side if the title is cut off would be fine for me, but bottom we can fix I think.

Also one thing I thought of, but this really doesn't have to be in this PR unless you can do it in 3 minutes: navigating through the results with arrow up and arrow down? I'd like that, but it's not that important I suppose.

[owi92]

Any particular reason you chose play-circle instead of `play?

Yes, I tested play and just didn't like the look. It's kinda too edgy, and I really like how it looks with the circle. I can make some comparison screenshots (after lunch ;) I'll also take a look at the focus outline you mentioned.

navigating through the results with arrow up and arrow down?

Yeah I'd like that as well, though I don't really see myself implementing this in 3 minutes (though tbf, there aren't a lot of things I could do in 3 minutes period).

[owi92]

Here are the screenshots:


Idk, I really think the circle looks more.... rounded (no pun intended)

[owi92]

Well of course this doesn't work in everyones favorite browser. (I mean safari - which also has trouble with the focus border of the search items)

[LukasKalbertodt]

Huff yeah that looks weird. But also the focus outline on the item itself. Seems like the <li> or sth has overflow: hidden? That shouldn't be necessary? Alternatively, you can just ignore fancy things like clip-margin and just add more padding? Does just using overflow-x improve stuff? overflow-clip-margin support indeed seems to be not great :/

[owi92]

Yeah we can just add some padding. Though you better not use shift+tab in safari, unless you want to be sad. It seems that the focus outline weirdness of the item itself is caused by the solution that I use for the nested link. It's so annoying that safari can't handle that. Either I look for another solution, or we remove the link again. In which case it also doesn't need to be tabbable.

[LukasKalbertodt]

Just for the protocol: I think this could be merged. It's a clear improvement. Some minor things (Safari focus outline, ...) can be improved later. With everything else (icon choice, ...) I can certainly live.

So I think we are just waiting for feedback from Olaf and David. In particular regarding these things:

• Coloring titles or not? (See screenshots above)
• What icon?
• Thumbnail positioning

[oas777]

• Thumbnail positioning: I kept this on the right hand side mainly because it works better with the icon and non-video items without thumbnails. But if both David and Olaf prefer it on the left I'm sure we can find another solution. Olaf, can you state your preference on this again? You gave a "-1" on this but referred to another portal which has them on the left.

Yeah I was also confused by Olaf's last comment regarding this. I still think having them on the right works fine.

Regarding this, I'm against moving the thumbnails to the left and the link to the TIB portal was supposed to tell you why. Which obviously wasn't self-explanatory.

[oas777]

Hm I would still prefer if it would return.

Some feedback from Olaf and David is appreciated then: should you return to the previous page when emptying the search input? Or are the methods "pressing ESC" and "clicking the X" sufficient?

I have no strong feelings regarding this one. If you want to change your search term and use the "X" to do so, yes, you are on a different page, but your cursor is up there anyway, so you simply click once more and enter the new search term. No big deal.
The other way round, it's good that you stay on the search page if you modify your search term by using "backspace" or "delete" after selecting/marking the current search term (at least that's what it does here) because you obviously have the intention of continuing your search.

[oas777]

Idk, I really think the circle looks more.... rounded (no pun intended)

Correct. While I would like to use "play" for coherence with the player, it looks like the Tesla cybertruck of icons. Also, we could make it coherent if we make Valencia use "play-circle" in the preroll, cf. polimediaupv/paella-ethz#50.

[oas777]

+1 for coloring titles. Just for the record, there is a light mode, you guys always tend to look at the dark mode, it seems.

[LukasKalbertodt]

there is a light mode

[dagraf]

So I think we are just waiting for feedback from Olaf and David. In particular regarding these things:

* Coloring titles or not? (See screenshots above)

Ok, let's stick with the colored titles.

* What icon?

+1 for the the play button with the circle around.

* Thumbnail positioning

I would still vote for moving the thumbnail to the left. But I get it, I'm outvoted here. My main reasons to move it to the left: The most important things (thumbnail and beginning of the title) are right next to each other and can be studied in a single glance. With the thumbnail on the right they are quite far away from each other forcing the viewer to look back and forth between thumbnail and title.

To sum it up: I think too, this PR can be merged as it is.

[dagraf]

Some feedback from Olaf and David is appreciated then: should you return to the previous page when emptying the search input? Or are the methods "pressing ESC" and "clicking the X" sufficient?

The behavior as it is at the moment in this PR (return to the previous page when clicking the X or pressing ESC, stay at the search results when the search input was emptied) makes sense to me.

[LukasKalbertodt]

My main reasons to move it to the left: The most important things (thumbnail and beginning of the title) are right next to each other and can be studied in a single glance. With the thumbnail on the right they are quite far away from each other forcing the viewer to look back and forth between thumbnail and title.

I would agree with that. But again, putting them left has other problems. So yeah, lets keep them on the right, at least for now.

With this, this seems good to go! 🎉