Chapter 10: TypographyCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach

Chapter 10: TypographyCopyright © 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 10: TypographyCopyright © 2004 by Prentice Hall 10. Typography In this chapter you will learn about: The basic terminology and concepts of working with type A dozen typefaces and their characteristics What screen-friendly fonts are, and three examples How typography on the Web differs from typography in print How—using guidelines provided—to design typography for the Web that is readable, effective, and attractive

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.2 Concepts and Terminology

Chapter 10: TypographyCopyright © 2004 by Prentice Hall A sans serif font, Arial

Chapter 10: TypographyCopyright © 2004 by Prentice Hall What does the size of a font mean?

Chapter 10: TypographyCopyright © 2004 by Prentice Hall These letters are all 72 points; the lines are one inch (= 72 points) apart How big type is depends on the font size and on the design of the font family. Don’t forget the “little bit”! The fonts are Garamond, Goudy, Bookman Old Style, AlleyCat ICG, Caslon Open Face, Arial Black, Park Avenue, and Ultra Condensed Sans Two

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Some text with reduced line spacing, to show what happens without the “little bit”

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman, 10 point, with 1pt leading and with 3pt leading

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.3 A (Bakers) Dozen Font Families 2 serif 6 sans serif 2 monospaced 1 script 1 Wingdings 1 Symbol (Greek)

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman and its screen-friendly cousin Georgia—in same font size

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times Roman letters have oblique stress; Georgia has vertical stress

Chapter 10: TypographyCopyright © 2004 by Prentice Hall The pixel view: how Georgia gets vertical stress (and the letters are bigger)

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman and Georgia

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Six sans serif fonts

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Comparison of some sans serif fonts Arial bold and Arial Black Arial and Impact Arial and Trebuchet Arial and Comic Sans

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Arial and its screen-friendly cousin Verdana—in same font size Web Typography

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Courier New and Times New Roman Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise.

Chapter 10: TypographyCopyright © 2004 by Prentice Hall A bit of C++ code in Courier

Chapter 10: TypographyCopyright © 2004 by Prentice Hall In Times New Roman the same thing seems strange—to a programmer

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Andale Mono is a screen-friendly version of Courier

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Nuptial Script

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Webdings

Chapter 10: TypographyCopyright © 2004 by Prentice Hall The Greek alphabet in the Symbol font

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.4 A Web Page is Not a Printed Page Some things a Web designer can’t be sure of: The resolution of the user’s monitor The size of the user’s browser window The text size: users can change it The settings and quality of the user’s monitor, in terms of brightness, contrast, and color balance The fonts available to a user Very different from print design!

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.5 Text in graphics What if you want to use a font your users probably don’t have? Answer: make a graphic of it With a drop shadow

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.6 Guidelines: Body Type on the Web Use Georgia or Verdana Use 10 point or 12 point type Avoid bold or italic in body type, except for a few words for emphasis Use upper case only for the first word of sentences, proper names, etc. Use left alignment Use dark text on a light background Never use underlining for emphasis

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.7 Guidelines: Display type on the Web Big is beautiful Use any typeface that is legible—if your users have it; insert as a graphic if they don’t Use the HTML line-height attribute for control of line spacing Use HTML letter spacing and word spacing to get effects you want Don’t use any form of animation of text—ever

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Summary In this chapter you learned: The basic terminology and concepts of typography A dozen typefaces and their characteristics What a screen-friendly font is, and how it works How typography on the Web differs from typography in print Guidelines for text and display type on the Web

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach

Chapter 11: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 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: MultimediaCopyright © 2004 by Prentice Hall Audio formats for Web ExtensionFormat NameOriginatorStreaming?Additional software?.wavWaveformMicrosoftNo.auSun AudioSun MicrosystemsNo.aiffAudio Interchange AppleNo.midMusical Instrument Digital Interface International MIDI Association No.mp3MPEG Audio (Layer 3) Fraunhofer IIS-A and the ISO YesNo.raReal AudioReal NetworksYesYes. Available:

