I started writing this article a while ago, but recently I've been a bit busy so it's been on the back burner for a while. I'm trying to investigate usability problems in the way Blender's UI uses controls and recommend solutions for fixing them. I still have many more ideas and a lot more to write, but for now, I thought I'd at least upload what I've got, so ideas can be debated, things can be coded, etc.

I've played around with the mockup a bit more. This incorporates a number of broken's ideas, along with some of my own:

Most of these are obvious, but that won't stop me from mentioning them:

Command buttons such as "RENDER" remain exactly as they have been. Since they are pushable buttons, they are 3D with rounded corners.

Toggle buttons such as "Gamma" remain as broken suggested, with the Irix style LED toggle. Like command buttons, they are 3D with rounded corners.

Groups of radio buttons (mutually exclusive options) such as "Oversample" have been replaced by popup lists. Since they can be clicked but aren't buttons, they have a 3D look with sharp corners.

Editable values such as "Xparts" have a recessed field which holds the value being edited. Since they can't be pushed like buttons, they are rendered flat, with sharp corners.

Dialog buttons such as "Edge Settings" remain the same. Since they are pushable buttons, they are 3D with rounded corners.

I think the window still looks like a Blender application, which is important.

Also, with the exception of mutually exclusive buttons being replaced with popups (see broken's text for an excellent discussion of this), the controls behave exactly the same as they did before. The only change is how the controls are rendered. So "power users" should be happy.

What's not to like?

Comments?

Last edited by dcuny on Fri May 23, 2003 11:36 am, edited 1 time in total.

Unfortunately, it's just an image that's been altered in a paint program. There's no code behind it. However, it shouldn't be that difficult to code, since these are primarily cosmetic changes. Moving and combining the controls, on the other hand, is a bit more work.

There are still a lot of features left to discuss. For example, I think changing the popup lists so they display labels would be nice:

Other's might vehemently disagree, and consider them "too fussy".

And I know that broken was uneasy adopting the LED style buttons without making some changes. Personally, I'd prefer them to be green when lit, but there might be issues of color-blindness that come into play here.

It's odd that this thread - which considers some very specific changes - has gotten so little feedback, while other threads with less specific content seem to go on and on...

I think many of the posts over in the Interface Poll are really about making Blender easier to use. It's the USER part of the Graphical User Interface.

I have worked on GUI projects in the past. Currently I am begining to organize a project that will directly address usability improvements. The first step is to create a GUI roadmap. After some standards are agreed upon, the next step is to create mock ups much like you have already done. The trick is to get people to "use" and rank these mock ups. It is much like a story board. Very easy to change a photoshop layer. Not so easy to change line after line of code.

Send me an email or drop me a message if you are interested in working on this project. I have already received some interest in this area.

I think that Broken's ideas for improving Blender's GUI are very good, and should be implimented ASAP. I'm not usually someone to jump-the-gun like this, but his ideas would make Blender's interface much clearer to the newbie, and wouldn't interfere at all with the experienced users workflow.

Anyway, I'd like to point out that you got some of the button types wrong in the mock-ups... which just goes to show that the modifications really are needed.

I also like dcuny's idea of changing text-input "buttons" into flat, hard-cornered boxes with a text-fields in them: it makes their purpose much more obvious.
Two comment on dcuny's mockup, though: the OSA button should be a toggle button (just like the MBlur button). The sampling rates alone should be put into a pull-down list. The reason for that is that the sampling rates apply to both the anti-aliasing and the motion-blur (and the sampling rate of OSA and MBlur cannot be seperated as of yet).
And the second thing is that "PAL" and "Default" should be in the "Size" drop-down menu.

A couple ideas of my own:
For toggle buttons, why not have the "LED" be wider, and have the text "on" or "off" be in it, depending on it's state? Combined with the light change, it would be even more obvious.
And the second idea is to use the button colors so that they *do* indicate the type of GUI element that something is. For instance, action buttons could be brown, toggle buttons could be blue, drop-down menus could be grey, etc. Obviously, we would want to choose the colors carefully--I was just giving an example.

I agree totaly with the colored buttons. It makes windows with many buttons(like the editbuttons) better to overview(i don't know how to say it better in englisch).
If they all would have the same color it is likely to press the wrong button because they all have the same collor. Different colors for each type of button gives more the idea of seperate groups.

And i do totaly agree with the textfields. They look nices en much cooler this way.

After thinking through some other ideas I've had, I've come to agree with greasyScott - there needs to be some sort of UI roadmap effort in order to properly organise things. While I have tried to show by examples that many controls in Blender's UI are misused (buttons instead of popup menus for example), it's pretty futile to recommend tiny modifications such as changing the render size presets to a pop-up menu, when it's in the middle of a bunch of buttons that are still arranged very arbitrarily and confusingly. It's like putting on band-aids when the problem goes much deeper.

While we need to discuss and improve how individual interface controls work, I think we also need a combined, concerted effort to re-organise things on a larger scope.

Personnaly, i think buttons like the "scale" buttons, should not become dropdown lists. I like the fact that there are so many buttons. This allows you to get a quick overview of the avaible options. I prefer a couple of buttons to one dropdown list, because i simply don't like to search for the button with my mouse, click it, and than search again for the right option. Having to click a single button is much faster.
Also, i don't like the new editable values. The current ones have a couple of handy things built in, like dragging/clicking to increase/decrease the value, shift-click to prepend/append, ... . I like the fact that they can be pushed as buttons , it is one of my favorite parts of the blender ui. But, thats purely personal.

blendix wrote:Personnaly, i think buttons like the "scale" buttons, should not become dropdown lists. I like the fact that there are so many buttons. This allows you to get a quick overview of the avaible options. I prefer a couple of buttons to one dropdown list, because i simply don't like to search for the button with my mouse, click it, and than search again for the right option. Having to click a single button is much faster.

I'm not sure if I agree with you there or not - one thing that has to be taken into consideration is visual clutter vs efficiency. It's good to remove as much visual clutter as possible, since:

a) extensibility is very difficult when there are buttons everywhere - look at how the Renderbuttons window has evolved - it's very disorganised and in many cases it looks like buttons have been arbitrarily placed in positions becaue it's the only space that was left, rather than being able to organise the layout spatially to seperate groups of similar functions, settings, etc.

b) a more minimalist and less cluttered interface is in fact easier to find things in. The phrase 'can't see the forest for the trees' comes to mind. If the screen is absolutely covered in buttons, there are pretty much only 2 ways to find what you're looking for.

