UI improvements

[Falconbird18]

I feel like the current Freetube UI could use more work to polish it. Here is what I have been working on. Please give feedback and comments!

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @Falconbird18 could you lay out the changes you made? The only ones that I see is making everything more rounded.

[Huecuva]

I don't know about graphical UI changges, but I think FreeTube could use a lot of QoL improvements. Why can't I just click on the three dot menu and add a video to Watch Later like I can in YouTube itself? I have to open a popup, potentially on top of what I'm watching, click on Watch Later and then save it. That's an extra click and annoying popup. Also, why can't I have my mouse cursor over the video itself with a massive white circle in the middle of the screen?

[absidue]

@Huecuva In the future please stay on topic instead of leaving a completely unrelated comment on a thread.

If you haven't already you can set a quick bookmark playlist on the playlists page, then it is just one click to add it to your quick bookmark playlist from the video thumbnail and watch page.

As for the play button, as mentioned in many other issues and threads, you can turn off the Display Play Button in Video Player setting in the Player settings if you don't want to see it.

[Huecuva]

Sorry about going off topic. I thought this might be a relevant thread about improvements to the app.

Thanks for the tips. Maybe I should have looked around more, but I figured those features would be so obvious they should be default. I guess I was mistaken.

If I could make another suggestions, might I suggest the addition of a feature similar to how YouTube will continue to play the video in a smaller box when you leave the page or scroll down? It's a pretty minor thing, but it is convenient to have a video playing while I'm looking through a channel or searching for other videos that I can then add to the playlist without interrupting it. The other two issues cleared up, that's probably my last remaining gripe with the app. Otherwise it's great. I only recently started using it.

[Falconbird18]

1. I made all corners have a 15px border radius.
2. I removed almost all box shadows.
3. I made the background color the same.
4. I added more variables to themes.css
5. I worked on the side bar, the scroll bar only shows when you hover over the side bar (This is still not perfect yet).
   These are all the main changes I have done, I could find more if you are interested.
   Old version:
   
   New version:
   

[absidue]

Maybe some of the suggestions could be considered but as with the massive design overhauls proposed in the past by other people, they seem to sacrifice usability and accessibility for the sake of making it look more trendy.

E.g. removing all visual differences between the top bar, side bar and content makes the app much harder to use, if you want them to all be the same color, you need to add borders or shadows between them so that they are still clearly visually separated.

I also don't like the sound of even more theming variables, it's already hard enough to add a new theme as it is (the theme pull requests tend to go through lots of review cycles and then are usually abandoned by their creators), so please try to avoid making the theming even more complicated.

[Falconbird18]

Thank you for your great feedback!
I absolutely agree that the user experience should be the first priority. You are completely right that the sidebar and the top bar should have some separation. I feel a bit stupid to not have realized that.

[efb4f5ff-1298-471a-8973-3d47447115dc]

I appreciate the list and thankyou for understanding our points about the UX. Could you maybe explain in more detail why you made the changes that you did.

[failafail8]

i do really like the rounded thumbnails.
Not so much to lack of contrast for the side and top bar.
looks pretty, well done.

[Falconbird18]

Sorry for the late reply,
One of the reasons I think that the FreeTube UI needs some redesign is because of all the shadows.
Before

For example, the refresh button for the subscriptions has shadows all along the bar. I think the shadows can be distracting, and can separate
the whole bar from the background.
After

Another change I made was to remove the cards (I just changed the background color), to unify the background color.
Before

Notice how the card around a video changes color when you hover on it. I thought this was necessary to really show
the video was selected and would play when clicked on. Before, only the cursor changed.
After.

I also changed the header and sidebar. The design was ok before, but in my personal opinion, my version looks better.
Before

After

Please note that these are my personal opinions, and any feedback or suggestions are welcome.
Thanks everyone

[absidue]

For example, the refresh button for the subscriptions has shadows all along the bar. I think the shadows can be distracting, and can separate the whole bar from the background.

That's intentional it's not meant to blend into the background, but from looking at the rest of the screenshots blending everything together into one big thing even though they are completely separate UI elements with different purposes, seems to be your goal.

[Falconbird18]

I personally disagree with you, but I will be happy to improve the UI in a way you like. If that means discarding my changes and reverting back to the old UI and going from there, that's ok with me.

