20130220100249chap2 human


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Experiential; which we perceive, act and react to events around us effectively. Example; driving car, reading a book, having conversation, playing a video game
    Reflective; thinking, comparing and decision making; leads to new ideas and creativity.
  • The rods are able to operate in conditions of bad light but they are unable to detect color.
    The cones require good light in order to operate and can detect color.
    The cones are concentrated at the front of the retina in an area called the fovea, and the rods at the sides.
  • Upside down T – both lines are equal
    Ponzo – the horizontal lines are equal
    Tichener – both central circles are the same sizes
  • Periphery of vision; a person may well be aware of the presence of an object without recognizing what it is. In order to see the object it is necessary to turn the head so that the front of the eyes can focus upon the object.
  • Most people see black dots where the intersection of the white lines occurs and white dots where the intersection of the black lines occur.
  • Color differ between culture, physical and tahap aktiviti (warm color R,Y and cold color B,G)
  • Audio is used as locator, attracting attention, annoying and distraction sources.
  • 20130220100249chap2 human

    1. 1. Chapter 2 : Human as the User Contents :  What is Cognition  The Senses  Human Sense : Vision  Human Sense : Hearing  Human Sense : Smell  Human Sense : Touch  Human Sense : Taste 1 MMG3033 Human Computer Interaction
    2. 2. Chapter 2 : Human As The User Objectives  Explain what is cognition and why it is important for interaction design.  Understand on how the processing of human memory.  Explain what are the human 5 senses and why it is important in interaction design. 2 MMG3033 Human Computer Interaction
    3. 3. Chapter 2 : Human As The User Overview  What is cognition?  What are users good and bad at?  Describe how cognition has been applied to interaction design  Theories of cognition    Mental models, theory of action Information processing External cognition, distributed cognition 3 MMG3033 Human Computer Interaction
    4. 4. Chapter 2 : Human As The User Why do we need to understand users?  Interacting with technology is cognitive  We need to take into account cognitive processes involved and cognitive limitations of users  We can provide knowledge about what users can and cannot be expected to do  Identify and explain the nature and causes of problems users encounter  Supply theories, modelling tools, guidance and methods that can lead to the design of better interactive products 4 MMG3033 Human Computer Interaction
    5. 5. Chapter 2 : Human As The User What is Cognition?  What is goes on in our heads when we carry out our everyday activities.  It involves cognitive processes, like thinking, remembering, learning, daydreaming, decision making, seeing, reading, writing and talking.  Norman (1993) distinguishes between 2 general modes; experiential and reflective cognition 5 MMG3033 Human Computer Interaction
    6. 6. Chapter 2 : Human As The User What goes on in the mind? 6 MMG3033 Human Computer Interaction
    7. 7. Chapter 2 : Human As The User Core cognitive aspects       Attention Perception and recognition Memory Learning Reading, speaking and listening Problem-solving, planning, reasoning and decisionmaking Most relevant to interaction design are attention, perception and recognition, and memory 7 MMG3033 Human Computer Interaction
    8. 8. Chapter 2 : Human As The User Attention      Selecting things to concentrate on at a point in time from the mass of stimuli around us Allows us to focus on information that is relevant to what we are doing Involves audio and/or visual senses Focussed and divided attention enables us to be selective in terms of the mass of competing stimuli but limits our ability to keep track of all events Information at the interface should be structured to capture users’ attention, e.g. use perceptual boundaries (windows), colour, reverse video, sound and flashing lights 8 MMG3033 Human Computer Interaction
    9. 9. Chapter 2 : Human As The User Activity 1 Find the price of a double room at the Holiday Inn in Bradley First screen MMG3033 Human Computer Interaction Second screen 9
    10. 10. Chapter 2 : Human As The User Activity 1  Tullis (1987) found that the two screens produced quite different results     1st screen - took an average of 5.5 seconds to search 2nd screen - took 3.2 seconds to search Why, since both displays have the same density of information (31%)? Spacing   In the 1st screen the information is bunched up together, making it hard to search In the 2nd screen the characters are grouped into vertical categories of information making it easier 10 MMG3033 Human Computer Interaction
    11. 11. Chapter 2 : Human As The User Design implications for attention     Make information salient when it needs attending to at a given stage of task. Use techniques like animated graphics, color, underlining, ordering of items, sequencing of different information and spacing of items Avoid cluttering the interface with too much information. Interfaces that are plain are much easier to use, like the Google search Engine. 11 MMG3033 Human Computer Interaction
    12. 12. Chapter 2 : Human As The User An example of over-use of graphics Our Situation  State the bad news  Be clear, don’t try to obscure the situation 12 MMG3033 Human Computer Interaction
    13. 13. Chapter 2 : Human As The User Perception and recognition How information is acquired from the environment, via different sense organs, e.g : eyes, ears, fingers and transformed into experiences of objects, events, sound and tastes.  Obvious implication is to design representations that are readily perceivable, e.g.  Text should be legible  Icons should be easy to distinguish and read  13 MMG3033 Human Computer Interaction
    14. 14. Chapter 2 : Human As The User Is color contrast good? Find italian 14 MMG3033 Human Computer Interaction
    15. 15. Chapter 2 : Human As The User Are borders and white space better? Find french 15 MMG3033 Human Computer Interaction
    16. 16. Chapter 2 : Human As The User Activity 2  Weller (2004) found people took less time to locate items for information that was grouped   Some argue that too much white space on web pages is detrimental to search   using a border (2nd screen) compared with using color contrast (1st screen) Makes it hard to find information Do you agree? 16 MMG3033 Human Computer Interaction
    17. 17. Chapter 2 : Human As The User Which is easiest to read and why? What is the time? What is the time? What is the time? What is the time? What is the time? 17 MMG3033 Human Computer Interaction
    18. 18. Chapter 2 : Human As The User Design implications : Perception       Representations of information need to be designed to be perceptible and recognizable Icons and other graphical representations should enable users to readily distinguish their meaning Bordering and spacing are effective visual ways of grouping information Sounds should be audible and distinguishable Speech output should enable users to distinguish between the set of spoken words Text should be legible and distinguishable from the background 18 MMG3033 Human Computer Interaction
    19. 19. Chapter 2 : Human As The User Memory     Involves first encoding and then retrieving knowledge We don’t remember everything - involves filtering and processing what is attended to Context is important in affecting our memory (i.e., where, when) Well known fact that we recognize things much better than being able to recall things   Better at remembering images than words Why interfaces are largely visual 19 MMG3033 Human Computer Interaction
    20. 20. Chapter 2 : Human As The User Processing in memory  Encoding is first stage of memory    determines which information is attended to in the environment and how it is interpreted The more attention paid to something, and the more it is processed in terms of thinking about it and comparing it with other knowledge, and The more likely it is to be remembered  e.g., when learning about HCI, it is much better to reflect upon it, carry out exercises, have discussions with others about it, and write notes than just passively read a book, listen to a lecture or watch a video about it 20 MMG3033 Human Computer Interaction
    21. 21. Chapter 2 : Human As The User Activity 3      Try to remember the dates of all the members of your family’s and your closest friends’ birthdays. How many can you remember? Try to remember the cover of the last two magazines you bought or rented Which was easiest? Why? People are very good at remembering visual cues about things  e.g., the color of items, the location of objects and marks on an object They find it more difficult to learn and remember arbitrary material  e.g., birthdays and phone numbers 21 MMG3033 Human Computer Interaction
    22. 22. Chapter 2 : Human As The User Design implications : Memory    Don’t overload users’ memories with complicated procedures for carrying out tasks. Design interfaces that promote recognition rather than recall by using menus, icons and consistently placed objects. Provide users with a variety of ways of encoding digital information to help them remember where they have stored them  e.g., categories, color, flagging, time stamping 22 MMG3033 Human Computer Interaction
    23. 23. Chapter 2 : Human As The User The Senses  Human and the 5 senses : 1) 2) 3) 4) 5) Eyes Ear Nose Haptic Tongue : : : : : 83% 10% 4% 2% 1% 23 MMG3033 Human Computer Interaction
    24. 24. Chapter 2 : Human As The User The Human Eye • Light → retina → Change shape (accommodation) → rods & cones → fovea → colour detection → electric impluse → brain → interpretation • Fovea (area of highest resolution): about 2 degrees of arc 75% of the human visual operations are related to the fovea. 24 MMG3033 Human Computer Interaction
    25. 25. Chapter 2 : Human As The User Human Vision  Light reception takes place in the retina, which contains 2 types of photoreceptors: Cones Rods Mediated visual impression degrees of brightness Distribution over retina Fovea only not in the fovea Sensitivity for brightness  Colors Low High Three types of cones: red-sensitive: 64%, high concentration in fovea area green-sensitive: 32%, high concentration in fovea area blue-sensitive: 2%, evenly distributed over retina; none in the center of the fovea. 25 MMG3033 Human Computer Interaction
    26. 26. Chapter 2 : Human As The User Human Vision  Certain cell in the eye’s retina produce the sensation of shades of gray and other cells produce the sensation of color using receptors of red, green and blue.  These receptors are located in different areas of the retina, so some color especially blue are perceived to be deeper than red. 26 MMG3033 Human Computer Interaction
    27. 27. Chapter 2 : Human As The User Vision : Main Characteristic  When light enters the eye it has two main characteristics:   Brightness (intensity) Colour (wavelength)  In software development, avoid creating any confusing effects.  This can occur with certain types of 3D icons, example : can be caused by the misuse of colour. 27 MMG3033 Human Computer Interaction
    28. 28. Chapter 2 : Human As The User Vision This effects are called optical illusion. 28 MMG3033 Human Computer Interaction http://www.at-bristol.org.uk/Optical/default.htm
    29. 29. Chapter 2 : Human As The User Gestalt Theories In this illustration you can test your natural tendency to organize visual patterns. See how you group the titled squares and see a cross plus. MMG3033 Human Computer Interaction Here twelve dots have been arranged to form a directional symbol. We can “see” each dot separately but the arrow is greater than the sum of the dots and becomes the collective Gestalt. 29
    30. 30. Chapter 2 : Human As The User Vision : Visual Field  Definition of Visual Field is the size of a display screen, the layout of the display and of any controls.  Too much movement of the head can cause discomfort and also increase the chances of eye strain if re-focusing needs to occur.  Usually movement is allowed for and thus provides a range of about 100-120º from the straight-ahead position (periphery of vision). 30 MMG3033 Human Computer Interaction
    31. 31. Chapter 2 : Human As The User Vision : Color     Color is particularly effective in calling attention to specific information on a display, differentiating information types and grouping similar items. Color is an important component in design. Some people are unaware of their colour blindness – about 8% of men and 1% of women. The most common form of colour blindness is red-green. Children like bright colours – catch the imagination. 31 MMG3033 Human Computer Interaction
    32. 32. Chapter 2 : Human As The User Psychological Implications Color Red Implications associated with blood, and with feelings that are energetic, exciting, passionate or erotic Orange color of flesh, or the friendly warmth of the hearth fire Green positive mode, nature (plant life, forests), life, stability, restfulness, naturalness. Blue coolness, distance, spirituality, or perhaps reserved elegance Violet fantasy, playfulness, impulsiveness, and dream states 32 MMG3033 Human Computer Interaction
    33. 33. Chapter 2 : Human As The User Vision : Color  Color is classified to:  Hue  Brightness  Saturation Red Green Blue 33 MMG3033 Human Computer Interaction
    34. 34. Chapter 2 : Human As The User Color : Hue    Hue is an aspect of chromatic colors such as red and green. Achromatic colors such as black, white and neutral grey, do not have hue. Hue corresponds to the normal meaning color – changes in wavelength. Hue is located along the border of the color wheel. These are spectral colors. 34 MMG3033 Human Computer Interaction
    35. 35. Chapter 2 : Human As The User Color : Brightness  Brightness (intensity or luminance) refers to the shades of gray going from white (very high brightness) through gray (medium brightness) to black (very low brightness).  Brightness varies amongst the chromatic and achromatic colors.  Area of dark and light meet it is possible to see strange effects – optical illusion. Example : Hermann Grid 35 MMG3033 Human Computer Interaction
    36. 36. Chapter 2 : Human As The User Color : Saturation  Saturation (or chromatic) is the relative amount of pure light that must be mixed with the white light to produce the perceived color.  The more black, white or grey that is mixed with the color then the less saturated it becomes.  When the color is entirely white, saturation is said to be zero. 36 MMG3033 Human Computer Interaction
    37. 37. Chapter 2 : Human As The User Color : Saturation 37 MMG3033 Human Computer Interaction
    38. 38. Chapter 2 : Human As The User Colour : Design 38 MMG3033 Human Computer Interaction
    39. 39. Chapter 2 : Human As The User Colour : Design 39 MMG3033 Human Computer Interaction
    40. 40. Chapter 2 : Human As The User Colour : Design 40 MMG3033 Human Computer Interaction
    41. 41. Chapter 2 : Human As The User Colour : Design Classification of colour in physically and culturally have to be determined. Societies classify colour differently. 41 MMG3033 Human Computer Interaction
    42. 42. Chapter 2 : Human As The User Color : The Implication       Do not use blue for small objects (since human sensitivity for blue is very low, particularly in the fovea) Blue is a good background color (since human sensitivity for blue is very low and since receptors for blue are roughly evenly distributed over the retina) Neighboring objects should not merely differ by their amount of blue. a a a (red, red with 50% blue, red with 100% blue) If red and green are used for small objects, these should be in the center (since the sensitivity for these colors is far higher in the center). If red and green are used as signals (warnings) in the periphery, they should have additional emphasis (like blinking or change in size). Black, white, yellow and blue can be used in the periphery since the sensitivity of the retina is roughly the same. 42 MMG3033 Human Computer Interaction
    43. 43. Chapter 2 : Human As The User Font : Design 1. Some people argue that san serif fonts are easier to read than serif fonts. But anyway, it is a bad practice to mix too many fonts. (san serif ; without extra strokes, serif fonts ; have extra strokes) 2. The size of the screen will dictate how much information can be comfortably contained. A cluttered screen is difficult to interpret because it is a lot for the eye and brain to absorb. 3. The important items should be displayed according to their priority and should be occupy the same place on the screen. 43 MMG3033 Human Computer Interaction
    44. 44. Chapter 2 : Human As The User Font : Design 44 MMG3033 Human Computer Interaction
    45. 45. Chapter 2 : Human As The User Font : Types 45 MMG3033 Human Computer Interaction
    46. 46. Chapter 2 : Human As The User Font : Design Sometimes the type of fonts can also means expression of human feeling. Mode Font Aggresive Traditional Classic 46 MMG3033 Human Computer Interaction
    47. 47. Chapter 2 : Human As The User Hearing  In HCI, the second most important means of communication is sound.  Hearing or audition is a response to pressure. It tells us about changes that occur at various distance away from us.  When these sound waves reach the ears, they cause a series of mechanical pressure changes which trigger the auditory receptors 47 MMG3033 Human Computer Interaction
    48. 48. Chapter 2 : Human As The User Hearing  This causes responses in the brain and the sensation of hearing. 48 MMG3033 Human Computer Interaction
    49. 49. Chapter 2 : Human As The User Hearing : Sound Waves  Sound waves vary in : 1. Amplitude  The height of the wave crest : ‘Loudness’  Sound appears to be louder as its amplitude increase. 2. Wavelength  The distance apart between each wave crest. 3. Frequency  The number of waves per second : ‘Pitch’  Pitch increases with the increase in frequency.  Pitch is how high or how a sound is. 49 MMG3033 Human Computer Interaction
    50. 50. Chapter 2 : Human As The User Hearing : Pitch & Loudness  Frequency is measured in hertz (Hz) while the loudness of sound is decribed in decibles.  Sensitivity to frequency and loudness varied between individuals and can be different for the same person at different time. 50 MMG3033 Human Computer Interaction
    51. 51. Chapter 2 : Human As The User The use of the Sound  Sound is used as a locator i.e. locating things.  “You cannot decide not to listen whereas you can decide not to look”.  Use sound for feedback and attracting attention when :  The information is short and simple.  The information will not be referred later.  For alerts and warnings when an immediate response is needed.  The visual system is already overburdened.  The user is moving about from place to place.  A verbal response is needed.  Poor illumination makes vision unreliable.0 MMG3033 Human Computer Interaction 51
    52. 52. Chapter 2 : Human As The User Touch  Touch or haptic channel is a very important sense for the blinds.  It is useful in noisy (either visual or audio) environments.  Tactile feedback is important in the use of keyboard – spongy or heavy touch  Touch is important in the development of devices such as keyboards.  The speed at which a typist can type will be affected by the feel of the keyboard and how it responds to key press. MMG3033 Human Computer Interaction 52
    53. 53. Chapter 2 : Human As The User Taste  The sense of taste provides information about what should or should not be eaten.  The receptors are the taste buds which respond to chemicals that are dissolved in water.  On average, a human being has about 10,000 taste buds mostly on the tongue and some other regions of the mouth.  Messages are passed from these receptors to the brain. 53 MMG3033 Human Computer Interaction
    54. 54. Chapter 2 : Human As The User Taste  There are 4 basic tastes : 1. 2. 3. 4. Bitter Salty Sour Sweet 54 MMG3033 Human Computer Interaction
    55. 55. Chapter 2 : Human As The User Smell  Smell or olfaction provides information about chemicals in the air. These excite receptors located at the top of the nasal cavity.  Taste and smell are not well developed in people. As yet there are not real uses for either of these senses though both can evoke strong emotional responses. 55 MMG3033 Human Computer Interaction
    56. 56. Chapter 2 : Human As The User Summary     Cognition comprises many processes including thinking, attention, learning, memory, perception, decision making, planning, reading, speaking and listening. The way an interface is designed can greatly affect how well people can perceive, attend, learn and remember how to carry out their tasks. Of the 5 sense, vision and hearing are the most important for human computer systems at present, though touch is being used for some systems and has a part to play in input devices. Too many colors can be confusing for the user. Avoid color combinations like red and green which may confusing for color-blind users. MMG3033 Human Computer Interaction 56