Concept of a main screen during a stream

Jhonatanrs10 commented 9 months ago

An option to hide OBS options like Scene Items and Audio or a new screen to be used during a Stream

I would love to see this

(Google Translate: Portuguese to English)

Kounex commented 7 months ago

Yea I like that idea! I will play around with something like this! 😊

Kounex commented 7 months ago

Currently playing around with such a view but smaller screen sizes (like the iPhone SE) are giving me a hard time. How it currently looks like:

Even when making the preview screen very small (you can adjust its size by dragin the bar in the middle) the chat is still too small really to use and I'm already out of space. The scene buttons are not even visible. Seems like I still have to make it scrollable and not everything will be visible in one screen :/

Any suggestions?

Koikaiko commented 7 months ago

Thank you for the great app! I appreciate you so much! Since you are talking about UI design, I would like to be included in the conversation.

I use this app on my iPad. But still, the biggest problem is the scrolling required. For many streamers, they don't have time to scroll while streaming. I think this is even more true for those who download this app for the sake of it.

However, since this app is multi-platform, it would be difficult to create a UI with a complex layout. But I think it is also difficult to make the UI compact without using a responsive UI at all. Also, I think you don't want to do complicated coding again when you are able to create beautifully with simple design now. Therefore, I propose the following ideas

For smaller screens, create an overlay for some buttons, etc.
For larger tablet screens, separate the UI into upper and lower parts, and divide it into main parts and sub parts.

In both cases, it is important to give priority to the importance of information.

Below is a simple rough sketch of the layout written in Xcode.

If you want to be able to change the display size of the preview on a mobile phone, make it about three levels, large, medium, and small, and allow it to change with the tap of a button.
For tablet mode, we prioritize landscape orientation and set the number of rows to three. This makes "Force Tablet Mode" harder to use. Also, the layout of only the preview and Go Live and Recording buttons will be responsive.
There may be some difficulties in adjusting spacing, etc.
If there is anything in the design direction that you don't agree with or that is impossible, please let me know.

And if possible, I would like the preview to be always displayed at 1 fps as a base, like OBS Control Lite, with higher fps as an option.

Thanks for reading!

(Translated by DeepL from Japanese)

↓iPhone SE

↓iPad Pro 11 inch

Koikaiko commented 6 months ago

I made a mistake in the placement relationship between buttons such as Go Live and Preview; Go Live and Recording are less often needed, and Preveiw is more related to Scene, so it should have been placed at the bottom, closer to Preview. Therefore, Go Live, Preview, and Scene should be placed in that order. It should have done so, even more so considering the mobile version. (Translated by DeepL from Japanese)

Kounex commented 6 months ago

Thank you so much! Really appreciate the time and effort you put into your suggestion, including those mockups! I will try those layouts and see how they work in the actual app. I will update this issue once I implemented some version of this so we can see if they are viable!

I am afaraid though that chat is going to remain a challenge as the space which for example the twitch chat needs is quite a lot since it is kind of bloated with those headers, pinned messages etc. but I will give it a shot! :)

Koikaiko commented 6 months ago

I am glad if you would consider it!

About the chat, I myself was mainly streaming on YouTube, so now that I've used the Twitch chat section, I've given it some consideration.

Basically, I think it is enough if I can even see the chat section during the streaming. I don't think there are many opportunities for the streamer to send chats. Therefore, I think there is no problem if the chat input field and the send button at the bottom are hidden in the scrolling area. It would be sufficient to scroll down the entire screen only when you need to send a chat or change a setting. Therefore, I don't think it is necessary for the chat field to be displayed all the way to the bottom.

Also, if you need the platform and username selection part, I don't know if it is possible, but it would be better if the Add button could be embedded at the bottom in the username drop-down, and the four parts (platform, username, Edit, and Delete) could be side by side in a row, but that may be difficult. But it would be possible if the platform display were only the platform icon. This may also be difficult, though.

On another note, I personally hope that it will eventually be possible to preview staggered modes like OBS Control Lite. In that case, two smaller previews would be placed side by side in the original Preview area, aligned either top or bottom. Then place the name of the scene, etc. in each of the extra lower areas. If you are interested, please consider this.

Currently, I think this app is missing a lot of people who would have used it because of the layout of the UI, so if this is improved, I think far more people will use it than before. Of course, I think translations are necessary to get more people to use it.

Looking forward to it! Good luck!

(Translated from Japanese by DeepL)

Kounex / obs_blade

Concept of a main screen during a stream #75