1
Final Exam Study Guide
Lecture 6: Animation & Interactivity
1. Animation
➢ Animations use a fast-paced presentation of changing static images to simulate motion
➢ Animation can be used to
➢ Catch a visitor’s attention
➢ Demonstrate a simple process
➢ Illustrate change over time
➢ Help user understand how to interact with the website
➢ Creation Process
▪ Frame-by-frame animation
▪ Animation with tweening
Animation File Types (Animated GIFs(.gif) and Flash(.fla)
➢ Animated GIFs (.gif) {A single file that stores separate images within multiple animation
frames}
➢ Advantages
▪ Web browser support; no need for plug-ins
▪ Use streaming technology
▪ Easy to create
▪ Frames-per-second (fps) {The sequence of frames over a specified time interval
usually stated in frames-per-second (fps)}
▪ Size
➢ Size of the file is dependent on
▪ Dimension of images
▪ Number of images
▪ Length of Animation
▪ Extent of difference from one image to the next
➢ Flash Animation (.swf)
▪ Advantages
· File size is small
· Image quality is high
· Flash animation allows interactivity and accessibility
, 2
▪ Disadvantages
· Requires plug-in, i.e., Adobe Flash Player
· Not supported by all browsers and platforms
2. Interactivity
➢ UX-Driven Interactivity (Animation that changes when the device moves)
▪ Put the website visitor’s needs first
· Provide context-specific navigation
◆ E.g., sidebar, off-canvas navigation links
· Engage and instruct the user
◆ E.g., galleries, slideshows
· Save screen space
◆ E.g., sparse design, accomplish multiple goals, call-to-action (CTA)
· Adapt to touch screens
◆ E.g., buttons that change color/shape after being clicked
· Respond to actions
◆ E.g., scrolling, shaking, rotating the device
➢ Web-based Forms (Web Based tools can assist you in creating forms)
▪ Structured web documents in which a website visitor can enter information or select options
· Text boxes
· Check boxes
· Option buttons
· Drop-down list
· Send or Submit button
▪ Each element is a field
· Follow logical sequence for field order
▪ Web-based tools
· E.g., Google Forms
▪ Usability design guidelines
· Break forms into multiple form pages
· Enable autocomplete or autofill
· Include required fields
· Enable users to confirm data before submitting
· Include a reset button to clear the form quickly
· Enable users to indicate values that can be copied
· Make text boxes large enough to hold data
· Use an input mask
· Send an e-mail or text confirmation notice
, 3
· Use check boxes and provide comment space
➢ Widgets (or Gadgets)
▪ Small code objects that provide dynamic web content
· E.g., clocks, weather reports, breaking news
➢Blogs
▪ Popular way to promote website interactivity
· E.g., Blogger, WordPress, Medium
➢ Comments
▪ Enhances website interactivity
· E.g., premade script, Disqus
➢ Avatars (Website avatars are alternate virtual identities that can be used as a virtual models)
▪ Alternative personas or virtual identities for MMOGs or 3D virtual worlds
· E.g., SitePal
➢ Live Chat
▪ Allows visitors to ask questions and receive answers in real time using text, voice, or video
· E.g., Provide Support, CustomerReach, BoldChat
▪ Reactive/broadcast chat: visitors initiate the chat
▪ Proactive chat: window opens automatically
▪ Chat agents: handle the visitor’s query
Lecture 7: Audio & Video
1. Audio
➢ Analog vs. Digital
▪ Sound in the natural world is analog
▪ Natural sound is the result of a stream of continuous changes of vibrations in the atmosphere
▪ Sound must be in digital format to be used on the web.
▪ The process of converting an analog sound to numbers is called encoding or sound
sampling.
➢ Basic Digital Audio Concepts
▪ Sampling rate
· Number of samples obtained per second
· Standard sample rates: 8 KHz (AM radio), 11.025 KHz, 11.127 KHz, 22.05 KHz,
44.1 KHz (CD quality), 48KHz (DVD quality)
▪ Bit depth
· Number of bits used to sample the sound
· Standard bit depth: 8-bit (telephone), 16-bit (CD quality), to 20-, 24-, 32-, and 48-bit
depths (high-end digital audio)
▪ Channel (mono/stereo)
, 4
· Mono: one-channel
· Stereo: two-channel
➢ Web Audio Formats
▪ .aac / .aiff / .Au / .m4a / .mp3 / .ogg / .ra, .rm / .wav / .wma
➢ Media Delivery Methods
▪ Downloadable / Streaming / Progressive Downloading or Pseudo Streaming
Final Exam Study Guide
Lecture 6: Animation & Interactivity
1. Animation
➢ Animations use a fast-paced presentation of changing static images to simulate motion
➢ Animation can be used to
➢ Catch a visitor’s attention
➢ Demonstrate a simple process
➢ Illustrate change over time
➢ Help user understand how to interact with the website
➢ Creation Process
▪ Frame-by-frame animation
▪ Animation with tweening
Animation File Types (Animated GIFs(.gif) and Flash(.fla)
➢ Animated GIFs (.gif) {A single file that stores separate images within multiple animation
frames}
➢ Advantages
▪ Web browser support; no need for plug-ins
▪ Use streaming technology
▪ Easy to create
▪ Frames-per-second (fps) {The sequence of frames over a specified time interval
usually stated in frames-per-second (fps)}
▪ Size
➢ Size of the file is dependent on
▪ Dimension of images
▪ Number of images
▪ Length of Animation
▪ Extent of difference from one image to the next
➢ Flash Animation (.swf)
▪ Advantages
· File size is small
· Image quality is high
· Flash animation allows interactivity and accessibility
, 2
▪ Disadvantages
· Requires plug-in, i.e., Adobe Flash Player
· Not supported by all browsers and platforms
2. Interactivity
➢ UX-Driven Interactivity (Animation that changes when the device moves)
▪ Put the website visitor’s needs first
· Provide context-specific navigation
◆ E.g., sidebar, off-canvas navigation links
· Engage and instruct the user
◆ E.g., galleries, slideshows
· Save screen space
◆ E.g., sparse design, accomplish multiple goals, call-to-action (CTA)
· Adapt to touch screens
◆ E.g., buttons that change color/shape after being clicked
· Respond to actions
◆ E.g., scrolling, shaking, rotating the device
➢ Web-based Forms (Web Based tools can assist you in creating forms)
▪ Structured web documents in which a website visitor can enter information or select options
· Text boxes
· Check boxes
· Option buttons
· Drop-down list
· Send or Submit button
▪ Each element is a field
· Follow logical sequence for field order
▪ Web-based tools
· E.g., Google Forms
▪ Usability design guidelines
· Break forms into multiple form pages
· Enable autocomplete or autofill
· Include required fields
· Enable users to confirm data before submitting
· Include a reset button to clear the form quickly
· Enable users to indicate values that can be copied
· Make text boxes large enough to hold data
· Use an input mask
· Send an e-mail or text confirmation notice
, 3
· Use check boxes and provide comment space
➢ Widgets (or Gadgets)
▪ Small code objects that provide dynamic web content
· E.g., clocks, weather reports, breaking news
➢Blogs
▪ Popular way to promote website interactivity
· E.g., Blogger, WordPress, Medium
➢ Comments
▪ Enhances website interactivity
· E.g., premade script, Disqus
➢ Avatars (Website avatars are alternate virtual identities that can be used as a virtual models)
▪ Alternative personas or virtual identities for MMOGs or 3D virtual worlds
· E.g., SitePal
➢ Live Chat
▪ Allows visitors to ask questions and receive answers in real time using text, voice, or video
· E.g., Provide Support, CustomerReach, BoldChat
▪ Reactive/broadcast chat: visitors initiate the chat
▪ Proactive chat: window opens automatically
▪ Chat agents: handle the visitor’s query
Lecture 7: Audio & Video
1. Audio
➢ Analog vs. Digital
▪ Sound in the natural world is analog
▪ Natural sound is the result of a stream of continuous changes of vibrations in the atmosphere
▪ Sound must be in digital format to be used on the web.
▪ The process of converting an analog sound to numbers is called encoding or sound
sampling.
➢ Basic Digital Audio Concepts
▪ Sampling rate
· Number of samples obtained per second
· Standard sample rates: 8 KHz (AM radio), 11.025 KHz, 11.127 KHz, 22.05 KHz,
44.1 KHz (CD quality), 48KHz (DVD quality)
▪ Bit depth
· Number of bits used to sample the sound
· Standard bit depth: 8-bit (telephone), 16-bit (CD quality), to 20-, 24-, 32-, and 48-bit
depths (high-end digital audio)
▪ Channel (mono/stereo)
, 4
· Mono: one-channel
· Stereo: two-channel
➢ Web Audio Formats
▪ .aac / .aiff / .Au / .m4a / .mp3 / .ogg / .ra, .rm / .wav / .wma
➢ Media Delivery Methods
▪ Downloadable / Streaming / Progressive Downloading or Pseudo Streaming
