LECTURE 5 COMPUTER PERIPHERALS INTERACTION MODELS

Transcription

1 September 21, 2017 LECTURE 5 COMPUTER PERIPHERALS INTERACTION MODELS HCI & InfoVis 2017, fjv 1

2 Our Mental Conflict... HCI & InfoVis 2017, fjv 2

3 Our Mental Conflict... HCI & InfoVis 2017, fjv 3

4 Recapitulation Lecture #4 Knowledge representation Mental Models, definitions Mental Models and Design Mental Models and Visual perception Schemata, definitions & examples Metaphors, definitions & examples Introduction of key principle: Visibility HCI & InfoVis 2017, fjv 4

5 You and Human Centered Interaction! Learned major principles: expert mode Assess an interactive computer task Usability, recognize its usability Cognetics, assess Focus, Cognitive Load Affordance, are affordances well communicated Visibility, assess feedback and reachability Screen Layout, principles of Gestalt Logics, reasoning Mental Model & Metaphor HCI & InfoVis 2017, fjv 5

6 Mismatched Metaphor HCI & InfoVis 2017, fjv 6

7 Functional ~ Structural Physical sectioning of an object Reconstructing the sections to 3D object Metaphor: section is represented by image: Image has a thickness All domains in that image have same thickness Builds up a model of the object Mental Model: How does the biologist look at this model How does the CS look at this model HCI & InfoVis 2017, fjv 7

8 Example from the Workbench HCI & InfoVis 2017, fjv 8

9 Metaphor Example (1) King Harald Blåtand was a legendary 10 th century Viking king who unified Scandinavian countries (N + DK): succeeded people talk to each other taken up by ICT industry as metaphor for wireless technology uniting technology, communication and consumer electronics. Blåtand = Blue tooth HCI & InfoVis 2017, fjv 9

10 Metaphor Example (2) Harald Blåtand (HB) continued policy of his father King of Denmark, then Norway Brought Christianity Tall man with a dark skin Old Danish Blå = dark skinned Tan = great man tooth hygiene not known Left stones with Old Norge Runes HCI & InfoVis 2017, fjv 10

11 to be or not to be interactive... COMPUTER PERIPHERALS FOR INTERACTION WITH GRAPHICAL INTERFACES HCI & InfoVis 2017, fjv 11

12 Computer consists of Elements Elements affect the interaction Internals RAM, CPU, Disk(s), Network Input devices Text entry Pointing Scanner, Camera, Microphone, Gesture devices (camera) Output devices Screen: small & large, LCD, Projection Displays Printer, writing terminal, paper Sound: headphone, speaker system Haptic feedback device Virtual reality special interaction and display devices physical interaction e.g. sound, haptic, bio-sensing, sensors HCI & InfoVis 2017, fjv 12

13 Text input QWERTY Keyboard Most common text input device Allows rapid entry of text by experienced users Keypress Closes connection, causing a character code to be sent Usually connected by cable, but can be wireless Standardised layout non-alphanumeric keys are placed differently accented symbols needed for different scripts minor differences between UK and USA keyboards QWERTY arrangement not optimal for typing layout to prevent typewriters jamming! Alternative designs allow faster typing but large social base of QWERTY typists produces reluctance to change. HCI & InfoVis 2017, fjv 13

14 Alternatives to QWERTY Alphabetic keys arranged in alphabetic order not faster for trained typists not faster for beginners either! Dvorak Q W E R T Y U I common letters under dominant fingers biased towards right hand common combinations of letters alternate between hands 10-15% improvement in speed and reduction in fatigue large social base of QWERTY typists produce market pressures not to change 1 O A S D F G H J K L Z X C V B N M,. SPACE P HCI & InfoVis 2017, fjv 14

15 Qwerty vs. Dvorak Q W E R T Y U I O A S D F G H J K L Z X C V B N M,. SPACE P HCI & InfoVis 2017, fjv 15

16 Error Preventing Keyboard Haptic keyboard errors cost more pressure Pressure sensative keyboard Uses spelling checker on the fly Uses prediction and Bag-of-Words Tactile interface AI added to interaction HCI & InfoVis 2017, fjv 16

17 Demonstration Keyboard HCI & InfoVis 2017, fjv 17

18 Mouse Most common pointing device Handheld pointing device very common easy to use Metaphor (by accident) Two characteristics planar movement buttons originally 1 to 3 buttons on top making a selection, indicating an option, initiating drawing etc.) HCI & InfoVis 2017, fjv 18

