Quick Settings Menu Design

[danirabbit]

Problem

If we want to start thinking about responsive/mobile, the current panel design has a couple of issues:

Each group of settings necessitates an icon to reach it, which means the more groups of settings we want, the more icons we need. This is already awkward on desktop for example, where we have a placeholder power icon so you can see the battery status of peripherals. On mobile we have limited horizontal space, so if we want to indicate things like portal usage etc, we need to avoid icons that aren't indicating important information.

Since each menu is triggered by a separate icon, you need much more precise pointing to activate the correct menu. On desktop we compensate for that with scrubbing, and we could do something similar on mobile (I think Ubuntu Touch does this), but it is a much less granular gesture to swipe or tap a large activatable area to reach a single menu.

There is already a desire for some controls and indicators to be transient, for example night light and privacy/portal indicators. At the moment, night light is not accessible from the panel while not activated. It's also unclear how to categorize settings such as dark mode. Some privacy/portal indicators make sense to be grouped with other settings like microphone, but it's unclear how to group others like webcam or screen recording or location. There is also might be utility in quick controls that don't necessarily indicate anything like screen casting or controlling IoT devices

Proposal

It might make more sense to move to a quick settings menu style design with a singular menu for accessing these types of controls. This would eliminate the need for each group of controls to require an associated icon and give us a single click/tap/drag target to open the menu. It's worth considering that this could also help users on desktop with different kinds of pointing devices or motor control ability.

We could be a lot stingier with only showing icons that indicate a change in state from what is expected or that need attention. For example, iOS doesn't show a volume indicator at all times. We might not need to show an indicator for things that are in their expected state, like bluetooth enable/disable.

We could show indicators for things that don't necessarily have quick controls associated or are hard to group like privacy/portals

We could include quick controls for things that don't need an indicator like nightlight and dark mode, peripheral battery status, and other potential controls like IoT devices, screen casting, etc.

Prior Art

Windows

macOS

GNOME

Chrome OS

[nothingneko]

Have you seen GNOME's new design Danielle?
https://gitlab.gnome.org/Teams/Design/os-mockups/-/commit/f07e260f25afb96dcfa7fcf4401a47c73bdc8f72

[ghost]

It really is a very beautiful design, and seeing the settings like on/off wifi bluetooth all grouped together in a single click in the top corner of the elementary os bar will give a very attractive and more organized design, just like with Windows and Mac OS , I support the idea.

[Lucy1958]

Why reinvent the wheel? Use Gnome's new configuration settings.

[danirabbit]

Why reinvent the wheel? Use Gnome's new configuration settings.

elementary OS doesn’t use GNOME so that’s not possible. Pantheon is it’s own DE like XFCE or KDE

[homerograco]

These settings in elementaryOS style (less rounded corners, horizontal dividers, sharp icons and font) would be great.

[julianfaustino]

I think they added a new mockup of how they will look with the app inidcators (a.k.a system tray icons) that would be awesome. they made a separate space from the rest of the settings and not directly to the top bar wich i personally think is less messy than having them all dispersed in the top bar.

[danirabbit]

Please try to keep things on topic. You can open new discussions about onboarding here: https://github.com/elementary/onboarding/discussions

[popvladaurel]

Cool cool, as long as it does not change the scrolling-over-indicators behavior: changing volume / brightness by scrolling over the volume / battery indicators, or middle-click volume indicator to mute.

[nothingneko]

The scrolling is honestly amazing UX

[danirabbit]

Hm yeah that's an interesting counter-point for hiding some indicators. Perhaps we could either always persist icons who have scroll controls or make it configurable

[nothingneko]

I think making it configurable is the best choice

[homerograco]

That and a way of dragging them into or out of the "indicators group" would be lovely

[flodavid]

Maybe the volume icon should be shown in the panel only when some audio is playing

[preetYOW]

