search

syfds / soundy

Simple GTK client to control your Bose SoundTouch speaker
https://syfds.github.io/soundy/
GNU General Public License v3.0
16 stars 4 forks source link

Confusing UI for the speaker panel #30

Open Suzie97 opened 3 years ago

Suzie97 commented 3 years ago

https://user-images.githubusercontent.com/68198116/118664888-77de2700-b80f-11eb-95c2-d26f0881e55f.mp4

As we can see in the video, initially, the icon for displaying the speaker panel is not correct. Also, it is the same icon as the window maximize button. Using a different icon (like a triangle), would make more sense.

Also, it is using a Gtk.Paned, which lets the user adjust the pane for no reason.

I think that the Gtk.Paned should not be adjustable. Users should click on the button to display the speaker panel. Making it adjustable might confuse the user.

Check the video for a more clear visualisation.

Suzie97 commented 3 years ago

@syfds, this is one of those issues where having some kind of a speaker simulation (or any other form of testing) would be really helpful.

If I could see the actual content of the speaker panel when a speaker is connected, I could analyze the problem better.

syfds commented 3 years ago

hi @Suzie97 , you are right, the icon is not optimal :-/ which icon do you mean, can you make a suggestion from LookBook (available in AppCenter)?

Also, it is using a Gtk.Paned, which lets the user adjust the pane for no reason.

I think that the Gtk.Paned should not be adjustable. Users should click on the button to display the speaker panel. Making it adjustable might confuse the user.

I agree with you, a fixed pane is a better solution here, I didn't find any simple possibility to do so. Feel free to make a PR with a suggestion!

Suzie97 commented 3 years ago

We can use the go-up and go-down 16 px icons. I fixed the bug of the icons. I'm trying to figure out a way to make the pane non adjustable. I'll notify you if I find something. I don't think Gtk.Paned can be made non-adjustable in a simple way.

Suzie97 commented 3 years ago

https://user-images.githubusercontent.com/68198116/118935185-dec32380-b968-11eb-991f-c009b8ec2204.mp4

I ditched the Gtk.Pane and used a Gtk.Grid and a Gtk.Separator. Now its much better.

But I think the main issue is with the way the speaker panel is built.

Suzie97 commented 3 years ago

I tried doing it in elementary os 6. And it is actually not that confusing in elementaty OS 6. The app works as expected. I'll submit a pull request. @syfds, please review it for yourself, as I couldn't test the behaviour when the speaker is connected.

syfds commented 3 years ago

Thanks, you can push a PR and I will make a review. To be honest I don't think it is critical issue for now, I would set priority to developing the multi room feature.

syfds commented 3 years ago

I think in the future when the whole API is implemented the design of the whole app should be reworked.

Suzie97 commented 3 years ago

Yeah, I had some free time these days and I was bored so I started to work on soundy. Now I won't be able to contribute as much. I will share design discussions though. I'll try to contribute when I can.

syfds commented 3 years ago

hi @Suzie97 , thank your for your contribution and ideas!

Suzie97 commented 3 years ago

hi @Suzie97 , thank your for your contribution and ideas!

You are most welome @syfds :)

Suzie97 commented 3 years ago

@syfds, I think I've found the solution to this problem. We can extend the window when the button is presses. And for the icon of the button, we can use pan-up and pan-down.

elementary Calculator does something similar:

https://user-images.githubusercontent.com/68198116/126078592-802f9b96-fe66-44ae-af23-3c2d0133ee9a.mp4

syfds commented 3 years ago

hi @Suzie97 , good hint! Much better than current approach. Currently I'm fighting with getting auto discovery feature work inside the flatpak and it seem not really good (mDNS isn't working inside of flatpak).

syfds commented 3 years ago

I had no success on revealer but built something similar: https://github.com/syfds/soundy/blob/master/data/screenshot/screenshot-3.png

What do you think about it? The panel is displayed at the bottom (official app has the same behaviour)

Suzie97 commented 3 years ago

I had no success on revealer but built something similar: https://github.com/syfds/soundy/blob/master/data/screenshot/screenshot-3.png

What do you think about it? The panel is displayed at the bottom (official app has the same behaviour)

Cool, you might want to change the icon for the toggle button. If something suitable is not available in the elementary pack, I can make you one. Let me know :))