Closed bedeho closed 1 year ago
@KubaMikolajczyk @toiletgranny guys can you chime in here with your comments before our meeting on Wednesday?
Thank you 🙏
@dmtrjsg, both @KubaMikolajczyk and I are currently stacked with work, and to chime in on such an open-ended discussion, preferably with answers and ideas, requires a non-trivial amount of time, and I'm afraid, can't be done before our meeting. We're happy to help, but this would require shifting priorities.
Having reviewed this issue together briefly earlier in the morning, I'm also concerned about the timing a little. This is because, as part of bringing home CRT/NFT marketplace, I started finalizing the Rework and lay out clear foundation for section components in Atlas (Section Components UX) #2031. If I had had a chance to review this earlier, I could have been able to incorporate this feedback into my work, whereas now it will be very challenging to do that before my last day in the project here.
I'm still unsure what to do now, as it doesn't seem to make a lot of sense for us to invest time in implementing the reworked sections if they don't address the problems highlighted here. Trying to squeeze this feedback into the reworked sections last minute is also risky, as I'm sure you would like to be kept in the loop irt my progress on this and the solutions I want to hand over to engineers and the 7 days I have left in the project is not a lot of time to do that (knowing I still have the entire NFT/CRT marketplace and a whole bunch of new components to document).
I'll give it some more thought and try to come back with a recommendation as soon as possible, but not before our meeting in 40 minutes and before addressing your most recent feedback on https://github.com/Joystream/atlas/issues/3595.
@bedeho
Problem | Will be addressed in #2031 | Comment |
---|---|---|
Extremely tall non-productive screen title on all pages | No | Requires updating each page manually. |
Extremely tall non-productive section titles | Yes | Section titles (if visible) will be a bit shorter and, in general, more condensed, as seen in the recent designs for the NFT marketplace where in which features section titles with no bottom dividers, smaller bottom margin and more real-estate conscious treatment for sorting and filtering (all kept in the same line). |
Disjointed & spacious carousel navigation | Yes | Will make carousels more compact. |
Large anonymous margins | Partially | As part of #2031 I will create guidelines (just like we did for forms) for measures and margins around sections, but — ultimately — whether the guidelines are actually honored will depend on each individual designer's goodwill. Also, this will require updating each page manually. On another note, I also want to point out that, in the current implementation, the spacing in-between sections is twice as large compared to what we have in designs. I guess one can hardly find a better example of how vital it is to have designers (or, ideally, QA specialists) involved in the PR review process. cc @dmtrjsg |
Bloated footers | No | Getting rid of these footers will require updating each page manually. I can't say I agree with your hunch that they're distracting though, nor that Atlas pages are better off without them. |
Bloated channel previews | Partially | We will make this more compact, but applying the change will require updating each page manually I'm afraid. |
Thank you for this breakdown.
Thank you @bedeho for raising this as those issues were waiting for a long time to be addressed 🙇
After Adam's delivery of new section component there is still a lot to unpack in order to address those issues, but we are getting closer. I took time to analyze the state of our design files and below I'm listing what will need to be done in order to address all problems mentioned above.
This part of the work contains reworking files of pages that we already have in our design files in "final" form. The scope of each task here is to update all components of the page, rework of the layout of the page, properly documenting new page structure, create user stories if needed.
👆also not highlighted in the issue raised above but as a part of viewer experience (and using old section approach) needs to be tackled as well
This part of the work contains creating new files for pages that we don't have finalized. The scope is the same as above just the work has to be started from scratch. (which in some cases is faster than reworking 🫣) The only designs which we have for those pages are old archived designs which can only work as a guide for the work as all of the old components are currently changed.
The scope of each of the tasks below is to adjust existing components to address the raised issue. It is possible that during the work on the pages some need will be found to either rework or create additional components.
Great breakdown @KubaMikolajczyk , is there a rough ETA on this? assuming no interruptions?
@bedeho @dmtrjsg the work on implementing the proposition for the issues is done ✅ Some of the pages were removed, some were changed and some were created. There was also some minor component work included.
Following links lead to changelogs of newly created pages: Homepage Popular
Some of existing pages needed updates, the following links lead to changelogs with the updates descriptions: Marketplace Discover Video category Search
There were also rarchived pages which are no longer a part of the viewer experience and should be removed from the implementation. The following links lead to archived representations of those pages: New & Noteworthy Channels
The following link lead to changelogs of changed components: Side navigation
@bedeho the walkthrough is here✅ 🎥 Loom walkthrough: https://www.loom.com/share/8089f9e458d3436196b2d7b4265205ab :)
This was very well done, everything looks great, and I agree that reducing number of pages was great I'm really wondering if we should just kill Popular
also, but lets see. Perhaps when Orion has better discovery engine it will just all be the home page.
One thing I'm skeptical about is how we separate different content types into different tabs on the search result page, that is not really great, the user just wants the best match presented instantly, often I end up in situations like this:
By now adding playlists as a separate tab, we are going further down that approach. On youtube, they try to combine everything into one ranked list, where they search across standalone videos, individual videos in playlists and playlists.
The difficulty is: with the current Orionv2 backend, how good would it be at finding a match in this way.
One way to deal with this is to just leave the search page as it is for now, and then only redesign it based on Orionv2 backend research informing what we can do. Do you think this would be feasible ? My assumption is search is very underutilized right now anyway, just because content pool is small, so not having it updated can work fine.
@bedeho we had this question for search results raised here on Discrod>
So should we try and keep the different sections for now as a half way between tabs and feed? basically suggesting here is to preserve the designs..
I also think that before making more changes we should just study the search results utilisation a bit more. I'll put together a quick overview based on Livesession.
✅ Agreed to keep search with just components & layout updates in scope now. ✅ Channel / All page removed https://www.figma.com/file/POw4j95jszfIP5bGfas2IC/Channel-page?node-id=1901-79747&t=4LDr33kb26SoZUm3-4
Search results improvement page will be addressed here:
Background
The layout patterns and discovery mode in Atlas has a number of costly and opinionated features, and I believe we both can raise the experience, and get to a more neutral baseline in anticipation of a future where personalised recommendations and proper search will work finally work (i.e. OrionV2), at a relatively low cost in terms of design and engineering time.
Usage assumption
I'm assuming that Atlas will mostly, at least in the near term, be used for apps which will be used under the following assumptions.
The basic implications of this mode is that
Problems
Some of these problems are just UI problems at the component level, while others have to do with composition of entire screens.
1. Wasting (vertical) space
We do this in many ways, but the best demonstration is this side-by-side comparison with YouTube (top-left is missing on YouTube due to adblocker)
Here is a brief summaries of the worst offences in my opionion.
1.1. Extremely tall non-productive screen title on all pages
These titles are not adding value commensurate with the waste.
1.2. Extremely tall non-productive section titles
These titles are not adding value commensurate with the waste.
1.3. Disjointed & spacious carousel navigation
Here there are three issues
Contrast this with for example how this control works on Netflix
I'm not saying we should copy this carousel, I'm just pointing how how all of these issues are sidestepped here.
1.4. Large anonymous margins
At the risk of restating a problem which is actually part of one of the other cases, I just think it worth pointing it out explicitly in case it is a standalone design pattern.
I am here thinking specifically of the gap between the bottom of the followed channels and the top of the next title. This is extremely large, and it really adds up in our page layouts which are so heavily using multiple distinct sections.
2. Broken browsing
There are multiple places where we allow the user to review some sort of content grouping which can expand, like this
The problem is just that
Bloated footers
We repeatedly inject these footers when we don't have anything else to present, which truly will have no engagement, and just detracts from content and actions like "show more x".
Bloated channel previews
They look good, they just take way too much space for the contexts that we have available, where the likelihood of a match between user and channel is quite low. This also exists on the player page, and probably multiple other pages.
Proposal
Here is a proposal which tries to just simplify everything, largely without having to make anything new, but it assumes all the problems above have been addressed at the component level to begin with, so
Below I will reference the idea of an "infinite scroller", by that I just mean the interaction where content is populated as you reach the end of a container, there is no need to press any button.
Menu
Move NFT tab all the way to the bottom, right now it sits in-between a bunch of content discovery related tabs, which does not make sense.
Home
Just show infinite scroller of video content, nothing else. The way that content is presented should be, at least until Orionv2 works, just be some blend of new content from channels you follow (if you do), and popular recent content. By blend, I mean that categories can be in-order, unlike now where they are segmented, there is no need for that. People are perfectly used to having home screen feeds with opaque ranking, and this sets us up to do the same when we get recommendations.
Everything else goes away.
Popular
Just show top carousel and then an infinite scroller of video content order by some notion of popularity as now.
Everything else goes away.
Discover
Drop the titles, and drop the category footers.
Channels
Basically same approach as "Popular", but channels are presented as grid of channels, like we do on search results page, order in some way that emphasises quality channels with proper metadata (e.g. views, followers).
NFT
This will be superseded by new marketplace, but if this is getting done before that, I think changes are obvious.