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

[lwouis]

Following up on recent discussion, I think we should have "presets" to simplify things. That is, instead of exposing every possible tweak and slider, we group things in use-cases. For instance, I like the approach of first asking the user which general UX they want:

• Thumbnail focused (as currently done)
• App icon focused (big app icons, like the built-in switcher)
• Text focused (vertical list of window titles)

Then depending on their choice, we would offer different sub-preferences. We could reduce options here are as well like instead of letting users pick how many rows, and width and height, etc; we could ask them: "small", "medium", "large", a bit like what macOS does for display scaling:

@metacodes if you're interested in this, could you draft some mock designs? Like pen and paper or even ascii art where you would sketch how the new UI would look like? I think it's important we agree on the target before any effort is put into the implementation.

[metacodes]

if you're interested in this, could you draft some mock designs? Like pen and paper or even ascii art where you would sketch how the new UI would look like? I think it's important we agree on the target before any effort is put into the implementation.

OK, I will try it.

[metacodes]

@lwouis This is the current design for the Thumbnail focused theme. I referenced the design of HyperSwith's configuration options. I'm not a professional UI designer, I just learned Sketch, there are still a lot of shortcomings, please forgive me.

I extracted some common options of the three themes and put them at the top, the bottom will show different configuration items according to different themes.

The remaining two themes App icon focused and Text focused configuration items I have not yet considered clearly, do you have any ideas?

[eugenesvk]

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.

Can you hide some advanced preferences in the text config files? Then the casual users would see their acceptable amount of 10 preferences in the GUI and the more advanced users can open the config in a text editor and tweak the other 90 (numbers are just for illustration)?

[ElhemEnohpi]

Regarding the idea of simplified presets:

I've used Firefox's "control-tab" switcher for many years. I'd like AltTab to look as much like that as possible, just because that's where my eyes go, and what my brain is used to... I've come pretty close with the Appearance settings - a single row with (almost) max screen width, and max seven thumbnails (though I would actually like more customizing - title below the thumbnail, thumbnails window centred vertically, icon in the bottom right, etc., but that's another story.) So if you're making presets, it would be nice to have one something like this, or at least, to not lose the ability to get it as close as I have it now. Or, as the comment above mentioned, maybe some kind of text file or style sheet option for more detailed customizing.

[lwouis]

Today I was inspired to work on this ticket, after the discussions here with @ElhemEnohpi. I took some time to consolidate my thoughts about where this ticket should go. I draw some UI sketches, and recorded a video to explain the current situation, and my idea of the future.

Please feel free to share feedback. It's a first draft. There is clarification required between the first part (Layout) and the second part (Preview). I think we should first show the user the Layout choice, and when they pick one, it would show them the Preview choice. And they could customize by adding back some removed features for example. And if they would go back to the Layout, it would reset that process. That's one way. More thought is needed there.

To be honest, I probably won't have the time to go through and implement this. See #1179. I can discuss the UX and help with implementation, but I know for a fact that it would be quite a lot of work to implement, so I'm looking for someone motivated.

[muescha]

for the other settings you described in your video -> it would also nice to have a preview of this settings. maybe if i hoover over a setting with the mouse an overlay (maybe below the settings dialog) should be visible with the current state and then if a user tweak the values it should show it direct.

just now i can change a value, need to activate it with option-tab to see the change (if i not understand what i am changing i have to find out what changed exactly - at first glimpse its difficult to see) and then i need to restart the alt-tab app because they is closed when i alt tab away from it.

[mindyourlifeguide]

@lwouis You can try to be inspired by the main menu example, as in kde.

This option vertical menu with the preview window selected is the most convenient, as for me

[towerofnix]

It can be tricky to figure out a good approach for simplifying an existing UX without knowledge of where users currently struggle! Have you considered, if it's at all within your reach, performing some "playtests" where you share your app with individuals, give them a goal like "explore the preferences pane and configure AltTab to work how you want it to," and casually observe what they do to reach that goal? Generally, no providing guidance, just watching how they figure it out on their own. It really helps to identify "pain points" and discover some users' own experiences of the app! Watching how others interact with the thing you've spent dozens of hours poring over really helps show you it in a different, outside perspective, and can reveal problems and potential solutions you missed before.

