Billrey

Back To Bed

2011-12-18T11:22:00.000-08:00

I've been working as a director on a game for the past month or so. Everyone knows that sleepwalkers die when you wake them up. The game is about guiding a sleepwalker safely to bed.

Play it for free at backtobed.dadiugames.dk

Design & Open Source

2011-11-06T02:38:00.000-08:00

I just watched a very interesting presentation by Mozilla designer Alex Faaborg, which touched on a subject I've been thinking about a fair bit: How does design work together with open source?

In my mind there is a certain contradiction between open source and having strong design. Open source has potential similarities with designing via focus groups. We have to avoid descending to committee design - designers will know that this is something to avoid.

Why? Because it's akin to having too many cooks in the kitchen. As Faaborg points out, when combining everyone's favorite color, you will end up with grey. Additionally, one of the most central aspects of being a designer is the ability to say no, to keep focus on a few things and do them really well.

What they've done at Mozilla to solve this is really quite nice:

They define a set of 'Core principles'
They use testing to validate designs, not to actually design

I'm particularly interested in the first point, defining a set of design principles for Blender. If we had those set in stone, I think we'd achieve a few things:

Elevate UX discussions using more precise terminology
UX issues could actually go into the bug tracker
Fewer discussions about smaller things - you can refer to the core principles instead

The next question to ponder is, what should those design principles be? Below, I've listed a few good resources for design principles for inspiration:

Jacob Neilsen's Design Heuristics

Jef Raskin's Interface rules

Whitney Hess' UX guidelines

Cleaning up the Blender UI

2011-10-23T12:40:00.000-07:00

The story of Blender is quite amazing. Over the years, Blender has become incredibly powerful. And this is reflected in the user interface. With Blender 2.5, the goal was to introduce more consistency, more structure and logic into the UI. This has helped set Blender up for the future: It's more expandable, it's more flexible and it's easier to use.

However, all these additions haven't really tackled a core issue with the Blender UI, which is visual complexity. Look at this screenshot from Blender:

It has:

103 strings of text
Many visual boxes
Many lines and dividers
Many irregular lumps of items
Many small gradients

All these boxes, items, text strings adds enormous visual strain for the user. Here is a visualization of the main hard lines in the UI:

This shows how heavy the UI is. My hope for Blender is that it can become lighter, calmer and easier on the eyes. For Blender to embrace KISS - Keep It Simple Stupid - and to follow Dieter Rams design philosophy of 'Less, but better'.

So, why is simplicity in interfaces good?

Reduced clutter
Fewer disturbing points of focus
Takes up less space
Fewer strings of text
Let users focus on content
Is calm and relaxing to look at
Lets you concentrate on a few things and present them well.

How are we going to simplify the Blender UI?

Reduce amount of unneeded lines, gradients and boxes
Use hierarchy to move rarely used items into menus
Remove unnecessary items entirely
Rethink some features to need less buttons
Add more whitespace
Promote the content itself

So, I've done a little exercise to try and clean up Blender a bit:

Phew! This looks like an application that is inviting. I want to use it! It looks fun and light instead of heavy and daunting.

You'll notice that I've done a few things. Firstly, I'm starting from the improvements that Brech van Lommel introduced in his Cycles branch. On top of that I've made these additional changes:

Removed a bunch of dividers and gradients.
Removed boxes around some items, such as Window Selectors
Shortened some strings of text (Object Mode -> Object)
Removed Blender icon in header (not useful information)
Removed all the gibberish data text in the top right header. This could optionally be presented in n overlay.
Simplified Window and Scene selection widgets (Put Add and Remove buttons inside the popup menu)
Simplified Material list widget. There was much redundancy here.
Simplified Toolbar
Hid arrows in number widgets. This could appear on mouse roll-over

Below are a few focused examples of the changes:

Here you can see that I've moved buttons into the sub-menu. The Add/Remove buttons don't need to be visible in the top level UI.

The Material list is another example. The previous version had many unnecessary and duplicated items. Renaming, moving, selecting, adding, deleting, linking and unlinking could all be done with this simple UI.

The properties list itself is also much simpler here. This is an image from the Cycles branch by Brecht van Lommel, which demonstrates how calm and simple properties can look when you arrange them in a cleaner way. This also makes items easier to eye-scan items vertically.

EDIT:

Here I've added an example of how to do cleanup work. This is the 3D View header in edit mode:

This shows the header could go from the current jumbled mess to a cleaner version.

Another thing that goes with this simplification of the UI is screen space. Let's examine the original screenshot, this time with an overlay that shows how much of the screen area is used for displaying content:

Based on area, slightly less than half of the screen is dedicated to the 3D content (green) while approx 52% of the screen is dedicated to UI controls.

Compare that to this:

Here, approx 20% of the screen is comprised of UI controls, and the vast majority is used to display content.

I'm excited about Blender's future, and with a few changes the UI could become calmer, cleaner and simpler.

MouthSwap

2011-10-10T07:06:00.000-07:00

I've just completed my first iPhone app, made with Blender. It's called MouthSwap, and it acts as a virtual mask that moves as you speak.

