Multimedia on the Web

1. Multimedia on the Web CIS 421 – multimedia.ppt

2. Agenda • Message for the quarter! • Universal Design for Web Applications • What technology for a nondisabled person is comparable to the web for a disabled person? • What are the 4 categories of disabilities? • Legal liability issues? • Standards? • Discuss Exercise 1 due Wed., October 6 • Multimedia on the web – • what are the issues? • What decisions do you have to make before you start building the website? • Solutions to some potential problems

3. Message for the Quarter! NO WHINING! NO NICKEL AND DIMING!

4. UDWA • What is Universal Design? • Why do we need universal design for web-based applications? • What is the BIG message of chapters 1 & 2? • What are the authors trying to accomplish? • Why is this important?

5. Situational disabilities faced by non-disabled users that are comparable to those of disabled users • Search engines & international languages are comparable to what? • Watching TV in a pub with the sound turned off? • Trying to type on an iPhone, mobile phone or PDA keyboard? • Trying to read tiny type on a website in a browser on a mobile device?

6. 4 categories of disabilities? • Cognitive, reading, learning • Situational similarities to disability? • Hearing • Situational similarities to disability? • Movement • Situational similarities to disability? • Vision • Situational similarities to disability?

7. Legal liability issues? • What does Section 508 of the Americans with Disabilities Act (ADA) of 1990 say? • To what websites does it apply? • Does it apply to Cal Poly? • What about the Target case?

8. Standards that apply? • The World Wide Web Consortium (W3C) and the Web Accessibility Initiative (WAI) • http://www.w3.org/WAI/intro/components.php • W3C WCAG – Web Content Accessibility Guidelines • http://www.w3.org/WAI/intro/wcag.php • Authoring Tool Accessibility Guidelines (ATAG) • http://www.w3.org/WAI/intro/uaag.php • The Accessible Rich Internet Applications Suite (WAI-ARIA) • http://www.w3.org/WAI/intro/aria.php • Mobile Web Best Practices (MWBP) • http://www.w3.org/TR/mobile-bp/

9. Exercise 1. Exercise 1: Project Plan for Multimedia project • http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm • Two parts to exercise • Prepare a project plan for Project 1 and upload it to the assignment in Blackboard and to the admin folder of your project. • Download the outline for Exercise 1 Plan for Project 1 (projectPlan.doc) and fill in appropriate information for your Project. • Download persona.doc and define the persona who represents your target audience • Read about personas & what assignment means: • http://0-proquest.safaribooksonline.com.opac.library.csupomona.edu/9780321679406/ch05lev1sec4#X2ludGVybmFsX0ZsYXNoUmVhZGVyP3htbGlkPTk3ODAzMjE2Nzk0MDYvMTA3 • upload both to BB assignment & ADMIN folder of your website

10. What qualifies as Multimedia on Web? • Graphics • Backgrounds • Pictures • 3-D graphics • Charts • Computer-generated graphics, drawings, etc. • Clip art • Buttons • Text • Video • Animation • Morphing • Sound • Narration, voice • Recorded music or special sounds • Computer-generated music

11. Multimedia for the Web Differs • Size constraints for client download • Viewers’ workstations differ • Size of screen • Modem speed • Number of colors • Video cards • Browsers, plugins • Design for the worst case? Or warn viewers? Or both?

12. Product Performance • The customers’ screens have to reproduce everything you produce in your program • No matter what computer, monitor, connection they are using. • The law of digital media: Pick any two: • High quality images and sound • Ability to run on most computers • Acceptable performance

13. Multimedia issues • Functionality Issues • Presentation Design • Multimedia content issues • Images • Colors & Color Palettes • Video, Flash, Animation • Text, titles, fonts • Audio

14. Issues: Functionality--How will Viewers Know? • Which mode is selected (highlighted?) • What any button or “hot” text or graphic does? • How large the multimedia file is that they are about to download? • What plugin they need to view a multimedia file? • How to start & stop a video? An Audio clip? • How to get around in the text? • How much text there is? • What the hyperlinks mean? • How to find something?

15. Issues: Presentation Design • Define a visual theme and style • Define consistent global & local navigation for ease of use • Get your main message across on each page • Get all important elements ABOVE THE FOLD • Site design has to accomplish your developer goals for site • Design has to appeal to potential users so they can accomplish their goals for using your website • Emotionally • In a way they can understand and experience • Accessible • Design has to convey your message

