Human Computer Interaction - Introduction PDF

Human Computer Interaction Introduction to the course Dr. Ayşe Kula  Expectations? Why did you chose this course? What do you hope to learn in this course? Human Computer Interaction  Understanding user’s experiences with techno...

Human Computer Interaction Introduction to the course Dr. Ayşe Kula  Expectations? Why did you chose this course? What do you hope to learn in this course? Human Computer Interaction  Understanding user’s experiences with technology Learning how to apply a human-centered process Course in practice Objectives Learning methods for identifying users' requirements Learning to evaluate interactive systems with their users 2 Human Computer Interaction  To learn about the cognitive, social, and cultural aspects of human-computer interaction To gain competence in understanding the strategic Course use of complex computer systems, collaboration, Objectives and social media engagement To be able to evaluate and design software Understanding and reducing the environmental impacts of technology use. 3 Human Computer Interaction  Human-Computer Interaction (HCI) is about What is HCI? understanding and creating software and other technology that people will want to use, will be able to use, and will find effective when used. 4 Human Computer Interaction  Human-Computer Interaction (HCI) is an interdisciplinary field. Some of fields: Computer Science: Anthropology: Software Engineering Ethnographic Research Artificial Intelligence Information Science: Psychology: Information Retrieval What is HCI? Cognitive Psychology Information Architecture Design: Ergonomics: Interaction Design Physical Ergonomics User Interface (UI) Design Cognitive Ergonomics User Experience (UX) Design Education: Sociology: Educational Technology Social Informatics Instructional Design Computer-Supported Cooperative Engineering: Work (CSCW):. Systems Engineering Human-Robot Interaction (HRI) 5 Human Computer Interaction  Key Aspects of HCI: Design and Usability What is HCI? Interaction Techniques: Cognitive and Social Aspects Technology Integration Evaluation and Improvement 6 Human Computer Interaction Human Computer Interaction 1. HUMAN Dr. Ayşe Kula  The first subject of Human-Computer Interaction is the human. Human Psychology: The human How do people perceive the world around them? How do they store and process information? How do they solve problems? How do they physically manipulate objects? 8 Human Computer Interaction  Input Output Channels Human interaction with the external world occurs through the acquisition (input) and The human transmission (output) of information. 9 Human Computer Interaction  Input Output Channels The human H E A R I N G (e.g., sound clicks) TOUCH 10 Human Computer Interaction  Input Output Channels Vision The human Two stages in vision physical reception of stimulus processing and interpretation of stimulus 11 Human Computer Interaction  Input-Output Channels Vision Eye The human Visual Perception Size and Depth Perception Brightness Perception Color Perception Capabilities and Limits of Visual Processing 12 Human Computer Interaction  Input-Output Channels Optical illusions The human the Ponzo illusion the Muller Lyer illusion 13 Human Computer Interaction  Input-Output Channels Reading The perception and processing of text is an important aspect of interface design. There are several stages in the reading process: The visual pattern of the word on the page is perceived. The human The code related to the internal representation of the language is decoded. Syntax, semantics, and grammar knowledge are used to interpret the text. During reading, the eyes make rapid movements called saccades and fixations. Perception occurs during the fixation period. Letter shape is important for recognition. Similar words are easily recognized within word patterns (e.g., understanding what non- native speakers say immediately). 14 Human Computer Interaction  Input-Output Channels Reading and Seeing Reading from a computer screen is proven to be slower than reading from a book (Muter, 1982). Longer lines The human Fewer words on the page Guidance Familiarity with the center of the page These factors can be minimized in a good textual interface. 15 Human Computer Interaction  Input-Output Channels Reading and Seeing Negative contrast usage: Dark text on a light background, The human Higher brightness, More sharpness compared to positive contrast, Increased readability. Scientific evidence suggests that negative contrast is preferred more and performs better (Bauer, Coutaz, 1991). 16 Human Computer Interaction  Input-Output Channels Hearing The human The ear is a bodily apparatus and has 3 parts: The outer ear, which protects and amplifies the inner ear. The middle ear, which sends sound waves to the inner ear as vibrations. The inner ear, where chemical transmitters are released that cause impulses in the auditory nerve. 17 Human Computer Interaction  Input-Output Channels Hearing The human There are characteristics that differentiate sounds: Pitch (tone); frequency of the sound Intensity of the sound; amplitude Timbre; type or quality 18 Human Computer Interaction  Input-Output Channels Hearing Humans are selective in hearing. Even with background The human noise, they can hear new sounds. The ear can distinguish fine changes in sound and recognize familiar sounds without concentrating. 19 Human Computer Interaction  Input-Output Channels Hearing Provides important information and feedback about the The human environment. The absence of the sense of touch reduces the speed and accuracy of our movements. The sense of touch is important for visually impaired individuals. Stimuli are received through receptors in the skin: 20 Human Computer Interaction  Input-Output Channels Touch Some areas of our body are more sensitive than others. For The human example: fingers and thumbs. Kinesthesis (proprioception); awareness of the body's and joints' positions. Affects comfort and performance. Example: When typing, being aware of the proximity of the fingers and the feedback from the keyboard is important. 21 Human Computer Interaction  Input-Output Channels Movement Time taken to respond to stimulus: The human reaction time + movement time Movement time dependent on age, fitness etc. Reaction time - dependent on stimulus type: visual ~ 200ms auditory ~ 150 ms pain ~ 700ms 22 Human Computer Interaction  Input-Output Channels Movement Fitts' Law describes the time taken to hit a screen target: Mt = a + b log2(D/S + 1) The human where: a and b are empirically determined constants Mt is movement time D is Distance S is Size of target Þ targets as large as possible distances as small as possible 23 Human Computer Interaction  Human Memory Each sensory channel has a corresponding sensory The human memory: Iconic memory: visual stimuli Echoic memory: auditory stimuli Haptic memory: tactile stimuli 24 Human Computer Interaction  Human Memory Short-term memory stores limited information for a brief period. To ensure the information is stored in long-term memory The human and can be retrieved later, mental processes are required. Memory can be accessed in approximately 70ms and information held temporarily can be lost in about 200ms. A person can typically retain about 7±2 units of information in memory. According to Barbara Oeakley 5±2 unit of information 25 Human Computer Interaction  Human Memory 26539760853 265 397 608 53 Phone numbers (Area code + number) The human HECATRANUPTHETREET THE CAT RAN UP THE THREE Chunking information enhances short-term memory capacity. Grouping information into patterns facilitates recall. 26 Human Computer Interaction  Human Memory Long-term memory comes in two types: Episodic (Event-related): Presents events and experiences as sequences. Semantic: A structured record of facts, concepts, and skills. The human Information is stored in networks that are coded both visually and verbally and linked together. Provides access to information. Shows relationships between bits of information (through schemas and propositional networks). Supports inference. Semantic long-term memory is derived from episodic long- term memory. 27 Human Computer Interaction  Human Memory Long-Term Memory Models: Frames Information is organized in data structures. The human Can include procedural knowledge. Events or processes can be related to a sequence. Each item’s relationship to others is clearly specified. Type - subtype relationship 28 Human Computer Interaction  29 Human Computer Interaction  Human Memory DOG COLLIE Fixed legs 4 Fixed breed of DOG The human Default diet carnivorous Type sheepdog Sound bark Default size 65 cm Variable size colour Variable colour 30 Human Computer Interaction  Human Memory Long-Term Memory Models: Scenarios Scenario modeling involves structured knowledge for interpreting situations. Scenarios consist of elements that can be filled with contextually The human relevant information: Input conditions: Dog is sick, Vet is open, Owner has money Outcome: Dog gets better, Owner becomes poorer, Vet becomes richer Supports: Examination chart, Tools, Medication Roles: Vet examines, diagnoses, treats; Owner brings the dog, pays, takes the dog Scenes: Reaching the vet, waiting in the room, examination, payment Cues: Dog needs medication, Dog needs surgery 31 Human Computer Interaction  Human Memory Long-Term Memory has three main processes: The human Storage of information Forgetting Retrieval of information 32 Human Computer Interaction  Human Memory 1. Storage of Information The human Repetition Total time hypothesis Distributed practice Structure, meaning, and similarity 33 Human Computer Interaction  Human Memory 2. Forgetting Decay: Information gradually but very slowly fades The human away. Interference: Retroactive interference: New information causes loss of old information. Proactive interference: Old information prevents the learning of new information. 34 Human Computer Interaction  Human Memory 3. Retrieval of Information Recall: Information retrieved from memory can be The human supported by classifications and cues. Recognition: Previously encountered information facilitates recognition. It is a simpler cognitive activity compared to recall, where the information is a cue. 35 Human Computer Interaction  Reasoning and Problem Solving Thinking: The human Reasoning/Inference/Rational Thinking Problem Solving Skill Acquisition Errors and Mental Models 36 Human Computer Interaction  Reasoning and Problem Solving Thinking Reasoning/Inference/Rational Thinking: These are the pathways the brain follows in processing The human complex information and making decisions.. Types of rational thinking include: Deduction Induction Abduction Each type of reasoning is used in daily life but leads to conclusions in different ways. 37 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Reasoning Deduction: draws necessary conclusions from given premises. Example: If it's Friday, then he will go to work. The human It’s Friday Therefore, he will go to work. The logical result may not always be correct: Example: If it’s raining, the ground is dry. It’s raining Therefore, the ground is dry. Actual and logical truth can conflict: Example: Some people are babies. Some babies cry. Therefore, some people cry. 38 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Reasoning Induction: Generalizing from observed situations to infer about unobserved situations. The human Example: All elephants we’ve seen have trunks. Therefore, all elephants have trunks. Induction is unreliable but useful for learning about the environment: Example: We have information about elephants even if we haven't seen their habitat. We can only disprove induction, not prove it true. The number of observed trunked elephants or knowledge of existence doesn’t matter; another elephant might not have a trunk. 39 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Inference Inferences Inferences involve reasoning from events to causes. The human This method is used to provide explanations for observed events. Example: Ayşe drives fast when he's drunk. If I see Sam driving fast, I assume he is drunk. Inferences can be unreliable and may lead to incorrect explanations. 40 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Inference is a process of finding a solution to an unknown task using the knowledge we have. There are various theories about it 1. Gestalt Theory: The human Shifts from behaviorism to information processing theories. Problem-solving is both creative and reproductive. Creative problem-solving involves insight and reorganization of the problem. Reproductive problem-solving, as claimed by behaviorists, is based on past experiences. 41 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Inference 2. Problem Space Theory: A problem space consists of problem situations. A problem can be large, so problem-solving involves several processes. The human A problem has a starting state and a goal state, and processes move from start to end. Heuristic methods can be used in processes. Example: Playing chess. Starting state is arranging the board; goal state is checkmate. The problem space is limited by the capacity and speed of short-term memory. 42 Human Computer Interaction  Reasoning and Problem Solving (Thinking) Inference 3. Analogy: Focuses on how people solve newly encountered problems. The human One approach is analogy mapping. Analogy Mapping: Involves mapping knowledge from a familiar domain to a new problem. Similarities between the known and the new are recorded. Then, processes from the known domain are transferred to the new one. If domains are conceptually different, analogy mapping is difficult. 43 Human Computer Interaction  Reasoning and Problem Solving (Thinking) The human Why do we make mistakes, and what can we do to avoid them? To explain this, we need to first look at what happens during errors. 44 Human Computer Interaction  Reasoning and Problem Solving Types of Errors Slip: The intention is correct but the execution fails. The human Causes may include poor physical skills, inattention, etc. Changes in experienced behaviour can also lead to slips. Mistake: Other errors stem from a misunderstanding or incorrect model of a system or situation. The intention is incorrect. Causes include misunderstanding. 45 Human Computer Interaction  Reasoning and Problem Solving The human People build their own theories to explain behaviour and understand causal relationships in systems. These are called mental models. If these models are incorrect (different from the real system), errors occur. 46 Human Computer Interaction  Reasoning and Problem Solving Human experiences are more influenced by emotional states than cognitive abilities. The human For example, positive emotions can enhance creativity and problem-solving for complex issues, while negative emotions can cause confusion and make things more difficult. 47 Human Computer Interaction  Emotion There are various theories about how emotion works: James-Lange: Emotion is our interpretation of the psychological response to a stimulus. The human Cannon: Emotion is a psychological response to a stimulus. Schacter-Singer: Emotion results from our evaluation of psychological responses in a given context. Emotion involves both cognitive and physical responses to stimuli. 48 Human Computer Interaction  Emotion The effect is called the biological response to a physical stimulus The human Emotional states affect how we respond: Positive affect → creative problem-solving Negative affect → limited thinking "Negative affect can make even simple tasks difficult, while positive affect can make complex tasks easier." (Donald Norman) 49 Human Computer Interaction  Emotion In interface design: Stress increases the difficulty of problem-solving. Relaxed users are more tolerant of design flaws. The human Aesthetically pleasing and satisfying interfaces will enhance positive affect. 50 Human Computer Interaction  Individual Differences Every individual has different skills and limitations, which brings about individual differences. These differences include: Long-term: gender, physical and mental abilities The human Short-term: effects of stress and fatigue Changing: age Designers should consider individual differences when making decisions. 51 Human Computer Interaction  1. What is human computer interaction? 2. Why “human” is important according to human computer interaction? Questions 3. Why is human psychology and physiology important in software design? Explain with examples. 4. In terms of human-computer interaction a) Deduction b) Induction c) abduction why is it important? Explain with examples. 52 Human Computer Interaction  1. Are analogies important for an individual's understanding in human-computer interaction? Why? Give examples. 2. Can the design of a software affect human emotions for Questions better or worse? How? Do you know of such software? (Think of game software) 3. In terms of human-computer interaction, why are individual, social and cultural differences important? Explain with examples? 53 Human Computer Interaction 54 Human Computer Interaction 1. Computer Dr. Ayşe Kula  Components of Computer input devices text entry and pointing output devices Screen (small&large), digital paper virtual reality special interaction and display devices The Computer physical interaction e.g. sound, haptic, bio-sensing paper as output (print) and input (scan) memory RAM & permanent media, capacity & access processing speed of processing, networks 1 Human Computer Interaction  rs te 2 pu m Co of pe Ty  to understand human–computer interaction … need to understand computers! what goes in and out The Computer devices, paper, sensors, etc. what can it do? memory, processing, networks 3 Human Computer Interaction  How many computers … in your house? in your pockets? The Computer PC PDA TV, VCR, DVD, HiFi, mobilephone, camera cable/satellite TV smart card, card with microwave, cooker, magnetic strip? washing machine electronic car key central heating USB memory security system 4 Human Computer Interaction The Computer 5 Human Computer Interaction  Richer Interaction The Computer 6 Human Computer Interaction  text entry devices The Computer keyboards (QWERTY et al.) chord keyboards, phone pads handwriting, speech 7 Human Computer Interaction  text entry devices keyboards (QWERTY et al.) The Computer chord keyboards, phone pads handwriting, speech 8 Human Computer Interaction  Keyboards 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 The Computer 9 Human Computer Interaction  layout – QWERTY Standardised layout but … non-alphanumeric keys are placed differently accented symbols needed for different scripts minor differences between UK and USA keyboards The Computer 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. 10 Human Computer Interaction  alternative keyboard layouts Alphabetic keys arranged in alphabetic order not faster for trained typists The Computer not faster for beginners either! Dvorak 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 But - large social base of QWERTY typists produce market pressures not to change 11 Human Computer Interaction  special keyboards designs to reduce fatigue for RSI for one handed use e.g. the Maltron left-handed keyboard The Computer 12 Human Computer Interaction  Chord keyboards only a few keys - four or 5 letters typed as combination of keypresses compact size The Computer – ideal for portable applications short learning time – keypresses reflect letter shape fast – once you have trained BUT - social resistance, plus fatigue after extended use NEW – niche market for some wearables 13 Human Computer Interaction  phone pad and T9 entry use numeric keys with multiple presses 2–abc 6-mno 3-def 7-pqrs The Computer 4-ghi 8-tuv 5-jkl 9-wxyz hello = 4433555[pause]555666 surprisingly fast! T9 predictive entry type as if single key for each letter use dictionary to ‘guess’ the right word hello = 43556 … but 26 -> menu ‘am’ or ‘an’ 14 Human Computer Interaction  Handwriting recognition Text can be input into the computer, using a pen and a digesting tablet natural interaction The Computer Technical problems: capturing all useful information - stroke path, pressure, etc. in a natural manner segmenting joined up writing into individual letters interpreting individual letters coping with different styles of handwriting Used in PDAs, and tablet computers … … leave the keyboard on the desk! 15 Human Computer Interaction  Speech recognition Improving rapidly Most successful when: The Computer single user – initial training and learns peculiarities limited vocabulary systems Problems with external noise interfering imprecision of pronunciation large vocabularies different speakers 16 Human Computer Interaction  Numeric keypads for entering numbers quickly: calculator, PC keyboard The Computer for telephones not the same!! ATM like phone 17 Human Computer Interaction  Mouse Mouse Usage is Common and Easy It can have two or more button. The Computer There are two different operating methods: Mechanical: The ball underneath rotates. Optical: Light-emitting diodes on the bottom of the mouse detect movement. There are foot-operated types, such as: Pedals in cars Pedals on pianos Pedals on sewing machines 18 Human Computer Interaction  Touchpad It is mostly used in laptops. Good 'acceleration' settings are important. A fast stroke moves a lot of pixels per inch The Computer A slow stroke moves fewer pixels per inch 19 Human Computer Interaction  Trackball and Thumbweel The working rules are the same as the mouse. The ball moves the cursor. The Computer The ball can move the program left and right. They are preferred for use in computer games. 20 Human Computer Interaction  Joystick and Keyboard Nipple Joysticks are commonly used in computer games. They consist of a lever and a few buttons. The Computer The Keyboard Nipple is a miniature joystick mounted on the keyboard. 21 Human Computer Interaction  Touch-sensitive screen Computer technology allows electronic devices to be controlled by lightly touching them with fingers or special pens. There are many different areas of use, from mobile phones, laptops, tablets, PDAs, ATMs, calculators and TV buttons to space The Computer technologies. Price screen technologies vary according to their usage features. Today, 3 pseudo-touch technologies are used. Resistive technology; Surface wave technology; Infrared technology; 22 Human Computer Interaction  Stylus and light pen Stylus small pen-like pointer to draw directly on screen may use touch sensitive surface or magnetic detection The Computer used in PDA, tablets PCs and drawing tables Light Pen now rarely used uses light from screen to detect location BOTH … very direct and obvious to use but can obscure screen 23 Human Computer Interaction  Cursor keys Four keys (up, down, left, right) on keyboard. Very, very cheap, but slow. The Computer Useful for not much more than basic motion for text- editing tasks. No standardised layout, but inverted “T”, most common 24 Human Computer Interaction  Discrete positioning controls in phones, TV controls etc. The Computer cursor pads or mini-joysticks discrete left-right, up-down mainly for menu selection 25 Human Computer Interaction  bitmap displays screen is vast number of coloured dots The Computer 26 Human Computer Interaction  resolution and colour depth Resolution … used for number of pixels on screen (width x height) e.g. SVGA 1024 x 768, PDA perhaps 240x400 density of pixels (in pixels or dots per inch - dpi) typically between 72 and 96 dpi The Computer Aspect ratio ration between width and height 4:3 for most screens, 16:9 for wide-screen TV Colour depth: how many different colours for each pixel? black/white or greys only 256 from a pallete 8 bits each for red/green/blue = millions of colours 27 Human Computer Interaction  Cathode Ray Tube (CRT) Components 1.Electron Gun: Generates and accelerates electrons. The Computer 2.Deflection System: Uses magnetic or electric fields to steer the electron beam across the screen. 3.Phosphorescent Screen: Coated with materials that emit light when struck by electrons. 28 Human Computer Interaction  Cathode Ray Tube (CRT) How It Works 1. Electron Emission: The electron gun heats the cathode, releasing electrons. 2. Acceleration: These electrons are accelerated towards the screen by The Computer high voltage. 3. Deflection: The beam is directed to specific spots on the screen using deflection coils. 4. Image Formation: When the electrons hit the phosphorescent coating, they light up, creating an image. Advantages: High color accuracy, fast refresh rates, and good contrast ratios. Disadvantages: Bulky size, heavy weight, and lower energy efficiency compared to modern LCD and LED displays. 29 Human Computer Interaction  Health hints on Use CTR do not sit too close to the screen do not use very small fonts The Computer do not look at the screen for long periods without a break do not place the screen directly in front of a bright window work in well-lit surroundings «Take extra care if pregnant. but also posture, ergonomics, stress 30 Human Computer Interaction  Liquid Crystal Displays (LCD) Smaller, lighter, and … no radiation problems. Found on PDAs, portables and notebooks, on desktop and for home TV The Computer also used in dedicted displays: digital watches, mobile phones, HiFi controls How it works … Top plate transparent and polarised, bottom plate reflecting. Light passes through top plate and crystal, and reflects back to eye. Voltage applied to crystal changes polarisation and hence colour N.B. light reflected not emitted => less eye strain 31 Human Computer Interaction  special displays Random Scan (Directed-beam refresh, vector display) draw the lines to be displayed directly The Computer no jaggies lines need to be constantly redrawn rarely used except in special instruments Direct view storage tube (DVST) Similar to random scan but persistent => no flicker Can be incrementally updated but not selectively erased Used in analogue storage oscilloscopes 32 Human Computer Interaction  large displays used for meetings, lectures, etc. The Computer technology plasma – usually wide screen video walls – lots of small screens together projected – RGB lights or LCD projector – hand/body obscures screen – may be solved by 2 projectors + clever software back-projected – frosted glass + projector behind 33 Human Computer Interaction  situated displays displays in ‘public’ places large or small The Computer very public or for small group display only for information relevant to location or interactive use stylus, touch sensitive screem in all cases … the location matters meaning of information or interaction is related to the location 34 Human Computer Interaction  Digital paper what? thin flexible sheets updated electronically The Computer but retain display how? small spheres turned or channels with coloured liquid and contrasting spheres rapidly developing area 35 Human Computer Interaction  virtual reality and 3D interaction The Computer positioning in 3D space moving and grasping seeing 3D (helmets and caves) 37 Human Computer Interaction  positioning in 3D space cockpit and virtual controls steering wheels, knobs and dials … just like real! the 3D mouse The Computer six-degrees of movement: x, y, z + roll, pitch, yaw data glove fibre optics used to detect finger position VR helmets detect head motion and possibly eye gaze whole body tracking accelerometers strapped to limbs or reflective dots and video processing 38 Human Computer Interaction  pitch, yaw and roll The Computer 39 Human Computer Interaction  3D displays desktop VR The Computer ordinary screen, mouse or keyboard control perspective and motion give 3D effect seeing in 3D use stereoscopic vision VR helmets screen plus shuttered specs, etc. 40 Human Computer Interaction  VR headsets small TV screen for each eye slightly different angles The Computer 3D effect 41 Human Computer Interaction  VR motion sickness time delay move head … lag … display moves The Computer conflict: head movement vs. eyes depth perception headset gives different stereo distance but all focused in same plane conflict: eye angle vs. focus conflicting cues => sickness helps motivate improvements in technology 42 Human Computer Interaction  simulators and VR caves scenes projected on walls realistic environment The Computer hydraulic rams! real controls other people 43 Human Computer Interaction  physical controls, sensors etc. The Computer special displays and gauges sound, touch, feel, smell physical controls environmental and bio-sensing 44 Human Computer Interaction  dedicated displays analogue representations: dials, gauges, lights, etc. The Computer digital displays: small LCD screens, LED lights, etc. head-up displays found in aircraft cockpits show most important controls … depending on context 45 Human Computer Interaction  Sounds beeps, bongs, clonks, whistles and whirrs The Computer used for error indications confirmation of actions e.g. keyclick also see chapter 10 46 Human Computer Interaction  Touch, feel, smell touch and feeling important The Computer in games … vibration, force feedback in simulation … feel of surgical instruments called haptic devices texture, smell, taste current technology very limited 47 Human Computer Interaction  physical controls physical controls specialist controls needed … specialist industrial controls, consumer controls products, etc.needed … industrial controls, consumer products, etc. The Computer easy-clean easy-clean smooth buttons smooth buttons multi-function multi-function control control large buttons large buttons clear dials clear dials tiny buttons tiny buttons 48 Human Computer Interaction  physical controls specialist controls needed … industrial controls, consumer products, etc. The Computer easy-clean smooth buttons multi-function control large buttons clear dials tiny buttons  Environment and bio-sensing The Computer sensors all around us car courtesy light – small switch on door ultrasound detectors – security, washbasins RFID security tags in shops temperature, weight, location … and even our own bodies … iris scanners, body temperature, heart rate, galvanic skin response, blink rate 50 Human Computer Interaction  paper: printing and scanning The Computer print technology fonts, page description, WYSIWYG scanning, OCR 51 Human Computer Interaction  Printing image made from small dots allows any character set or graphic to be printed, The Computer critical features: resolution size and spacing of the dots measured in dots per inch (dpi) speed usually measured in pages per minute cost!! 52 Human Computer Interaction  Types of dot-based printers dot-matrix printers use inked ribbon (like a typewriter line of pins that can strike the ribbon, dotting the paper. The Computer typical resolution 80-120 dpi ink-jet and bubble-jet printers tiny blobs of ink sent from print head to paper typically 300 dpi or better. laser printer like photocopier: dots of electrostatic charge deposited on drum, which picks up toner (black powder form of ink) rolled onto paper which is then fixed with heat typically 600 dpi or better. 53 Human Computer Interaction The Computer 54 Human Computer Interaction  Fonts Font – the particular style of text Courier font The Computer Helvetica font Palatino font Times Roman font §´µº¿Â Ä¿~ (special symbol) Size of a font measured in points (1 pt about 1/72”) (vaguely) related to its height This is ten point Helvetica This is twelve point This is fourteen point This is eighteen point and this is twenty-four point 55 Human Computer Interaction  Fonts (ctd) Pitch fixed-pitch – every character has the same width The Computer e.g. Courier variable-pitched – some characters wider e.g. Times Roman – compare the ‘i’ and the “m” Serif or Sans-serif sans-serif – square-ended strokes e.g. Helvetica serif – with splayed ends (such as) e.g. Times Roman or Palatino 56 Human Computer Interaction  Readability of text lowercase easy to read shape of words The Computer UPPERCASE better for individual letters and non-words e.g. flight numbers: BA793 vs. ba793 serif fonts helps your eye on long lines of printed text but sans serif often better on screen 57 Human Computer Interaction  Page Description Languages Pages very complex different fonts, bitmaps, lines, digitised photos, etc. The Computer Can convert it all into a bitmap and send to the printer … but often huge ! Alternatively Use a page description language sends a description of the page can be sent, instructions for curves, lines, text in different styles, etc. like a programming language for printing! PostScript is the most common 58 Human Computer Interaction  Screen and page WYSIWYG What You See İs What You Get The Computer aim of word processing, etc. but … screen: 72 dpi, landscape image print: 600+ dpi, portrait can try to make them similar but never quite the same so … need different designs, graphics etc, for screen and print 59 Human Computer Interaction  Scanners Take paper and convert it into a bitmap Two sorts of scanner The Computer flat-bed: paper placed on a glass plate, whole page converted into bitmap hand-held: scanner passed over paper, digitising strip typically 3-4” wide Shines light at paper and note intensity of reflection 3D scanner colour or greyscale Typical resolutions from 600–2400 dpi 60 Human Computer Interaction  Scanners (ctd) Used in The Computer desktop publishing for incorporating photographs and other images document storage and retrieval systems, doing away with paper storage + special scanners for slides and photographic negatives 61 Human Computer Interaction  Optical character recognition OCR converts bitmap back into text different fonts The Computer create problems for simple “template matching” algorithms more complex systems segment text, decompose it into lines and arcs, and decipher characters that way page format columns, pictures, headers and footers 62 Human Computer Interaction The Computer memory short term and long term speed, capacity, compression formats, access 63 Human Computer Interaction  Short-term Memory - RAM Key Characteristics of RAM 1. Volatility: RAM is volatile, meaning it loses all stored data The Computer when the power is turned off. This distinguishes it from long- term storage like hard drives or SSDs. 2. Speed: RAM is much faster than traditional storage, allowing for quick read and write operations. This speed is crucial for system performance, enabling smooth multitasking and rapid data processing. 3. Accessibility: Data in RAM can be accessed randomly, meaning any byte of memory can be accessed without having to read through all preceding bytes. This contrasts with sequential access memory types, such as tape drives. 64 Human Computer Interaction  Long-term Memory - disks Hard Disk Drives (HDDs) Traditional magnetic storage devices with spinning disks (platters) that read and write data using read/write heads. Solid State Drives (SSDs) Storage devices that use NAND flash memory to store data without moving parts. The Computer Hybrid Drives (SSHDs) Combine the features of HDDs and SSDs by integrating a small amount of flash memory with traditional magnetic storage. Optical Discs Includes CDs, DVDs, and Blu-ray discs, which use laser technology to read and write data. Flash Drives and External SSDs Portable storage devices that use flash memory, allowing for easy data transfer between devices. Cloud Storage Remote storage accessed via the internet, allowing users to store data on servers maintained by third-party providers. 65 Human Computer Interaction  Blurring boundaries PDAs often use RAM for their main memory The Computer Flash-Memory used in PDAs, cameras etc. silicon based but persistent plug-in USB devices for data transfer 66 Human Computer Interaction  speed and capacity what do the numbers mean? The Computer some sizes (all uncompressed) … this book, text only ~ 320,000 words, 2Mb the Bible ~ 4.5 Mbytes scanned page ~ 128 Mbytes (11x8 inches, 1200 dpi, 8bit greyscale) digital photo ~ 10 Mbytes (2–4 mega pixels, 24 bit colour) video ~ 10 Mbytes per second (512x512, 12 bit colour, 25 frames per sec) 67 Human Computer Interaction  virtual memory Problem: running lots of programs + each program large not enough RAM The Computer Solution - Virtual memory : store some programs temporarily on disk makes RAM appear bigger But … swopping program on disk needs to run again copied from disk to RAM slows t h i n g s d o w n 68 Human Computer Interaction  Compression reduce amount of storage required lossless The Computer recover exact text or image – e.g. GIF, ZIP look for commonalities: text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C video: compare successive frames and store change lossy recover something like original – e.g. JPEG, MP3 exploit perception JPEG: lose rapid changes and some colour MP3: reduce accuracy of drowned out notes 69 Human Computer Interaction  Storage formats - text ASCII - 7-bit binary code for to each letter and character UTF-8 - 8-bit encoding of 16 bit character set The Computer RTF (rich text format) - text plus formatting and layout information SGML (standardized generalised markup language) - documents regarded as structured objects XML (extended markup language) - simpler version of SGML for web applications 70 Human Computer Interaction  Storage formats - media Images: many storage formats : The Computer (PostScript, GIFF, JPEG, TIFF, PICT, etc.) plus different compression techniques (to reduce their storage requirements) Audio/Video again lots of formats : (QuickTime, MPEG, WAV, etc.) compression even more important also ‘streaming’ formats for network delivery 71 Human Computer Interaction  methods of access large information store long time to search => use index The Computer what you index -> what you can access simple index needs exact match forgiving systems: Xerox “do what I mean” (DWIM) SOUNDEX – McCloud ~ MacCleod access without structure … free text indexing (all the words in a document) needs lots of space!! 72 Human Computer Interaction  processing and networks The Computer finite speed (but also Moore’s law) limits of interaction networked computing 73 Human Computer Interaction  Finite processing speed Designers tend to assume fast processors, and make interfaces more and more complicated The Computer But problems occur, because processing cannot keep up with all the tasks it needs to do cursor overshooting because system has buffered keypresses icon wars - user clicks on icon, nothing happens, clicks on another, then system responds and windows fly everywhere Also problems if system is too fast - e.g. help screens may scroll through text much too rapidly to be read 74 Human Computer Interaction  Limitations on interactive performance Computation bound Computation takes ages, causing frustration for the user Storage channel bound The Computer Bottleneck in transference of data from disk to memory Graphics bound Common bottleneck: updating displays requires a lot of effort - sometimes helped by adding a graphics co-processor optimised to take on the burden Network capacity Many computers networked - shared resources and files, access to printers etc. - but interactive performance can be reduced by slow network speed 75 Human Computer Interaction  Networked computing Networks allow access to … large memory and processing other people (groupware, email) The Computer shared resources – esp. the web Issues network delays – slow feedback conflicts - many people update data unpredictability 76 Human Computer Interaction 77 Human Computer Interaction Interaction Dr. Ayşe Kula  Interaction Models translations between user and system Ergonomics physical characteristics of interaction interaction Interaction Styles the nature of user/system dialog Context social, organizational, motivational 1 Human Computer Interaction  What is interaction? communication user  system interaction 2 Human Computer Interaction  models of interaction interaction terms of interaction Norman model interaction framework 3 Human Computer Interaction  Some terms of interaction domain – the area of work under study (e.g. graphic design) interaction goal – what you want to achieve (e.g. create a solid red triangle) task – how you go about doing it – ultimately in terms of operations or actions (e.g. … select fill tool, click over triangle) 4 Human Computer Interaction  Donald Norman’s model Seven stages user establishes the goal formulates intention interaction specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal Norman’s model concentrates on user’s view of the interface 5 Human Computer Interaction  Donald Norman’s model Norman’s interaction framework has 2 major phases: execution & evaluation interaction Goals Executions Evaluations System 6 Human Computer Interaction  Donald Norman’s model Goals Executions Evaluations interaction System 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 7 Human Computer Interaction  Donald Norman’s model Goals Executions Evaluations interaction System 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 8 Human Computer Interaction  Donald Norman’s model Goals Executions Evaluations interaction System 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 9 Human Computer Interaction  Donald Norman’s model Goals Executions Evaluations interaction System 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 10 Human Computer Interaction  Using Norman’s model Some systems are harder to use than others interaction Gulf of Execution user’s formulation of actions ≠ actions allowed by the system Gulf of Evaluation user’s expectation of changed system state ≠ actual presentation of this state 11 Human Computer Interaction  Human error - slips and mistakes slip understand system and goal correct formulation of action interaction incorrect action mistake may not even have right goal! Fixing things? slip – better interface design mistake – better understanding of system 12 Human Computer Interaction  According to you Norman’s Model is sufficient to understand for between human computer interaction? interaction Are there any limitations of the model? 13 Human Computer Interaction  Abowd and Beale framework extension of Norman… O their interaction framework has 4 parts output user interaction input S U system core task output I input each has its own unique language interaction Þ translation between languages problems in interaction = problems in translation 14 Human Computer Interaction  Using Abowd & Beale’s model user intentions ® translated into actions at the interface ® translated into alterations of system state interaction ® 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 15 Human Computer Interaction interaction 16 Human Computer Interaction  ergonomics interaction physical aspects of interfaces industrial interfaces 17 Human Computer Interaction  Ergonomics Study of the physical characteristics of interaction interaction Also known as human factors – but this can also be used to mean much of HCI! Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems 18 Human Computer Interaction  Ergonomics - examples arrangement of controls and displays e.g. controls grouped according to function or frequency of use, or sequentially interaction surrounding environment e.g. seating arrangements adaptable to cope with all sizes of user health issues e.g. physical position, environmental conditions (temperature, humidity), lighting, noise, use of colour e.g. use of red for warning, green for okay, awareness of colour-blindness etc. 19 Human Computer Interaction  Industrial interfaces Office interface vs. industrial interface? Context matters! interaction office industrial type of data textual numeric rate of change slow fast environment clean dirty … the oil soaked mouse! 20 Human Computer Interaction  Glass interfaces ? industrial interface: traditional … dials and knobs now … screens and keypads interaction glass interface + cheaper, more flexible, multiple representations, Vessel B Temp precise values 0 100 200 not physically located, loss of context, complex interfaces 113 may need both multiple representations of same information 21 Human Computer Interaction  Indirect manipulation office– direct manipulation user interacts with artificial world system interaction industrial – indirect manipulation user interacts with real world through interface interface plant issues.. feedback immediate delays feedback instruments 22 Human Computer Interaction  interaction styles interaction dialogue … computer and user distinct styles of interaction 23 Human Computer Interaction  Common interaction styles command line interface menus interaction natural language question/answer and query dialogue form-fills and spreadsheets WIMP (Windows, Icons, Menus, Pointer) point and click three–dimensional interfaces 24 Human Computer Interaction  Command line interface Way of expressing instructions to the computer directly function keys, single characters, short abbreviations, whole words, or a combination interaction suitable for repetitive tasks better for expert users than novices offers direct access to system functionality command names/abbreviations should be meaningful! Typical example: the Unix system 25 Human Computer Interaction  Menus Set of options displayed on the screen Options visible interaction less recall - easier to use rely on recognition so names should be meaningful Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators) Often options hierarchically grouped sensible grouping is needed Restricted form of full WIMP system 26 Human Computer Interaction  Natural language Familiar to user speech recognition or typed natural language interaction Problems vague ambiguous hard to do well! Solutions try to understand a subset pick on key words 27 Human Computer Interaction  Query interfaces Question/answer interfaces user led through interaction via series of questions interaction suitable for novice users but restricted functionality often used in information systems Query languages (e.g. SQL) used to retrieve information from database requires understanding of database structure and language syntax, hence requires some expertise 28 Human Computer Interaction  Form-fills Primarily for data entry or data retrieval Screen like paper form. Data put in relevant place interaction Requires good design obvious correction facilities 29 Human Computer Interaction  Spreadsheets first spreadsheet VISICALC, followed by Lotus 1-2-3 MS Excel most common today interaction sophisticated variation of form-filling. grid of cells contain a value or a formula formula can involve values of other cells e.g. sum of all cells in this column user can enter and alter data spreadsheet maintains consistency 30 Human Computer Interaction  WIMP Interface Windows Icons interaction Menus Pointers … or windows, icons, mice, and pull-down menus! default style for majority of interactive computer systems, especially PCs and desktop machines 31 Human Computer Interaction  Point and click interfaces used in.. multimedia interaction web browsers hypertext just click something! icons, text links or location on map minimal typing 32 Human Computer Interaction  Three dimensional interfaces virtual reality ‘ordinary’ window systems highlighting interaction visual affordance indiscriminate use just confusing! 3D workspaces use for extra virtual space light and occlusion give depth distance effects 33 Human Computer Interaction  elements of the wimp interface interaction windows, icons, menus, pointers +++ buttons, toolbars, palettes, dialog boxes 34 Human Computer Interaction  Windows Areas of the screen that behave as if they were independent can contain text or graphics interaction can be moved or resized can overlap and obscure each other, or can be laid out next to one another (tiled) scrollbars allow the user to move the contents of the window up and down or from side to side title bars describe the name of the window 35 Human Computer Interaction  Icons small picture or image interaction represents some object in the interface often a window or action windows can be closed down (iconised) small representation fi many accessible windows icons can be many and various highly stylized realistic representations. 36 Human Computer Interaction  Pointers important component WIMP style relies on pointing and selecting things interaction uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts wide variety of graphical images 37 Human Computer Interaction  Menus Choice of operations or services offered on the screen Required option selected with pointer interaction problem – take a lot of screen space solution – pop-up: menu appears when needed 38 Human Computer Interaction  Kinds of Menus Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu interaction fall-down menus - mouse just moves over bar! Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle easier to select item (larger target area) quicker (same distance to any option) … but not widely used! 39 Human Computer Interaction  Menus design issues which kind to use what to include in menus at all interaction words to use (action or description) how to group items choice of keyboard accelerators 40 Human Computer Interaction  Buttons individual and isolated regions within a display that can be selected to invoke an action interaction Special kinds radio buttons – set of mutually exclusive choices check boxes – set of non-exclusive choices 41 Human Computer Interaction  Toolbars long lines of icons … … but what do they do? interaction fast access to common actions often customizable: choose which toolbars to see choose what options are on it 42 Human Computer Interaction  Palettes and tear-off menus Problem menu not there when you want it interaction Solution palettes – little windows of actions shown/hidden via menu option e.g. available shapes in drawing package tear-off and pin-up menus menu ‘tears off’ to become palette 43 Human Computer Interaction  Dialogue boxes information windows that pop up to inform of an important event or request information. interaction