1. 13 November 2007Kaiser: COMS W4156 Fall 20071 COMS W4156: Advanced Software Engineering Prof. Gail Kaiser Kaiser+4156@cs.columbia.edu http://york.cs.columbia.edu/classes/cs4156/

2. 13 November 2007Kaiser: COMS W4156 Fall 20072 What is Software Usability? Usability of a computer system is a combination of factors: User interface design Functionality Performance In-context help (e.g., tool tips) and system documentation (e.g., tutorial, reference manual) Freedom from errors! Anything else?

3. 13 November 2007Kaiser: COMS W4156 Fall 20073 User Interface Design The user interface design is the appearance on the screen and the actual manipulation by the user (“look and feel”) Fonts, colors, logos, keyboard controls, menus, buttons Mouse control or keyboard control? Conventions (e.g., "back", "help")

4. 13 November 2007Kaiser: COMS W4156 Fall 20074 Same Functions, Different Interface The user interface design is different from the functionality provided. Example 1: Microsoft Word on Windows and Macintosh: Different user interfaces for the same functionality. Example 2: The desktop metaphor Mouse -- 1 button (Macintosh), 2 button (Windows) or 3 button (Unix) Close button -- left of window (Macintosh) right of window (Windows)

5. 13 November 2007Kaiser: COMS W4156 Fall 20075 User Interface Design Examples of change: 1990 to 2007

6. 13 November 2007Kaiser: COMS W4156 Fall 20076 1990

7. 13 November 2007Kaiser: COMS W4156 Fall 20077 1995

8. 13 November 2007Kaiser: COMS W4156 Fall 20078 2003

9. 13 November 2007Kaiser: COMS W4156 Fall 20079 2007

10. 13 November 2007Kaiser: COMS W4156 Fall 200710 1995

11. 13 November 2007Kaiser: COMS W4156 Fall 200711 2003

12. 13 November 2007Kaiser: COMS W4156 Fall 200712 2007

13. 13 November 2007Kaiser: COMS W4156 Fall 200713 1995

14. 13 November 2007Kaiser: COMS W4156 Fall 200714 2003

15. 13 November 2007Kaiser: COMS W4156 Fall 200715 2007

16. 13 November 2007Kaiser: COMS W4156 Fall 200716 User Interface Design: Requirements and Refinement It is very difficult (if not impossible) to specify and comprehend an interactive interface in a textual document. Requirement documents benefit from sketches, comparison with existing systems, etc. Design documents should definitely include graphical elements and often benefit from a mock-up or other form of prototype. Implementation plans should include evaluation of user factors and time to make changes. USER INTERFACES MUST BE TESTED WITH USERS

17. 13 November 2007Kaiser: COMS W4156 Fall 200717 The Design/Evaluate Loop Evaluate ? Design Build Analyze requirements

18. 13 November 2007Kaiser: COMS W4156 Fall 200718 Methods for Specifying Usability Initial Mock-upPrototypeProduction Client's opinions    Competitive analysis  Expert opinion   Focus groups   Observing users    Measurements  

19. 13 November 2007Kaiser: COMS W4156 Fall 200719 Focus Group A focus group is a group interview Interviewer Potential users Typically 5 to 12 Similar characteristics (e.g., same viewpoint) Structured set of questions May show mock-ups Group discussions Repeated with contrasting user groups

20. 13 November 2007Kaiser: COMS W4156 Fall 200720 Usability Laboratory Monitor users while they use system (or a prototype or mock-up) Evaluators User one-way mirror

21. Usability Laboratory

22. 13 November 2007Kaiser: COMS W4156 Fall 200722 Usability Laboratory Observing techniques Human observer Video camera Tape recording Study techniques Human protocol (user talks aloud while using system) User carries out specified list of tasks Software designer presents story board (mock-up) to user

23. Eye Tracking

24. 13 November 2007Kaiser: COMS W4156 Fall 200724 Eye Tracking