16. Issues: Image Resolution • Computer screen is low resolution: 72 dpi • Image memory size varies depending on compression and file format • Web color on client varies depending on: • bit-depth settings of computer • Color calibration & gamma default settings of monitor • Operating system, Web browser

17. Issues: Color & color Palettes • In an interactive product when you have more than one image on the screen, • each image may use a different palette of colors • all of the colors in both images may not be the palette in use • Good ways to limit image file size • reduce the color palette – minimize the range of colors: All reds/oranges or All greens/blues, but NOT red, orange, green, blue, yellow, etc.

18. Issues: Text, Titles, fonts: • Get the message across (accomplish developer goals) • spelling; readability, correct grammar & spelling • Bitmapped text looks better but text is smaller, easier to revise, less troublesome to program for user with disabilities • For most flexibility use elastic layout & CSS • http://www.csupomona.edu/~llsoe/42101/css/elasticlayout.htm • em-based font size will adjust to browser resolution • Contrast values (light & darkness) of Text & background so can be read – Juicy Studio Colour contrast analyzer extension for Firefox Browserhttp://juicystudio.com/services.php#firefox • Tools>Colour Contrast Analyser>All Tests

19. Issues: Video & Flash • Video can be used to • Convey powerful emotional messages • Entertain: live action, functional object, view object from different points • teach something • video as art form • Takes a lot of memory – needs to serve a purpose • Divide larger video into smaller pieces that viewer can view consecutively • Warn viewer about file sizes before download

20. Issues: Animation • Elements that change, move. appear & disappear • Be sure doesn’t flicker so much it can set off seizures in users with certain disabilities • Can use a series of text, pictures or photos • Photoshop & Flash: provide beginning & ending images & program “tweens” changes • How can you make animation (e.g., Flash) accessible to people who cannot see it?

21. Issues: Audio • Key characteristic is sampling rate • resolution at which sound is digitized • the higher the sampling rate, the better the quality • the larger the file. • Easy to modify and edit • Sound should suit the style • Background music • helps integrate project • Creates emotional mood for viewer • How can you make audio accessible to the hearing impaired or deaf user?

22. Decisions & Solutions • Site Structure • Site Narrative, continuity • Interaction Design: Navigation, Links • Page Design • Emotional appeal • Trade-off between File size and file quality • Laws of survival • Develop workflow methods • Test your website

23. Decisions: Site structure • Tree structure -- hierarchical • Linear & linear with side streets • Pathway through IKEA • Tree + linear • No structure • Which to choose • Depends on content & goals • Depends on website size?

24. Narrative or telling the story • Chain of events that let user fulfill user goals – tasks that make up an activity • May not seem a story in traditional sense • First you do this; second this, then this, etc. • e.g. buying a product at amazon.com follows a sequence of events • Who controls the progress through the story? User? Designer? Shared? • Continuity of story through site • Some sites with tabs tell you where you are in process of submitting an order.

25. Continuity • Beginning • 5 seconds to catch attention • Set initial expectations for user • Middle • Where most of activity occurs • Interruptions (e.g., pop-up windows) • End • “Twister” that tells user the end is coming • Example: Check-out on an ecommerce site

26. Interaction Design -- Gatekeeper for Viewer Access • Create a guidance system that orients the viewer & sets expectations (affordances) • Set up navigation and access routes • Menus, buttons, hyperlinks • Menu bar repeated on each page • Define what happens when customer does something (feedback) • Make sure connection between feedback and affordances matches (natural mappings) • Accessibility “alt=“ names for objects

27. Interaction Design -- Gatekeeper for Viewer Access • Design interaction controls • Images & words set expectations • buttons are to push • Arrows or graphic objects pointing in a specific direction lead in the direction they are pointed • Words describe what to expect • Be consistent throughout web site • Same images, buttons • Words mean the same thing • Only include what’s necessary – don’t clutter

28. Guidance System Orientation • Main navigation screen creates expectations • Navigation bar; Menu; Image map • How much control over interaction with Web site will you let the user control? • Too much control over interaction – user gets confused & lost (Virtual Reality with no clues) • Too little control – user gets frustrated & leaves (background music without controls that user cannot stop playing) • Joint control • Who thinks they are in control?

