Simplifying the preferences UI

[lwouis]

I was responding on #337, and realized it's been a theme recently, and I feel the need to take some time to steer this project. Here is the situation as I see it. This is a copy/paste of my answer of the ticket I just mentioned:

AltTab is a port of Windows 10. As such, it shows windows in chronological order. While I believe it to be the best general approach for productivity, I'm open to introducing other workflows to the app. People have suggested direct access for instance (#210).

The issue however with adding more workflows into the same tool, is the explosion of preferences. The tool already has a large number of preferences because I find myself wanting to let people have it their way, and be empowered. The downside of that is that the tool is becoming unwelcoming/overwhelming, especially to new and more casual users.

Let's imagine we add a new preference to group the windows by app. That's yet one more preference. Now in your example (Pic 5), you say that the windows for each app could be ordered based on the screen they are on. Some people may prefer that they be in chronological order, instead of based on which screen. Actually if you have multiple windows of the same app on the same screen, you need to sort them anyway, and chronological seems the way to go. My point being that we are already talking about adding 2 new preferences here.

Another issue is that I decided our of principles to have 0 telemetry in the app, website, etc. This means that I have 0 statistics on users preferences, usage pattern, etc, outside of the active people like you who take the time to discuss on the Issues here. I think everyone would agree that adding a preference to accommodate 1 person is not the best idea. Preferences should be useful to a bunch of people. However as I said there is no way to know even if current preferences in the app are of any use.

Really, I'm not sure how to pilot this project forwards without data. I all falls down to my judgment in the end since I'm the main contributor. It's not necessarily a bad thing btw to not follow data. Data is why fast food in the US is so big. They optimize demand and human feedback for caloric-rich food, and now they have a terrible obesity problem. I rather like the idea of not always optimizing for real-world usage as people's habits may not be the direction we should reinforce.

I'm inviting everyone to feel welcome to share here their vision on where the project should go, in terms of features, flexibility, UX of the preferences, richness vs complexity, etc.

[ribrob]

Hey Louis.

How about putting together / sending out a simple Google Forms asking people to rate ideas you've had suggested I the past or have on your backlog already, and canvas for new ones.

That should show you where most of the interest is for the ideas you already have or have been contributed, and maybe generate some new ideas for the future?

You could link the survey via the preferences, as well as here, and allow people to reply anonymously if you want to maintain your privacy principles.

This should give you some data to guide decisions and priorities.

I agree you don't want to shove everything in and as a result, end up with a confusing and/or cumbersome experience nobody wants to use anymore, so having the data to guide can only help you and the product.

Rob

[borna761]

I really appreciate you taking the time to think this through before just going ahead and implementing all the suggestions and ideas that people come up with.

My suggestion would be to perhaps have a toggle of a simple/advanced mode? The simple mode could have the current functionality (or perhaps even some of it removed to make it even simpler?), and the advanced mode could have the extra functionality that has been asked for.

Mind you, I'm not a UI/UX expert, so I don't know how good of an idea this is in terms of usability, but it's an idea that would allow you to respond to the community's requests while maintaining the original simplicity of the application.

[mfn]

For me the "project direction" would be to replace HS (HyperSwitch).

I still have to in fact use both, primary reason is that AltTab does not support per-app window switching at all; which IMHO is the killer feature. Don't remember the exact reason, but I think AFAIR it was that AltTab mimics Windows behaviour which doesn't feature this at all. Obviously to me a big disappointment because, as mentioned, per-app windows switching is the absolute killer feature which learned to massively loved after 20+ years of Windows and then coming to OSX half a decade ago.

