Pages

Sunday, January 17, 2010

Keep It Simple, Stupid

Over the past year or so I've been more directly involved in Blender development, focusing on the user interface side of things. In october last year I wrote a PDF outlining the main points of what was to become Blender 2.5.

Fortunately, many of these things have been implemented, thanks to the awesome effort of Blender developers such as Ton Roosendaal, Brecht Van Lommel, Matt Ebb and Campbell Barton. From a UI perspective, the coolest new things in 2.5 are:

Clean, logical Properties (More logical layouts makes it easier to find things) 
Live Operator tweaking (What you see is what you get) 
Updated look and feel (UI controls finally don't look like something out of the 80's) 
Continuous Grab (Infinite canvas for manipulating objects and controls) 
Live updates everywhere (Change any parameter and watch the results happen immediately) 
Search (Super fast way to access any tool) 
Python generated (makes UI editing a breeze, enables seamless integration with plugins) 

Already I think Blender has improved immensely over the past year, with proper attention finally being directed towards improving user interaction. Like anything, the UI in 2.5 isn't perfect though, so I've started to ponder over ways to improve it even further.

Looking at 2.5 as it is now, one of the main issues is dealing with information overload. Blender has a very long history dating back to 1995, and over the past 15 years, features and functionality have gradually been added. What was once a simple tool is now a mammoth in terms of the wealth of options and controls visible at any one time. In fact the default layout in 2.5 contains 102 controls (menus, buttons, number fields) in the view.



The problem with this sort of complexity is that it causes extra visual overhead for the user. All of the hundreds of controls makes the UI busy, complicated and distracting. You'll want to focus on your content, your models, your renders, your animation, not a huge amount of UI.

Now, removing items from the UI is not an easy task. It's much easier to keep adding stuff than to cut back, and getting rid of complexity often means rethinking, reimplementation. I think it is possible to make a Blender's UI simple, while keeping all the advanced features and speed of interaction. It's not easy, but with careful consideration it can be done. Watch Bay Raitt who did extensive modeling on The Lord of the Rings (including Golumn!) use Mirai here.

Notice the sparseness of the UI. In fact a lot of the time there is no UI. Inspired by this, I've started to map out a series of mockups of Blender, with a minimalist interface, removing unneeded complexity, with simpler graphic design that steals less attention away from the content.

Below is an example of a super simplified version of the Blender UI, with further explanations beneath it.