25. 13 November 2007Kaiser: COMS W4156 Fall 200725 Measurement Basic concept: log events in the users' interactions with a system Examples from a Web system Clicks (when, where on screen, etc.) Navigation (from page to page) Keystrokes (e.g., input typed on keyboard) Use of help system Errors May be used for statistical analysis or for detailed tracking of individual user.

26. 13 November 2007Kaiser: COMS W4156 Fall 200726 Principles of Interface Design Interface design is partly an art, but there are general principles: Consistency -- in appearance, controls, and function. Feedback -- what is the computer system is doing? why does the user see certain results? Users should be able to interrupt or reverse actions Error handling should be simple and easy to comprehend Skilled users offered shortcuts; beginners have simple, well-defined options The user should feel in control!

27. 13 November 2007Kaiser: COMS W4156 Fall 200727 Style of User Interfaces: Command Line Interfaces User interacts with computer by typing commands Allows complex instructions to be given to computer Facilitates formal methods of specification & implementation Skilled users can input commands quickly Requires learning or training Can be adapted for people with disabilities Can be multi-lingual Suitable for scripting / non-human clients

28. 13 November 2007Kaiser: COMS W4156 Fall 200728 Style of User Interfaces: Direct Interaction User interacts with computer by manipulating objects on screen Can be intuitive and easy to learn Users get immediate feedback Not suitable for some complex interactions Does not require typing skills Straightforward for casual users, slow for skilled users Icons can be language-independent Difficult to build scripts Only suitable for human users

29. 13 November 2007Kaiser: COMS W4156 Fall 200729 Design for Direct Manipulation metaphors and mental models: Conceptual models, metaphors, icons, but there may not be an intuitive model navigation rules: How to move among data functions, activities and roles in a large space conventions: Familiar aspects that do not need extra training => scroll bars, buttons, help systems, sliders => good for users, good for designers look: characteristics of the appearance that convey information feel: interaction techniques that provide an appealing experience

30. 13 November 2007Kaiser: COMS W4156 Fall 200730 Design for Direct Manipulation: Menus Easy for users to learn and use Certain categories of error are avoided Enables context-sensitive help Major difficulty is structure of large choices Scrolling menus (e.g., states of USA) Hierarchical Associated control panels Menus plus command line Users prefer broad and shallow to deep menu systems

31. 2003

32. 2004

33. 13 November 2007Kaiser: COMS W4156 Fall 200733 2007

34. 13 November 2007Kaiser: COMS W4156 Fall 200734 Help System Design Help system design is difficult Must prototype with mixed users Categories of help: => Overview and general information => Specific or context information => Tutorials (general) => Cook books and wizards => Emergency ("I am in trouble...") Must have many routes to same information Never blame the user! *

35. 13 November 2007Kaiser: COMS W4156 Fall 200735 System Considerations of User Interfaces Personal computer cycles are there to be used Any network transfer involves delay Shared systems have unpredictable performance Data validation often requires access to shared data (database) Mobile code poses security risks

36. 13 November 2007Kaiser: COMS W4156 Fall 200736 Information Presentation Simple is often better than fancy Text precise, unambiguous fast to compute and transmit Graphical interface simple to comprehend / learn uses of color shows variations

37. 13 November 2007Kaiser: COMS W4156 Fall 200737 Information Presentation: Separation of Presentation from Content Information to be displayed Presentation software Display Presentation software Display PDF Acrobat html Safari

38. 13 November 2007Kaiser: COMS W4156 Fall 200738 Special Considerations: Disabilities What if the user: is visually impaired or color blind? does not speak English? is a poor typist? There is a tradition of blind programmers Navigation of web sites need not be only visual You may have a legal requirement to support people with disabilities

39. 13 November 2007Kaiser: COMS W4156 Fall 200739 Special Considerations: Computer Systems and Networks The performance, reliability and predictability of computer systems and networks is crucial to usability Response time instantaneous for mouse tracking and echo of key stroke 5 seconds for simple transactions Quality of Service for real time information

