For newcomers and even older users Synfig might be a bit complex to use and feel complicated.
There must be many ways it could be reworked to feel less intimidating and easier to use, be it UI reworks or the way things work and are done.
This topic here is for brainstorming around this. Just pour out your ideas on how you think Synfig could be easier to use, never mind if its realistic changes or over the top.
Later on we can use all these ideas to figure out what exactly could be done for a more user friendly Synfig.
As good examples we could look at Blender which is right now overhauling their UI to be more user friendly in their 2.5 version. Gimp UI brainstorm is a blog where people brainstorm around Gimp with a lot of great looking mockups etc.
Keyboard shortcuts in the menus and hoover balloons.
Less digits in parameter decimals. Hard to see and edit right now. Discussed here.
Merge all settings panels; Toolbox>File>Input Devices, Toolbox>File>Setup & Canvas>File>Options.
Move menus out of caret. They are hard to find and hard to reach. Have a look at Gimp which have both caret and window menus. Could be optional to have window menus or not.
Now this one looks very interesting, maybe a set of colors for the whole UI in White-Blue pretty much like the homepage of Synfig, i would definitely vote for this.
In my opinion, redesign the UI is not just draw the initial interface. If everything that is now available is not exposed to the user in the initial layout, it must be described how is exposed in the new GUI and what’s the click/key path to reach each feature.
For example in the proposed layout I miss the keyframes panel, the navigator panel, and if the color and gradient dialogs are integrated. Please don’t take this as a negative, I’m just doing observations.
Also it is important that you know the current GUI structure. Not the visible parts but the internal relationships and which application parameters are global or per document. This would help to decide where to place the interface for each data to make accessible. Because some of the interface can be exposed or no in the same shared area when the user has a panel or other panel focused.
Finally, move the panels around and integrate them in a single window is now everything. There are lot of bad habits of Synfig that annoys the users and might be changed:
-Contextual menu for actions. Are they annoying?
-Should the Value Node interface be improved (like the nodes in blender)?
-The canvas selection in the canvas parameter can be improved?
-The keyframe widget can be improved?
-The quality preview system can be improved?
-The preview window can be improved?
-The interface keyboard/mouse shortcuts can be improved?
-Are there missing features that would make the UI easier?
-…
Of course. I just felt that one is for discussing a certain feature (Fills instead of blend modes) but it went broader and came to be about Synfig GUI in general. I started this thread to make the discussion more open and focused on usability. It might be hard to find the discussion if it continues inside another thread with some other original topic.
I think we can be broader in this thread, just ventilate what we think would improve Synfig without having to figure out how it should be implemented. Let us wait with that until a later phase. Ideas first, implementation in reality later.
Maybe you can contact Inkscape devs - Although they’re making static vector graphic program there should be no problem for them to help implement certain features into Synfig (fills, combining 2 objects into one, and other things that are already in inkscape, but not in Synfig).
I’ve always have though Synfig needs work on it’s “Vector” processing features. Right now the only things that are pure vector processing are valuenode combinations, interpolation (ie. waypoints) and exported/linked values.
Unluckily Synfig tends to “flatten” everything into a raster layers a bit too soon, in my oppinion. Working with layers is fine when creating effects like blurs, etc. Not so much when doing vector-like things, like cutting shapes, glueing them together, transforms, etc. There are raster-based equivalents in some cases, but usually require more processing power or they aren’t as useful/flexible.
I think that valuenodes could become a lot more useful if they were to “steal” some of the functionality away from layers. For example, replace Outline/Region layers with generic Draw layer that can render a list (list valuenode) of shapes (shape valuenode) into Canvas. Since objects are valuenodes, it becomes easy to export and reuse (link) them, for example. Specifying fills/outlines is just a matter of placing a valuenode in the right place.
The toolset will need to be adapted to work with valuenodes. Working with them directly is kinda fun, but timeconsuming and very complicated. But the different tools could possibly create/link/manipulate them, doing all the repetitive work instead of the user.
The amount of work to implement all that is kinda scary though.
Hey, someone added only a hundred lines of coding onto the latest Linux kernel and made it three times faster than it originally was! Little by little is all we need. A feature a day makes life easier, but we’ll get to it eventually.
I’m done with the mock up.
Okay, here’s the thing: the biggest problem with most productive softwares like Maya and GIMP, no matter how powerful, is that all the features are lying in in front of our face giving us very little workspace to work on. In short: the tools take up screen. Also, floating panels are too much of a distraction when working on art. Blender 2.5 was able to counter this with having shortcuts to switch between views, adjusting and customizing the workspace, and giving us a minimalistic environment to work on so we can work fast and focus on the details. A simple method of hiding unwanted docked-panels and calling them in at the click of a button makes life hella easier.
This mockup mostly focuses on the design rather an much UI changes (90% of the buttons stay where they are currently). The Toolbox is combined with the Canvas and is shortened to give more room for work. The Interpolation dropdown menu is on the canvas layer itself. Almost every tab/panel can be rearranged in the sidebar, just like in GIMP, and can be easily hidden by clicking “Hide Side-Panels”, similar to that in Photoshop and Flash CS4.
The Layers panel now has a button “Lock Layer”. Besides the Interpolation dropdown menu there’s another dropdown for selecting what Canvas you’re working. At the bottom of the Canvas there’s another button called “Show Parameters” which will, as it says, bring up the Parameters box which also contains Keyframes, Metadata, Nodes, etc. and can be hidden yet again.
Anywhos, the design mostly focuses on the software’s simplicity, minimalistic interface and just “looking fantastic”. XD The reason being I have a very small monitor screen. -.-"
What’s not in the mock up:
The Default Blending Mode thingy. I just didn’t know where to place it. =\ Was thinking it should be in the Tool Options or above the Layers itself.
OK. Some more detailed thoughts to the GUI from myself. At first there are some things that nobody really needs. (at least i never needed them)
The caret Menu serves no real purpose. It could be easily (speaking from the view of the user and not the programmer) integrated into the file menu.
The buttons for displaying and hiding Ducks taking much place. Most of the time you don’t need them. Make that one Button with a dropdown menu with checkboxes.
Same would go for lowres. You need it from time to time. But after you configured it, you will most likely not change it for a long time.
Combine it together with the quality option, since both are related, into another dropdown button.
Grid and onion skin could be handled the same way.
Now some rearrangements of existing features.
Did anyone ever use the preview on the right side? Me did, to find out that i don’t need it.
The layers-dialog can’t be high enough. Position it in a way that you can use it at mostly full height.
The tools should be a own horizontal bar. As you can see, you still waste a lot of space if it is on the left, even if it is smaller. Would also fix the “composite” problem.
Show Parameters should be a slider (dragable line) instead, that automatically collapses or expands if you drag it far enough.
Some additional things:
Record, forward, backward should be larger. At least as long there are no usable shortcuts for them.
Tool options could be dropdown menus as well, eliminating one dialog.
Terms:
dropdown button: A button consisting of two parts. The bigger left part is a toggle-button for the last selected entry. The right part opens a dropdown menu with more options. Last selected/changes option takes place in left button part.
NOOOOOOOOOOOOOOOO, not horizontal! O_O LCD’s are widescreen these days and it would suck to have a horizontal toolbar piling up at the top and bottom…
I just experimented with the netbeans gui, which is a very great and extremly customizable. I tried in a fast way to mimick the look of synfig. (Note: I used fullscreen mode, since this is one advantages of MDI-Interfaces)
At first we have the default layout (Projects = Layers, Properties = Properties, …). Note that i stretched the layer/projects dialog to its max.
With shorter layer dialog, giving more space for the timeline:
Note the little button on the top right (mouse and tooltip). It allows you to set the drawingwindow to full size and back.
With maximized Canvas:
Note that all dialogs are still accessible if you hoover the mouse of one of this buttons, its dialog will popup over the canvas. It closes as soon another object get’s the focus:
Aren’t there similar free gui-toolkits available for C/C++?
You can compare it to a horizontal SplitPane. Only difference is, that it automatically minimizes (jumps to bottom) if the space of the bottom area (timeline) isn’t large enough to be usefull in any way. If the user drags the minimized “line” up, than it shoul respect its choice.
To make things faster for the user that just want to maximize or minimize it, the should be a button toggle button for the beginners, which switches between maximized and minimized (like in my first proposal). Experienced users also could use double click or something else on the whole header of the time line to reach the same goal.
That would be nice, but have a quick look at blender. For simple colors it uses just a popup like dialog. For gradients it uses the properties window, which is comparable to your dialog proposal. Meaning simple colors should be set fast by a popup, while gradients usualy take a to long time to finish, which leads to errors accidently closing a popup. Maybe it could also be implemented as a popup but the user must a protection against loosing focus from the gradient-editor-popup.
niabot: There are currently plans of using glade as a user interface designer for Synfig Studio. Eldruin started working on that task, but I hear he is really busy right now. I really hope that he will eventually be able to continue.
As for myself, I’ll probably end up working on the ducks and tools system, as well as actions, since that’s where I’ve had the most experience.
I don’t tink that glade is capable to produce dialog based MDI-Structures. It’s afaik just a tool to create static dialogs. What synfig need is a good MDI framework, that is even easy to use for programmers.
First: Inkscape’s interface is based on vector editing along with some bitmap management. This seems to resemble Synfig Studio to a great degree.
Second: Having a similar interface between applications with similar goals (2D vector editor vs. 2D vector animation editor) ensures a smoother transition from one app to another.
Third: Inkscape is OpenSource. While it’s code may not necessarily be ported to Synfig Studio, similar tools could have very similar interfaces.
Fourth: Why re-invent the wheel? If a tool is popular on another OpenSource application, give them a nod to say: “Good show!” and copy their ideas. After all, imitation shows one’s appreciation. Inkscape and Synfig Studio are both top-notch applications.
Fifth: Since you are asking for interface ideas, then you’re obviously in a place where you are not static in your ideas. Since you’re flexible at this time, supporting similar interface concepts with a similar application isn’t much of a leap.
[size=150]interface ideas:[/size]
Inkscape has guidelines that can be dragged into the canvas from the rulerbars. Varying degrees of “snap” can be applied to each project, according to the need. When I first began working with Synfig Studio, my first inclination was to try to pull a guide-line out of the rulers.
Zooming in and out using the Ctrl key & mouse wheel.
Shifting left and right in the image by using Shift & mouse wheel.
Moving up and down in the image using simply the mouse wheel.
Yes: I’ll admit that these interface ideas are a blatant rip-off from Inkscape. But if Synfig Studio shared these interface standards, one would feel more at home with Inkscape if one’s first experience is with Synfig Studio, and vice versa.
Edit: the mouse movements described above are the same in OpenOffice.org.
A feature a day makes life easier, but we’ll get to it eventually.
