Lecture 9 Handicapped and International Use Issues Brad

Lecture 9: Handicapped and International Use Issues Brad Myers 20 -790 Human-Computer Interaction in e. Commerce 1

Notes n Guest lecture next Wednesday n Not optional 2

Special Considerations for Design n Handicapped Use n n n Making site “Readable” by blind users Other handicaps Internationalization n All web sites are globally accessible Providing multiple language versions Making the English version more accessible 3

For Access by People With Disabilities n Lots of people n n n Required that web sites be accessible n n Over 30 million people have a problem using Web due to disability 50% of people over 65 years old have some kind of “functional impairment” Americans with Disabilities Act and other laws For Further information n Web accessibility initiative: http: //www. w 3. org/WAI Trace center: http: //trace. wisc. edu Bobby will test your pages: http: //bobby. watchfire. com/bobby/html/en/index. jsp 4

Nielsen’s Alertbox #1 n “Beyond Accessibility: Treating Users with Disabilities as People” n http: //www. useit. com/alertbox/20011111. html n Blind users had 1/3 usability of sighted users n Most problems would be cheap and easy to fix 5

Nielsen’s Alertbox #2 n “Usability for Senior Citizens” n n n n http: //www. useit. com/alertbox/20020428. html Seniors are fastest growing demographics on the Web United States alone has an estimated 4. 2 million Internet users over the age of 65 Usability for seniors ½ that of control group in terms of success, errors, etc. Confusions between web URL box and site’s search box Difficulties seeing the site: need fonts at least 12 pts, especially for links Difficulty with pull-down menus and other UI elements due to accuracy problems Lose track of where been (cognitive issues) – highlight links when visited 6

For People with Visual Difficulties n n n Allow fonts to be adjusted n Don’t put text into pictures n Use relative font sizes <big>xxx</big> n Not absolute sizes <font size="4">xxx</font> n Make sure design still works with big fonts Good color choice, design for high contrast Use headers and dividers to mark text n <H 1> instead of bold, etc. 7

Visual Difficulties, 2 n Be sure to provide “alt” tags for pictures n For users who cannot see the photo n n Blind users using screen readers Slow connections <img border="0" src="images/hcii_logo. gif" width="230" height="50" align="right“ alt=“HCII logo”> n n Pure decorations, use alt=“” so not read out loud n n n Describe what item is about, and where link will go But don’t omit alt tag Alt string in correct language Image maps at client side, and have ALT for each option 8

Analysis for Blind Users n n MS thesis work of Sailesh Panchang of Pitt With “Bobby” automated analysis: n n n Only 23% of commercial sites compliant at basic level No sites were compliant at the “AAA” level Sailesh’s usability tests with screen reader n Usability score of 77% for commercial sites, vs. 87% for sites aimed at people with disabilities 9

Example Screen Readers n JAWS for windows http: //www. freedomscientific. com/ n Reads the contents of the screen n Special Keyboard commands for navigating n Reads keystrokes as they are typed n IBM Home Page Reader n http: //www-3. ibm. com/able/hpr. html 10

Pages to Demonstrate with JAWS – (From Sailesh Panchang’s thesis) n www. amazon. com hard to navigate n n n Reads a bunch of junk on loading Image map links with long numbers National Federation for the Blind site much easier n n n “Skip to contents” link All pictures have good alt-text pdf files have alternate versions 11

Other disabilities n Auditory disabilities n n n Transcripts available for any important audio “Closed captions” for videos Motor difficulties n n Make sure page is amenable to “tabbing” from field to field Issue: Javascript, pop-ups, Active. X controls, etc. n n n My page works On HCII page, can tab to invisible links (e. g. , after Administrative Staff) Cognitive difficulties n n Simpler writing, simpler URLs Spelling correctors (e. g. Google) 12

Internationalization World Wide Web 13

Web Sites Accessed World-Wide n n Less than 50% of WWW users in US Internationalization n n One design that can be used world-wide Localization n n Different designs customized to different languages E. g. , http: //www. knto. or. kr/ 14

Icon issues n n n No icons with fingers or feet or other gestures Light switches on or off? No visual puns n n n Table of numbers as: (In Danish, use bord and tabel) No baseball metaphors No “trash can” icon Symbolic icons are even harder n Red cross for help 15

Wording issues n n Currency symbols: $1000 (US, Canada), vs. Avoid abbreviations and slang n n n “MI” for middle initial “N/A” for not available or not applicable “Under the hood” for automobile parts Ask for child’s age not school grade Holidays can be different n n Mother’s day, Thanksgiving, Independence Day can be at different times People’s names: “First” name, “Last” name n n Which is which Also, sometimes, First+Last not very unique (12 “Kim”s, 2 “Min Kim”s) n n 1000 Email address usually globally unique Paper size issues for printing n A 4 vs. 8. 5”x 11” vs. ? ? ? 16

Number issues n n Billion: thousand million or million? Number formats: 4. 567 vs. 4, 567 n n Ask if ambiguous (not “illegal number”) Time formats: 2: 30 pm vs. 14: 30; time zones: EDT Date formats: 03/04/05? use March 4, 2005 instead Telephone number formats n n n +45 47 17 17 17 vs. (412) 268 -5150 vs. 1 -412 -268 -5150 Allow +, (), -, . etc. Don’t use letters only: 1 -800 -ASK-TOWER 17

Localization n Not just translating the site n Different content n n Different sizes of language may require redesign n n But automatic layout and high-level tags help Make sure translation of terms is consistent with industry standards Indicate content that is not translated Language choice n Don’t use flags to indicate language n n n US vs. Canada vs. England Use language’s own name for itself (ENGLISH, ESPAÑOL, Good place for pictures of text n n e. g. German yahoo has soccer on front page ) In case fonts aren’t loaded First page in default language first so many won’t need extra click n Make links for other languages easy to find (isn’t for www. knto. or. kr/)18

E-commerce issues n Make sure that it is clear what areas are served n n n E. g. , cars not available in US, different formats, electrical (110 v 220 v) E. g. , Service available? E. g, justflowers. com international section easy to find n n n Disney not (hidden on shipping pop-up page) Put on home page, shipping page, “about” page, and help Use keywords: “Shipping” and/or “International” Paying in international currency Weights and sizes and clothing sizes in metric and U. S. units 19

Shipping Issues n Shipping charges and options for overseas n n Accept entry of non-US characters in fields n n n Sales taxes? May be an issue for sorting, etc. Consider have separate US and overseas shipping pages Otherwise: n n n Use “zip / postal code” as prompt Different organization of postal address (postal code after city or after state? ) In “state/province” field, n n Full-length state names Option for “other countries” in state field 20

URL issues n n n Use www. company. com for English language version Use www. company. co. XX (. uk, . de, . kr) foreign site Use local (country specific) URL also for sites of only local interest 21

International User testing n Localized interface can have new and different usability problems n n n Not sufficient to test one version and then translate Should perform heuristic analysis by usability specialists familiar with target culture and language Should test with native speakers in different countries Use international or national usability consultants Use “remote testing” with instrumented web sites 22