Tzahi12345 / YoutubeDL-Material

Self-hosted YouTube downloader built on Material Design
MIT License
2.58k stars 265 forks source link

Visual Changes #39

Closed GlassedSilver closed 4 years ago

GlassedSilver commented 4 years ago

Hey, a few things I noticed and want to address now that some major milestones have been addressed or seem just a line change away from working on my end. See issue #37. :D

For the dark mode I think we can still use the same hue of blue for the top bar. The dark blue seems a bit too toned down and I much prefer the vividness of the lighter blue. It's more friendly.

To maintain the general idea of a dark mode better, imho, the background should be either a real black or very strong anthracite with the two areas for the downloads and the download control view each staying what they are.

I created a little mock up by web inspecting and changing values on the fly. For the background I used the values 20,20,20.

mockup

The about dialog's close button should probably just be an X in the top right. In any case, buttons like the close button be it an X button Windows-window-style like I imagine or the way you implemented it should have much more contrast against the background. The idea is that you don't need to read and process the language and context in order to realize it might be an area to interact with. I think with a close button especially so. This is a pet peeve of mine since often times flat UIs are understood as having less contrast and being best when everything blends into each other. I'm a huge fan of Material Design but only in its first iteration. Version 2 is already giving up in a lot of areas, but still not as bad as iOS ever since its flat redesign. Oh iOS, how much I loathe you...

Thirdly: Settings We have a Save button, a cancel button... But no close button. Cancelling after saving is very unintuitive and confusing UX. Personally I know what to expect from a cancel button on the backend and that the save happens when I click save and not get the window out of my sight, however... It isn't pretty and neat that way. :D I think you know what I mean. :)

Fourthly: Stay safe! I wish everyone who is reading this the best of luck in not catching corona and staying healthy in general. Also extending on that I wish all of us that a vaccine is found as fast as possible and that it can be used really quick. Staying at home is the best thing to do right now, but I really wish that we have to do this for as little time as necessary. I'm usually at home a lot anyhow when I'm not traveling, at work, grocery shopping or at uni. But to know that my movement is limited to work and groceries right now and that I CANNOT see friends etc... It's a real downer. Technology be blessed though, hard to imagine how I'd get through this without the amazing things technology lets us achieve from the comfort of our homes. :D

Tzahi12345 commented 4 years ago

For the dark mode I think we can still use the same hue of blue for the top bar. The dark blue seems a bit too toned down and I much prefer the vividness of the lighter blue. It's more friendly.

I asked around and the consensus agrees with you. I did think the background was too dark, but they also seemed to prefer the default toolbar color better for the dark mode.

The about dialog's close button should probably just be an X in the top right. In any case, buttons like the close button be it an X button Windows-window-style like I imagine or the way you implemented it should have much more contrast against the background.

True, the close button doesn't really stand out. It should be more obvious what the user should do, and the information presented in general should be easier on the eyes, rather than a blob of text with some emphasis.

We have a Save button, a cancel button... But no close button. Cancelling after saving is very unintuitive and confusing UX

Hm, what if it said "Close" when no settings were changed, and "Cancel" when something has been updated but not saved? I think this would make more sense.

Technology be blessed though, hard to imagine how I'd get through this without the amazing things technology lets us achieve from the comfort of our homes. :D

Couldn't agree more, thank god for the internet and modern computers, otherwise this would be unbearable. So glad all this exists <3. Besides, there are a few silver linings, like I get to work on this project more.

Tzahi12345 commented 4 years ago

Was able to implement new buttons for the settings dialog, let me know if this does the job in terms of eliminating confusion:

https://gfycat.com/cavernousenormousirishdraughthorse

Also, you can see the new dark mode there :) not 100% convinced on the lighter blue top toolbar so I'll ask around more to get a better consensus.

GlassedSilver commented 4 years ago

Looks good so far! Personally have never seen cancel/close combined buttons before and I think it may be against a lot of HIGs out there, but this is miles better already so I'll take it :D

If the blue is too light for you, feel free to shift it a little more into the darker realm, but be careful about it. That being said I think keeping the color palette simple for accent and "branding"-colors is always advisable. The darker blue just is way too unsaturated and dim. If anything it could look better on the bright theme, but even then...

This might also be a vastly different experience from monitor to monitor. Personally I'm using a Surface Pro 6, a Sony Bravia TV (XE90) as well as a Note 9 and on those the dark blue looks like uncoordinated color choice. :P

Asking around definitely is a good idea! Maybe the application name could use a shadow backdrop as well, a subtle one, to make it stand out more and a bit more "logo-ey". Right now it looks more like a description than a branding. Maybe incorporate the application's logo into the bar as well? Only seeing the icon on my unRAID dashboard and generally as favicon is a bit weird I think? Definitely do make it appear in the About window as well though!

Tzahi12345 commented 4 years ago

Personally have never seen cancel/close combined buttons before and I think it may be against a lot of HIGs out there, but this is miles better already so I'll take it :D

You can see Google's take on dialog actions for Material Design here. I'm neutral on the matter, but what's pushing me to continue using the official system is that the Angular Material Design library makes it too easy as the dialogs provide built-in functionality to add actions.

The truth is, I'm not even using dialog's for the right reasons all the time, at least according to Google. They're supposed to "provide critical information or ask for a decision" and "should be used sparingly" (source). Thankfully, I'm not the only one taking liberties when implementing Material Design, I just noticed FreeNAS actually does the same thing 🤷‍♂️

Maybe incorporate the application's logo into the bar as well? Only seeing the icon on my unRAID dashboard and generally as favicon is a bit weird I think? Definitely do make it appear in the About window as well though!

I like this idea. I'm not sure where to put the logo on the home page, but I was able to find a spot for it on the about page.

Regarding the top toolbar, you do have a good point that I'm lacking on branding. I changed the default title to YoutubeDL-Material, made the toolbar itself sticky (so when you scroll down it stays at the top), added a drop shadow to the toolbar to give it more prominence, and lastly I added a super subtle drop shadow on the top title.

Here's a couple screenshots so you know what I mean:

It's minor, but I hope it makes the home & about pages feel less bland.

Also included in the second image is update checking functionality (so users can see if an update is available).

Tzahi12345 commented 4 years ago

Visual changes have been implemented in the new update (3.5.1) along with a lot of bug fixes. Check it out, and don't hesitate to open up any other issues regarding the UI or anything else.

Thanks for the help in truly making the dark mode "dark"!