Embed Size (px)
Citation preview
AnimationAnimation
Animated GIFAnimated GIF JavascriptJavascript JavaJava Vector animation: Flash, SVGVector animation: Flash, SVG ShockwaveShockwave 3D3D
Raster vs VectorRaster vs Vector
Vector: items drawn with linesVector: items drawn with lines SmoothSmooth Scaled very wellScaled very well Cannot be filled with multiple colorsCannot be filled with multiple colors Raster: pixel basedRaster: pixel based 3D shading3D shading
Raster vs. VectorRaster vs. Vector
Raster
Raster vs. VectorRaster vs. Vector
Vector
Informing the UserInforming the User
Provide information to userProvide information to user Inform of potential load/play timesInform of potential load/play times Required pluginsRequired plugins
Multimedia InformationMultimedia Information
3D for the Web3D for the Web
Use of 3D very limited (still)Use of 3D very limited (still) Commonly used for product viewsCommonly used for product views Very computational intensiveVery computational intensive VRMLVRML ShockwaveShockwave
Web 3D FormatsWeb 3D Formats
Name OpenStandard
Plug-inRequired
Streaming LODControl
SuccessiveRefinement
VRML Yes Yes No Maybe No
Jave3D No Yes No Yes MaybeShockwave No Yes Yes Yes YesAtmosphere No Yes Yes Yes YesX3D Yes Yes Yes Yes Depends
ControlsControls
3D and Performance3D and Performance
3D files require:3D files require: Large amounts of memoryLarge amounts of memory Large amounts of bandwidthLarge amounts of bandwidth
Level of DetailLevel of Detail
Successive RefinementSuccessive Refinement
Mpeg-4Mpeg-4
Future standard:Future standard:
Combines:Combines: AudioAudio VideoVideo Vector GraphicsVector Graphics 3D Graphics3D Graphics
MPEG-4MPEG-4
Human RepresentationHuman Representation
Means to represent virtual humansMeans to represent virtual humans Called avatarsCalled avatars Used to interact with userUsed to interact with user
Typically used in online games Typically used in online games representing:representing:
Other usersOther users Non-player characturesNon-player charactures
HANIMHANIM
PoserPoser
AccessibilityAccessibility
Web should be usable by everyoneWeb should be usable by everyone
This includes users with:This includes users with: Vision impairmentsVision impairments Hearing impairmentsHearing impairments Mobility impairmentsMobility impairments
StatisticsStatistics
8 million people with visual 8 million people with visual impairmentsimpairments
20 million deaf or hard-of hearing20 million deaf or hard-of hearing 250,000 with spinal cord injuries250,000 with spinal cord injuries 500,000 with cerebral palsy500,000 with cerebral palsy 330,000 with MS330,000 with MS More that half US population over 65 More that half US population over 65
has some type of impairmenthas some type of impairment
Issues involving VisionIssues involving Vision
Web very visually oriented Web very visually oriented Significant challengesSignificant challenges Severity ranges from total blindness Severity ranges from total blindness
to low visionto low vision Color blindness Color blindness Visual StimuliVisual Stimuli
Information DeliveryInformation Delivery
Information display on traditional Information display on traditional monitor not available to users with monitor not available to users with visual impairmentsvisual impairments
Two assistive technologies:Two assistive technologies: Screen ReadersScreen Readers Refreshable Braille displaysRefreshable Braille displays
Screen readersScreen readers
Reads text component of web screenReads text component of web screen
Includes:Includes: LinksLinks MenusMenus Dialog BoxesDialog Boxes Error MessagesError Messages
Screen ReadersScreen Readers
Several vendors offer screen readersSeveral vendors offer screen readers Prices range from $300 to $1000Prices range from $300 to $1000 Page must be reformatted to support Page must be reformatted to support
screen readersscreen readers HTML “lang” attribute controls HTML “lang” attribute controls
language page will be read inlanguage page will be read in
Refreshable Braille DisplayRefreshable Braille Display
For people who are deaf as well as For people who are deaf as well as blind screen readers do not work.blind screen readers do not work.
Translates text of page into BrailleTranslates text of page into Braille Single line of Braille textSingle line of Braille text Prices range from $4500 to $14,500 Prices range from $4500 to $14,500
Grade II BrailleGrade II Braille
Refreshable Braille DisplayRefreshable Braille Display
Reformatting TextReformatting Text
For screen readers to work text of For screen readers to work text of page must be formatted to support page must be formatted to support linear deliverylinear delivery
Tabular dataTabular data Label for ElementsLabel for Elements Skip navigationSkip navigation Alt Tags for imagesAlt Tags for images
Tabular DataTabular Data
Course Time Day Prerequisite Instructor
211 11:30 pm -1:00 pm MW None McDonald
211 10:30am - 12:00 pm TR None Luecking
212 5:45 pm - 9:00 pm M 211 Carter
212 11:30 pm - 1:00pm TR 211 Chan
Markup Strategy for TablesMarkup Strategy for Tables<table border="1"> <thead> <tr>
<th id="c1"> Course </th><th id="c2"> Time </th><th id="c3"> Day </th><th id="c4"> Prerequisiste </th><th id="c5"> Instructor </th>
<tr></thead><tbody><tr>
<td headers="c1">211</td><td headers="c2"> 11:30 pm -1:00 pm</td><td headers="c3">MW</td><td headers="c4">None</td><td headers="c5">McDonald</td>
</tr><tr>
<td headers="c1">211</td><td headers="c2"> 10:30am - 12:00 pm</td><td headers="c3">TR</td><td headers="c4">None</td><td headers="c5">Luecking</td>
</tr>
<tr> <td headers="c1">212</td> <td headers="c2">5:45 pm - 9:00 pm</td> <td headers="c3">M</td> <td headers="c4">211</td> <td headers="c5">Carter</td></tr>
<tr> <td headers="c1">212</td> <td headers="c2">11:30 pm - 1:00pm</td> <td headers="c3">TR</td> <td headers="c4">211</td> <td headers="c5">Chan</td></tr></tbody></table>
Label Elements of FormsLabel Elements of Forms
<form action="Billing Info" method="post"><fieldset> <legend class-"TitleLarge"><b>Billing Information</b></legend><p><label for="firstname">First name (required):</label><input id="firstname" type="text" tabindex="1"></p><p><label for="lastname">Last name(required): </label><input id="lastname" type="text" tabindex="2"></p></fieldset>
</form>
Skip NavigationSkip Navigation
Normal PageNormal Page
Alt TagsAlt Tags(None)(None)
Alt Tags Alt Tags (Descriptive)(Descriptive)
Other Vision IssuesOther Vision Issues
Screen MagnifiersScreen Magnifiers Color Blindness:Color Blindness:
– 8% male population8% male population– 0.5% Female population0.5% Female population– Most common red/greenMost common red/green
Photo Sensitive EpilepsyPhoto Sensitive Epilepsy
Color BlindnessColor Blindness
This is an Ishihara plate commonly used to check for red/green color blindness
Color BlindnessColor Blindness
This is what a red/green color-blind person might see. Note that the digit (3) is practically invisible.
Mobility ImpairmentsMobility Impairments
Conditions with affect use of Conditions with affect use of keyboard and mousekeyboard and mouse
Might be difficult, Might be Might be difficult, Might be impossible impossible
Predictive typingPredictive typing Speech recognitionSpeech recognition Alternative input technologyAlternative input technology
Hearing ImpairmentsHearing Impairments
Few more issues:Few more issues: Captioned mediaCaptioned media Open or Closed captioningOpen or Closed captioning American Sign LanguageAmerican Sign Language
Web Accessibility InitiativeWeb Accessibility Initiative
Promote usability for people with Promote usability for people with disabilitiesdisabilities
Goal of Universal AccessGoal of Universal Access Set of guidelines which address 2 Set of guidelines which address 2
themes:themes:– Graceful TranslationGraceful Translation– Make content understandable and Make content understandable and
navigablenavigable
Web Accessibility Initiative Web Accessibility Initiative GuidelinesGuidelines
GlobalizationGlobalization
Web is growing all over worldWeb is growing all over world Number of Non English speaking Number of Non English speaking
users rapidly increasingusers rapidly increasing Usability issues involve use of Usability issues involve use of
language and culturelanguage and culture This processes is called globalizationThis processes is called globalization
Global User PopulationGlobal User Population
InternationalizationInternationalization
Internationalization single design Internationalization single design used world wideused world wide
Simpler textSimpler text Unambiguous display of number, Unambiguous display of number,
currency, dates, and timescurrency, dates, and times Isolate and remove culturally specific Isolate and remove culturally specific
languagelanguage
LocalizationLocalization
Added cultural contextAdded cultural context Translation of web page into local Translation of web page into local
languagelanguage Relevant contentRelevant content
Text and TranslationText and Translation
Translation: human or automatic?Translation: human or automatic? Attention to writing styleAttention to writing style Expression of dates, timesExpression of dates, times Express currency in local termsExpress currency in local terms Label units of measurementsLabel units of measurements
Languages Can Expand Languages Can Expand LabelsLabels
Page LayoutPage Layout
Unicode for character supportUnicode for character support Color issuesColor issues Icon issues (including flags)Icon issues (including flags) Text Alignment (left vs. right)Text Alignment (left vs. right)
International User Testing International User Testing
International and local sites need International and local sites need user testinguser testing
More involved than traditionalMore involved than traditional Test success of translationTest success of translation International Inspection as International Inspection as
alternativealternative Difficulties dues to language gapDifficulties dues to language gap
PersonalizationPersonalization
Strategy for gaining competitive Strategy for gaining competitive advantageadvantage
Added service for a userAdded service for a user Speeds task completion (I-Click)Speeds task completion (I-Click) Can require loginCan require login CookiesCookies DynamicDynamic
Privacy Concerns Privacy Concerns
No right to privacy in USNo right to privacy in US Privacy ContractsPrivacy Contracts Request of personal information can Request of personal information can
cause users to leave sitecause users to leave site Highly related to trustHighly related to trust
Trust Trust
Many factors affect trust:Many factors affect trust: ContextContext Perceived SimilarityPerceived Similarity Standing in organizationStanding in organization BehaviorBehavior CertificationCertification ReferencesReferences
Fostering Trust Fostering Trust
Help establish credibilityHelp establish credibility Security StatementSecurity Statement Safe display of personal informationSafe display of personal information Use of secure serversUse of secure servers Confirmation of all costsConfirmation of all costs Confirmation of shipping addressConfirmation of shipping address
Controlling Privacy Controlling Privacy
No standard for enforcing privacy in No standard for enforcing privacy in placeplace
P3P standard developedP3P standard developed Enforces and exposes site’s privacy Enforces and exposes site’s privacy
policypolicy Tools to inform users of compliance Tools to inform users of compliance
with their selected privacy policywith their selected privacy policy
Trust (P3P)Trust (P3P)
Trust (P3P)Trust (P3P)
Privacy BirdPrivacy Bird
Privacy BirdPrivacy Bird
Shows Embedded Content
Privacy BirdPrivacy Bird
