Updating the UI: Main Screen v2 + Dark Theme

[DDR]

Hello, everyone. With the new UI almost finished here, I've had time to go back and revisit the main screen design from last year. Updating the UI: Main Screen Edition) was one of the first things that I designed. I'm not satisfied with it any more, I think we can do better.



The new screen is much closer to the industry standard of "two bars, top and bottom". It is also light-on-dark, instead of the old dark-on-light colour scheme we had been running with before.



There doesn't seem to be any major difference in readability between the dark and the light version of the UI, although living in Vancouver I haven't been able to test in direct sunlight yet.

Each control, starting from top-left, works as follows:

• Menu - Opens a drop-down list of all the screens of the camera, to access detailed functionality not on the main screen. Filterable by text, respecting most synonyms.
• Audio levels monitor - Tap to open audio trigger configuration. Also shows audio trigger if set up. (Not shown.)
• Battery - Tap to open power settings. Will turn red at 15% over save-and-power-down limit, will pulse red at 5% unless plugged in.
• Save Media - Tap to open the file settings screen, to configure where files are saved to.
• Play / Save - Tap to open an analogue of the current play and save screen. Select which region(s) of RAM to save to file.
• Record - Start/stop a recording. Background will show recorded video in RAM as a motion heatmap in the future as pictured, if possible, as well as showing segments during segmented record mode.
• The Picture In The Middle - Pinch to zoom.
• Resolution - Tap to open the window to set resolution, framerate, and exposure.
• Exposure - Tap to bring up the exposure slider, as on the current main screen, and to switch between shutter angle, percent, and duration readout.
• Spectrogram - Tap to bring up white balance screen on colour models. The spectrogram itself will be added in the future, if possible. Until then, it will be a placeholder button reading "white balance".
• Black Cal - Tap to perform black calibration, as on the current main screen.
• Zebra Stripes - Highlight white, as on the current main screen.
• Focus Peaking - Highlight areas of high contrast, as on the current main screen. Tap the red square to select peaking colour. (Square will show new colour.)

I have attached a picture of the mockup on the camera, to give a sense of scale. In person, the colours generally darker, more saturated, and less aggressively blue. (But my thumb looks great!)

A lower-profile version is also under consideration. It gives 40px more vertical resolution to the picture, taking the total vertical resolution from 360px to 400px. (The screen itself is 480px tall by 800px wide.)



While this actually does work fine, it does squish the spectrogram and some of the labelling around play/save is lost. I prefer the chunkier UI, as it's a bit easier to read and a bit easier to tap. If we do decide to use this thinner UI, we would probably make a large spectrogram an overlay on the main screen, toggled by the smaller spectrogram button.

As always, feedback is welcome! For example, would you prefer the denser, lower-profile bars instead of the chunkier ones? Do you prefer the sidebar style of the first iteration, as it matches up with the Chronos 1.4's aspect max-resolution ratio better? What do you think of the dark colour-scheme?

[BiduleOhm]

I love the dark theme, very good idea

I prefer the low profile UI (the first thing I thought of when I saw the first image of the post is "there's some space lost, it would be better if the UI was slimmer").

Maybe add an option to make the bars disappear and re-appear when swiping (like on the Android OS for example).

[NiNeff]

I Like the new design!
A few quick thoughts on it:

• Top and bottom bars usually require 2 hands to operate. Not a problem for me but might be for some usecases.
• Please add the ability to select a color theme (light / dark)
• bigger Buttons are usually a good thing, but they should not intrude on the actual picture. There are a few obvious answers to this dilemma:
• Hide the UI if not needed
• Provide the most needed or customizeable buttons on the main screen and hide others in menues
• provide hardware buttons instead of or in addition to software ones (like the record button, use of the encoder knob where applicable etc)
• YAY! Zoom!

[Buddlich]

The dark theme looks awesome! Also the histogram is a very good thing, that I am missing right now!!

[jasonfish]

I like the dark theme, but not a fan of the top-bottom bars taking up vertical space. The image should be the primary object.

Maybe make the toolbars translucent so the image is visible, full-screen, behind them (see new iOS camera app)? Also allow users to "pin" one or both toolbars on screen, else they [fade to 50%? fade to 0%? auto-hide? compress down to one text line each?] until the next touch event. Personally I never really want any data on the screen while recording, it's not useful in that moment, should be hidden until needed.

[DDR]

Thanks for the feedback, everyone!

Maybe add an option to make the bars disappear and re-appear when swiping (like on the Android OS for example).

Maybe make the toolbars translucent so the image is visible, full-screen, behind them (see new iOS camera app)? Also allow users to "pin" one or both toolbars on screen, else they [fade to 50%? fade to 0%? auto-hide? compress down to one text line each?] until the next touch event. Personally I never really want any data on the screen while recording, it's not useful in that moment, should be hidden until needed.

• bigger Buttons are usually a good thing, but they should not intrude on the actual picture. There are a few obvious answers to this dilemma:
• Hide the UI if not needed
• Provide the most needed or customizeable buttons on the main screen and hide others in menues
• provide hardware buttons instead of or in addition to software ones (like the record button, use of the encoder knob where applicable etc)

