Download presentation
Presentation is loading. Please wait.
1
Copyright © 2004 by Prentice Hall
User-Centered Website Development: A Human-Computer Interaction Approach Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
2
Copyright © 2004 by Prentice Hall
Daniel D. McCracken City College of New York Rosalee J. Wolfe DePaul University With a foreword by: Jared M. Spool, Founding Principal, User Interface Engineering PowerPoint slides by Dan McCracken, with thanks to Rosalee Wolfe, S. Jane Fritz of St. Joseph’s College, and Rhonda Schauer Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
3
Copyright © 2004 by Prentice Hall
Credits Slides 17-21: Courtesy of Lori Smallwood. Slides 22, 25-26: Courtesy of Jorge Toro. Slides 27-30: Courtesy of Karin Christensen and Dr. Edward K. Wagner. Slides 31-33: Courtesy of Xerox Corporation. Slides 34-35: Courtesy of Erik B. Steiner. Slides 40-41: Courtesy of Roche. Slides 42-45: Courtesy of John McDonald. Slides 47-50: Courtesy of Phillippe van Nedervelde E-spaces n.v. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
4
Copyright © 2004 by Prentice Hall
Credits, continued Slides 51-54: Courtesy of the DePaul American Sign Language Project. Slides 55-57: Courtesy of Eyematic. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
5
Copyright © 2004 by Prentice Hall
11. Multimedia In this chapter you will learn about: Basic multimedia types and available file formats Advantages and disadvantages of using multimedia Technology considerations when using multimedia Design guidelines for using multimedia on the Web New developments in multimedia delivery And you will see many examples Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
6
Copyright © 2004 by Prentice Hall
Multimedia overview The term multimedia refers to a combination of two or more media In this chapter we consider: Audio Video Animation Other media: Printed or spoken words Music and other audio Still images Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
7
Copyright © 2004 by Prentice Hall
11.2 Audio Can enhance a Web page with speech, music, or other sounds Helpful to those with vision limitations Non-streaming: entire file downloaded and stored on disk before playback can begin Streaming: data is buffered; playback begins as soon as there is enough to play without too many pauses for buffering to catch up Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
8
Copyright © 2004 by Prentice Hall
Good use of audio Be sure that any dialog in audio is also available as text Some people prefer text Needed by the deaf When using audio to set a mood, keep volume low When using audio to get attention, keep it brief Give users the option to turn sound off; endless loops can be extremely annoying Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
9
Copyright © 2004 by Prentice Hall
Audio formats for Web Extension Format Name Originator Streaming? Additional software? .wav Waveform Microsoft No .au Sun Audio Sun Microsystems .aiff Audio Interchange Apple .mid Musical Instrument Digital Interface International MIDI Association .mp3 MPEG Audio (Layer 3) Fraunhofer IIS-A and the ISO Yes .ra Real Audio Real Networks Yes. Available: Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
10
Copyright © 2004 by Prentice Hall
11.3 Video A powerful medium, conveying: Motion Changing facial expressions Associated audio Disadvantage: Very slow for users with dialup connections Best for users with broadband connections Which is approaching half of U.S. households that have Internet connection Includes most company intranets Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
11
Video download times at 56Kb/sec
Description Run time Screen resolution File size (MB) Download time at 56 Kbps Museum tour (high quality video) 7 min, 30 sec 320x180 24 1 hour, 12 min Museum tour (medium quality video) 5.74 18 minutes Museum tour (low quality video) 3.07 10 minutes Speech (high quality video) 1 min, 19 sec 160x120 3.3 Speech (low quality video) 0.2 1 minute Helmet camera video from mountain bike trail 170x145 9.5 30 minutes See text for URLs. The 10-second limit for users’ attention is not absolute. If the user really wants to see your video, a longer wait will be tolerated. Jared Spool has more recent research that indicates a willingness to wait. If the users achieve their goals, they may underestimate the time a download took by a large factor. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
12
Broadband is coming on fast
“Some 31 percent of United States households that have Internet access have high-speed connections -- up 50 percent from a year ago, according to the Pew Internet and American Life Project. Broadband use is widely considered to be in its infancy, but the pace of adoption is considered by many industry analysts to be as fast as that of any mass-market technology in recent memory.” – New York Times, June 12, 2003 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
13
Cable modem is the leader
“At the end of the first quarter of this year, 68 percent of households with broadband access used cable modems, compared with 31 percent with D.S.L. service, according to the Yankee Group, a market research firm.” ibid. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
14
Video download times at 1.5Mbps
Description Run time Screen resolution File size (MB) Download time at 1.5Mbps Museum tour (high quality video) 7 min, 30 sec 320x180 24 2 minutes, 40 seconds Museum tour (medium quality video) 5.74 38 seconds Museum tour (low quality video) 3.07 21 seconds Speech (high quality video) 1 min, 19 sec 160x120 3.3 22 seconds Speech (low quality video) 0.2 1 second Helmet camera video from mountain bike trail 170x145 9.5 1 minute, 3 seconds 1.5 Mbps is conservative, in my experience with a cable modem. I routinely get 1.7Mbps, and have seen as high as 2.5Mbps. Speeds depend on traffic loads all along the way, obviously. At 9:30 on a Friday morning, I just got 2.2Mbps download. At that speed the indicated download time of the helmet camera download would be under a minute—but the site is in the United Kingdom. The ocean-floor fiber is an unlikely bottleneck, but what happens in the last mile to the site is anybody’s guess. The download took a little over two minutes. The low-quality video of a speaker really did start in about a second. At 11:30 on the same Friday morning, I just got 2.37Kbps. Our cable modem service costs $49/month, which includes my wife’s Earthlink account. We have a wireless hub; both of us have broadband for a total cost of about $75/month, including Earthlink and AOL accounts. I know people who have four computers in their homes, all running off one cable modem and one wireless hub. Oh, and we get TV for that, too. DSL is cheaper, currently—unless you have multiple users in the home. Prices will drop, penetration will increase, and speeds will increase. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
15
So: can you ignore those 56Kbps users?
Of course not Broadband penetration will never be 100% It may level off rather below that Those people number in the tens of millions; you can’t ignore them But don’t ignore the cable modem folks either They definitely can download your video Downloading the RealPlayer over a cable modem takes a couple of minutes And that’s not the end: the visionaries are pushing for FFTH (Fiber To The Home), at 100Mbps It’s not an either/or situation. 56Kbps will be around for a long time. You want that business. But broadband penetration is growing rapidly. All Starbucks in Manhattan are hot spots: open up your WiFi-enabled laptop, put your latte in a safe place, and log on. At this time of transition, websites must consider both ends of the spectrum. For another time test, I just downloaded the 15.3M Acrobat Reader 6.0 in a little over a minute. Don’t worry so much about your 56Kbps users that you ignore those of us who can download 35 times faster than that. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
16
Tips for recording video
Use a tripod You get a much better image The reduction of motion improves compression Use a neutral background Better visually, and also improves compression Get in close to your subject Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
17
Copyright © 2004 by Prentice Hall
Medium shot Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
18
Copyright © 2004 by Prentice Hall
Close up shot Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
19
Extreme close-up – the best
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
20
Close-up shots retain more facial detail
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
21
Close-up shot, magnified to show detail
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
22
Text on a Web page is easier to read than a caption on a video
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
23
Video formats for the Web
Name File extension Originator Additional codec? Streaming? Additional player? Audio-Video Interlaced .avi Microsoft Yes No QuickTime .mov .qt Apple Configurable MPEG Video (MPEG-4) .mpg Motion Picture Expert Group Real Video .ram .rm RealNetworks Yes – requires server software Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
24
Copyright © 2004 by Prentice Hall
11.4 Animation Definition: synthetic apparent motion created through artificial means Can sometimes be stored more compactly than video, speeding downloads Offers a richer set of interactions than video An attention-getter Good for demonstrating transitions and for explaining complex systems Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
25
Using animation to focus attention, 1
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
26
Using animation to focus attention, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
27
Animation shows how a virus attacks a human cell, 1
Play these four quickly for impact. Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
28
Animation shows how a virus attacks a human cell, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
29
Animation shows how a virus attacks a human cell, 3
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
30
Animation shows how a virus attacks a human cell, 4
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
31
Copyright © 2004 by Prentice Hall
Animation showing operation of a Xerox Phaser 850® network color printer, 1 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
32
Copyright © 2004 by Prentice Hall
Animation showing operation of a Xerox Phaser 850® network color printer, 2 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
33
Copyright © 2004 by Prentice Hall
Animation showing operation of a Xerox Phaser 850® network color printer, 3 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
34
Animation can explain complex systems
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
35
Such as university parking regulations
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
36
Vector-based vs. pixel-based formats
Pixel-based format gives the information for every pixel; like a bitmap Vector-based format lists the shapes, with mathematical descriptions of lines and curves Vector-based format can be very much more compact, saving storage and speeding downloads Vector-based format can also improve appearance Vector-based format permits much better results when images sizes are changed But: vector-based format doesn’t display automatically in a browser; user must have or download a player Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
37
A frame from an animation, both formats; first frame
1 (2,3) (3,2) (4,5) (2,5) Pixel-based representation Vector-based representation Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
38
A frame from an animation, both formats; second frame
1 (1,0) Pixel-based representation Vector-based representation Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
39
Comparing pixel-based (top) and vector-based formats
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
40
Animation depicting HIV infection and possible drug action, 1
Note buttons giving user control of animation Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
41
Animation depicting HIV infection and possible drug action, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
42
Java applet simulating structural failure, 1
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
43
Java applet simulating structural failure, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
44
Java applet simulating structural failure, 3
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
45
Java applet simulating structural failure, 4
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
46
11.5 Future Developments: 3D Animation
Provides more information and flexibility than the 2D animation we have seen Many formats; the open standard is Virtual Reality Markup Language (VRML) H-Anim is the standard for human animation using avatars (see Slide 51) A key technology: after an initial download, movement is specified by giving only the changes Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
47
Tour of the Munich Airport Center, in interactive 3D, 1
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
48
Tour of the Munich Airport Center, in interactive 3D, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
49
Tour of the Munich Airport Center, in interactive 3D, 3
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
50
Tour of the Munich Airport Center, in interactive 3D, 4
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
51
Copyright © 2004 by Prentice Hall
An avatar Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
52
Copyright © 2004 by Prentice Hall
Level of detail, 1 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
53
Copyright © 2004 by Prentice Hall
Level of detail, 2 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
54
Copyright © 2004 by Prentice Hall
Level of detail, 3 Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
55
Successive refinement, 1
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
56
Successive refinement, 2
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
57
Successive refinement, 3
Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
58
Copyright © 2004 by Prentice Hall
Summary In this chapter you learned about: Basic multimedia types and available file formats Audio Video 2D animation 3D animation The strengths and limitations of each Technology considerations when using multimedia Design guidelines for using multimedia on the Web New developments in multimedia delivery Chapter 11: Multimedia Copyright © 2004 by Prentice Hall
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.