UI as a sales pitch - Animated interfaces?

8 Jun 2007 - 9:14am
6 years ago
13 replies
968 reads
Fred Beecher
2006

Hi all,

I just caught this article on Wired, entitled "Kiss Boring Interfaces
Goodbye With Apple's New Animated OS"

http://www.wired.com/software/coolapps/news/2007/06/core_anim

The discussion in the article, which is largely about the UI advances
the Core Animation feature of Leopard will make possible, reminded me
of the discussion we've been having about how the iPhone ads are
touting the UI as a feature and how novel that is.

My general attitude towards this article is one of cautious
skepticism, likely due to my being a cranky UXP consultant. It's also
likely due to the terms "animation" and "UI" being used in the same
paragraph (or sentence even). It makes me... twitchy.

However, one of the points in the article is that applications are
becoming more widget-like... simple, do-one-thing-and-do-it-well
pieces of code. It's also saying that people are beginning to expect
these types of apps to do what they do with a little flair. They give
the example of Disco, which smokes as you burn a CD (and apparently if
you blow into the microphone, the smoke will start to drift).

Now, being an early-adopting, beta-loving geek, this pretty accurately
describes my system. Tons of apps, each for a specific purpose. Some
with flair, others pretty invisible. But if you look at my computer
vs. my wife's computer... mine is basically unusable by anyone other
than me. My wife, I think, is a good representation of a lot of
computer users out there. Novel interfaces put her off... watching her
learn to use Joost, I saw many frowns and heard many curses. : ) So
this (unscientifically) leads me to believe that "flair" and highly
animated UIs will lead to more confusion among non-expert (or
non-obsessed) computer users.

To say nothing of the task of creating UI standards when it's
effortless to, say, turn the desktop upside down and make it into a
swirling vortex...

Thoughts?

Fred.

Comments

8 Jun 2007 - 1:00pm
dani malik
2005

I'm always surprised when I read that animations are a barrier to
good UI, because I feel strongly that they can enable it. Animations
can show you transitions in the state of an item on screen (something
animated into a folder, into a shopping cart, etc.), can call
attention to something or guide the user to the next step, or can
return realtime feedback to the user. Swirling vortexes aside, I
think deliberate, thoughtful animations are a great boon for users.

People are always going to overdo it, (which is why Nielsen
blacklisted Flash with one broad stroke) and produce confusing UIs
but the success rate is probably going to be about the same as static
HTML sites that I can't navigate.

It does however require new skills from us as designers. I find
designing animations is difficult and requires nuance. It definitely
can't be wireframed and thrown over the fence, because a fraction of
a second difference in an animation can be crucial.

Btw, I had some issues with the Joost interface too, but thought
better animation would have helped. I would have proposed a
different kind of animation for channel selection once you've
started watching a video.

dani

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17083

8 Jun 2007 - 1:30pm
Katie Albers
2005

--- dani <dmalik at laszlosystems.com> wrote:

> People are always going to overdo it, (which is why
> Nielsen
> blacklisted Flash with one broad stroke)

Well...no, not exactly. Flash made bookmarking and
other significantly important navigation methods
impossible. It's often read as his having blacklisted
it for overdoing it because the usual rationale for
using flash was "it's really cool." But while Nielsen
has traditionally opposed the use of technologies
which have a significant visual impact, it's always
been because the technologies, themselves, have
substantively interfered with the usability and
functionality of sites, not because they were used
poorly.

Many people believe he has been unduly conservative in
these condemnations, but they've been based in an
assessment of the effect on the user, not on aesthetic
judgments.

Katie

==============
Katie Albers
User Experience Consultant
katie at firstthought.com

____________________________________________________________________________________
Building a website is a piece of cake. Yahoo! Small Business gives you all the tools to get online.
http://smallbusiness.yahoo.com/webhosting

8 Jun 2007 - 1:52pm
Dave Malouf
2005

First to Kate ... but they have also been based on in proper
comparison and improper understanding of the total need that users
face and an improper understanding of what the technology CAN do, not
just what has BEEN done.

