itd2334 rekabentuk maklumat antaramuka
Download
Skip this Video
Download Presentation
ITD2334 – Rekabentuk Maklumat & Antaramuka

Loading in 2 Seconds...

play fullscreen
1 / 59

ITD2334 – Rekabentuk Maklumat & Antaramuka - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

ITD2334 – Rekabentuk Maklumat & Antaramuka. Lesson 1 – The Human, The Computer & The Interaction. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' ITD2334 – Rekabentuk Maklumat & Antaramuka' - howard


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
itd2334 rekabentuk maklumat antaramuka

ITD2334 – Rekabentuk Maklumat & Antaramuka

Lesson 1 – The Human, The Computer & The Interaction

the human
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

input output channel
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

cont d
… 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

cont d1
… 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

vision
Vision
  • Two stages in vision
    • physical reception of stimulus
    • processing and interpretation of stimulus

ITS3214 – Lesson 1

the eye physical reception
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

interpreting the signal
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

cont d2
… 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

reading
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

hearing
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

touch
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

movement
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

human memory
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

cont d3

Sensory memoriesIconicEchoicHaptic

Short-term memoryorworking memory

Long-termmemory

Attention

Rehearsal

… cont’d

A model of the structure of memory

ITS3214 – Lesson 1

cont d4
… 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

cont d5
… cont’d
  • 3 types of memory or memory functions
    • Sensory buffers (sensory memory)
    • Short-term memory (working memory)
    • Long-term memory

ITS3214 – Lesson 1

sensory memory
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

short term memory
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

long term memory
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

cont d6
… cont’d
  • May store information in a semantic network

ITS3214 – Lesson 1

emotions
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

cont d7
… 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

cont d8
… 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

the computer
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

interactivity
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

the keyboard
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

special keyboard
Special Keyboard
  • designs to reduce fatigue for RSI
  • for one handed use
    • e.g. the Maltron left-handed keyboard

ITS3214 – Lesson 1

phone pad and t9 entry
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

handwriting recognition
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

speech recognition
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

numeric keypads

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

other devices i o
Other devices (I/O)
  • Mouse
  • Trackball
  • Touch pad
  • Joystick
  • Touch screen
  • Tablets
  • Eyegaze
  • Stylus/pen

ITS3214 – Lesson 1

questions
Questions…
  • When do you use trackball instead of a mouse?

ITS3214 – Lesson 1

crt monitor
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

health hazards of crt
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

health hints
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

other display devices
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

sounds
Sounds
  • beeps, bongs, clonks, whistles and whirrs
  • used for error indications
  • confirmation of actions e.g. keyclick

ITS3214 – Lesson 1

touch feel
Touch & Feel
  • touch and feeling important
    • in games … vibration, force feedback
    • in simulation … feel of surgical instruments
    • called haptic devices

ITS3214 – Lesson 1

fonts
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

cont d9
… 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

readability of text
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

the interaction
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

what is it
What is it?
  • communication
  • user system
  • but is that all … ?

ITS3214 – Lesson 1

interaction terms
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

ergonomics
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

ergonomics examples
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

common interaction styles
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

command line interface
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

menus
Menus
  • Set of options displayed on the screen
  • Options visible
    • 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

ITS3214 – Lesson 1

natural language
Natural language
  • Familiar to user
  • speech recognition or typed natural language
  • Problems
    • vague
    • ambiguous
    • hard to do well!
  • Solutions
    • try to understand a subset
    • pick on key words

ITS3214 – Lesson 1

query interfaces
Query interfaces
  • Question/answer interfaces
    • user led through interaction via series of questions
    • 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

ITS3214 – Lesson 1

form fills
Form-fills
  • Primarily for data entry or data retrieval
  • Screen like paper form.
  • Data put in relevant place
  • Requires
    • good design
    • obvious correctionfacilities

ITS3214 – Lesson 1

spreadsheets
Spreadsheets
  • first spreadsheet VISICALC, followed by Lotus 1-2-3MS Excel most common today
  • 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

ITS3214 – Lesson 1

wimp interface
WIMP Interface
  • Windows
  • Icons
  • Menus
  • Pointers
  • … or windows, icons, mice, and pull-down menus!
  • default style for majority of interactive computer systems, especially PCs and desktop machines

ITS3214 – Lesson 1

point and click interfaces
Point and click interfaces
  • used in ..
    • multimedia
    • web browsers
    • hypertext
  • just click something!
    • icons, text links or location on map

ITS3214 – Lesson 1

three dimensional interfaces

flat buttons …

click me!

… or sculptured

Three dimensional interfaces
  • virtual reality
  • ‘ordinary’ window systems
    • highlighting
    • visual affordance
    • indiscriminate usejust confusing!
  • 3D workspaces
    • use for extra virtual space
    • light and occlusion give depth
    • distance effects

ITS3214 – Lesson 1

elements of wimp
Elements of WIMP
  • Windows
  • Icons
  • Menus
  • Pointers
  • Buttons
  • Palettes
  • Toolbars
  • Dialog boxes

ITS3214 – Lesson 1

ad