29. Decisions: Navigation • Concerns user’s relationship with site content • How will they know where they are? • How will users navigate? • Semantic page structure: <h1>, <h2>, etc. • Tags not used for formatting but to indicate what kind of content (ul, ol) or hierarchy of importance • Contextual clues & features (implicit support) • e.g. color coding – blind & color-blind users? • Breadcrumbs • Landmarks – introductory pages to sections; consistent buttons; menus, etc. • Explicit support: maps, page labels, tabs

30. Decisions: Links • Links for navigating • Links for performing certain actions • Link issues: • Avoid multiple links to the same page from a single page • Non-working links • Descriptive link names help blind users • Links within a long page w/multiple parts • Dead ends– pages that go nowhere • Links to page itself – confuses blind users

31. Decisions: Page Design • Page Width & Length – NO horizontal scrolling in 1024px x 768px browser: • Which is in fact 955px x 600px • Cumulative width of Graphics content <= 955 px • Elastic layout scales up or down, but optimize for 1024x768 • Ensure MOST IMPORTANT content is visible on smaller screens! & opens ABOVE THE FOLD • Recommend browser choice/size to viewer • Does it matter how it looks when printed? • Warn users if download times for clickable objects will be long, for slow connections

32. Decisions: Emotional Appeal of Content Norman’s Emotional Design • Ensure content appeals emotionally to the users and causes them to feel pleasure in using your site • Appeal to Users’ Visceral Processes—initial, quick, unconscious reactions that users do not think about • Colors & music affect hormones and emotional reactions • design & style appeals to your audience & what you want them to experience • conventions – ways of doing things that everyone understands -- users can react automatically without thinking (e.g., routinely)

33. Decisions: Emotional Appeal of Content Norman’s Emotional Design • Appeal to Users’ Reflective Processes -- how the site affects the users’ thought processes: • message, culture, & meaning of the content you present • nostalgia: connects users to other good experiences • appeals to the users’ self-images (makes them feel hip, part of a community of people who do good deeds, raise fish, play on-line games, etc.)

34. File Size: Digital Video Tradeoff • The higher the image quality, the lower the playback quality • Requires more data about each frame & more frames per second • Rate of transfer from disk is limited, so video has skips and gaps • If the frame rates are lower, the image looks better because the frames contain more information • Video files get very big, very fast • Compressing in Flash Video encoder lets you stream video without having streaming server

35. File size: Images • Smaller Image Files hasten download • Reduce Image File Size for the Web • Reduce number of colors • Reduce image dimensions • Blur unimportant areas of image • Select important areas before compressing to increase their quality • Compress to reduce color depth • To check download speed of a page in Web Developers Toolbar: Tools>Speed Report

36. Develop workflow methods • Buy high, sell low • Digitize images, sound, video at highest possible resolution & reduce it later • Digitizing at low resolution saves memory & storage up front, but loses too much data • Save the best for last • Reduce the resolution of the content last, after you’ve done your editing and altering • Compress from the high quality version – otherwise the file degrades rapidly if you recompress previously compressed documents

37. Develop workflow methods • Protect the original copy - • Archive a copy of the original media file so you can redo the process if you need to (using your notes of course) • Keep an audit trail • Use Adobe Bridge • If you use non-original content, CHECK that you have permission & save that information in your ADMIN folder • List file & its source in your sourcelog document • Keep a record of changes you make to a file • In Photoshop, make each alteration a separate layer & save the PSD version which preserves all the layers • Save versions so you don’t have to go back to beginning

38. Develop workflow methods • No Late Projects accepted – put up what you have finished and start uploading early! • Don’t wait == Upload your work as you go. • Then you get credit for what you finished if something goes wrong. • When the project is due, I make a grading folder with a copy of all the students’ folders & grade those • FTP is NOT shut off. • You can still upload AFTER the project is due, but late uploads do not get credit until next due date

39. TEST your Website to standards– • Easiest: Test & fix as you build pages & site with web developers toolbar testing tools • You need time to test the site (links, graphics, CSS, XHTML, etc.) • When you think everything looks perfect • Look at it on other hardware setups • different web browsers/ monitors make • Test on a different computer for dead links

40. Next • DUE Monday before class: • Blackboard Quizzes due: Ch 3 Universal Design for Web Applications • Stylin’ with CSS, Ch 1-2 • Due Wednesday before class • Exercise 1: http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm • Plan for your 421 website • Construct a Persona • In-class next Monday: Start Project 1