ITD2334 – Rekabentuk Maklumat & Antaramuka

1. ITD2334 – Rekabentuk Maklumat & Antaramuka Lesson 1 – The Human, The Computer & The Interaction

2. The Human • Limited in capacity to process information – important implications for design • Information received and responds given via a number of I/O channel • Information stored in memory • Information processed and applied • Emotion influence • Share common capabilities but each has differences – should not be ignored ITS3214 – Lesson 1

3. Input-Output Channel • A person’s interaction with the outside world occurs through information being received and sent: input & output • Interaction with computers: • Output by computers • Response by providing input to the computer • Input in human occurs mainly through senses and output through the motor control of the effectors ITS3214 – Lesson 1

4. … cont’d • Five major senses • Sight, hearing, touch, taste and smell • Most important for HCI – sight, hearing & touch • Effectors: • Limbs, fingers, eyes, head and vocal system • Interaction with computers • Fingers play the primary role (typing, mouse) • Some use of voice, eye, head and body position ITS3214 – Lesson 1

5. … cont’d • Applications that use GUI (graphical user interface) – with menus, icons and windows • How does the interaction go? • How do you receive information? • Sight? • Ear? • Touch? ITS3214 – Lesson 1

6. Vision • Two stages in vision • physical reception of stimulus • processing and interpretation of stimulus ITS3214 – Lesson 1

7. The Eye - physical reception • mechanism for receiving light and transforming it into electrical energy • light reflects from objects • images are focused upside-down on retina • retina contains rods for low light vision and cones for colour vision • ganglion cells (brain!) detect pattern and movement ITS3214 – Lesson 1

8. Interpreting the signal • Size and depth • visual angle indicates how much of view object occupies(relates to size and distance from eye) • visual acuity is ability to perceive detail (limited) • familiar objects perceived as constant size (in spite of changes in visual angle when far away) • cues like overlapping help perception of size and depth ITS3214 – Lesson 1

9. … cont’d • Brightness • subjective reaction to levels of light • affected by luminance of object • measured by just noticeable difference • visual acuity increases with luminance as does flicker • Colour • made up of hue, intensity, saturation • cones sensitive to colour wavelengths • blue acuity is lowest • 8% males and 1% females colour blind ITS3214 – Lesson 1

10. Reading • Several stages: • visual pattern perceived • decoded using internal representation of language • interpreted using knowledge of syntax, semantics, pragmatics • Reading involves saccades and fixations • Perception occurs during fixations • Word shape is important to recognition • Negative contrast improves reading from computer screen ITS3214 – Lesson 1

11. Hearing • Provides information about environment:distances, directions, objects etc. • Physical apparatus: • outer ear – protects inner and amplifies sound • middle ear – transmits sound waves as vibrations to innerear • inner ear – chemical transmitters are released and cause impulses in auditory nerve • Sound • Pitch - sound frequency • Loudness - amplitude • Timbre - type or quality • Humans can hear frequencies from 20Hz to 15kHz • less accurate distinguishing high frequencies than low. ITS3214 – Lesson 1

12. Touch • Provides important feedback about environment. • May be key sense for someone who is visually impaired. • Stimulus received via receptors in the skin: • thermoreceptors – heat and cold • nociceptors – pain • mechanoreceptors – pressure(some instant, some continuous) • Some areas more sensitive than others e.g. fingers. • Kinethesis - awareness of body position • affects comfort and performance. ITS3214 – Lesson 1

13. Movement • Time taken to respond to stimulus: reaction time + movement time • Movement time dependent on age, fitness etc. • Reaction time - dependent on stimulus type: • visual ~ 200ms • auditory ~ 150 ms • pain ~ 700ms • Increasing reaction time decreases accuracy in the unskilled operator but not in the skilled operator. ITS3214 – Lesson 1

