[Discussion] UI Overhaul

[syeopite]

I think the current user interface could use some improvements. Here's some of the ideas I've been playing around with.

Stacked hyperlinks should be replaced with pure css menus instead. This would have the advantage of making them look more like tabs as well.

Trending

Anything related to sorting could be condensed into a dropdown menu.

Channels

---

For the filters box perhaps we should change it to be more like Youtube.

Example 1

Or maybe just the normal detail widget.

Example 2

---

Either way the looks of the frontend needs to be improved. Any particular thoughts or ideas about this?

[tenpura-shrimp]

I hate hiding shit in dropdowns. Why hide it when you have more than enough space to show it right there?

Anyways that's just my opinion you can do whatever the maintainers want.

[syeopite]

I agree with you that there's definitely enough space to omit the dropdown. However, the main reason for using one is not to conserve space but rather to categorize the elements and in turn inform the end user of its functionality.

While some people would be able to infer the functionality based on terms like "newest" or "oldest", others can not. In order to increase the general privacy of everyone Invidious has to be able to appeal to these clueless and tech illiterate users.

This means that we have to label almost everything. For a horizontal design like the prototype I have above, its rather difficult to do so.

Here's some low effort mark ups as an example.

1

2

3

All of these look rather ugly. I'm no way skilled in UI design but I feel like no matter what we do it'll look roughly the same.

Using a dropdown menu is just easier.

[markozajc]

I'd have to disagree here. Both of the two inline mockups look decent and explain their function well.

[diabolic-preacher]

this looks like a broad enough topic, to perhaps also add a request to add a separate button (perhaps a 'search' lens icon) next to the search field. It will help with devices where one needs to press select to activate the text field to enter search term but that button is also used to send a Return. so trying to press that again, to execute the search, just activates the text input again. Just a small request.

[syeopite]

Looks like the dropdown issue is settled then. I'll go ahead and include an inline label for them.

this looks like a broad enough topic, to perhaps also add a request to add a separate button (perhaps a 'search' lens icon) ...

Like this? Not sure how I can implement the second part of your request though.

[syeopite]

Any objections to moving the channel description information to a dedicated about page?

[diabolic-preacher]

Looks like the dropdown issue is settled then. I'll go ahead and include an inline label for them.

this looks like a broad enough topic, to perhaps also add a request to add a separate button (perhaps a 'search' lens icon) ...

Like this? Not sure how I can implement the second part of your request though.
exactly this. the lens thing will enable me to have something to 'click and trigger' the search. this was the entirety of the request. have a button or icon (search lens as you showed) to trigger the search.

[diabolic-preacher]

Any objections to moving the channel description information to a dedicated about page?

is this because currently it pushes down the videos much further? any other reason to move it?

[kmk3]

Any objections to moving the channel description information to a dedicated
about page?

Yes: IME the description is usually short/one line long, so that would just
hide away information.

If the problem is with lengthy descriptions (e.g.: longer than 5 or 10 lines),
maybe those could be automatically served hidden behind <details>, like the
filters on /search. Though I can't remember any channel that I watch that has
such an issue; do you have any example in mind?

But regardless of the default channel page, I would still like to see the an
about page, as on YouTube it contains extra information:

• Channel creation date
• Total views
• External links

[dentistformyeye]

Any objections to moving the channel description information to a dedicated about page?

I like having the entire description on the channel page as things are now, including when the descriptions are long (example). When I'm evaluating whether I'm interested in an unfamiliar channel, I find it convenient to have all of that information on the same page as the video listing. I'd prefer that the description just be there without my having to click an extra button or hover over something.

[syeopite]

is this because currently it pushes down the videos much further? any other reason to move it?

Pretty much. I personally find it annoying having to scroll down so much in order to find the contents on Mobile though it seems like the consensus here is that nobody wants to move it.

Anyways here's what I have for the about page.

[diabolic-preacher]

is this because currently it pushes down the videos much further? any other reason to move it?

Pretty much. I personally find it annoying having to scroll down so much in order to find the contents on Mobile though it seems like the consensus here is that nobody wants to move it.

