Department of Computer Science Misr International University Lecture

Department of Computer Science Misr International University Lecture 1 Introduction

§ Lecturer: Dr. Mai Elshehaly maya 70@vt. edu § Teaching assistant/ Lab demonstrator: (TBD) § Lecture: § Time: Monday 8: 30 – 10: 30 (G 1); 13: 00 – 15: 00 (G 2) § Office Hours: Monday 11: 00 – 12: 30 § Lab hours: check your section’s schedule © Mai Elshehaly

§ Main Reference: § Interaction Design: Beyond Human-Computer Interaction, 3 rd edition. § By: Yvonne Rogers, Helen Sharp, and Jenny Preece § Publisher: John Wiley & Sons § Course website (will be available 18 -Sep-2017): www. vaqua. org/mai/hci © Mai Elshehaly

§ 3 Analytic thinking assignments (as homework) § 3 Lab assignments (to be solved in lab) § 1 project 3 deliverables © Mai Elshehaly

§ Deliverable 1: Requirements analysis 20% of project grade § Problem statement § Stakeholders § Observations & interviews § User goals and tasks § Deliverable 2: Design 30% of project grade § Scenario § Sketches of alternative designs § Prototype implementation § Deliverable 3: Evaluation & Final report 50% of project grade § Pilot testing § Summary of all project phases (analysis, design, implementation) § Reflection

§ Collaboration § You may discuss problems and solutions but DO NOT copy-paste § Each student must write their own code/answers § You MUST write on your homework the names of everyone with whom you collaborate § Zero tolerance on plagiarism § Neither ethical nor in your best interest § Don’t cheat. We will find out. © Mai Elshehaly

§ Attendance is very important § Ask a LOT of questions § Interact with classmates and instructor(s) § Love your project! § You’re more likely to succeed if you care about what users want to achieve © Mai Elshehaly

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

§ The Human § Single user, groups, I/O channels, memory, reasoning, problem solving, error, psychology § The Computer § Desktop, embedded system, data entry devices, output devices, memory, processing § The Interaction § Direct/indirect communication, models, frameworks, styles, ergonomics

“Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use, and with the study of major phenomena surrounding them. ” -ACM SIGCHI

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 12

§ User wants to find a home to buy

§ User wants to find a home to buy

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

Products Graphics Architecture To make things “better” for the user

§ Their goal is to design interactive systems that are enjoyable to use, that do useful things and that enhance the lives of the people who use them. § They want their interactive systems to be accessible, usable and engaging. § In order to achieve this they believe that the design of such systems should be human -centered. § That is, designers need to put people rather than technology at the center of their design process.

§ The creative process of specifying something new § The representations that are produced along the way – e. g site map, blueprints, sketches, etc. § It typically involves much iteration – both problem and solution evolve during design § Our focus is on interactive systems – such as cameras, phones, web sites, DVDs, computer applications… any device or system that is interactive Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 20

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 22

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 23

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 24

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 25

§ Technologies - what can technology do? What content does something have? § People - who will use it, who will be affected by it? § Activities and contexts - what will people have to do in what circumstances? Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 26

§ The term we use to describe the technologies that interactive systems designers work with. § They are components, devices, products and software systems concerned with processing information. § They deal with the transmission, display, storage or transformation of information that people can perceive and that respond to people’s actions § That includes such things as phones, web sites and washing machine controllers and increasingly clothes, jewelry and buildings! Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 27

§ Make the user integral to the design process § Focus on the experience “inside out” of their moving through the software and interacting with its various components.

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 29

Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 30

§ All those parts of the system we come into contact with… § Physically we might interact with a device by pressing buttons or moving levers and the interactive device might respond by providing feedback through the pressure of the button or lever. § Perceptually the device displays things on a screen, or makes noises which we can see and hear. § Conceptually we interact with a device by trying to work out what it does and what we should be doing. The device provides messages and other displays which are designed to help us do this. Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 31

§ Input § Methods are needed to enter commands (tell the system what we want it to do) § We also need to be able to navigate through the commands and the content of the system § We need to enter data or other content into the system § Output § So the system can tell us what is happening – provide feedback § So the system can display content to us. Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 32

