Blur the New Black?
Thursday, July 2, 2009 at 2:06PM 
Recently I've been enchanted by the simple beauty of this image from TUAW. Obviously the icons are very beautiful to start with, but this use of blur to imply different focal points really catches my attention. I'd love to find more variations on this design approach.
Another example of attractive blur: Wacoms Bamboo Dock online interface displays a motion-blurred application page image as it slides. I think the result is subtlety beautiful. Motion blur emulates how the human eye, or a camera lens captures an image of moving objects which is slightly blurred. Pixar films would probably be unwatchable without motion blur, as invented by Tom Porter and modern computer games make good use of motion blur too.
Motion blur synthesizes the kind of blurred image a camera or retina receives when watching moving object. Without it, each image, lasting for 1/30th of a second, is absolutely still and sharp. the resulting animation is jerky and unnatural. See examples below. Increasing framerates for games, digital video and GPUs may reduce the problem, but I suspect there is something stylistically/aesthetically attractive about motion blur.
For example: This is a render of an icon spinning at 30 frames per second. Notice how the motion looks jerky and quite unattractive.
Here's the same animated icon rendered with motion blur. The result is much more natural, aesthetically pleasing. I also find it has some kind of indescribable 'cool' to it. What do you think?
Reader Comments (12)
Wow. Amazing how subtle it is but how much smoother the 2nd one looks. Very nice.
George Lucas developed a technique called go motion for adding motion blur to stop motion animation for The Empire Strikes Back. It made the animation look much more realistic and less jerky.
http://en.wikipedia.org/wiki/Go_motion
I like the demos! I feel like my brain is only picking up a few of the frames of the first animation, therefore making it look like the heart just jumped from angle to angle, whereas the second one implies to the brain that it actually spun smoothly between angles.
Not quite related to motion blur but to blurs in general, I am enjoying the blur+distortion used in the Bubbl.us beta (https://bubbl.us/beta/) webapp when it prompts for closing an unsaved workspace. It's in the line of making "dangerous" actions look or feel dangerous to the user, which I think was proposed in one of Dan Norman's books.
"Motion blur synthesizes the kind of blurred image a camera or retina receives when watching moving object."
Why doesn't this present itself naturally since this is supposedly seen by the retina when watching a moving object? Isn't the object on the screen moving?
I cannot see the vids at work... but I gotta say I'm not a fan of the bamboo blur... it's way too over the top, makes my eyes hurt
Anderson: Animation is a series of stills. Just an illusion of motion. That is why we need techniques like blur.
Even live action depends on it. The speed of the camera shutter can be made very fast to nearly eliminate blur and it makes moving things look more sharp but unnaturally so.
Interesting post, Keith. A while ago I was thinking how it's funny that the false depth-of-field effect in tilt shift photos (e.g. http://www.mrjarvis.com/wp-content/uploads/2008/07/tilt-shift-photo04.jpg" rel="nofollow">here) convincingly tricks our brain into thinking that we're looking at a miniature.
Most apps on my computer that use heavy UI elements such as motion blur really end up looking jerky cause my OS is overloaded and can't process them fast enough. Until dynamic elements are given priority on machines, these concepts are vaporware.
@Vahan Modern OSs, such as Mac OS X 10.5 and Windows Vista have system architecture that means all the heavy-duty processing (blurs, etc) can be done on the GPU. I agree that up until now, these effects have cost system responsiveness, but this becomes less and less a problem looking forward to 10.6 and Windows 7, if properly architected.
@Kris Thanks — Go motion looks really interesting. I learn so much from you guys commenting in this blog!
@Guy That's a very nice implementation in bubbl.us
I'm surprised we've not seen more of these kinds of transitions in desktop OSs.
@Anderson
"Why doesn’t this present itself naturally since this is supposedly seen by the retina when watching a moving object? Isn’t the object on the screen moving?"
The difference is that on a computer screen or video, the motion is being chopped into 30 frames per second (for video) or often something like 60fps for animated computer elements. Although a computer can technically push out updates many thousands of times a second, the computational cost is often deemed to be not worth it.
Online videos, film, TV are between 24fps and 30fps in most cases.
The mismatch occurs because for each 30th of a second, the object is frozen, whereas in real life it would never stop moving.
@Dan
If you see the Bamboo one is context, you might like it more :)
@Patrick If you like tilt-shift effects, check out http://vimeo.com/3156959 — it's a really well made video making heavy use of tilt-shift.
Nice post. Was pointed here by Martin Polley. I was capturing the latest iPad UX interactions on my flickr site (http://www.flickr.com/photos/designingwebinterfaces/collections/72157623252108597/) and notice the blurring effect in their animations. Example page swiping: http://www.flickr.com/photos/designingwebinterfaces/sets/72157623252188497/.
Your post validating what I was seeing. Thanks.
Thanks Bill — that's some great investigative work. Great Flickr sets.