Improve indication that Desktop App is out of focus

Hello,

I’m not sure about other user environments, but in Windows, the title bar is usually grayed out or the overall color becomes lighter to indicate which window currently has focus (to indicate current app is “blurred”). However, in the current Supernotes app, it’s not clear whether the focus is on the app itself.

Of course, I can tell if the focus is on the Supernotes app if no other app has focus, or if the text cursor is blinking while editing a note. However, I think it’s important and very helpful for using the Supernotes app harmoniously with other apps to make it clear when the app is blurred by showing a change in the overall color tone or any other visible indication.

I haven’t studied design theory, so I’m not sure how to request specific suggestions on how to aesthetically and naturally represent this in the current interface. However, I would appreciate it if this issue could be resolved.

Thanks!

2 Likes

Can you us a capture or maybe a video of this focus transition?

Firstly, a typical situation where problems arise is when users mistakenly believe that they are focused on the Supernotes app and try to start editing a card by pressing the Enter key, even though the focus is on elsewhere. In this case, users fail to enter the card editing mode, and their workflows are unexpectedly disrupted.

Not all electron-based apps support visual changes based on window focus. For example, Spotify and Discord do not have any visual changes based on window focus (in the case of Discord, to reduce unnecessary power consumption, animated images and videos stop when the window loses focus). Therefore, for people who primarily use only the keyboard to operate their computer, such apps can be occasionally inconvenient.

On the other hand, apps such as Slack, VS Code, and Notion do provide visual changes. These changes can be broadly divided into three categories. One is adjusting the transparency of foreground-colored components such as text/icons. The second is changing the color of the window’s top title bar. The third is adjusting shadows to give a depth effect. Below are examples of each.


Case 1) General Windows App (Notepad)

notepad2

On Windows 11, Notepad displays all three effects mentioned above. The window control icons in the title bar turn white only when in focus, and the color of the title bar changes to a color associated with the background when in focus, according to Microsoft’s Fluent Design acrylic effect. Additionally, you can see that a shadow effect is added when the window receives focus.

Case 2) Electron-based App “Slack”

slack2

In the case of Slack, the color of the title bar and foreground color change (corresponding to the first and second items mentioned above). Please note that some parts have been blurred for privacy reasons.

Case 3) Electron-based App “Notion”

notion

Notion applies the first (foreground color change) and third (window shadow) mentioned above. However, Notion is not an app that uses a custom title bar.

Case 4) Supernotes

supernotes

Supernotes currently does not have any visual changes based on window focus.


In the end, this feature request is not an essential item for app usage, but it will be helpful to users like me who use mainly keyboards and other users who have experienced the issues mentioned at the beginning. It will also improve the usability and completeness of the app, including accessibility improvements.

1 Like

Hi @wldh,

Thanks for the in-depth report. We will see what we can do to improve this (most likely will change the titlebar background color to be faded).

1 Like