19 Introduction of Mouse device 1967 built by Douglas Engelbart (Stanford) X-Y position indicator for a display system 1970 US patent Hand in hand with development hypertext Links should be pointed at Quintessential in development of hypertext and internet Tail = mouse metaphore 19

20 Archetypal mouse A true prototype HCI & InfoVis 2017, fjv 20

21 Engelbart s workstation Numerical Keypad isn. HCI & InfoVis 2017, fjv 21

22 ...and then, there was the Mouse HCI & InfoVis 2017, fjv 22

23 Advanced pointing devices LCD Digitizer: Tablet & Display HCI & InfoVis 2017, fjv 23

24 Advanced pointing devices LCD Digitizer: Tablet & Display Input of Text and Graphics Range of additional interactive modes Includes handwritten input Pen has additional affordances HCI & InfoVis 2017, fjv 24

25 Other TEXT input - Dasher Intelligent processing of vowel-consonant combinations. AI techniques applied in support of the interaction Color is used to indicate different groups of characters/fonts Range of applications in different devices HCI & InfoVis 2017, fjv 25

26 Dasher Demonstration HCI & InfoVis 2017, fjv 26

27 Wii Mote Haptic devices Cyber grasp, force feedback virtual glove Force feedback device, used in virtual design, medical applications. HCI & InfoVis 2017, fjv 27

28 Haptic Force Feedback Adding immersion to VR using Haptics; here, Force Feedback Arm Typical multi-modal Approach HCI & InfoVis 2017, fjv 28

29 Demonstration Haptic I/O HCI & InfoVis 2017, fjv 29

30 Haptic/Tactile Feedback HCI & InfoVis 2017, fjv 30

31 Ubiquitous I/O: Gestures HCI & InfoVis 2017, fjv 31

32 Other I/O devices... Leap Motion Myo Gestures, Pointing Gestures, Grasping Gestures, Muscle-tension HCI & InfoVis 2017, fjv 32

33 Interacting with computers Understanding human computer interaction Understanding the human, i.e. the user Motivation, Intention Expectation i.e. Norman 7 Stages Model Understanding the computer, i.e. the elements Mapping expectations Input and Output devices, paper, sensors, etc. Capacity, possibilities? memory, processing, networks 33

34 Models for Interaction, theory PARADIGMS, INTERACTION MODELS, INTERACTION STYLES HCI & InfoVis 2017, fjv 34

35 Paradigms An example that serves as pattern or model. Greek paradeigma = example Model that forms basis of a theory or collection of theories.

36 Paradigms and HCI Predominant theoretical frameworks or scientific world views e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics Understanding HCI history is largely about understanding a series of paradigm shifts Not all listed here are necessarily paradigm shifts, but are at least candidates History will judge which are true shifts HCI & InfoVis 2017, fjv 36

37 Interaction Paradigms Batch processing Timesharing Networking Graphical display Microprocessor WWW Ubiquitous Computing Grid Computing Cloud Computing Multi Modal Computing 1950 s 1960 s 1970 s 1980 s 1990 s 1995 s This era HCI & InfoVis 2017, fjv 37

38 Paradigm shifts Batch processing Timesharing Networking Graphical display Microprocessor WWW Ubiquitous Computing Grid Computing Multi modal Wait on turn, get output Wait, intermediate output Share resources, own CPU Direct manipulation, Visibility Personal computing, WIMP Globalization information Sensor driven, environmental CPU driven, includes others Multimedia Small Devices Augmentation & Virtualization HCI & InfoVis 2017, fjv 38

39 Multimodality A mode is a human communication channel PC, Computer Internet Smart Phone, Tablet, etc. Emphasis on simultaneous use of multiple channels for input and output Multiple Displays Cell/Smart Phone, PC Sound devices + HCI & InfoVis 2017, fjv 39

40 Example Multimodal Interaction HCI & InfoVis 2017, fjv 40

41 Interactivity? Early interaction paradigms: batch processing punched card stacks or large data files prepared long wait. line printer output and if it is not right Now most computing is interactive rapid feedback = VISIBILITY (expected) the user in control (most of the time) doing rather than thinking HCI & InfoVis 2017, fjv 41

42 Important: Styles of Manipulation Office-direct manipulation user interacts with artificial world with artifacts Industrial indirect manipulation user interacts with real world through interface Issues.. feedback delays immediate feedback instruments interface system plant HCI & InfoVis 2017, fjv 42

43 Styles and Paradigms Simple paradigm, Single user interface Complex paradigm, Multi user interface Multi user, GRID Industry, science and home apps? Multi user, multi modal Industry, science and home apps!! Think of some examples Phone PC iphone Intelligent fridge (RFID tag technology) Etc.. HCI & InfoVis 2017, fjv 43