(The way I usually do this is by showing my project to family or friends and being physically near them or on a screen-sharing voice call as they explore it, usually for the first time. I totally understand if it's not an approach you have access to, just thought I'd recommend it since it's been very helpful for me in the past!)

---

Personally, I feel visual explanations for behavior-altering options is extremely useful. The older animations in the Trackpad section are a big inspiration to me. This video from MacMost shows them off. Those gif/recording embeds are great for trackpad gestures since they're very animated, over-time/transitionary movements, and that doesn't translate directly to AltTab. But they have another advantage: Since they're recordings, they have an advantage of having an "ideal" setup.

For example, the "Show windows from: Visible Spaces" option is challenging to explain because some users don't know what Spaces are, and many only work on one Space. So if you use a "live preview" of the AltTab switcher, then there will be no difference between "Visible Spaces" and "All Spaces", because there is only one Space. A recording has the advantage of showing what the option actually does in an environment where there are multiple Spaces. Or an environment where there are multiple monitors, each of which has its own Spaces.

They're basically bite-sized tutorials for each option, shown in a simple way which demonstrates the usage in a way which is easy to digest and consistently demonstrative because it's a recording. They also add some visual flare to the preferences pane and make you not feel like you're "left alone" to attempt to understand the label and dropdown in front of you, which goes a long way to make a complicated settings screen with many options feel more friendly.

There are some other smaller ideas I have but I'd like to think about them more and stick them in separate comments, and share this relatively complete idea (and the suggestion about playtesting) sooner. (Also, I haven't caught up on all the discussion here or seen your recording yet! I'll be sure to give it all a good look when I can!)

[afefer]

Can you hide some advanced preferences in the text config files? Then the casual users would see their acceptable amount of 10 preferences in the GUI and the more advanced users can open the config in a text editor and tweak the other 90 (numbers are just for illustration)?

I love this idea - Visual Studio Code, for example, does a great job of allowing for an "explosion of preferences" (as you put it, @lwouis) by allowing virtually infinite customization through a settings.json file. The actual preferences window with a UI simply writes to the same settings.json behind the scenes.

I suspect that most users of AltTab who care about the more esoteric settings are technically savvy users anyway, and shouldn't have a problem working with a json file or something similar. I think this approach is a great "best of both worlds" in that you can have an unlimited set of preferences/tweaks while also achieving your goal of a simple, user-friendly preferences UI for casual users.

[anonymous-si]

Hi everyone.

A few weeks ago I started working on problem #337, and I realized why at the moment the biggest problem is not to implement a new feature, but rather where to find a location in the UI to add this new feature. That's why I also worried about thinking of a solution to try to solve a little the mess that is the UI, but that was simple enough not to take too much work to implement. That's why I thought about grouping the related feature control elements into categories and displaying them in TabViews.

Here is the result:

This still needs some adjustments before it can be released to everyone, but I look forward to your opinions or better suggestions to solve this problem.

[lwouis]

@anonymous-si thank you for sharing these visuals. I think they are interesting.

For this ticket here, I go over my end-goal vision in this video. Could you please review it?

Your proposal represents an interesting potential stop-gap improvement. I'm not sure splitting the Controls tab is improving things though. I think Appearance looks like a definite improvement.

What do you think?

[anonymous-si]

Thank you very much for your feedback, @lwouis.

I agree that the change I made to the Control tab may not have been so good. I think putting a TabView inside another TabView may not be a good UI practice. But if I didn't do that, I wouldn't have a place to put the dropdown of the window grouping feature treated in ticket #337, which by the way is already working.

I watched your video, but when I watched it, I was already finalizing the changes. I found your video when I was looking for the ticket related to refactoring the preference interface. I realized that your plans for the AltTab application are quite ambitious. In fact, as an AltTab user, I would like him to have even more customization options than he currently has. Regarding my proposal to change the Appearance tab, I thought it would be possible to include a small representation of the App Switcher above TabView, so that the user can have some feedback while customizing the options.

[joshuakaufman]

Adding my feedback to request AltTab Appearance preferences that allow me to:

1. Remove "Window title" completely
2. Show all app icons on a single row

This will enable AltTab to emulate how the default macOS switcher works with improved functionality, which is what I imagine many users, including myself, are seeking. Thanks!

[lwouis]

Hi everyone following this thread,

@Allsochen has be working hard for months now on a big Revamp of the Preferences!

He has redone a lot of the preferences UI. It's now much simpler, full of visual illustrations, and should provide a much better experience for users.

If you're interested, could you please try out this local build, and share your feedback here? Especially if you find issues with the build?

Thank you!

[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!