MacOs provides an option to enable the icon triggers for most items despite their presence in control panel.
Eg. you could change wifi settings from control panel or (can enable wifi icon fro settings) which will allow you to change wifi settings directly from menu bar.

Pantheon could implement something similar. eg. One setting to allow menu bar icons to be grouped (clicking any menubar icon opening the panel)/ or present implimentation (clicking specific menubar icon will open ony that menu).

[danirabbit]

I'm hesitant about this because of the effort required to maintain two different implementations. I think we could leverage the plugin system of the panel to develop a quick menu and have it be installable as an option until it's mature, but I don't think the team would like to maintain both the quick menu and another set of indicators long term

[danirabbit]

No, it's not possible. GNOME Shell is completely dissimilar from Pantheon. It uses it's own internal toolkit whereas Pantheon uses Gtk

[Lucy1958]

Was talking concept not specific code programming and/or execution. 4:48 PM, April 12, 2022, "Danielle Foré" ***@***.***>: No, it's not possible. GNOME Shell is completely dissimilar from Pantheon. It uses it's own internal toolkit whereas Pantheon uses Gtk —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***> -- Sent from Yandex Mail for mobile

[nothingneko]

Is it planned to include power profiles in the quick settings? Iirc power profiles were planned for OS7

[danirabbit]

Power profiles shipped in OS 7. There’s some work on improving them happening right now that might resolve an issue we had with showing them in the panel

[JohnDumpling]

I have made a mockup for a possible redesign of the control center and notifications menu. (Please ignore the wrong spacing between some elements and the placeholder icons 🙂). I decided to group all of the separate submenus into one, which can be opened by clicking on any of the right-hand-side icons in the Wingpanel (those could be grouped similarly to how Gnome does it). The menu is split into two tabs: Controls - for access to quick settings and Notifications - for notifications. You can switch between these two views by clicking on the buttons in the menu's header bar.

Controls menu
Contains options for switching user accounts, power off / restart / suspend / log-out, then toggles for wi-fi, bluetooth, power profiles, volume and brightness sliders etc. Active toggles are indicated by a green dot, inactive by a grey one. More detailed options can be accessed by clicking on the arrow-down button on the right side of some toggles (sound output selection, night light adjustment etc.). There is even a Power "widget" that shows the battery status of connected devices (these "widgets" could be potentially used for cloud sync or other interesting functionalities). All the toggles can be rearranged, hidden or made visible by the user.

Notifications menu
Displays notifications in a similar way to the current implementation. I decided to separate this view from the Controls tab to make the menu look more compact on smaller screens.

Any feedback is appreciated!

[julianfaustino]

Well, this is what im talking about of something unique for elementary os!

[janxkoci]

FYI the same idea is used in the Raven panel of the Budgie desktop.

[Lucy1958]

