CIS 421 – MULTIMEDIA.PPT

Multimedia and the Web

Agenda2

Administrivia: due dates- on-line syllabus has the latest

Quizzes: questions; methods to improve on 2nd try exercise 1: requirements? project 1: requirements?

Web Developer tools to install in your browser

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

Due dates3

On-line syllabus, by week, by day http://www.csupomona.edu/~llsoe/42101/syllabus/421ses.ht

m

If you see inconsistencies or have questions, ASK in class or EMAIL me – avoid false assumptions.

This term we have lots of small assignments, quizzes, more frequently rather than big, infrequent ones – should help you pace your work and be successful

Questions? Complaints?

On-line Blackboard Quizzes4

Purpose: You review terms, ideas BEFORE we discuss them in class (usually).

Method:1. Read the chapter or content that the syllabus says will be

on the quiz2. Take the quiz – pay attention that words are spelled

correctly3. Print out the quiz questions and your answers4. Look up the answers for the questions you got wrong5. Retake the quiz to raise your score to perfect6. Print out and save your 2nd quiz results to study for the

final

EXERCISE 1 REQUIREMENTS5

Purpose: Prepare Project Plan for Multimedia project http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm We will talk about GAS analysis, Site Activity or narrative, and other

concepts this ThursdayDownload and complete 2 parts of assignment – new

versions: projectPlan.doc = 25 points -- partly filled in http://www.csupomona.edu/~llsoe/42101/exercises/projectPlan.doc persona.doc = 15 points -- your ideal audience

http://www.csupomona.edu/~llsoe/42101/exercises/persona.doc TOTAL 40 POINTS POSSIBLE FOR EXERCISE 1

Due: Thursday, Oct 8, before class: Upload 2 documents to: Blackboard assignment for Exercise 1 admin folder of your 421 website, which should be ready later this week

PROJECT 16

Check requirements for all projects submitted http://www.csupomona.edu/~llsoe/42101/projects/index.htm

Project 1. Project design, organization & layout http://www.csupomona.edu/~llsoe/42101/projects/proj1.htm

Requirements not yet completely determined, but will include: Site structure – folders for each type of media Home or welcome page for website that says what it is

about, with global navigation to separate sections Section page for each section of website with global

navigation + local navigation to pages within that section

Admin folder with grading sheets, webmaster page, etc.

What qualifies as Multimedia on Web?

7

Graphics Backgrounds Pictures 3-D graphics Charts Computer-

generated graphics, drawings, etc.

Clip art Buttons

TextVideoAnimationMorphingSound

Narration, voice Recorded music or

special sounds Computer-

generated music

Web Developer browser tools8

Set up Firefox Browser extension tools Web Developers toolbar http://chrispederick.com/work/web-developer/ Colour Contrast Analysis tool http://juicystudio.com/services.php#firefox Mozilla/Firefox Accessibility Extension http://firefox.cita.uiuc.edu/

Microsoft IE developer toolbarhttp://www.microsoft.com/downloads/details.aspx?

FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Multimedia for the Web Differs9

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?

Product Performance10

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

Multimedia issues11

Functionality IssuesPresentation DesignMultimedia content issues

Images Colors & Color Palettes Video, Flash, Animation Text, titles, fonts Audio

Issues: Functionality--How will Viewers Know?12

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?

Issues: Presentation Design13

Define a visual theme and styleDefine consistent global & local navigation for ease

of useGet your main message across on each page

Get all important elements ABOVE THE FOLD Site design has to accomplish your developer

goals for siteDesign 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

Issues: Image Resolution14

Computer screen is low resolution: 72 dpiImage memory size varies depending on

compression and file formatWeb color on client varies depending on:

bit-depth settings of computerColor calibration & gamma default

settings of monitorOperating system, Web browser

Issues: Color & color Palettes15

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 useGood 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.

Issues: Text, Titles, fonts:16

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 & CSShttp://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 Browser http://juicystudio.com/services.php#firefox Tools>Colour Contrast Analyser>All Tests

Issues: Video & Flash17

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

Issues: Animation18

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 photosPhotoshop & Flash: provide beginning &

ending images & program “tweens” changes

How can you make animation (e.g., Flash) accessible to people who cannot see it?

Issues: Audio19

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 editSound should suit the styleBackground music

helps integrate project Creates emotional mood for viewer

How can you make audio accessible to the hearing impaired or deaf user?

Decisions & Solutions20

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

Decisions: Site structure21

Tree structure -- hierarchicalLinear & linear with side streets

Pathway through IKEA

Tree + linearNo structureWhich to choose

Depends on content & goals Depends on website size?

Narrative or telling the story22

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 eventsWho 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.

Continuity23

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

Interaction Design -- Gatekeeper for Viewer Access24

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

Interaction Design -- Gatekeeper for Viewer Access25

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

Guidance System Orientation26

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?

Decisions: Navigation27

Concerns user’s relationship with site contentHow 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

Decisions: Links28

Links for navigatingLinks for performing certain actionsLink 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

Decisions: Page Design29

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 FOLDRecommend browser choice/size to viewerDoes it matter how it looks when printed?Warn users if download times for clickable

objects will be long, for slow connections

Decisions: Emotional Appeal of Content

Norman’s Emotional Design

30

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)

Decisions: Emotional Appeal of Content

Norman’s Emotional Design31

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.)

File Size: Digital Video Tradeoff32

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 informationVideo files get very big, very fastCompressing in Flash Video encoder lets

you stream video without having streaming server

File size: Images33

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 depthTo check download speed of a page in Web

Developers Toolbar: Tools>Speed Report

Develop workflow methods34

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 dataSave 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

Develop workflow methods35

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

Develop workflow methods36

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

TEST your Website to standards– 37

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

Rules of Thumb38

Don’t put obstacles in the user’s wayMake it easy for them to accomplish their

user goalsMinimize their effort in using websiteGive them feedback when something

happensMake it easy to understand what’s “HOT”

Rollovers Hand shows hyperlink, hot spots

Give shortcuts to skip what they’ve seenMake it easy to get through their mistakes

Next39

• DUE Tuesday before class:• Blackboard Quizzes due: Ch 1-4 Universal Design for

Web Applications Exercise 1: Construct a Persona

http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm

In-class next Tuesday: Start group Project 1