40. 13 November 2007Kaiser: COMS W4156 Fall 200740 Special Considerations: Design Tensions in Networked Systems Client computers and network connections vary greatly in capacity Client software may run on various operating systems, may be current or an earlier version System designers wish to control clients; users wish to configure their own environments

41. 13 November 2007Kaiser: COMS W4156 Fall 200741 Special Considerations: Device-Aware User Interfaces Examples of devices: desktop computer, fast network connection laptop computer, intermittent connectivity PDA, synchronization smart cell phone digital camera, camcorder Device-aware user interfaces are aware of: => performance of device => limited form factor (display, keyboard) => connectivity

42. 13 November 2007Kaiser: COMS W4156 Fall 200742 Special Considerations: Usability and Cost Good usability may be expensive in hardware or special software development User interface development may be a major part of a software development project Programming environments provide powerful user interface toolkits Costs are multiplied if a user interface has to be used on different computers or migrate to different versions of systems Web browsers provide a general purpose user interface where others maintain the user interface software

43. 13 November 2007Kaiser: COMS W4156 Fall 200743 The Importance of User Interface Design Good support for users is more than a cosmetic flourish Elegant design, appropriate functionality, & responsive system: => a measurable difference to their effectiveness A system that is hard to use: => users may fail to find important results, or misinterpret what they do find => user may give up in disgust A computer system is only as good as the interface it provides to its users *

44. 13 November 2007Kaiser: COMS W4156 Fall 200744 Ten Usability Heuristics (by Jakob Nielson)Jakob Nielson 1.Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2.Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

45. 13 November 2007Kaiser: COMS W4156 Fall 200745 Ten Usability Heuristics (by Jakob Nielson) 3.User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4.Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

46. 13 November 2007Kaiser: COMS W4156 Fall 200746 Ten Usability Heuristics (by Jakob Nielson) 5.Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 6.Recognition rather than recall Minimize the user's memory load by making objects, actions and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

47. 13 November 2007Kaiser: COMS W4156 Fall 200747 Ten Usability Heuristics (by Jakob Nielson) 7.Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8.Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

48. 13 November 2007Kaiser: COMS W4156 Fall 200748 Ten Usability Heuristics (by Jakob Nielson) 9. Help users recognize, diagnose and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

49. 13 November 2007Kaiser: COMS W4156 Fall 200749 Web Accessibility Adapted from Michael ChiangMichael Chiang guest lecture in COMS E6125 (March 11, 2004)

50. 13 November 2007Kaiser: COMS W4156 Fall 200750 Computer/Internet/Web Accessibility Physical impediments –Cannot see screen output –Cannot use mouse –Cannot enter keyboard input –Cannot use speakers, microphone, etc.

51. 13 November 2007Kaiser: COMS W4156 Fall 200751 Visual Disability Statistics Prevalence of visual loss rising More visual problems in older persons –Americans > age 65 will double by 2040 U.S. Census (1997): –7.7 million with “non-severe visual limitation” –1.8 million with “severe visual limitation” “Blind” vs. “partially sighted”

52. 13 November 2007Kaiser: COMS W4156 Fall 200752 Computer and Internet Use Visual disabilityNo visual disability Internet access Regular computer use Internet access Regular computer use 21%13%57%51% Total: 7,326,000Total: 168,108,000

53. 13 November 2007Kaiser: COMS W4156 Fall 200753 Web User Interfaces Then: Early browsers (Lynx) text-based –Limitations in computing speed –Partially sighted  magnifiers, large monitors –Blind  teletype to voice output Now: GUI’s with point-and-click navigation, widgets with dependence on visual cues

54. 13 November 2007Kaiser: COMS W4156 Fall 200754 Modern GUIs

55. 13 November 2007Kaiser: COMS W4156 Fall 200755 Modern Web Interfaces

