search

voc / voctomix

Full-HD Software Live-Video-Mixer in python
https://c3voc.de/
MIT License
573 stars 104 forks source link

More intuitive UI: VOC2GUI 2.0 #274

Open SilvanVerhoeven opened 4 years ago

SilvanVerhoeven commented 4 years ago

After the usage of VOC2GUI at 36c3, some valuable feedback was collected to improve the first UI version. The following mock-up represents an UI which aims to make VOC2GUI more intuitive to beginners while keeping flexibility for advanced users as well as preventing unlucky cuts even better.

Main features:

V2M-UIv2 1 V2M-UIv2 1_Offline

fightling commented 4 years ago

I like several things about this UI concept.

Many interesting ideas. thx Silvan

derchrisuk commented 4 years ago

Looks nice. But the Live/Offline needs much better visibility than just a small toggle in the upper right corner, imho.

SilvanVerhoeven commented 4 years ago

@derchrisuk Thanks for your feedback! The video output feed has a red bar if the stream is offline and a green one if the output is live. How else could the visibility be improved? The toggle itself is meant to be so small since one doesn't need it most of the time

fightling commented 4 years ago

Looking at details the preset previews could be entitled together too like "Sources" but with "Presets". Then you wouldn't have to add "Preset" to every name within the previews' titles. Instead you might add modifiers to the titles.

I also don't like the "Save Preset" button because I don't get what I could expect when I press it. I think we don't need it. Instead something like Ctrl+Mouse or Alt+Shit+# (like it says) would be much easier.

SilvanVerhoeven commented 4 years ago

Will add the "Preset" header as you proposed. The "Preset"-suffix is thought to be a recommendation by the system, the admin can set any name he wants tho. Modifiers like Edit buttons? Would give this option on a right click, since it is not really a common use case to edit the titles (the right click for more options / edit should be a pattern in the software).

Could there a better caption for the Save-Preset-Button? I'd rather add an explaining tooltip instead of removing the button, since there definitely are people who want to use a mouse instead of remembering short cuts. Maybe the Button could be in a group called "Preview" instead of "Presets" to make clear, that it saves a preview as preset? In general, I believe, that the function of this button is easy enough to understand after a one-time-explanation (or tooltip)

derpeter commented 4 years ago

For me this UI approach has some problems which you can find in many Video / VJ tools. There is no optical difference between UI elements that show the operator in an intuitive way how elements belong together and which are important and which not.

Besides that the click / touch ways are very long as UX elements are distributed instead of grouped. Until now we tried to reach for simplicity and intuitive in contrast to what most other tools provide. We inherited this from dvswitch which followed the same idea.

Needless to say that things like the preview are a wanted feature for a long time i strongly believe we need to keep the complexity low for the operator and we should include the preview in a way that is intuitive for the operator what he is looking at.

The discussion so far mixes new feature (preview etc) with design. We should separate that as all the feature ware already on the roadmap and are independent from a new design.

fightling commented 4 years ago

The discussion so far mixes new feature (preview etc) with design. We should separate that as all the feature ware already on the roadmap and are independent from a new design.

True, but we also need a UI concept that leads us somewhere (esp. the composition preview which changes the layout completely). But you're right: As we start to prototype or implement the underlying features, we have to separate them.

derpeter commented 4 years ago

The discussion so far mixes new feature (preview etc) with design. We should separate that as all the feature ware already on the roadmap and are independent from a new design.

True, but we also need a UI concept that leads us somewhere (esp. the composition preview which changes the layout completely). But you're right: As we start to prototype or implement the underlying features, we have to separate them.

I would argue that we should define the "some where" before we put much work in it. But as usual: its just my opinion / experience and this is free software so it should not stop anybody from doing what they think is best.

SilvanVerhoeven commented 4 years ago

@derpeter Thanks for the feedback!

preview and pgm have the same size color layout etc

A) Could you please clarify what the "pgm" is? How and why should the preview window be layouted / sized compared to the pgm, in your opinion?

Buttons and elements that display things have the same color, design and layout

B) Could you give an example for such a button and element? In which ways and why should buttons and "elements, that display things" differ from each other?

we miss the preview of the stream

