Proposals for UI improvements and making the app more intuitive and cohesive

[victor-marino]

Hi @zaneschepke.

As mentioned a few days ago over Telegram, it took me a bit of tinkering to understand the actual logic behind the automatic tunnel switching and the "primary tunnel" function, so I wanted to propose some possible improvements to make the app more cohesive and intuitive to use.

I think the main confusion arises from the fact that the automation settings are scattered across 3 different places:

• The tunnel-specific "Auto-tunneling" options
• Settings -> Auto-tunneling
• Whether a tunnel is set to Primary or not.

I've been giving it some thought over the past few days, and here are some thoughts on how I think this could be improved.

1. Should the "Primary tunnel" option be mutually exclusive with the tunnel-specific "Auto-tunneling" options?

I think this is the root of much of the confusion. Right now, you have the option to configure a tunnel as "Primary", which means it will be automatically activated when no other tunnel is active, although this is not obvious from the description. But at the same time, you can also modify the options of this same tunnel to make it active while on mobile data, ethernet, or in a specific Wi-Fi network.

Aren't these options contradicting each other?

After all, the primary tunnel will automatically "fill the gaps" when no other tunnel is enabled, so its activation is already defined by the settings from the other tunnels, right?

Perhaps a simpler and more logical approach could be as follows:

• When the "Primary tunnel" option is enabled, the tunnel-specific "Auto-tunneling" settings are greyed out and disabled for this tunnel. This means the activation and deactivation of this tunnel is controlled by the settings in the rest of the tunnels when auto-tunneling is enabled, as it will simply turn on when all other tunnels are off.
• As a consequence, most of the settings in Settings -> Auto-tunneling should simply be moved to the tunnel-specific settings. E.g.:
  • Tunnel on untrusted wifi
  • Stop on no internet
  • "Tunnel on mobile data" and "Tunnel on ethernet" are already there and could simply be removed from this menu.
• The rest of the options in my opinion could be moved to the root of the settings menu, like this:
  • Settings -> "Trusted wifi". New submenu at the root of the settings, containing:
    • Wifi name via shell
    • Use name wildcards
    • Trusted wifi names
  • Move to Settings -> "Kill switch":
    • Stop kill switch on trusted wifi
  • Move to root of settings menu:
    • Advanced Settings
  • Once this is done, the Settings -> "Auto-tunneling" submenu can simply be removed.

The only thing to keep in mind is that, when using the Userspace backend, the user should not be allowed to configure overlapping settings on different tunnels. I think this is already enforced for some settings (e.g.: "Use tunnel on wifi name"), so it's just a matter of extending this check also to "Tunnel on untrusted wifi", "Tunnel on mobile data" and "Tunnel on ethernet".

When using the kernel backend, overlapping settings could be allowed, as you can have multiple tunnels active at the same time.

2. Should the tunnel-specific settings be more accesible?

Right now, we need to long-press on a tunnel to bring up the settings button, which is not very intuitive at first, as this is a core part of the app that you'll be accessing very frequently. I can think of two possible alternatives:

Option 1: Keep things as they are, but make the settings gear button always visible alongside the toggle, so it can be accessed with a single tap. When long-pressing, both the activation toggle and the settings button are hidden in order to show the "clone" and "delete" buttons.

Option 2: Make it so that a single-tap on the tunnel name opens the settings straightaway, same as the official Wireguard app. This way we remove the need for a specific settings button. Then, you can change the long-press to show the live tunnel stats (peer, handshake, data rates), which would make sense given this is a more "niche" option that you would access infrequently.

I have no strong opinions either way, I think both options would be intuitive and user friendly.

3. Perhaps the auto-tunneling switch should have a more distinct look from the rest of the tunnels?

I'm thinking maybe it would be best if we had something like a segmented button showing "Manual" vs "Auto" or something like that? See the example on the right of this picture, which is the actual recommendation from the Material Design 3 guidelines:

Just some thoughts, let me know what you think!

I'd be happy to create some individual issues with mocks/screenshots to better document each of these changes if you agree with them :)

[zaneschepke]

Hey! Thanks for this all of these great ideas!

I definitely see a need to make the UI more intuitive.

First, on primary tunnel:

It is important to note that primary tunnel is not purely for auto tunneling, it also serves the purpose of being the default tunnel for AOVPN, Shortcuts, Tiles, Broadcasts, etc. This is why I didn't place it on the auto tunnel tunnel specific settings screen.