Your implementation looks great! Could you add a control for printer setup as well as a notification (jobs completed, ink levels, etc.) for printers? Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Radical4ever ***@***.***> Sent: Friday, June 24, 2022 4:03:00 PM To: elementary/wingpanel ***@***.***> Cc: Lucy1958 ***@***.***>; Comment ***@***.***> Subject: Re: [elementary/wingpanel] Quick Settings Menu Design (Discussion #446) Well, this is what im talking about of something unique for elementary os! — Reply to this email directly, view it on GitHub<#446 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWPW2VPYU2JBOXMIX4P4EDDVQYH7JANCNFSM5TD6WDEQ>. You are receiving this because you commented.Message ID: ***@***.***>

[Romchec]

I think that the old implementation of panel is better than single menu cluttered with buttons. Even on 1280x720 there still a lot of free space, because there is not tray icons by default. Also how many users will use elementary on mobile-sized screen? Why hundreds of PC users should make compromises because of a minority of 5 people from all over the world. Recently, due to the widespread optimization of the PC interface for touch control, using a PC is becoming less convenient.

[DSLitvinov]

I'm probably not the only one who doesn't see the point in spending man-hours adapting the interface for mobile devices? Just ask yourself what percentage of the mobile device market does Gnome represent? And he has been developing the idea of a hybrid environment for more than 10 years. As a user of Win11, Linux (plasma 5, Elementary OS) and Mac, I can say that this curtain on a desktop has no advantages over separate controls. Instead of one action, you force the user to do two or three. If the curtain is not customizable, then it will be a failure.

[flodavid]

How do you expect eOS (or even Linux as a whole) to have mobile users if it is never adapted to this usage ? The work has to be done as some point if we want it to have a chance of developing some kind of user base there

[janxkoci]

GNOME and KDE work on mobile today. What's the market share? Nil..

[jlnr]

I came here from the latest blog post:

In recent years every mainstream operating system has adopted a Quick Settings menu design which lends itself much better to responsive contexts as well.

In my opinion, neither "everyone else is doing it" nor "it's necessary on mobile" should have any effect on the desktop UI. There is no mobile elementary OS right now; I wish it existed, but wouldn't wingpanel + dock have to be replaced with a distinct mobile UI anyway?

That makes the situation different from macOS, which often emulates iOS to the detriment of desktop usability (see new System Settings app 🙄). Windows is yet another story, with a system tray that is overflowing with third-party noise, which their new design avoids. But elementary has already dropped support for arbitrary indicators.

Both Windows and macOS also have a system tray that competes for space with other elements on the screen: app menus on macOS, task bar on Windows. That's not the case in elementary OS either.

[jlnr]

Re transient items:
Night Light could be combined with a dark/light mode toggle as a new "Display" icon, maybe with a slider for screen backlight (where possible) and a toggle for mirroring or extending the external screen (if any). I'd personally prefer that to icons that appear and disappear over the course of the day.

[teamcons]

Hard agree.
From a user interface standpoint, separate items is awesome : Me want sound, me click sound icon, me has only few sounds items.
A quick settings menu, people have to get that by clicking a whole spam of icons they suddenly get a whole spam of options for the one thing they want. Its nice, but it is more noisy

Mobile is a nonfactor. How much of the userbase needs this for a mobile ?
What other OS does is a nonfactor too. If its that important to do the others, better scrape the whole DE and just use GNOME - Pantheon deserves to have its own nice things too

Besides, resources are limited, why do things for the heck of it ?
Im not necessarily against quick settings at all costs but i dont really get why transition to that design ?

[stsdc]

Just something I found on the net. I'll just leave it here https://x.com/him_uiux/status/2007021579784614356

[kurisubrooks]

Continuing on from some previous mockups I've done in other areas of the OS, I thought I'd give this one some thought as well.

Taking into consideration a possible extension into the mobile space, as well as some more modern direction while also keeping the elementary OS "feel" of brightly coloured icons.

I also wanted to provide some options for @danirabbit as she mentions that she'd like to see certain panel controls become transient/context-aware. I've included various methods of separation in order to retain an always-visible panel for important indicators like the time/date, notifications, and quick settings. I've also included an area for core system controls, like Wi-Fi, sound, and power. Though if Dani wishes, this could be hidden by default on mobile.

I also separated out an area for less important/third-party indicators, like Discord or system stats into its own area. My thought was that this could be collapsible if there were too many items, raising themselves to be shown if they're in an "active" state, though I'm not sure APIs exist for this.

I also put some thought into the quick settings and pane views, which I wanted to feel more airy, and is inline with the newer design paradigms/direction of elementary. Adding some more colour where there currently is none by using the 32px icons, as well as making use of the user's accent colour throughout, I feel this feels more fun and interactive than the current greyscale/flat panel design. "So good you want to lick it."

[zeebok]

I really love these designs! Clean and colorful, with the accent color visible! I do wonder if it is worth maintaining a hypothetical submenu when clicking the button instead of opening the appropriate indicator menu or the system settings themselves?

[kurisubrooks]

I designed the sub-menu with the intention that these panes would reuse the applet/window across entry points, so we won't have to maintain separate implementations. Necessary to facilitate an OS where the top indicators may not always be visible/accessible (like mobile, or if Danielle goes ahead with the transient indicators system), I felt this was the best solution to reduce maintainer fatigue.

[kurisubrooks]

For reference, it looks like Apple does the same in Tahoe:

(Menu bar applet)

(Control Centre applet)

[stsdc]

I love the fact that buttons are not flat, they look like bubbles from bubble wrap 😅

[1280px]

I love the new menus' look overall (especially the fact the user and session icons are now being shown on top), but have a hard time with panel's one, as it both widens it for no good reason and makes it more intrusive... What if current and your approaches could be combined? I made a quick concept to show what exactly I mean. Ignore the menu changes for now -- below, the quick settings indicator is active, and notifications indicator is being hovered:

As of the menu itself:

1. I'd argue that sound stuff should better remain inside the sound indicator menu, as it would allow to free up space for more useful tiles -- which can also be helpful for beginners to discover less known features (such as switching between light and dark modes without need to open Settings -- just a small icon isn't that informative) faster.
2. I'd also argue that giving VPN an independent indicator doesn't make much sense, as, realistically, no VPN connection can be established without a network connection -- instead, what in my opinion would be a better approach is to use two icons for one actual indicator, like audio indicator does with both sound and microphone icons?
3. Do I understand correctly that the network and Bluetooth icons are now dynamic? So, i.e. when no Wi-Fi network is connected but airplane mode is OFF, or when Bluetooth is OFF or has to active connections, the icons aren't shown in panel and can only be accessed in quick settings... if so, I think this is a great framework to rebuild the entire menu's UX on!

