Itd2334 rekabentuk maklumat antaramuka
Download
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