44 INTERACTION CONCEPTS HCI & InfoVis 2017, fjv 44

45 Concepts of interaction domain the area of work under study (where) e.g. graphic design, infovis, interaction goal what you want to achieve (what) e.g. create a solid red triangle, glyph task how you go about doing it (how) ultimately in terms of operations or actions e.g. select fill tool, click over triangle Note traditional interaction use of terms differs a lot especially task/goal!!! HCI & InfoVis 2017, fjv 45

46 Interaction model Norman Task language: the language of the user Core language: the language of the system Seven stages 1. user establishes the goal 2. formulates intention 3. specifies actions at interface 4. executes action 5. perceives system state 6. interprets system state 7. evaluates system state with respect to goal Norman s model concentrates on user s view of the interface, i.e. the user image HCI & InfoVis 2017, fjv 46

47 Execution/Evaluation loop execution goal evaluation system user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal HCI & InfoVis 2017, fjv 47

48 Execution/Evaluation loop goal execution system evaluation user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal HCI & InfoVis 2017, fjv 48

49 Execution/Evaluation loop execution goal system user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal evaluation HCI & InfoVis 2017, fjv 49

50 7 Stages of (Inter)Action (Norman, 1986) Goals task language Intention Expectation Evaluation Action specification Interpretation core language Execution Mental activity Perception Physical activity HCI & InfoVis 2017, fjv 50

51 Application of 7 Stages Model Hampering Execution user s formulation of actions (gulf of execution) actions allowed by the system interface: reduce the gulf to be effective Hampering of Evaluation (gulf of evaluation) user s expectation of changed system state actual presentation of this state gulf should be as small as possible for effective evaluation HCI & InfoVis 2017, fjv 51

52 7 Stages Gulf of Evaluation/Execution Goals Gulf of Execution Intention task language Action specification core language Expectation Evaluation Interpretation Gulf of Evaluation Execution Mental activity Perception Physical activity HCI & InfoVis 2017, fjv 52

53 Errors using an interface Slip understand system and goal correct formulation of action incorrect action Mistake may not even have right goal! Fixing things? Slip : better interface design (screens) Mistake: better understanding of system (metaphor) HCI & InfoVis 2017, fjv 53

54 Interaction framework Abowd & Beale Extension of Norman s 7 stages of interaction Abowd & Beale interaction framework has 4 parts user input system output task language, core language Each part has its own unique language S core O output I input U task Interaction translation between languages Problems in interaction = problems in translation HCI & InfoVis 2017, fjv 54

55 Using Abowd & Beale s model user intentions translated into actions at the interface translated into alterations of system state reflected in the output display interpreted by the user general framework for understanding interaction not restricted to electronic computer systems identifies all major components involved in interaction allows comparative assessment of systems an abstraction HCI & InfoVis 2017, fjv 55

56 Interaction Concepts: Navigation Navigation, relates to movement An essential asset of an interaction The following questions wrt an information space are posed: Where am I? Where can I go? How do I get there What is beyond What is usefull Orienting Searching Filtering Attention (Expecting, mapping user model) Movement in information Space is different Where have I been: exploration & wayfinding HCI & InfoVis 2017, fjv 56

57 Interaction Concepts: Sensitivity Sensitivity An essential asset of an interaction The following questions wrt an information space are posed: Where can I go from here How do I get there To answer: Interaction Efficiency Sensitivity of provided information Fitz Law for Interactive Objects S = SM, SI (2-tuple expression) Sensitivity = Movement in InfoSpace, Interaction required for Movement HCI & InfoVis 2017, fjv 57

58 Sensitivity Where can I go from here How to get there Interaction Cue i.e element in the interface Perceived Affordance Action selection Physical space is often mental model for information space Support the mental model with metaphors if otherwise. HCI & InfoVis 2017, fjv 58

59 Interaction Palette Interaction models Interaction modes Discrete Continuous Affordances, Visibility Visual Capcity Cognitive Load Visual Momentum Continuity Navigation: attention Sensitivity: sensitivity tuple, Fitz Law Remark: Interface, simplified information space HCI & InfoVis 2017, fjv 59

60 Review #5 Computer Peripherals Interaction Hardware Paradigms, shifts Interaction models Norman Abowd & Beale Gulf of Execution Gulf of Evaluation Interaction Palette HCI & InfoVis 2017, fjv 60

61 Paradigm Shifts Human Computer Interaction 2016, fjv 61