Component Lab: Recording Thumbnail

[eleonorapopovska]

In this lab we will design in detail the component of the Recording Thumbnails.

The Figma file, where you will be able to find the always updated component is here >>>

https://www.figma.com/design/8xV0kwZoOLMmXKBhXepAzD/Tango-Cloud_Figma?node-id=11836-62&t=G87iT7BUap6hWQXQ-1

The Recording Thumbnails currently look like this >>>

Besides displaying a heat rating, we discussed during our Miro/Nice brainstorming sessions, that Users will be able to:

-Apply mood tags to recordings, like:
Dramatic
Nostalgic
Romantic
Energetic

or

-Apply Tanda order tags to recordings, like
First-track
Mid-track
Last-track

If we have this function and this information is displayed somewhere, it can appear visually as a small symbol/color/letter tag/icon on the Recording Thumbnail itself.

Apart from that, some organising systems in other music players apply visually the information of the genre of the recording... T/V/M on the Recording Thumbnail itself. What do we think? Do we want that? I personally don't find it very useful, as we have our Genre filters to sort that out and a visual representaion for the genre is more useful to appear on the Tanda Cards instead of doing it separately on each Recording Thumbnail itself.

[eleonorapopovska]

@dogacozen @jmarsh24
This is the latest version of the Recording Thumbnail, which takes into account the really long Recording Artist Name issue >>>

The idea is that, we have the three dots, and possibly on hover, the information rolls in, like it would on a Radio :) >>>

Screen.Recording.2024-11-20.at.22.43.33.mov

https://www.figma.com/proto/8xV0kwZoOLMmXKBhXepAzD/Tango-Cloud_Figma?page-id=11836%3A62&node-id=11843-208&node-type=frame&viewport=405%2C112%2C0.39&t=0VbFhow9qQvWDEqH-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=11843%3A208

*The Figma Labs are supposed to offer options of different solutions open for discussion.

[jmarsh24]

Why not put the dots in the top right? It seems a bit crammed to put it inline with the longest text.

[eleonorapopovska]

@dogacozen @jmarsh24 Here are a couple of other options >>>

Screen.Recording.2024-11-21.at.10.27.34.mov

I still think it's best when they are bottom aligned, but I made them lighter.
On the right you can see how the Thumbnails would look with applied 'tag' icons. Perhaps it is too much information to have icons on the recording Thumbnails. Would it be a better strategy to have Users tag Tanda Cards with moods instead?

The most popular option of how others have dealt with this specific issue is the last 'static' one, and we could just have the three dots to trail off... like everyone else.

[eleonorapopovska]

[jmarsh24]

Initially when I saw the three dots, I thought that you were adding a menu button like on most streaming applications to add to queue, favorite, etc. https://github.com/user-attachments/assets/fad2e797-b2ec-4e3e-aea4-43cf06fb9ce6

I would like to leave any sort of tagging ideas off for now and just focus on core functionality. The tagging system will be a while I think.

Have all three seems like too much information.

[eleonorapopovska]

This is the latest recording Thumbnail Layout >>>

1.The Recording Art is always a Vinyl Record. The base, can then be layered over with a certain shade of primary color to represent the Genre: Red-Tango, Blue-Vals, Yellow-Milonga.
2.The very long titles are truncated with three dots.