Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve main search design #1273

Merged
merged 29 commits into from
Nov 18, 2024
Merged

Conversation

LukasKalbertodt
Copy link
Member

@LukasKalbertodt LukasKalbertodt commented Nov 6, 2024

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

`creators` is still missing, as it is an array and Meili does not allow
to retrieve the exact match position there yet.
The `id` field that was requested for all items unfortunately made
the types worse. By just requesting it individually for each item,
we get better types and can get rid of lots of boilerplate code.
I will use this in an upcoming commit, and it also seems like an obvious
addition, given our other video/series routes.
- We now always show 3 items, regardless of how many videos the series
  has.
- This means sometimes dummy elements are shown, which use some CSS
  pattern.
- The outline is wider and has a stronger color now.

The "3 things behind one another" shape/image is an important pattern in
our design language to mean "series". These changes make it more
consistent and thus recognizable.
This contains a bunch of changes! I will just list the major ones:
- The thumbnail is now left, the description on the right. This goes for
  all result types.
- Realm results have an icon instead of a thumbnail(-stack), but the
  "result type" icon that all results had is gone now.
- The three result types are now visually more distinct to be able to
  distinguish them at a glance. The info-section is still fairly
  similar, but the "image" section (left) is very different.
- Series & Videos that only have a single host realm now show the realm
  path. Further, series with a single host realm now link to the series
  inside that realm instead of the direct link.
- The result items don't have a border anymore.
- For videos, the date is shown.
- Thumbnails of video results are now bigger.
When `prefix` was empty, it would result in twice the same key.
@LukasKalbertodt LukasKalbertodt added the changelog:user User facing changes label Nov 6, 2024
@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 6, 2024 15:03 Destroyed
@LukasKalbertodt
Copy link
Member Author

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

realm-icons

@oas777
Copy link
Collaborator

oas777 commented Nov 6, 2024

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.

image

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

@oas777
Copy link
Collaborator

oas777 commented Nov 6, 2024

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:

image

@oas777
Copy link
Collaborator

oas777 commented Nov 6, 2024

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
Copy link
Member Author

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
Copy link
Collaborator

oas777 commented Nov 6, 2024

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.
image

@oas777
Copy link
Collaborator

oas777 commented Nov 6, 2024

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
Copy link
Collaborator

oas777 commented Nov 6, 2024

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?

image

@oas777
Copy link
Collaborator

oas777 commented Nov 6, 2024

PS: I know, the draft looks terrible.

@dagraf
Copy link
Collaborator

dagraf commented Nov 7, 2024

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.

Bildschirmfoto 2024-11-07 um 10 08 35

@LukasKalbertodt
Copy link
Member Author

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:

image

@dagraf
Copy link
Collaborator

dagraf commented Nov 7, 2024

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
Copy link
Collaborator

oas777 commented Nov 7, 2024

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.

@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 7, 2024 10:50 Destroyed
@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 11, 2024 15:18 Destroyed
@LukasKalbertodt
Copy link
Member Author

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).

@LukasKalbertodt LukasKalbertodt marked this pull request as ready for review November 11, 2024 15:28
@oas777
Copy link
Collaborator

oas777 commented Nov 11, 2024

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
Copy link
Collaborator

oas777 commented Nov 11, 2024

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

@oas777
Copy link
Collaborator

oas777 commented Nov 11, 2024

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

grafik

for the "no video" place holder?

@LukasKalbertodt
Copy link
Member Author

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
Copy link
Collaborator

oas777 commented Nov 12, 2024

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?

@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 12, 2024 12:18 Destroyed
@LukasKalbertodt
Copy link
Member Author

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
Copy link
Collaborator

oas777 commented Nov 12, 2024

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:

grafik

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
Copy link
Collaborator

oas777 commented Nov 12, 2024

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
Copy link
Member Author

Escher lets goooo

image

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
Copy link
Collaborator

oas777 commented Nov 12, 2024

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
Copy link
Member Author

@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.

@LukasKalbertodt LukasKalbertodt added this to the v3.0 milestone Nov 13, 2024
@sc-lmu
Copy link

sc-lmu commented Nov 13, 2024

@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
Copy link
Collaborator

dagraf commented Nov 13, 2024

@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.

@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 14, 2024 16:58 Destroyed
@LukasKalbertodt
Copy link
Member Author

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
Copy link
Collaborator

oas777 commented Nov 14, 2024

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

Copy link
Member

@owi92 owi92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

frontend/src/routes/Series.tsx Outdated Show resolved Hide resolved
frontend/src/routes/Search.tsx Outdated Show resolved Hide resolved
frontend/src/layout/header/Search.tsx Show resolved Hide resolved
frontend/src/layout/header/Search.tsx Outdated Show resolved Hide resolved
frontend/src/layout/header/index.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to test-deployment-pr1273 November 18, 2024 15:32 Destroyed
@owi92 owi92 merged commit 34ae6a8 into elan-ev:next Nov 18, 2024
4 checks passed
@LukasKalbertodt LukasKalbertodt deleted the improve-search-again branch November 19, 2024 09:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog:user User facing changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants