Animation is a powerful away of communication in web design. However when misused, leads to a poor interaction. This presentation highlights how animation can be properly used when designing webpages.

1. Highly Animated Webpages
pros & cons

2. All starts with a typical
business request...
”The central image should be more
dynamic, interactive and commercial.
We recommend (...), to use a window
(...) on the left side, with promos
rotating, transmitting movement,
novelty and dynamics.
”
veridic request, by a person of the business department.

3. Usually, the business request ends up as

4. Big and small banners calling for your attention and
breaking the visual search of text
highly
animated
banner
fast-pacing
images
slideshow
fast-pacing text changes
abrupt images changes

5. A bunch of different animated commercials, all trying to
get your attention, and none gets it
unstoppable
TV alike
commercials
big and highly
animated side
banner
abrupt and fast-pacing images slideshow

6. Banners very close to text, directly disturbing the
reading task
big and highly
animated side
banner
endless playing
banner
one-time play banner, very close to text

7. Five reasons for avoiding
animation in webpages
1 Distraction
2 Lack of control
3 Banner blindness
4 Marketing mediums
5 Search engines crawling

8. 1 Distraction
Human’s visual periphery is very
sensitive to motion.
Therefore users eye sight is
redirected to the animated banners,
causing unwanted distractions.

9. 2 Lack of control
Users like to be in charge and
control what they are using.
By using endless running banners,
you are removing control to users.

10. 3 Banner blindness
Users usually ignore sections in webpages
that look like banners.
Some commercials may be considered as
regular banners and users may ignore them.

11. 4 Marketing mediums
Traditional marketing is a monologue. Web marketing is a conversation.
Users consume whatever the Users consume what they want. They
advertiser propose. choose and interact with content.
image from Flickr
user heymynameispaul.

12. 5 Search engines crawling
Most Flash animations don’t allow
search engines to crawl content.
This means the content on your
animations won’t appear in search
engine page results like in Google,
Bing, Yahoo, Sapo, etc.

13. Nevertheless
”Does not means you shouldn’t use
animation in your webpages. Instead,
you should know when and where to
animate your webpage.
”
veridic response by a person of the user experience department.

14. Three reasons for using animation
in webpages
1 To give meaning to interaction
2 To get users’ attention
3 Online games

15. 1 To give meaning to interaction
The user interface when animated properly becomes
self-explanatory to users.
Dragging, moving content, fading in and out, etc, all
these self-explain the interaction performed by the user.

16. 2 To get users’ attention
Humans’ periphery vision is very sensitive
to motion.
For example on a chat application,
incoming messages can be warned to
users, with a slight animation.
NEW MESSAGE

17. 3 Online games
Games are expected to be animated.
They are also truly interactive with users.

18. ere
th
u t
s o
p le
am
ex
o d
G o

19. Sprint: Plug into Now
Shows the Sprint’s network capabilities, by using non-stop animations.
All animations are designed to fit together and users expect animation.
Available on now.sprint.com

20. Baltijos prodiuseriy grupe
Each section is shown by moving content from left to right.
Available on www.balticproducers.com

21. Online Experience Store | Wireless from AT&T
Mimics brick and mortar at&t stores, with expected
interactive and animated behaviors.
Available on www.wireless.att.com/onlineexperience/

22. Slides designed by:
emanuel.m.fernandes@gmail.com
End.
28 September 2009