Natron UI Project
Natron is being developed at an incredible speed. Everyday, new features are added and bugs are fixed.
But the UI (user interface), however functional, is in need of some special love to get in on par with it’s commercial counterparts. It is one of the first things someone will evaluate when trying out Natron. It could make the difference between that person sticking to Natron or dismissing it.
UI design and implementation represents a colossal amount of work. That is the reason I am creating this thread, to alleviate the workload of the core devs. A lot of you want to improve Natron and so do I. Here is your chance to help. This is a call for help!
Cahier des charges (specifications)
Before we can design a good interface, we need to understand what the makes a good interface.
Do we want a complex interface where all functionality is available through buttons that are crammed all over the interface? Or do we, on the contrary, want a simple interface with only the essentials and where less used features are a bit more hidden in menus?
Here is what I think, makes up a good interface. Everyone may not agree with this, and I strongly encourage constructive feedback! I will update this post with feedback I get.
What makes a good interface?
Intuitive: A UI should be as intuitive as possible without compromising usability. This means having a lightweight interface with icons and terms people are familiar with.
Modular: The user should be able to decide how to arrange his workspace, it should not be imposed by the software or software developers.
Uniform: Behavior and style should be the same throughout the whole software. Similar functionality in different parts of the interface should work the same and use the same shortcuts.
Good looking when you use a program for a prolonged period of time, you want it to be easy on the eye and pleasant to use. Space and padding can greatly aid in guiding the user to the important parts of the interface and not overwhelm him.
For the last couple of days I have been working hard at making a mock-up for an eventual UI. The goal was to simplify the user interface and making it look good. I would appreciate any constructive critique.
Please, I encourage everyone to post his thoughts, ideas, mock-ups, concept arts, etc. Even if they concern only a small part of the interface (e.g. redesigned slider, better name for some functionality, …). I will try to update this post to reflect the feedback I get.
The goal with this design was to simplify the user interface. Move all the more advanced functionality and controls in context menus, shortcuts, etc. Details may be missing, but it is the general concept that counts.
Like proposed in this issue I would start by splitting of the timeline into its own panel to make the interface more modular. Edit: It was proposed to centre the playback controls and put them above the timeline instead of below.
Simplify the viewer. The current viewer is a mess. Making it slick and minimalistic improves the interface a lot. More advanced functionality could be available through context menus.
Nodes could have color-coded input / outputs. In this mock-up I used squares for input, circles for output and triangles for mask inputs. Like explained to Jean-Christophe via mail, there could be a collapsed and expanded state for nodes. One favouring compactness, the other conveying more information. There could also be a shortcut that could hide / unhide the in- and output names for when you are not yet familiar with the color and shapes.
Node settings is the part that needs the most work in my opinion. The active node should always be on top. Controls could be grouped, with some groups initially collapsed to make the interface less dense. Some padding and color nuances can also help differentiate between nodes.
You can find the .svg version of my mock-up here, you can modify it using Inkscape or Illustrator. Feel free to use, abuse, modify and improve on it!
Sergusster’s Viewer Widget
The user could expose node properties from different nodes to have access to them from the viewer. The properties would be displayed in a semitransparent window over the viewer. This would give you the ability to tweak your nodes without leaving the fullscreen viewer and without the need to constantly scroll up and down in the node properties.
Olear has taken the initiative to create a repository for Natron themes. He’s working on improving the current style until a more in depth redesign. Any help with that is welcome and if you create a stylesheet for Natron, make sure to add it to his repo.
Color Selector Project
Natron is going to get it’s own color selector, more powerful and feature complete than the default OS color selectors.
Go to this post to see the mock-ups that Jean-Christophe made. They have been approved and development started already. Currently you can check out the progress here: https://github.com/azerupi/NatronColorSelector
Now it’s your turn, let’s see what this community can come up with!