Display preview on hover

[glorenzen]

This adds a short preview for an item when hovered, per #3064 . I added a simple tooltip that shows a shortened synopsis and the duration.

I'm not crazy about the UX, so feedback is welcome. This may be too much content for a tooltip, making the interface look cluttered. Adding an option in the three dots menu allowing users to turn on/off the tooltips could help with that though.

[nichwall]

Can you add a screenshot/short video of the tooltip as it is now? (Would make discussion a little easier)

[glorenzen]

Sure, here's a screenshot with the tooltip anchored to the top of the book card.

[nichwall]

Thanks! I like the tooltip above the card. Not sure above is the best spot but I think any of the other sides would be weird.

Initial thoughts and some things to try:

• Shorten the length of the description. I agree the box looks a little weird, making it smaller may help. Maybe half the description length?
• Is there a delay after hovering before the tooltip appears? I'm thinking like a 0.5-1 second delay, because having the tooltips pop up when mousing across the screen would be jarring
• Don't cover the edit or select buttons at the top of the card with the tooltip

[glorenzen]

Sounds good. I reduced the description length from 500 characters to 150 so that the tooltip does not cover the edit button when hovering over the topmost library items and I also added a delay of 500 ms to the hover.

Recording.2024-07-17.170437.mp4

[nichwall]

Nice! Maybe we could move the "Duration" to the upper right or something, save some vertical space? Not sure how hard that would be to do or if that would even look good. (I'm just throwing ideas out, feel free to ignore)

Honestly, having only the first 150 characters (or however many it ends up being) of the description being shown may help motivate me to go through and get rid of all the "publishing fluff" in the descriptions on my library.

[glorenzen]

I changed the markup to a table so that the synopsis and duration are in two columns now. I think it looks a little cleaner.
What do you think?

[nichwall]

Hm. I like the two columns more than two rows. Maybe this can make the tool-tip a little wider and add more characters to the description? My main issue with the two columns is I think it'll look better if the duration is not vertically centered, but not sure if the bottom would then look too empty. Maybe publish year could go there? Not sure what else would be important.

Some more minor things:

• I think "Synopsis" should be changed to "Description" because to me that hints that the information is coming from a different field.
• We'll want to use the keys from the strings files located in client/strings so the tool-tip titles can be localized. "Description" and "Duration" already exist, but more can be added to the English file if needed (and only to the English file, Weblate handles translations for other files)

[nichwall]

Feedback from my wife after showing all of the images

• Duration should be on the left, not the right
• She thinks it should be below the cover and have more of the description
• Time should be aligned to the top instead of vertically centered of the description is longer (with nothing below it). The current description length is good with the duration centered

[glorenzen]

Okay, I think I made all of those changes. Here is a screenshot:

For the last item on your wife's feedback, was she saying that if the description is shorter, the duration should be aligned to the top vertically? Like this?

[nichwall]

For the last item on your wife's feedback, was she saying that if the description is shorter, the duration should be aligned to the top vertically? Like this?

Yes, that second image is what she meant. I think either way is fine now that I'm seeing the images together. Thanks for humoring me throwing ideas at you :)

[advplyr]

I like the concept and using the user setting. I'm not sure about the design. I'll see if anyone has thoughts on Discord

[glorenzen]

I like the concept and using the user setting. I'm not sure about the design. I'll see if anyone has thoughts on Discord

Yeah, I'm not crazy about the design either.

One thought I had was to create an "expanded" view for the bookshelf rows that the user can turn on or off where more item details are visible by default. Similar to how Audible displays a short excerpt to the right of the book cover. The expanded view would have wider cards and fewer visible in each row, but the user could view details without clicking on the item. I can create a mockup soon for it.

[advplyr]

That might be even harder to design for. The early versions of Abs had a list view that I always meant to bring back.

[glorenzen]

Based on feedback, I stacked the duration and description in one column and added the user progress, when available.

[glorenzen]

@advplyr @nichwall, do you have any other thoughts or suggestions on the design or implementation for this?