Dani,
When i think about "animation" in UI 90% of the time what I'm
really talking about is communicating transitions. Movement or
animation is how I do that, but communicating transitions to me is a
better way of selling the aesthetic and utilitarian aspects of
animation in a UI. It also helps people remove the superfluous uses.
If I'm animating and it isn't about clarify transitions then i
really have to ask why I'm using it as a UI element. It can still be
over done, but if you use the transition animation and compare it to
not using the transition animation and the latter is clearer (not
using it) then you probably don't need it.

Further, I want to firmly agree that few interaction designers are
trained well enough in animation to execute on it properly. We need
help from presentation designers to really do animation correctly and
that prototyping these transitions in a real interactive tool is a
hard requirement. Blend, Flash, Premiere, etc. should be a
requirement in your toolkit if you are doing desktop apps or RIAs.
Minimally Fireworks or Imageready that can create GIF Animations.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17083

8 Jun 2007 - 4:19pm
Mark Schraad
2006

an infinite universe is unsettling and a bit confusing. That in the
continuum of interaction design, we have Nielson as a stop at the far
conservative edge is comforting. Bu I do not think I have ever let
one of his 'rules' dictate my work in interaction design.

On Jun 8, 2007, at 2:00 PM, dani wrote:

> People are always going to overdo it, (which is why Nielsen
> blacklisted Flash with one broad stroke) and produce confusing UIs
> but the success rate is probably going to be about the same as static
> HTML sites that I can't navigate.

11 Jun 2007 - 10:07am
jrrogan
2005

We're using animation now in our application, and my knowledge of it is a
bit rough.

Note there is a broad body of visual flow knowledge which UI/UX designers
can leverage and is often taught in film courses called "Camera,
Lights, Sound". The film and editing industry has been studying transition
best practices for over 100 years. A "focused" ;) camera lights sound and
editing course hits on a lot of the best practices.

For example time becomes confused when a viewer sees one frame looking at
the left side of an actor, then the next frame displays the right side of
the actor.

I believe gaming has been leveraging Camera Lights Sound best practices for
some time.

11 Jun 2007 - 11:31am
Will Parker
2007

On Jun 11, 2007, at 8:07 AM, Rich Rogan wrote:

> We're using animation now in our application, and my knowledge of
> it is a
> bit rough.
>
> Note there is a broad body of visual flow knowledge which UI/UX
> designers
> can leverage and is often taught in film courses called "Camera,
> Lights, Sound". The film and editing industry has been studying
> transition
> best practices for over 100 years. A "focused" ;) camera lights
> sound and
> editing course hits on a lot of the best practices.
>
> For example time becomes confused when a viewer sees one frame
> looking at
> the left side of an actor, then the next frame displays the right
> side of
> the actor.
>
> I believe gaming has been leveraging Camera Lights Sound best
> practices for
> some time.

Having done my time sweating over hand-drawn animation cels back in
college, I can tell you that every interaction designer owes it to
their clients to spend serious think-time over a copy of 'The
Illusion of Life: Disney Animation" (Johnston and Thomas, 1995, ISBN
0786860707). See also http://frankanollie.com/PhysicalAnimation.html.

At the very least, do a Google on 'The 12 Principles Of
Animation' (http://www.google.com/search?&q=12+principles+of
+animation). Here's a PDF summarizing these: (http://
www.dgp.toronto.edu/~karan/courses/csc2529/principles.pdf).

The thing to remember -- as always in interaction design -- is that
the chief goal should be to inform and guide the user.

In my opinion, 'delighting the user' (which has been bandied about as
a primary design goal recently) will arise naturally out of using
animation principles to improve user understanding of the interface.
Adding animation for empty effect is as pointless as pasting a
picture of the Mona Lisa on a dinner plate.

- Will

Will Parker
wparker at ChannelingDesign.com

“I wish developing great products was as easy as writing a check. If
that were the case, then Microsoft would have great products.” -
Steve Jobs

11 Jun 2007 - 12:01pm
.pauric
2006

Rich: "The film and editing industry has been studying transition
best practices for over 100 years."

I really... REALLY like the transition animation on this flash front
end for google video
http://www.neave.tv/#pikapika Its subtle but effective and
demonstrates a sweet spot between nothing and too much.

