search

Joystream / atlas

Whitelabel consumer and publisher experience for Joystream
https://www.joystream.org
GNU General Public License v3.0
100 stars 45 forks source link

Playlist - Content Viewer: Design #2001

Closed dmtrjsg closed 2 years ago

dmtrjsg commented 2 years ago

Context

Design epic encapsulating the scope of Content Viewer wrt discovering and interacting with Playlists

Scope

⛔ Out of scope

TCzechowski commented 2 years ago

As a content viewer, I want to search through playlists based on their name and/or description.

@dmtrjsg could you elaborate a bit more on this one? I am not sure I understand this particular user story

dmtrjsg commented 2 years ago

Sure, I think there are two aspects to it:

Screenshot 2022-01-31 at 15 36 21
TCzechowski commented 2 years ago

@bedeho @dmtrjsg @kdembler Hi guys! I've just posted a quick update with sketches/lofi mockups for user stories mentioned above and possible solutions:

https://www.loom.com/share/bd33024894e5460faa9c01b3ef23136c

Let me know what you think!

@dmtrjsg For the testing - We are mostly using common patterns from platforms like youtube that people are most likely familiar with, so I personally don't see anything that would be worth testing. WDYT?

bedeho commented 2 years ago

Feedback

General

I think it would have been useful to see an initial scope for this work, some ideas are being brought up that I think are quite out of scope and not essential to this feature, and so I would love to have been able to have some visibility and provide input as early as possible. In particular

TCzechowski commented 2 years ago

Keep in mind that in the tech brief, we allowed a video to exist in more than one playlist in the same channel. This means that if someone just opens video X, we don't know - at least in some cases, which playlist to show on the right hand side. The same video may be in position x in list 1 and position y in list 2. Even if the video is in exactly one playlist, should we then show the playlist even if the person just opened the video directly, not opening it from the playlist page? This actually begs the question of: how did you intend for someone to end up seeing the video+playlist screen?

The idea here was to display the playlist component only when user enters the player screen through playlists (either clicking on the playlist tile or clicking on the video from playlist details page). If user opens the video directly, then we wouldn't display the playlist component (treating it like it was not in any playlist)

Following and bookmarking management is not sufficiently important to spend any time on in this first release of this feature.

I would say it depends. If it wouldn't take much time to implement then I would suggest to include it (or follow it up with a second release shortly after) 🙂

Are we working on a miniplayer? where is this work? what epic is that?

I've seen someone working on that recently (maybe in the meantime, @toiletgranny it would be great if you could confirm). Perhaps this was the github issue: https://github.com/Joystream/atlas/issues/1941

bedeho commented 2 years ago

The idea here was to display the playlist component only when user enters the player screen through playlists (either clicking on the playlist tile or clicking on the video from playlist details page). If user opens the video directly, then we wouldn't display the playlist component (treating it like it was not in any playlist)

Ok, that certainly sidesteps all problems, but is this the best approach? I think most content will be in one playlist or none, should we not in some way indicate that there is a playlist involved?

I would say it depends. If it wouldn't take much time to implement then I would suggest to include it (or follow it up with a second release shortly after)

I am very sceptical, seeing the time it takes to go from concept->full designs->handoff->implementation, I don't think this is worth it. Also, there is no really good place to store this yet, it can only be stored in local storage, which is really quite brittle (does not translate to other device, or browser, or incognito mode, or history reset). So at the very least it would also need to be remade whenever we get server side store in Orion, which is not happening in the near term.

I've seen someone working on that recently (maybe in the meantime, @toiletgranny it would be great if you could confirm). Perhaps this was the github issue: #1941

Looked at it, that was actually really cool, in particular when scrolling down comment section, feel the pain of this missing feature on YT.

dmtrjsg commented 2 years ago

I'll add my 5p:

Original brief is here #1819 and seems like user preferences saving slipped in and was overlooked to be removed at some point after we discussed it.

  1. Perhaps we can consider a "Home" tab which would show a combination of videos and playlists on the channel page? Will this impact our discovery?
  2. Horisontal scrolling > I would not say its a real trouble and Netflix uses it with a great success for content discovery. Also just checked Joystream categorisation and Homepage - works pretty well for me 😇 This may be quite handy for the home tab if above is a valid suggestion..
  3. I agree with Bedeho, it seems beneficial to indicate that video is within a playlist in all views, regardless of the route to the page. Belonging to multiple playlists may be a challenge, but a collapsible component (accordion for a few) may be smth worth exploring for each playlist video belongs to.. Screenshot 2022-02-03 at 18 55 25

⚠️ Important note:

Based on the current version of Atlas, search has a particular set of videos previewed in thumbnails of search drop down. If we are not changing the search drop down, the search results page in fact is a Video Details page with some recommendations underneath/ next to it.

From content discoverability perspective is it not better to have a search without preview and a more expanded search results page, which displays more options by default and including fuzzy search matches? Otherwise the search is limited to drop down? and on a full page substituted with recommendations or more videos by same publisher.

Or is it the case when search query can define what is shown in the related videos? That seems quite exotic unless I'm missing smth..

@bedeho

dmtrjsg commented 2 years ago

Closed by accident, forgive my itchy finger ><

bedeho commented 2 years ago

Happy to jump on a call to iron this out.

dmtrjsg commented 2 years ago

⚠️ Important note: Based on the current version of Atlas, search has a particular set of v

This was resolved, I was not aware that hitting enter will result in the search results page for the query. Perhaps this is smth we could make more obvious for the novel users but we can take a view on this later..

bedeho commented 2 years ago

Proposition