[absidue]

Things that slightly concern me about this:

• It looks like you are going for cloning YouTube's UI, which isn't inherently a bad thing, but it does mean that things that don't have an equivalent in YouTube's UI, like the last refresh timestamp, are just weirdly placed above the title, instead of being properly integrated into the UI.
• In your screenshots you seem to have got ridden of any indication that a video has been watched, I'll give you the benefit of doubt here and assume you just forgot to take a screenshot that included them, as I hope you didn't think that removing features in the name of design was a good idea.

[Falconbird18]

Here is a screenshot with a watched video.

I wasn't trying to clone the YouTube UI, and I think FreeTube should be different, but easy to get used to.
Do you have particular preferences for UI? What exactly is your idea or vision for the UI? Knowing this will help me improve the UI and UX in
a way you are happy with.
Thanks

[kommunarr]

Hi @Falconbird18, taking a look at this now.

• With regards to the rounding, this is something I've looked into before, but it's got some awkwardness to implement that would take some time & effort to address. To list a couple of examples I can see in your image: the junction point of the side nav and the top nav, as well as the video progress bar protruding with rounded bottom edges.
• As absidue mentioned, the video refresh section does blend into the background without any shadow or divider there. This one seems like a non starter.
• As abisdue also mentioned, moving the video refresh timestamp like this does not seem to be providing any benefits, and it's in fact a bit more jarring since it's still misaligned with the heading.
• The remaining unique aspect of making the background color the same is a change I like, although we're pretty much accomplishing this in an only slightly different way in Make layout full-width #5294.

With all that said, though, we appreciate your enthusiasm and hope you can pursue more ways to support and improve the project.

[Falconbird18]

Yeah, I do agree with you that at least the rounding I have done is too much.
And I am aware that the video refresh timestamp is misaligned. It's an issue that I haven't fixed yet, but is on my radar.
Also, thank you so much for the encouraging response!

[lamborghinipth]

performance is the most important -> shouldn't rounding corners, using borders, using shadows or using too much CSS style.

[GCAT01]

I would like to chime in as someone with a visual disability. You are going for the clean, unbroken look here and I get it. Smoothing out UIs is all the rage right now and it DOES genuinely look nice. However, those little drop shadows and bits of separation are what help me distinguish parts of the screen. Having that slight color difference between the headers, main area, and scrollbar immediately tell me that those are all separate elements that are potentially intractable or, at least, serve different purposes. Flat UIs make it very difficult for me to tell where the header ends and the viewing area begins or if the header even exists. You may not think that's a big deal, but looking at a window and not being able to visually understand the layout is extremely frustrating.

The constantly visual scrollbars also help with this. I can immediately tell that this part of the screen is a separate element and scrollable. It also helps me line up the mouse with where I need to be to click/drag.

I get what you're going for but, for me, UIs like this can be really frustrating and diminish my user experience.

[Falconbird18]

@GCAT01 I’ve been thinking about the UI design (especially after taking a graphic design course), and I think the main issue I have with it is the lack of consistency. For instance, the top bar and the refresh button have shadows, but very few other elements do.

To improve the UI, I think we should settle on a clear design style and apply it uniformly across the interface. Right now, I’m experimenting in Inkscape to explore some ideas.

[pkrasicki]

The shadows have different styles too. The more button on a video (three horizontal dots) brings up a dropdown menu that has a different shadow from the profile selection menu (when you click on your profile in top right corner).

Also tabs have different length depending on a page.

[pkrasicki]

Here is my design:

You don't need shadows or backgrounds or borders to be able to tell things apart. For example, you can clearly tell that each video on the list is a separate thing despite there not being any clear boundary between them. You are able to distinguish them simply because of spacing. Same with other stuff - group things that are related and space them from things that aren't. No backgrounds needed. And you don't need to know where exactly the top bar ends. Why would you need that? You just need to be able to distinguish buttons and the search bar - the things you are going to interact with.

We don't do this just because it looks nice. It's also more efficient (easier to read) once you get used to it. That's why most modern apps looks like this. Try it for 10 days (I can post a git patch for Freetube 0.21.3), satisfaction guaranteed 😀.

[pkrasicki]