C) The yellow themed preview window on the left shows what will go to the stream once "Cut" or "Transition" is clicked. What else do you mean with "preview of the stream"? The only thing I can think of at the moment that is NOT visible in the current UI is the output when the stream is offline (so one doesn't see the pause screen). This is because I think the video that will go live once the stream is online again is more relevant than the pause screen.

Besides that the click / touch ways are very long as UX elements are distributed instead of grouped.

D) This is a fair point! I tried to keep the distances in mind and make the movements feel somewhat balanced, but due to the direct source selection, the movements have to be larger. Though: Most Experts probably favor hotkeys and barely use the mouse. For Beginners on the other hand, the extra half second one needs for the mouse movement might mean to be able to think longer of the current step, which helps to reduce errors. Plus, some smart behaviour of the software and the Presets minimize mouse movements.

we should include the preview in a way that is intuitive for the operator what he is looking at

E) What is currently unintuitive about the preview (the big screen on the left)? How does the operator does not understand what he is looking at? How could the complexity be lowered?

channel previews and resulting compositions have the same size and same orientation / position in the UI

F) As stated earlier in this thread, I'd add another group title "Presets" above the Presets (like the one above sources). Is this sufficient? If not, how should it be done?

derpeter commented 4 years ago

Hello,

a) PGM (Programm) is what in "professional" video mixers is the main out. In vocotomix it currently is one big preview image in center which goes out to the main mix and the stream mix.

b) In your screenshot (or mocup, i cant tell) e.g. video box borders, the gray boxes at the bottom and all buttons are flat design, same boarders same colors no highlight. It is (at least for me) not intuitive what is an element i can interact with and whats not.

c) by preview of the stream i mean a preview of the stream. Whats in you yellow box is the preview of what will be shown after a take / transition. This is usually called preview or prev. As voctomix is more than normal video mixers we produce a "second pgm" which is like the main pgm but e.g. is blinded in the breaks between the talks for the privacy of the people in the room. A preview for this second PGM seems to be missing. We didn't have the in the past but it turned out in the since we have it that it is very useful to assure a correct stream.

d) hotkeys a fine, we are also working to integrate hardware panel like elgato stream deck. But especial for that it very useful to have a somehow structed button box on the screen that can be aimed by the hardware / hotkeys. As our UI is dynamic with the number of sources and other options it es very helpfull for non professionals if layout is always more or less similar regarding the position of the buttons.

e) for me it es very unintutive to have same sized boxes with (the to video container at the top and the 8 at the bottom which only can be understood by the text above them. there is no clear Main or are recognizable order of the bottom ones. This is very similar to many "professionell" video mixer and one of the reasons (at least for me) to work on an alternative.

f) i dont understand the relation between the UI issue (which is the same as in e) ) and your question. Presets are fine can be useful but that has nothing todo with screen layouts.

SilvanVerhoeven commented 4 years ago

Hello again,

a) Thanks for the clarification of PGM. I can only assume that you wish the PGM to be bigger and more "in focus"? I would strongly not recommend such a layout, since, for the video mixer, it is more important to see what is about to go live than what is currently live. Layouting both equally is reasonable to me, plus it takes the fewest vertical space. At all, I'd make the preview even larger.

c) When it comes to the "real" PGM Preview, showing the second PGM if main PGM is not live, I am uncertain how important this is to the video mixer. Video mixers were never instructed to check the pause screen, so even if there were failures, video mixers would not have been trained to deal with them. To a video mixer, it is more important to know what is going to be live, something that is not shown by the current software at all. Following compromise: The default displayed in when being "not live" is the main PGM (as mocked up above), but there is a button to toggle the "real" PGM (showing the second PGM). Alternatively, a Tab for people checking the real PGM could be implemented.

b) Isn't the current design flat as well? Also, flat design is now well adopted by every major software, because users have learned to deal with it. Why is this design suddenly problematic?

d) I didn't know about that use case, thanks for bringing it up! Requesting a button box would mean to disallow direct source selection, which is, to me, a major advantage of this UI. If it's just about the proper mapping of UI to Elgato stream deck, we could go with the current layout and check if people can handle it. Another solution were a Tab for people using stream decks (which then offers a completely different UI with such a button box).

e) I think we've come down to the underlying differences of our understandings of what is important for the video mixer. My understanding: Most important for the video mixer is what he can see. It's only secondary to know whether this is camera 2 or preset side-by-side. The mixer just has to see all the available options and select the best fitting one. That's why I never aimed to give the 8 boxes below a hierarchy. That being said, I'd like to know what you think would be a proper order or hierarchy for all these boxes. Could you sketch out or describe a little example?

Kunsi commented 2 months ago

Maybe #320 implements some of the requested changes (still no mix-preview though).