UI/UX redesign suggestion : compact design + icons quick access

[Trouffman]

This is a companion ticket for the issue #39 and #35 with more details on the changes required in UI to streamline usage.

Today's UI

Challenges or missing stuff

• Name are missing on tracks for devices output. (On source this is coming from the filter name) It is hard or impossible to now which device is which slider.

• Cannot monitor the output level on a specifi device (see #39 for fixing this)

• No option to configure audio level for OBS monitoring device

• No horizontal mode (could be more compact)

• Hard to keep track of which slider is for what purpose

• Vertical layout take up more screen space than the OBS Audio Mixer vertical mode (couple of reasons for this)

Suggested UI changes

Obviously this would be up to discussion, but I and couple of my teammates went through multiple rounds of prototyping the following suggestions.

Mockup In vertical layout :

Change list

Monitoring device control section

• A level to control the output to your monitoring device.

• A "cleanup" (recyclable) icon to "disable" all audio going to your audio moniroting device. This could be a double sided feature : click once, clear everything. Click again without any changes, go back to all previously monitored tracks (could be counter-intuitive)

• The global settings cogwheel to control all the plugin settings (minus the device allocation per tracks, see below). This cogwheel contains ANY global settings, while any "track/sources" specific settings are in the cogwheel for each track/source.

• Top Name could be configurable or set to "Mon" or nothing until implemented

• Headset (monitoing icon) is clickable > enable/disable output to you OBS-definet audio monitoring device.

Note : Audio meter are irrelevant for this. See point 1. 2. and A. B. C. in issue #39 for the reasons.

Track control section

• Track Name from the OBS Audio output settings is use per tracks. (already implemented, related to #36 )

• db meter on each track (this is a useful info on the regular Audio Mixer (ultimately this would be nice on EACH audio output device.) - Could be used in place of the device/bus name (see next)

• Output or device or audio bus name. Help quickly identify the output audio device/bus used.

Why use an audio bus name? Allow to set friendly name per device output/bus AND color for the slider. NB: Audio bus are DIFFERENT than Tracks, tracks are a set of output "group" while the Audio Bus are Output Devices.

Some more per device/bus configuration, including name and colors. Could be renamed in "Output Device Bus" to avoid confusion maybe. (TBD)

• Audio level meter Having the "numbers" on every metersis superfluous IMHO. See the recommendation in "General UI" Paragraph to reduce footprint.

• "Volume Lock" option is still there. but shoudl also be in the track/source cogwheel menu. One could argue this could easily be moved to the "Track/source cogwheel option". And free up that space.

• Per track/Source Cogwheel settings menu.

1. Enable/disable
2. Volume lock
3. Select Extra Audio device (or Audio Bus)
4. Hide (to quickly hide) > To unhide, go to the global settings cogwheel

• Audio level Slider behavior

1. First slider is ALWAYS the output (no matter if it is a track or a source). And always the default OBS color for sliders.
2. This "output" slider is "locked" if changing volume level is NOT available (might be the case for the track) - Might need a help message when hovering on the lock or selecting in the menu. See #35 for this request.
3. Any other sliders are for "Extra Audio Output Devices" and use the name/color set in the "Bus Name panel" (as decribed previously) I tried to keep all the slider consistent in scale / size for UI consistency

• Speaker icon : enable/disable output or ourput to that extra device. (NOT the monitoring!)

• Headset icon : Enable/disable the audio monitoring to the "default audio monitoring device". (See the bahvior section is this is unclear)

• Headset (Monitoring) is avaialble for ANY output/ exra output devices

General UI :

• Vertical separator between Tracks / Sources and Monitoring control. This is purely to simplify UI and quick access, as it is triccky to know where each "group" or category of controls are. This is a visual aid for it.

• Global Menu option : Meters Output

Uniformise behavior with OBS behavior on 27.2 : https://github.com/obsproject/obs-studio/pull/5716 More to discuss on this...

• Global Menu option for : Compact design - audio meter Reduce footprint of the "Audio level meter"

Compact design keep the audio meter numbers ONLY on the first meter of each category. (Track 1 and Source 1)

• Global Menu option for : Compact design - track/sources Allow to display/hide the track / sources sections.

Some will only monitor at the source level, other only at the track level (how I use it mostly) Also this is where you unhide specific tracks/source. Menu option : Show/Hide > Tracks|Sources > All | Track/Source 1,2,3. This will save space in the layout. Also similar behavior as the official OBS Audio Mixer.

• Horizontal layout option (like the default OBS Audio mixer). More mockup work might be required.

• Reduce the padding in between sliders/icons. Get it closer to the OBS Audio Mixer look & feel.

NB: There are limitation here that we have to play with : in OBS Audio Mixer, the icons for enable/disable are not align with the slider but within the width of the meter + slider. It does not work if the icons are next to the meter, only if below

NB 2 : If thinking about "touch based" interface, this would require some work like exra padding, etc, to account for "touch-regions". I do not think this is required for now, it would need to be a special UI thinking as well.

• Obviously settings would be saved so this is not to be reconfigured eveytime.

To confirm behavior

Example 1 : A slider on track 1 is set at 100%, and slider on "Audio Moniroting device" at 80% > Track 1 volume on monitoring device is 80%, output stays at 100%

Example 2 : A slider for Track 1 is at 100%, Source 1 at 80%, and Mon Device at 50%.

track1 is heard at "50%" and source 1 at "40%" volume on the monitoring device and the output on track1 is 100%, and 80% for the Source 1.

Devil's advocate section

Some ideas and why I don't think they are to be implemented.

• Have each group as a separate widget. It would overcomplexify the UI, and make it worst overall (like you would need the audio monitoring in all the widget or in none, and the space taken for each new widget would lose a LOT of space (and then be counter-productive to what is proposed.)

• Only keep the cogwheel on the first left side and remove it from all the other tracks/ sources.

This will create a "multi layer/multi child" menu type (like in today's UI) it is too easy to hover out, misclick or lose what was changed. Per track allows to keep that specific settigns to that specifi track. anything "global" is set at the "global settings" cogwheel.

Happy to discuss other possible improvments.

[Trouffman]

Another option that came up as well : For each source add an option for monitoring as "Before / After" filters/properties.

This could help to monitor before any filters are applied (similar to a raw-source monitoring) and as well as "After filters"have been applied