16 comments:

  1. Very nice, are some of the radial buttons intended to be dynamically created by recent search queries?.. this is something I'd love to see.

    It would be interesting to test this concept in 2.5x (combine search results with most frequently used items)

    Of course I may just be miss-understanding your mock-up.

    Pappy

    ReplyDelete
  2. Well, I think you're dealing with the right problem and the wrong solution (I don't know, I'm a child with no experience or education on the subject, but I'll say my opinion anyway :-P)

    The 2.5 interface is definitively an improvement in almost every way, but here is what i think is missing:

    Grouping! In 2.49 the buttons are neatly grouped, and each of the groups has a recognizeable layout. You don't have to look what the text says, you can easily recognize the shapes. You can even scale the interface all the way down, and still use it. At the same time, the layout is compact, and scales nicely - no need for a lot of mouse movement.

    Clearer groups would make it easier, for me at least, to get an overview of the entire UI. (eg. in 2.49 the most important render settings are right next to the big render button, and they are all grouped together in a neat square - it's easy to see which group they belong to, and the layout remains the same when it is scaled up)

    -TobiasDn (on blenderartists)

    ReplyDelete
  3. Hi Tobias.
    Thanks for feedback. The main issue with the layouts in 2.4x is that they were simply not logical. Case in point is the item you are mentioning. The Shadow/Pano/SSS buttons next to the render button also applies to the ANIM button which is in a completely different panel, yet they pretend to only apply to Render (image).

    Because the placements of buttons were arbitrary, you couldn't rely on the placement to make assumptions about the functionality. I think there is something to be said for dashboard style UI's a la Reason (http://vancityguy.files.wordpress.com/2008/12/propellerhead_reason4_thor.jpg) where the placement of colors are very non-uniform. This makes placements easier/faster to remember. I think this is your point. It's valid, but IMO that only works up to a point.

    Once you have more than just a few controls it becomes messy, and because of the arbitrary positions of controls, it's very hard to scan down a list to find what you are looking for.

    Now, one thing that would simplify Blender a great deal is to simple have fewer controls in total, but that's not easy. It requires features to be implemented in a more thoughtful way.

    ReplyDelete
  4. Hi William
    Thanks for taking the time to answer ;-)

    Now that I look at this Reason UI, which is neatly grouped and yet a bit messy, I think what's putting me of all the empty space, even between things that have
    something to do with eachother.

    There is much more empty space in 2.5 than in 2.49, especially in places with radio buttons.

    Take a look at this: http://upload.wikimedia.org/wikipedia/en/d/d1/Modo202Bugatti_MartinAlmstrom.png

    I like the look of that UI, and its very easy to get an overview of everything. The tools are neatly
    grouped in a box of a slightly different colour, so are the lists - the entire UI...
    except when you look to the lower left:

    "Transform is a header... but for what? There's nothing underneath it. Well, except those buttons to the right.
    Oh, and "Position offset X", or is that a header too? Theres also "Scale offset X", is that under the header
    of "Position offset X"? Position offset X is a bit bigger, anyway - oh and what's..."

    In my opinion this is also present, albeit to a lesser degree, in the current 2.5 (and these, otherwise great,
    new mockups - very large space between "X, Y, %" and the numbers).

    It is very possible that it's just me who has some sort of mental illness, but this annoys me.

    -Tobias

    ReplyDelete
  5. Oh, i just wanted to note:
    Of course it wouldn't be that hard to find out which field was for what description, but I'm just trying to describe why i find it hard to get an overview of the entire UI.
    "It doesnt let the eyes rest" is what I'm saying.

    -Tobias

    ReplyDelete
  6. One simple solution to minimizing the space between labels and controls in the mockup is to simply right align the text.

    2.5 already has a rather sophisticated system for contracting text labels and data to always show as much essential info at a time.

    ReplyDelete
  7. I think that the problem with simplification is that depending on task you need the information available...

    for modelling your simplified view isn't as good as the old...

    no layers, no face.vertex/ selected counts... no buttons for the manipulator types... no "pivot settings"... and it's not clear how the snaps work... maybe it does, maybe not...

    I probably don't need the timeline when modeling... probably don't need the properties window...

    The really strong advance is that individual windowswork very well full screen... the 3d view and toolshelf for example... the sequencer....

    The strong thing that both old blender and new blender had in common is the subdivision scheme... perhaps the best way to de-clutter is to make the "layouts-or workspaces" more obvious.... (a pulldown list at the moment.. maybe if they were tabs...

    or maybe the "properties window" content could be integrated into the "numeric panels" more and be less of a space in its own right...

    ReplyDelete
  8. Very interesting simplifications and cleanups. The theme aslo seems very pleasant to work with.

    ReplyDelete
  9. Hey Bill,

    I think it's a nice idea and thought experiment, but a lot of that existing functionality is there because it's actually useful :) Hiding it all away won't help much either, it brings you back to Blender 2.0 days where there were no menus and people don't even know what functionality is available.

    So, the question is: how to simplify, but while 1) still presenting things so that people can find/be aware of the functionality that exists and 2) make functionality convenient to access if it's not immediately visible. Just dropping things from the screen doesn't really solve the problem I think, and in many ways makes things worse :)

    cheers

    ReplyDelete
  10. While I like many of the improvements in 2.5 I must say after playing around with it I find it slow to use.
    Somehow it requires more study to grasp what you want and there is scrolling to do on a smaller screen.
    So some colour or shape somehow for grouping or to distinguish between uses.
    I would really like to have the whole bar at the top of panels sensitive for open close not just the small triangle and... also the option of fly open/close on hover like a menu.
    thanks

    ReplyDelete
  11. hey.. billrey .. good idea. you can take this layout for special condition (modeling layout)

    ReplyDelete
  12. Matt: Absolutely, this probably wouldn't work in practice, not with the current way Blender works. A user interface such as this mockup would require a lot of reworking to make useable. You'd need to implement a lot of things differently, like how tools work, how you accomplish common tasks. You couldn't just apply this to Blender like a skin on the outside.

    Plus, you this is the ultimate bare version. It could easily contain more info, dialling it back towards what we have a bit.

    So, while I quite like what we have for 2.5, and will continue to work with it, using it and trying to improve it, I thought it fun to try and think of things long term. Like, if one was to redesign Blender from the ground up. I realise it's unrealistic and all that, but it's fun even so :)

    ReplyDelete
  13. Sure, I know this is just a fun 'what if' kind of thing. :)

    But it touches upon an important issue, one that's always going to be there too - blender is indeed becoming more and more complicated, and we need ways to deal with this complexity and try to keep it simpler (but under the constraints above). It's a really difficult problem, and I don't have any immediate solutions.

    Anyway, I'm not criticising what you do in your spare time at all :) but it would be really great to see experiments/ideas/etc that address this problem directly - what are the practical ways in which we can make Blender simpler, but not less functional or less convenient to work with? What are some specific ways that tools can be designed differently to 'do more with less'? I don't know :) But it's a good thing to be thinking about...

    cheers and beers

    m

    ps: http://lawsofsimplicity.com/ <-- John Maeda is a legend

    ReplyDelete
  14. @Billrey
    I think "unrealistic" is a quite a bit hard adjective for this mockup. I'd say is an early stage aiming in an interesting direction with good goals, like making things as simple and as clean as possible.

    As Matt well suggested, is about what and how it will be simplified, to still present functionality in a clear way to users.

    For instance that heart icon for representing presets seems to meet the goals of simplifying, cleaning up, while still presenting the functionality to the user.
    That's not to say everything should be an icon, but is rather a prove that such simplifications can be found, and in an elegant way.

    Those simplifications will surely require some compromises, and distiguish where something useful adds more clutter than usefulness.
    For instance, in the outliner it's useful to have the backgroud of each line with a different tone of gray, also useful to have vertical and horizontal lines that clearly show the hierarchy, and the icon at the right of each object to enter edit mode, and a list of all the children in the same line.
    But in you proposal there is a compromise, very interesting from my point of view, in which the hierarchy is fully understood, the background looks clean, leaves the editmode toggle to the TAB key in 3D view, which is reasonable, and to access children you just expand that object's subelements. All seem very reasonable compromises.

    Also the number-buttons without arrows, may seem to hide or lose functionality, but if there is another method to handle increments, like someone suggested Houdini's way, you added in cleanliness, and the feature is not really difficult to find.

    For menus I'm sure there's a way around that. Maybe just one menu called "Menu" that includes the others, or a better replacement.

    But the important thing is this initiative to make things as clean, readable and simplied as possible, which I find quite plausible.

    ReplyDelete
  15. Eclectiel: Many good points.
    Regarding the arrows in the number fields, I imagine they could be added on rollover, so it's still there, but hidden most of the time when you don't need it.
    I removed most menus, which is cheating in a way, but the truth is that in many of the 'light' editors (such as Outliner, Properties, Timeline) you don't really need them that often. You could reveal options by pressing the 'action zone' which is meant to be an editor specific menu.

    For things like the 3D view, you'd still need menus though. There's just too much stuff in there to avoid it. Except of course if we tuck in all he options in a main radial menu, but I don't think that's a good idea. Radial menus work well with few items for quick access, not for hundreds of tools in a list.

    Matt: Don't worry, no offence taken! I think we are pretty much on the same page. I think the main thing this sort of 'experiment' accomplishes is that it forces one to think of alternative solutions, and look at things from a fresh angle, which is healthy from time to time.

    ReplyDelete
  16. Yeah, in the proposal where I took off the menus I used radial menus as replacement, but it makes sense to put them in that action zone, and as regular menus. Also radial menus would be launched by hotkeys, and the idea of this kind of menus is to give clear access to the user to those features. A radial menu would be a little more hidden.
    Even if regular menus are slower it really doesn't matter for what they're are meant to be: show all features.
    The quick workflow can be left to other areas/contexts.

    I liked the idea for the arrows only appearing on mouse over. That way you keep the number-buttons clean and there's no way a user can miss them.
    I also like the 2D alternatives to handle increments, they seem to give more info and greater control to the user over the increments.

    At some point if those behaviuors you have in mind can be mockuped, I think it will make things more clear for people to understand what you have in mind with your simplifications. And would be easier to measure up how functionality would be cleaned up instead of being removed.

    ReplyDelete