---

Seriously! With slight changes, almost every system applet in elementary can fall under a category whether to be shown both as a tile in the menu and as an indicator the panel, or just as as indicator in the panel alone:

[1] If an indicator CONTROLS THE STATE OF ACTIVITY of something (which doesn't necessarily mean something is just "on" or "off"), it should always be shown as a tile in quick settings (and vice versa -- EVERY tile should have its own indicator in panel when the state it controls is explicitly enabled):

• Networks indicator (not shown if user is not connected to any network and airplane mode is OFF)
• Power indicator (not shown if user has no battery, or the battery itself is fully charged)
• Night light indicator (shown when the option enabled AND active (or snoozed))
• Bluetooth indicator (hidden when Bluetooth is OFF or there are no active connections)
• [NOT IMPLEMENTED] Prevent Sleep indicator (not shown when inactive)
• [NOT IMPLEMENTED] Rotation Lock indicator (shown when lock in enabled)

[2] If an indicator DOES NOT CONTROL THE STATE, it should not be shown as a tile in quick settings:

• Privacy indicators (only show the apps)
• Keyboard layout indicator (technically for multi-lingual users it also controls the state of layout, but for most of the users it only shows the state of Caps or Num, without allowing to disable them)

[3] If an indicator is ALWAYS SHOWN for some reason, it should not be shown as a tile in quick settings as well:

• Audio indicator (always shown because the system assumes a user's device always has some audio device connected)
• Date & time indicator (always shown because this is the information users usually wants to monitor constantly)
• Quick settings indicator (always shown by design)
• Notifications indicator (always shown by design)
• Application menu indicator (always shown by design)

There are only two exceptions to this rule:

• Location tile -- the user generally doesn't care if the system-wide location is enabled as long as no app uses it; although, this might be an argument either again inclusion of this tile, or pro changing privacy indicator so the state of location could be controlled from it directly (which probably makes more sense, see audio indicator example earlier).
• Dark mode tile -- it is shown as a tile mostly to display information about light/dark mode switching (which currently cannot be seen at all!), and I'd argue that, in case of this tile, the entire system UI is an effective indicator of its state (neither of which can really be called "active" or "inactive", despite being complete opposites of each other).

So, any thought on this approach? :)