56. 13 November 2007Kaiser: COMS W4156 Fall 200756 Examples of Visual Disability - Original

57. 13 November 2007Kaiser: COMS W4156 Fall 200757 Decreased Visual Acuity - Blur

58. 13 November 2007Kaiser: COMS W4156 Fall 200758 Central Scotoma

59. 13 November 2007Kaiser: COMS W4156 Fall 200759 Decreased Peripheral Field

60. 13 November 2007Kaiser: COMS W4156 Fall 200760 Hemianopia

61. 13 November 2007Kaiser: COMS W4156 Fall 200761 Decreased Contrast Sensitivity

62. 13 November 2007Kaiser: COMS W4156 Fall 200762 Interactions with GUIs Smaller icons  Decreased speed & accuracy Larger icon set size  Decreased speed & accuracy Decreased visual acuity, contrast sensitivity, or color vision  Decreased task accuracy

63. 13 November 2007Kaiser: COMS W4156 Fall 200763 Americans with Disabilities Act 1990, applies to entire nation “Reasonable accommodation” “Effective communication” Employment, public accommodations, telecommunications Internet in workplace  Broadened scope of law

64. 13 November 2007Kaiser: COMS W4156 Fall 200764 Federal Rehabilitation Act of 1973: Section 504 Applies to all educational programs receiving federal funds Universal accessibility to students with any disability: –Sensory –Physical –Cognitive

65. 13 November 2007Kaiser: COMS W4156 Fall 200765 Federal Rehabilitation Act of 1973 : Section 508 Applies to Web-based information technology (Public Law 105-220, 1998) All electronic and information technology developed, procured, or used by federal agencies must be accessible Direct purchases by federal government Important legal reference for accessibility

66. 13 November 2007Kaiser: COMS W4156 Fall 200766 Assistive Technologies: Goals and Challenges Alternative, equivalent mechanisms Special challenges for Web accessibility: –Mathematical & scientific notation –Images and videos –Forms, tables, frames, etc.

67. 13 November 2007Kaiser: COMS W4156 Fall 200767 Screen Magnifiers Popular for partially sighted users Background tasks Full or part screen Image smoothing algorithms

68. 13 November 2007Kaiser: COMS W4156 Fall 200768 Braille Displays Completely blind users Connect to keyboard Arrays of pins generate Braille letters Line-by-line output

69. 13 November 2007Kaiser: COMS W4156 Fall 200769 Braille Displays Input via regular or Braille keyboard Purely text-based - Less helpful for Web interfaces Only 10% of blind children use Braille as primary reading medium

70. 13 November 2007Kaiser: COMS W4156 Fall 200770 Screen Readers Background applications Translate text & graphics to auditory output –External hardware speech synthesizers or –Software to drive sound cards Orientation for users: –Announce menu bars, pop-ups, etc. –Protocols for announcing standard GUI widgets –Hyperlinks, navigation bar, page layout