As you have rightly pointed out though, there is overlap as primary tunnel also serves a pretty important role in auto tunneling as well. This one is tricky. Perhaps this feature is too broad in scope and auto tunneling needs its own setting for a default tunnel or you opt to use primary tunnel as the default if no other tunnel matches the "rules".

I also see the confusion with having the auto tunneling settings in so many different areas. I think this needs to be optimized and is too confusing.

I think your approach with moving more to tunnels and then having some in settings (like the wifi settings) helps a bit. This would reduce some redundancy, but also makes things a bit confusing because you still have the problem of auto tunnel settings being in multiple places.

I think it helps a bit having auto tunnel (as of 3.8.0) being its own bottom nav item and primary screen with a green dot to show that it is active (vs that very badly designed toggle that was there before). I'm curious for your thoughts on this new approach.

I also agree that tunnel specific settings and such should be easier to access without a long press. The current approach is not scalable and doesn't allow for multi-select. I like the original wireguard app's approach of a single click and then using long press for tunnel specific actions/multi-select. If you could help draft up an issue for this that would be great. I'm in full agreement on switching to this design.

I have been toying with somewhat the opposite of your idea for auto tunneling though. Instead of putting more under tunnel specific settings (where I think inevitably causes this disconnect between the settings that are global), I think all auto-tunneling specific settings should be consolidated to the auto tunnel tab/screen. From there, as you enable certain feaures like wifi, you are presented the relevant settings, Trusted wifi names, and wifi rules (for wifi name to tunnels mapping, maybe?), mobile data, ethernet, etc, each can have "rules" to set. This makes is very scalable (especially for kernel mode if I want to have multiple tunnels active on a certain wifi). The other reason I like this is now all of the setting for auto tunnel are in the same place and intuitively you know they are all related and activate when auto tunneling is enabled.

I also agree that disable kill switch on trusted should probably just go to the kill switch screen.

Anyways, I look forward to your thoughts on this and thank you for raising this issue. I've been looking for feedback on this.

[victor-marino]

Ah thanks, I wasn't aware of all the implications of the Auto Tunneling feature. Maybe you're right in that the feature could perhaps be split in 2 to make it more obvious.

Regarding the new UI for the auto-tunneling feature I think it definitely helps, yeah. It's now much clearer that this is an extra setting on top of any tunnels you've defined, and having a dedicated page for it means you can clearly see the settings that apply to it.

I also agree that tunnel specific settings and such should be easier to access without a long press. The current approach is not scalable and doesn't allow for multi-select. I like the original wireguard app's approach of a single click and then using long press for tunnel specific actions/multi-select. If you could help draft up an issue for this that would be great. I'm in full agreement on switching to this design.

Ok, let me try to draft something when I get some time.

I have been toying with somewhat the opposite of your idea for auto tunneling though. Instead of putting more under tunnel specific settings (where I think inevitably causes this disconnect between the settings that are global), I think all auto-tunneling specific settings should be consolidated to the auto tunnel tab/screen. From there, as you enable certain feaures like wifi, you are presented the relevant settings, Trusted wifi names, and wifi rules (for wifi name to tunnels mapping, maybe?), mobile data, ethernet, etc, each can have "rules" to set. This makes is very scalable (especially for kernel mode if I want to have multiple tunnels active on a certain wifi). The other reason I like this is now all of the setting for auto tunnel are in the same place and intuitively you know they are all related and activate when auto tunneling is enabled.

Yep, agreed. I think that makes more sense. As long as all the automation settings are consolidated in a single place, the problem is solved, and I think you're right that it's more practical in the long term to have a central, single place where all of them live instead of having to dig inside each individual tunnel 👍🏻

[zaneschepke]

As for the first bit, this has been implemented and is now live on 3.9.0. So there is now single tap to access tunnel settings and long press takes you into a selection mode where you can select multiple tunnels and act on all of them at once (similar to wireguard official) so no worries on writing something up for this.

[victor-marino]

As for the first bit, this has been implemented and is now live on 3.9.0. So there is now single tap to access tunnel settings and long press takes you into a selection mode where you can select multiple tunnels and act on all of them at once (similar to wireguard official) so no worries on writing something up for this.

Ah, awesome! I did check before typing this, but my Play Store version was still on 3.8.1 at the time. Just got the 3.9.0 version and it's working great.

Out of curiosity, did you move the live traffic stats anywhere else? (the data previously accessible with a simple tap) Or did you just remove it?

[zaneschepke]

Traffic stats is now a double tap to toggle

[zaneschepke]

This has been implemented. Marking this as closed.