Back To Bed

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

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

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

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

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

Windows