Chapter 11: MultimediaCopyright © 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

Video download times at 56Kb/sec DescriptionRun time Screen resolution File size (MB) Download time at 56 Kbps Museum tour (high quality video) 7 min, 30 sec 320x hour, 12 min Museum tour (medium quality video) 7 min, 30 sec 320x minutes Museum tour (low quality video) 7 min, 30 sec 320x minutes Speech (high quality video) 1 min, 19 sec 160x minutes Speech (low quality video) 1 min, 19 sec 160x minute Helmet camera video from mountain bike trail 1 min, 19 sec 170x minutes Copyright © 2004 by Prentice HallChapter 11: Multimedia

Copyright © 2004 by Prentice Hall 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: MultimediaCopyright © 2004 by Prentice Hall 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.

Video download times at 1.5Mbps DescriptionRun time Screen resolution File size (MB) Download time at 1.5Mbps Museum tour (high quality video) 7 min, 30 sec 320x minutes, 40 seconds Museum tour (medium quality video) 7 min, 30 sec 320x seconds Museum tour (low quality video) 7 min, 30 sec 320x seconds Speech (high quality video) 1 min, 19 sec 160x seconds Speech (low quality video) 1 min, 19 sec 160x second Helmet camera video from mountain bike trail 1 min, 19 sec 170x minute, 3 seconds Chapter 11: Multimedia Copyright © 2004 by Prentice Hall

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall 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

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall 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: MultimediaCopyright © 2004 by Prentice Hall Medium shot

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Close up shot

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Extreme close-up – the best

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Close-up shots retain more facial detail

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Close-up shot, magnified to show detail

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Text on a Web page is easier to read than a caption on a video

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Video formats for the Web NameFile extension OriginatorAdditional codec? Streaming?Additional player? Audio-Video Interlaced.aviMicrosoftYesNo QuickTime.mov.qtAppleYesConfigurableNo MPEG Video (MPEG-4).mpgMotion Picture Expert Group No Real Video.ram.rmRealNetworksNoYes – requires server software Yes

Chapter 11: MultimediaCopyright © 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: MultimediaCopyright © 2004 by Prentice Hall Using animation to focus attention, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Using animation to focus attention, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation shows how a virus attacks a human cell, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation shows how a virus attacks a human cell, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation shows how a virus attacks a human cell, 3

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation shows how a virus attacks a human cell, 4

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation showing operation of a Xerox Phaser 850 ® network color printer, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation showing operation of a Xerox Phaser 850 ® network color printer, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation showing operation of a Xerox Phaser 850 ® network color printer, 3

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation can explain complex systems

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Such as university parking regulations

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall 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: MultimediaCopyright © 2004 by Prentice Hall A frame from an animation, both formats; first frame (2,3) (3,2) (4,5) (2,5) Pixel-based representation Vector-based representation

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall A frame from an animation, both formats; second frame (1,0) Pixel-based representation Vector-based representation

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Comparing pixel-based (top) and vector- based formats

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation depicting HIV infection and possible drug action, 1 Note buttons giving user control of animation

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Animation depicting HIV infection and possible drug action, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Java applet simulating structural failure, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Java applet simulating structural failure, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Java applet simulating structural failure, 3

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Java applet simulating structural failure, 4

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall 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: MultimediaCopyright © 2004 by Prentice Hall Tour of the Munich Airport Center, in interactive 3D, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Tour of the Munich Airport Center, in interactive 3D, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Tour of the Munich Airport Center, in interactive 3D, 3

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Tour of the Munich Airport Center, in interactive 3D, 4

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall An avatar

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Level of detail, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Level of detail, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Level of detail, 3

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Successive refinement, 1

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Successive refinement, 2

Chapter 11: MultimediaCopyright © 2004 by Prentice Hall Successive refinement, 3

Chapter 11: MultimediaCopyright © 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