maybe collapsing it like the filters in search page, could be an option. maybe about can show say one line of text and then have a Read more or Show more. or have a jump link to jump to the videos section.

[dentistformyeye]

My bad, I didn't consider mobile.

maybe collapsing it like the filters in search page, could be an option. maybe about can show say one line of text and then have a Read more or Show more. or have a jump link to jump to the videos section.

Either of these sounds fine. If @syeopite goes for the former, I assume the entire channel description will already be preloaded (as opposed to being loaded on-demand the way comment replies on video pages are).
The About page looks good. Would it be okay to have the channel description appear on both the Videos page and the About Page?

[diabolic-preacher]

Like this? Not sure how I can implement the second part of your request though.
will you be tracking this in any other issue or along with this issue/discussion. i am keen on following when this search icon gets implemented. thanks in advance :)

[kmk3]

@syeopite commented 7 hours ago:

is this because currently it pushes down the videos much further? any other
reason to move it?

Pretty much. I personally find it annoying having to scroll down so much in
order to find the contents on Mobile though it seems like the consensus here
is that nobody wants to move it.

@dentistformyeye commented 2 hour ago:

My bad, I didn't consider mobile.

maybe collapsing it like the filters in search page, could be an option.
maybe about can show say one line of text and then have a Read more or Show
more. or have a jump link to jump to the videos section.

Either of these sounds fine. If @syeopite goes for the former, I assume the
entire channel description will already be preloaded (as opposed to being
loaded on-demand the way comment replies on video pages are).

I had not considered mobile either (I usually use NewPipe for that) and I agree
that having to scroll down on mobile is annoying. My main concern is also the
preloading; I find it annoying having to make an extra network request for a
small amount of information.

The simplest way might be to put the description inside <details open=""> and
make it "closed" by default on mobile.

There appears to be no way to do that with css[1], so the page would have to be
served without the "open" attribute on mobile.

If that's not feasible, the next best thing would probably be to either hide it
entirely with css (with @media or something) on mobile (so the user would
have to use the about page instead) or add some js on mobile to auto-close it
and to open it onclick (not a big fan of this).

Anyways here's what I have for the about page.

Nice. By the way, how did you get the icons in the upper right corner to show
up? I think I've never seen them on Invidious instances. Is this feature also
part of the about page development?

[1] w3c/csswg-drafts#2084

[syeopite]

Apologies for the late reply everyone! I got slightly sidetracked with implementing another tab (see below).

The About page looks good. Would it be okay to have the channel description appear on both the Videos page and the About Page?

Certainly, though imho it looks a bit odd having it appear in two places at once; especially with them being so close to each other.

I'll recommend we remove the upper description when a user is on the about page. Something along the lines of this:

If that's not feasible, the next best thing would probably be to either hide it
entirely with css (with @media or something) on mobile

Yeah that's probably the only option we can actually do here. I'll go ahead and put that on the todo list.

In other news I've implemented full support for featured channels. The details box is mainly there to allow for easier scrolling on channels that feature massive amounts of other channels. Any thoughts about the design?

[syeopite]

will you be tracking this in any other issue or along with this issue/discussion. i am keen on following when this search icon gets implemented. thanks in advance :)

Most likely just this discussion. The PR is also unlikely to be finished anytime soon since I have way too many plans for it. Plus, this PR uses #1920 and #1985 so those would have to be merged before this one as well. If you'd like I could just go ahead and make a quick PR for just that.

Nice. By the way, how did you get the icons in the upper right corner to show
up? I think I've never seen them on Invidious instances. Is this feature also
part of the about page development?

Yep!

[diabolic-preacher]

Most likely just this discussion. The PR is also unlikely to be finished anytime soon since I have way too many plans for it. Plus, this PR uses #1920 and #1985 so those would have to be merged before this one as well. If you'd like I could just go ahead and make a quick PR for just that.

I am fine with waiting for it to get done in this PR. Lots of new stuff and concepts to learn here for me. I just know I will be using the search much more from my firetv once this is available. 😁

[ghost]

Buttons on mobile are too close to each other, I logged out instead of entering settings many times

[github-actions]

This issue has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, you just have to post a comment and it will be unmarked.