13 November 2007Kaiser: COMS W4156 Fall COMS W4156: Advanced Software Engineering Prof. Gail Kaiser

13 November 2007Kaiser: COMS W4156 Fall 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?

13 November 2007Kaiser: COMS W4156 Fall 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")

13 November 2007Kaiser: COMS W4156 Fall 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)

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

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall 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

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

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

13 November 2007Kaiser: COMS W4156 Fall 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

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

Usability Laboratory

13 November 2007Kaiser: COMS W4156 Fall 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

Eye Tracking

13 November 2007Kaiser: COMS W4156 Fall Eye Tracking

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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!

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

2003

2004

13 November 2007Kaiser: COMS W4156 Fall

13 November 2007Kaiser: COMS W4156 Fall 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! *

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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 *

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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.

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

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

13 November 2007Kaiser: COMS W4156 Fall 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”

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall Modern GUIs

13 November 2007Kaiser: COMS W4156 Fall Modern Web Interfaces

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

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

13 November 2007Kaiser: COMS W4156 Fall Central Scotoma

13 November 2007Kaiser: COMS W4156 Fall Decreased Peripheral Field

13 November 2007Kaiser: COMS W4156 Fall Hemianopia

13 November 2007Kaiser: COMS W4156 Fall Decreased Contrast Sensitivity

13 November 2007Kaiser: COMS W4156 Fall 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

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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall Federal Rehabilitation Act of 1973 : Section 508 Applies to Web-based information technology (Public Law , 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

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

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

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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

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

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

13 November 2007Kaiser: COMS W4156 Fall 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!!!

13 November 2007Kaiser: COMS W4156 Fall 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

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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

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

13 November 2007Kaiser: COMS W4156 Fall Compliance with Guidelines WebXACT – WAVE –

13 November 2007Kaiser: COMS W4156 Fall 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.

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall 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

13 November 2007Kaiser: COMS W4156 Fall COMS W4156: Advanced Software Engineering Prof. Gail Kaiser