Creating User Interfaces

1. Creating User Interfaces Language. Localization. Accessibility. Homework: Post proposal for HTML5 project. Post proposal for tutorial

2. Local storage • Simpler example: http://faculty.purchase.edu/jeanine.meyer/html5/localstoragedate.html NOTE (warning): localStorage (like cookies) requires retrieval to be from same server. This means that you may need to upload application to test it. Browsers are different…

3. Sources of errors • Errors made by system builders (aggregators) • Bad auxiliary data (e.g., missing media files) • ? • Errors made by users • Detectable • Omit critical fields in a form • Badly formed input • May or may not be detectable • Inconsistency (e.g., address not in zip code) • Not detectable, but wrong or problematic • Wrong product • Same person, different name, so mailing list has extra… Don't want to force clients/customers to 'be' ids

4. Error handling • Offensive (as in offense in sports!) • Limit open-ended typing, use pulldown lists, radio buttons, links on objects, limit memory requirements • ? • Defensive • Catch errors and provide feedback. • Catch multiple errors, to limit re-entry. • Necessary (and appreciated) with complex data. • ?

5. Process of building interface • Identify/define user (give user(s) name(s)). • Build & study content. • Focus on functionality (in users' terms) independent of technology. • Be creative (allow creativity to happen). • Involve real users in testing. • After deploying system, monitor use and be willing to modify system to improve usability. • Build system that supports this: system must collect information and be adaptible.

6. User-centered design Edward Tufte (and others) • Don't condescend. • Don't make the metaphor the bureaucracy of the organization. • quotes Alan Cooper: "No matter how cool, how beautiful the interface, it would be better if there were less of it…" Also • Be careful of use of computer jargon or business jargon (unless you are sure the audience uses it.) • Use spell-check and don't add new words. • Citibank story.

7. User testing • mainly qualitative: help you understand problem. • User testing should prevent big failures. • It is not a substitute for ideas. • Set of test subjects should include representatives of different classes of users (for example, using different platforms) but sample itself does not need be representative. • Be open to any and all feedback.

8. Sampling • Say you do want to prepare for the 'real world' by using a panel. • For example, for determining amount of server space required • You need to determine significant categories and the size of each in the population • Do panel test and multiple!!!

9. Example • Category A, category B, category C represent 500, 300, 200 respectively • Your panel is 4, 5, 3 • If 3 of the 4 As do something, assume 3/4ths of 500 will do it (375). • If 3 of the 5 Bs did something, assume 3/5ths of 200 will do it (120). • No guarantees, because it is a sample…

10. Localization • Create web site for use in several specific 'local' places. • Create multiple web sites, each for use in specific place. • in an efficient, effective manner so any underlying common content does not need to be duplicated (and commonality diluted). • Develop tools (networking s/w, standards, etc.) that promote Web as "global, interoperable tool of communication" • www.w3c.org

11. International / Global / ? • So-called localization more than just language • Alphabets • Idiom • Other issues • Dates • Layout (flow on page) • money • Cultural issues ?? • More?

12. Class exercise What is the word in that language for • Spanish • Chinese (Mandarin? Hainese?) • Korean • Japanese • Hebrew • Russian • French • Finnish • Arabic (Classical?, ?) • Hindi (Urdu?, ?) What is the direction of text? What is the format for dates? Time? Money?, relevant cultural issues?

13. Character code • Note: European languages plus several other 'small' alphabets easily handled. • We/I (typical monolingual American) can't hardly appreciate the challenge: • two Chinese (kanji) character sets: modern (China) and traditional (Taiwan + most of the Chinese diaspora) • 'ruby': symbols 'over' ideographs

14. http://www.cs.tut.fi/~jkorpela/chars.html#code character repertoire: A set of distinct characters. character code: A mapping, often presented in tabular form, which defines a one-to-one correspondence between characters in a character repertoire and a set of nonnegative integers.

15. Characters, more character encoding: A method (algorithm) for presenting characters in digital form by mapping sequences of code numbers of characters into sequences of octets. In the simplest case, each character is mapped to an integer in the range 0 - 255 according to a character code and these are used as such as octets. Naturally, this only works for character repertoires with at most 256 characters. For larger sets, more complicated encodings are needed. Encodings have names, which can be registered.

16. charset Using the terms just defined, the charset attribute in an HTML meta tag means encoding <meta http-equiv="Content-Type" content= "text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content= "text/html;charset=ISO-8859-1" />

17. Language • Attribute of html tag <html lang="en-us"> MAY be used by browsers (spell-check, hyphenation, speech synthesizers), search engines, other tools. See two-letter codes: http://www.w3c.org/WAI/ER/IG/ert/iso639.htm

18. … more • A glyph is a presentation of a particular shape which a character may have when rendered or displayed. • speak of same glyph in italic, bold, etc. • A repertoire of glyphs comprises a font. In a more technical sense, as the implementation of a font, a font is a numbered set of glyphs. The numbers correspond to code positions of the characters (presented by the glyphs). Thus, a font in that sense is character code dependent. An expression like "Unicode font" refers to such issues and does not imply that the font contains glyphs for all Unicode characters.

19. Examples • ASCII is a character repertoire, code and encoding. Note: confusion about 7 vs 8 bit ASCII • ISO Latin 1 alias ISO 8859-1 standard defines a repertoire, code and encoding of which ASCII is a subset. ISO 8859 is a family of many encodings, indicated by the –n. ISO 8859-5 handles Cyrillic.

20. Unicode … provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language. This is the goal.

21. Unicode, continued The Unicode Standard has been adopted by such industry leaders as Apple, HP, IBM, JustSystem, Microsoft, Oracle, SAP, Sun, Sybase, Unisys and many others. Unicode is required by modern standards such as XML, Java, ECMAScript (JavaScript), LDAP, CORBA 3.0, WML, etc., and is the official way to implement ISO/IEC 10646. It is supported in many operating systems, all modern browsers, and many other products. The emergence of the Unicode Standard, and the availability of tools supporting it, are among the most significant recent global software technology trends.

22. Note • Unicode goal is universal coverage… • Unicode is product of a consortium of 'mostly US companies'. • Some controversy in its treatment of things • Combining certain kanji characters

23. Unicode consortium • Go to http://www.unicode.org/unicode/standard/WhatIsUnicode.html • Examine the Translations on the left. See what language characters do not appear on your computer. • Select one and • Go to Display Problems and see if you can fix it.

24. Techniques • One web site / screen provide options to go to different pages • use symbols/icons that are meaningful to audience • tricky. Flags may not be appropriate. • use images containing text in the specific language • risky choice: hope that computer/platform/browser has character encoding and font to display language • poor choice: use English word for other language and/or require English • Other?

25. Class Exercise Go to these sites to see what they do? • http://www.lionbridge.com/ • http://wikipedia.org • http://cnn.com • http://google.com • Pick one (a site that would claim to have a global appeal)

26. Accessibility • Many organizations (including SUNY) require websites, other applications to be accessible to people with disabilities. • Thinking about accessibility helps… • There also can be situational blindness, other situations, in which attention/awareness helps a wider set of people. • Note: complex situation • ramps for wheelchairs versus curbs for the blind. • Come up with a computer interface example?

27. Demonstration/simulation of screen reader • http://webaim.org/simulations/screenreader • Read directions and 3 questions. You can keep on the screen the keys.

28. Discussion • Did you find all the answers? • What was easy? what was hard? • ???

29. Special requirements • How to help visually impaired people understand mathematics? • One approach (Murphy, et al, at Dublin City University): use a mixture of non-speech (e.g., rising and falling tones), modified speech, and binaural spatialization: http://www.usablenet.com/ • http://mcg.computing.dcu.ie/amexamples

30. Discussion • What would be other approachs? • How would these types of techniques apply to something else?

31. Homework • Finish accessibility challenge(s) • Catch-up: HTML5 examples AND postings on usability heuristics • more comments on each other's postings • Post proposal for your HTML5 project. • Decide on your tutorial project • tutorial = lesson • pick technical topic such as • HTML5 feature(s) • geolocation • Google API • ?