rfcs
rfcs copied to clipboard
obsproject
Add RFC: Redesign main UI
Description
Redesign main UI to iron out the user experience.
Motivation and Context
Make it easier for users to find certain items. It would also modernize the look of OBS.
Image
Link
https://github.com/cg2121/rfcs/blob/main-ui-redesign/accepted/0012-redesign-ui.md
Things I like:
- Exposing profiles and scene collections more, making them more accessible
- Removing the list of buttons on the left side, including the dumb exit button
- Studio Mode button more out of the way, but still accessible
Things I don't like:
- Explicit buttons for starting the stream, recording, and replay buffer drives us more down the road of the One Stream, One Recording, One Replay Buffer paradigm. If outputs are ever going to get revamped, it will allow for an arbitrary number of outputs, including arbitrary streams, recordings, and replay buffers, not to mention other outputs like DeckLink, NDI, or virtual camera. In fairness, the current UI has this problem too, but I have a hard time giving a thumbs up to any design that doesn't factor that possibility in and instead drives us down the current road of hard-coding specific numbers/types of outputs into the main UI.
- I'd like to see a pass at figuring out a better way to present transitions as long as we're taking a stab at redesigning the default panels.
- The "Eye"/"Lock" icons for hiding/showing and locking the preview are non-intuitive, IMO
With the hamburger menu going to any sub menu (File/Edit/View/Tools) would take an extra click more than now (on Windows at least)? That seems like a step back.
In the top left corner: Create profile and scene collection combo boxes, so users can more easily change them
Switching profiles and scene collections takes either two clicks, or Alt, S, Up arrow, Enter. Making it more visible might help new users locate these menus, but it doesn't benefit existing users. What's worse, you're removing the ability to easily access them from the keyboard, hurting anyone who cannot use a pointing device like a mouse or touch screen.
Change the menu to a hamburger menu
Oh no, please don't do that. Hamburger menus are a pain to navigate, especially from a keyboard. Leave that to smartphones that physically can't fit too many buttons on the screen, computer monitors have more than enough room for a menu bar, which is more than adequate and allows for quick and painless keyboard-only navigation. Once again, if you take away the ability to access the Settings menu with Alt, F, S, you'll have to provide adequate means of accessing it from the keyboard - but you can't, the hamburger menu just doesn't have the flexibility for that. The user would have to hit Tab six times to highlight the "Settings" button, then press Enter. That's just so much worse than a menu bar.
Move the stream, record and replay buffer buttons to the status bar
I'm mostly okay with moving the stream/record/replay buttons to the status bar, except for one potential issue: hiding the status bar will also hide these buttons. So you're either taking away the ability to hide the status bar, or there needs to be a second toggleable dock with these buttons. And, once again, keyboard accessibility might suffer, but that remains to be seen.
Some users don't like change.
Not all change, just the regressions. The stuff that hurts performance, accessibility, and the like. Imagine if someone breaks your right mouse button and tells you to embrace change by using the context menu key on your keyboard instead. And that's exactly the kind of change you're proposing here by removing the menu bar.
On the bright side, finally there's a dedicated "Toggle preview" button. That'd be useful.
One thing I'd like to see in the default shipping OBS Studio UI is to have the Stats dock be visible by default. I also think there's little recurring use of the Scene Transitions dock.
A better way to preset these would be to have the Stats panel open by default and docked with the Scene Transitions, so they are tabbed together in the same dock location. This will also introduce the new user to the concept of UI tabs.
I'd also like to see the CPU display broken into separate overall system CPU and OBS-specific CPU. Somehow getting system RAM and VRAM in there would be nice too.
Created a github account just to add comments for this, once I became aware.
I feel this is a large step backward in functional design and usability, and request that this be made optional if implemented.
From a user experience perspective this change would make most workflows in real-world use-cases take longer and become more ambiguous. In addition it appears to be a less efficient use of space in many cases.
If this is made standard and the previous design deprecated, it would be significant enough of a problem that I would need to look at alternatives to OBS.
Thanks!
Created a github account just to add comments for this, once I became aware.
I feel this is a large step backward in functional design and usability, and request that this be made optional if implemented.
From a user experience perspective this change would make most workflows in real-world use-cases take longer and become more ambiguous. In addition it appears to be a less efficient use of space in many cases.
If this is made standard and the previous design deprecated, it would be significant enough of a problem that I would need to look at alternatives to OBS.
Thanks!
Can you please be more specific? This is not really actionable on what you find to be a "large step backward".
Hi Fenrir,
Thanks for the prompt response.
The primary actionable item I outlined is to make this optional, or possible to disable entirely.
I believe the other users have called out a number of the critical issues in the design already, but I would also like to point out that Profiles cannot be changed while a session is active, so exposing them further as an always-visible design element doesn't seem helpful.
In addition, this layout uses a fairly more significant portion of vertical space, which on modern displays is at much more of a premium than horizontal space.
As I previously said, the impact of the proposed change overall would be significant enough for me to pursue other options if it is not made optional.
Thanks again for prompt reply!
Hi Fenrir,
Thanks for the prompt response.
The primary actionable item I outlined is to make this optional, or possible to disable entirely.
I believe the other users have called out a number of the critical issues in the design already, but I would also like to point out that Profiles cannot be changed while a session is active, so exposing them further as an always-visible design element doesn't seem helpful.
In addition, this layout uses a fairly more significant portion of vertical space, which on modern displays is at much more of a premium than horizontal space.
As I previously said, the impact of the proposed change overall would be significant enough for me to pursue other options if it is not made optional.
Thanks again for prompt reply!
The point of this RFC is to discuss and provide ideas on how to make it better. An RFC is not final until it is merged. It would be more helpful if you actually provided alternative options and outlined the specifics instead of just saying "I don't like it".
Hi Fenrir,
Thanks again for your prompt reply, although it seems you may have missed the primary purpose of the comment:
Make the feature optional.
That is the alternative that I am asking for, if this feature is to be implemented.
Thanks again!
First, I will address my thoughts on each point in turn:
Remove the controls dock.
I agree with this; the controls dock either occupies a small portion of screen space or wastes a lot of it, depending on how users have set up their docks.
With regard to dodgepong's criticism:
Explicit buttons for starting the stream, recording, and replay buffer drives us more down the road of the One Stream, One Recording, One Replay Buffer paradigm.
Again, I agree. However, for most users' purposes, I'm sure this paradigm, flawed as it is, would suffice. There must be some kind of balance between approachability for non-technical users, as software such as Elgato's Game Capture attempts with big friendly buttons, and flexibility.
If it were that a user could create multiple collections of multiple outputs, each of which I will call an Output Collection for the sake of continued discussion, perhaps an ideal interface would be a breadcrumb navigator like Xcode or the Run/Architecture combo boxes in Visual Studio.
This consists of a breadcrumb widget with two elements: the first contains the selected Output Collection and the second contains the selection of outputs that should be enabled for this session. Clicking the first element shows a drop-down list of Output Collections made by the user; clicking the second element shows a drop-down list of outputs prepended with check boxes (if this is possible with Qt), with the top-most item being the default 'All' (to, as indicated, output to all outputs in the Output Collection).
Perhaps I am side-tracking here, but this would allow the flexibility for users to choose whether to have multiple Output Collections, each with only streaming or only recording outputs, or create one big one and enable/disable outputs with the breadcrumb navigator's second element.
Next to this (probably to the left, like Xcode and Visual Studio) would be a big friendly button (or a small one) for starting output. If the user only wishes to record, it would say Record and have a nice big 🔴 icon; for Output Collections only containing streaming outputs, it would say Stream with an appropriate icon; finally, an Output Collection containing both recording and streaming outputs with both kinds enabled would have some other appropriate term (perhaps Record & Stream, with an amalgam icon).
This would seem to represent a balance between power and simplicity, especially if OBS' first-run wizard creates separate Output Collections for recording and streaming by default — so that users can continue to operate in the One Stream, One Recording modality if they prefer or find it easier to understand.
Now, back to the RFC.
Move the stream, record, and replay buffer buttons to the status bar
I think this would waste a lot of space that could better be served for — well, status information.
I agree with dukedonuts that vertical space is at a premium, but I think this would work much better as a toolbar along the top (perhaps implemented as a dock, so it can be torn off and put at the bottom). It's a much clearer location for starting and stopping things as it has precedence in other applications (again, Xcode, Visual Studio, PowerPoint, Keynote, etc.).
It might also allow us to add commonly-used functions as buttons to one side of the same toolbar (like the Quick Access Buttons in Office). I know that work is already underway to add such buttons just above the Scene and Source lists (or is it docked to the bottom of the preview area? I'm not sure) but this seems to be a friendlier location, more consistent with other applications that place useful, frequently used functions in buttons along the top.
By "frequently used functions", I'm thinking of toggling the filters window, transformation functions, that, at present, are only available through the main menu or context menus etc.
In the top-left corner: Create profile and scene collection combo boxes, so users can more easily change them
I don't believe this is necessary. They are already available via drop-down menus at the top of the window: the main menu. I notice this is missing in your mockup — to lose this menu bar would be a waste as the menu still needs to be provided for macOS' global menu bar, anyway.
That said, could the current scene collection not be choosable from the Scene Collections dock as a very narrow combo box at the top of the list or as a button at the bottom?
In the top right corner:
All of these things could be integrated into the toolbar of which I spoke earlier, which seems more flexible — I don't need a lock button, so I could remove it from my Quick Access buttons.
Change the menu to a hamburger menu
No. This is an entirely inane user interface design for desktop software; there are absolutely no common displays out there that can ably show the OBS interface that don't have sufficient space for a proper menu. As mentioned before, the macOS version would require a proper menu, anyway.
You see this in apps like Office or Chrome for macOS — they have both a global menu bar and the hamburger; the redundancy is both not necessary and counterintuitive.
That said, if somebody really wanted it, it could be a Quick Access item.
I understand the the objective behind this proposal is to tidy the interface up to reduce the usage of vertical space as much as possible, but menu bars have an important role in discoverability — a place for users to easily peruse for new functions — which is already a bit wanting in OBS.
Just an Idea : since OBS is a open-source project used by many people I'm sure a lot of designer would do draft/new idea for free, do you think you can send mail or anything to anyone on dribbble or maybe some agency like cuberto or gskinner, even ask uplabs to create a OBS redesign concept idk
We've had plenty of offers and even received a few designs in the past, but the problem is typically not design, it's implementation. We need someone who can put those ideas in to practice more than anything else.
Control Dock
I've never heard the control docks be referred to as a hamburger menu before.
I don't like the idea of removing the control dock, or hiding the control dock by default. I can understand that it may not be perfect, but that ship has already sort of sailed and I feel like we should just keep with it to stay with what's familiar there. Besides, I don't think the control dock is all that bad. If anything it's just a bit bulky -- but not necessarily bad. I don't mind having big buttons that say what they're going to do personally. This might just be a personal preference but I feel like most users don't particularly mind that either.
The only thing that I think can be improved there is if the user has not configured streaming or recording, if they click "start streaming" or "start recording", they should have more of a guided experience there to get them set up with that.
Status Bar
Now, that status bar is something that can be improved tremendously. There is so much unused space on the status bar. The status bar should be a tool to show the most important information as well as indicators of issues. For example, indicators of issues, as well as what types of issues, really need to be much more apparent on the status bar. There are three types of "lag" that can occur to a stream. Rendering lag, network lag, and encoding lag. Right now, these aren't displayed very apparently on the status bar. These indicators could be condensed and much more visible to the user when they happen:
- The FPS indicator isn't even necessary. Instead, it should be replaced with some sort of indicator that indicates that rendering lag is occurring. The FPS indicator doesn't alert the user to whether they're having render issues, instead the FPS just drops down and it's easy for the user to not pay attention to.
- Dropped frames do not really need to be listed, what needs to be on there is an indicator for congestion issues, and making it more apparent to the user that they are dropping frames.
- Finally, encoding lag needs a more apparent indicator rather than the text that pops up on the status bar.
All three of these should have very similar indicators on the status bar, and there should ideally be a popup of some sort that occurs so that it pops up more easily and noticeably in the corner of a user's eye while streaming. Like a big balloon indicator.
Additionally, the user should be able to click on the status bar or those balloons to be able to bring up some sort of diagnostic thing (which should be separate from the stats pane/window). This window attempt to diangose the issue right then and there as to what the issue is, where it's coming from from the best estimation, and be able to try to assist the user in resolving them.
We could just be utilizing the status bar so much better.
The status bar probably also needs to be extended to support the multi-streaming case as well if we ever want to implement it. Keep in mind that I'm pretty sure the height of the status bar can be changed to accommodate this if we ever needed.
Transition Dock
Another thing that's not great about the UI is the transition dock. The transition dock kind of sucks. Your idea of adding a toolbar could be a place that we could just entirely move the transition stuff to (if we decide to do a toolbar, not decided on that yet). The Add/Remove buttons should probably be removed and everything should probably be seamlessly implemented in to the drop-down combo box, i.e. add an item to the bottom of the combo box that says "Add transition..." somehow or another rather than having to click the plus button. The remove and configure buttons could probably be put in to the combo box as well. We're able to do it with regular list boxes like with the sources list box, and it should be doable with combo box items similarly I'm pretty sure. I kind of wish transitions didn't need their own dock but at the moment, so the debate over a toolbar to put common stuff like that might be a good one.
Mixer Dock
The mixer is not bad, but could probably use some improvements as well. Mostly I think we're using too much space for items in the mixer; I can't help but wonder if the mixer items are still too bulky. Do we really need the numeric values below the meters when there are clear green/yellow/red indicators of "high volume" zones? Could we make the numeric values optional, and disabled by default perhaps to improve space usage? Can we reduce the amount of room that the mute/properties button take up and reduce their size perhaps? Can we generally just make items on the mixer smaller without eliminating without removing anything other than perhaps the possibly-superfluous numeric values?
Toolbar
A toolbar might be useful, in multiple ways, or a context menu like in https://github.com/obsproject/obs-studio/pull/1838. I think this might need to be a different RFC though, this RFC should probably be changed to "Improve main UI" rather than an all-encompassing "Redesign main UI", because I don't think a full-on redesign is all that necessary. If we discuss too many things in an RFC at once, you sort of risk losing focus and I think it could harm things more than help.
But anyway, those are my thoughts on the matter. Other than those things, I don't personally really have many complaints about the current UI.
Now it's basically the current layout but with much less information in the status bar. It's come around full circle but gotten worse somehow.
Especially the Controls dock, which is now needlessly wider than it needs to be — I think you got rid of it before because it wasted space; now it wastes more.
Unless this change allows plugins to add their own buttons, that's not an improvement. A "Toggle preview" button would be a most welcome addition, but it shouldn't require any additional changes to the Controls dock.
@cg2121 Few thoughts:
-
Rename the Controls dock to Outputs, but otherwise this feels like you took the feedback from obs-studio/#2751 which is great!
-
Could the Sources dock title become a drop down for scene collection like in Streamlabs and the Output dock become a drop down for profile.
-
A pluggable Outputs dock would allow obs-ndi to put it's outputs here.
I am strongly in favor of 2. from @unknowndomain comments, if it's possible to do without being too clunky. Dock widget title bars are finnicky at best to deal with.
After thinking about it, I think we should remove the controls dock and create a dock where third party plugins could add any buttons they want to it. This new dock would be hidden by default. I think the stream/record/replay buttons should be in a permanent place in the UI, as these are the buttons new users are most likely to use.
After thinking about it, I think we should remove the controls dock and create a dock where third party plugins could add any buttons they want to it. This new dock would be hidden by default.
What sort of plugins do you have in mind? What sort of functionality would they expose that couldn't be satisfied by a custom dock, or by plugins providing docks of their own?
I think the stream/record/replay buttons should be in a permanent place in the UI, as these are the buttons new users are most likely to use.
Where would you put them?
This approach no longer aligns with the direction that the project wants to go, and we are moving efforts towards a more iterative design-first approach as part of the project as a whole. As such, a singular, monolithic UI redesign is no longer desired.
Moving to Final Comment Period, with Disposition Close.