soundy icon indicating copy to clipboard operation
soundy copied to clipboard

Confusing UI for the speaker panel

Open Suzie97 opened this issue 4 years ago • 14 comments

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 avatar May 18 '21 14:05 Suzie97

@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.

Suzie97 avatar May 18 '21 14:05 Suzie97

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!

syfds avatar May 18 '21 19:05 syfds

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 avatar May 19 '21 07:05 Suzie97

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 avatar May 20 '21 07:05 Suzie97

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.

Suzie97 avatar May 20 '21 07:05 Suzie97

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 avatar May 21 '21 14:05 syfds

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

syfds avatar May 21 '21 14:05 syfds

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.

Suzie97 avatar May 21 '21 14:05 Suzie97

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

syfds avatar Jun 03 '21 09:06 syfds

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

You are most welome @syfds :)

Suzie97 avatar Jun 03 '21 10:06 Suzie97

@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

Suzie97 avatar Jul 18 '21 18:07 Suzie97

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 avatar Jul 18 '21 21:07 syfds

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)

syfds avatar Sep 03 '21 21:09 syfds

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 :))

Suzie97 avatar Sep 05 '21 13:09 Suzie97