1 is to read the text on all the buttons (which defeats the whole purpose and potential of a GUI, and is particularly troublesome in Blender since the button labels are quite often confusing and unmeaningful to most users),

2. is just to have the position of the button memorised, which is additional knowledge that the use must learn over time and experience, which is bad for new users (steeeep learning curve) and also power users too (when trying to find infrequently used functions that they haven't memorised)

If the visual interface is more organised and structured, and uses negative space well, it can make buttons easier to find and recognise, as the brain can use spatial memory and shape recognition when looking for groups of buttons, and the overall shapes they make when constrasted with the background, negative space around them etc. Admittedly, this is kinda true with the current Renderbuttons, as the large Render and Anim buttons divide up the space and slightly help to visually group the other buttons, but it could be done much, much better.

In any case, that's just some of my arguments in general for a more minimalist, less cluttered interface. Perhaps they don't necessarily apply ti this particular circumstance, but in general, I strongly believe that we should be looking for alternatives to buttons everywhere, in order to reduce visual clutter and information overload.

Anyway, about the scale buttons, let's try and think of alternatives. In fact in the Apple aqua UI guidelines, they mention:

Don’t use pop-up menus:
* for more than 12 items; use a scrolling list
* for 4 or fewer items; use radio buttons

Which would probably side with your idea of it being faster and easier to select from a small number of options if they're all laid out. However, the visual problem for Blender is that the 'radio buttons' don't look any different to normal buttons.

Maybe you could take another approach, by still using buttons, but not in the same crowded way, for example:

This would also have the advantage of leaving more space for a descriptive label. (A more self-documenting interface would do wonders to ease the learning curve and de-mystify Blender!)

Also, i don't like the new editable values. The current ones have a couple of handy things built in, like dragging/clicking to increase/decrease the value, shift-click to prepend/append, ... . I like the fact that they can be pushed as buttons , it is one of my favorite parts of the blender ui. But, thats purely personal.

I don't think anyone at all was suggesting that the function of the number buttons or text buttons (dragging, clicking to increase/decrease) gets changed as I'm sure everyone loves that feature too. What would help though is for them to have different visual appearances from the rest of the buttons, to eliminate confusion between the two, and to show the user at a glace what is for performing an action as opposed to what is for editing a value. The metaphor for 'pushing a button' is usually used to communicate initiating an action, or perhaps toggling a setting. Using that same visual metaphor for only tangentially related functions dilutes the visual meaning and wastes the potention for visual communication that a GUI gives us.

Personnaly, i think buttons like the "scale" buttons, should not become dropdown lists. I like the fact that there are so many buttons. This allows you to get a quick overview of the avaible options.

If only the scale buttons were left as-is, and the rest of the screen were modified in the ways described, then yes, you would get a quicker overview of the options for that particular feature.
The problem is that if you do that for all of the features (as Blender currently does), then you have a huge mass of buttons, which is overwhelming, and actually makes it *more* difficult to get a quick overview.

I prefer a couple of buttons to one dropdown list, because i simply don't like to search for the button with my mouse, click it, and than search again for the right option. Having to click a single button is much faster.

You make a very good point here about the number of mouse-clicks it takes to do something. In fact, one of the draw-backs to many 3d applications is that in their efforts to make the UI user friendly and intuitive, they make it take 50 billion clicks, and a lot of complex-mouse movement (i.e. following mulit-level menus) to do much of anything.
In my experience, however, this slow-down is caused mostly by the multi-level (hierarchical) nature of their menu's, which allows them to have as many levels as they want.
With the proposed modification to Blender's interface, however, the drop-down menus would always have one (and only one) level. Further more, the drop-down menu's would be limited to making selections from multiple options, and would *not* contain actions/commands.

Also, i don't like the new editable values. The current ones have a couple of handy things built in, like dragging/clicking to increase/decrease the value, shift-click to prepend/append, ... . I like the fact that they can be pushed as buttons , it is one of my favorite parts of the blender ui. But, thats purely personal.

The functionality of the "editable value" buttons would not be changed; only their appearance would be changed.
(And I agree with you that those features are really nice )

I don't think anyone wants to get rid of the shortcuts that Blender offers. Being able to drag the mouse over a numeric field to change the value is a great feature, and I'm certainly not suggesting that it be changed. I was only suggesting that the controls be cosmetically changed.

blendix wrote:I like the fact that there are so many buttons. This allows you to get a quick overview of the avaible options.

I don't think it gives you a "quick overview" of the options. I think you get:

More controls in less area

Faster access to those controls

But it only gives you a "quick overview" of the values if you already have memorized what those values apply to. Take, for example, the Render Size buttons. The user is confronted with four values:

100%

75%

50%

25%

If you don't already know what this is 100% of, what good is this information? And since the 100% button is as large as the other three buttons, it's not even clear that these values are related.

broken's suggestion that the Render Size buttons be implemented as radio buttons (per the Apple UI guidelines) is good, but there's the issue of size - the buttons are so small, they are difficult to hit.

I still suspect that a popup list might be the best option for Render Size. In the course of editing, how often do you change the Render Size? I suspect the answer is "not very often", so the cost of changing it into a popup list is probably fairly low.

As an aside, I've always been puzzled as to why there are only 4 options for Render Size. Why not allow the user to enter their own size? Why not allow them to "quick scroll" through the four options using their mouse (the same as number edit fields do)? I'll readily admit that I'm not good enough at Blender to have answers to a lot of questions.

In contrast to Render Size, there are other "high traffic" controls that would suffer greatly from being turned into popup lists (for example, some of the buttons in Paint Mode. For those, remaining radio buttons is the best choice.

There are a couple other controls I've been wrestling with:

Sliders: They are so thin, they look difficult to hit. I know they aren't, but I find myself trying to target the slider knob each time I use them. Perhaps there is a good way to make the target larger?

Tri-state buttons: If they were LED buttons that toggled Red/Yellow/Green that would be one thing, but there are problems with that, such as color blindness and confusing users with normal toggle buttons.

Anyhoo, I think that a good compromise can be reached on this, which leaves "power users" happy, and "normal users" less baffled by the UI.

Mayba a nice feature to add to the gui is to change the number field and sliders using the scroll wheel. I know not all users (like macintosh) have a scrool wheel available but for linux and windows users it would be a nice feature to add.

Even changing togglebuttons with the mouse wheel would be something to think about. Or sliding trough a list of (radio)buttons or a listview without pressing the listview would help reduce the mouse clicks.

Me thinks that the ideas above are great, but i also think that before we go making substantial changes to to the UI. It might be worth considering Skins. Wot i mean is, that if someone is going to spend time on the coding side of things they might as well think about implenting skin support.