14. Human Memory • Let’s play the memory game! • L T J • M C B W • X N Q R C • O J Q P S Y • N C U Q X B E • V T J X E Q R Z • I F X Z E O W B Q • O C B D R I E X G W ITS3214 – Lesson 1

15. Sensory memoriesIconicEchoicHaptic Short-term memoryorworking memory Long-termmemory Attention Rehearsal … cont’d A model of the structure of memory ITS3214 – Lesson 1

16. … cont’d • Our everyday activity relies on memory • Memory contains knowledge of actions or procedures • Allows repeated actions, to use languages, to use new information received via senses • Sense of identity – preserving information from past experiences ITS3214 – Lesson 1

17. … cont’d • 3 types of memory or memory functions • Sensory buffers (sensory memory) • Short-term memory (working memory) • Long-term memory ITS3214 – Lesson 1

18. Sensory memory • Act as buffers for stimuli received through senses • Exists for each sensory channel • Iconic memory (visual stimuli) • Echoic memory (aural stimuli) • Haptic memory (touch) • Constantly overwritten by new information • Remains very briefly, about 0.5 seconds (iconic) • Echoic: ability to ascertain direction from which the sound originates – allows playback ITS3214 – Lesson 1

19. Short-term Memory • Acts as a ‘scratch pad’ for temporary recall of information • Store information which is only required • Can be accessed rapidly, about 70ms • Decays rapidly too – 200 ms • Limited capacity (remember the Memory Game?) • Usually about 7 ± 2 digits (or in chunks) ITS3214 – Lesson 1

20. Long-term Memory • Main resource • Store factual information, experiential knowledge, procedural rules of behavior – all things that we ‘know’ • Huge capacity (could be unlimited) • Slow access time (1/10th of a second) • Forgetting occurs more slowly • Long-term storage of information • Through rehearsal ITS3214 – Lesson 1

21. … cont’d • May store information in a semantic network ITS3214 – Lesson 1

22. Emotions • Various theories of how emotion works • James-Lange: emotion is our interpretation of a physiological response to a stimuli • Cannon: emotion is a psychological response to a stimuli • Schacter-Singer: emotion is the result of our evaluation of our physiological responses, in the light of the whole situation we are in • Emotion clearly involves both cognitive and physical responses to stimuli ITS3214 – Lesson 1

23. … cont’d • The biological response to physical stimuli is called affect • Affect influences how we respond to situations • positive  creative problem solving • negative  narrow thinking “Negative affect can make it harder to do even easy tasks; positive affect can make it easier to do difficult tasks” (Donald Norman) ITS3214 – Lesson 1

24. … cont’d • Implications for interface design • stress will increase the difficulty of problem solving • relaxed users will be more forgiving of shortcomings in design • aesthetically pleasing and rewarding interfaces will increase positive affect ITS3214 – Lesson 1

25. The Computer • Comprises various elements that affects the user • Input devices for interactive use – allow data entry, drawing, selection from screen • Output display device for interactive use • VR and 3D visualization • Paper output and input • Memory • Processing ITS3214 – Lesson 1

26. Interactivity Long ago in a galaxy far away … 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 • the user in control (most of the time) • doing rather than thinking … Is faster always better? ITS3214 – Lesson 1

27. The Keyboard • QWERTY layout – the standard layout • Used commonly in English-speaking countries • AZERTY layout – standard layout for French-speaking countries • DVORAK layout – similar to QWERTY but assigns letters to different keys • Designed to help people reach faster typing speed • Reduce fatigue ITS3214 – Lesson 1

28. Special Keyboard • designs to reduce fatigue for RSI • for one handed use • e.g. the Maltron left-handed keyboard ITS3214 – Lesson 1

29. Phone pad and T9 entry • use numeric keys withmultiple presses 2 – a b c 6 - m n o 3 - d e f 7 - p q r s 4 - g h i 8 - t u v 5 - j k l 9 - w x y z • 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’ ITS3214 – Lesson 1