On the film industry: I wonder if there are similarities between the
over use of computer animation (as a technology) and state animation
in UIs. The technology can be used to aid the 'story' but it isnt
a substitute. Anyone seen spiderman III?

What we need is an Animations Pattern Library for UIs including
things things as simple as ajax'd drag/drop up to blowing smoke off
your cd burning.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17083

12 Jun 2007 - 6:04am
Fred Beecher
2006

> On Jun 11, 2007, at 8:07 AM, Rich Rogan wrote:
> >
> > Note there is a broad body of visual flow knowledge which UI/UX
> > designers
> > can leverage and is often taught in film courses called "Camera,
> > Lights, Sound". The film and editing industry has been studying
> > transition
> > best practices for over 100 years. A "focused" ;) camera lights
> > sound and
> > editing course hits on a lot of the best practices.

On 6/11/07, Will Parker <wparker at channelingdesign.com> wrote:
> Having done my time sweating over hand-drawn animation cels back in
> college, I can tell you that every interaction designer owes it to
> their clients to spend serious think-time over a copy of 'The
> Illusion of Life: Disney Animation" (Johnston and Thomas, 1995, ISBN
> 0786860707). See also http://frankanollie.com/PhysicalAnimation.html.
>
> At the very least, do a Google on 'The 12 Principles Of
> Animation' (http://www.google.com/search?&q=12+principles+of
> +animation). Here's a PDF summarizing these: (http://
> www.dgp.toronto.edu/~karan/courses/csc2529/principles.pdf).

This is excellent! Both of these, I think, are great places to start
in order to develop guidelines & standards for animated UIs. Now,
let's see... does the local community college have film classes? : )

- F.

12 Jun 2007 - 9:09am
jrrogan
2005

There are often community based film organizations, especially where film is
a major part of the economy, (LA, NY, Vancouver). I took Camera, Lights,
Sound at "Video In" in Vancouver Canada. Most of these Orgs are non profit.

As well IATSE, (The International Alliance of Theatrical Stage Emp...) would
have resources for courses such as these. See "
http://www.iatse-intl.org/home.html"

Rich

On 6/12/07, Fred Beecher <fbeecher at gmail.com> wrote:
>
> > On Jun 11, 2007, at 8:07 AM, Rich Rogan wrote:
> > >
> > > Note there is a broad body of visual flow knowledge which UI/UX
> > > designers
> > > can leverage and is often taught in film courses called "Camera,
> > > Lights, Sound". The film and editing industry has been studying
> > > transition
> > > best practices for over 100 years. A "focused" ;) camera lights
> > > sound and
> > > editing course hits on a lot of the best practices.
>
> On 6/11/07, Will Parker <wparker at channelingdesign.com> wrote:
> > Having done my time sweating over hand-drawn animation cels back in
> > college, I can tell you that every interaction designer owes it to
> > their clients to spend serious think-time over a copy of 'The
> > Illusion of Life: Disney Animation" (Johnston and Thomas, 1995, ISBN
> > 0786860707). See also http://frankanollie.com/PhysicalAnimation.html.
> >
> > At the very least, do a Google on 'The 12 Principles Of
> > Animation' (http://www.google.com/search?&q=12+principles+of
> > +animation). Here's a PDF summarizing these: (http://
> > www.dgp.toronto.edu/~karan/courses/csc2529/principles.pdf).
>
> This is excellent! Both of these, I think, are great places to start
> in order to develop guidelines & standards for animated UIs. Now,
> let's see... does the local community college have film classes? : )
>
> - F.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

12 Jun 2007 - 9:42am
Will Parker
2007

On Jun 12, 2007, at 4:04 AM, Fred Beecher wrote:

