SlideShare a Scribd company logo
Highly Animated Webpages
        pros & cons
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.
Usually, the business request ends up as
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
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
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
Five reasons for avoiding
 animation in webpages

1 Distraction

2 Lack of control

3 Banner blindness

4 Marketing mediums

5 Search engines crawling
1 Distraction
Human’s visual periphery is very
sensitive to motion.

Therefore users eye sight is
redirected to the animated banners,
causing unwanted distractions.
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.
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.
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.
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.
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.
Three reasons for using animation
          in webpages

     1 To give meaning to interaction

     2 To get users’ attention

     3 Online games
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.
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
3 Online games




      Games are expected to be animated.

      They are also truly interactive with users.
ere
                               th
                         u   t
                   s   o
             p   le
           am
         ex
   o d
G o
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
Baltijos prodiuseriy grupe




Each section is shown by moving content from left to right.

Available on www.balticproducers.com
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/
Slides designed by:

       emanuel.m.fernandes@gmail.com


End.
                             28 September 2009

More Related Content

PDF
M2 roadshow europe ian homer bemoko
PDF
MoZeus Worldwide 2012
PDF
6 Recommendations For Static Banner Ads
PPTX
Diagnosing account, enrolment and snapshot problems using the APIs
PDF
Snapshot composed 2013
PPT
Snapshot of Social Media Trends 2016
PDF
The Best Way to Talk about Life Insurance by Marc Firestone
PPTX
A Demographic Snapshot of Austin by Ryan Robinson
M2 roadshow europe ian homer bemoko
MoZeus Worldwide 2012
6 Recommendations For Static Banner Ads
Diagnosing account, enrolment and snapshot problems using the APIs
Snapshot composed 2013
Snapshot of Social Media Trends 2016
The Best Way to Talk about Life Insurance by Marc Firestone
A Demographic Snapshot of Austin by Ryan Robinson

Viewers also liked (12)

PPTX
Process model
PPTX
Content Recycling - B2B Marketing Summit 2012 - Scot McKee
PDF
Create Videos for Your Blended Classroom
PPS
Nice quotes animated
PDF
Creative Commons Licences-Quick Fact Sheets
PPT
College Success Chapter 1: You and Your College Experience
PDF
FREE TOOLS for ANIMATION
PPSX
Animated photography
PPT
Presentation spain waste management
PDF
Animated Radar Presentation Template
PDF
Fastlane snapshot presentation
PPTX
Getting Serious About Carbon Pricing: Putting a Price on Carbon #priceoncarbon
Process model
Content Recycling - B2B Marketing Summit 2012 - Scot McKee
Create Videos for Your Blended Classroom
Nice quotes animated
Creative Commons Licences-Quick Fact Sheets
College Success Chapter 1: You and Your College Experience
FREE TOOLS for ANIMATION
Animated photography
Presentation spain waste management
Animated Radar Presentation Template
Fastlane snapshot presentation
Getting Serious About Carbon Pricing: Putting a Price on Carbon #priceoncarbon
Ad

Similar to Highly animated webpages (20)

DOCX
Task 1
DOCX
Unit 65 assignment 1
POTX
Using animation to enhance ux
DOCX
Assignment 1
PDF
UX Antwerp Meetup March 2018: "Motion in Web Design" by Matteo Setti, Emakina
PPT
Effective Use of Animation in Education, Advertising, and Entertainment
PDF
The Role of Animation in Enhancing User Experience | Devoq Design
DOC
Motion graphics worksheet web banners
PPTX
Big data visualization presentation on p
PDF
Types of Animation in Mobile App Development.pdf
PDF
UX in Motion
DOCX
Unit 65 year 2 rog
PPTX
ANIMATED BANNERS DESIGNING TIPS
PPTX
Animated GIFs
DOC
Motion graphics worksheet web banners
PPTX
Importance of Animation in Advertising
PDF
Web animation
DOCX
Unit 65
DOCX
Assignment 1
PDF
MCAD 2009 - Future of Advertising: session #04 recap (Feb 16)
Task 1
Unit 65 assignment 1
Using animation to enhance ux
Assignment 1
UX Antwerp Meetup March 2018: "Motion in Web Design" by Matteo Setti, Emakina
Effective Use of Animation in Education, Advertising, and Entertainment
The Role of Animation in Enhancing User Experience | Devoq Design
Motion graphics worksheet web banners
Big data visualization presentation on p
Types of Animation in Mobile App Development.pdf
UX in Motion
Unit 65 year 2 rog
ANIMATED BANNERS DESIGNING TIPS
Animated GIFs
Motion graphics worksheet web banners
Importance of Animation in Advertising
Web animation
Unit 65
Assignment 1
MCAD 2009 - Future of Advertising: session #04 recap (Feb 16)
Ad

Recently uploaded (20)

PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PPTX
joggers park landscape assignment bandra
PPTX
EDP Competencies-types, process, explanation
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
Special finishes, classification and types, explanation
DOCX
actividad 20% informatica microsoft project
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
CLASSIFICATION OF YARN- process, explanation
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
AD Bungalow Case studies Sem 2.pptxvwewev
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
mahatma gandhi bus terminal in india Case Study.pptx
joggers park landscape assignment bandra
EDP Competencies-types, process, explanation
Interior Structure and Construction A1 NGYANQI
Special finishes, classification and types, explanation
actividad 20% informatica microsoft project
YV PROFILE PROJECTS PROFILE PRES. DESIGN
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
YOW2022-BNE-MinimalViableArchitecture.pdf
CLASSIFICATION OF YARN- process, explanation
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
Tenders & Contracts Works _ Services Afzal.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf

Highly animated webpages

  • 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