Animation

1
Animation

• Animated GIF
• Javascript
• Java
• Vector animation Flash, SVG
• Shockwave
• 3D

2
Raster vs Vector

• Vector items drawn with lines
• Smooth
• Scaled very well
• Cannot be filled with multiple colors
• Raster pixel based
• 3D shading

3
Raster vs. Vector
Raster
4
Raster vs. Vector
Vector
5
Informing the User

• Provide information to user
• Inform of potential load/play times
• Required plugins

6
Multimedia Information
7
3D for the Web

• Use of 3D very limited (still)
• Commonly used for product views
• Very computational intensive
• VRML
• Shockwave

8
Web 3D Formats
9
Controls
10
3D and Performance

• 3D files require
• Large amounts of memory
• Large amounts of bandwidth

11
Level of Detail
12
Successive Refinement
13
Mpeg-4

• Future standard
• Combines
• Audio
• Video
• Vector Graphics
• 3D Graphics

14
MPEG-4
15
Human Representation

• Means to represent virtual humans
• Called avatars
• Used to interact with user
• Typically used in online games representing
• Other users
• Non-player charactures

16
HANIM
17
Poser
18
Accessibility

• Web should be usable by everyone
• This includes users with
• Vision impairments
• Hearing impairments
• Mobility impairments

19
Statistics

• 8 million people with visual impairments
• 20 million deaf or hard-of hearing
• 250,000 with spinal cord injuries
• 500,000 with cerebral palsy
• 330,000 with MS
• More that half US population over 65 has some
  type of impairment

20
Issues involving Vision

• Web very visually oriented
• Significant challenges
• Severity ranges from total blindness to low
  vision
• Color blindness
• Visual Stimuli

21
Information Delivery

• Information display on traditional monitor not
  available to users with visual impairments
• Two assistive technologies
• Screen Readers
• Refreshable Braille displays

22
Screen readers

• Reads text component of web screen
• Includes
• Links
• Menus
• Dialog Boxes
• Error Messages

23
Screen Readers

• Several vendors offer screen readers
• Prices range from 300 to 1000
• Page must be reformatted to support screen
  readers
• HTML lang attribute controls language page will
  be read in

24
Refreshable Braille Display

• For people who are deaf as well as blind screen
  readers do not work.
• Translates text of page into Braille
• Single line of Braille text
• Prices range from 4500 to 14,500

25
Grade II Braille
26
Refreshable Braille Display
27
Reformatting Text

• For screen readers to work text of page must be
  formatted to support linear delivery
• Tabular data
• Label for Elements
• Skip navigation
• Alt Tags for images

28
Tabular Data
29
Markup Strategy for Tables

Course Time
Day Prerequisiste id"c5" Instructor r 211
1130 pm -100 pm MW d headers"c4"None McDonald
211 headers"c2" 1030am - 1200 pm headers"c3"TR None d headers"c5"Luecking
212 headers"c2"545 pm nbsp- 900 pm headers"c3"M 211
Carter
212 headers"c2"1130 pm nbsp- 100pm headers"c3"TR 211
Chan able
30
Label Elements of Forms
et Billing
Information for"firstname"First name (required) put id"firstname" type"text" tabindex"1" Last name(required)
tabindex"2"
31
Skip Navigation
32
Normal Page
33
Alt Tags(None)
34
Alt Tags (Descriptive)
35
Other Vision Issues

• Screen Magnifiers
• Color Blindness
• 8 male population
• 0.5 Female population
• Most common red/green
• Photo Sensitive Epilepsy

36
Color Blindness

This is an Ishihara plate commonly used to check
for red/green color blindness
37
Color Blindness
This is what a red/green color-blind person might
see. Note that the digit (3) is practically
invisible.
38
Mobility Impairments

• Conditions with affect use of keyboard and mouse
• Might be difficult, Might be impossible
• Predictive typing
• Speech recognition
• Alternative input technology

39
Hearing Impairments

• Few more issues
• Captioned media
• Open or Closed captioning
• American Sign Language

40
Web Accessibility Initiative

• Promote usability for people with disabilities
• Goal of Universal Access
• Set of guidelines which address 2 themes
• Graceful Translation
• Make content understandable and navigable

41
Web Accessibility Initiative Guidelines
42
Globalization

• Web is growing all over world
• Number of Non English speaking users rapidly
  increasing
• Usability issues involve use of language and
  culture
• This processes is called globalization

43
Global User Population
44
Internationalization

• Internationalization single design used world
  wide
• Simpler text
• Unambiguous display of number, currency, dates,
  and times
• Isolate and remove culturally specific language

45
Localization

• Added cultural context
• Translation of web page into local language
• Relevant content

46
Text and Translation

• Translation human or automatic?
• Attention to writing style
• Expression of dates, times
• Express currency in local terms
• Label units of measurements

47
Languages Can Expand Labels
48
Page Layout

• Unicode for character support
• Color issues
• Icon issues (including flags)
• Text Alignment (left vs. right)

49
International User Testing

• International and local sites need user testing
• More involved than traditional
• Test success of translation
• International Inspection as alternative
• Difficulties dues to language gap

50
Personalization

• Strategy for gaining competitive advantage
• Added service for a user
• Speeds task completion (I-Click)
• Can require login
• Cookies
• Dynamic

51
Privacy Concerns

• No right to privacy in US
• Privacy Contracts
• Request of personal information can cause users
  to leave site
• Highly related to trust

52
Trust

• Many factors affect trust
• Context
• Perceived Similarity
• Standing in organization
• Behavior
• Certification
• References

53
Fostering Trust

• Help establish credibility
• Security Statement
• Safe display of personal information
• Use of secure servers
• Confirmation of all costs
• Confirmation of shipping address

54
Controlling Privacy

• No standard for enforcing privacy in place
• P3P standard developed
• Enforces and exposes sites privacy policy
• Tools to inform users of compliance with their
  selected privacy policy

55
Trust (P3P)
56
Trust (P3P)
57
Privacy Bird
58
Privacy Bird
Shows Embedded Content
59
Privacy Bird