Human Computer Interaction (HCI): Introduction

HUMAN COMPUTER INTERACTION Dr. Bassam Hammo & Dr. Ammar El- Hassan Introduction to the HCI course Course Information  Syllabus: available on elearning  Teaching methods: ◦ PP Presentations: available on www.elearning.psut.edu.jo ◦ Videos (inte...

HUMAN COMPUTER INTERACTION Dr. Bassam Hammo & Dr. Ammar El- Hassan Introduction to the HCI course Course Information  Syllabus: available on elearning  Teaching methods: ◦ PP Presentations: available on www.elearning.psut.edu.jo ◦ Videos (interactive)  Evaluation methods: ◦ Team project (20%) ◦ First Exam (20%) ◦ Second Exam (20%) ◦ Final Exam (40%) Course Overview  Introduction to HCI  History of HCI  Understanding users & their tasks  Designing with the users ◦ User Centered Design & Prototyping ◦ Evaluating interfaces with users  Designing & building visual interface (GUIs) ◦ Web design patterns ◦ Graphical screen design ◦ Visual Basic examples  Special topics ◦ NLP & Agents Human Computer Interaction (HCI) Human Computer Interaction (HCI)  A discipline concerned with the ◦ Design ◦ Implementation ◦ Evaluation of interactive computing systems for human use The HCI Process HCI  What happens when a human and a computer get together to perform a task? ◦ task - write a document, calculate budget, solve equation, learn about physics, drive your car,... HCI  addresses any interaction by humans with computer systems: ◦ as users ◦ as developers ◦ as individuals ◦ as groups  also referred to as: ◦ User Interface Design, or ◦ Human-Computer Interface Design HCI  concerned with the process of design ◦ not only the what, but also the how & the why of interface design  part of the larger discipline of Human Factors or Human Factors Engineering ◦ known as Ergonomics ◦ looks at how users:  perform activities, tasks, & jobs  interact with systems  use tools, machines, computers, & software What is a “User Interface”?  The term “User Interface” refers to the methods and devices that are used to make the interaction between machines and the humans who use them (users) possible  UIs can take many forms, but always accomplish two fundamental tasks: ◦ communicating information from the machine to the user ◦ communicating information from the user to the machine Goals of HCI  Allow users to carry out tasks ◦Safely ◦Effectively ◦Efficiently ◦Enjoyably  These aspects are also known collectively as Usability Goals of HCI  Efficiency & Satisfaction can be measured by:  Time to learn. How long does it take for typical members of the user community to learn how to use the actions relevant to a set of tasks?  Speed of performance. How long does it take to carry out the benchmark tasks?  Rate of errors by users. How many and what kinds of errors do people make in carrying out the benchmark tasks? Although time to make and correct errors might be incorporated into the speed of performance, error handling is such a critical component of interface usage that it deserves extensive study. Goals of HCI  Efficiency & Satisfaction can be measured by:  Retention over time. How well do users maintain their knowledge after an hour, a day, or a week? Retention may be linked closely to time to learn, and frequency of use plays an important role.  Subjective satisfaction. How much did users like using various aspects of the interface? The answer can be ascertained by interviews or by written surveys that include satisfaction scales and space for free-form comments. Usability of Interactive Systems UI Design – Why???  Desire to improve the users' experience  In business settings, better decision-support and document-sharing tools support entrepreneurs,  At home digital photo libraries, and internet conferencing enhance family and personal relationships.  Millions of people take advantage of the World Wide Web’s extraordinary educational and cultural heritage resources, which provide access to everything from art to music, sports and entertainment. UI Design – Why???  Desire to improve the users' experience  Economists see a direct link between cellphone dissemination and economic growth since communications facilitate e-commerce and stimulate entrepreneurial ventures.  Mobile devices also promote wellness, enable timely medical care, and provide life-saving disaster response services. UI Design – Impacts & Effects  UI designers are the heroes of a profound transformation.  Their work turned personal computers into today's wildly successful mobile devices enabling users to communicate and collaborate in remarkable ways.  The desktop applications that once served the needs of professionals have increasingly given way to powerful social tools that deliver compelling user experiences to global communities.  Communities of users conduct business, communicate with family, get medical advice and create user-generated content that can be shared with billions of connected users. UI Design – Impacts & Effects  These advancements were made possible because researchers and UI designers harnessed technology to serve human needs.  Researchers created the interdisciplinary design science of HCI. HCI = Experimental psychology + tools of CS.  Then they integrated lessons from educational and industrial psychologists, instructional and graphic designers, technical writers, experts in human factors or ergonomics and growing teams of anthropologists and sociologists.  The spread of mobile social tools and services enables further and fresher insights from sustainability activists, consumer advocates, citizen scientists, and humanitarian disaster response teams. UI Design – Impacts & Effects  User experience designers produce business success stories, Hollywood heroes, and Wall Street sensations.  They also produce intense competition, copyright- infringement suits, intellectual-property battles, mega- mergers, and international partnerships.  Internet visionaries, like Google's Eric Schmidt, promote a world with free access to information and entertainment while equally devoted protectors of creative artists, like singer Taylor Swift, argue for fair payments.  User interfaces are also controversial because of their central role in personal identification, national defense, crime fighting, electronic health records and so on. UI Design – Impacts & Effects  Impact of Effective user experiences change people's lives (At individual/personal level):  Doctors can make more accurate diagnoses;  Pilots can fly airplanes more safely;  Children can learn more effectively;  Users with disabilities can lead more productive lives;  Graphic artists can explore more creative possibilities. UI Design – Impacts & Effects  Disruptive Effects (At individual/personal level):  Reducing the need for certain skillsets - telephone operators, typesetters, and travel agents.  Too often, users must cope with frustration, fear, and failure when they encounter excessively complex menus, incomprehensible terminology, or chaotic navigation paths. UI Design – Impacts & Effects  Effects (At social level): connected communities open up new forms of collective action and policy engagement.  Having more informed citizens may lead to better decisions, more transparent governance, and greater equity when facing legal, health, or civic challenges. UI Design – Impacts & Effects  Effects (At social level):  There may be increased dangers from extreme groups who promote terrorism, oppressive social policies, or racial hatred.  The increased power of social media and collaboration technologies means that there must be a new balance of legal protections, police powers, and privacy. Usability Motivation by Domain  1. Consumer Electronics & Social Media  UI Designs are essential marketing instruments for the growth consumer electronics sales. By providing effective and satisfying designs that are widely adopted for personal communications, education, healthcare, government and entertainment.  Product announcements trigger worldwide media coverage involving celebrities who showcase the latest designs, appealing features, and must-have capabilities. Usability Motivation by Domain  2. Games & Entertainment  Entertainment applications have flourished, making computer games a larger industry than Hollywood, while game input devices like the Nintendo® Wii™ and the Microsoft Kinect's™ controller-free gameplay open up entirely new possibilities in areas ranging from sports to education to rehabilitation. This technology has now started to appear in automotive and home-cinema  Designers add layered features and capabilities to suit levels of users and gamers and to entice novice users to try new games and applications with some advanced features opening up as in-app or in-game purchases. Usability Motivation by Domain  3. Professional Environments  Include PoS teller apps to nuclear reactor control panels and life-critical systems (air traffic, nuclear reactors, power utilities, police & fire dispatch, military ops, and clinical care)  High costs are accepted (Lengthy training periods are acceptable to obtain rapid, error-free performance, even when the users are under stress.)  But!!! high reliability & effectiveness are top priorities Usability Motivation by Domain  4. Exploratory, Creative & Collaborative Platforms  Exploratory: Web browsers, search engines, data visualization, and team collaboration support.  Creative: Design environments, music- composition tools, animation builders and video- editing systems. Usability Motivation by Domain  4. Exploratory, Creative & Collaborative Platforms  Collaborative: Enable two or more people to work together (even if the users are separated by time and space) through use of text, voice, and video via systems that facilitate face-to -face meetings; large audience participation in webinars; or through sharing tools that enable remote collaborators to work concurrently on a document, map, calendar, or image. Usability Motivation by Domain  4. Exploratory, Creative & Collaborative Platforms  Because users would typically be experts in the domain area of the application but not necessary the tools and platforms, makes it very difficult to strike a perfect balance in designing such systems.  Ideally, we want the computer to vanish from the equations and let the users do what they do best with direct manipulation and minimal distraction, see metaverse and Chapter 7. Usability Motivation by Domain  5. Socio-Technical Systems  Many users over prolonged time periods; include healthcare especially for the elderly, community service, disaster response and community crime reporting.  Users will want to know whom to turn to when things go wrong-and who to thank when things go right. Usability Motivation by Domain  5. Socio-Technical Systems  The role of the interface in these cases is to be easy to use, reliable and trust-worthy.  For example, in electronic voting systems, citizens need reassuring feedback that their votes are correctly recorded e.g., by receipt.  In addition, government officials and professional observers from opposing parties need to have ways of verifying that the votes from each district and regional aggregations are correctly reported. If complaints are registered, investigators need tools to review and verify procedures step-by- Usability Motivation by Domain  5. Socio-Technical Systems  In addition, government officials and professional observers from opposing parties need to have ways of verifying that the votes from each district and regional aggregations are correctly reported.  If complaints are registered, investigators need tools to review and verify procedures step-by- step. Usability Motivation by Domain  5. Socio-Technical Systems  For novice and first-time users designs should emphasize ease of learning and provide the feedback that builds trust.  Designs for professional administrators and seasoned investigators enable rapid performance of complex procedures, perhaps with visualization tools to spot unusual patterns or detect fraud in usage logs. Usability goals  Safe to use  Effective to use  Efficient to use  Easy to learn  Easy to remember how to use (recall)  High speed of user task performance  Low user error rate  Subjective user satisfaction (perspectives) Human Computer Interaction How it is related to Interaction Design (ID)? What is Interaction Design (ID)?  “Designinginteractive products to support the way people communicate and interact in their everyday and working lives” Sharp, Rogers and Preece (2007) HCI and Interaction Design Which kind of design?  Number of other terms used emphasizing what is being designed, e.g., ◦ user interface design, software design, user-centred design, product design, web design, experience design  Interaction design is the umbrella term covering all of these aspects ◦ fundamental to all disciplines, fields, and approaches concerned with researching and designing computer- based systems for people Improving Interfaces Improving Interfaces  How do we improve interfaces? ◦ Change attitude of software professionals ◦ Integrate UI design methods & techniques into standard software development methodologies now in place Improving interfaces  Why is this important? ◦ Computers now affect every person in society - Ubiquitous ◦ Product success may depend on ease of use. Improving Interfaces  Know the User! ◦ Physical abilities ◦ Cognitive abilities ◦ Personality differences ◦ Skill differences ◦ Cultural diversity ◦ Motivation ◦ Special needs What is a “Good” User Interface?  Ideally, the UI should represent the capabilities of the entire system  The more complex the system, the more important is the UI  UI should help the user build a “mental model”, or an intuitive sense, of how the system works  When a system feels natural to use, the UI is doing a good job What is a “Good” User Interface?  A good UI helps tailor the system to the user (adaptive)  A good UI helps users absorb information  A good UI meets the principal design goals ◦ e.g., learnability vs. usability, ◦ first-time use, ◦ infrequent use, ◦ or expert use Human Computer Interaction Design (HCID) Scope of HCID  Primary goal is to design usable systems  Requires knowledge about: ◦ Who will use the system - the user  motivation, satisfaction, experience level, etc. ◦ What will it be used for - the tasks  office, information retrieval, transaction-based, etc. Scope of HCID (cont)  Requires knowledge about: ◦ Work context and environment in which it will be used  job content, personnel policies, etc. ◦ What is technically and logistically feasible  technological capabilities, memory size, costs, time scales, budgets, etc. HCID Principles  Understand the user and the application  Ensure self-evident feature operation  Use users’ knowledge across systems  don’t slow down the user ◦ work with the user, not against him/her  provide simple ways to deal with user errors The Role of Users in HCID The User’s Experience  How a product behaves and is used by people in the real world ◦ the way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it ◦ “every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003) Two crucial errors  Assume all users are alike  Assume all users are like the designer Core characteristics of interaction design  Users should be involved through the development of the project  Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project  Iteration is needed through the core activities User-Centered Design (UCD) Framework vs Design If frameworks provide the high-level structure, then the design methods are the building blocks that are used to populate the structure. User-Centered Design (UCD)  approach that focuses on users and on activities that meet users’ needs.  represents four key concepts: ◦ early focus on the user ◦ integrated design ◦ early and continual user testing ◦ iterative design Principles of UCD  Objective of UCD is to match whatever is being designed/developed to the users’s abilities & expectations  Not much of a problem for one or two users ◦ problem complexity increases when there are many users Principles of UCD  user differences will always exist ◦ but design for the greatest commonalties  focusesnot on technology, but on the user ◦ cognitive abilities ◦ limitations ◦ cultural, professional, or personal preferences Typical UCD Cycle 1 Define Application 2 4 6 8 Identify Gather Task/ Do a Develop User User “First Pass” Application Requirements Information Design 3 5 7 9 Conduct Explore (Re) Test Follow-up Task New Evaluation Analysis Ideas/ Design Questions 10 Release UCD Phases  Define the Application Scope out the problem, and clearly lay down the ground rules. ◦ What is the application? ◦ Who are the intended users? ◦ How and where will the application be used? UCD Phases  Identify User Requirements Know your users, and know them well. ◦ Designers are not users. ◦ Managers & vice-presidents do not represent real users. UCD Phases (cont.)  Conduct a Task Analysis Remember, context is important. ◦ What types of tasks do users typically use in order to do their jobs? ◦ What cognitive or perceptual are normally imposed on users? UCD Phases (cont.)  Gather Existing Information on Users &Tasks in Other Applications Gather information; investigate where information is lacking. ◦ What are the users’ preferences for different interfaces? ◦ What are the users’ preferences for different features? ◦ What factors affect usability measures (e.g., performance, satisfaction) in different interfaces? UCD Phases (cont.)  Explore New Ideas and Questions Don’t be afraid to ask hard questions. UCD Phases (cont.)  Do a “First Pass” Design Prototype early. Design to clear and objectively defined usability goals. UCD Phases (cont.)  (Re) Test the Design Test repeatedly and iterate design until usability goals are met. UCD Phases (cont.)  Develop the Application By now, you should be fairly confident that you are developing the right application. UCD Phases (cont.)  Follow-up Evaluation Observe and evaluate the effectiveness of the user interface in the real world of real users. Conduct field studies. UCD Phases (cont.)  Release the product PRESUME that there is a better way, and set out to find it. Who is in the HCI Business? What skills are used in HCI?  Designer ◦ Visual and audio design ◦ Design process skills and methods  Programmer ◦ Systems, toolkits, and languages ◦ Software engineering techniques  Researcher ◦ Cognitive principles and theories ◦ Experimental techniques What do professionals do in the Interaction Design (ID) business?  Interaction designers - people involved in the design of all the interactive aspects of a product  Usability engineers - people who focus on evaluating products, using usability methods and principles  Web designers - people who develop and create the visual design of websites, such as layouts  Information architects - people who come up with ideas of how to plan and structure interactive products  User experience designers - people who do all the above but who may also carry out field studies to inform the design of products How do people interact with computers? Console – SP, OOP login as: SomeUser password:a***1**_ Last login: Monday Feb 4 08:22:48 2013 from ju.edu.jo *********************** * Welcome to condor! * * Authorized Use Only * *********************** Condor> echo "hello world" hello world Condor> connect to the web connect: Command not found. Condor> help help: Command not found. Condor> rm –R * Condor> Pointing Devices Desktop GUIS and applications Web Applications 3D Desktops Mobile Devices Pen-based interaction Interactive workspaces Display walls Voice and multimodal interaction Embodied interaction Virtual reality Good & Bad Designs! What is involved in the process of interaction design IDLC  Identifying needs and establishing requirements for the user experience  Developing alternative designs to meet these  Building interactive prototypes that can be communicated and assessed  Evaluating what is being built throughout the process and the user experience it offers Working in multidisciplinary teams  Many people from different backgrounds involved  Different perspectives and ways of seeing and talking about things  Benefits ◦ more ideas & designs are generated  Disadvantages ◦ difficult to communicate and progress forward the designs being created Seven deadly mistakes of user interface design 1. Design for technology rather than the user: technology is not the solution 2. “Coolness”: flashy graphics do not improve a bad UI 3. Logical vs. visual thinking: users don’t think like software designers 4. User input as right or wrong: design for error (Adapted from Trower, 1994) Seven deadly mistakes of user interface design 5. Overextend basics: make simple things simple, complex things possible 6. Fix it with documentation: users do not read documentation; do not try to fix a UI defect through documentation 7. Fix it in the next release: old habits are hard to break (Adapted from Trower, 1994) Which seminar would you attend? How does this door open?