Low-hanging layout & UI problems

[bedeho]

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.

• Small number of consumers & creators
• High density of creator relevance to consumers
• High density of content relevance to consumers

The basic implications of this mode is that

• Browsing long streams of content previews will still work without too much pre-curation or personalisation.
• Publication recency & popularity will be a particularly effective ranking variable for surfacing relevance.
• Human powered featuring is likely going to be able to review large share of content, and do a good job of surfacing relevant content.

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

• 1.3.1 Top right carousel buttons are very tall, much more than is needed.
• 1.3.2 Progress indicator is not only takes lots of vertical space in it's apparent padding above and below,
• 1.3.3 but it is also separated entirely from the location it is supposed to indicate progress for.

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

• this call to action is near invisible, in particular when it is sandwiched between two sections with lots of images and large titels.
• if you by some miracle see it, decide to click it, it loads some new content, after which you will have to scroll to find the new location of the same button to keep unpacking more content from the same section. In the end you have to do tons to clicking and scrolling in a very deliberate way just to load up a few rows of new content.

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

• 1.1. No page titles, at least on viewer side. I have long questioned the utility of those on the studio side as well, but no need to make things more complicated at this stage.
• 1.2. No more section titles: just show the user what the user content, they know why they are on the page.
• 1.3. Fix carousels.
• 1.4. Compress any standard margins floating around.

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.

[dmtrjsg]

@KubaMikolajczyk @toiletgranny guys can you chime in here with your comments before our meeting on Wednesday?

Thank you 🙏

[toiletgranny]

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

[toiletgranny]

@bedeho

1. Agree with some of your findings, they've been bothering us for a while, too, and that's why we wanted to tackle #2031 almost exactly a year ago now.
   • In fact, you've also already raised similar concerns before, in August of 2021. https://github.com/Joystream/atlas/issues/1226 @dmtrjsg I think that issue can be now closed?
2. Now, since #2031 is something I'm taking care of as part of finalizing #3596, some of the things you mentioned would have been addressed anyway. I'm listing them all out in a table below. The rest, including updating each page separately, is best tackled in separate issues. cc @dmtrjsg
3. It is important to note that #2031 is only a first step towards the future you envisioned in your proposal above. The outcome of this task will be a set of new components and guidelines, which, in order to be actually brought to life, require updating each Atlas page separately (except for the new Marketplace, which will be already one using the new foundation). That's why I think it is super important for us to create issues for each page separately, as stated in my previous point.

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.

[bedeho]

Thank you for this breakdown.

[KubaMikolajczyk]

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.

1. Update existing pages

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.

• [ ] Discover page
• [ ] Video category page
• [ ] New & Noteworthy page
• [ ] Search results page 👆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

2. Create or finalize not finalized pages

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.

• [ ] Home page
• [ ] Popular page
• [ ] Channels page

3. Component level work

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.

• [ ] Channel preview

[bedeho]

Great breakdown @KubaMikolajczyk , is there a rough ETA on this? assuming no interruptions?

[KubaMikolajczyk]

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

New pages

Following links lead to changelogs of newly created pages: Homepage Popular

Updated pages

Some of existing pages needed updates, the following links lead to changelogs with the updates descriptions: Marketplace Discover Video category Search

Archived pages

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

Components

The following link lead to changelogs of changed components: Side navigation

[KubaMikolajczyk]

@bedeho the walkthrough is here✅ 🎥 Loom walkthrough: https://www.loom.com/share/8089f9e458d3436196b2d7b4265205ab :)

[bedeho]

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.

[dmtrjsg]

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

[KubaMikolajczyk]

✅ 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

[dmtrjsg]

Search results improvement page will be addressed here:

• https://github.com/Joystream/atlas/issues/4060