Add hover animation by default

[adityakaulagi]

Is your feature suggestion related to a problem? Please describe.
As of now, if I want to select a window using mouse, I get no visual confirmation that Im pointing to the right window with my mouse since my mouse is much smaller and sometimes blends into the window preview. This leads to a less than ideal UX, and it would be helpful if we could add hover animation (similar to hover animation when window selection with hover is enabled)

Describe the solution you'd like
We can either add existing hover animation used for the feature to select window by hover, or add a slightly different color background for simple hover to indicate to the users that the option to select window on hover isn't enabled.

Since you're looking for new maintainers anyway, I can take a shot at implementing this if someone could point me to the code that handles hover animation when window select using hover is enabled. But I have zero experience with developing SWIFT apps for macOS so it might not be the best implementation.

Describe alternatives you've considered
None, I just point to the window I want to switch to hoping Im pointing to the right one. It's never been an issue, so this would be more of a nice to have UX upgrade than a necessary change.

[lwouis]

It's an interesting idea. It's something that's been discussed previously in #1617.

While I like the idea of separating keyboard-led selection from mouse-led selection, I don't picture how to do it in a way is not confusing for the user. We will essentially have 2 concurrent highlights: one for the mouse, and one for the keyboard. It's a lot of cognitive complexity.

Could you develop your idea more on what the exact UI would look like?

[adityakaulagi]

I just looked at how HyperSwitch handles this (the previous application I was using before AltTab) and in HyperSwitch, window select on hover is enabled by default when mouse moves (probably a certain distance) around any of the windows shown on the screen. I can see that you already tried to implement something similar but decided to stick with the current behavior of controlling window select by hover through setting.

I think adding hover animation shouldn't be too much of cognitive complexity if done correctly. This is already happening in other similar use cases. For example, on windows, if you have the Windows Explorer open and select a folder, as you move your mouse over to other folders, there is a hover effect on the folder the mouse is currently pointing to.

My suggestion would be to simply add a border instead of a shadow effect that we currently have to clearly differentiate between hover and select. We can also disable this by default, and have it as an option under appearance. But as you correctly pointed out, it could be a niche feature that might not be worth spending too much time on.

[XInTheDark]

My suggestion would be to simply add a border instead of a shadow effect that we currently have to clearly differentiate between hover and select.

That would make it seem too much like the "Windows 10 theme" that we currently have, though... some people may not prefer it. 🤔

[lwouis]

We could imagine something more macOS-y. I actually wonder how some components from AppKit handle this mouse-hover vs keyboard-focus.

We should study this and attach screenshots in this thread to illustrate the UI.

[lwouis]

I looked at many apps bundled with macOS, and I'm shocked and how Apple UX has regressed in the past couple years. Almost nothing reacts to mouse hover in the OS. I think they brought they iOS/ipadOS UI choices to macOS piece by piece. I had to look at Window 10 to get examples of decent UX:

Start menu

Windows.10.-.start.menu.mov

Explorer

Windows.10.-.explorer.mov

Alt-Tab

Windows.10.-.alt-tab.mov

They either use border vs background, or they use light vs dark background.

[lwouis]

I played around using dark vs light background, but I was reminded that I had made the background overlap as a cool UX refinement, a long time ago (#126). Thus it doesn't look nice side-by-side:

Even the border vs background would overlap here.

[adityakaulagi]

That would make it seem too much like the "Windows 10 theme" that we currently have, though... some people may not prefer it. 🤔

Good call, I don't use the windows theme so didn't realize about this. But looking at the windows theme made me take a look at how Windows does hover vs select behavior, and I found that in windows, when I hover over a window while holding alt tab, I see the close icon indicating on the window I'm hovering over. So I disabled "Hide colored circles on mouse hover" in Appearance Preferences and I'm now able to get a better UX when hovering over a window (Don't mind if we close this issue since my UX problem has been addressed with this 😃 )

Going through that experience made me think, should we change the placement of colored circles based on theme (left for macOS theme, right for windows?) (@lwouis maybe this needs a separate issue, sorry for adding unrelated suggestion in this issue)

I looked at many apps bundled with macOS, and I'm shocked and how Apple UX has regressed in the past couple years. Almost nothing reacts to mouse hover in the OS.

Totally agree, I couldn't find any system wide behavior that has hover animations too. The only example I could think of was in Safari, the active tab has a different background compared to other tabs that are open, and when I hover over the other tabs, the background is slightly different than the active tab background.

Even the border vs background would overlap here.

I agree that this doesn't look ideal compared to how macOS's native app switcher UX looks like (as per screenshots in #126), but even macOS's default overlap doesn't look that great either (definitely understand that this is a personal opinion). So maybe as an improvement, we could have the behavior you showed without the overlap by reducing the size of background when hovering/selecting?

You can see that the spacing between the content and background isn't equal (distance between background border and preview image at bottom is less than the distance on other sides),so maybe resizing would allow for a uniform padding between content and background thus making it more visually appealing too?