Search the Blog
Bio


Thanks for visiting the blog. Here you will find random musings about user experience design, business, productivity, project development, a few 2x2 grids drafted late at night, and some pop-culture references to things like the Karate Kid and American Idol (which is to stay I often watch bad TV and occasionally read an interesting book).

Liza Cunningham

BLOG ARCHIVE
« Question Driven Process (QDP): A New Roadmap for Website Development | Main | A Safer, More Affordable Website Process that Keeps Your Company Competitive »
Friday
Dec042009

Beautiful Process, Beautiful Product; the Emotional Response to Design Patterns

While creating an animation in Flash this week I was struggling to make the animation flow and feel natural; there are many moving parts and fades (imagine stars flickering) so the timing is really important.  Too fast/too much action and people will get sea-sick, too slow and people will be bored.  So finding the right place for transitions has been challenging.  

As I worked on the transitions in the timeline first I made the fades random, simply staging transitions when I thought it would be interesting.  The result was chaos, images appeared out of sequence and the flow was erratic.  So I decided to try an animation pattern with fades occurring every 5 frames, starting at 0%, fading up to 100% (repeat 3 times).  And staggered each segment to begin 5 frames after the next. The results, a nice animation pace with enough variation in the pattern to keep it interesting. 

 

 

When I compared the animation timelines I noticed a huge visual difference in patterns.  Fascinating!  You guessed it, the timeline on the chaotic animation lacked order. The timeline on the pleasant animation had a lovely pattern and flow.  I further analyzed my reaction to the timelines, and observed when looking at the chaotic timeline I felt discomfort and agitation. The dots are random and my eye doesn't know where to start or stop.   With the pleasant animation, my eye can follow the flow of dots naturally and comfortably because the position and space between the dots has a logical pattern, and this pattern makes me feel relaxed.

My emotional reaction to the different timelines was especially interesting -- without music or graphics, just dots -- one timeline is much more appealing than the other. Imagine the physical reaction to the actual live animation? It makes sense that the animation without order was unpleasant.

This experience reminds me that a beautiful product is inherently based on a beautiful process.  If we are struggling to create a beautiful product but its not working (our instinct tells us it feels wrong) perhaps the process needs examining. We need to ask:  Where are the patterns? Has the process been unpleasant or uncomfortable?  And if unpleasant, how can we make it pleasurable?

PrintView Printer Friendly Version

Reader Comments (2)

Great insight re: beauty, process, and product. A variation on form following function? Re patterns, I agree - I know little, but it's clear our brains crave order. Does order mean saftey, I wonder... Also, when is disorder or randomness pleasing. I'm thinking of when I stood outside a few weeks ago on one of those days when ice on branches was melting, and the sun was shining just perfectly, causing millions of scintillating diamonds in every color imaginable. I was stopped dead in my tracks, it was so beautiful. And completely random. Similar to leaves' shadows in a gentle wind in the fall?

Great stuff, Liza.

December 23, 2009 | Unregistered CommenterMatthew Cornell

Matt, you raise an interesting point about natural vs. man-made beauty. In nature there is no control, it simply is. Randomness is part of nature.

When man intervenes, the composition changes and man's flaws are highlighted. Man's ability or inability to see affects the outcome. But nothing is random in man's creation; it is either broken or not.

January 5, 2010 | Unregistered CommenterLiza

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>