1. Usability and User Interfaces CS 560

2. Human Computer Interaction Human Computer Interaction (HCI) is the academic and industrial discipline that studies how people interact with computers. The Psychological Sciences Department is proposing a new HCI joint program with the Computer Science Department.  9 CS courses  3 Math courses  7 PSYS courses 2

3. The importance of user interface design A software system is only as good as the interface it provides to its users. Appropriate functionality, easy navigation, elegant design, and fast response times make a measurable difference to a system’s effectiveness. If a system is hard to use:  Users may fail to find important results, or misinterpret what they do find.  Users may become frustrated and give up. 3

4. Development processes for user interfaces It is almost impossible to specify an interactive or graphical interface in a textual document.  Requirements for UI benefit from sketches and comparison with existing systems, etc.  Designs should include graphical elements and benefit from a mock-up or other form of prototype.  User interfaces must be tested with users. Whatever process you use to develop a software system, the development of the user interface is always iterative. 4

5. Usability: The analyze/design/build/evaluate loop 5

6. Tools for usability requirements: mock-up (documentation) 6

7. Tools for usability requirements: Focus Group (Documentation) A focus group is a group interview  Interviewer:  development group member(s) Potential users for testing  Typically 3 to 5 users per group meeting  Similar characteristics  CS students  Product customers Structured set of questions  May show mock-ups  Group discussions Repeated with multiple user groups 7

8. Usability Requirements: equipment (Documentation) Your project may have requirements to support:  Computers/systems with poor performance  Limited screen sizes  Bad network connections  Etc. Be explicit about the equipment assumptions that you make and how to handle failures.  Perform user testing with both good and bad equipment (if possible). 8

9. Principles of User interface design User interface design is partly an art, but there are general principles.  Consistency:  in appearance, controls, and function.  CSS  Feedback:  What is the computer system 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 should be offered shortcuts; beginners should have simple, well-defined options. The user should feel in control. 9

10. User interface design: graphical interfaces with direct interaction Most modern user interfaces are “What you see is what you get” (WYSIWYG).  The user interacts with the computer by manipulating objects on screen using mouse, keyboard, touch screen, icons, menus, etc. Advantages of graphical interfaces with direct interaction  Can be intuitive and easy to learn  Users get immediate feedback  Requires minimal typing skills  Icons can be language-independent Disadvantages of graphical interfaces with direct interaction  Not suitable for some complex interactions  May be slow for skilled users  Only suitable for human users 10

11. Interface design: 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 (Ex: states of USA)  Hierarchical  Associated control panels  Menus plus command line Users prefer broad and shallow to deep menu systems 11

12. Interface design: command line User interacts with computer by typing commands  Ex: Linux shell script  Allows complex instructions to be given to computer  Skilled users can input commands quickly  Unless very simple, requires learning or training  Can be multi-lingual  Suitable for scripting / non-human clients 12

13. Six aspects of HCI Human abilities  Perception, memory, reasoning, … Technologies  Windowing/multi-interface, mouse, VR, … Design methods  Prototyping, lifecycles, models, … Evaluation methods  Experiments, observations, … Guidelines and results  Proven interfaces Implementation tools and techniques 13

14. How did we get here? Once, it was enough if the system just worked (most of the time) Once, the burden was on the user Today, you have to care about system interfaces  Success of a product (and well-being of users) depends on good UI 14

15. Four computing eras Mainframes produced by “IBM and the Seven Dwarfs”  Burroughs  UNIVAC  NCR  Control Data  Honeywell  General Electric  RCA Used for bulk data processing by many people Large cabinets that housed CPU(s), Primary, and Secondary Memory Users interfaced with mainframes using “dumb terminals” 15

16. Four computing eras General purpose computer whose size, capabilities, and price make it useful for individuals.  Lenovo  HP  Dell  Acer  Asus Used by individuals for tasks such as word processing, spreadsheets, databases, social networking, and gaming Small cabinets that housed CPU(s), Primary, and Secondary Memory Users interface directly with computing resources 16

17. Four computing eras Mobile devices such as tablets and smart phones that are always connected to the internet.  Apple IOS devices  Google Android devices  Microsoft Windows mobile devices  Blackberry devices Used by individuals for communication, gaming, social networking, web browsing, etc. Small devices that housed CPU(s), Primary, and Secondary Memory Users interface directly with computing resources using touch screen and auditory commands. 17

18. Four computing eras New interfaces to computing and network resources not conceived yet  Cloud resource provisioning  Amazon AWS Lambda  Smart homes  Internet of things As more and more devices become connected, people will need a way to maintain their connection to these devices. 18

19. Advances in HCI The new advances in HCI can be categorized in three sections:  Wearable devices  Wireless devices  And virtual devices Examples:  GPS Navigation Systems  Military super-soldier enhancing devices  Tablets and smart phones  Smart Watches  Canesta Virtual Keyboard 19

20. HCI architecture Architecture of any HCI system is identified by:  Number of inputs and outputs in the system  Diversity of inputs and outputs in terms of modality Based on different configuration and design of interfaces, HCI systems can be divided into:  Unimodal HCI systems  Multimodal HCI systems 20

21. Unimodal HCI system A system interface relies on a number of inputs and outputs that enable users to interact with computing resources via the interface. A system that is based on a single interface mode is called unimodal. Based on the nature of different modalities, they can be divided into three categories:  Audio-based  Sensor-based  Visual-based 21

22. Audio based unimodal HCI Deals with information acquired by different audio signals. Key components:  Microphone  ASR (automated speech recognition) and NLU(natural language understanding) software The main research areas of audio based HCI are divided into:  Speech recognition  Speaker recognition  Auditory emotion analysis  Human-made noise detection  Musical interactions Examples of Audio based unimodal HCI  Vehicle voice command interface 22

23. Sensor based unimodal HCI Wide range of applications based on environmental sensing A common feature in every application is that at least one physical sensor is used between machine and human to provide interaction. Examples of sensors:  Motion tracking sensors/digitizers  Haptic sensors  Pressure sensors  Keyboard, mouse, game controllers Examples of Sensor based unimodal HCI  Smart thermostat 23

24. Visual based unimodal HCI Also called machine vision  Observation of the environment using cameras Different aspects of human responses can be recognized as visual signals Can be used for detection, identification, and tracking of an individual  Data can be translated into meaningful machine/computer input Main research areas of visual bashed unimodal HCI:  Facial expression analysis  Body movement tracking  Gesture recognition  Gaze detection Examples of visual based unimodal HCI  Security camera 24

25. HCI design (Documentation) HCI design should precede coding  If coding has begun, group meetings are needed to evaluate, document, and update current UI UI functionality based on continuous evaluation Focus on typical user for UI design aspect Measure user interaction with the system UI  Observe, record, and analyze user reactions and performance HCI design is an iterative process  Gather UI requirements, test and find issues, update UI, repeat 25

26. HCI design process (Documentation) Identify needs and requirements of the stakeholders Build interactive prototypes Evaluate the prototype designs Repeat process to increase functionality of UI Implement final UI design 26

27. Usability walkthroughs (Documentation) Create an explicit test scenario (test plan) before recruiting users Each member of the project group should take the test (pilot study) Recruit primary users Conduct the test with primary users During the walkthrough  Greeter gets users settled  Observer(s) take notes while users walk through predetermined test scenarios 27

28. HCI usability goals Satisfaction  Effective functionality, nice experience Robustness  Stable, low probability of (system) interface errors Efficiency  Good use of user’s time, system resources Learnability  Low learning cure to use UI Memorability  User remains efficient even though the UI is used infrequently 28