[edit: apologies, the reply reads strange given all the details are included in the original issue. I read the original issue a few days ago but now only promptly added a comment due to activity here and didn't properly re-read => but that aside, the gist of my comment is still valid 😏 ]

[lwouis]

@ribrob A survey is an interesting option. I'm not sure if enough people would take it though. In many ways, there is already data in the shape of issues, and activity on issues. There are around 30 tickets open right now, and almost all of them are suggestions for enhancements that people made. While I would love to include all these, I feel it would bloat the app, and make it less usable. This is why I opened this very ticket, to discuss how we can have more features, without overwhelming the users. Maybe split the app in multiple apps, many have normal/advanced preferences, etc. Also, which feature get implemented next as you said.

@borna761 modes are a good candidate to allow simple/advanced users to use the same app. An issue with modes is that for the advanced mode we still need to maintain the long list of preferences, meaning code complexity is not tamed. Also I've seen a few apps for which I personally think the modes are terrible. An example that comes to mind right now is VLC. The advanced mode is really complex, and the relationship between simple and advanced is not clear. In our case, would we have bridges? By that I mean let's say in simple mode we have a preference for how big the UI is: small, normal, large. Each of these would be a "macro-preference" that affects multiple preferences in the advanced mode, such as: "max size on screen, max windows per rows, rows of windows, etc". They could also be distinct, so that setting in one mode doesn't interfere in the other mode. Not sure, but whichever decision, there is a bunch of work required. Also modes don't have to be global like VLC. It could be that some preference tabs have a switch to get simple/advanced preferences. Keyboard shortcuts for instance don't seem like they would need any modes.

@mfn having multiple shortcut was something I wanted to do in #72. See the screenshots at the bottom to see how I was imagining a flexible UI for this. I didn't do it in the end as I didn't want to have too much in the major release. I've been thinking on a new friendlier UI for these. Some kind of "tabs" where you would basically have the current UI, except there are 2 or 3 tabs, to set multiple shortcuts for the same actions. These tabs would also include:

That way you can set 2 shortcuts for "Select next window", but in the second tab, you set "Show the following windows: Active app". That would enable the workflow you want, as well as any other imaginable workflow people may want to use. I think it will be friendly UI as most people will never mess with the second tab, but people who want that will be able to do whatever they can imagine.

[lwouis]

I thought about this issue of the preferences being unwieldy.

What I want to do, is illustrate more. Instead of showing text and more text, having illustration of a preference impact.

This issue is mainly about the Appearance tab. It contains a lot of sliders which I think people don't understand clearly by their wording.

I would like to have section like "main window layout" where there would be a simplified drawing of AltTab main window, and as you move cursor for fewer and more rows, you see the distribution change on the "preview" drawing. That way you get a sense of how the preferences impact layout.

Another about "thumbnail layout" where there would be a simplified drawing of one thumbnail, and you can see all the UI elements you can disable/enable on it.

With this visualized UIs, there can be even direct manipulation of preferences. For example you could click directly on the 3 colored circles on the drawing to disable/enable it. It would then show at half-opacity if disabled. Another option is to have a line going from the visual to the traditional label + checkbox.

I want to do these, but it's really hard to do this kind of UI work, so I don't know when I'll get to it.

If you're interested in contributing here, please let me know! 👍

[lwouis]

Previously, I described "simplified drawings". These could dynamic drawings that are done on-the-fly depending on the preferences. The later is hard to implement obviously, and we would need a way to let the user preview how it would behave with more/fewer windows. That's complex.

An alternative would be to somehow screenshot the full screen, and compose on top of it a screenshot of what AltTab would show if summoned right now. We would put that "preview" on the preferences panel on the right, and simply refresh the screenshot if the user changes a preference. It's "simple" to implement, and would show actual windows from the user, helping them customize for their actual situation, monitor size, etc.

Another way I thought about, maybe in addition to the above, would be to make static images to illustrate each preference. They could be shown upon hovering each preference label, or a question mark icon next to it. That way we illustrate situations that the wouldn't manifest in the preview (e.g. the user doesn't have enough windows to get a scrollbar in AltTab's UI).

[sizhky]

It's exactly as I wanted and expected. I'm trying the app for the first time and didn't like the choice of preferences initially. Luckily found this thread and installed the build. All the settings are really well organized!

[knoajp]

The local build looks better!! 🤗
Especially when I activate it on my sub-monitor, which is 20" 1600x1200, much smaller than my main monitor 40" 3840x2160. (It was hard to customize to look good on both monitors with public build)

I want the window thumbnails should be all in the same rectangle area, rather than changing the width of the size depending on its window aspect ratio. The window layout looks so ugly when one of the windows has a short-and-fat aspect ratio. Also, if a window has a tall-and-thin aspect ratio, I don't want the area of the thumbnail to be squished, but the thumbnail to be shown with gaps on both the left and right sides. "Even spaces for each thumbnail" gives me a better glance.

[sebastianvitterso]

Hey! Loved the new preferences-UI, looks really good, and the previews are magical!

One gripe I have, though, is that on my work machine I generally always have 6 windows open (chrome, vscode, slack, teams, outlook and terminal). Before, I had my setting set to "width=6" (or whatever it was called) and it fit my screen perfectly in one row when I had 6 windows open.
Now it only fits five full-screen apps in medium size, and in small it fits seven. Would it be possible to have a way to have an "advanced setting" for this, to allow me to more finely tune the size of the windows? So I could have "small point five" as my setting 😄 .

[Allsochen]

Hey! Loved the new preferences-UI, looks really good, and the previews are magical!

One gripe I have, though, is that on my work machine I generally always have 6 windows open (chrome, vscode, slack, teams, outlook and terminal). Before, I had my setting set to "width=6" (or whatever it was called) and it fit my screen perfectly in one row when I had 6 windows open. Now it only fits five full-screen apps in medium size, and in small it fits seven. Would it be possible to have a way to have an "advanced setting" for this, to allow me to more finely tune the size of the windows? So I could have "small point five" as my setting 😄 .

I understand that you have this requirement, but maintaining the original custom resize will become very complicated, which is why this reconstruction is done. I hope you can understand it. I hope that after using it for a period of time, you will like the new version. 😄

[knoajp]

After using the local build, 6.73.0 was pretty good at showing thumbnails at even spaces.
Now 7.0.2 shows thumbnails with each window's aspect ratios again. 🙃

I want the window thumbnails should be all in the same rectangle area, rather than changing the width of the size depending on its window aspect ratio. The window layout looks so ugly when one of the windows has a short-and-fat aspect ratio. Also, if a window has a tall-and-thin aspect ratio, I don't want the area of the thumbnail to be squished, but the thumbnail to be shown with gaps on both the left and right sides. "Even spaces for each thumbnail" gives me a better glance.

[sebastianvitterso]

Now 7.0.2 shows thumbnails with each window's aspect ratios again. 🙃

It looks particularly bonkers when you're copying a file

[lwouis]

Indeed, there were 2 changes with v7.0.0:

• The maximum width was increased from 30% to 90%. This creates these huge tiles.
• The minimum width was reduced from 15% to 0%. The tile can be as thin as the thumbnails

You can see both extremes here:

• The wide item is too wide and takes too much space compared to the others
• The tall item is too narrow and we can't see any of its title

@Allsochen We should probably go back to previous values (15-30%) for better usability

[Allsochen]

Indeed, there were 2 changes with v7.0.0:

• The maximum width was increased from 30% to 90%. This creates these huge tiles.
• The minimum width was reduced from 15% to 0%. The tile can be as thin as the thumbnails

You can see both extremes here:

* The wide item is too wide and takes too much space compared to the others * The tall item is too narrow and we can't see any of its title

@Allsochen We should probably go back to previous values (15-30%) for better usability

The root cause is this code change. I have remove the minimum width to adapt the gap between two thunbnail
https://github.com/lwouis/alt-tab-macos/blob/master/src/ui/main-window/ThumbnailView.swift#L564
https://github.com/lwouis/alt-tab-macos/blob/master/src/ui/main-window/ThumbnailView.swift#L368