Jan Grulich started some time ago a thread about how to implement the network manager settings into the new system settings. During Akademy 2014 we started the discussion and came up recently with a mockup, presented in this blog post. The idea was to keep it simple and familiar by reusing existing code. But opinions are divided in the comments:

The idea was attributed as prestidigitation, with a reference to the restrictions of the system settings framework (someone added just the link to the mockup on Reddit). In some replies the redesign was recommended, e.g. Jan wants to have at least those settings redesigned that are common for 80%, Andrew thinks we can create it completely new.

So what do we do now? Personally, I still think it makes no sense to rewrite code or redesign the UI just to prove it can be done. If Jan, or someone else, needs to do it anyway, then in fact we should think about separating the common stuff from the special settings.

Time to move on with this. I've created a draft of what I would like to have in KCM, mainly it's based on this comment from previous thread. My draft can be found here.

Let me briefly describe what you can see. At the top there are controls for turning on/off airplane mode, wifi and so on. This should be at the top because it has effect on connections below. Those controls are followed by the list of all connections with an option to sort them by type, name and other options we can think of. Each item in this list is similar to the applet ones, but has one more button for configuration. When you click on an item, you should be able to see detailed configuration of this connection like in the applet. The configure button should show you a configuration for a given connection and because this configuration is quite long, other expanded details/configurations should be closed and just one expanded configuration should be allowed or to avoid having two scrollbars in one window (one for connections, one for configuration) we could just hide other connections and move the configured one to the top and use the entire space. I was also thinking about having global apply button at the bottom, but this would be rather complicated so probably each connection should have its own apply button. One thing I'm missing in my draft is remove button, which should be probably next to the configure button. At the bottom below the list of connections I have buttons which are adding new connections in various ways. The create hotspot button would bring a dialog with basic configuration for a new hotspot. In case there is already some hotspot previously configured there should be an option to pickup existing one. The rescan button would just show some animation or something like that to let users know that something is going on. The add button would bring a dialog for selecting connection type and then configuration dialog.

That would be probably everything I can think of now. Andy is going to help me with the design so let's finish the planning phase and discuss usability of my proposal.

Thank you all.

jgrulich wrote:Andy is going to help me with the design so let's finish the planning phase and discuss usability of my proposal.

Do you have any specific question? If not, I have some unsorted ideas.

On a first glance it looks good. In contrast to the proposal by Jens' and me, you have the advanced section on every item. You don't show how all the different configurations will be implemented, but I guess the content of tabs goes among each other. That's okay too (advantage: no secondary, modal window, drawback: extended scrollarea and complex breakdown in non-standardized columns). To me this type of interaction is not conform with the KCM proposal. But since Andy is in I'm sure he will defend and push his own idea.

Our first idea on how to add a new connection and handle hotspots was criticized on Akademy. Am I right that you plan to ask the user what kind of connection she or he wants to add on click on the button? Perhaps in a dropdown. And after the new connection has been added it could be configured as the others. Okay.

Two more considerations: In general, the way of sorting via dropdown is not usual but it might work, And the functions to create a hotspot, to add a connection, and to rescan are fundamental. Therefore the button position is rather at top. On the other hand, 'Add' affects the list (of connections) so it makes sense to have it below. Be aware that this button will be scrolled out of range in most situations.

Heiko Tietze wrote:Do you have any specific question? If not, I have some unsorted ideas.

Nope, I just wanted to know your opinions.

Heiko Tietze wrote:On a first glance it looks good. In contrast to the proposal by Jens' and me, you have the advanced section on every item. You don't show how all the different configurations will be implemented, but I guess the content of tabs goes among each other. That's okay too (advantage: no secondary, modal window, drawback: extended scrollarea and complex breakdown in non-standardized columns). To me this type of interaction is not conform with the KCM proposal. But since Andy is in I'm sure he will defend and push his own idea.

I agree that having a scroll area is not perfect so I'm open to another solution. Also implementing all configurations would take quite a lot of time so as a mid step we could just have basic configuration and for advanced stuff use current connection editor for a while.

Heiko Tietze wrote:Our first idea on how to add a new connection and handle hotspots was criticized on Akademy. Am I right that you plan to ask the user what kind of connection she or he wants to add on click on the button? Perhaps in a dropdown. And after the new connection has been added it could be configured as the others. Okay.

I'm not sure if in a dropdown from the button, because the list of possible connections would be quite long. I would open a dialog where you can select type, write a connection name and it would add it to the rest and open the configuration directly.

Heiko Tietze wrote:Two more considerations: In general, the way of sorting via dropdown is not usual but it might work, And the functions to create a hotspot, to add a connection, and to rescan are fundamental. Therefore the button position is rather at top. On the other hand, 'Add' affects the list (of connections) so it makes sense to have it below. Be aware that this button will be scrolled out of range in most situations.

I couldn't think of any other way how to select what should be used for sorting, but I think that it should be there in some form, because some people were asking for that. Regarding the buttons below, I'm also fine with having them at the top, but I was thinking about having scrollbar only for the list with connections so checkboxes at the top and buttons at the bottom would remain at the same position.

Thank you for putting out the ideas. I will try to come up with a mockup that could interpret your idea for the network manager. I also saw an old sketch that you had and I was wondering if you could add that to this thread.

anditosan wrote:Thank you for putting out the ideas. I will try to come up with a mockup that could interpret your idea for the network manager. I also saw an old sketch that you had and I was wondering if you could add that to this thread.

See

jgrulich wrote:Time to move on with this. I've created a draft of what I would like to have in KCM, mainly it's based on this comment from previous thread. My draft can be found here.

In regards to your mockup above, I wanted to turn it into a more formal mockup and share it. I would like to see if this is still a good organization, objections, design changes, anything missing? Let's critique it and then we can build another version of the mockup.

Additional to my other comments:

I don't understand the dropdown function of 'Configure'. If it opens the accordion section there is no need for a menu, and to have a special control at all. But wait, its not a dropdown in closed state. Anyway, single/double click on the item or an expander icon/button should do the job.

Our HIG does not allow to use sliding switches.

@anditosan: Looks good, as Heiko said, use checkboxes instead of switches. Another thing what could be changed is that details could be in two columns which should allow us to add more details, we can have basic details on the left and advanced on the right. You are also missing icons next to connection names and some details below it, like "Last used ..." or wireless security and speed.

Hi all,

I decided to move on and start some work. Here is my current result (still in progress):


I got inspiration from gnome-control-center (current implementation and planned configuration [1]). Idea is to have a list of available devices on the left side (+ one entry for VPN connections + maybe one for general setting). The right side should display some details about device and list of available connections which you should be able to manage. I would like to help from you step by step to make this a perfect kcm

My first problem is how to layout device details and list of connections. I would like to make device details hidden by default as this information is mostly for advanced users. I'm also not sure whether the list of connections should by in the frame (same applies for device details).

Do not pay attention to the design of items in the list of connections, this is copied from plasma-nm applet and I plan to make the delegates look differently with buttons for modifying and removing and so on.

[1] - https://wiki.gnome.org/Design/SystemSettings/Network

Thanks for your attention and help.