30. Handwriting recognition • Text can be input into the computer, using a pen and a digesting tablet • natural interaction • 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! ITS3214 – Lesson 1

31. Speech recognition • Improving rapidly • Most successful when: • single user – initial training and learns peculiarities • limited vocabulary systems • Problems with • external noise interfering • imprecision of pronunciation • large vocabularies • different speakers ITS3214 – Lesson 1

32. 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 * 0 # 0 . = Numeric keypads • for entering numbers quickly: • calculator, PC keyboard • for telephones not the same!! ATM like phone telephone calculator ITS3214 – Lesson 1

33. Other devices (I/O) • Mouse • Trackball • Touch pad • Joystick • Touch screen • Tablets • Eyegaze • Stylus/pen ITS3214 – Lesson 1

34. Questions… • When do you use trackball instead of a mouse? ITS3214 – Lesson 1

35. CRT Monitor • Stream of electrons emitted from electron gun, focused and directed by magnetic fields, hit phosphor-coated screen which glows • used in TVs and computer monitors ITS3214 – Lesson 1

36. Health Hazards of CRT • X-rays: largely absorbed by screen (but not at rear!) • UV- and IR-radiation from phosphors: insignificant levels • Radio frequency emissions, plus ultrasound (~16kHz) • Electrostatic field - leaks out through tube to user. Intensity dependant on distance and humidity. Can cause rashes. • Electromagnetic fields (50Hz-0.5MHz). Create induction currents in conductive materials, including the human body. Two types of effects attributed to this: visual system - high incidence of cataracts in VDU operators, and concern over reproductive disorders (miscarriages and birth defects). ITS3214 – Lesson 1

37. Health Hints • do not sit too close to the screen • do not use very small fonts • 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 ITS3214 – Lesson 1

38. Other Display Devices • LCD (liquid crystal display) • 3D and VR display • Random scan • Direct view storage tube (DVST) • Plasma • Video walls • Projected • Back-projected ITS3214 – Lesson 1

39. Sounds • beeps, bongs, clonks, whistles and whirrs • used for error indications • confirmation of actions e.g. keyclick ITS3214 – Lesson 1

40. Touch & Feel • touch and feeling important • in games … vibration, force feedback • in simulation … feel of surgical instruments • called haptic devices ITS3214 – Lesson 1

41. Fonts • Font – the particular style of text • Courier font • 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 ITS3214 – Lesson 1

42. … cont’d Pitch • fixed-pitch – every character has the same width • 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 ITS3214 – Lesson 1

43. Readability of text • lowercase • easy to read shape of words • UPPERCASE • better for individual letters and non-wordse.g. flight numbers: BA793 vs. ba793 • serif fonts • helps your eye on long lines of printed text • but sans serif often better on screen ITS3214 – Lesson 1

44. The Interaction • Address the translation between what the user wants and what system does – use interaction models • Ergonomics looks at physical characteristics of the interaction • Dialog between user and system • Takes place within a social and organizational context – affects both user and system ITS3214 – Lesson 1

45. What is it? • communication • user system • but is that all … ? ITS3214 – Lesson 1

46. Interaction terms domain – the area of work under study e.g. graphic design 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 Note … • traditional interaction … • use of terms differs a lot especially task/goal !!! ITS3214 – Lesson 1

47. Ergonomics • Study of the physical characteristics of 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 ITS3214 – Lesson 1

48. Ergonomics - examples • arrangement of controls and displays e.g. controls grouped according to function or frequency of use, or sequentially • 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. ITS3214 – Lesson 1

49. Common interaction styles • command line interface • menus • natural language • question/answer and query dialogue • form-fills and spreadsheets • WIMP • point and click • three–dimensional interfaces ITS3214 – Lesson 1

50. Command line interface • Way of expressing instructions to the computer directly • function keys, single characters, short abbreviations, whole words, or a combination • 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, DOS ITS3214 – Lesson 1