Design Refresh

[SeaDve]

This is a discussion so Kooha users and developers can discuss the new UI. Feel free to join with the discussion.

What the new design solves

• Adaptive UI that works better on mobile and smaller screens
• Real-time preview of audio and video
• Integrate area selector within the main UI Improve area selector #192, Select Area window is tiny and not resizable #260
• Current settings are immediately visible More options on main panel: choose between formats and monitors #261, [Feature] add ability to select microphone input in preferences #227
• Webcam recording is easier to integrate Add feature to record webcam #21

Some possible issues with the new design

• Can be disruptive and confusing as the new design is very different

Design Drafts

A

B

MVP Code

[nekohayo]

Some UX recommendations:

• "Select Source" sounds like technical wording to me. Have you considered something like "Select Monitor…" or "Select Screen…"?
• Any button that toggles off a feature like the mouse or microphone should make their symbolic icon (or the whole button) red (in light mode) or orange (in dark mode). LibAdwaita's ultra-flat button styling always makes it nearly impossible for me to figure out what state something is in, activated or deactivated, and the simple \ bar in the icon isn't really noticeable enough for me.

[SeaDve]

"Select Source" sounds like technical wording to me. Have you considered something like "Select Monitor…" or "Select Screen…"?

Yep, that sounds better indeed, but it should also work with window selection.

[nekohayo]

OK then that makes sense. Maybe just missing the standard "…" at the end to indicate that "further input from the user will be required upon clicking", and of course a tooltip (if not already present) that reveals that this button is used to select a different monitor/screen or a specific window as a visual source for recording...

[Offlein]

I'm not sure what sort of interaction you're accepting from users, but for me the biggest frustration I have about Kooha is its handling of area-based recording. It's just so tricky to get a specific area. (And it doesn't look like I can select a full window, which would also be useful.)

The way Spectacle handles this is pretty much perfect. I'm not sure exactly what they do, but they might actually take a full-screen screenshot first, and display that as a borderless window, so it looks like you're looking at just your normal display, but you're actually seeing a frozen-in-time view of how it was when the screenshot was triggered. And then you can just select a rectangle right on the screen. Very nice.