I've made the mouths in Blender 2.57 as a 100-frame animation. The app then measures the speaking volume and animates the mouth appropriately.

I made heavy use of the built-in node editor to tweak the look of the mouths.

Below is the app icon that I ended up painting in Photoshop. Was really fun to do!

I made the app with a friend, Mads Viktor, and in the end it turned out to be a fun little project.

Here's our website with the app:

www.balloonparkpeople.com/mouthswap

And direct link to the App Store:

http://itunes.apple.com/app/mouthswap/id468533052?ls=1&mt=8

Headless

2011-07-21T15:38:00.000-07:00

I spent a few days creating a small animation. I call it Headless.

Made in Blender, using the amazing new Cycles renderer. I deliberately wanted this to be a quick and dirty project, hence the total non-attempt at perfecting the animation.

Fun!

Nørrebronx by night

2011-01-07T08:20:00.000-08:00

Windows

2010-11-14T09:39:00.000-08:00

Vesterbronx

2010-11-14T09:37:00.000-08:00

Took this image in the middle of the night. Handheld! That's why having an F/1.4 lens is awesome.

Limit to your love

2010-10-23T07:19:00.000-07:00

I recently did some light and VFX work on this music video with director Martin de Thurah. Fun.

James Blake - Limit To Your Love from James Blake on Vimeo.

Chickens at night

2010-10-09T03:59:00.001-07:00

Time for a reel update

2010-09-30T07:22:00.000-07:00

Now that Sintel has finally been released today, I can now release an update to my demo reel. Remember to watch Sintel here.

Sweden/Mushrooms

2010-09-20T13:27:00.000-07:00

Making Sushi

2010-08-21T08:28:00.000-07:00

Had fun making vegetarian sushi at home with friends. Shot a little video with the K7. Fun!

A giant in an art gallery

2010-06-08T14:29:00.000-07:00

Multi-pane confusion

2010-06-06T12:41:00.000-07:00

One of Blender's core UI features has always been the ability to dice up your window into multiple regions and panes in a non-overlapping user interface. Blender 2.5 has a problem where it's too easy to be confused about which region that sub-regions belong to. Case in point: Look at the toolbar in the middle of the screenshot below - It's very hard to determine which region the toolbar belongs to at a glance.

Blender 2.49 before it had a rather simple solution of rounding the corners of regions to solve this problem. However, since then 2.5 has added toolbars and sub-regions many places which amplifies this issue, so merely having round corners might not be enough.

Here's a mockup of a similar concept in 2.5. The larger borders between regions coupled with small rounded corners, makes it clear which toolbars and headers relates to what regions.

Another possible solution would be to make sub-regions transparent, making it immediately obvious which region they belong to by identifying the background of the window.

Sintel Trailer

2010-05-13T12:50:00.000-07:00

The trailer for the short film I'm currently working on has finally been released. It even has a few shots of mine in it: Look for the shots of Sintel and the shaman in the hut. The shaman one wasn't actually designed to be a close up, and won't be in the final movie. For this reason the lip sync is not the greatest, but does the job for the trailer.

As you can tell from the trailer, hair is still a major headache here at the studio - hopefully this is something we can properly solve in time for the movie release.

Operator panel

2010-04-25T05:36:00.000-07:00

One of the best new features in Blender 2.5 is the concept of the 'operator tweaking' which means that the user can change tool settings after the tool as applied and see the results immediately. Basically the equivalent of 'what you see is what you get' (WYSIWYG) editing. With the toolbar open, the bottom bart of it contains these settings. This is nice, because it fits with the non-overlapping UI model.

The problem arises though when the toolbar is closed, because these settings are no longer accessible. This turns out to be a rather large issue, because many tools effectively become unusable, with no way to control them. For this reason I think adding a 'floating' panel makes sense. It should only appear when the toolbar is closed, and should not be blocking, ie it should not steal the users input.

Drawing of the day

2010-04-25T05:21:00.001-07:00

Stupid two minute drawing made the the excellent Harmony web app.

Blender text alignment.

2010-04-25T05:18:00.000-07:00

While doing animation for Durian, I daily run into a silly UI deficiency while animating character faces. We use a system which presents us with a long list of sliders with number values. The problem is that it's very hard to scan down this list to quickly get an overview of the values, because the centered alignment. Blender does this for all number values and sliders, and it becomes apparent how bad this is in examples with long lists of values. I started looking at alternative solutions, here:

The two alternative solutions I could think of both have different advantages, but I think you'll agree that either is nicer that simply centering everything.

Heron fun

2010-04-21T11:32:00.000-07:00

Vondelpark

2010-04-18T13:54:00.000-07:00

The Ostrich of Planes

2010-04-17T07:58:00.001-07:00

Jazzed up handlebars

2010-04-17T07:19:00.000-07:00

Duck chillin'

2010-04-17T07:18:00.000-07:00

Amsterdam biking

2010-04-06T08:27:00.000-07:00

Durian

2010-03-15T09:09:00.000-07:00

