Adapt volume icon and bar to our design

[felipegaucho]

@pedrocasa do we have specifications for the bar, or what happens once the icon is clicked?

If yes, please update the XD specs on the definite UI kit thread https://github.com/Paratii-Video/paratii-mediaplayer/issues/32

We need @bent0b0x to adapt the current one to it.

https://we.tl/2xYiNEwyUP 👈 new icons

[bent0b0x]

@pedrocasa can you share details as to what the exact UX/UI for the volume bar should be? Thanks!

[bent0b0x]

@pedrocasa as you can see in the gif below, the "horn" in the mute icon and volume icon are slightly different sizes. This causes a jump when the icons switch. Could you provide a new set where that part of the icons are exactly the same dimensions?

Thanks!

[pedrocasa]

I have fixed a lot of minor issues about this volume bar problems (especially this 2)

• The mute state (new icon https://we.tl/iy5ScVwem7)
• The problem of having a lot of buttons close to the volume bar causing unnecessary movement of buttons

https://xd.adobe.com/spec/4b1b6f6b-81c7-461c-9491-e738a3c5294b I also created two other options for the volume bar on the same link ( we don't need to implement it now, the option 1(actual idea) can handle but I think it worth the discussion)

Option 1 good & Bad notes about it

• Good - Is the one that the user has more control over.
• Good - We are already building it.
• Good - Easy to use ( everybody knows it)
• Good - It's the most intuitive option
• Bad - It takes a lot of space
• Bad - It's limited by the screen size ( we need to adapt it for small screens)

Option 2 good & Bad notes about it

• Good - It's the option that uses less space.
• Good - It's quite used in other players ( ie. Vimeo).
• Good - Doesn't need a mute icon on it
• Bad - Not so easy to use (ie. try to mute your videos on Vimeo)
• Bad - It's limited by the screen size ( we need to adapt it for small screens)
• Bad -The user doesn't have a lot of control over it ( only 6 options of volume)

Option 2 good & Bad notes about it

• Good - Don't use the video bar space to works
• Good - It's the same card as other functionalities that we'll have
• Good - It's the option that'll fit well in most of the screens
• Bad - Not so common (unexpected&stange to the user)
• Bad - Takes a lot of screen space

[felipegaucho]

Pedro, I think we're fine with option 1 (small screens are an issue but most people use cellphone controls there, anyway). Enrico, Elia and Jelle have had a brief look here.

Youtube puts the duration of the video to the right of it, maybe 'cause it's better to leave controls together and static info. separated (instead of "play", duration, "volume"). This made me think if we couldn't throw the volume icon to the right of the lower bar, and make it "open" to the left. And then I looked to the top of this issue and noticed it was already there, at some point (see the image).

[bent0b0x]

@felipegaucho the problem with putting it to the right is that when we hover over the button, the button then would move left to make room for the volume bar. This is a bad UX as it makes it difficult to click on the button. I think it is better to put it to the left if we are going w/ option 1

[bent0b0x]

@pedrocasa I will work w/ option 1 for now.

Regarding option 2, to me that graphic looks like wifi/cell signal strength, so I'm not sure if we want to go w/ that. I do, however, like option 3 if we use the same bar we are building now.

[pedrocasa]

@felipegaucho the only decision why I've designed the volume button on the right side of the time was because it was the way of not moving any button.

Showing the "volume control slider" on the left side of the icon will against all the experience that the user is already expecting. Also the icon would need to be in different direction and it would be a mess to know which direction is less or more volume.

[felipegaucho]

Got it! Very fine and happy w/ https://github.com/Paratii-Video/paratii-portal/pull/371#issuecomment-374457122, think we're good to go on this one. @pedrocasa , it'd be nice to save all these options and work on a safe place ;)

[pedrocasa]

Also I think that the reason why yt keeps it on the left side of the video bar it would be kind of strange seeing a slide bar pushing a button. (Buttons and their slider bars got their own hierarchy to be respectd).

it's like menus that we open in text editing software (for example) the header buttons are fixed on top and the menus open and move according to them and not against them. I do not know if this was clear, it would be as if the volume icon were a function and the slider a subfunction of it