Underestimated UI techniques: Morphing8
When I design new applications, I realized I use a couple patterns that I haven’t seen in much use elsewhere, so I’ll start to blog about them. The first pattern in this series is called morphing.
What is morphing?
Bush-Obama morphing
Morphing essentially describes a state change on an element, transforming it into another. Many UI frameworks have helpers for morphing, usually in the form of class animations. jQuery UI has made it transparent to animate jQuery’s class manipulation functions like addClass, script.aculo.us has Effect.morph which essentially does the same.
Why is it useful?
From a higher level UI perspective, morphing really describes that one element becomes another based on the context. It is essentially very powerful because it gives your users a visual cue what is happening, how is happening and why it is happening. Instead of doing an instant change, the users eye can follow the motion and you therefore give them a better feeling of control over the whole situation.
Show me!
Let’s do an example. While working on smart.fm’s new item builder, I had to visualize the following steps: Clicking on a button to add text, then displaying a text input, and hiding the button since you cannot add text twice. Usually, it would roughly look like this:
However, with morphing, it not only looks hot but solves the issue in style:
This was a particularly lazy example, since it doesn’t even truly morph one item into another – it just animates the width of the button and fades in the input on top. But visually, the element clearly transforms.
Morphing in the wild: Inline editing
One technique that was is heavily inspired by morphing is inline editing. Essentially, you click on a paragraph or element, and it transforms into and editable element. Most solutions don’t actually morph, but you get the idea. There are thousands of other usecases out there waiting to be discovered, and if you have some, I’d love it of you share them with me!
8 Comments
August Lilleaas on October 19th, 2009
Just a FYI: I thought your green buttons were images, because of the lack of a `cursor: pointer;` 
James Peter on October 19th, 2009
I agree. Morphing is a great UI tool. When used appropriately (i.e. sparingly) it can really help to give that visual kick to a page. Morphing is particularly great when changing the focus/layout of a page. If the changes happen instantly users become confused and dissociated.
Unfortunately complicated morphing effects are somewhat limited in jQuery & jQuery UI. The inability to sync animation means that change involving multiple elements at once will always be problematic. I’ve actually just spent the better part of a week extending jQuery to allow it to synchronise multiple animations and snap together edges to allow for really high quality effects. I can release the code if there’s any interest.
John Duncan on October 19th, 2009
I’ve noticed that MacOS X uses a lot of morphing transitions since the inclusion of CoreAnimation. They are often subtle but helpful visual clues as to what is happening, like smooth scrolling a toolbar into view and stuff like that.
dude on October 19th, 2009
@James: Of course you should release the code! Just push your repository up to GitHub and we’ll all help!
Sophie on October 19th, 2009
James Peter — Please do release the code, I’ve faced the same need a few times and been intimated to build it myself. Thanks a bunch.
Is every case of a composite UI (some nested panels and groups, for example), in which a user action causes some part(s) of that composite to change (e.g. grow, shrink, add children, etc.) while the context around remains the same a “MORPH” candidate?
My daily readings 10/20/2009 « Strange Kite on October 20th, 2009
[...] The Sea of Ideas ยป Underestimated UI techniques: Morphing [...]
Benjamin A. Shelton | Blog » Blog Archive » Links of the Week: October 21st on October 21st, 2009
[...] Okay, this one is more about classes, inheritance, polymorphism, and a few other dry, boring topics. I’m only linking it for the picture. Enjoy. [...]
sherrod on October 19th, 2009
Cute example, but I take issue with the description of your solution: “with morphing, it not only looks hot but solves the issue in style.”
I’m a big believer in “form follows function,” so this is definitely just eye candy and not a UI technique to me. Perhaps you should give a more useful example. I like the sexiness of morphing one element into another, but I can’t think of an instance in which its use provides enough extra clarity to compensate for the complexity of implementing the morph transition.