I've followed the progress of Project Durian, the third 3D animated short film produced at the Blender Institute, for a while. The project is incredibly ambitious in terms of scope and scale, in fact I'd guess it to be many times as complex as Big Buck Bunny where I was a character animator.

I'm very happy to say that I've been asked to come down and help finish the film, as a character animator. It's a little scary, with its close-to-realism look and animation style, which are a far cry from the wacky toony style of BBB.

I'm heading over there next Sunday, and I'll keep you posted.

In the meantime, read more about Durian here.

Vertical header

2010-02-11T06:22:00.000-08:00

The Properties area of Blender 2.5 uses a really nice, flexible layout system for organizing all the options and controls within it. One of the nice things about it is that it adapts to the width of the area, so that if it is too narrow to display everything in two columns, it simply switches to one column.

The narrow UI causes an issue with the header though, which doesn't adapt, and simply hides the header items. This makes it hard to switch property areas when the view is narrow.

A nice way to solve this would be to introduce a vertical header. When the area is too small to effectively show all the header items horizontally, it can move to the side. Luckily, the new UI area system in Blender 2.5 does support this kind of organization.

Themes UI

2010-02-04T04:28:00.000-08:00

The nice thing about Blender 2.5's new 'Themes' editor in Preferences, is that you can get a much better overview of your colors than before. In Blender 2.4x you could only edit one color at a time, and you had to navigate through a menu based hierarchical system, making theme editing slow as molasses.

The new spacious Preferences window has allowed for a more flat, direct list of colors. This is very nice, though the layout is a little messy looking. The list on the left is pretty wonky, with it's center aligned text and 3D appearance, which doesn't really work vertically. It all makes sense from a code standpoint as these are just standard radio buttons, but it doesn't look pleasing. The lack of any spacing also makes it look busy.

The new UI layout engine in 2.5 is really fantastic for many things, but unfortunately makes this kind of layout here a little hard to do. Even so, I'll dive in to the Python script and give it a go to see if I can match the mockup below, more or less.

Station

2010-02-03T09:36:00.000-08:00

Cole Reed's modifier proposal

2010-02-03T06:07:00.000-08:00

Blender user Cole Reed recently submitted a proposal on the modifier system in Blender. Although I've been hesitant in supporting the idea of a more hierarchical modifier UI, this proposal has finally convinced me that it is a good idea. If nothing else, it simplifies working with modifiers.

The physics ones are currently clumsy on a lot of levels: The connection between the modifier stack and the physics properties is not clear. It gets even worse when you have multiple physics modifiers enabled. Plus, you have to deal with the confusing myriad of panels for each physics type which are too easy to mix up with each other.

The added benefit is that we end up with fewer tabs in the Properties editor. You can download Cole's proposal as a PDF here:

Modifier Proposal PDF

Lots of toolbars

2010-02-02T05:33:00.000-08:00

While doing some research for the toolbar in Blender 2.5 I collected a bucketload of toolbars from various apps to determine what would be useful for Blender.

Along the top are various horizontal toolbars, while the vertical ones are beneath. The challenge is to have something that is clear, compact and fast. Traditional painting apps work well with icons, because the concepts map to real world items quite well. This isn't always the case in 3D though, because the tools are more abstract - there's not really such a thing as a real world extrude tool, at least not something that's be useful as an icon.

Although what we have in 2.5 is already quite nice, it's interesting to look at different ways of displaying tools in a GUI. It might be nice to eventually have horizontal tools too, for example.

Until then, this is some food for thought.

Presets menu

2010-02-02T04:37:00.000-08:00

One of nice small new features in Blender 2.5 is the new unified presets system. There's now a built in way to easily add presents to any area of Blender, to set an array of controls. This is currently used a few places for dimensions, for subsurface scattering presets, but has great potential for use in things like physics too. Smoke presets, soft body presets anyone?

As nice as this is, the UI for this feature leaves a little to be desired. It's rather huge, and it also looks like all the regular other controls, when in fact it operates on a different level. It's for setting the regular controls. Below I've come up with a smaller, less intrusive version of this piece of UI that is also distinguished from other controls.

Update: Some commenters pointed out that it might be useful to display the currently selected preset. In the current 2.5 version, this information isn't visible, despite the large amount of space it takes up. Here's a version that incorporates that.

Keep It Simple, Stupid

2010-01-17T12:39:00.000-08:00

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.

Movie Star

2010-01-09T09:59:00.000-08:00

Breakfast

2010-01-08T07:59:00.001-08:00

On ice

2010-01-06T13:52:00.000-08:00

Playing with the video feature of my Pentax, I put together a small video of the ice walking. Fun.

Walking on water

2010-01-06T13:50:00.000-08:00

Lately it’s been so cold that the big lakes in Copenhagen have frozen over. A bit dodgy perhaps, but we went out there anyway.

A real camera

2010-01-06T09:05:00.001-08:00

Just before christmas I decided to get myself a present. I got myself a Pentax K7 DSLR, which is turning out to be really fun. Here's one of the first images I've taken with it:

Getting back into blogging

2010-01-06T08:04:00.001-08:00

I’ve pondered around with blogging before, but I was never really arsed to actually write something. Here’s an attempt to restart that.