Having a tap on the video image toggle full-screen could work well. I personally find swipe and most multitouch gestures quite hard to discover, since there's no good way to visually indicate what gesture will have the desired effect. Pinch to zoom and drag to move are the only exceptions, since they're reasonably intuitive and very common.

I know in the current UI, we had one internal release where the UI auto-hid after a few seconds of inactivity. It never made it to full release, because the auto-hiding had to be disabled because there were a lot of complaints about it. I've also had a lot of requests for some sort of a countdown timer so you know when you run out of memory, so I think that should probably be always-active.

Unfortunately, the UI has to be a bit of a jack of all trades I think. It will end up getting used by students, researchers, enthusiasts, and (hopefully) by folk in the film and television industry. This represents a very wide skill range! What's suitable for a beginner student - detailed, explicit controls - is not suitable for an expert enthusiast who may want to trade explicitness for density and ease of access to many functions.

I think a good solution would be to have the more explicit UI with the full text by default, but be able to fully configure the main screen in terms of geometry and content. The problem is that this is actually quite difficult to program in, since I think we would want a graphical editor with drag and drop, and all that sort of nice interaction. I'm certainly up for putting such a thing in, but I'd like to get an initial release out the door first.

• provide hardware buttons instead of or in addition to software ones (like the record button, use of the encoder knob where applicable etc)

In the current version of the interface, there's a difference between the physical record button and the touch-screen one. I've unified them in this design, which I hope will work because the current situation is rather confusing. The jog wheel can control everything in the new design too, so you shouldn't ever actually need to use the touch-screen. (I'd love to add more hardware buttons - but that adds more cost and complexity.)

• Please add the ability to select a color theme (light / dark)

I'd like to. I think it should be possible without too much trouble, with the current tech stack. You're not the only person to request it, and I think the light version works quite a bit better in really well-lit environments. 🙂

[jasonfish]

You make decent points. I guess the low-profile version, if we need to go with always-visible to please the masses, would be preferable.

And I'd skip the drag-drop customization idea. Just a huge can of worms, especially when trying to provide tech support.

[BiduleOhm]

I agree with jasonfish, I don't think either that the drag to configure feature is a good idea here (usually it's very complex and time consuming to implement, and it introduces a lot of bugs) as we don't really need that much customization. But something configurable like enable/disable auto hide, auto hide delay, menu size: large/small, etc... would be perfectly adequate and far easier to implement

I personally find swipe and most multitouch gestures quite hard to discover, since there's no good way to visually indicate what gesture will have the desired effect. Pinch to zoom and drag to move are the only exceptions, since they're reasonably intuitive and very common.

I'm not a fan of hard to discover features either but since Android does it and is very widespread I presumed people already know the swipe down thing, but I can be wrong.

[NiNeff]

I agree with all of you here.
An easier solution to the configurable menu other than drag and drop would be to simply be able to enable / disable some elements via checkboxes in a configuration list. Or even more hardcore use a config file so only the true nerds can use it

[DDR]

I'm not a fan of hard to discover features either but since Android does it and is very widespread I presumed people already know the swipe down thing, but I can be wrong.

Hm. You're right, I should probably put it in there if I can. I don't think it'll hurt anything, and having things respond the way you're used to is nice. It's also the way the Blackmagic camera we have here works, so some might be used to it. I don't like the feel their implementation though, tbh, so I'll have to figure out why and see if we can do better.

As for the customisation, I think having disable/enable and the menu sizes is a very good start. I'll put that in the initial version.

[nik282000]

That looks awesome, I really appreciate the addition of a histogram to the live view.

[Fyodor]

Regarding gestures:

They can be very handy. But often aren't intuitive, and nobody reads the manual.

Would it be possible to add a "hint wheel" (no idea how you would call it...)? What I mean is, if you touch the screen and move the touch point a few pixels, so it is recignised as a movement, you could show a wheel with 4 or 8 sections. Each section would show an icon representing what happens when you swipe in that direction. I use SolidWorks in my profession, they use that technique with the mouse. Hold the right mouse button and move the mouse, and it will appear. These sections also can be custom programmed. Sample picture attached.

[DDR]

Regarding gestures:

They can be very handy. But often aren't intuitive, and nobody reads the manual.

Would it be possible to add a "hint wheel" (no idea how you would call it...)?

I toyed around with a design for one a while back, but it never gained any serious traction.



I do think it would be much better off with the rest of the UI as it stands now, instead of on it's own as it was.

I had a bit of a re-read through Pie Menus: A 30 Year Retrospective, which is a wonderful dive into the subject. Pie menus still pretty uncommon, especially on cameras like the Chronos, so I'm hesitant to put them in. But on the other hand, they're perfect for the task.

[Fyodor]

I would like it.

[JamesB]

I believe the current design you showed is excellent and a vast improvement that gives the frame much needed space. Very RED like and useful without digging  into menus. Would love to have it soon including the latest peaking fix so I can use my monitor with it again.