I gave this some more thought, and it just really seems to me that the overwhelming majority of videos in playlists, will be in one playlist. Isn't it therefore better to just embrace that and always show the relevant playlist on the side, and if there is more than one playlist that its part of, just have some very modest presentation of some way to switch between them or something, and then Atlas will just pick the one which has most views, or some other arbitrary policy. In aggregate this seems to just align much better with a very large fraction of user scenarios.

TCzechowski commented 2 years ago

Hello! @bedeho @kdembler @dmtrjsg

I've just uploaded a follow up video to show you the "happy paths" of each user story so you can see not only the "end" screens, but also how it works in the broader context before I jump into making the high fidelity mockups and finalising them :)

Loom: https://www.loom.com/share/7b1f4034aa004f73b594756f0a29da68?sharedAppSource=team_library

dmtrjsg commented 2 years ago

Thank you @TCzechowski, good progress and seems we are getting there!

Few comments to cosnider:

  1. Channel page > would it make sense to introduce a "home" tab which will be a default tab for all channels, and show a combination of Videos, Playlists and NFTs in sections? Or is that part of 1803 ticket?
  2. Video Page> I've noticed 3 distinct variants of the page when accessed from diff entry routes, One with Videos from Same Playlist showing on Right hand side top section, Second with NFT bidding component shown on Right hand side top section and playlists it belongs to below. Got a bit lost in understanding this so perhaps worth discussing again on hte call
  3. Home Page > Was not mentioned if we show any playlists on home page at all, or did i miss it? I think a section dedicated to new playlists could be appropriate
  4. Discover pages > same comment as for channel pages, I suggest to consider Home tab that shows a combination of regular videos, playlists videos and nfts, (split to sections perhaps). Is that part of 1803?
  5. Search results.> rather than adding a section of playlists to videos, should we also do Home tab which would rank all video matches regardless of their type (NFT/ standalone/ playlists), but indicating the type with an alt version of video tile.
  6. General - how do we get to playlist details page from Video details page?
  7. Is there a way to make a video page for the playlist where other recommended videos section is peaking above the page break line?
  8. Recommended videos - just an idea.. thinking would it make sense to show a single set of recommended videos 'or More from X, for Channel pages" with Top one or two positions reserved for next videos from playlist and the rest from non-playlist set. So that we always have a single set of videos in the vertical carousel. (perhaps better to discuss on the call)
bedeho commented 2 years ago

Recommended videos - just an idea.. thinking would it make sense to show a single set of recommended videos 'or More from X, for Channel pages" with Top one or two positions reserved for next videos from playlist and the rest from non-playlist set. So that we always have a single set of videos in the vertical carousel. (perhaps better to discuss on the call)

I did not really understand this, but lets be a bit catious about expanding scope too much 🙏 . I could see other useful things for the channel page, like allowing the channel owner to specify a featured video deliberately, sort of like an intro video, but I want us to be careful about doing too much here, because having a look at making a great landing page experience for the channel, which fatures content, and creator tokens and everything, that could be its own iteration.

dmtrjsg commented 2 years ago

Agreements from the meeting and next steps:

  1. Add "All" tab to Search results View and Channel Views
  2. Video Page > Add link to "View all videos in this playlist" to the preview widget
  3. Home Page > skipping for now as it is unclear on what basis to select playlists to show there. Can be added as part of optimisation work, similar to #2031
  4. Discover pages> Does not make sense to show playlists there at all, since playlists do not have category.
  5. Link to view playlist details page will be added
TCzechowski commented 2 years ago

Coming back with the final video walkthrough! Didn't want to split it into separate user stories because some of them can be done in multiple pages, so I went through each page and discussed them one by one.

Timestamps: Channel page - 0:40 Figma: https://www.figma.com/file/POw4j95jszfIP5bGfas2IC/Channel-page?node-id=899%3A58974

Video page - 3:58 Figma: https://www.figma.com/file/sMydmZJlzhK91FTIPOd7D2/Video-page?node-id=1987%3A130699

Playlist details page - 10:08 Figma: https://www.figma.com/file/f6pcaMR7bryFmszfrzTqJM/Playlist-details-page?node-id=927%3A50283

Search results page - 19:28 Figma: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search-results-page?node-id=5%3A75378

Loom: https://www.loom.com/share/7be56798d33e439e835e80dba30c0a92

dmtrjsg commented 2 years ago

Have I missed the "All" tab on channel page?

dmtrjsg commented 2 years ago

@TCzechowski please kindly paste the links to all final designs for this epic. I am getting lost in the figma structure rn ><

dmtrjsg commented 2 years ago

Playlists Viewer:

dmtrjsg commented 2 years ago

Actionable items:

  1. Remove the numbers
  2. Add All tab to Channel page
TCzechowski commented 2 years ago

Hi @dmtrjsg Here's the link to the Channel page with "All" tab, let me know if that is what you meant.

https://www.figma.com/file/POw4j95jszfIP5bGfas2IC/Channel-page?node-id=983%3A69004

TCzechowski commented 2 years ago

Also, changed the counter colors in Playlist details page. I don't think we've agreed to removing them completely, but I made them less prominent.

https://www.figma.com/file/f6pcaMR7bryFmszfrzTqJM/Playlist-details-page?node-id=786%3A138887

dmtrjsg commented 2 years ago

1️⃣ Re All on channel page, yes thank you! Figma linke updated in:

❓ do we want to show two rows of videos by default - probably yes ❓ do we want to add "Show more" videos button in the bottom of the section, which loads another 2 rows? Or is this section horisontally scrollable?

2️⃣ Re numbered list, looks better, but prob finalising decision tomorrow on the call. Would be easier if we had a chance to compare side-to-side. left a comment

Screenshot 2022-03-15 at 13 46 21