> On 6/11/07, Will Parker <wparker at channelingdesign.com> wrote:
>> Having done my time sweating over hand-drawn animation cels back in
>> college, I can tell you that every interaction designer owes it to
>> their clients to spend serious think-time over a copy of 'The
>> Illusion of Life: Disney Animation" (Johnston and Thomas, 1995, ISBN
>> 0786860707). See also http://frankanollie.com/PhysicalAnimation.html.
>>
>> At the very least, do a Google on 'The 12 Principles Of
>> Animation' (http://www.google.com/search?&q=12+principles+of
>> +animation). Here's a PDF summarizing these: (http://
>> www.dgp.toronto.edu/~karan/courses/csc2529/principles.pdf).
>
> This is excellent! Both of these, I think, are great places to start
> in order to develop guidelines & standards for animated UIs. Now,
> let's see... does the local community college have film classes? : )

Two -- no, three -- things you can do:

1) Get the books mentioned above. Add in Don Bluth's 'The Art of
Storyboard' while you're at it.

2) Get a notebook with pre-printed storyboard screens and start
sketching out the progress of any UI behaviors you find interesting.
(http://www.moleskineus.com/storybook.html). For example, I'm
currently working on converting the interesting animation behavior
shown in yesterday's Mac OS X Leopard demo into my own storyboards.

Storyboarding other people's work forces you to think about how the
other designer(s) solved a particular interface problem, down to the
order of individual motion components. And by the way, when you have
to sketch those out by hand, very soon you'll get in the habit of
asking yourself "Why did they go to the extra trouble of doing THAT?
What's the intent? Do we need that, or is it mere decoration? CAN I
LEAVE IT OUT?"

3) Check the ASIFA site (http://asifa.net/) to see if you have an
International Animated Film Society chapter in your town. Most large
cities in the US and Western Europe do (and of course there's always
the Czechs!) Even if you don't learn anything from the exercise,
you'll find a host of talented motion graphics people who'd love a
chance to work on your projects.

- Will

Will Parker
wparker at ChannelingDesign.com

“I wish developing great products was as easy as writing a check. If
that were the case, then Microsoft would have great products.” -
Steve Jobs

12 Jun 2007 - 5:32pm
Josh Damon Williams
2007

On Jun 12, 2007, at 7:42 AM, Will Parker wrote:

> 2) Get a notebook with pre-printed storyboard screens and start
> sketching out the progress of any UI behaviors you find interesting.

Another option -- there's storyboarding templates on the site
AnimationMeat.com (run by a former colleague from my former career)
-- it would be quite easy to adapt them for application design:
http://www.animationmeat.com/templates/templates.html
http://www.animationmeat.com/templates_downloads/tv_storyboard_template.pdf
http://www.animationmeat.com/templates_downloads/feature_storyboard_temp...

(And for those who are curious beyond storyboarding, he also has a
small trove of other general animation resources, guides and
reference materials on the site. )

Josh Damon Williams
Hot Studio, Inc.
josh at hotstudio.com
p: 415 284 7250 x36
f: 415 284 7255

12 Jun 2007 - 5:38pm
Will Parker
2007

On Jun 12, 2007, at 3:32 PM, Josh Damon Williams wrote:

> On Jun 12, 2007, at 7:42 AM, Will Parker wrote:
>
>> 2) Get a notebook with pre-printed storyboard screens and start
>> sketching out the progress of any UI behaviors you find interesting.
>
> Another option -- there's storyboarding templates on the site
> AnimationMeat.com (run by a former colleague from my former career)
> -- it would be quite easy to adapt them for application design:
> http://www.animationmeat.com/templates/templates.html
> http://www.animationmeat.com/templates_downloads/
> tv_storyboard_template.pdf
> http://www.animationmeat.com/templates_downloads/
> feature_storyboard_template.pdf
>
> (And for those who are curious beyond storyboarding, he also has a
> small trove of other general animation resources, guides and
> reference materials on the site. )

Josh: Thanks! Great set of resources!

- Will

Will Parker
wparker at ChannelingDesign.com

“I wish developing great products was as easy as writing a check. If
that were the case, then Microsoft would have great products.” -
Steve Jobs

13 Jun 2007 - 1:13pm
Matt Attaway
2004

I have to throw in the book that got me through my traditional and
computer animation classes: The Animator's Survival Guide by Richard
Williams. The history alone in the book makes it a fabulous read, but
I really like his take on the importance of timing in animation.
It's definitely focused on character animation, but I think there is
still a lot to learn from it.

Matt

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17083

Syndicate content Get the feed