71. 13 November 2007Kaiser: COMS W4156 Fall 200771 Screen Readers Examples: –JAWS (http://www.freedomscientific.com)http://www.freedomscientific.com –Hal ( http://www.yourdolphin.com/) http://www.yourdolphin.com/ –IBM Easy Web Browsing ( http://www- 03.ibm.com/able/) http://www- 03.ibm.com/able/ Good for varying levels of visual limitation –Used in isolation, or in combination with other assistive technologies

72. 13 November 2007Kaiser: COMS W4156 Fall 200772 Web Accessibility Initiative World Wide Web Consortium (W3C) Web Content Accessibility Guideline standard 1.0 (May 1999), draft 2.0 (May 2007) Various associated guidelines, e.g., User Agent Accessibility Guidelines http://www.w3.org/WAI/

73. 13 November 2007Kaiser: COMS W4156 Fall 200773 Example Web Accessibility Guidelines Provide text equivalents to visual content –HTML ALT text for images & videos –Redundant text links for server side image maps –Support indexing by search engines

74. 13 November 2007Kaiser: COMS W4156 Fall 200774 Example Web Accessibility Guidelines Don’t convey information using color alone –“Click the red button” –Color-blindness –8% of males –http://www.vischeck.com/http://www.vischeck.com/ Normal Red-Green Color Blind

75. Example Web Accessibility Guidelines Ensure that embedded objects (scripts, applets) are accessible to assistive technologies

76. 13 November 2007Kaiser: COMS W4156 Fall 200776 Example Web Accessibility Guidelines Be sure that blinking, scrolling, or auto- updating objects can be stopped –Distracting –Annoying, difficult to read –Screen readers can’t process moving text Click here!!!

77. 13 November 2007Kaiser: COMS W4156 Fall 200777 Example Web Accessibility Guidelines Design for device-independence –Be sure user can interact with document using various devices (mouse, keyboard, voice, etc.) Provide context and orientation information –e.g. titles for frames

78. 13 November 2007Kaiser: COMS W4156 Fall 200778 Example Web Accessibility Guidelines Provide clear navigation mechanisms –Orientation information and site maps –Not “click here”: identify target –Option to skip navigation bars

79. 13 November 2007Kaiser: COMS W4156 Fall 200779 Example Web Accessibility Guidelines Clarify natural language usage –Markup to identify foreign languages & abbreviations –HTML “lang”, XML “xml:lang” Ensure that pages are accessible even when newer technologies are not supported –Documents should be readable even when scripts or applets are turned off –Assistive technologies handle server-side scripts better

80. 13 November 2007Kaiser: COMS W4156 Fall 200780 Example Web Accessibility Guidelines Use W3C technologies –HTML, XML, CSS, MathML, etc. –Designed to handle accessibility issues –Open, industry consensus –Not PDF, Flash: plug-ins, often unreadable

81. 13 November 2007Kaiser: COMS W4156 Fall 200781 WCAG Overall General design “guidelines” Benefits larger population of users: –Older technologies –Slower Internet connections –Mobile computing, etc. –Difficulty reading or understanding text

82. 13 November 2007Kaiser: COMS W4156 Fall 200782 Compliance with Guidelines WebXACT –http://webxact.watchfire.com/http://webxact.watchfire.com/ WAVE –http://dev.wave.webaim.org/index.jsphttp://dev.wave.webaim.org/index.jsp

83. 13 November 2007Kaiser: COMS W4156 Fall 200783 Web Accessibility Summary Recent IT revolution has produced major social change. Disabled users are at growing disadvantage. Rapid initial growth of Internet did not account for this. Assistive technologies and legislative requirements are beginning to catch up. Accessible Web design benefits everybody.

84. 13 November 2007Kaiser: COMS W4156 Fall 200784 Next Assignment Second Iteration Plan due Tuesday November 20 thSecond Iteration Plan Plan for unit testing (black box and statement- level white box), one unit per pair/trio Plan for code inspection, one unit per pair/trio Both unit testing and code inspection need to be done for Second Iteration Progress report due Friday November 30 th Also initial plan towards security and robustness testing, results due with Second Iteration Final Report on Tuesday December 11 th

85. 13 November 2007Kaiser: COMS W4156 Fall 200785 Upcoming Deadlines MIA due Friday November 16 th Second Iteration Plan due Tuesday November 20 thSecond Iteration Plan Code inspection week Tuesday November 20 th through Thursdays November 29 th Second Iteration Progress report due Friday November 30 th Demo week Monday December 3 rd through Monday December 10 th Second Iteration Final Report due Tuesday December 11 th

86. 13 November 2007Kaiser: COMS W4156 Fall 200786 COMS W4156: Advanced Software Engineering Prof. Gail Kaiser Kaiser+4156@cs.columbia.edu http://york.cs.columbia.edu/classes/cs4156/