§ …. is more than just designing the user interface …. is more than designing the input, output and content § It is about designing the whole human-computer interaction § It is about designing the human-human interaction that is often enabled through devices § It is about designing whole environments of interlinked devices and objects § Think of designing museum exhibits, or an amusement park, an airport, a hotel lobby or a shopping mall § Common goal: to improve the user experience Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 33

§ We take a human-centered approach to designing interactive systems. That means… § thinking about what people want to do rather than just what the technology can do § designing new ways to connect people with people § involving people in the design process § designing for diversity Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 34

• 1950 s - computers invented • 1960 s - first screen and mouse developed • 1970 s - business start to take up computers seriously. First internet created • 1980 s - Arrival of microchip and micro-computers • 1984 - Apple Macintosh (Xerox Star). Games consoles arrive. First conferences on HCI • 1990 s - World Wide Web arrives • … and so on to Ubiquitous Computing Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek Mark Weiser 1999 35

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

http: //discovery. ucl. ac. uk/7150/1/7150. pdf

§ Not considering users who used the PC § Systems developed by programmers who used computers for everyday work § Designers played computer games for years Forgetting how difficult and obscure some of their designs can be to people who have not had these experience Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 38

§ Web and mobile dramatically changed the age of HCI § E-commerce § E-Guiding § E-Learning § E…………. § Before the immediacy of e-commerce, usability problems were only discovered after purchase. § If you bought a nice looking MP 3 player and brought it home only to find it was difficult to use, you could not take it back! § The shop would say that it delivers its functions, all you had to do was to learn how to operate it properly. (read the manual) Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 39

http: //www. baddesigns. com/ Dr Ayman Ezzat modified version of Dr, Frank Kriwaczek 40

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

§ What? § “A user-focused design process with the goal of making user experience accessible to the designers, to allow them to conceive of designing experiences rather than designing services. ” § How? § Identify key moments and places: § Where people come into contact with the service § Where subjective experience is shaped § Where the desired emotional and sensory connection needs to be established § Work with front-line people who bring alive these touch points in the journey

§ The user rather than being a passive recipient of a product or service, becomes an active co-designer of the product or service

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

Usability § People are trying to accomplish their tasks in life. (system independent) task person system § Introduce a system: User Interface should maximize their ability.

Reqs Analysis Design Evaluate Develop A process for HCI production to ensure usability goals are met

Reqs Analysis Design Evaluate Develop many iterations

§ People (users) are all different § People are unpredictable § Design skill isn’t enough § Evaluation with users is required § Designer’s pride § New ways to think, break out of the box § Programmers stink at Usability

Programmers stink at Usability § don’t think like ‘normal’ people § know the software internals, technology first § enjoy systems more than people § arrogant (my software!)

q Understand HCI theory and practice q Perform informed and critical evaluation of computer-based technology q Focus on User-oriented perspective, rather than system-oriented, with two thrusts: human (cognitive, social) and technological (input/output, interactions styles, devices). q Design guidelines, evaluation methods, participatory design, communication between users and system developers.

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

§ Preliminary topics and team formation § Before next lecture: § Send project group names and brainstorming ideas to maya 70@vt. edu § When you propose an idea, identify: § Target users § The problem that your interactive system will solve § User goals § One person who can act as a customer § More details will be made available on the website § Deadline for Phase 1 (requirements analysis): 1 st of October 2017.

§ What is Human-Computer Interaction (HCI)? § What is Interaction Design (ID)? § Components of good design § What is User Experience (UX)? § What is Usability Engineering? § Project announcement § HW 1 announcement

§ Identify one good example and one bad example of User Interface design § Write no more than 500 words describing why the first design is good and the second is bad § The interface can be for any system including: desktop software, web applications, smartphone apps, consumer devices, car dashboards, building entrances, traffic intersections, shower controls, etc. § Refer to “Components of good design” (Slide 37) to explain your answer. § You may include figures or screenshots § How to turn in your HW? § Hand one printed page with your name and answer to the class instructor on Monday 18/09/2017.