@efb4f5ff-1298-471a-8973-3d47447115dc That's what I was partially responding to. Do you believe that all popular video sites have terrible accessibility? Because you will have a hard time finding one that's popular and looks like FreeTube. And if you do believe that or think that modern user interfaces are bad, the conclusion would have to be that most UI designers are incompetent. And that would be silly. Also, my version of dark theme has better contrast than current dark theme (@Falconbird18's version does too), which is a good thing for accessibility.

I suspect the real issue here is that those changes are too big - it would be annoying for users if we change so much at once. Perhaps we should make those changes gradually over a few releases to make it easier for users to adjust to them.

[kommunarr]

I'll bring in @GCAT01 to the discussion if they want to try out the design patch you have and assess their experience. I do want to call out that the popularity of a design trend does imply that it's being done for a considerable reason, but it doesn't necessarily mean that it's 10/10 on every category like digital accessibility. If the goal is to keep emulating what the modern YT app looks like, we will have to keep implementing broad redesigns whenever they implement new broad redesigns of their UI. In reality, our goals should be to deliver the best user experience we can to people, and that involves listening to our dis/abled users and being very intentional & evidence-backed with the changes we do decide to implement.

[pkrasicki]

The goal should be to emulate what modern video applications look like (you don't have to limit yourselves to yt and I assume you don't want to copy them exactly, since you probably don't want your project to look like a clone, instead you want it to be unique) and that will deliver the best user experience to people. There are accessibility standards and if you want to start paying more attention to that, that's great, you can do that (whichever level of compliance you want). I'm not an accessibility expert, so if you notice that my design doesn't conform to some of the criteria you are interested in, you can say it and we will try to fix it.

that involves listening to our dis/abled users and being very intentional & evidence-backed with the changes we do decide to implement.

Ideally you would reach out to UI experts from other projects (since you are so skeptical of anything new), listen to what they have to say, maybe get someone to make you a design (if they have better proposals) and follow that as closely as you can and keep doing that when adding new features. Then listen to the feedback from the users (keeping in mind that most users are not experts and that they might be biased).

[pkrasicki]

Here is my Restyled branch: https://github.com/pkrasicki/FreeTube/tree/v0.21.3-restyled. This is currently the latest version, it's based on FreeTube 0.21.3.

[pkrasicki]

@efb4f5ff-1298-471a-8973-3d47447115dc @kommunarr I have a solution for you. Add a settings section like this (without changing our current design for settings):

[absidue]

@mjones129 That is already covered by #1214, please check for existing issues before leaving comments on unrelated threads.

[AliTempXD]

Sorry I am not a dev but why can't there be a setting to make the UI more rounded and an additional warning with it that it does impact the performance? All of the guys above me who are suggesting UI improvemnts have one thing in common, rounded corners. Personally just making the UI rounded makes it look way too cool and modern modern. Please add it as a setting option that would be really cool :)))
here's my example which i made using my friend's help we basically edited the css file to round the corners:

[kommunarr]

Hi @AliTempXD, see my earlier comment here on rounding:

With regards to the rounding, this is something I've looked into before, but it's got some awkwardness to implement that would take some time & effort to address. To list a couple of examples I can see in your image: the junction point of the side nav and the top nav, as well as the video progress bar protruding with rounded bottom edges.

[failafail8]

its good to know that i have zero coding and zero designing and low english skills, but im a heavy freetube user so ill share my thoughts:

i've read every conversations about the play/pause button size and opacity for desktop and i think it should be disabled by default.
I don't know if it is more a QOL or UI suggestion tho.

What strikes me first about the ui is this shadow around the update line.
In my opinion the profile selection button should be aligned on the left menu using the same kind of icons and the update button should take its place on the top right and the line "Videos feed last updated:" should be replace just by the time

I also think the category should be centered and written in upper case to fit the rest.

No joke it took me almost 30 minutes to edit my screenshot on gimp to make my opinion a little bit more clear

Since i never post on github, if anyone from the dev community read me : Thank you for the work !
(edited again the second picture)

[pkrasicki]

I have a different proposal for the update time section:

But your design points out something important: the refresh button should be available in the navbar and usable on every page.

[failafail8]

After the update i rechecked my settings, and i had an idea that i guess is doable without too much difficulties or bad effects (i may be wrong).
When u select the primary and secondary color the hovering could be made of the concerned color. Just to give some ease of use.